From 54fd376e9106299099b69561ff93ed9f181755df Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 19 Jan 2023 15:30:49 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(doc)=20create=20docs=20for=20utili?=
 =?UTF-8?q?ty=20classes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In order to showcase the utility classes, we needed to create
beautiful tokens-based docs !
---
 packages/react/.eslintignore                 |   3 +-
 packages/react/.storybook/preview-head.html  |  15 +++
 packages/react/package.json                  |   4 +-
 packages/react/src/docs/colors.stories.mdx   | 114 +++++++++++++++++++
 packages/react/src/docs/spacings.stories.mdx |  62 ++++++++++
 packages/react/src/docs/typo.stories.mdx     |   6 +-
 6 files changed, 198 insertions(+), 6 deletions(-)
 create mode 100644 packages/react/src/docs/colors.stories.mdx
 create mode 100644 packages/react/src/docs/spacings.stories.mdx

diff --git a/packages/react/.eslintignore b/packages/react/.eslintignore
index 7dba084..6398028 100644
--- a/packages/react/.eslintignore
+++ b/packages/react/.eslintignore
@@ -1,3 +1,4 @@
 node_modules
 dist
-src/cunningham-tokens.ts
\ No newline at end of file
+src/cunningham-tokens.ts
+src/cunningham-tokens.js
\ No newline at end of file
diff --git a/packages/react/.storybook/preview-head.html b/packages/react/.storybook/preview-head.html
index 0c1f803..79c8a0d 100644
--- a/packages/react/.storybook/preview-head.html
+++ b/packages/react/.storybook/preview-head.html
@@ -1,4 +1,19 @@
 <link rel='stylesheet' type='text/css' href='/src/index.scss'>
+<style>
+    code {
+        margin: 0 2px;
+        padding: 3px 5px;
+        white-space: nowrap;
+        border-radius: 3px;
+        border: 1px solid #EEEEEE;
+        color: rgba(51,51,51,0.9);
+        background-color: #F8F8F8;
+    }
+    /* Prevent the index.scss font-family to override code blocks's one. */
+    pre * {
+        font-family: ui-monospace,Menlo,Monaco,"Roboto Mono","Oxygen Mono","Ubuntu Monospace","Source Code Pro","Droid Sans Mono","Courier New",monospace;
+    }
+</style>
 <script>
   window.global = window;
 </script>
