Convert component tokens to typescript (#691)

* Moved json parsing to tokens * Converted json to ts files * Removed json plugin from tokens
equinor · Nov 13, 2020 · da6d325 · da6d325
1 parent 2fd92f7
commit da6d325
Show file tree

Hide file tree

Showing 19 changed files with 1,974 additions and 1,959 deletions.
diff --git a/apps/figma-broker/actions/createComponentTokens.js b/apps/figma-broker/actions/createComponentTokens.js
@@ -4,13 +4,13 @@ import { fetchFigmaFile, processFigmaFile } from '../functions/figma'
 import { makeDesktopComponents } from '../files/desktop-ui'
 import { PATHS, FILE_IDS } from '../constants'
 
-export async function createComponentTokens(ctx) {
+export async function createComponentTokens() {
   const data = await fetchFigmaFile(FILE_IDS.DESKTOP_UI)
 
   const figmaFile = processFigmaFile(data)
   const components = makeDesktopComponents(figmaFile)
 
-  writeResults(components, PATHS.COMPONENTS_TOKENS)
+  writeResults(components, PATHS.COMPONENTS_TOKENS, 'ts')
 
   return components
 }
diff --git a/apps/figma-broker/files/desktop-ui/index.js b/apps/figma-broker/files/desktop-ui/index.js
@@ -14,28 +14,28 @@ export const makeDesktopComponents = (figmaFile) => {
     switch (fixedPageName) {
       case 'buttons primary color':
         components.push({
-          name: 'buttons-primary',
+          name: 'primary',
           value: makeButtonsComponent(data, getStyle),
           path: 'button',
         })
         break
       case 'buttons secondary color':
         components.push({
-          name: 'buttons-secondary',
+          name: 'secondary',
           value: makeButtonsComponent(data, getStyle),
           path: 'button',
         })
         break
       case 'buttons danger color':
         components.push({
-          name: 'buttons-danger',
+          name: 'danger',
           value: makeButtonsComponent(data, getStyle),
           path: 'button',
         })
         break
       case 'buttons disabled':
         components.push({
-          name: 'buttons-disabled',
+          name: 'disabled',
           value: makeButtonsComponent(data, getStyle),
           path: 'button',
         })

diff --git a/apps/figma-broker/functions/file.js b/apps/figma-broker/functions/file.js
@@ -39,7 +39,7 @@ export const writeFile = (path, name, ext, file) => {
     createFolder(path)
     let value = file
 
-    if (ext === 'js') {
+    if (ext === 'js' || ext === 'ts') {
       const options = prettier.resolveConfig.sync(prettierConfig)
       value = prettier.format(file, options)
     }
@@ -82,6 +82,7 @@ export const writeResults = (results, savePath, extension = 'json') =>
     )
 
     switch (extension) {
+      case 'ts':
       case 'js':
         writeFileToDisk(
           `export const ${name} = ${JSON.stringify(value, null, 2)}\n`,

diff --git a/libraries/core-react/package.json b/libraries/core-react/package.json
@@ -45,7 +45,6 @@
     "@babel/preset-typescript": "^7.10.4",
     "@rollup/plugin-babel": "^5.0.3",
     "@rollup/plugin-commonjs": "^13.0.0",
-    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^8.0.1",
     "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/react": "^10.2.1",

diff --git a/libraries/core-react/pnpm-lock.yaml b/libraries/core-react/pnpm-lock.yaml
diff --git a/libraries/core-react/rollup.config.js b/libraries/core-react/rollup.config.js
@@ -1,7 +1,6 @@
 /* eslint-disable import/no-default-export */
 import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
-import json from '@rollup/plugin-json'
 import babel from '@rollup/plugin-babel'
 import polyfill from 'rollup-plugin-polyfill'
 import typescript from 'rollup-plugin-typescript2'
@@ -30,7 +29,6 @@ export default [
       include: ['./src/**', './../tokens/**'],
     },
     plugins: [
-      json(),
       resolve({ extensions }),
       typescript({ useTsconfigDeclarationDir: true }),
       babel({

diff --git a/libraries/core-react/src/Button/Button.tokens.ts b/libraries/core-react/src/Button/Button.tokens.ts
@@ -1,7 +1,4 @@
-import primary from '@equinor/eds-tokens/components/button/buttons-primary.json'
-import secondary from '@equinor/eds-tokens/components/button/buttons-secondary.json'
-import danger from '@equinor/eds-tokens/components/button/buttons-danger.json'
-import disabled from '@equinor/eds-tokens/components/button/buttons-disabled.json'
+import { tokens } from '@equinor/eds-tokens'
 import type {
   Border,
   Focus,
@@ -10,6 +7,12 @@ import type {
   Typography,
 } from '@equinor/eds-tokens'
 
+const {
+  components: {
+    button: { primary, secondary, danger, disabled },
+  },
+} = tokens
+
 const colors = {
   primary: {
     ...primary,

diff --git a/libraries/core-react/src/Table/Table.tokens.ts b/libraries/core-react/src/Table/Table.tokens.ts
@@ -1,12 +1,17 @@
-import tableTokens from '@equinor/eds-tokens/components/table/table.json'
+import { tokens } from '@equinor/eds-tokens'
+
 import type {
   Border,
   Clickbound,
   Spacing,
   Typography,
 } from '@equinor/eds-tokens'
 
-const { header, cell } = tableTokens
+const {
+  components: {
+    table: { header, cell },
+  },
+} = tokens
 
 type Field = {
   height: string