Merge pull request #264 from omnifed/262-feature-add-consistent-types…

…-in-react

262 feature add consistent types in react

docs/app/react/tags/components/closable-tag-preview.tsx

@@ -10,7 +10,7 @@ export function ClosableTagPreview(props: TagPreviewProps) {
   }, [])
 
   return (
-    <Tag shape="pill" onClick={handleClick}>
+    <Tag shape="pill" onClick={handleClick} usage="filled">
       Closable
     </Tag>
   )

docs/app/react/tags/components/tag-preview.tsx

@@ -14,8 +14,8 @@ export function BasicTagPreview() {
 
 export function OutlineTagPreview() {
   return (
-    <Tag shape="rounded" usage="outline">
-      Outline
+    <Tag shape="rounded" usage="outlined">
+      Outlined
     </Tag>
   )
 }
@@ -184,13 +184,13 @@ function MatchTagPalettePreview(props: MatchTagProps) {
       )
     case 'info':
       return (
-        <Tag palette="info" shape="rounded" usage="outline">
+        <Tag palette="info" shape="rounded" usage="outlined">
           Info
         </Tag>
       )
     case 'success':
       return (
-        <Tag palette="success" shape="rounded" usage="outline">
+        <Tag palette="success" shape="rounded" usage="outlined">
           Success
         </Tag>
       )

docs/app/react/tags/dev.mdx

@@ -50,13 +50,13 @@ function BasicTagPreview() {
 ```
 </CodePreview>
 
-### Outline
+### Outlined
 
 <CodePreview preview={<OutlineTagPreview />}>
 ```tsx title="tag.tsx"
 import { Tag } from '@cerberus-design/react'
 
-function OutlineTagPreview() {
+function OutlinedTagPreview() {
   return (
     <Tag shape="rounded" usage="outline">
       Outline
@@ -204,7 +204,7 @@ function CustomTagPreview() {
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
   palette?: Sentiment
   shape?: 'rounded' | 'pill'
-  usage?: 'filled' | 'outline'
+  usage?: 'filled' | 'outlined'
 }
 export interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
   shape?: 'pill'

figma/src/tag.figma.tsx

@@ -20,7 +20,7 @@ const props = {
   }),
   usage: figma.enum('Usage', {
     filled: 'filled',
-    outlined: 'outline',
+    outlined: 'outlined',
   }),
   // Figma specific
   text: figma.textContent('label'),

packages/panda-preset/src/recipes/tag.ts

@@ -24,7 +24,7 @@ export const tag: RecipeConfig<RecipeVariantRecord> = defineRecipe({
     palette: tagPalettes,
     usage: {
       filled: filledUsage,
-      outline: {
+      outlined: {
         bgColor: 'inherit',
         border: '1.5px solid',
         borderColor: 'colorPalette.border.initial',

packages/react/src/components/Button.tsx

@@ -1,17 +1,14 @@
 import type { ButtonHTMLAttributes } from 'react'
-import { cx } from '@cerberus/styled-system/css'
+import { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'
 import { button } from '@cerberus/styled-system/recipes'
 
 /**
  * This module contains the Button component.
  * @module
  */
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  palette?: 'action' | 'danger'
-  usage?: 'filled' | 'outlined' | 'text'
-  shape?: 'sharp' | 'rounded'
-}
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+  RecipeVariantProps<typeof button>
 
 /**
  * A component that allows the user to perform actions

packages/react/src/components/IconButton.tsx

@@ -1,22 +1,19 @@
 import type { ButtonHTMLAttributes } from 'react'
-import { cx } from '@cerberus/styled-system/css'
+import { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'
 import { iconButton } from '@cerberus/styled-system/recipes'
-import type { ButtonProps } from './Button'
 
 /**
  * This module contains the Icon Button component.
  * @module
  */
 
-export interface IconButtonProps
+export interface IconButtonRawProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
   ariaLabel: string
-  palette?: ButtonProps['palette']
-  usage?: ButtonProps['usage']
-  shape?: 'circle'
-  size?: 'sm' | 'lg'
   tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'
 }
+export type IconButtonRecipeProps = RecipeVariantProps<typeof iconButton>
+export type IconButtonProps = IconButtonRawProps & IconButtonRecipeProps
 
 /**
  * A component that allows the user to perform actions using an icon

packages/react/src/components/Tag.tsx

@@ -3,39 +3,42 @@ import { Close } from '@cerberus/icons'
 import { Show } from './Show'
 import { css, cx } from '@cerberus/styled-system/css'
 import { iconButton, tag } from '@cerberus/styled-system/recipes'
-import type { ConditionalValue } from '@cerberus/styled-system/types'
+import type {
+  ConditionalValue,
+  RecipeVariantProps,
+} from '@cerberus/styled-system/types'
 
 /**
  * This module contains the tag component.
  * @module
  */
 
-export type NonActionablePalette = ConditionalValue<
-  'neutral' | 'info' | 'success' | 'warning' | 'danger'
->
-export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
-  palette?: NonActionablePalette
-  shape?: 'rounded' | 'pill'
-  usage?: 'filled' | 'outline'
-}
-export interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
-  palette?: NonActionablePalette
-  shape?: 'pill'
+export type TagRecipeProps = RecipeVariantProps<typeof tag>
+export type StaticTagProps = HTMLAttributes<HTMLSpanElement> &
+  TagRecipeProps & {
+    onClick?: never
+  }
+export type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
+  palette?: ConditionalValue<
+    'neutral' | 'info' | 'success' | 'warning' | 'danger'
+  >
   onClick: () => void
-  usage?: 'filled'
+  shape: 'pill'
+  usage: 'filled'
 }
+export type TagProps = StaticTagProps | ClickableTagProps
 
 /**
  * The Tag component is used to display a meta descriptions.
+ * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)
  * @example
  * ```tsx
  * <Tag>Tag</Tag>
  * ```
  */
-export function Tag(
-  props: PropsWithChildren<TagProps | ClickableTagProps>,
-): JSX.Element {
-  const { palette, shape: initShape, onClick, usage, ...nativeProps } = props
+export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
+  const { shape: initShape, onClick, usage, ...nativeProps } = props
+  const palette = props?.palette ?? 'neutral'
   const isClosable = Boolean(onClick)
   const shape = isClosable ? 'pill' : initShape
   const closableStyles = isClosable

tests/panda-preset/recipes/tag.test.ts

@@ -50,8 +50,8 @@ describe('tag recipe', () => {
     })
   })
 
-  test('should have an outline usage variant', () => {
-    expect(tag.variants?.usage.outline).toMatchObject({
+  test('should have an outlined usage variant', () => {
+    expect(tag.variants?.usage.outlined).toMatchObject({
       bgColor: 'inherit',
       border: '1.5px solid',
       borderColor: 'colorPalette.border.initial',

tests/react/components/tag.test.tsx

@@ -30,12 +30,12 @@ describe('Tag', () => {
     ).toBeTrue()
   })
 
-  test('should render an outline tag', () => {
-    render(<Tag usage="outline">it works</Tag>)
+  test('should render an outlined tag', () => {
+    render(<Tag usage="outlined">it works</Tag>)
     expect(
       screen
         .getByText(/it works/i)
-        .classList.contains('cerberus-tag--usage_outline'),
+        .classList.contains('cerberus-tag--usage_outlined'),
     ).toBeTrue()
   })
 
@@ -59,7 +59,7 @@ describe('Tag', () => {
 
   test('should render a pill when onClick is provided', () => {
     render(
-      <Tag shape="rounded" onClick={jest.fn()}>
+      <Tag shape="pill" onClick={jest.fn()} usage="filled">
         it works
       </Tag>,
     )
@@ -82,7 +82,7 @@ describe('Tag', () => {
   test('should render a tag with a close button', async () => {
     const onClick = jest.fn()
     render(
-      <Tag shape="pill" onClick={onClick}>
+      <Tag shape="pill" onClick={onClick} usage="filled">
         it works
       </Tag>,
     )