[WIP] - Migrate examples and documentation to Storybook

.storybook/chameleonTheme.js

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+
+  brandTitle: 'Chameleon',
+  brandUrl: 'https://github.com/myfreecomm/chameleon',
+  brandImage: 'https://user-images.githubusercontent.com/6816187/89459602-480dd900-d73f-11ea-8a33-2d6e8555237d.png',
+});

.storybook/config.js

@@ -0,0 +1 @@
+import '!style-loader!css-loader!sass-loader!./scss-loader.scss'

.storybook/helpers.js

@@ -0,0 +1,67 @@
+import copyCodeBlock from '@pickra/copy-code-block'
+
+import hljs from 'highlight.js/lib/highlight'
+import xml from 'highlight.js/lib/languages/xml'
+hljs.registerLanguage('html', xml)
+
+const codeBlockOptions = {
+  lang: 'html',
+  colors: {
+    background: '#222',
+    textColor: '#fff',
+    attr: '#fab',
+    string: '#abe',
+    tag: '#afa',
+    name: '#ea8'
+  },
+  cssOverrides: `
+    .container {
+      position: relative;
+      padding: 2em;
+      align-items: center;
+    }
+
+    .container pre {
+      max-width: 100%;
+    }
+
+    .container button {
+      position: absolute;
+      bottom: -1px;
+      right: -1px;
+      padding: 3px 5px;
+      font-size: 12px;
+      font-weight: bold;
+      color: #999;
+      background-color: #eee !important;
+      border-radius: 4px 0 0 0;
+      outline: 0;
+    }
+
+    .container button:hover {
+      color: #666;
+    }
+
+    .container code {
+      padding-bottom: 0;
+    }
+  `
+}
+
+export const parseToCodeBlock = (block) => {
+  return copyCodeBlock(block, codeBlockOptions)
+}
+
+export const insertTemplateOnContainer = (block) => `
+  <div style="padding: 2rem">
+    <h1 class="ch-title ch-title--1">Playground</h1>
+
+    <br />
+
+    ${block}
+  </div>
+`
+
+export const formatClassNames = (str) => {
+  return str.trim().replace(/ +(?= )/g,'');
+}

.storybook/main.js

@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.@(js|mdx)'],
+  addons: [
+    '@storybook/addon-knobs/register',
+    '@storybook/addon-docs',
+    '@storybook/addon-viewport/register'
+  ]
+};

.storybook/manager.js

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

.storybook/scss-loader.scss

@@ -0,0 +1,3 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat:600|Nunito+Sans:300,400,600,700&display=swap');
+@import url('https://s3-us-west-2.amazonaws.com/nexaas-chameleon/fontawesome/v5.3.1/css/all.min.css');
+@import '../scss';