Componentes do design system

[jemluz]

Story: Text Input

A propriedade decorators no export default do stories permite que a gente customize a view do nosso elemento.

A propriedade sempre retorna um array de funções, em que cada função recebe por padrão um parametro Story (que se trata do próprio componente, nesse caso o TextInput)

Não confunda a decorators com a propriedade args

• args: renderiza um filho no componente (dentro dele)
• decorators: personaliza a view como vc quiser

No caso abaixo foi criado um box em volta do input com uma label para melhorar a apresentação.

export default {
  title: 'Form/Text Input',
  component: TextInput,
  args: {},
  decorators: [
    (Story) => {
      return (
        <Box
          as="label"
          css={{ display: 'flex', flexDirection: 'column', gap: '$2' }}
        >
          <Text size="sm">Email address</Text>
          {Story()}
        </Box>
      )
    },
  ],
} as Meta<TextInputProps>

[jemluz]

Story: Checkbox

Utilizando data state para estilos personalizados

No checkbox do radix ui temos um atributo no html chamado data-state (que pode ser checked ou unchecked)

Utilizamos o seletor &[data-state="checked"] para configurar estilos especificos para cada estado (checked ou unchecked)

'&[data-state="checked"]': {
    backgroundColor: '$ignite300',
  },

Animações no stitches

Podemos usar a função keyframes para definir animações

const slideIn = keyframes({
  from: {
    transform: 'translateY(-100%)',
  },
  to: {
    transform: 'translateY(0)',
  },
})

const slideOut = keyframes({
  from: {
    transform: 'translateY(0)',
  },
  to: {
    transform: 'translateY(-100%)',
  },
})

Em seguida aplicamos elas no estilo desejado

export const CheckboxIndicator = styled(Checkbox.Indicator, {
  color: '$white',
  width: '$4',
  height: '$4',

  '&[data-state="checked"]': {
    animation: `${slideIn} 200ms ease-out`,
  },

  '&[data-state="unchecked"]': {
    animation: `${slideOut} 200ms ease-out`,
  },
})

[jemluz]

Story: Multi Step

No caso do componente multi step, precisamos usar a propriedade size para inferir a quantidade total de steps/passos.

Passando props para o stitches