\ No newline at end of file
diff --git a/packages/react/package.json b/packages/react/package.json
index 9f186ee..99c084b 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -20,9 +20,9 @@
   ],
   "scripts": {
     "lint": "eslint . 'src/**/*.{ts,tsx}'",
-    "dev": "yarn storybook & nodemon --watch src --ext '*' --ignore src/cunningham-tokens.ts --ignore src/cunningham-tokens.css --exec npm run build",
+    "dev": "yarn storybook & nodemon --watch src --ext '*' --ignore src/cunningham-tokens.ts --ignore src/cunningham-tokens.js --ignore src/cunningham-tokens.css --exec npm run build",
     "build": "tsc && yarn build-theme && vite build",
-    "build-theme": "cunningham -o src -s html -g css,ts",
+    "build-theme": "cunningham -o src -g css,ts,js",
     "preview": "vite preview",
     "test": "FORCE_COLOR=1 vitest run",
     "test-watch": "vitest",
diff --git a/packages/react/src/docs/colors.stories.mdx b/packages/react/src/docs/colors.stories.mdx
new file mode 100644
index 0000000..7212157
--- /dev/null
+++ b/packages/react/src/docs/colors.stories.mdx
@@ -0,0 +1,114 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'; import {
+  tokens
+} from '../cunningham-tokens';
+
+<Meta title="Getting Started/Colors"/>
+
+export const colors = ['primary', 'secondary', 'greyscale', 'success', 'info', 'warning', 'danger'];
+export const tints = [900, 800, 700, 600, 500, 400, 300, 200, 100];
+
+# Typo
+
+Cunningham comes with an existing toolkit to deal with colors, and it's easy. 🎨
+
+## Background color
+
+You can use custom utility classes to set the background color of an element. These classes are named using the format `.bg-{color}`.
+
+<Source
+  language='tsx'
+  dark
+  format={false}
+  code={`
+  <div className="bg-primary-500"></div>
+  `}
+/>
+
+You can find all existing classes below.
+
+<Canvas isColumn={true} withSource="none">
+  {colors.map(color => (
+    <div key={color} style={{display: 'flex', gap: '5px'}}>
+      {tints.map(tint => (
+        <div key={color + tint} style={{display: 'flex', flexDirection: 'column', flexShrink: 0,flexBasis: '120px', alignItems: 'center', flexGrow: 1}}>
+          <div style={{width: '72px', height: '48px'}} className={"bg-" + color + "-" + tint}></div>
+          <code className="fs-s mt-st">bg-{color}-{tint}</code>
+        </div>
+      ))}
+    </div>
+  ))}
+</Canvas>
+
+## Text color
+
+You can use custom utility classes to set the color attribute of an element. These classes are named using the format `.clr-{color}`.
+
+<Source
+  language='tsx'
+  dark
+  format={false}
+  code={`
+  <div className="clr-primary-500">Nice primary-500 colored text</div>
+  `}
+/>
+
+You can find all existing classes below.
+
+<Canvas isColumn={true} withSource="none">
+  {colors.map(color => (
+    <div key={color} style={{display: 'flex', gap: '10px'}}>
+      {['text', ...tints].map(tint => {
+        const classes = ['fs-s', 'mt-st', 'clr-' + color + '-' + tint];
+        if (tint === 'text') {
+          classes.push('bg-' + color + '-500');
+        }
+        return <div key={color + tint} style={{
+          display: 'flex',
+          flexDirection: 'column',
+          flexShrink: 0,
+          flexBasis: '110px',
+          alignItems: 'center',
+          flexGrow: 1
+        }}>
+          <code className={classes.join(' ')}>clr-{color}-{tint}</code>
+        </div>
+      })}
+    </div>
+  ))}
+</Canvas>
+
+Pay attention the special `{color}-text` variation. Each color must have a text color variation, which is supposed to
+render readable text on top of a -500 background of its own color variation. Please check out the following examples:
+
+<Canvas withSource="open">
+<span className="bg-primary-500 clr-primary-text fw-medium p-t">
+  I'm a text on top of a primary-500 background 👋
+</span>
+<span className="bg-secondary-500 clr-secondary-text fw-medium p-t">
+  I'm a text on top of a secondary-500 background 👋
+</span>
+<span className="bg-danger-500 clr-danger-text fw-medium p-t">
+  I'm a text on top of a danger-500 background 👋
+</span>
+</Canvas>
+
+## Customize
+
+You can customize the values of the color design tokens with the configuration file this way:
+
+<Source
+  language='ts'
+  dark
+  format={true}
+  code={`
+  // cunningham.ts|cjs
+  export default {
+    theme: {
+      colors: {
+        'primary-500': 'purple', // You can customize the existing primary-500 color. ( bg-primary-500, clr-primary-500 classes ),
+        'primary-text': 'cream',
+        'amazing-500': 'pink', // You can add a new color. ( bg-amazing-500, clr-amazing-500 classes will be generated )
+    }
+  }
+  `}
+/>
\ No newline at end of file
diff --git a/packages/react/src/docs/spacings.stories.mdx b/packages/react/src/docs/spacings.stories.mdx
new file mode 100644
index 0000000..a915ebc
--- /dev/null
+++ b/packages/react/src/docs/spacings.stories.mdx
@@ -0,0 +1,62 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { tokens } from '../cunningham-tokens';
+
+<Meta title="Getting Started/Spacings" />
+
+# Spacings
+
+Cunningham comes with an existing toolkit to deal with spacings. 📏
+
+Here are the existing spacings:
+
+<Canvas isColumn={true}>
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+    {Object.keys(tokens.theme.spacings).map(key => (
+      <div key={key} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+        <div className="fw-bold clr-secondary-text" style={{ width: '30px' }}>-{key}</div>
+        <div className="fw-medium fs-m clr-secondary-text" style={{ width: '100px' }}>{tokens.theme.spacings[key]}</div>
+        <div className={"bg-danger-100 pl-" + key} style={{ height: '48px', width: 0 }}></div>
+      </div>
+    ))}
+  </div>
+</Canvas>
+
+Those can be used both with paddings and margins.
+
+## Margins
+
+You can use the following classes to add margins to your elements:
+
+| Class        | Equivalent                 |
+|--------------|----------------------------|
+| m-{spacing}  | `margin: {spacing}`        |
+| mt-{spacing} | `margin-top: {spacing}`    |
+| mr-{spacing} | `margin-right: {spacing}`  |
+| mb-{spacing} | `margin-bottom: {spacing}` |
+| ml-{spacing} | `margin-left: {spacing}`   |
+
+## Paddings
+
+You can use the following classes to add paddings to your elements:
+
+| Class        | Equivalent                 |
+|--------------|----------------------------|
+| p-{spacing}  | `padding: {spacing}`        |
+| pt-{spacing} | `padding-top: {spacing}`    |
+| pr-{spacing} | `padding-right: {spacing}`  |
+| pb-{spacing} | `padding-bottom: {spacing}` |
+| pl-{spacing} | `padding-left: {spacing}`   |
+
+
+## Example
+
+<Canvas isColumn={true} withSource="open">
+  <div className="bg-danger-100">
+    <div className="bg-primary-500 clr-primary-text fw-medium p-t mb-l">
+      Tiny padding + Large margin bottom
+    </div>
+    <div className="bg-secondary-500 clr-secondary-text fw-medium p-l ml-b">
+      Large padding + Base margin left
+    </div>
+</div>
+</Canvas>
diff --git a/packages/react/src/docs/typo.stories.mdx b/packages/react/src/docs/typo.stories.mdx
index 769b352..2c45ce6 100644
--- a/packages/react/src/docs/typo.stories.mdx
+++ b/packages/react/src/docs/typo.stories.mdx
@@ -106,11 +106,11 @@ class on every dom element.
   `}
 />
 
-<Canvas isColumn={true} withSource="none">
+    <Canvas isColumn={true} withSource="none">
   {Object.keys(tokens.theme.font.families).map(key => (
     <div key={key} className={"f-" + key}>Using the <code>f-{key}</code> class</div>
-  ))}
-</Canvas>
+    ))}
+    </Canvas>
 
 You can customize the values of the font family design tokens with the configuration file this way: