refactor(mineral-ui-tokens): Misc updates

* Code gen using JS objects and JSON.stringify instead of string concatenation * Wrap color non-string literal property keys in brackets to avoid flow warnings * Removed private file groupedTokens * Generate categorized tokens files in website for theming and tokens pages * Remove eslint exclusion * Add workflow step - run “npm run format” prior to committing generated files. Co-authored-by: Brent Ertz <brent.ertz@gmail.com> BREAKING CHANGES: Fix incorrect sass variable name format
mineral-ui · May 7, 2018 · bd85bbe · bd85bbe
1 parent 6308850
commit bd85bbe
Show file tree

Hide file tree

Showing 28 changed files with 1,114 additions and 538 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -4,6 +4,4 @@ flow-typed/
 lib/
 node_modules/
 
-/packages/mineral-ui-tokens/src/
-
 *.template.js
diff --git a/packages/mineral-ui-tokens/README.md b/packages/mineral-ui-tokens/README.md
@@ -1,6 +1,5 @@
 # mineral-ui-tokens
 
-
 ## Installation
 
 ```bash
@@ -13,79 +12,93 @@ or
 yarn add mineral-ui-tokens
 ```
 
-
 ## Usage
-_This package uses the same [import syntax as the mineral-ui library][import-syntax]._
 
-Token names use a `[target]_[property]_[variation]_[state]` naming scheme.
+> All Tokens and their corresponding values can be viewed on the
+[Mineral UI Tokens][token-page] page.
 
-- `target` - the type of element targeted by the token, e.g. "input" or "panel"
-- `property` (required) - the CSS property of the token, e.g. "backgroundColor"
-- `variation` - any differentiating aspect of the token that isn't state, e.g. "brand", "primary", "success"
-- `state` - state-dependent aspects, e.g. "focus", "selected"
+_This package uses the same
+[import syntax as the mineral-ui library][import-syntax]._
 
+Token names use a `[target]_[property]_[variation]_[state]` naming scheme.
+
+* `target` - the type of element targeted by the token, e.g. "input" or "panel"
+* `property` (required) - the CSS property of the token, e.g. "backgroundColor"
+* `variation` - any differentiating aspect of the token that isn't state, e.g.
+"brand", "primary", "success"
+* `state` - state-dependent aspects, e.g. "focus", "selected"
 
 ### JavaScript
 
 JavaScript token names are formatted in "pseudo_camelCase", e.g. `boxShadow_1`
 
-
 #### Import tokens from the default export:
+
 ```js
 import tokens from 'mineral-ui-tokens';
 ```
 
-#### Import the palette, specific [color ramps][colorPage], or specific tokens from named exports:
+#### Import the palette, specific [color ramps][color-page], or specific tokens from named exports:
+
 ```js
 import { palette, magenta, boxShadow_1 } from 'mineral-ui-tokens';
 ```
 
-#### Import tokens & palette, as Scss variables:
+#### Import tokens & palette, as Sass variables:
+
 ```js
 import 'mineral-ui-tokens/index.scss';
 ```
 
-
 ### Sass
 
-Sass token names are formatted in "pseudoKebab-case", with a prefix, e.g. `$mnrl-boxShadow-1`
+Sass token names are formatted in "pseudoKebab-case", with a prefix, e.g.
+`$mnrl-boxShadow-1`
 
 ```css
-@import '<path_to_node_modules>/mineral-ui-tokens/dist/index.scss';
+@import '<path_to_node_modules>/mineral-ui-tokens/index.scss';
 ```
 
-
 ## Changelog
 
 Check the project root's changelog for updates.
 
-
 ## Contributing
 
-This package uses [Theo][theo] to generate output in a variety of formats. The source tokens are located in the [tokens directory](./tokens). Theo recognizes values like `"{!blue_60}"` as [aliases][theoSpec]. Check the `aliases` and/or `imports` properties in the containing file to find the alias definition(s).
-
-After changing the tokens source, generate the new output with `npm run build:tokens`, which you can run from either the project root or the mineral-ui/packages/mineral-ui-tokens directory. [Format your commit messages][commitizen] appropriately, using `mineral-ui-tokens` for your scope.
+This package uses [Theo][theo] to generate output in a variety of formats. The
+source tokens are located in the [tokens directory](./tokens). Theo recognizes
+values like `"{!blue_60}"` as [aliases][theospec]. Check the `aliases` and/or
+`imports` properties in the containing file to find the alias definition(s).
 
-Then [submit a PR][pr], including both your token source changes and the generated files, for review.
+After changing the tokens source, generate the new output with
+`npm run build:tokens`, which you can run from either the project root or the
+mineral-ui/packages/mineral-ui-tokens directory.
+[Format your commit messages][commitizen] appropriately, using
+`mineral-ui-tokens` for your scope.
 
+Then [submit a PR][pr], including both your token source changes and the
+generated files, for review.
 
 ## Publishing the `mineral-ui-tokens` package
 
-1. Make or accept source token updates
-1. `cd projects/mineral-ui/packages/mineral-ui-tokens` (if not already there)
-1. `npm run build:tokens`
-1. `npm version minor`
-    - This package uses the same [versioning scheme][versioning] as mineral-ui: major, minor, and patch updates all increment the _minor_ version number: 0.1.0 -> 0.2.0
-1. `npm run build`
-1. Commit changes and push to GitHub
-1. `cd dist && npm publish`
-
+1.  Make or accept source token updates
+1.  `cd mineral-ui/packages/mineral-ui-tokens` (if not already there)
+1.  `npm run build:tokens`
+1.  `npm run format`
+1.  `npm version minor`
+    * This package uses the same [versioning scheme][versioning] as mineral-ui:
+    major, minor, and patch updates all increment the _minor_ version number:
+    0.1.0 -> 0.2.0
+1.  `npm run build`
+1.  Commit changes and push to GitHub
+1.  `cd dist && npm publish`
 
 [changelog]: https://github.com/mineral-ui/mineral-ui/blob/master/CHANGELOG.md
