@mindvalley/design-system 0.0.1-development → 1.0.0

package/docs/CONTRIBUTION.md

@@ -1,31 +1,35 @@
 ## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 Before you get your hands dirty, let's first understand how the repo works and its structure. We are going to look at:
-* What happens in the repo and its inputs and outputs: Jump to [token tranformation](#token-transformation-process)
-* How the repo is structured and its core parts: see [Directory structure](#directory-structure)
+* What happens in the repo and its inputs and outputs: Jump to [Token transformation](#-token-transformation-process)
+* How the repo is structured and its core parts: See [Directory structure](#-directory-structure)
 
 #### 🏭 Token transformation process
 Token transformation on a high level involves the four steps illustrated below:
 
-![token transformation](https://assets.mindvalley.com/api/v1/assets/0be7cc6d-081a-4b13-a59d-d80997922f8b.png)
+![token transformation](https://assets.mindvalley.com/api/v1/assets/7502f91d-8638-4940-a96f-a66386041a75.png)
 
 ##### 1. The design tokens:
-The token designs are the starting point of the design tokens. This step is how the design tokens get into the repo. For example, If there are changes in the Figma design system to the value of a color, then this would be where we would need to update the token.  For simplicity, it is just a directory with some design tokens in a JSON file. More details in the [`src/properties`](#srcproperties) directory documentation.
+This is the starting point of the design token transformation process. This step is how the design tokens get into the repo. For example, If there are changes in the Figma design system to the value of a color, then this would be where we would need to update the token.  For simplicity, it is just a directory with some design tokens in a JSON file. More details in the [`src/properties`](#srcproperties) directory documentation.
 
 ##### 2. Parsing and transformation:
-Using [style-dictonary](https://amzn.github.io/style-dictionary/#/version_3), the design tokens from 1 above are parsed, merged, and transformed into desired formats. The output is a `.js` file. The output is configurable and can be extented to `.css`, `.scss`, `.less` files etc. in the future. See all [possible output file formats](https://amzn.github.io/style-dictionary/#/formats).
+Using [style-dictonary](https://amzn.github.io/style-dictionary/#/version_3), the design tokens from (1) above are parsed, merged, and transformed into desired formats. The output is a `.js` file. The output is configurable and can be extented to `.css`, `.scss`, `.less` files etc. in the future. See [all possible output file formats](https://amzn.github.io/style-dictionary/#/formats).
 The output of this step ends up in the [`src/build/`](#srcbuild) directory.
-*Parsing and tranformation can be triggered by running:*
+Parsing and transformation can be triggered by running:
 
-      npm run styledictonary:build
+```
+npm run styledictonary:build
+```
 
 ##### 3. Bundling:
-Bundling is done using [webpack](https://webpack.js.org/concepts) to ensure the resulant files work across browser and server environments. The files from step 2 are bundled and output to the [/dist](#dist) directory.
+Bundling is done using [webpack](https://webpack.js.org/concepts) to ensure the resultant files work across browser and server environments. The files from step 2 are bundled and output to the [/dist](#dist) directory.
 Bundling can be invoked by running:
 
-    npm run build
+```
+npm run build
+```
 
 ##### 4. Publishing:
- The last in the process is releasing and publishing the bundled files. This step is automated and runs on CI ensuring that changes made are tested, versioned and comprehensively documented.  All this is done with the help of [semantic release](https://semantic-release.gitbook.io/semantic-release/). Read more about the [release process](RELEASING.md#releasing-🚀).
+The last in the process is releasing and publishing the bundled files. This step is automated and runs on CI, ensuring that changes made are tested, versioned, and comprehensively documented.  All this is done with the help of [semantic release](https://semantic-release.gitbook.io/semantic-release/). Read more about the [release process](RELEASING.md#releasing-🚀).
  The end package is published to NPM where it can be installed from.
 
 #### 🗂 Directory structure
@@ -64,21 +68,21 @@ Let's look at some important directories.
 ```
 ###### src/properties/
 This is the source of the design tokens. For now, we have the tokens checked in as JSON files.
-The process of updating the payload is manual implying that when there are changes in the tokens, one must copy the new design tokens found in the [mindvalley brand guideline](https://brand.mindvalley.com/2510b1b9c/p/317a4d-design-tokens/b/07a415) under design tokens 2.0 and overwrite the older files in this directory.
+The process of updating the payload is manual, implying that when there are changes in the tokens, one must copy the new design tokens found in the [Mindvalley Brand Guideline](https://brand.mindvalley.com/2510b1b9c/p/317a4d-design-tokens/b/07a415) under design tokens 2.0, and overwrite the older files in this directory.
 
-*Yes its a manual step for now, automation will follow later.*
+*Yes, it's a manual step for now, automation will follow later.*
 
 ###### src/build/
-This is the output of the design token transformation process. **Do not manually edit** the contents of this folder as they are the output of running the [bundling step](#).
+This is the output of the design token transformation process. **DO NOT** manually edit the contents of this folder as they are the output of running the [bundling step](#3-bundling).
 
 ###### src/utilities
-Holds the custom [transformations](https://amzn.github.io/style-dictionary/#/transforms) and [transformation groups](https://amzn.github.io/style-dictionary/#/transform_groups) which in a nutshell are how we transform the json files the `src/properties/` directory into the desired output file format in `src/build/`
+Holds the custom [transformations](https://amzn.github.io/style-dictionary/#/transforms) and [transformation groups](https://amzn.github.io/style-dictionary/#/transform_groups) which in a nutshell, are how we transform the json files in the `src/properties/` directory into the desired output file format in the `src/build/` directory.
 
 ###### dist
-Its the output directy of the webpack build process and is not checked in for versioning.
+It's the output directory of the Webpack build process and is not checked in for versioning.
 
 ###### test
-For test because code that cannot be tested is flawed 🤷🏽‍♂️.
+For tests, because code that cannot be tested is flawed. 🤷🏽‍♂️
 
 #### ⌨️ Start development
 To get started with development, start by cloning the mv-design-system repo.
@@ -97,30 +101,30 @@ This repo uses `npm` as the package manager
 ##### Making commits
 
 After making changes, stage your changes by issuing the standard `git add <filename>`, or however you stage your files.
-For commits, we leverage the power of conventional commits using commitizen.
+For commits, we leverage the power of conventional commits using [Commitizen](https://github.com/commitizen/cz-cli).
 
-**Why use conventional commits?** To enable automation of releases, semantic versioning and release notes auto-generation.
+**Why use conventional commits?** To enable automation of releases, semantic versioning, and release notes auto-generation.
 
 To make a commit, run the command below:
 ```
 npm run commit
 ```
 
-This will trigger a command line interface and all you have to do is answer the prompted questions which includes a JIRA ticket ID number.
+This will trigger a command line interface and all you have to do is answer the prompted questions which includes a Jira ticket ID number.
 
 ![Commitizen prompt](https://assets.mindvalley.com/api/v1/assets/540d2b05-7953-4505-abfe-181c2a212566.png)
 
-If your branch name has a Jira ticket id already included then the prompt automatically extracts it
+If your branch name has a Jira ticket ID already included, then the prompt automatically extracts it.
 
-Though using `npm run commit` is highly recommended for this repo, you can alternatively write your commit without the commitzen helper by ensuring you
+Though using `npm run commit` is highly recommended for this repo, you can alternatively write your commit without the Commitizen helper by ensuring you
 follow the conventional commits conventions.
 ```
  type(scope): commit-message
 
- JIRA-Issue-ID
+ Jira-Issue-ID
 ```
 
-The commits types have to be one of:
+The commit type has to be one of:
   - `feat`:     A new feature
   - `fix`:      A bug fix
   - `docs`:     Documentation only changes
@@ -143,7 +147,7 @@ MVHOME-765
 
 Once your commits are done, you can do a normal push to remote.
 
-Read more on [commit conventions](https://www.conventionalcommits.org/en/v1.0.0-beta.4/)
+Read more on [commit conventions](https://www.conventionalcommits.org/en/v1.0.0-beta.4/).
 ##### Branch naming
 
 Branch names start with the Jira ticket ID eg.
@@ -174,4 +178,4 @@ npm run build
 
 You can test it out on your development environment to see the output.
 
-Once your changes are made and merged, they'll need to be published. See how that is done in the [release guide](RELEASING.md#releasing-🚀)
+Once your changes are made and merged, they'll need to be published. See how that is done in the [release guide](RELEASING.md#releasing-🚀).

package/docs/RELEASING.md

@@ -1,6 +1,6 @@
 ## Releasing 🚀
 
-By default semantic-release uses the [Angular Commit Message Conventions](https://www.conventionalcommits.org/en/v1.0.0-beta.4/) and triggers releases based on the following rules:
+By default, semantic-release uses the [Angular Commit Message Conventions](https://www.conventionalcommits.org/en/v1.0.0-beta.4/) and triggers releases based on the following rules:
 
 | Commit                      | Release Type     | Semver update type               |
 |-----------------------------|------------------|----------------------------------|
@@ -11,20 +11,20 @@ By default semantic-release uses the [Angular Commit Message Conventions](https:
 
 Only the above type of commits will trigger a release.
 
-On merging to the main branch, several things will happen
-1. Semantic release will start by analyzing the commit messages of the merged changes based on the commit messages
-2. Determine what kind release it is bases on the above table.
+On merging to the main branch, several things will happen:
+1. Semantic release will start by analyzing the commit messages of the merged changes based on the commit messages.
+2. Determine what kind of release it is based on the table above.
 3. Generate a changelog for the new changes and generate the new package version number.
-4. There after a git release will be prepared and pushed to the repo together with the Changelog and package.json version update.
+4. Thereafter a git release will be prepared and pushed to the repo together with the Changelog and package.json version update.
 5. The new package is then published to npm.
 
-More detailed explanation can be found on the [semantic release steps documentation](https://semantic-release.gitbook.io/semantic-release/#release-steps)
+More detailed explanation can be found on the [semantic release steps documentation](https://semantic-release.gitbook.io/semantic-release/#release-steps).
 
-After release and publishing, the package should be available as a [scoped npm package](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages) and is on npm as [@mindvalley/design-system](https://www.npmjs.com/package/@mindvalley/design-system)
+After release and publishing, the package should be available as a [scoped npm package](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages) and is on npm as [@mindvalley/design-system](https://www.npmjs.com/package/@mindvalley/design-system).
 
-Jump to [usage]() to understand how to use the published package in your repo. ddd
+Jump to the [usage guide](USAGE.md) to understand how to use the published package in your repo.
 
 ##### 💡 Note:
 The above steps should all happen with no human intervention.
-However, for now, the steps 1 - 5 do happen on the CI/CD pipeline but due to some github permissions the automation has errors on steps 4 and 5 meaning the release, semantic versioning and npm publishing does not work automatically.
-For that reason. The releases will be manual for the time being as the permissions get settled with the infra team.
+However, for now, the steps 1 - 5 do happen on the CI/CD pipeline, but due to some issues with GitHub permissions, the automation has errors on steps 4 and 5, which means the release, semantic versioning, and npm publishing does not work automatically.
+For that reason, the releases will be manual for the time being, as the permissions get settled with the Infra Team.

package/docs/USAGE.md

@@ -1,8 +1,7 @@
 ## Installation
 
 #### Using npm or yarn
-We recommend using npm or yarn to install. It not only makes development more straightforward but also allows you
-to take advantage of the rich ecosystem of Javascript packages and tooling.
+We recommend using either npm or yarn to install, as per your own preference.
 
 ```
 $ npm install @mindvalley/design-system
@@ -32,7 +31,7 @@ To use the colors from the design system there are two options.
 ###### 1. TailwindCSS
 If you use TailwindCSS in your project, using the colors is a simple two-step process:
 
-1. Install the designs system see [installation](#using-npm-or-yarn).
+1. Install the design system. See [installation](#using-npm-or-yarn).
 2. Use the [commonJS syntax](#commonjs-syntax) to include the colors and extend your `tailwind.config.js`.
 
 *Example tailwind.config.js*
@@ -52,8 +51,8 @@ If you use TailwindCSS in your project, using the colors is a simple two-step pr
 If you'd like other custom names, you can make [tailwindcss color customizations](https://tailwindcss.com/docs/customizing-colors#using-the-default-colors) to the provided values and use them in your code.
 
 ###### 2. Using CSS-in-JS
-1. Install the designs system see [installation](#using-npm-or-yarn).
-2. Use the [ES module](#es-module-syntax) syntax to import your module and include it your code.
+1. Install the design system. See [installation](#using-npm-or-yarn).
+2. Use the [ES module](#es-module-syntax) syntax to import your module and include it in your code.
 
 *Sample usage in a react app*
 ```Javascript

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindvalley/design-system",
-  "version": "0.0.1-development",
+  "version": "1.0.0",
   "description": "Resources, components, design guidelines and tooling for Mindvalley's design system",
   "keywords": [
     "design-system",
@@ -19,8 +19,12 @@
   "license": "MIT",
   "author": "Mindvalley Developers and Designers",
   "main": "dist/index.js",
+  "files": [
+    "dist",
+    "docs"
+  ],
   "scripts": {
-    "build": "webpack --mode production",
+    "build": "npm run styledictonary:build && webpack --mode production",
     "commit": "cz",
     "commitmsg": "validate-commit-msg",
     "semantic-release": "semantic-release",
@@ -64,22 +68,27 @@
   "devDependencies": {
     "@babel/core": "^7.14.0",
     "@babel/preset-env": "^7.14.1",
-    "@semantic-release/git": "^9.0.0",
+    "@semantic-release/git": "^10.0.1",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "commitizen": "^4.2.3",
+    "copy-webpack-plugin": "^11.0.0",
     "cz-conventional-changelog-with-jiraid-detection": "^1.0.3",
     "husky": "^6.0.0",
     "jest": "^26.6.3",
     "lodash": "^4.17.21",
-    "semantic-release": "^17.4.2",
+    "semantic-release": "^19.0.2",
     "style-dictionary": "^3.0.0-rc.9",
-    "validate-commit-msg": "^2.14.0",
+    "validate-commit-msg": "^1.1.3",
     "webpack": "^5.36.2",
     "webpack-cli": "^4.6.0"
   },
   "engines": {
-    "node": ">=15.4.0"
+    "node": ">=16.8.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "release": {
     "branches": [

package/.github/workflows/release.yml

@@ -1,29 +0,0 @@
-name: Release
-on:
-  push:
-    branches:
-      - main
-jobs:
-  release:
-    name: Release
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-      - name: Setup Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 15.14.0
-      - name: Install dependencies
-        run: npm ci
-      - name: Run tests
-        run: npm run test
-      - name: Build the publishable bundle
-        run: npm run build
-      - name: Release
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: npx semantic-release

package/.tool-versions

@@ -1 +0,0 @@
-nodejs 15.14.0

package/__tests__/utilities/transforms.test.js

@@ -1,24 +0,0 @@
-let transforms = require('../../src/utilities/transforms');
-
-describe('transforms', () => {
-  describe('name/ti/kebab', () => {
-    it('should handle prefix', () => {
-      expect(transforms["name/ti/kebab"].transformer(
-        {
-          path: ['one', 'two', 'three']
-        }, {
-        prefix: 'prefix'
-      }
-      )).toBe('prefix-two-three');
-    });
-
-    it('should handle no prefix', () => {
-      expect(transforms["name/ti/kebab"].transformer(
-        {
-          path: ['one', 'two', 'three']
-        }, {
-      }
-      )).toBe('two-three');
-    });
-  });
-});

package/babel.config.js

@@ -1,4 +0,0 @@
-// babel.config.js
-module.exports = {
-  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
-};

package/build.js

@@ -1,18 +0,0 @@
-const StyleDictionary = require('style-dictionary').extend(__dirname + '/config.json');
-const transforms = require('./src/utilities/transforms');
-const transformGroups = require('./src/utilities/transformGroups');
-
-console.log('Build started...');
-console.log('\n==============================================');
-
-StyleDictionary.registerTransform(transforms['name/ti/kebab']);
-StyleDictionary.registerTransformGroup(transformGroups['js-ti']);
-
-// First, remove all files from any previous builds
-StyleDictionary.cleanAllPlatforms();
-
-// Finally, build all platform files
-StyleDictionary.buildAllPlatforms();
-
-console.log('\n==============================================');
-console.log('\nBuild completed!');

package/config.json

@@ -1,22 +0,0 @@
-{
-  "source": [
-    "src/properties/**/*.json"
-  ],
-  "platforms": {
-    "js": {
-      "transformGroup": "js-ti",
-      "buildPath": "src/build/js/",
-      "files": [
-        {
-          "format": "javascript/module-flat",
-          "destination": "colors.js",
-          "filter": {
-            "attributes": {
-              "category": "color"
-            }
-          }
-        }
-      ]
-    }
-  }
-}

package/src/build/js/colors.js

@@ -1,62 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Fri, 07 May 2021 03:42:35 GMT
- */
-
-module.exports = {
-  "aqua": "#2cb3ff",
-  "blue": "#005cff",
-  "blue-wave": "#0066ff",
-  "brand-blue": "#003fff",
-  "brand-purple": "#9400ff",
-  "brand-wave": "#003fff",
-  "charleston-green": "#24272e",
-  "dark-aqua": "#1b9ce6",
-  "dark-green": "#159f65",
-  "dark-lilac": "#a279dd",
-  "dark-orange": "#ed6325",
-  "dark-pink": "#df1a6f",
-  "dark-red": "#df241e",
-  "dark-teal": "#28a597",
-  "dark-yellow": "#e8ad11",
-  "green": "#02c875",
-  "lilac": "#bf97f9",
-  "orange": "#ff7131",
-  "pink": "#ff006e",
-  "red": "#f8251e",
-  "teal": "#16ceb9",
-  "yellow": "#fdca40",
-  "black": "#000000",
-  "cool-grey-100": "#f9f9f9",
-  "cool-grey-150": "#f3f4f6",
-  "cool-grey-200": "#ebedef",
-  "cool-grey-250": "#dfe1e5",
-  "cool-grey-300": "#ced1d7",
-  "cool-grey-350": "#b3b8c1",
-  "cool-grey-400": "#979ca5",
-  "cool-grey-450": "#71767f",
-  "cool-grey-500": "#595e67",
-  "cool-grey-550": "#41464f",
-  "cool-grey-600": "#292d38",
-  "cool-grey-650": "#181d26",
-  "cool-grey-700": "#0f131a",
-  "white": "#ffffff",
-  "warm-grey-100": "#fafafa",
-  "warm-grey-150": "#f5f5f5",
-  "warm-grey-200": "#ebebeb",
-  "warm-grey-250": "#d6d6d6",
-  "warm-grey-300": "#c2c2c2",
-  "warm-grey-350": "#b3b3b3",
-  "warm-grey-400": "#999999",
-  "warm-grey-450": "#808080",
-  "warm-grey-500": "#666666",
-  "warm-grey-550": "#4d4d4d",
-  "warm-grey-600": "#333333",
-  "warm-grey-650": "#242424",
-  "warm-grey-700": "#1a1a1a",
-  "cyan": "#00f2f2",
-  "lemon": "#fff000",
-  "lime": "#bced09",
-  "magenta": "#fb03ff",
-  "rose": "#ff68a8"
-};

package/src/index.js

@@ -1 +0,0 @@
-export * as colors from "./build/js/colors";

package/src/properties/color-token.json

@@ -1,169 +0,0 @@
-{
-  "color": {
-    "Aqua": {
-      "value": "#2cb3ff"
-    },
-    "Blue": {
-      "value": "#005cff"
-    },
-    "Blue Wave": {
-      "value": " linear-gradient(rgba(0, 102, 255, 1.0) 0%, rgba(0, 63, 255, 1.0) 100%)"
-    },
-    "Brand Blue": {
-      "value": "#003fff"
-    },
-    "Brand Purple": {
-      "value": "#9400ff"
-    },
-    "Brand Wave": {
-      "value": " linear-gradient(rgba(0, 63, 255, 1.0) 0%, rgba(251, 3, 255, 1.0) 100%)"
-    },
-    "Charleston Green": {
-      "value": "#24272e"
-    },
-    "Dark Aqua": {
-      "value": "#1b9ce6"
-    },
-    "Dark Green": {
-      "value": "#159f65"
-    },
-    "Dark Lilac": {
-      "value": "#a279dd"
-    },
-    "Dark Orange": {
-      "value": "#ed6325"
-    },
-    "Dark Pink": {
-      "value": "#df1a6f"
-    },
-    "Dark Red": {
-      "value": "#df241e"
-    },
-    "Dark Teal": {
-      "value": "#28a597"
-    },
-    "Dark Yellow": {
-      "value": "#e8ad11"
-    },
-    "Green": {
-      "value": "#02c875"
-    },
-    "Lilac": {
-      "value": "#bf97f9"
-    },
-    "Orange": {
-      "value": "#ff7131"
-    },
-    "Pink": {
-      "value": "#ff006e"
-    },
-    "Red": {
-      "value": "#f8251e"
-    },
-    "Teal": {
-      "value": "#16ceb9"
-    },
-    "Yellow": {
-      "value": "#fdca40"
-    },
-    "Black": {
-      "value": "#000000"
-    },
-    "Cool Grey 100": {
-      "value": "#f9f9f9"
-    },
-    "Cool Grey 150": {
-      "value": "#f3f4f6"
-    },
-    "Cool Grey 200": {
-      "value": "#ebedef"
-    },
-    "Cool Grey 250": {
-      "value": "#dfe1e5"
-    },
-    "Cool Grey 300": {
-      "value": "#ced1d7"
-    },
-    "Cool Grey 350": {
-      "value": "#b3b8c1"
-    },
-    "Cool Grey 400": {
-      "value": "#979ca5"
-    },
-    "Cool Grey 450": {
-      "value": "#71767f"
-    },
-    "Cool Grey 500": {
-      "value": "#595e67"
-    },
-    "Cool Grey 550": {
-      "value": "#41464f"
-    },
-    "Cool Grey 600": {
-      "value": "#292d38"
-    },
-    "Cool Grey 650": {
-      "value": "#181d26"
-    },
-    "Cool Grey 700": {
-      "value": "#0f131a"
-    },
-    "White": {
-      "value": "#ffffff"
-    },
-    "Warm Grey 100": {
-      "value": "#fafafa"
-    },
-    "Warm Grey 150": {
-      "value": "#f5f5f5"
-    },
-    "Warm Grey 200": {
-      "value": "#ebebeb"
-    },
-    "Warm Grey 250": {
-      "value": "#d6d6d6"
-    },
-    "Warm Grey 300": {
-      "value": "#c2c2c2"
-    },
-    "Warm Grey 350": {
-      "value": "#b3b3b3"
-    },
-    "Warm Grey 400": {
-      "value": "#999999"
-    },
-    "Warm Grey 450": {
-      "value": "#808080"
-    },
-    "Warm Grey 500": {
-      "value": "#666666"
-    },
-    "Warm Grey 550": {
-      "value": "#4d4d4d"
-    },
-    "Warm Grey 600": {
-      "value": "#333333"
-    },
-    "Warm Grey 650": {
-      "value": "#242424"
-    },
-    "Warm Grey 700": {
-      "value": "#1a1a1a"
-    },
-    "Cyan": {
-      "value": "#00f2f2"
-    },
-    "Lemon": {
-      "value": "#fff000"
-    },
-    "Lime": {
-      "value": "#bced09"
-    },
-    "Magenta": {
-      "value": "#fb03ff"
-    },
-    "Rose": {
-      "value": "#ff68a8"
-    }
-  }
-}

package/src/utilities/transformGroups.js

@@ -1,17 +0,0 @@
-module.exports = {
-  /**
-   * Custom transform group to apply multiple transforms similar to the
-   * js transform group but with the custom name/ti/kebab transform 
-   * applied
-   *
-   */
-   'js-ti': {
-    name: 'js-ti',
-    transforms: [
-      'attribute/cti',
-      'name/ti/kebab',
-      'size/rem',
-      'color/hex'
-    ]
-  }
-}

package/src/utilities/transforms.js

@@ -1,25 +0,0 @@
-const _ = require('lodash');
-
-module.exports = {
-  /**
-  * Creates a kebab-cased name on the type and item of the property. This is useful if you
-  * want to create properties without the category name.
-  * If you define a prefix on the platform in your config, it will prepend with your prefix.
-  *
-  * ```js
-  * // Matches: all
-  * // Returns:
-  * "charleston-green"
-  * "Prefix-charleston-green"
-  * ```
-  *
-  */
-
-  'name/ti/kebab': {
-    name: 'name/ti/kebab',
-    type: 'name',
-    transformer: function (prop, options) {
-      return _.kebabCase( [options.prefix].concat(prop.path.slice(1, prop.path.length)).join(' ') );
-    }
-  },
-}