design-system-toshyro

DS Toshyro

Status: Developing

Requisitos:

• Ter o tailwind instalado

Para pegar a estilização:

Adicione o seguinte trecho no diretório tailwind.config.js, dentro de module.exports na aba content[]:

module.exports = {
  content: [
    ...
    "./node_modules/design-system-toshyro/**/*.{js,ts,jsx,tsx}"
  ],
  plugins: [
    require('tailwind-scrollbar'),
  ],
  variants: {
    scrollbar: ['rounded']
  },
  ...
}

Estrutura padrão:

• Todos os componentes precisam estar sendo envolvidos por Form ou um ResetForm:

<Form> ou <ResetForm>

    ...

</Form> ou </ResetForm>

Estrutura de Login exemplo:

<Form>
  <Input name="user" label="Usuário" />
  <Input name="pass" label="Senha" type="password" />
  <Button name="submit" title="Entrar" onSubmit={(e)=>console.log(e)} />
</Form>

Button

• O componente Button recebe os seguintes parâmetros:

<Button 
  title     =  [Titulo do botão]           

  onSubmit  =  executa a função passada dentro de um "handleSubmit(<aqui>)"

  onClick   =  executa a função passada quando o botão for clicado

  size      =  "sm" | "md" | "lg"          

  variant   =  "submit" | "cancel" | "next"

  disabled  =  desabilita o botão              

  full      =  ocupa 100% da width         

  loading   =  loading no botão 

  leftIcon  =  'No icon' | 'IoPerson' | 'IoLockClosed' | 'IoEyeOff'

  rightIcon =  'No icon' | 'IoPerson' | 'IoLockClosed' | 'IoEyeOff'
/>

Checkbox

• O componente Checkbox recebe os seguintes parâmetros:

<Checkbox 
  name          =  Nome que salva o valor do campo
  
  isChecked     =  Marcado por padrão
  
  value         =  Valor do campo
  
  label         =  Texto ao lado da checkbox

  labelPosition =  'end' | 'start' | 'bottom' | 'top';

  disabled      =  desabilita o campo

  variant?      = 'default' | 'favorite' | 'save';
/>

Input

• O componente Input recebe os seguintes parâmetros:

<Input 
  name       =  Nome que salva o valor do campo
  
  label      =  Texto do Input

  validation =  Validação

  variant    =  'default' | 'secundary' | 'tertiary'
/>