@olaisaac/design-system

isaac Design System

Dependencias

---

• Material UI
• Storybook

Ferramentas sendo utilizadas

---

• Typescript
• Rollup
• Babel
• Yarn

Comece a usar

---

O design system do isaac está público no npm e você pode encontrá-lo nesse link Para instalar utilize o gerenciador de bibliotecas que está usando em sua aplicação.
npm install @olaisaac/design-system ou yarn add @olaisaac/design-system

Depois disso você já pode começar a importar componentes dele e utilizar em sua aplicação. Ex:

import { Button } from '@olaisaac/design-system';

Como criar/alterar um componente

---

Atualmente temos dois modelos de componentes, aqueles que são construídos em cima do material ui e styled component (Material Based) e os que são construídos styled components (Pure).

IMPORTANTE: Lembre-se de usar os tokens!
Atualmente temos três modelos de tokens: Primitivos, Semânticos e Por componente. No entanto ainda não conseguimos construir o melhor padrão de tokens, então temos componentes usando os três padrões. Como não decidimos qual padrão utilizar, pensando no melhor padrão para design e desenvolvimento, os últimos componentes estão sendo criados usando os tokens primitivos, que são os que tem a menor possibilidade de serem alterados.

Material based

A maioria dos componentes usam esse padrão, é possível por exemplo seguir padrões de código utilizado no componente Button

Vou explicar um pouco sobre os pedaços do código para futura alteração / criação.

A linha abaixo, cria um tipo que contém as novas variações que serão aceitas pelo Button do DS, de acordo com o que foi desenhado pela equipe de design

type ButtonVariation = 'primary' | 'ghost'

Em alguns casos, vamos implementar nossas próprias props em cima de um componente do Material, para isso, primeiro criamos uma interface para nossas props.

export interface CustomProps {
  loading?: boolean
  variation?: ButtonVariation
}

Uma das coisas mais importantes sobre DS é manter a consistência. Então sempre que possível remova todas as props que são permitidas via Material que não devem ser utilizadas via DS. Para isso utilize o tipo utilitários do typescript Omit para remover as props. Caso o componente tenha suas próprias props lembre-se de unificar as duas assim como é feito nas últimas linhas do exemplo abaixo.

export interface ButtonProps
  extends Omit<
      MuiButtonProps,
      | 'centerRipple'
      | 'color'
      | 'disableElevation'
      | 'disableFocusRipple'
      | 'disableRipple'
      | 'disableTouchRipple'
      | 'endIcon'
      | 'focusRipple'
      | 'size'
      | 'TouchRippleProps'
      | 'variant'
    >,
    CustomProps {}

Aqui está sendo definido qual o valor padrão de algumas das props do Material. Elas não precisam necessariamente ficar separadas aqui, poderia ser utilizadas diretamente no código do componente.

const muiProps: MuiButtonProps = {
  color: 'primary',
  disableElevation: true,
}

Como estamos estilizando em cima do Material nesse caso, esse código utiliza a variante mais próxima ao layout final do material para que menos alterações sejam necessárias realizar no componente.

const materialVariant = (variation: ButtonVariation) => {
  const options: Record<ButtonVariation, MuiButtonProps['variant']> = {
    primary: 'contained',
    ghost: 'text',
  }
  return options[variation]
}

Este passo cria o novo componente Button a partir das configurações criadas acima, lembrando a nova interface criada, setar valores padrões para o componente do Material e caso necessário alteração da parte do conteúdo como foi feito para o caso do botão estar carregando.

export const Button = ({
  variation = 'primary',
  loading = false,
  disabled = false,
  startIcon = null,
  children,
  ...props
}: ButtonProps) => {
  return (
    <StyledMuiButton
      {...muiProps}
      {...props}
      disabled={disabled || loading}
      startIcon={startIcon}
      variant={materialVariant(variation)}
      variation={variation}
      className={classNames(`--${variation}`, {
        '--is-loading': loading,
        '--with-icon': !!startIcon,
      })}
    >
      {children}
      {loading && <CircularProgress inverse={inversedLoading(variation)} />}
    </StyledMuiButton>
  )
}

Pure

Nos casos dos componentes puros, não tem muito mistério, eles são criados exatamente como qualquer outro componente que utilize o styled components.

Idealmente, uma discussão deveria ser levada em conta para padronizar totalmente a criação dos componentes que existem e os novos que serão criados. Alguns exemplos:

• Classes ou se usaremos as próprias props para customização
• Definir se todo output final dos componentes deveria ser um styled component?
• Qual padrão de código e organização de arquivos seguir
• Quando e como testar componentes

Componente novo

Se até o momento não existir um novo padrão a ser seguido, recomendo que utilize algum outro componente como base de código, para isso, primeiro defina se você vai criar um componente Material Based ou Puro.

Um ponto importante aqui, é que ao criar um novo componente, para que o mesmo seja exposto na lib, ele precisa ser exportado no arquivo index. Exemplo:

export { Button } from 'components/Button'
export type { ButtonProps } from 'components/Button'

Publicando uma nova versão do DS

---

Para publicar uma nova versão do DS temos dois caminhos.

Versão oficial seguindo o padrão semver, que só pode ser utilizado para versões oficiais do DS e só podem ser originados a partir da branch main.

Versões para teste seguindo o padrão baseado na semver com um sufixo para clarificar a razão daquela versão, exemplo: 0.1.0-button

Até o momento da atualização deste readme, o deploy é feito manualmente. Para publicar uma nova versão, verifique em que branch você está e se o padrão de versionamento esta sendo seguido e rode o comando yarn deploy.

Quando fizer publicações oficiais, lembre-se de:

• Se não estiver na branch main, troque para ela: git checkout main ou gco main
• Atualize sua branch main: git pull ou gl
• Valide se a versão que esta no package.json está correta

Comandos deste repositório

---

Se você está desenvolvendo/publicando o DS provavelmente vai precisar:

start

Sobe localmente o storybook para visualização de desenvolvimento

deploy

Realiza o processo de build e publicação do pacote na npm

deploy:test

Realiza o processo de build e publicação do pacote na npm de forma de teste, não publica oficialmente a versão, somente valida se tudo vai dar certo

Se está querendo mudar como a lib é construida ou alterar actions

---

build

Montar arquivos de produção e tipagem

build:bundle

Monta arquivo de producão

build:types

Montar arquivos de tipagem

build:storybook

Montar arquivos de produção para publicação do storybook