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[]:

const customColors = require("design-system-toshyro/lib/customColors");

module.exports = {
  content: [
    // ...
    "./node_modules/design-system-toshyro/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      colors: {
        default: {
          50: 'hsl(240, 6%, 10%)',
          100: 'hsl(240, 4%, 16%)',
          200: 'hsl(240, 5%, 26%)',
          300: 'hsl(240, 5%, 34%)',
          400: 'hsl(240, 4%, 46%)',
          500: 'hsl(240, 5%, 65%)',
          600: 'hsl(240, 5%, 84%)',
          700: 'hsl(240, 6%, 90%)',
          800: 'hsl(240, 5%, 96%)',
          900: 'hsl(0, 0%, 98%)',
          DEFAULT: 'hsl(240, 5%, 26%)',
        },
        primary: {
          50: 'hsl(212, 100%, 10%)',
          100: 'hsl(212, 100%, 19%)',
          200: 'hsl(212, 100%, 29%)',
          300: 'hsl(212, 100%, 38%)',
          400: 'hsl(212, 100%, 47%)',
          500: 'hsl(212, 92%, 58%)',
          600: 'hsl(212, 92%, 69%)',
          700: 'hsl(212, 92%, 79%)',
          800: 'hsl(212, 92%, 90%)',
          900: 'hsl(213, 92%, 95%)',
          DEFAULT: 'hsl(212, 100%, 47%)',
        },
        secondary: {
          50: 'hsl(270, 67%, 9%)',
          100: 'hsl(270, 67%, 19%)',
          200: 'hsl(270, 67%, 28%)',
          300: 'hsl(270, 67%, 38%)',
          400: 'hsl(270, 67%, 47%)',
          500: 'hsl(270, 59%, 58%)',
          600: 'hsl(270, 59%, 68%)',
          700: 'hsl(270, 59%, 79%)',
          800: 'hsl(270, 59%, 89%)',
          900: 'hsl(270, 62%, 95%)',
          DEFAULT: 'hsl(270, 59%, 58%)',
        },
        success: {
          50: 'hsl(146, 78%, 9%)',
          100: 'hsl(146, 80%, 17%)',
          200: 'hsl(146, 79%, 26%)',
          300: 'hsl(146, 80%, 35%)',
          400: 'hsl(146, 79%, 44%)',
          500: 'hsl(146, 62%, 55%)',
          600: 'hsl(146, 63%, 66%)',
          700: 'hsl(146, 62%, 77%)',
          800: 'hsl(146, 61%, 89%)',
          900: 'hsl(147, 64%, 95%)',
          DEFAULT: 'hsl(146, 79%, 44%)',
        },
        warning: {
          50: 'hsl(37, 75%, 11%)',
          100: 'hsl(37, 75%, 22%)',
          200: 'hsl(37, 74%, 33%)',
          300: 'hsl(37, 74%, 44%)',
          400: 'hsl(37, 91%, 55%)',
          500: 'hsl(37, 91%, 64%)',
          600: 'hsl(37, 91%, 73%)',
          700: 'hsl(37, 91%, 82%)',
          800: 'hsl(37, 91%, 91%)',
          900: 'hsl(55, 92%, 95%)',
          DEFAULT: 'hsl(37, 91%, 55%)',
        },
        danger: {
          50: 'hsl(340, 85%, 10%)',
          100: 'hsl(339, 87%, 20%)',
          200: 'hsl(339, 86%, 31%)',
          300: 'hsl(339, 87%, 41%)',
          400: 'hsl(339, 90%, 51%)',
          500: 'hsl(339, 90%, 61%)',
          600: 'hsl(339, 91%, 71%)',
          700: 'hsl(339, 90%, 80%)',
          800: 'hsl(340, 92%, 90%)',
          900: 'hsl(339, 92%, 95%)',
          DEFAULT: 'hsl(339, 90%, 51%)',
        },
        
        // ...
      }
    },
  },
  plugins: [
    require('tailwind-scrollbar'),
  ],
  variants: {
    scrollbar: ['rounded']
  },
  darkMode: "class",
  ...
}

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" 
    onSubmit={(e)=>console.log(e)}
  >
    Entrar
  </Button>
</Form>

Button

• O componente Button recebe os seguintes parâmetros:

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

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

  variant   =  enum Variant

  disabled  =  boolean             

  full      =  boolean       

  loading   =  boolean

  leftIcon  =  <Icone />

  rightIcon =  <Icone />
>
  {title}
</Button>

Input

• O componente Input recebe os seguintes parâmetros:

<Input  
  name        =  string
  
  label       =  Texto do Input

  validation  =  Validação

  mask        = string  //e.g. "99999-999"
            //'*' - letras e números
            //'9' - apenas números
            //'A' - apenas letras

  variant     =  enum Variant
  
  saveMask    =  boolean

  maskChar    =  string

  loading     =  boolean

  ...

  [configurações padrões dos inputs]
/>

Select

• O componente Select recebe os seguintes parâmetros:

<Select
  name        =  string
  
  label       =  string
  
  options     =  AutocompleteOption[]

  placeholder =  string;

  validation  =  Validação

  variant     =  enum Variant
  
  loading     =  boolean

  defaultValue  =  string | number
/>

Autocomplete

• O componente Autocomplete recebe os seguintes parâmetros:

<Autocomplete
  name          =  string

  label         =  string

  options       =  AutocompleteOption[]

  placeholder   =  string;
    
  validation    =  Validação
    
  variant       =  enum Variant
    
  loading       =  boolean
    
  defaultValue  =  string | number
/>

Também temos os exemplos de cada componente no Design System Toshyro