feat: design tokens package

examples/gatsby/.config/buildtime.js

@@ -18,6 +18,7 @@ module.exports = {
     '../../../ui/app/src/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../ui/components/src/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../ui/blocks/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    '../../../ui/design-tokens/src/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../core/core/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../ui/editors/src/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../plugins/axe-plugin/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',

examples/gatsby/.config/runtime.tsx

@@ -5,7 +5,7 @@ import { Link } from "@component-controls/components";
 import { OctofaceIcon } from '@primer/octicons-react';
 import { TestingPage } from "./TestingPage";
 
-const categories = ['Introduction', 'Application','Controls','Blocks', 'Editors', 'Components', 'Plugins']
+const categories = ['Introduction', 'Application','Controls','Blocks', 'Design Tokens',  'Editors', 'Components', 'Plugins']
 
 const config: RunOnlyConfiguration = {
   analytics: 'UA-172446254-1',

examples/nextjs/.config/buildtime.js

@@ -18,6 +18,7 @@ module.exports = {
     '../../../ui/app/src/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../ui/components/src/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../ui/blocks/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    '../../../ui/design-tokens/src/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../core/core/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../ui/editors/src/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../plugins/axe-plugin/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',

examples/nextjs/.config/runtime.tsx

@@ -5,7 +5,7 @@ import { Link } from "@component-controls/components";
 import { OctofaceIcon } from '@primer/octicons-react';
 import { TestingPage } from "./TestingPage";
 
-const categories = ['Introduction', 'Application','Controls','Blocks', 'Editors', 'Components', 'Plugins']
+const categories = ['Introduction', 'Application','Controls','Blocks', 'Design Tokens',  'Editors', 'Components', 'Plugins']
 
 const config: RunOnlyConfiguration = {
   analytics: 'UA-172446254-1',

examples/storybook-6-no-docs/.storybook/main.js

@@ -34,6 +34,7 @@ module.exports = {
     '../../../ui/components/src/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../ui/app/src/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../ui/blocks/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    '../../../ui/design-tokens/src/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../core/core/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../plugins/axe-plugin/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../plugins/viewport-plugin/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',

examples/storybook-6-no-docs/.storybook/preview.js

@@ -5,7 +5,7 @@ import { ThemeProvider } from '@component-controls/storybook';
 addDecorator(story => (
   <ThemeProvider>{story()}</ThemeProvider>
 ));
-const categories = ['Introduction', 'Application','Controls','Blocks', 'Editors', 'Components', 'Plugins']
+const categories = ['Introduction', 'Application','Controls','Blocks', 'Design Tokens',  'Editors', 'Components', 'Plugins']
 addParameters({
   dependencies: { hideEmpty: true },
   options: {

examples/storybook-6/.storybook/main.js

@@ -7,6 +7,7 @@ module.exports = {
     '../../../ui/components/src/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../ui/app/src/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../ui/blocks/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    '../../../ui/design-tokens/src/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../core/core/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../plugins/axe-plugin/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../plugins/viewport-plugin/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',

examples/storybook-6/.storybook/preview.js

@@ -5,7 +5,7 @@ import { ThemeProvider } from '@component-controls/storybook';
 addDecorator(story => (
   <ThemeProvider>{story()}</ThemeProvider>
 ));
-const categories = ['Introduction', 'Application','Controls','Blocks', 'Editors', 'Components', 'Plugins']
+const categories = ['Introduction', 'Application','Controls','Blocks', 'Design Tokens',  'Editors', 'Components', 'Plugins']
 addParameters({
   dependencies: { hideEmpty: true },
   options: {

ui/design-tokens/.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ]
+  ]
+}

ui/design-tokens/.eslintignore

@@ -0,0 +1 @@
+dist

ui/design-tokens/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Atanas Stoyanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

ui/design-tokens/README.md

@@ -0,0 +1,8 @@
+# Table of contents
+
+# Overview
+
+# List of components
+
+<react-docgen-typescript path="./src" exclude="index.ts," />
+

ui/design-tokens/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@component-controls/design-tokens",
+  "version": "1.25.1",
+  "description": "Component controls design tokens components.",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "yarn cross-env NODE_ENV=production rollup -c",
+    "dev": "yarn cross-env NODE_ENV=development rollup -cw",
+    "docs": "ts-md",
+    "fix": "yarn lint --fix",
+    "lint": "yarn eslint . --ext mdx,ts,tsx",
+    "prepare": "yarn build",
+    "test": "cc-jest -c ./.config"
+  },
+  "homepage": "https://github.com/ccontrols/component-controls",
+  "bugs": {
+    "url": "https://github.com/ccontrols/component-controls/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ccontrols/component-controls.git",
+    "directory": "ui/design-tokens"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@component-controls/components": "^1.25.1",
+    "@component-controls/core": "^1.25.0",
+    "@component-controls/editors": "^1.25.1",
+    "@component-controls/store": "^1.25.1",
+    "@primer/octicons-react": "^10.0.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "polished": "^3.4.4",
+    "theme-ui": "^0.4.0-rc.1"
+  },
+  "devDependencies": {
+    "@component-controls/jest-snapshots": "^1.25.1",
+    "@component-controls/ts-markdown-docs": "^1.21.0",
+    "cross-env": "^5.2.1",
+    "eslint": "^6.5.1"
+  },
+  "peerDependencies": {
+    "@primer/octicons-react": ">= 10.0.0",
+    "react": ">= 16.8.0",
+    "react-dom": ">= 16.8.0",
+    "theme-ui": ">= 0.4.0-rc.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "Atanas Stoyanov"
+  ],
+  "gitHead": "c5145d66c6b8a355839e53c3bca97fd361ce9377"
+}

ui/design-tokens/rollup.config.js

@@ -0,0 +1,5 @@
+import { config } from '../../rollup-config';
+
+export default config({
+  input: './src/index.ts',
+});

ui/design-tokens/src/ColorBlock/ColorBlock.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ColorBlock, ColorBlockProps } from './ColorBlock';
+
+export default {
+  title: 'Design Tokens/ColorBlock',
+  component: ColorBlock,
+};
+
+export const overview = ({ color, name }: ColorBlockProps) => (
+  <ColorBlock name={name} color={color} />
+);
+
+overview.colors = {
+  name: { type: 'text' },
+  color: { type: 'color', value: 'blue' },
+};

ui/design-tokens/src/ColorBlock/ColorBlock.tsx

@@ -0,0 +1,40 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Box, Theme } from 'theme-ui';
+import { parseToRgb } from 'polished';
+
+export interface ColorBlockProps {
+  name?: string;
+  color: string;
+}
+
+export const ColorBlock: FC<ColorBlockProps> = ({ name, color }) => {
+  const hex = color;
+  const rgb = parseToRgb(color);
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'row', width: '220px' }}>
+      <Box sx={{ bg: color, width: 64, height: 64 }}></Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          ml: 2,
+          lineHeight: '16px',
+          justifyContent: 'space-between',
+          fontSize: 0,
+        }}
+      >
+        <Box
+          sx={{
+            fontWeight: 'bold',
+            borderBottom: (t: Theme) => ` 1px solid  ${t.colors?.shadow}`,
+          }}
+        >
+          {name || hex}
+        </Box>
+        <Box>HEX: {hex}</Box>
+        <Box>RGB: {`${rgb.red},${rgb.green},${rgb.blue}`}</Box>
+      </Box>
+    </Box>
+  );
+};

ui/design-tokens/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "outDir": "dist",
+    "rootDir": "src",
+    "declaration": true,
+    "types": ["node", "jest"],
+    "typeRoots": ["../../node_modules/@types", "node_modules/@types"]
+  },
+  "include": ["src/**/*", "src/typings.d.ts"],
+  "exclude": ["node_modules/**"]
+}