@mindvalley/design-system 0.0.1-development
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/release.yml +29 -0
- package/.tool-versions +1 -0
- package/LICENSE +21 -0
- package/README.md +45 -0
- package/__tests__/utilities/transforms.test.js +24 -0
- package/babel.config.js +4 -0
- package/build.js +18 -0
- package/config.json +22 -0
- package/dist/index.js +120 -0
- package/dist/index.js.map +1 -0
- package/docs/CONTRIBUTION.md +177 -0
- package/docs/RELEASING.md +30 -0
- package/docs/USAGE.md +76 -0
- package/package.json +95 -0
- package/src/build/js/colors.js +62 -0
- package/src/index.js +1 -0
- package/src/properties/color-token.json +169 -0
- package/src/utilities/transformGroups.js +17 -0
- package/src/utilities/transforms.js +25 -0
- package/webpack.config.js +34 -0
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
name: Release
|
|
2
|
+
on:
|
|
3
|
+
push:
|
|
4
|
+
branches:
|
|
5
|
+
- main
|
|
6
|
+
jobs:
|
|
7
|
+
release:
|
|
8
|
+
name: Release
|
|
9
|
+
runs-on: ubuntu-latest
|
|
10
|
+
steps:
|
|
11
|
+
- name: Checkout
|
|
12
|
+
uses: actions/checkout@v2
|
|
13
|
+
with:
|
|
14
|
+
fetch-depth: 0
|
|
15
|
+
- name: Setup Node.js
|
|
16
|
+
uses: actions/setup-node@v1
|
|
17
|
+
with:
|
|
18
|
+
node-version: 15.14.0
|
|
19
|
+
- name: Install dependencies
|
|
20
|
+
run: npm ci
|
|
21
|
+
- name: Run tests
|
|
22
|
+
run: npm run test
|
|
23
|
+
- name: Build the publishable bundle
|
|
24
|
+
run: npm run build
|
|
25
|
+
- name: Release
|
|
26
|
+
env:
|
|
27
|
+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
28
|
+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
|
|
29
|
+
run: npx semantic-release
|
package/.tool-versions
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
nodejs 15.14.0
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 Mindvalley
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<h1 align="center">Mindvalley Design System</h1>
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<a aria-label="Commitizen friendly" href="http://commitizen.github.io/cz-cli/">
|
|
5
|
+
<img alt="" src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg">
|
|
6
|
+
</a>
|
|
7
|
+
<a aria-label="PRs Welcome" href="http://makeapullrequest.com">
|
|
8
|
+
<img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square">
|
|
9
|
+
</a>
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
The Mindvalley Design System provides reusable design tokens and assets to help developers, designers, and content authors build, maintain, and scale best-of-class digital experiences across the Mindvalley ecosystem.
|
|
13
|
+
The design system has the Mindvalley Design Language as its foundation.
|
|
14
|
+
|
|
15
|
+
It aims to make cross-brand UI development as fast as possible while maintaining a high level of quality and accessibility and reducing developer effort.
|
|
16
|
+
|
|
17
|
+
#### Getting started
|
|
18
|
+
First, we recommend going through the [brand guideline](https://brand.mindvalley.com). It captures our current views on how best to use the design in your daily work. After which you can explore;
|
|
19
|
+
|
|
20
|
+
Note:
|
|
21
|
+
|
|
22
|
+
From this point onwards, there will be continous mention of the word *token* or *design token*.
|
|
23
|
+
Get an understanding of what they are here 👉 [what are design token?](https://css-tricks.com/what-are-design-tokens/)
|
|
24
|
+
|
|
25
|
+
1. The [usage guide](#books-usage), if you want to start using the design system in your project/repo.
|
|
26
|
+
2. The [contribution section](#🙌-contributing) and [release](#🚀-releasing-and-publishing-changes) if you want to contribute to the repo.
|
|
27
|
+
|
|
28
|
+
#### :books: Usage
|
|
29
|
+
See the comprehensive [usage guide](docs/USAGE.md).
|
|
30
|
+
|
|
31
|
+
#### 🙌 Contributing
|
|
32
|
+
Read about the development process in the [contribution guide](docs/CONTRIBUTION.md).
|
|
33
|
+
|
|
34
|
+
#### 🚀 Releasing and publishing changes
|
|
35
|
+
You can find docs about our release process in the [release guide](docs/RELEASING.md).
|
|
36
|
+
|
|
37
|
+
#### ⚙️ Support
|
|
38
|
+
* All browsers
|
|
39
|
+
* Server-side rendering
|
|
40
|
+
|
|
41
|
+
####
|
|
42
|
+
## 🤷🏽♂️ Need Help?
|
|
43
|
+
|
|
44
|
+
For questions on how to use the mindvalley design system, please join and post questions to the [#mindvalley-design-system ](https://mindvalley.slack.com/archives/C03F4SBLZL2)channel on slack
|
|
45
|
+
or reach out to any of the contributors for assistance.
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
let transforms = require('../../src/utilities/transforms');
|
|
2
|
+
|
|
3
|
+
describe('transforms', () => {
|
|
4
|
+
describe('name/ti/kebab', () => {
|
|
5
|
+
it('should handle prefix', () => {
|
|
6
|
+
expect(transforms["name/ti/kebab"].transformer(
|
|
7
|
+
{
|
|
8
|
+
path: ['one', 'two', 'three']
|
|
9
|
+
}, {
|
|
10
|
+
prefix: 'prefix'
|
|
11
|
+
}
|
|
12
|
+
)).toBe('prefix-two-three');
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
it('should handle no prefix', () => {
|
|
16
|
+
expect(transforms["name/ti/kebab"].transformer(
|
|
17
|
+
{
|
|
18
|
+
path: ['one', 'two', 'three']
|
|
19
|
+
}, {
|
|
20
|
+
}
|
|
21
|
+
)).toBe('two-three');
|
|
22
|
+
});
|
|
23
|
+
});
|
|
24
|
+
});
|
package/babel.config.js
ADDED
package/build.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
const StyleDictionary = require('style-dictionary').extend(__dirname + '/config.json');
|
|
2
|
+
const transforms = require('./src/utilities/transforms');
|
|
3
|
+
const transformGroups = require('./src/utilities/transformGroups');
|
|
4
|
+
|
|
5
|
+
console.log('Build started...');
|
|
6
|
+
console.log('\n==============================================');
|
|
7
|
+
|
|
8
|
+
StyleDictionary.registerTransform(transforms['name/ti/kebab']);
|
|
9
|
+
StyleDictionary.registerTransformGroup(transformGroups['js-ti']);
|
|
10
|
+
|
|
11
|
+
// First, remove all files from any previous builds
|
|
12
|
+
StyleDictionary.cleanAllPlatforms();
|
|
13
|
+
|
|
14
|
+
// Finally, build all platform files
|
|
15
|
+
StyleDictionary.buildAllPlatforms();
|
|
16
|
+
|
|
17
|
+
console.log('\n==============================================');
|
|
18
|
+
console.log('\nBuild completed!');
|
package/config.json
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"source": [
|
|
3
|
+
"src/properties/**/*.json"
|
|
4
|
+
],
|
|
5
|
+
"platforms": {
|
|
6
|
+
"js": {
|
|
7
|
+
"transformGroup": "js-ti",
|
|
8
|
+
"buildPath": "src/build/js/",
|
|
9
|
+
"files": [
|
|
10
|
+
{
|
|
11
|
+
"format": "javascript/module-flat",
|
|
12
|
+
"destination": "colors.js",
|
|
13
|
+
"filter": {
|
|
14
|
+
"attributes": {
|
|
15
|
+
"category": "color"
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
]
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* ATTENTION: An "eval-source-map" devtool has been used.
|
|
3
|
+
* This devtool is neither made for production nor for readable output files.
|
|
4
|
+
* It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
|
|
5
|
+
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
|
|
6
|
+
* or disable the default devtool with "devtool: false".
|
|
7
|
+
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
|
|
8
|
+
*/
|
|
9
|
+
(function webpackUniversalModuleDefinition(root, factory) {
|
|
10
|
+
if(typeof exports === 'object' && typeof module === 'object')
|
|
11
|
+
module.exports = factory();
|
|
12
|
+
else if(typeof define === 'function' && define.amd)
|
|
13
|
+
define([], factory);
|
|
14
|
+
else if(typeof exports === 'object')
|
|
15
|
+
exports["mvDesignSystem"] = factory();
|
|
16
|
+
else
|
|
17
|
+
root["mvDesignSystem"] = factory();
|
|
18
|
+
})(this, function() {
|
|
19
|
+
return /******/ (() => { // webpackBootstrap
|
|
20
|
+
/******/ var __webpack_modules__ = ({
|
|
21
|
+
|
|
22
|
+
/***/ "./src/build/js/colors.js":
|
|
23
|
+
/*!********************************!*\
|
|
24
|
+
!*** ./src/build/js/colors.js ***!
|
|
25
|
+
\********************************/
|
|
26
|
+
/***/ ((module) => {
|
|
27
|
+
|
|
28
|
+
eval("/**\n * Do not edit directly\n * Generated on Fri, 07 May 2021 03:42:35 GMT\n */\nmodule.exports = {\n \"aqua\": \"#2cb3ff\",\n \"blue\": \"#005cff\",\n \"blue-wave\": \"#0066ff\",\n \"brand-blue\": \"#003fff\",\n \"brand-purple\": \"#9400ff\",\n \"brand-wave\": \"#003fff\",\n \"charleston-green\": \"#24272e\",\n \"dark-aqua\": \"#1b9ce6\",\n \"dark-green\": \"#159f65\",\n \"dark-lilac\": \"#a279dd\",\n \"dark-orange\": \"#ed6325\",\n \"dark-pink\": \"#df1a6f\",\n \"dark-red\": \"#df241e\",\n \"dark-teal\": \"#28a597\",\n \"dark-yellow\": \"#e8ad11\",\n \"green\": \"#02c875\",\n \"lilac\": \"#bf97f9\",\n \"orange\": \"#ff7131\",\n \"pink\": \"#ff006e\",\n \"red\": \"#f8251e\",\n \"teal\": \"#16ceb9\",\n \"yellow\": \"#fdca40\",\n \"black\": \"#000000\",\n \"cool-grey-100\": \"#f9f9f9\",\n \"cool-grey-150\": \"#f3f4f6\",\n \"cool-grey-200\": \"#ebedef\",\n \"cool-grey-250\": \"#dfe1e5\",\n \"cool-grey-300\": \"#ced1d7\",\n \"cool-grey-350\": \"#b3b8c1\",\n \"cool-grey-400\": \"#979ca5\",\n \"cool-grey-450\": \"#71767f\",\n \"cool-grey-500\": \"#595e67\",\n \"cool-grey-550\": \"#41464f\",\n \"cool-grey-600\": \"#292d38\",\n \"cool-grey-650\": \"#181d26\",\n \"cool-grey-700\": \"#0f131a\",\n \"white\": \"#ffffff\",\n \"warm-grey-100\": \"#fafafa\",\n \"warm-grey-150\": \"#f5f5f5\",\n \"warm-grey-200\": \"#ebebeb\",\n \"warm-grey-250\": \"#d6d6d6\",\n \"warm-grey-300\": \"#c2c2c2\",\n \"warm-grey-350\": \"#b3b3b3\",\n \"warm-grey-400\": \"#999999\",\n \"warm-grey-450\": \"#808080\",\n \"warm-grey-500\": \"#666666\",\n \"warm-grey-550\": \"#4d4d4d\",\n \"warm-grey-600\": \"#333333\",\n \"warm-grey-650\": \"#242424\",\n \"warm-grey-700\": \"#1a1a1a\",\n \"cyan\": \"#00f2f2\",\n \"lemon\": \"#fff000\",\n \"lime\": \"#bced09\",\n \"magenta\": \"#fb03ff\",\n \"rose\": \"#ff68a8\"\n};//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9tdkRlc2lnblN5c3RlbS8uL3NyYy9idWlsZC9qcy9jb2xvcnMuanM/OGUxMyJdLCJuYW1lcyI6WyJtb2R1bGUiLCJleHBvcnRzIl0sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUVBQSxNQUFNLENBQUNDLE9BQVAsR0FBaUI7QUFDZixVQUFRLFNBRE87QUFFZixVQUFRLFNBRk87QUFHZixlQUFhLFNBSEU7QUFJZixnQkFBYyxTQUpDO0FBS2Ysa0JBQWdCLFNBTEQ7QUFNZixnQkFBYyxTQU5DO0FBT2Ysc0JBQW9CLFNBUEw7QUFRZixlQUFhLFNBUkU7QUFTZixnQkFBYyxTQVRDO0FBVWYsZ0JBQWMsU0FWQztBQVdmLGlCQUFlLFNBWEE7QUFZZixlQUFhLFNBWkU7QUFhZixjQUFZLFNBYkc7QUFjZixlQUFhLFNBZEU7QUFlZixpQkFBZSxTQWZBO0FBZ0JmLFdBQVMsU0FoQk07QUFpQmYsV0FBUyxTQWpCTTtBQWtCZixZQUFVLFNBbEJLO0FBbUJmLFVBQVEsU0FuQk87QUFvQmYsU0FBTyxTQXBCUTtBQXFCZixVQUFRLFNBckJPO0FBc0JmLFlBQVUsU0F0Qks7QUF1QmYsV0FBUyxTQXZCTTtBQXdCZixtQkFBaUIsU0F4QkY7QUF5QmYsbUJBQWlCLFNBekJGO0FBMEJmLG1CQUFpQixTQTFCRjtBQTJCZixtQkFBaUIsU0EzQkY7QUE0QmYsbUJBQWlCLFNBNUJGO0FBNkJmLG1CQUFpQixTQTdCRjtBQThCZixtQkFBaUIsU0E5QkY7QUErQmYsbUJBQWlCLFNBL0JGO0FBZ0NmLG1CQUFpQixTQWhDRjtBQWlDZixtQkFBaUIsU0FqQ0Y7QUFrQ2YsbUJBQWlCLFNBbENGO0FBbUNmLG1CQUFpQixTQW5DRjtBQW9DZixtQkFBaUIsU0FwQ0Y7QUFxQ2YsV0FBUyxTQXJDTTtBQXNDZixtQkFBaUIsU0F0Q0Y7QUF1Q2YsbUJBQWlCLFNBdkNGO0FBd0NmLG1CQUFpQixTQXhDRjtBQXlDZixtQkFBaUIsU0F6Q0Y7QUEwQ2YsbUJBQWlCLFNBMUNGO0FBMkNmLG1CQUFpQixTQTNDRjtBQTRDZixtQkFBaUIsU0E1Q0Y7QUE2Q2YsbUJBQWlCLFNBN0NGO0FBOENmLG1CQUFpQixTQTlDRjtBQStDZixtQkFBaUIsU0EvQ0Y7QUFnRGYsbUJBQWlCLFNBaERGO0FBaURmLG1CQUFpQixTQWpERjtBQWtEZixtQkFBaUIsU0FsREY7QUFtRGYsVUFBUSxTQW5ETztBQW9EZixXQUFTLFNBcERNO0FBcURmLFVBQVEsU0FyRE87QUFzRGYsYUFBVyxTQXRESTtBQXVEZixVQUFRO0FBdkRPLENBQWpCIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBEbyBub3QgZWRpdCBkaXJlY3RseVxuICogR2VuZXJhdGVkIG9uIEZyaSwgMDcgTWF5IDIwMjEgMDM6NDI6MzUgR01UXG4gKi9cblxubW9kdWxlLmV4cG9ydHMgPSB7XG4gIFwiYXF1YVwiOiBcIiMyY2IzZmZcIixcbiAgXCJibHVlXCI6IFwiIzAwNWNmZlwiLFxuICBcImJsdWUtd2F2ZVwiOiBcIiMwMDY2ZmZcIixcbiAgXCJicmFuZC1ibHVlXCI6IFwiIzAwM2ZmZlwiLFxuICBcImJyYW5kLXB1cnBsZVwiOiBcIiM5NDAwZmZcIixcbiAgXCJicmFuZC13YXZlXCI6IFwiIzAwM2ZmZlwiLFxuICBcImNoYXJsZXN0b24tZ3JlZW5cIjogXCIjMjQyNzJlXCIsXG4gIFwiZGFyay1hcXVhXCI6IFwiIzFiOWNlNlwiLFxuICBcImRhcmstZ3JlZW5cIjogXCIjMTU5ZjY1XCIsXG4gIFwiZGFyay1saWxhY1wiOiBcIiNhMjc5ZGRcIixcbiAgXCJkYXJrLW9yYW5nZVwiOiBcIiNlZDYzMjVcIixcbiAgXCJkYXJrLXBpbmtcIjogXCIjZGYxYTZmXCIsXG4gIFwiZGFyay1yZWRcIjogXCIjZGYyNDFlXCIsXG4gIFwiZGFyay10ZWFsXCI6IFwiIzI4YTU5N1wiLFxuICBcImRhcmsteWVsbG93XCI6IFwiI2U4YWQxMVwiLFxuICBcImdyZWVuXCI6IFwiIzAyYzg3NVwiLFxuICBcImxpbGFjXCI6IFwiI2JmOTdmOVwiLFxuICBcIm9yYW5nZVwiOiBcIiNmZjcxMzFcIixcbiAgXCJwaW5rXCI6IFwiI2ZmMDA2ZVwiLFxuICBcInJlZFwiOiBcIiNmODI1MWVcIixcbiAgXCJ0ZWFsXCI6IFwiIzE2Y2ViOVwiLFxuICBcInllbGxvd1wiOiBcIiNmZGNhNDBcIixcbiAgXCJibGFja1wiOiBcIiMwMDAwMDBcIixcbiAgXCJjb29sLWdyZXktMTAwXCI6IFwiI2Y5ZjlmOVwiLFxuICBcImNvb2wtZ3JleS0xNTBcIjogXCIjZjNmNGY2XCIsXG4gIFwiY29vbC1ncmV5LTIwMFwiOiBcIiNlYmVkZWZcIixcbiAgXCJjb29sLWdyZXktMjUwXCI6IFwiI2RmZTFlNVwiLFxuICBcImNvb2wtZ3JleS0zMDBcIjogXCIjY2VkMWQ3XCIsXG4gIFwiY29vbC1ncmV5LTM1MFwiOiBcIiNiM2I4YzFcIixcbiAgXCJjb29sLWdyZXktNDAwXCI6IFwiIzk3OWNhNVwiLFxuICBcImNvb2wtZ3JleS00NTBcIjogXCIjNzE3NjdmXCIsXG4gIFwiY29vbC1ncmV5LTUwMFwiOiBcIiM1OTVlNjdcIixcbiAgXCJjb29sLWdyZXktNTUwXCI6IFwiIzQxNDY0ZlwiLFxuICBcImNvb2wtZ3JleS02MDBcIjogXCIjMjkyZDM4XCIsXG4gIFwiY29vbC1ncmV5LTY1MFwiOiBcIiMxODFkMjZcIixcbiAgXCJjb29sLWdyZXktNzAwXCI6IFwiIzBmMTMxYVwiLFxuICBcIndoaXRlXCI6IFwiI2ZmZmZmZlwiLFxuICBcIndhcm0tZ3JleS0xMDBcIjogXCIjZmFmYWZhXCIsXG4gIFwid2FybS1ncmV5LTE1MFwiOiBcIiNmNWY1ZjVcIixcbiAgXCJ3YXJtLWdyZXktMjAwXCI6IFwiI2ViZWJlYlwiLFxuICBcIndhcm0tZ3JleS0yNTBcIjogXCIjZDZkNmQ2XCIsXG4gIFwid2FybS1ncmV5LTMwMFwiOiBcIiNjMmMyYzJcIixcbiAgXCJ3YXJtLWdyZXktMzUwXCI6IFwiI2IzYjNiM1wiLFxuICBcIndhcm0tZ3JleS00MDBcIjogXCIjOTk5OTk5XCIsXG4gIFwid2FybS1ncmV5LTQ1MFwiOiBcIiM4MDgwODBcIixcbiAgXCJ3YXJtLWdyZXktNTAwXCI6IFwiIzY2NjY2NlwiLFxuICBcIndhcm0tZ3JleS01NTBcIjogXCIjNGQ0ZDRkXCIsXG4gIFwid2FybS1ncmV5LTYwMFwiOiBcIiMzMzMzMzNcIixcbiAgXCJ3YXJtLWdyZXktNjUwXCI6IFwiIzI0MjQyNFwiLFxuICBcIndhcm0tZ3JleS03MDBcIjogXCIjMWExYTFhXCIsXG4gIFwiY3lhblwiOiBcIiMwMGYyZjJcIixcbiAgXCJsZW1vblwiOiBcIiNmZmYwMDBcIixcbiAgXCJsaW1lXCI6IFwiI2JjZWQwOVwiLFxuICBcIm1hZ2VudGFcIjogXCIjZmIwM2ZmXCIsXG4gIFwicm9zZVwiOiBcIiNmZjY4YThcIlxufTtcbiJdLCJmaWxlIjoiLi9zcmMvYnVpbGQvanMvY29sb3JzLmpzLmpzIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./src/build/js/colors.js\n");
|
|
29
|
+
|
|
30
|
+
/***/ }),
|
|
31
|
+
|
|
32
|
+
/***/ "./src/index.js":
|
|
33
|
+
/*!**********************!*\
|
|
34
|
+
!*** ./src/index.js ***!
|
|
35
|
+
\**********************/
|
|
36
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
37
|
+
|
|
38
|
+
"use strict";
|
|
39
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"colors\": () => (/* reexport module object */ _build_js_colors__WEBPACK_IMPORTED_MODULE_0__)\n/* harmony export */ });\n/* harmony import */ var _build_js_colors__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./build/js/colors */ \"./src/build/js/colors.js\");\n/* harmony import */ var _build_js_colors__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_build_js_colors__WEBPACK_IMPORTED_MODULE_0__);\n\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvaW5kZXguanMuanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9tdkRlc2lnblN5c3RlbS8uL3NyYy9pbmRleC5qcz9iNjM1Il0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGFzIGNvbG9ycyBmcm9tIFwiLi9idWlsZC9qcy9jb2xvcnNcIjtcbiJdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBQUE7Iiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./src/index.js\n");
|
|
40
|
+
|
|
41
|
+
/***/ })
|
|
42
|
+
|
|
43
|
+
/******/ });
|
|
44
|
+
/************************************************************************/
|
|
45
|
+
/******/ // The module cache
|
|
46
|
+
/******/ var __webpack_module_cache__ = {};
|
|
47
|
+
/******/
|
|
48
|
+
/******/ // The require function
|
|
49
|
+
/******/ function __webpack_require__(moduleId) {
|
|
50
|
+
/******/ // Check if module is in cache
|
|
51
|
+
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
|
52
|
+
/******/ if (cachedModule !== undefined) {
|
|
53
|
+
/******/ return cachedModule.exports;
|
|
54
|
+
/******/ }
|
|
55
|
+
/******/ // Create a new module (and put it into the cache)
|
|
56
|
+
/******/ var module = __webpack_module_cache__[moduleId] = {
|
|
57
|
+
/******/ // no module.id needed
|
|
58
|
+
/******/ // no module.loaded needed
|
|
59
|
+
/******/ exports: {}
|
|
60
|
+
/******/ };
|
|
61
|
+
/******/
|
|
62
|
+
/******/ // Execute the module function
|
|
63
|
+
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
|
64
|
+
/******/
|
|
65
|
+
/******/ // Return the exports of the module
|
|
66
|
+
/******/ return module.exports;
|
|
67
|
+
/******/ }
|
|
68
|
+
/******/
|
|
69
|
+
/************************************************************************/
|
|
70
|
+
/******/ /* webpack/runtime/compat get default export */
|
|
71
|
+
/******/ (() => {
|
|
72
|
+
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
73
|
+
/******/ __webpack_require__.n = (module) => {
|
|
74
|
+
/******/ var getter = module && module.__esModule ?
|
|
75
|
+
/******/ () => (module['default']) :
|
|
76
|
+
/******/ () => (module);
|
|
77
|
+
/******/ __webpack_require__.d(getter, { a: getter });
|
|
78
|
+
/******/ return getter;
|
|
79
|
+
/******/ };
|
|
80
|
+
/******/ })();
|
|
81
|
+
/******/
|
|
82
|
+
/******/ /* webpack/runtime/define property getters */
|
|
83
|
+
/******/ (() => {
|
|
84
|
+
/******/ // define getter functions for harmony exports
|
|
85
|
+
/******/ __webpack_require__.d = (exports, definition) => {
|
|
86
|
+
/******/ for(var key in definition) {
|
|
87
|
+
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|
88
|
+
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
89
|
+
/******/ }
|
|
90
|
+
/******/ }
|
|
91
|
+
/******/ };
|
|
92
|
+
/******/ })();
|
|
93
|
+
/******/
|
|
94
|
+
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
95
|
+
/******/ (() => {
|
|
96
|
+
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
97
|
+
/******/ })();
|
|
98
|
+
/******/
|
|
99
|
+
/******/ /* webpack/runtime/make namespace object */
|
|
100
|
+
/******/ (() => {
|
|
101
|
+
/******/ // define __esModule on exports
|
|
102
|
+
/******/ __webpack_require__.r = (exports) => {
|
|
103
|
+
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
104
|
+
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
105
|
+
/******/ }
|
|
106
|
+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
107
|
+
/******/ };
|
|
108
|
+
/******/ })();
|
|
109
|
+
/******/
|
|
110
|
+
/************************************************************************/
|
|
111
|
+
/******/
|
|
112
|
+
/******/ // startup
|
|
113
|
+
/******/ // Load entry module and return exports
|
|
114
|
+
/******/ // This entry module can't be inlined because the eval-source-map devtool is used.
|
|
115
|
+
/******/ var __webpack_exports__ = __webpack_require__("./src/index.js");
|
|
116
|
+
/******/
|
|
117
|
+
/******/ return __webpack_exports__;
|
|
118
|
+
/******/ })()
|
|
119
|
+
;
|
|
120
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["webpack://mvDesignSystem/webpack/universalModuleDefinition","webpack://mvDesignSystem/./src/build/js/colors.js","webpack://mvDesignSystem/webpack/bootstrap","webpack://mvDesignSystem/webpack/runtime/compat get default export","webpack://mvDesignSystem/webpack/runtime/define property getters","webpack://mvDesignSystem/webpack/runtime/hasOwnProperty shorthand","webpack://mvDesignSystem/webpack/runtime/make namespace object"],"names":["root","factory","exports","module","define","amd","this","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","n","getter","__esModule","d","a","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value"],"mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,GAAIH,GACe,iBAAZC,QACdA,QAAwB,eAAID,IAE5BD,EAAqB,eAAIC,IAR3B,CASGK,MAAM,WACT,M,qBCLAH,EAAOD,QAAU,CACf,KAAQ,UACR,KAAQ,UACR,YAAa,UACb,aAAc,UACd,eAAgB,UAChB,aAAc,UACd,mBAAoB,UACpB,YAAa,UACb,aAAc,UACd,aAAc,UACd,cAAe,UACf,YAAa,UACb,WAAY,UACZ,YAAa,UACb,cAAe,UACf,MAAS,UACT,MAAS,UACT,OAAU,UACV,KAAQ,UACR,IAAO,UACP,KAAQ,UACR,OAAU,UACV,MAAS,UACT,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,MAAS,UACT,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,gBAAiB,UACjB,KAAQ,UACR,MAAS,UACT,KAAQ,UACR,QAAW,UACX,KAAQ,aC3DNK,EAA2B,GAG/B,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAaR,QAGrB,IAAIC,EAASI,EAAyBE,GAAY,CAGjDP,QAAS,IAOV,OAHAU,EAAoBH,GAAUN,EAAQA,EAAOD,QAASM,GAG/CL,EAAOD,QCpBfM,EAAoBK,EAAKV,IACxB,IAAIW,EAASX,GAAUA,EAAOY,WAC7B,IAAOZ,EAAiB,QACxB,IAAM,EAEP,OADAK,EAAoBQ,EAAEF,EAAQ,CAAEG,EAAGH,IAC5BA,GCLRN,EAAoBQ,EAAI,CAACd,EAASgB,KACjC,IAAI,IAAIC,KAAOD,EACXV,EAAoBY,EAAEF,EAAYC,KAASX,EAAoBY,EAAElB,EAASiB,IAC5EE,OAAOC,eAAepB,EAASiB,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,MCJ3EX,EAAoBY,EAAI,CAACK,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFlB,EAAoBsB,EAAK5B,IACH,oBAAX6B,QAA0BA,OAAOC,aAC1CX,OAAOC,eAAepB,EAAS6B,OAAOC,YAAa,CAAEC,MAAO,WAE7DZ,OAAOC,eAAepB,EAAS,aAAc,CAAE+B,OAAO,K","file":"index.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"mvDesignSystem\"] = factory();\n\telse\n\t\troot[\"mvDesignSystem\"] = factory();\n})(this, function() {\nreturn ","/**\n * Do not edit directly\n * Generated on Fri, 07 May 2021 03:42:35 GMT\n */\n\nmodule.exports = {\n \"aqua\": \"#2cb3ff\",\n \"blue\": \"#005cff\",\n \"blue-wave\": \"#0066ff\",\n \"brand-blue\": \"#003fff\",\n \"brand-purple\": \"#9400ff\",\n \"brand-wave\": \"#003fff\",\n \"charleston-green\": \"#24272e\",\n \"dark-aqua\": \"#1b9ce6\",\n \"dark-green\": \"#159f65\",\n \"dark-lilac\": \"#a279dd\",\n \"dark-orange\": \"#ed6325\",\n \"dark-pink\": \"#df1a6f\",\n \"dark-red\": \"#df241e\",\n \"dark-teal\": \"#28a597\",\n \"dark-yellow\": \"#e8ad11\",\n \"green\": \"#02c875\",\n \"lilac\": \"#bf97f9\",\n \"orange\": \"#ff7131\",\n \"pink\": \"#ff006e\",\n \"red\": \"#f8251e\",\n \"teal\": \"#16ceb9\",\n \"yellow\": \"#fdca40\",\n \"black\": \"#000000\",\n \"cool-grey-100\": \"#f9f9f9\",\n \"cool-grey-150\": \"#f3f4f6\",\n \"cool-grey-200\": \"#ebedef\",\n \"cool-grey-250\": \"#dfe1e5\",\n \"cool-grey-300\": \"#ced1d7\",\n \"cool-grey-350\": \"#b3b8c1\",\n \"cool-grey-400\": \"#979ca5\",\n \"cool-grey-450\": \"#71767f\",\n \"cool-grey-500\": \"#595e67\",\n \"cool-grey-550\": \"#41464f\",\n \"cool-grey-600\": \"#292d38\",\n \"cool-grey-650\": \"#181d26\",\n \"cool-grey-700\": \"#0f131a\",\n \"white\": \"#ffffff\",\n \"warm-grey-100\": \"#fafafa\",\n \"warm-grey-150\": \"#f5f5f5\",\n \"warm-grey-200\": \"#ebebeb\",\n \"warm-grey-250\": \"#d6d6d6\",\n \"warm-grey-300\": \"#c2c2c2\",\n \"warm-grey-350\": \"#b3b3b3\",\n \"warm-grey-400\": \"#999999\",\n \"warm-grey-450\": \"#808080\",\n \"warm-grey-500\": \"#666666\",\n \"warm-grey-550\": \"#4d4d4d\",\n \"warm-grey-600\": \"#333333\",\n \"warm-grey-650\": \"#242424\",\n \"warm-grey-700\": \"#1a1a1a\",\n \"cyan\": \"#00f2f2\",\n \"lemon\": \"#fff000\",\n \"lime\": \"#bced09\",\n \"magenta\": \"#fb03ff\",\n \"rose\": \"#ff68a8\"\n};\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};"],"sourceRoot":""}
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
## 🤝 Contributing [](http://makeapullrequest.com)
|
|
2
|
+
Before you get your hands dirty, let's first understand how the repo works and its structure. We are going to look at:
|
|
3
|
+
* What happens in the repo and its inputs and outputs: Jump to [token tranformation](#token-transformation-process)
|
|
4
|
+
* How the repo is structured and its core parts: see [Directory structure](#directory-structure)
|
|
5
|
+
|
|
6
|
+
#### 🏭 Token transformation process
|
|
7
|
+
Token transformation on a high level involves the four steps illustrated below:
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
##### 1. The design tokens:
|
|
12
|
+
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.
|
|
13
|
+
|
|
14
|
+
##### 2. Parsing and transformation:
|
|
15
|
+
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).
|
|
16
|
+
The output of this step ends up in the [`src/build/`](#srcbuild) directory.
|
|
17
|
+
*Parsing and tranformation can be triggered by running:*
|
|
18
|
+
|
|
19
|
+
npm run styledictonary:build
|
|
20
|
+
|
|
21
|
+
##### 3. Bundling:
|
|
22
|
+
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.
|
|
23
|
+
Bundling can be invoked by running:
|
|
24
|
+
|
|
25
|
+
npm run build
|
|
26
|
+
|
|
27
|
+
##### 4. Publishing:
|
|
28
|
+
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-🚀).
|
|
29
|
+
The end package is published to NPM where it can be installed from.
|
|
30
|
+
|
|
31
|
+
#### 🗂 Directory structure
|
|
32
|
+
Let's look at some important directories.
|
|
33
|
+
|
|
34
|
+
```shell
|
|
35
|
+
├── LICENSE
|
|
36
|
+
├── README.md
|
|
37
|
+
├── __tests__
|
|
38
|
+
│ └── utilities
|
|
39
|
+
│ └── transforms.test.j s
|
|
40
|
+
├── babel.config.js
|
|
41
|
+
├── build.js
|
|
42
|
+
├── config.json
|
|
43
|
+
├── dist
|
|
44
|
+
│ ├── index.js
|
|
45
|
+
│ └── index.js.map
|
|
46
|
+
├── docs
|
|
47
|
+
│ ├── CONTRIBUTION.md
|
|
48
|
+
│ ├── RELEASING.md
|
|
49
|
+
│ └── USAGE.md
|
|
50
|
+
├── package-lock.json
|
|
51
|
+
├── package.json
|
|
52
|
+
├── src
|
|
53
|
+
│ ├── build
|
|
54
|
+
│ │ └── js
|
|
55
|
+
│ │ └── colors.js
|
|
56
|
+
│ ├── index.js
|
|
57
|
+
│ ├── properties
|
|
58
|
+
│ │ └── color-token.json
|
|
59
|
+
│ └── utilities
|
|
60
|
+
│ ├── transformGroups.js
|
|
61
|
+
│ └── transforms.js
|
|
62
|
+
└── webpack.config.js
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
###### src/properties/
|
|
66
|
+
This is the source of the design tokens. For now, we have the tokens checked in as JSON files.
|
|
67
|
+
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.
|
|
68
|
+
|
|
69
|
+
*Yes its a manual step for now, automation will follow later.*
|
|
70
|
+
|
|
71
|
+
###### src/build/
|
|
72
|
+
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](#).
|
|
73
|
+
|
|
74
|
+
###### src/utilities
|
|
75
|
+
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/`
|
|
76
|
+
|
|
77
|
+
###### dist
|
|
78
|
+
Its the output directy of the webpack build process and is not checked in for versioning.
|
|
79
|
+
|
|
80
|
+
###### test
|
|
81
|
+
For test because code that cannot be tested is flawed 🤷🏽♂️.
|
|
82
|
+
|
|
83
|
+
#### ⌨️ Start development
|
|
84
|
+
To get started with development, start by cloning the mv-design-system repo.
|
|
85
|
+
```
|
|
86
|
+
git clone git@github.com:mindvalley/mv-design-system.git
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Change your current directory to the folder you just cloned and install the dependencies.
|
|
90
|
+
```
|
|
91
|
+
cd mv-design-system && npm install
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
###### 💡 Note
|
|
95
|
+
This repo uses `npm` as the package manager
|
|
96
|
+
|
|
97
|
+
##### Making commits
|
|
98
|
+
|
|
99
|
+
After making changes, stage your changes by issuing the standard `git add <filename>`, or however you stage your files.
|
|
100
|
+
For commits, we leverage the power of conventional commits using commitizen.
|
|
101
|
+
|
|
102
|
+
**Why use conventional commits?** To enable automation of releases, semantic versioning and release notes auto-generation.
|
|
103
|
+
|
|
104
|
+
To make a commit, run the command below:
|
|
105
|
+
```
|
|
106
|
+
npm run commit
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
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.
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
If your branch name has a Jira ticket id already included then the prompt automatically extracts it
|
|
114
|
+
|
|
115
|
+
Though using `npm run commit` is highly recommended for this repo, you can alternatively write your commit without the commitzen helper by ensuring you
|
|
116
|
+
follow the conventional commits conventions.
|
|
117
|
+
```
|
|
118
|
+
type(scope): commit-message
|
|
119
|
+
|
|
120
|
+
JIRA-Issue-ID
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
The commits types have to be one of:
|
|
124
|
+
- `feat`: A new feature
|
|
125
|
+
- `fix`: A bug fix
|
|
126
|
+
- `docs`: Documentation only changes
|
|
127
|
+
- `style`: Changes that do not affect the meaning of the code (white-space, - formatting, missing semi-colons, etc)
|
|
128
|
+
- `refactor`: A code change that neither fixes a bug nor adds a feature
|
|
129
|
+
- `perf`: A code change that improves performance
|
|
130
|
+
- `test`: Adding missing tests or correcting existing tests
|
|
131
|
+
- `build`: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
|
|
132
|
+
- `ci`: Changes to our CI configuration files and scripts (example - scopes: Travis, Circle, BrowserStack, SauceLabs)
|
|
133
|
+
- `chore`: Other changes that don't modify src or test files
|
|
134
|
+
- `revert`: Reverts a previous commit
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
Here is an example commit message:
|
|
138
|
+
```
|
|
139
|
+
chore(asdf): Add .tool-versions file with current supported node version
|
|
140
|
+
|
|
141
|
+
MVHOME-765
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
Once your commits are done, you can do a normal push to remote.
|
|
145
|
+
|
|
146
|
+
Read more on [commit conventions](https://www.conventionalcommits.org/en/v1.0.0-beta.4/)
|
|
147
|
+
##### Branch naming
|
|
148
|
+
|
|
149
|
+
Branch names start with the Jira ticket ID eg.
|
|
150
|
+
|
|
151
|
+
`MVHOME-765-branch-description-here`
|
|
152
|
+
|
|
153
|
+
##### Important commands
|
|
154
|
+
|
|
155
|
+
###### Tests
|
|
156
|
+
To run all the tests:
|
|
157
|
+
```
|
|
158
|
+
npm run test
|
|
159
|
+
```
|
|
160
|
+
###### Transform design tokens
|
|
161
|
+
Whenever there are changes that affect our design tokens, we need to regenerate the build assets using the command below and commit the results:
|
|
162
|
+
|
|
163
|
+
```
|
|
164
|
+
npm run styledictonary:build
|
|
165
|
+
```
|
|
166
|
+
This is the command that tranforms our design tokens to the different desired formats we have defined.
|
|
167
|
+
|
|
168
|
+
######
|
|
169
|
+
In the release step of the CI pipline, we bundle the assets into a umd module with the help of webpack to ensure that our package runs on both the server(nodejs) and the client side(browser).
|
|
170
|
+
|
|
171
|
+
```
|
|
172
|
+
npm run build
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
You can test it out on your development environment to see the output.
|
|
176
|
+
|
|
177
|
+
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-🚀)
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
## Releasing 🚀
|
|
2
|
+
|
|
3
|
+
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:
|
|
4
|
+
|
|
5
|
+
| Commit | Release Type | Semver update type |
|
|
6
|
+
|-----------------------------|------------------|----------------------------------|
|
|
7
|
+
| Commit with breaking change | Breaking release | Major release e.g 1.x.x -> 2.x.x |
|
|
8
|
+
| Commit with type `feat` | Feature release | Major release e.g 1.x.x -> 2.x.x |
|
|
9
|
+
| Commit with type `fix` | Fix Release | Minor release e.g 1.2.x -> 1.3.x |
|
|
10
|
+
| Commit with type `perf` | Patch release | Patch release e.g 1.x.4 -> 1.x.5 |
|
|
11
|
+
|
|
12
|
+
Only the above type of commits will trigger a release.
|
|
13
|
+
|
|
14
|
+
On merging to the main branch, several things will happen
|
|
15
|
+
1. Semantic release will start by analyzing the commit messages of the merged changes based on the commit messages
|
|
16
|
+
2. Determine what kind release it is bases on the above table.
|
|
17
|
+
3. Generate a changelog for the new changes and generate the new package version number.
|
|
18
|
+
4. There after a git release will be prepared and pushed to the repo together with the Changelog and package.json version update.
|
|
19
|
+
5. The new package is then published to npm.
|
|
20
|
+
|
|
21
|
+
More detailed explanation can be found on the [semantic release steps documentation](https://semantic-release.gitbook.io/semantic-release/#release-steps)
|
|
22
|
+
|
|
23
|
+
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)
|
|
24
|
+
|
|
25
|
+
Jump to [usage]() to understand how to use the published package in your repo. ddd
|
|
26
|
+
|
|
27
|
+
##### 💡 Note:
|
|
28
|
+
The above steps should all happen with no human intervention.
|
|
29
|
+
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.
|
|
30
|
+
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
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
## Installation
|
|
2
|
+
|
|
3
|
+
#### Using npm or yarn
|
|
4
|
+
We recommend using npm or yarn to install. It not only makes development more straightforward but also allows you
|
|
5
|
+
to take advantage of the rich ecosystem of Javascript packages and tooling.
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
$ npm install @mindvalley/design-system
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
$ yarn add @mindvalley/design-system
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
## Usage
|
|
17
|
+
|
|
18
|
+
###### *ES module syntax*
|
|
19
|
+
```
|
|
20
|
+
import { colors } from '@mindvalley/design-system'
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
###### *commonJS syntax*
|
|
24
|
+
```
|
|
25
|
+
const { colors } = require('@mindvalley/design-system')
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
#### 🎨 colors
|
|
29
|
+
|
|
30
|
+
To use the colors from the design system there are two options.
|
|
31
|
+
|
|
32
|
+
###### 1. TailwindCSS
|
|
33
|
+
If you use TailwindCSS in your project, using the colors is a simple two-step process:
|
|
34
|
+
|
|
35
|
+
1. Install the designs system see [installation](#using-npm-or-yarn).
|
|
36
|
+
2. Use the [commonJS syntax](#commonjs-syntax) to include the colors and extend your `tailwind.config.js`.
|
|
37
|
+
|
|
38
|
+
*Example tailwind.config.js*
|
|
39
|
+
```JavaScript
|
|
40
|
+
const { colors } = require('@mindvalley/design-system')
|
|
41
|
+
|
|
42
|
+
module.exports = {
|
|
43
|
+
theme: {
|
|
44
|
+
colors: {
|
|
45
|
+
...color
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
##### 💡 Note
|
|
52
|
+
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.
|
|
53
|
+
|
|
54
|
+
###### 2. Using CSS-in-JS
|
|
55
|
+
1. Install the designs system see [installation](#using-npm-or-yarn).
|
|
56
|
+
2. Use the [ES module](#es-module-syntax) syntax to import your module and include it your code.
|
|
57
|
+
|
|
58
|
+
*Sample usage in a react app*
|
|
59
|
+
```Javascript
|
|
60
|
+
import React from 'react'
|
|
61
|
+
import { color } from '@mindvalley/design-system'
|
|
62
|
+
|
|
63
|
+
function App() {
|
|
64
|
+
const isBackgroundRed = true;
|
|
65
|
+
|
|
66
|
+
return (
|
|
67
|
+
<div
|
|
68
|
+
style={{
|
|
69
|
+
backgroundColor: isBackgroundRed ? color.red : color.blue,
|
|
70
|
+
}}
|
|
71
|
+
/>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export default App;
|
|
76
|
+
```
|
package/package.json
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@mindvalley/design-system",
|
|
3
|
+
"version": "0.0.1-development",
|
|
4
|
+
"description": "Resources, components, design guidelines and tooling for Mindvalley's design system",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"design-system",
|
|
7
|
+
"design-tokens",
|
|
8
|
+
"library",
|
|
9
|
+
"design-guidelines"
|
|
10
|
+
],
|
|
11
|
+
"homepage": "https://github.com/mindvalley/mv-design-system#readme",
|
|
12
|
+
"bugs": {
|
|
13
|
+
"url": "https://github.com/mindvalley/mv-design-system/issues"
|
|
14
|
+
},
|
|
15
|
+
"repository": {
|
|
16
|
+
"type": "git",
|
|
17
|
+
"url": "https://github.com/mindvalley/mv-design-system.git"
|
|
18
|
+
},
|
|
19
|
+
"license": "MIT",
|
|
20
|
+
"author": "Mindvalley Developers and Designers",
|
|
21
|
+
"main": "dist/index.js",
|
|
22
|
+
"scripts": {
|
|
23
|
+
"build": "webpack --mode production",
|
|
24
|
+
"commit": "cz",
|
|
25
|
+
"commitmsg": "validate-commit-msg",
|
|
26
|
+
"semantic-release": "semantic-release",
|
|
27
|
+
"styledictonary:build": "node ./build.js",
|
|
28
|
+
"test": "jest",
|
|
29
|
+
"watch": "webpack --mode development --watch"
|
|
30
|
+
},
|
|
31
|
+
"husky": {
|
|
32
|
+
"hooks": {
|
|
33
|
+
"prepare-commit-msg": "exec < /dev/tty && git cz --hook || true",
|
|
34
|
+
"commitmsg": "commitlint -e $GIT_PARAMS"
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
"config": {
|
|
38
|
+
"commitizen": {
|
|
39
|
+
"path": "./node_modules/cz-conventional-changelog-with-jiraid-detection",
|
|
40
|
+
"disableScopeLowerCase": true,
|
|
41
|
+
"disableSubjectLowerCase": true
|
|
42
|
+
},
|
|
43
|
+
"validate-commit-msg": {
|
|
44
|
+
"types": [
|
|
45
|
+
"feat",
|
|
46
|
+
"fix",
|
|
47
|
+
"docs",
|
|
48
|
+
"style",
|
|
49
|
+
"refactor",
|
|
50
|
+
"build",
|
|
51
|
+
"ci",
|
|
52
|
+
"perf",
|
|
53
|
+
"test",
|
|
54
|
+
"chore",
|
|
55
|
+
"revert"
|
|
56
|
+
],
|
|
57
|
+
"warnOnFail": false,
|
|
58
|
+
"maxSubjectLength": 100,
|
|
59
|
+
"subjectPattern": "^[A-Z]+-[0-9]+ - .*",
|
|
60
|
+
"subjectPatternErrorMsg": "Subject must be in format 'CMS-123 - Commit message'",
|
|
61
|
+
"helpMessage": ""
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
"devDependencies": {
|
|
65
|
+
"@babel/core": "^7.14.0",
|
|
66
|
+
"@babel/preset-env": "^7.14.1",
|
|
67
|
+
"@semantic-release/git": "^9.0.0",
|
|
68
|
+
"babel-jest": "^26.6.3",
|
|
69
|
+
"babel-loader": "^8.2.2",
|
|
70
|
+
"commitizen": "^4.2.3",
|
|
71
|
+
"cz-conventional-changelog-with-jiraid-detection": "^1.0.3",
|
|
72
|
+
"husky": "^6.0.0",
|
|
73
|
+
"jest": "^26.6.3",
|
|
74
|
+
"lodash": "^4.17.21",
|
|
75
|
+
"semantic-release": "^17.4.2",
|
|
76
|
+
"style-dictionary": "^3.0.0-rc.9",
|
|
77
|
+
"validate-commit-msg": "^2.14.0",
|
|
78
|
+
"webpack": "^5.36.2",
|
|
79
|
+
"webpack-cli": "^4.6.0"
|
|
80
|
+
},
|
|
81
|
+
"engines": {
|
|
82
|
+
"node": ">=15.4.0"
|
|
83
|
+
},
|
|
84
|
+
"release": {
|
|
85
|
+
"branches": [
|
|
86
|
+
"main"
|
|
87
|
+
],
|
|
88
|
+
"plugins": [
|
|
89
|
+
"@semantic-release/commit-analyzer",
|
|
90
|
+
"@semantic-release/release-notes-generator",
|
|
91
|
+
"@semantic-release/npm",
|
|
92
|
+
"@semantic-release/git"
|
|
93
|
+
]
|
|
94
|
+
}
|
|
95
|
+
}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Fri, 07 May 2021 03:42:35 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
module.exports = {
|
|
7
|
+
"aqua": "#2cb3ff",
|
|
8
|
+
"blue": "#005cff",
|
|
9
|
+
"blue-wave": "#0066ff",
|
|
10
|
+
"brand-blue": "#003fff",
|
|
11
|
+
"brand-purple": "#9400ff",
|
|
12
|
+
"brand-wave": "#003fff",
|
|
13
|
+
"charleston-green": "#24272e",
|
|
14
|
+
"dark-aqua": "#1b9ce6",
|
|
15
|
+
"dark-green": "#159f65",
|
|
16
|
+
"dark-lilac": "#a279dd",
|
|
17
|
+
"dark-orange": "#ed6325",
|
|
18
|
+
"dark-pink": "#df1a6f",
|
|
19
|
+
"dark-red": "#df241e",
|
|
20
|
+
"dark-teal": "#28a597",
|
|
21
|
+
"dark-yellow": "#e8ad11",
|
|
22
|
+
"green": "#02c875",
|
|
23
|
+
"lilac": "#bf97f9",
|
|
24
|
+
"orange": "#ff7131",
|
|
25
|
+
"pink": "#ff006e",
|
|
26
|
+
"red": "#f8251e",
|
|
27
|
+
"teal": "#16ceb9",
|
|
28
|
+
"yellow": "#fdca40",
|
|
29
|
+
"black": "#000000",
|
|
30
|
+
"cool-grey-100": "#f9f9f9",
|
|
31
|
+
"cool-grey-150": "#f3f4f6",
|
|
32
|
+
"cool-grey-200": "#ebedef",
|
|
33
|
+
"cool-grey-250": "#dfe1e5",
|
|
34
|
+
"cool-grey-300": "#ced1d7",
|
|
35
|
+
"cool-grey-350": "#b3b8c1",
|
|
36
|
+
"cool-grey-400": "#979ca5",
|
|
37
|
+
"cool-grey-450": "#71767f",
|
|
38
|
+
"cool-grey-500": "#595e67",
|
|
39
|
+
"cool-grey-550": "#41464f",
|
|
40
|
+
"cool-grey-600": "#292d38",
|
|
41
|
+
"cool-grey-650": "#181d26",
|
|
42
|
+
"cool-grey-700": "#0f131a",
|
|
43
|
+
"white": "#ffffff",
|
|
44
|
+
"warm-grey-100": "#fafafa",
|
|
45
|
+
"warm-grey-150": "#f5f5f5",
|
|
46
|
+
"warm-grey-200": "#ebebeb",
|
|
47
|
+
"warm-grey-250": "#d6d6d6",
|
|
48
|
+
"warm-grey-300": "#c2c2c2",
|
|
49
|
+
"warm-grey-350": "#b3b3b3",
|
|
50
|
+
"warm-grey-400": "#999999",
|
|
51
|
+
"warm-grey-450": "#808080",
|
|
52
|
+
"warm-grey-500": "#666666",
|
|
53
|
+
"warm-grey-550": "#4d4d4d",
|
|
54
|
+
"warm-grey-600": "#333333",
|
|
55
|
+
"warm-grey-650": "#242424",
|
|
56
|
+
"warm-grey-700": "#1a1a1a",
|
|
57
|
+
"cyan": "#00f2f2",
|
|
58
|
+
"lemon": "#fff000",
|
|
59
|
+
"lime": "#bced09",
|
|
60
|
+
"magenta": "#fb03ff",
|
|
61
|
+
"rose": "#ff68a8"
|
|
62
|
+
};
|
package/src/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * as colors from "./build/js/colors";
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
{
|
|
2
|
+
"color": {
|
|
3
|
+
"Aqua": {
|
|
4
|
+
"value": "#2cb3ff"
|
|
5
|
+
},
|
|
6
|
+
"Blue": {
|
|
7
|
+
"value": "#005cff"
|
|
8
|
+
},
|
|
9
|
+
"Blue Wave": {
|
|
10
|
+
"value": " linear-gradient(rgba(0, 102, 255, 1.0) 0%, rgba(0, 63, 255, 1.0) 100%)"
|
|
11
|
+
},
|
|
12
|
+
"Brand Blue": {
|
|
13
|
+
"value": "#003fff"
|
|
14
|
+
},
|
|
15
|
+
"Brand Purple": {
|
|
16
|
+
"value": "#9400ff"
|
|
17
|
+
},
|
|
18
|
+
"Brand Wave": {
|
|
19
|
+
"value": " linear-gradient(rgba(0, 63, 255, 1.0) 0%, rgba(251, 3, 255, 1.0) 100%)"
|
|
20
|
+
},
|
|
21
|
+
"Charleston Green": {
|
|
22
|
+
"value": "#24272e"
|
|
23
|
+
},
|
|
24
|
+
"Dark Aqua": {
|
|
25
|
+
"value": "#1b9ce6"
|
|
26
|
+
},
|
|
27
|
+
"Dark Green": {
|
|
28
|
+
"value": "#159f65"
|
|
29
|
+
},
|
|
30
|
+
"Dark Lilac": {
|
|
31
|
+
"value": "#a279dd"
|
|
32
|
+
},
|
|
33
|
+
"Dark Orange": {
|
|
34
|
+
"value": "#ed6325"
|
|
35
|
+
},
|
|
36
|
+
"Dark Pink": {
|
|
37
|
+
"value": "#df1a6f"
|
|
38
|
+
},
|
|
39
|
+
"Dark Red": {
|
|
40
|
+
"value": "#df241e"
|
|
41
|
+
},
|
|
42
|
+
"Dark Teal": {
|
|
43
|
+
"value": "#28a597"
|
|
44
|
+
},
|
|
45
|
+
"Dark Yellow": {
|
|
46
|
+
"value": "#e8ad11"
|
|
47
|
+
},
|
|
48
|
+
"Green": {
|
|
49
|
+
"value": "#02c875"
|
|
50
|
+
},
|
|
51
|
+
"Lilac": {
|
|
52
|
+
"value": "#bf97f9"
|
|
53
|
+
},
|
|
54
|
+
"Orange": {
|
|
55
|
+
"value": "#ff7131"
|
|
56
|
+
},
|
|
57
|
+
"Pink": {
|
|
58
|
+
"value": "#ff006e"
|
|
59
|
+
},
|
|
60
|
+
"Red": {
|
|
61
|
+
"value": "#f8251e"
|
|
62
|
+
},
|
|
63
|
+
"Teal": {
|
|
64
|
+
"value": "#16ceb9"
|
|
65
|
+
},
|
|
66
|
+
"Yellow": {
|
|
67
|
+
"value": "#fdca40"
|
|
68
|
+
},
|
|
69
|
+
"Black": {
|
|
70
|
+
"value": "#000000"
|
|
71
|
+
},
|
|
72
|
+
"Cool Grey 100": {
|
|
73
|
+
"value": "#f9f9f9"
|
|
74
|
+
},
|
|
75
|
+
"Cool Grey 150": {
|
|
76
|
+
"value": "#f3f4f6"
|
|
77
|
+
},
|
|
78
|
+
"Cool Grey 200": {
|
|
79
|
+
"value": "#ebedef"
|
|
80
|
+
},
|
|
81
|
+
"Cool Grey 250": {
|
|
82
|
+
"value": "#dfe1e5"
|
|
83
|
+
},
|
|
84
|
+
"Cool Grey 300": {
|
|
85
|
+
"value": "#ced1d7"
|
|
86
|
+
},
|
|
87
|
+
"Cool Grey 350": {
|
|
88
|
+
"value": "#b3b8c1"
|
|
89
|
+
},
|
|
90
|
+
"Cool Grey 400": {
|
|
91
|
+
"value": "#979ca5"
|
|
92
|
+
},
|
|
93
|
+
"Cool Grey 450": {
|
|
94
|
+
"value": "#71767f"
|
|
95
|
+
},
|
|
96
|
+
"Cool Grey 500": {
|
|
97
|
+
"value": "#595e67"
|
|
98
|
+
},
|
|
99
|
+
"Cool Grey 550": {
|
|
100
|
+
"value": "#41464f"
|
|
101
|
+
},
|
|
102
|
+
"Cool Grey 600": {
|
|
103
|
+
"value": "#292d38"
|
|
104
|
+
},
|
|
105
|
+
"Cool Grey 650": {
|
|
106
|
+
"value": "#181d26"
|
|
107
|
+
},
|
|
108
|
+
"Cool Grey 700": {
|
|
109
|
+
"value": "#0f131a"
|
|
110
|
+
},
|
|
111
|
+
"White": {
|
|
112
|
+
"value": "#ffffff"
|
|
113
|
+
},
|
|
114
|
+
"Warm Grey 100": {
|
|
115
|
+
"value": "#fafafa"
|
|
116
|
+
},
|
|
117
|
+
"Warm Grey 150": {
|
|
118
|
+
"value": "#f5f5f5"
|
|
119
|
+
},
|
|
120
|
+
"Warm Grey 200": {
|
|
121
|
+
"value": "#ebebeb"
|
|
122
|
+
},
|
|
123
|
+
"Warm Grey 250": {
|
|
124
|
+
"value": "#d6d6d6"
|
|
125
|
+
},
|
|
126
|
+
"Warm Grey 300": {
|
|
127
|
+
"value": "#c2c2c2"
|
|
128
|
+
},
|
|
129
|
+
"Warm Grey 350": {
|
|
130
|
+
"value": "#b3b3b3"
|
|
131
|
+
},
|
|
132
|
+
"Warm Grey 400": {
|
|
133
|
+
"value": "#999999"
|
|
134
|
+
},
|
|
135
|
+
"Warm Grey 450": {
|
|
136
|
+
"value": "#808080"
|
|
137
|
+
},
|
|
138
|
+
"Warm Grey 500": {
|
|
139
|
+
"value": "#666666"
|
|
140
|
+
},
|
|
141
|
+
"Warm Grey 550": {
|
|
142
|
+
"value": "#4d4d4d"
|
|
143
|
+
},
|
|
144
|
+
"Warm Grey 600": {
|
|
145
|
+
"value": "#333333"
|
|
146
|
+
},
|
|
147
|
+
"Warm Grey 650": {
|
|
148
|
+
"value": "#242424"
|
|
149
|
+
},
|
|
150
|
+
"Warm Grey 700": {
|
|
151
|
+
"value": "#1a1a1a"
|
|
152
|
+
},
|
|
153
|
+
"Cyan": {
|
|
154
|
+
"value": "#00f2f2"
|
|
155
|
+
},
|
|
156
|
+
"Lemon": {
|
|
157
|
+
"value": "#fff000"
|
|
158
|
+
},
|
|
159
|
+
"Lime": {
|
|
160
|
+
"value": "#bced09"
|
|
161
|
+
},
|
|
162
|
+
"Magenta": {
|
|
163
|
+
"value": "#fb03ff"
|
|
164
|
+
},
|
|
165
|
+
"Rose": {
|
|
166
|
+
"value": "#ff68a8"
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
/**
|
|
3
|
+
* Custom transform group to apply multiple transforms similar to the
|
|
4
|
+
* js transform group but with the custom name/ti/kebab transform
|
|
5
|
+
* applied
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
'js-ti': {
|
|
9
|
+
name: 'js-ti',
|
|
10
|
+
transforms: [
|
|
11
|
+
'attribute/cti',
|
|
12
|
+
'name/ti/kebab',
|
|
13
|
+
'size/rem',
|
|
14
|
+
'color/hex'
|
|
15
|
+
]
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
const _ = require('lodash');
|
|
2
|
+
|
|
3
|
+
module.exports = {
|
|
4
|
+
/**
|
|
5
|
+
* Creates a kebab-cased name on the type and item of the property. This is useful if you
|
|
6
|
+
* want to create properties without the category name.
|
|
7
|
+
* If you define a prefix on the platform in your config, it will prepend with your prefix.
|
|
8
|
+
*
|
|
9
|
+
* ```js
|
|
10
|
+
* // Matches: all
|
|
11
|
+
* // Returns:
|
|
12
|
+
* "charleston-green"
|
|
13
|
+
* "Prefix-charleston-green"
|
|
14
|
+
* ```
|
|
15
|
+
*
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
'name/ti/kebab': {
|
|
19
|
+
name: 'name/ti/kebab',
|
|
20
|
+
type: 'name',
|
|
21
|
+
transformer: function (prop, options) {
|
|
22
|
+
return _.kebabCase( [options.prefix].concat(prop.path.slice(1, prop.path.length)).join(' ') );
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
const path = require('path');
|
|
2
|
+
|
|
3
|
+
module.exports = (env, options) => {
|
|
4
|
+
const devMode = options.mode !== 'production';
|
|
5
|
+
|
|
6
|
+
return {
|
|
7
|
+
mode: options.mode,
|
|
8
|
+
entry: './src/index.js',
|
|
9
|
+
devtool: devMode ? 'eval-cheap-module-source-map' : 'source-map',
|
|
10
|
+
output: {
|
|
11
|
+
path: path.resolve(__dirname, 'dist'),
|
|
12
|
+
filename: 'index.js',
|
|
13
|
+
globalObject: 'this',
|
|
14
|
+
library: {
|
|
15
|
+
name: 'designSystem',
|
|
16
|
+
type: 'umd'
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
module: {
|
|
20
|
+
rules: [
|
|
21
|
+
{
|
|
22
|
+
test: /\.js$/,
|
|
23
|
+
exclude: /node_modules/,
|
|
24
|
+
use: {
|
|
25
|
+
loader: 'babel-loader',
|
|
26
|
+
options: {
|
|
27
|
+
presets: ['@babel/preset-env']
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
};
|