From ffcbe2f4101a4954783b3aeccf6f548e207a8c58 Mon Sep 17 00:00:00 2001 From: Gabriel Guilhoto Date: Thu, 24 Aug 2023 10:28:17 -0300 Subject: [PATCH 1/2] build -> built-tokens --- .gitignore | 2 +- README.md | 8 ++++---- package.json | 2 +- token-presets/basic.ts | 2 +- token-presets/ludic.ts | 2 +- token-presets/reading.ts | 2 +- tokens.ts | 2 +- tokens/config/style-dictionary-config.json | 4 ++-- 8 files changed, 12 insertions(+), 12 deletions(-) diff --git a/.gitignore b/.gitignore index eb53612..a38c0a6 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,7 @@ node_modules/ #Build folder -build/ +built-tokens/ # TypeScript cache *.tsbuildinfo diff --git a/README.md b/README.md index 6f8d758..7c8568b 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ Atualmente usamos: ## Como rodar -Primeiro, garanta que os tokens foram gerados corretamente, rodando o script: `yarn build-tokens` - _Você pode conferir os tokens gerados na pasta `/build/tokens`_. +Primeiro, garanta que os tokens foram gerados corretamente, rodando o script: `yarn build-tokens` - _Você pode conferir os tokens gerados na pasta `/built-tokens`_. Depois, para inicializar o storybook, rode o script: `yarn storybook`. @@ -87,7 +87,7 @@ A **resposta rápida** é: rode o script `yarn build-tokens` -E os tokens serão construídos na pasta `/build/tokens`. +E os tokens serão construídos na pasta `/built-tokens`. Usamos um script customizado, para garantir que exportamos um arquivo correto para documentar os tokens no storybook. Detalharemos esse assunto um pouco mais à frente. @@ -107,7 +107,7 @@ As platforms são definidas no formato: "platforms": { "scss": { "transformGroup": "scss", - "buildPath": "build/tokens/scss/", + "buildPath": "built-tokens/scss/", "files": [ { "destination": "_variables.scss", @@ -125,7 +125,7 @@ Já no _script de build_ temos definidos um [custom-transform](https://amzn.gith Como já comentado anteriormente, criamos um processo um pouco mais automatizado para criar os tokens e documentá-los no storybook. Nesse processo, usamos um addon para o storybook - [storybook-design-token](https://github.com/UX-and-I/storybook-design-token) - que consegue documentar e gerar previews dos tokens. -Esse addon precisa de um arquivo, em um formato específico, chamado de [presenters](https://github.com/UX-and-I/storybook-design-token/tree/v3#available-presenters) pelo addon, que é criado na construição dos tokens - através do style-dictionary - encontrado na pasta `/build/tokens/scss/_variables_with_headers.scss`. Esse formato é definido no _script de build_, em `DESIGN_TOKEN_CATEGORIES_BY_PREFIX`. +Esse addon precisa de um arquivo, em um formato específico, chamado de [presenters](https://github.com/UX-and-I/storybook-design-token/tree/v3#available-presenters) pelo addon, que é criado na construição dos tokens - através do style-dictionary - encontrado na pasta `/built-tokens/scss/_variables_with_headers.scss`. Esse formato é definido no _script de build_, em `DESIGN_TOKEN_CATEGORIES_BY_PREFIX`. Então, para **documentar um token**, após terminar o processo descrito anteriormente, vale conferir se o _script de build_ já tem a categoria necessária - se não, criá-la de acordo com os [presenters](https://github.com/UX-and-I/storybook-design-token/tree/v3#available-presenters) suportados pelo addon. diff --git a/package.json b/package.json index 6e74d15..b38c6a4 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "node": ">=16.17.1" }, "files": [ - "build/**", + "built-tokens/**", "helpers/**", "token-presets/**", "tokens.ts" diff --git a/token-presets/basic.ts b/token-presets/basic.ts index c51bad4..fd4f5f5 100644 --- a/token-presets/basic.ts +++ b/token-presets/basic.ts @@ -18,7 +18,7 @@ import { DSA_LINE_HEIGHT_S, DSA_LINE_HEIGHT_XL, DSA_LINE_HEIGHT_XS, -} from '../build/tokens/ts/tokens'; +} from '../built-tokens/js/tokens'; /* Headings */ export const DSA_BASIC_HEADING_H1_STYLE = { diff --git a/token-presets/ludic.ts b/token-presets/ludic.ts index 44a66cd..c4e0dd8 100644 --- a/token-presets/ludic.ts +++ b/token-presets/ludic.ts @@ -18,7 +18,7 @@ import { DSA_LINE_HEIGHT_S, DSA_LINE_HEIGHT_XL, DSA_LINE_HEIGHT_XS, -} from '../build/tokens/ts/tokens'; +} from '../built-tokens/js/tokens'; /* Headings */ export const DSA_LUDIC_HEADING_H1_STYLE = { diff --git a/token-presets/reading.ts b/token-presets/reading.ts index 55811b0..0b0b74e 100644 --- a/token-presets/reading.ts +++ b/token-presets/reading.ts @@ -10,7 +10,7 @@ import { DSA_LETTER_SPACING_NORMAL, DSA_LINE_HEIGHT_M, DSA_LINE_HEIGHT_S, -} from '../build/tokens/ts/tokens'; +} from '../built-tokens/js/tokens'; /* Body (large) */ export const DSA_READING_BODY_L_NORMAL_STYLE = { diff --git a/tokens.ts b/tokens.ts index 6bfca96..2d2474b 100644 --- a/tokens.ts +++ b/tokens.ts @@ -1,2 +1,2 @@ -export * from './build/tokens/ts/tokens'; +export * from './built-tokens/js/tokens'; export * from './helpers/webOnlyHelpers'; diff --git a/tokens/config/style-dictionary-config.json b/tokens/config/style-dictionary-config.json index 1760c4d..6a1d60a 100644 --- a/tokens/config/style-dictionary-config.json +++ b/tokens/config/style-dictionary-config.json @@ -3,7 +3,7 @@ "platforms": { "scss": { "transformGroup": "custom/scss", - "buildPath": "build/tokens/scss/", + "buildPath": "built-tokens/scss/", "prefix": "dsa", "files": [ { @@ -18,7 +18,7 @@ }, "ts": { "transformGroup": "custom/js", - "buildPath": "build/tokens/ts/", + "buildPath": "built-tokens/js/", "prefix": "dsa", "files": [ { From 41e6b0f11ff2d06dd94db860043a76f982c3422f Mon Sep 17 00:00:00 2001 From: Gabriel Guilhoto Date: Thu, 24 Aug 2023 11:07:06 -0300 Subject: [PATCH 2/2] atualizando prettierignore --- .prettierignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.prettierignore b/.prettierignore index 378eac2..c33ca65 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1 @@ -build +built-tokens