Criando componentes React com o

CONSTRAINT-BASED DESIGN

ADRIEN DENAT

FRONTEND DEVELOPER

twitter.com/adriendenat

github.com/grsmto

"constraint-based design"? 🤔

Você provalvamente já usa!

constraint-based UI development

desenvolvimento de UI baseado em restrições

Você já segue regras

As propriedades aplicáveis nos componentes não tem limites.

O desenho reduz elas em um grupo
de valores aceitáveis.

The properties of components are infinite.
The design reduces them in a set of acceptable values.

As regras são difíceis de seguir

Inconsistências nas interfaces

magic values 🎩

Como acontecem inconsistências?

Criação de novos componentes sem design (workflow shortcircuit)

Erros em efeito cascata do design inicial

Tecnologia diferente da implementação inicial

Como simplificar o processo de criação de componentes seguindo esse principio?

theme.js

Component

Design

Theme.js?

O arquivo de tema contém os valores de style, scales, e/ou design tokens

Design Token? 🤔

Bootstrap

Design Tokens

Entities nomeadas que armazenam atributos de design

Named entities that store visual design attributes

Como criar o tema?

Tem spec!

System UI

system-ui.com

const theme = {
  breakpoints: ["40em", "66em", "74em"],
  colors: {
    body: "#2F2F2F",
    heading: "#000000",
    background: "#FFFFFF",
    primary: "#1739E6",
    secondary: "#30c",
    muted: "#f6f6f9",
    gray: "#dadada",
  },
  fonts: {
    body: "'Montserrat', system-ui, sans-serif",
    heading: "inherit",
    monospace: "Menlo, monospace",
  },
  fontSizes: {
    0: "1rem", // 10px
    1: "1.2rem", // 12px
    2: "1.5rem", // 15px
    3: "1.7rem", // 17px
    4: "1.9rem", // 19px
    5: "2.3rem", // 23px
    6: "2.8rem", // 28px
    7: "3.8rem", // 38px
    8: "4.8rem", // 48px
    9: "7rem", // 70px
    10: "9rem", // 90px
  },
  fontWeights: {
    body: 400,
    heading: 400,
    bold: 600,
    extraBold: 700,
  },
  lineHeights: {
    body: 1.7,
    heading: 1.25,
  },
  space: [0, 5, 10, 15, 25, 40, 80, 120, 200],
  sizes: {
    avatar: 48,
  },
  radii: {
    default: 4,
    card: 19,
    circle: 99999,
  },
  shadows: {
    card: "0 9px 30px rgba(0,0,0,.1)",
    button: "0px 2px 2px rgba(0,0,0,0.1)",
  },
}

theme.space.gridGap = {
  small: theme.space[3],
  large: theme.space[4],
}

theme.space.pageWrap = {
  small: theme.space[3],
  large: theme.space[4],
}

theme.fontSizes.body = theme.fontSizes[2]

export default theme

Zeplin

zeplin.io

theme.js

Component

Design

Algumas soluções existentes:

Atomic CSS

Tachyons

Basscss

Tailwindcss

Tailwindcss

Utility classes primitivos

Tailwindcss 👍

Configurável

Não precisa mais inventar nomes para classes

Adeus "magic values"

O CSS fica do mesmo tamanho, não crece mais

Mais flexível e composable

theme.js

(tailwind.config.js)

package.json

output.css

Precisa lembrar o nome das classes do framework

Tailwindcss 👎

Stylesheet gerada é estática

Não é React

E com React?

Styled-System

styled-system.com

Criar componentes com props baseadas nos scales definidos no tema.

components/Box.js

App.js

App.js

components/GridCol.js

Definir a API de estilo dos componentes  (styling restrito)

Styled System 👍

Criar propriedades customizadas theme-aware

Poor discoverability: o desenvolvedor tem que aprender a API dos componentes criados

Styled System 👎

Melhor para design systems e libraries de componentes. Poderoso demais para um site simples

Theme UI

theme-ui.com

"theme-first" styling

theme.js

App.js

Pode estilizar qualquer componente

Theme UI 🎉

Accesso a todas as propriedades CSS sem limitações

Menos coisas para aprender e lembrar

xstyled

smooth-code.com/open-source/xstyled

const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  border: 2; /* ⟶ 2px solid */
  color: white; /* ⟶ theme.colors.white */
  border-color: primary; /* ⟶ theme.colors.primary */
  border-radius: medium; /* ⟶ theme.radii.medium */
  padding: 8 24; /* ⟶ theme.space.* */
  margin: 48 8; /* ⟶ theme.space.* */
  background-color: primary; /* ⟶ theme.colors.primary */
  display: inline-block;
  transition: background-color 300ms, color 300ms;

  &:hover {
    color: white;
    background-color: primaryLight;
  }
`

const theme = {
  colors: {
    primary: 'palevioletred',
    primaryLight: 'pink',
    secondary: 'gray'
  },
  radii: {
    medium: 3,
  }
}

Controle os estilos autorizados (forçar o uso do tema)

No futuro

Standard Theme Specification para uniformizar o uso do arquivo do tema entre as plataformas

twitter.com/adriendenat

github.com/grsmto

adriendenat.com

Merci :)

Questions ?

Ressources

Made with Slides.com