Feature: Propriedade asChild nos componentes Button e Text (#17)

* Adicionando typescript localmente para o parser @typescript-eslint/parser * Adicionando exportação de tipagem CSS com as configurações do stitches * Configurações de coverage de testes * Adicionada propriedade asChild ao componente Text Removida propriedade as do componente Text * Adicionada propriedade light ao componente Button * Adicionado propriedade asChild ao componente Button * Correções na documentação do componente Text * Arquivo de testes * Remoção de conteúdo da área de testes --------- Co-authored-by: Leandro Pedroso <lpedroso@meudroz.com>
droztech · Feb 10, 2023 · 74aff80 · 74aff80
1 parent 8b51e64
commit 74aff80
Show file tree

Hide file tree

Showing 14 changed files with 182 additions and 94 deletions.
diff --git a/apps/docs/src/stories/Button/Root.stories.tsx b/apps/docs/src/stories/Button/Root.stories.tsx
@@ -35,6 +35,15 @@ export default {
       },
       type: { name: 'boolean', required: false },
     },
+    light: {
+      control: 'boolean',
+      description: 'Aplica o estilo light',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+      type: { name: 'boolean', required: false },
+    },
     disabled: {
       control: { type: 'boolean' },
       description: 'Desabilita o botão',
@@ -44,6 +53,16 @@ export default {
       },
       type: { name: 'boolean', required: false },
     },
