From 515cc1a641bbd3863e84b99f78f3c295c7c2206c Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Thu, 11 Jun 2020 13:40:43 -0700 Subject: [PATCH 1/4] Build Theo tokens as JavaScript modules --- gulpfile.js/index.js | 2 +- gulpfile.js/tasks/theo-to-mdx.js | 25 -------------- gulpfile.js/tasks/theo.js | 48 +++++++++++++++++++++++++++ gulpfile.js/tasks/watch-preprocess.js | 4 +-- package.json | 2 +- 5 files changed, 52 insertions(+), 29 deletions(-) delete mode 100644 gulpfile.js/tasks/theo-to-mdx.js create mode 100644 gulpfile.js/tasks/theo.js diff --git a/gulpfile.js/index.js b/gulpfile.js/index.js index 2808f473f..44f2fb8a6 100644 --- a/gulpfile.js/index.js +++ b/gulpfile.js/index.js @@ -6,7 +6,7 @@ module.exports = { watchPreprocess: require('./tasks/watch-preprocess'), - theoToMDX: require('./tasks/theo-to-mdx'), + theo: require('./tasks/theo'), svgToTwig: require('./tasks/svg-to-twig'), buildSass: require('./tasks/build-sass'), buildJS: require('./tasks/build-scripts').buildJS, diff --git a/gulpfile.js/tasks/theo-to-mdx.js b/gulpfile.js/tasks/theo-to-mdx.js deleted file mode 100644 index 10c084c5e..000000000 --- a/gulpfile.js/tasks/theo-to-mdx.js +++ /dev/null @@ -1,25 +0,0 @@ -const { src, dest } = require('gulp'); -const gulpTheo = require('gulp-theo'); -// Requiring this file applies our Theo customizations to gulp-theo -require('../../.theo'); -const prettier = require('gulp-prettier'); - -// Gulp task -function theoToMdx() { - // Ignore any files with leading underscores - return src(['src/design-tokens/*.yml', '!src/design-tokens/_*']) - .pipe( - gulpTheo({ - transform: { - type: 'web', - }, - format: { - type: 'stories.mdx', - }, - }) - ) - .pipe(prettier()) - .pipe(dest('src/design-tokens/generated')); -} - -module.exports = theoToMdx; diff --git a/gulpfile.js/tasks/theo.js b/gulpfile.js/tasks/theo.js new file mode 100644 index 000000000..8abb15435 --- /dev/null +++ b/gulpfile.js/tasks/theo.js @@ -0,0 +1,48 @@ +const { src, dest, parallel } = require('gulp'); +const gulpTheo = require('gulp-theo'); +// Requiring this file applies our Theo customizations to gulp-theo +require('../../.theo'); +const prettier = require('gulp-prettier'); +const rename = require('gulp-rename'); + +// Ignore any files with leading underscores +const srcGlob = ['src/design-tokens/*.yml', '!src/design-tokens/_*']; +const destGlob = 'src/design-tokens/generated'; +const transform = { + type: 'web', +}; + +function theoToJs() { + return src(srcGlob) + .pipe( + gulpTheo({ + transform, + format: { + type: 'module.js', + }, + }) + ) + .pipe(prettier()) + .pipe( + rename((path) => { + path.basename = path.basename.replace('.module', ''); + }) + ) + .pipe(dest(destGlob)); +} + +function theoToMdx() { + return src(srcGlob) + .pipe( + gulpTheo({ + transform, + format: { + type: 'stories.mdx', + }, + }) + ) + .pipe(prettier()) + .pipe(dest(destGlob)); +} + +module.exports = parallel(theoToJs, theoToMdx); diff --git a/gulpfile.js/tasks/watch-preprocess.js b/gulpfile.js/tasks/watch-preprocess.js index 737bc5882..449160cbf 100644 --- a/gulpfile.js/tasks/watch-preprocess.js +++ b/gulpfile.js/tasks/watch-preprocess.js @@ -1,8 +1,8 @@ const { watch } = require('gulp'); const svgToTwig = require('./svg-to-twig'); -const theoToMdx = require('./theo-to-mdx'); +const theo = require('./theo'); module.exports = function () { watch('src/assets/**/*.svg', svgToTwig); - watch('src/design-tokens/**/*.yml', theoToMdx); + watch('src/design-tokens/**/*.yml', theo); }; diff --git a/package.json b/package.json index 2fb80c3e0..96b34ce30 100644 --- a/package.json +++ b/package.json @@ -118,7 +118,7 @@ "build-storybook": "npm run preprocess && build-storybook -s static", "preprocess": "run-p preprocess:*", "preprocess:svg-to-twig": "gulp svgToTwig", - "preprocess:theo-to-mdx": "gulp theoToMDX", + "preprocess:theo": "gulp theo", "watch-preprocess": "gulp watchPreprocess", "build:js": "gulp buildJS", "build:types": "gulp buildTypes", From 63e031747687c401a4e1ebabc54a3154439e7ab5 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Thu, 11 Jun 2020 13:48:18 -0700 Subject: [PATCH 2/4] Add JavaScript usage examples --- .theo/formats/stories.mdx.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/.theo/formats/stories.mdx.js b/.theo/formats/stories.mdx.js index d731ce0f5..ef1e69a1b 100644 --- a/.theo/formats/stories.mdx.js +++ b/.theo/formats/stories.mdx.js @@ -1,4 +1,5 @@ const groupBy = require('lodash/groupBy'); +const camelCase = require('lodash/camelCase'); const kebabCase = require('lodash/kebabCase'); const startCase = require('lodash/startCase'); const { basename, extname } = require('path'); @@ -129,6 +130,10 @@ function mdxStoriesFormat(result) { const slug = basename(filename, extname(filename)); const title = startCase(slug); const props = result.get('props').toJS(); + const firstProp = props[0]; + firstProp.sassName = `$${kebabCase(firstProp.name)}`; + firstProp.jsName = camelCase(firstProp.name); + firstProp.jsonValue = JSON.stringify(firstProp.value); const categories = groupBy(props, 'category'); const mdxCategories = Object.keys(categories).map((category) => categoryToMdx(category, categories[category]) @@ -141,8 +146,14 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks'; # ${title} \`\`\`scss -@use 'path/to/${filename}'; -$example: ${slug}.$${kebabCase(props[0].name)}; // => ${props[0].value} +@use 'path/to/design-tokens/${filename}'; +$example: ${slug}.${firstProp.sassName}; // => ${firstProp.value} +\`\`\` +\`\`\`javascript +import { ${ + firstProp.jsName + } } from 'path/to/design-tokens/generated/${slug}.js'; +console.log(${firstProp.jsName}); // => ${firstProp.jsonValue} \`\`\` ${mdxCategories.join('\n\n')}`.trim(); From e99cc8218a6ad53039db37d420d3f9621b038a7b Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Mon, 15 Jun 2020 10:14:02 -0700 Subject: [PATCH 3/4] Update path examples --- .theo/formats/stories.mdx.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/.theo/formats/stories.mdx.js b/.theo/formats/stories.mdx.js index ef1e69a1b..9c0010ab8 100644 --- a/.theo/formats/stories.mdx.js +++ b/.theo/formats/stories.mdx.js @@ -146,13 +146,11 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks'; # ${title} \`\`\`scss -@use 'path/to/design-tokens/${filename}'; +@use "../../design-tokens/${filename}"; $example: ${slug}.${firstProp.sassName}; // => ${firstProp.value} \`\`\` \`\`\`javascript -import { ${ - firstProp.jsName - } } from 'path/to/design-tokens/generated/${slug}.js'; +import { ${firstProp.jsName} } from '../../design-tokens/generated/${slug}.js'; console.log(${firstProp.jsName}); // => ${firstProp.jsonValue} \`\`\` From b8ec4b0c8afa73a10271c72afc0c9db14a3c86fc Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Mon, 15 Jun 2020 10:14:19 -0700 Subject: [PATCH 4/4] Attempt to update scripts --- package.json | 2 +- tsconfig.json | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 96b34ce30..efb1d29aa 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,7 @@ "build:js": "gulp buildJS", "build:types": "gulp buildTypes", "build:sass": "gulp buildSass", - "build": "npm run clean && run-p build:*", + "build": "run-s clean preprocess && run-p build:*", "clean": "eliminate dist", "type": "tsc", "type:watch": "tsc --watch", diff --git a/tsconfig.json b/tsconfig.json index f16761f5e..883f86ce9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,5 +15,9 @@ "skipLibCheck": true }, "include": ["src", "cypress"], - "exclude": ["src/prototypes", "src/vendor/prism/demo/samples"] + "exclude": [ + "src/prototypes", + "src/vendor/prism/demo/samples", + "src/design-tokens/generated" + ] }