chore(docs): add storybook + tokens docs (#4)

* chore(docs): add storybook + tokens docs

* feat(docs): add igloo brand and fix doc

* chore: exclude storybook static folder

* chore: add actions for docs publish

* fix: actions error

* fix: indentation of file

* fix: add more steps for docs build action

* fix: move build in publish process

* fix: remove build dependency

* fix: access token

* fix: revert to ACCESS_TOKEN

* chore(docs): change publish trigger

* chore(docs): add local commande for deploy

.github/CHANGESET_TEMPLATE.md

@@ -0,0 +1,11 @@
+### Added
+
+### Changed
+
+### Fixed
+
+### Removed
+
+### Security
+
+### Deprecated

.github/workflows/publish-to-gh.yml

@@ -0,0 +1,39 @@
+name: Publish to GitHub Pages
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 12
+      - run: yarn
+      - run: yarn lint
+
+  publish:
+    needs: lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 12
+      - run: yarn install
+
+      - name: Build @igloo-ui/tokens
+        run: yarn build
+
+      - name: Generate your awesome content
+        run: yarn build-storybook
+
+      - name: Publish generated content to GitHub Pages
+        uses: tsunematsu21/[email protected]
+        with:
+          dir: storybook-static
+          branch: gh-pages
+          token: ${{ secrets.ACCESS_TOKEN }}

.github/workflows/release.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: 12
-      - run: yarn install
+      - run: yarn
       - run: yarn lint
 
   release:

.gitignore

@@ -119,4 +119,5 @@ dist
 
 # library build output
 build
-lib
+lib
+storybook-static

.npmignore

@@ -3,9 +3,12 @@
 .changeset
 .eslintrc.cjs
 .prettierrc.json
+.DS_Store
 
 tokens
 assets
+docs
+storybook-static
 node_modules
 
 config.json

.storybook/main.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+  stories: [
+    '../stories/**/*.stories.mdx',
+    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    'storybook-design-token',
+  ],
+};

.storybook/manager.cjs

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import ovTheme from './theme/index';
+
+addons.setConfig({
+  theme: ovTheme,
+});

.storybook/preview-body.html

@@ -0,0 +1,8 @@
+<style>
+  @import url('/fonts.css');
+  html {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size: 10px;
+  }
+</style>

.storybook/preview.cjs

@@ -0,0 +1,22 @@
+const tokenContext = require.context(
+  '!!raw-loader!../docs',
+  true,
+  /.\.(css|less|scss|svg)$/
+);
+
+const tokenFiles = tokenContext.keys().map(function (filename) {
+  return { filename: filename, content: tokenContext(filename).default };
+});
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  designToken: {
+    files: tokenFiles,
+  },
+};

.storybook/theme/index.cjs

@@ -0,0 +1,22 @@
+import { create } from '@storybook/theming';
+import logo from './brand.svg';
+
+export default create({
+  base: 'light',
+
+  colorSecondary: '#1053FF',
+
+  // UI
+  appBg: '#FFFFFF',
+
+  // Text colors
+  textColor: '#233043',
+
+  // Toolbar default and active colors
+  barTextColor: '#838B95',
+  barSelectedColor: '#1053FF',
+
+  brandTitle: 'Officevibe',
+  brandUrl: 'https://officevibe.com/',
+  brandImage: logo,
+});

README.md

@@ -1,4 +1,4 @@
-# `@igloo/tokens`
+# `@igloo-ui/tokens`
 
 Igloo tokens are all the values needed to construct and maintain a design system — spacing, color, fonts, opacity, etc..
 