+    asChild: {
+      control: { type: 'boolean' },
+      description:
+        'Ao passar essa propriedade com o valor true, o componente irá se transformar no componente filho. É obrigatório passar um children ao utilizar essa propriedade. <b>Verifique a tag ao inspecionar o componente na DOM</b>',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+      type: { name: 'boolean', required: false },
+    },
     onClick: {
       action: 'clicked',
       description: 'Define o evento de click',
@@ -54,11 +73,18 @@ export default {
     children: '',
     size: 'md',
     ghost: false,
+    light: false,
     disabled: false,
+    asChild: false,
   },
 } as Meta<ButtonRootProps>
 
 export const Comum: StoryObj<ButtonRootProps> = {
+  argTypes: {
+    asChild: {
+      control: 'none',
+    },
+  },
   args: {
     children: 'Clique aqui',
   },
@@ -69,6 +95,9 @@ export const ComIcone: StoryObj<ButtonRootProps> = {
     children: {
       control: 'none',
     },
+    asChild: {
+      control: 'none',
+    },
   },
   args: {
     children: [
@@ -85,6 +114,9 @@ export const ComIconeNaEsquerda: StoryObj<ButtonRootProps> = {
     children: {
       control: 'none',
     },
+    asChild: {
+      control: 'none',
+    },
   },
   args: {
     children: [
@@ -95,3 +127,15 @@ export const ComIconeNaEsquerda: StoryObj<ButtonRootProps> = {
     ],
   },
 }
+
+export const ComoTagAnchor: StoryObj<ButtonRootProps> = {
+  argTypes: {
+    children: {
+      control: 'none',
+    },
+  },
+  args: {
+    asChild: true,
+    children: <a href="/">Link</a>,
+  },
+}
diff --git a/apps/docs/src/stories/Text.stories.tsx b/apps/docs/src/stories/Text.stories.tsx
@@ -60,33 +60,39 @@ export default {
       },
       type: { name: 'string', required: false },
     },
-    as: {
-      control: { type: 'text' },
+    asChild: {
+      control: { type: 'boolean' },
       description:
-        'Nome de uma tag na qual o componente irá se transformar. Verifique a tag ao inspecionar o componente na DOM',
+        'Ao passar essa propriedade com o valor true, o componente irá se transformar no componente filho. É obrigatório passar um children ao utilizar essa propriedade. <b>Verifique a tag ao inspecionar o componente na DOM</b>',
       table: {
-        type: {
-          summary: 'string',
-        },
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
       },
-      type: { name: 'string', required: false },
+      type: { name: 'boolean', required: false },
     },
   },
   args: {
     children: 'Hello World',
     size: 'md',
     color: '$gray900',
     underline: false,
+    asChild: false,
   },
 } as Meta<TextProps>
 
 export const Comum: StoryObj<TextProps> = {}
 
 export const ComoTagAnchor: StoryObj<TextProps> = {
+  argTypes: {
+    children: {
+      control: 'none',
+    },
+  },
   args: {
-    as: 'a',
+    asChild: true,
     underline: true,
     link: 'primary',
     color: 'primary',
+    children: <a href="/">Link</a>,
   },
 }
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
@@ -1,5 +1,3 @@
-import { Button, Input, Text } from '@coaktion/visu'
-import { Envelope } from 'phosphor-react'
 import * as C from './styles/index'
 
 function App() {
@@ -8,39 +6,6 @@ function App() {
       <C.Container>
         {/* ========================= TEST AREA ========================= */}
 
-        <Button.Root onClick={() => {console.log('click')}}>Botão</Button.Root>
-
-        <Button.Root onClick={() => {console.log('click')}}>
-          Botão com Ícone
-          <Button.Icon>
-            <Envelope />
-          </Button.Icon>
-        </Button.Root>
-
-        <Input.Root>
-          <Input.Input placeholder='Input' />
-        </Input.Root>
-
-        <Input.Root>
-          <Input.Input placeholder='Input com ícone' />
-          <Input.Icon>
-            <Envelope/>
-          </Input.Icon>
-        </Input.Root>
-
-        <Input.Root>
-          <Input.Input placeholder='Input com ação no ícone' />
-          <Input.Icon onClick={() => {console.log('click')}}>
-            <Envelope/>
-          </Input.Icon>
-        </Input.Root>
-
-        <Text>Text</Text>
-
-        <Text color='primary' size="lg" underline link="primary" as='a'>
-          Text como link
-        </Text>
-
         {/* ========================= TEST AREA ========================= */}
       </C.Container>
     </C.Main>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,9 +26,10 @@
     "lint-staged": "^13.1.0",
     "phosphor-react": "latest",
     "prettier": "2.8.3",
-    "turbo": "latest",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "turbo": "latest",
+    "typescript": "^4.9.5"
   },
   "engines": {
     "node": ">=14.0.0"

diff --git a/packages/visu/jest.config.ts b/packages/visu/jest.config.ts
@@ -6,16 +6,13 @@ const config = {
   },
   moduleNameMapper: {
     '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
-    '^@/(.*)$': "<rootDir>$1",
-    '^@library(.*)$': "<rootDir>/src/library$1",
-    '^@styles(.*)$': "<rootDir>/src/styles$1"
+    '^@/(.*)$': '<rootDir>$1',
+    '^@library(.*)$': '<rootDir>/src/library$1',
+    '^@styles(.*)$': '<rootDir>/src/styles$1',
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
-  coveragePathIgnorePatterns: [
-    "/node_modules/",
-    "src/styles",
-    "src/library/index.ts"
-  ]
+  collectCoverageFrom: ['src/library/**/**'],
+  coveragePathIgnorePatterns: ['src/library/index.ts'],
 }
 
 export default config
diff --git a/packages/visu/src/App.tsx b/packages/visu/src/App.tsx
@@ -1,5 +1,3 @@
-import { Text } from '@library'
-
 import * as Component from '@styles/index'
 
 function App() {
@@ -8,10 +6,6 @@ function App() {
       <Component.Container>
         {/* ========================= TEST AREA ========================= */}
 
-        <Text color="primary" link="primary" size="3xl">
-          Hello World
-        </Text>
-
         {/* ========================= TEST AREA ========================= */}
       </Component.Container>
     </Component.Main>

diff --git a/packages/visu/src/__tests__/Button/Root.test.tsx b/packages/visu/src/__tests__/Button/Root.test.tsx
@@ -1,6 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-
 import { Button } from '@library'
+import { fireEvent, render, screen } from '@testing-library/react'
 
 describe('Button Root tests', () => {
   const buttonText = 'Clique aqui'
@@ -55,4 +54,15 @@ describe('Button Root tests', () => {
     fireEvent.click(element)
     expect(buttonClick).toHaveBeenCalledTimes(1)
   })
+
+  it('Should render a different element using the "asChild" property', () => {
+    render(
+      <Button.Root data-testid="element" asChild>
+        <h1>Hello World</h1>
+      </Button.Root>
+    )
+    const element = screen.getByTestId('element')
+
+    expect(element.tagName).toBe('H1')
+  })
 })
diff --git a/packages/visu/src/__tests__/Text.test.tsx b/packages/visu/src/__tests__/Text.test.tsx
@@ -1,8 +1,7 @@
+import { Text } from '@library'
 import { render, screen } from '@testing-library/react'
 import { Info } from 'phosphor-react'
 
-import { Text } from '@library'
-
 describe('Text tests', () => {
   const textText = 'Hello World'
 
@@ -21,16 +20,20 @@ describe('Text tests', () => {
   })
 
   it('Should render a text element with a child JSX element', () => {
-    render(<Text data-testid="element"><Info /></Text>)
+    render(
+      <Text data-testid="element">
+        <Info />
+      </Text>
+    )
     const element = screen.getByTestId('element')
 
     expect(element.firstElementChild?.tagName).toBe('svg')
   })
 
-  it('Should render a different element using the "as" property', () => {
+  it('Should render a different element using the "asChild" property', () => {
     render(
-      <Text data-testid="element" as="h1">
-        {textText}
+      <Text data-testid="element" asChild>
+        <h1>{textText}</h1>
       </Text>
     )
     const element = screen.getByTestId('element')

diff --git a/packages/visu/src/library/Button/index.tsx b/packages/visu/src/library/Button/index.tsx
@@ -1,17 +1,44 @@
-import { ButtonHTMLAttributes, ComponentProps, HTMLAttributes } from 'react'
+import { CSS } from '@/stitches.config'
+import { Slot } from '@radix-ui/react-slot'
+import { VariantProps } from '@stitches/react'
+import { ButtonHTMLAttributes, HTMLAttributes } from 'react'
 
 import * as Component from './style'
 
 // ========================= ROOT =========================
 
 export interface ButtonRootProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
-    ComponentProps<typeof Component.Root> {
+    VariantProps<typeof Component.RootStyle> {
+  asChild?: boolean
   children: React.ReactNode
+  css?: CSS
 }
 
-const ButtonRoot = ({ children, ...rest }: ButtonRootProps): JSX.Element => {
-  return <Component.Root {...rest}>{children}</Component.Root>
+const ButtonRoot = ({
+  children,
+  asChild = false,
+  css,
+  ghost = false,
+  light = false,
+  size = 'md',
+  ...rest
+}: ButtonRootProps): JSX.Element => {
+  const ComponentRoot = asChild ? Slot : 'button'
+
+  return (
+    <ComponentRoot
+      className={Component.RootStyle({
+        css,
+        ghost,
+        light,
+        size,
+      })}
+      {...rest}
+    >
+      {children}
+    </ComponentRoot>
+  )
 }
 
 ButtonRoot.displayName = 'Button.Root'