-[colorPage]: https://mineral-ui.com/color
+[color-page]: https://mineral-ui.com/color#guidelines-ramps
 [commitizen]: https://github.com/mineral-ui/mineral-ui/blob/master/CONTRIBUTING.md#developing
 [import-syntax]: https://github.com/mineral-ui/mineral-ui/blob/master/docs/import-syntax.md
 [pr]: https://github.com/mineral-ui/mineral-ui/blob/master/CONTRIBUTING.md#submitting-a-pull-request
 [theo]: https://github.com/salesforce-ux/theo
-[theoSpec]: https://github.com/salesforce-ux/theo#spec
+[theospec]: https://github.com/salesforce-ux/theo#spec
+[token-page]: https://mineral-ui.com/tokens
 [versioning]: https://github.com/mineral-ui/mineral-ui#versioning
diff --git a/packages/mineral-ui-tokens/package.json b/packages/mineral-ui-tokens/package.json
@@ -20,6 +20,7 @@
     "build:tokens": "./scripts/build-tokens.js",
     "build:tokens:debug": "npm run build:tokens -- --debug",
     "clean": "rm -rf dist",
+    "format": "npm run format --prefix ../../",
     "pack-ls": "cd dist && tar -tvf $(npm pack)"
   },
   "devDependencies": {

diff --git a/packages/mineral-ui-tokens/scripts/build-tokens.js b/packages/mineral-ui-tokens/scripts/build-tokens.js
@@ -11,6 +11,7 @@ const colorIndex = require('../tokens/palette');
 const MINERAL_TOKENS_DIR = path.join(__dirname, '../tokens');
 const MINERAL_TOKENS_COLORS_DIR = path.join(MINERAL_TOKENS_DIR, '/palette');
 const SRC_DIR = path.join(__dirname, '../src');
+const WEBSITE_DIR = path.join(__dirname, '../../../src/website/app');
 
 const args = process.argv.slice(2);
 
@@ -21,7 +22,11 @@ if (!fs.existsSync(SRC_DIR)) {
 theo.registerFormat('colorAliases.js', formats.colorAliases);
 theo.registerFormat('colorExport.js', formats.colorExport);
 theo.registerFormat('defaultExport.js', formats.defaultExport);
-theo.registerFormat('groupedNamedExports.js', formats.groupedNamedExports);
+theo.registerFormat('categorizedJsExports.js', formats.categorizedJsExports);
+theo.registerFormat(
+  'categorizedSassExports.js',
+  formats.categorizedSassExports
+);
 theo.registerFormat('index.js', formats.index);
 theo.registerFormat('mnrlScss', formats.mnrlScss);
 theo.registerFormat('namedExports.js', formats.namedExports);
@@ -51,15 +56,6 @@ const configurations = [
     format: { type: 'defaultExport.js' },
     fileName: 'tokens.js'
   },
-  {
-    // Grouped tokens
-    transform: {
-      file: path.join(MINERAL_TOKENS_DIR, 'tokens.json'),
-      type: 'js'
-    },
-    format: { type: 'groupedNamedExports.js' },
-    fileName: 'groupedTokens.js'
-  },
   {
     // Just the color palette
     transform: {
@@ -94,6 +90,26 @@ const configurations = [
     format: { type: 'index.js' },
     fileName: 'index.js'
   },
+  {
+    // Grouped JS tokens by category
+    transform: {
+      file: path.join(MINERAL_TOKENS_DIR, 'tokensAndPalette.json'),
+      type: 'js'
+    },
+    format: { type: 'categorizedJsExports.js' },
+    fileName: 'categorizedJsTokens.js',
+    writeDir: WEBSITE_DIR
+  },
+  {
+    // Grouped Sass tokens by category
+    transform: {
+      file: path.join(MINERAL_TOKENS_DIR, 'tokensAndPalette.json'),
+      type: 'js'
+    },
+    format: { type: 'categorizedSassExports.js' },
+    fileName: 'categorizedSassTokens.js',
+    writeDir: WEBSITE_DIR
+  },
   {
     // All tokens with color values
     transform: {
@@ -135,15 +151,19 @@ if (args.includes('--debug')) {
   });
 }
 
-configurations.forEach(({ transform, format, fileName }) => {
-  theo
-    .convert({ transform, format })
-    .then((result) => {
-      fs.writeFile(
-        path.join(SRC_DIR, fileName),
-        result,
-        (error) => error && console.log('Error writing file: ', error)
+configurations.forEach(
+  ({ transform, format, fileName, writeDir = SRC_DIR }) => {
+    theo
+      .convert({ transform, format })
+      .then((result) => {
+        fs.writeFile(
+          path.join(writeDir, fileName),
+          result,
+          (error) => error && console.log('Error writing file: ', error)
+        );
+      })
+      .catch(
+        (error) => error && console.log('Error converting tokens: ', error)
       );
-    })
-    .catch((error) => error && console.log('Error converting tokens: ', error));
-});
+  }
+);
diff --git a/packages/mineral-ui-tokens/scripts/build.js b/packages/mineral-ui-tokens/scripts/build.js
@@ -46,4 +46,4 @@ fse.writeJsonSync(minimalPackageJsonFile, minimalPackageJsonData, {
   spaces: 2
 });
 
-exec('cp {README.md,LICENSE.md} dist');
+exec('cp {README.md,LICENSE.md,src/index.scss} dist');