@@ -42,7 +42,6 @@ You can also do it via CSS Import:
 @import '@igloo-ui/tokens/dist/fonts.css';
 ```
 
-
 ## License
 
 Copyright © 2019, GSoft inc. This code is licensed under the Apache License, Version 2.0. You may obtain a copy of this license at https://github.com/gsoft-inc/gsoft-license/blob/master/LICENSE.

docs/tokens.scss

@@ -0,0 +1,116 @@
+// Do not edit directly
+// Generated on Mon, 28 Jun 2021 16:09:08 GMT
+
+/**
+  * @tokens Colors
+  * @presenter Color
+  */
+
+$electric-blue-50: #edf3fe;
+$electric-blue-100: #c1d3fe;
+$electric-blue-200: #95b3fe;
+$electric-blue-300: #6893ff;
+$electric-blue-400: #3c73ff;
+$electric-blue-500: #1053ff;
+$electric-blue-600: #0c46d0;
+$electric-blue-700: #0939a2;
+$electric-blue-800: #052c73;
+$electric-blue-900: #011f44;
+$sky-50: #e5f4fb;
+$sky-100: #b2ddf2;
+$sky-200: #7fc6ea;
+$dandelion-50: #fef8e2;
+$dandelion-100: #fdebb6;
+$dandelion-200: #fdde88;
+$dandelion-300: #fcd35a;
+$dandelion-400: #fbc73b;
+$dandelion-500: #fabf2c;
+$dandelion-600: #f9b127;
+$coral-50: #f9eeef;
+$coral-100: #ffd8d2;
+$coral-200: #ffc3ba;
+$coral-300: #ff988b;
+$coral-400: #ff7160;
+$coral-500: #f96155;
+$coral-600: #e24d48;
+$coral-700: #bd494a;
+$coral-800: #9a3842;
+$coral-900: #6b2837;
+$coral-950: #422439;
+$seaweed-50: #d6f9f3;
+$seaweed-200: #9fe9dc;
+$seaweed-300: #85d9c9;
+$seaweed-400: #30c9ad;
+$seaweed-500: #0cba9d;
+$seaweed-600: #00a587;
+$seaweed-700: #00977a;
+$seaweed-800: #00765b;
+$seaweed-900: #00593f;
+$strawberry-fields-50: #f9e4e6;
+$strawberry-fields-100: #f1bbc1;
+$strawberry-fields-200: #e7919a;
+$strawberry-fields-300: #db6a74;
+$creamsicle-25: #f9f7f6;
+$creamsicle-50: #fff6eb;
+$creamsicle-75: #fff0df;
+$creamsicle-100: #ffe3c2;
+$creamsicle-150: #ffcb96;
+$creamsicle-200: #ffa878;
+$creamsicle-300: #fa8742;
+$grey-95: #f8f8f8;
+$grey-100: #f7f9fa;
+$grey-200: #eff1f5;
+$grey-250: #e8ebef;
+$grey-300: #d5d9de;
+$grey-400: #bdc6d0;
+$grey-500: #838b95;
+$grey-600: #606b79;
+$grey-700: #32455b;
+$grey-800: #233043;
+$grey-900: #19222f;
+
+/**
+  * @tokens Font Families
+  * @presenter FontFamily
+  */
+$primary-font-family: Inter;
+$secondary-font-family: GT-Walsheim;
+
+/**
+  * @tokens Font Weights
+  * @presenter FontWeight
+  */
+$font-weight-regular: normal;
+$font-weight-medium: 500;
+$font-weight-semi-bold: 600;
+$font-weight-bold: 700;
+
+/**
+  * @tokens Font Sizes
+  * @presenter FontSize
+  */
+
+$font-size-1: 1rem;
+$font-size-2: 1.2rem;
+$font-size-3: 1.4rem;
+$font-size-4: 1.6rem;
+$font-size-5: 1.8rem;
+$font-size-6: 2.2rem;
+$font-size-7: 2.4rem;
+$font-size-8: 3rem;
+$font-size-9: 3.2rem;
+$font-size-10: 4.8rem;
+
+/**
+  * @tokens Line Heights
+  * @presenter LineHeight
+  */
+$line-height-xxxl: 1.5;
+$line-height-xxl: 1.4285;
+$line-height-xl: 1.33;
+$line-height-lg: 1.27;
+$line-height-md: 1.25;
+$line-height-sm: 1.2;
+$line-height-xs: 1.166;
+$line-height-xxs: 1.14;
+$line-height-xxxs: 1.125;

package.json

@@ -13,7 +13,10 @@
     "format": "prettier -w src/*",
     "changeset": "changeset",
     "version-packages": "changeset version",
-    "release": "yarn build && changeset publish"
+    "release": "yarn build && changeset publish",
+    "storybook": "start-storybook -s dist -p 6006 --no-manager-cache",
+    "build-storybook": "build-storybook -s dist",
+    "deploy:doc": "yarn build && gh-pages -d storybook-static"
   },
   "repository": {
     "type": "git",
@@ -30,12 +33,24 @@
   },
   "homepage": "https://github.com/gsoft-inc/igloo-ui-tokens#readme",
   "devDependencies": {
+    "@babel/core": "^7.14.6",
     "@changesets/cli": "^2.16.0",
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
+    "@storybook/addon-actions": "^6.3.1",
+    "@storybook/addon-essentials": "^6.3.1",
+    "@storybook/addon-links": "^6.3.1",
+    "@storybook/addons": "^6.3.1",
+    "@storybook/react": "^6.3.1",
+    "@storybook/theming": "^6.3.1",
+    "babel-loader": "^8.2.2",
     "eslint": "^7.28.0",
     "eslint-config-prettier": "^8.3.0",
+    "gh-pages": "^3.2.3",
     "prettier": "2.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "storybook-design-token": "^1.0.1",
     "style-dictionary": "^3.0.1"
   },
   "commitlint": {

stories/acceuil.stories.mdx

@@ -0,0 +1,47 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+
+<Meta title="Design Tokens/Acceuil" />
+
+# @igloo-ui/tokens
+
+Igloo tokens are all the values needed to construct and maintain a design system — spacing, color, fonts, opacity, etc..
+
+## Getting started
+
+To install @igloo-ui/tokens in your project, you will need to run the following command using [npm](https://www.npmjs.com/):
+
+```
+npm install @igloo-ui/tokens
+```
+
+If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:
+
+```
+yarn add @igloo-ui/tokens
+```
+
+## Usage
+
+### Sass
+
+In Sass, you can import the files by doing:
+
+```
+@import '@igloo-ui/tokens/dist/_variables.scss';
+```
+
+### CSS
+
+In CSS, you can import the files by doing:
+
+```
+@import '@igloo-ui/tokens/dist/variables.scss';
+```
+
+### Fonts
+
+You can also do it via CSS Import:
+
+```
+@import '@igloo-ui/tokens/dist/fonts.css';
+```