Documenta presets e adiciona helper para transformar presets para web

[leocpadua7]

Contexto

Esse PR cria um documento para documentar os presets de tipografia. E, para exibir os estilos, cria um helper - toWebPreset - para converter valores absolutos em pixel, nos casos de uso web-only.

Mudanças

Como testar

Verifique a documentação das pré-definições no storybook;
Verifique que é possível usá-las no SGLearner, em casos web only - com o helper novo.

[gabrielguilhoto]

Essa tipagem aqui não está amarrada com a definição dos presets, então ela não tem uma garantia forte de que vai de fato corresponder ao formato dos tokens. Isso poderia ser resolvido tipando os presets. (E aí teria que mudar pelo menos a tipagem do fontWeight para poder ter apenas os valores permitidos)

Mas vc precisou criar esse tipo por causa da função toWebPreset, certo? Uma outra alternativa seria ela não precisar saber o formato do preset todo, mas apenas exigir que receba um objeto que tenha o campo lineHeight.

[leocpadua7]

Eu tinha criado, pra além dessa razão, para garantir o retorno da função toWebPreset.

[gabrielguilhoto]

Pensando só na necessidade dessa função, talvez a tipagem dela poderia ser algo como

export const toWebPreset =  <Preset extends { lineHeight: number }>(preset: Preset): Preset & { lineHeight: string } => {
  return { ...preset, lineHeight: toPx(preset.lineHeight) };
};

se não quiser criar o tipo do Preset.

[gabrielguilhoto]

Não dá pra fazer só webPreset.lineHeight = toPx(preset.lineHeight) em vez do for? Ou até condensar o código todo da função num return, do tipo

return { ...preset, lineHeight: toPx(preset.lineHeight) };

[leocpadua7]

Verdade!! Muito melhor assim

[gabrielguilhoto]

Gambiarrinha mas funciona haha

[gabrielguilhoto]

Não era melhor já fazer o cast no Object.keys(preset), de onde o key é originalmente definido, em vez de fazer aqui no uso?

[leocpadua7]

Quando mando pra cima, em Object.keys(preset), ele solta um erro na linha 42: tokens[tokenKey].

Um jeito que ele não me traz erro, é fazer o seguinte:

{(Object.keys(preset) as PresetNames[]).map((key) => {
          return (
            <div className="token" key={key}>
              <div className="key">{key}:</div>
              <div className="value">
                {(Object.keys(tokens)).map((tokenKey) => {
                  if (
                    tokens[tokenKey as keyof typeof tokens] === preset[key as keyof typeof preset] &&
                    tokenKey
                      .toLowerCase()
                      .replace(/_/g, '')
                      .includes(key.toLowerCase())
                  ) {
                    return tokenKey;
                  }
                  return null;
                })}
              </div>
            </div>
          );
        })}

[gabrielguilhoto]

Pensando só na necessidade dessa função, talvez a tipagem dela poderia ser algo como

export const toWebPreset =  <Preset extends { lineHeight: number }>(preset: Preset): Preset & { lineHeight: string } => {
  return { ...preset, lineHeight: toPx(preset.lineHeight) };
};

se não quiser criar o tipo do Preset.