From d37520edcd8fdc7dd88a35c94eed2091c5856dcf Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Thu, 16 Apr 2020 12:15:11 -0400
Subject: [PATCH] feat: add theme config to config preset

---
 core/instrument/README.md                     |   2 +
 .../storybook-6-no-docs/.storybook/preview.js |  12 +-
 examples/storybook-6/.storybook/preview.js    |  13 +-
 integrations/storybook/README.md              | 427 +++++++++++-------
 integrations/storybook/package.json           |   1 +
 integrations/storybook/rollup.config.js       |   2 +-
 .../storybook/src/{config.ts => config.tsx}   |   7 +-
 integrations/storybook/src/preset.ts          |   6 +
 8 files changed, 276 insertions(+), 194 deletions(-)
 rename integrations/storybook/src/{config.ts => config.tsx} (73%)

diff --git a/core/instrument/README.md b/core/instrument/README.md
index b88c281d6..8fe12e316 100644
--- a/core/instrument/README.md
+++ b/core/instrument/README.md
@@ -1,3 +1,5 @@
+# Table of contents
+
 # Overview
 
 Parsing a source file will generate the following information:
diff --git a/examples/storybook-6-no-docs/.storybook/preview.js b/examples/storybook-6-no-docs/.storybook/preview.js
index dc1886472..c76d75af4 100644
--- a/examples/storybook-6-no-docs/.storybook/preview.js
+++ b/examples/storybook-6-no-docs/.storybook/preview.js
@@ -1,15 +1,5 @@
-import React from 'react'
-import { addDecorator, addParameters } from '@storybook/react';
-import { ThemeProvider, useIsDark } from '@component-controls/storybook';
+import { addParameters } from '@storybook/react';
 
-addDecorator((story, ctx ) => {
-  const isDark = useIsDark();
-  return (
-    <ThemeProvider dark={isDark}>
-      {story(ctx)}
-    </ThemeProvider>
-  );
-})
 const categories = ['Storybook', 'Blocks', 'Editors', 'Components']
 addParameters({
   dependencies: { hideEmpty: true },
diff --git a/examples/storybook-6/.storybook/preview.js b/examples/storybook-6/.storybook/preview.js
index 57ad35dbc..c76d75af4 100644
--- a/examples/storybook-6/.storybook/preview.js
+++ b/examples/storybook-6/.storybook/preview.js
@@ -1,15 +1,4 @@
-import React from 'react'
-import { addDecorator, addParameters } from '@storybook/react';
-import { ThemeProvider, useIsDark } from '@component-controls/storybook';
-
-addDecorator((story, ctx ) => {
-  const isDark = useIsDark();
-  return (
-    <ThemeProvider dark={isDark}>
-      {story(ctx)}
-    </ThemeProvider>
-  );
-})
+import { addParameters } from '@storybook/react';
 
 const categories = ['Storybook', 'Blocks', 'Editors', 'Components']
 addParameters({
diff --git a/integrations/storybook/README.md b/integrations/storybook/README.md
index 2cd4fd0bc..25860ca57 100644
--- a/integrations/storybook/README.md
+++ b/integrations/storybook/README.md
@@ -1,47 +1,67 @@
-## Table of contents
-
-  * [Storybook](#storybook)
-  * [Introduction writing custom controls:](#introduction-writing-custom-controls)
-  * [Intro using smart-controls](#intro-using-smart-controls)
-  * [Getting Started](#getting-started)
-    * [With React](#with-react)
-    * [With MDX](#with-mdx)
-    * [With Vue.js](#with-vue.js)
-    * [With Angular](#with-angular)
-    * [With Ember](#with-ember)
-  * [Available Controls](#available-controls)
-  * [Smart Controls](#smart-controls)
-    * [Examples](#smart-controls-examples)
-      * [Smart Controls React](#smart-controls-react)
-      * [Smart Controls MDX](#smart-controls-mdx)
-      * [Smart Controls Angular](#smart-controls-angular)
-    * [Smart controls options](#smart-controls-options)  
-  * [Random Data Generators](#testing-with-random-data-generators)  
-  * [Categories](#categories)
-  * [Storybook Docs Block](#storybook-docs-block)
-  * [Options](#options)
-    * [smart](#smart-option)
-    * [addonPanel](#addonPanel-option)
-    * [docsPreview](#docsPreview-option)
-    * [docsProps](#docsProps-option)
-  
-
-## Storybook
+# Table of contents
+
+-   [Overview](#overview)
+-   [Storybook](#storybook)
+-   [Introduction](#introduction)
+    -   [Introduction writing custom controls](#introduction-writing-custom-controls)
+    -   [Intro using smart-controls](#intro-using-smart-controls)
+-   [Getting Started](#getting-started)
+    -   [CSF](#csf)
+        -   [MDX](#mdx)
+-   [Available Controls](#available-controls)
+-   [Smart Controls](#smart-controls)
+    -   [Smart Controls Examples](#smart-controls-examples)
+        -   [Smart Controls React](#smart-controls-react)
+        -   [Smart Controls MDX](#smart-controls-mdx)
+        -   [Smart Controls Options](#smart-controls-options)
+-   [Testing with random data generators](#testing-with-random-data-generators)
+-   [Categories](#categories)
+-   [Storybook Docs Block](#storybook-docs-block)
+-   [Options](#options)
+    -   [**smart** option](#smart-option)
+    -   [**addonPanel** option](#addonpanel-option)
+    -   [**docsPreview** option](#docspreview-option)
+    -   [**docsProps** option](#docsprops-option)
+-   [List of components](#list-of-components)
+    -   [<ins>ComponentSource</ins>](#inscomponentsourceins)
+    -   [<ins>ControlsTable</ins>](#inscontrolstableins)
+    -   [<ins>Description</ins>](#insdescriptionins)
+    -   [<ins>Meta</ins>](#insmetains)
+    -   [<ins>Playground</ins>](#insplaygroundins)
+    -   [<ins>PropsTable</ins>](#inspropstableins)
+    -   [<ins>Stories</ins>](#insstoriesins)
+    -   [<ins>Story</ins>](#insstoryins)
+    -   [<ins>StorySource</ins>](#insstorysourceins)
+    -   [<ins>Subtitle</ins>](#inssubtitleins)
+    -   [<ins>Title</ins>](#institleins)
+    -   [<ins>DocsPage</ins>](#insdocspageins)
+    -   [<ins>PageContextContainer</ins>](#inspagecontextcontainerins)
+    -   [<ins>PageContainer</ins>](#inspagecontainerins)
+
+# Overview
+
+The Storybook](https://storybook.js.org) integration of component-controls is the first publicly available integration. 
+
+- Storybook is the most used system for developing components with a focus on design systems
+- The Storybook [CSF](https://storybook.js.org/docs/formats/component-story-format/) format introduced in v5.2 was a leap forward and allows for open interoperability. The CSF format is one of the founding blocks upon which componnet-controls expands.
+- The Storybook MDX format is a bit of a letdown - it uses a proprietary format that we aim to replace with the portable [frontmatter](https://www.gatsbyjs.org/docs/mdx/markdown-syntax/#frontmatter--mdx-example) format to add metadata.
+- The Storybook [docs addon](https://github.com/storybookjs/storybook/tree/next/addons/docs) added the ability to view documentation from CSF and MDX formats. However the architecture suffers from a few issues listed below.
+- We wanted to allow component-controls to function both as a full replacement to the addon docs, and also alongside the addon docs. 
+
+
+# Storybook
 
 The Storybook integration of component-controls allows you to define and then edit story properties dynamically in the [Storybook](https://storybook.js.org) UI with a set of property editors. 
 
-
 The definitions of the control properties can be found [here](https://github.com/ccontrols/component-controls/blob/master/core/specification/src/types.ts): 
 
 Additional functionality out of the box with Addon Controls are the "smart controls" - using the story's component property table to automatically create editable controls for the stories.
 
 Another unique facet of Addon Controls is the one-click generation of random data, using under the hood [faker.js](https://github.com/marak/Faker.js/).
 
-Addon Controls is a successor of [addon-knobs](https://github.com/storybookjs/storybook/tree/next/addons/knobs) and tries to keep compatibility where possible.
-
-Addon controls and the  bundled "smart-controls" can work with all frameworks supported by Storybook 
+The Storybook integration started as a successor of [addon-knobs](https://github.com/storybookjs/storybook/tree/next/addons/knobs) and we have attempted to keep some level of compatibility where possible.
 
-[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md).
+# Introduction
 
 ## Introduction writing custom controls
 
@@ -55,7 +75,7 @@ Addon controls and the  bundled "smart-controls" can work with all frameworks su
   <img src="https://raw.githubusercontent.com/ccontrols/component-controls/master/integrations/storybook/docs/intro-smart-controls.gif" alt="introduction to using smart-controls" width="738">
 </p>
 
-## Getting Started
+# Getting Started
 
 First of all, you need to install Addon Controls into your project as a dev dependency.
 
@@ -73,7 +93,8 @@ module.exports = {
 
 That's it, you can now use controls inside your stories
 
-### With React
+## CSF
+
 ```js
 import React from "react";
 
@@ -95,7 +116,8 @@ controlsStory.story = {
 }
 ```
 
-### With MDX
+### MDX
+
 ```md
 import { Story, Preview, Meta } from '@storybook/addon-docs/blocks';
 import { ControlsTable } from '@component-controls/storybook';
@@ -118,113 +140,17 @@ import { ControlsTable } from '@component-controls/storybook';
 </Preview>
 ```
 
-### With Vue.js
-```js
-
-import MyButton from './MyButton.vue';
-
-export default {
-  title: "Storybook Controls",
-};
-
-export const controlsStory = ({ disabled, text }) => ({
-  components: { MyButton },
-  props: {
-    isDisabled: {
-      default: disabled
-    },
-    text: {
-      default: text
-    }
-  },
-  template: `<MyButton :isDisabled="isDisabled">{{ text }}</MyButton>`
-});
-
-controlsStory.story = {
-  controls: {
-    disabled: { type: 'boolean', value: false },
-    text: { type: 'text', value: 'Hello Storybook' },
-  }
-}
-```
-
-MyButton.vue:
-```vue
-<template>
-  <button :disabled="isDisabled">
-    <slot></slot>
-  </button>
-</template>
-
-<script>
-export default {
-  props: {
-    isDisabled: {
-      type: Boolean,
-      default: false
-    }
-  }
-}
-</script>
-```
-
-### With Angular
-```js
-
-import { Button } from '@storybook/angular/demo';
-
-export default {
-  title: "Storybook Controls",
-};
-
-export const controlsStory = props => ({
-  component: Button,
-  props,
-});
-
-controlsStory.story = {
-  controls: {
-    disabled: { type: 'boolean', value: false },
-    text: { type: 'text', value: 'Hello Storybook' },
-  }
-}
-```
-
-### With Ember
-```js
-import hbs from 'htmlbars-inline-precompile';
-
-export default {
-  title: 'StoryBook Controls',
-};
-
-export const controlsStory = context => ({
-  template: hbs`
-    <button disabled={{disabled}}>{{text}}</button>
-  `,
-  context,
-});
-
-controlsStory.story = {
-  controls: {
-    disabled: { type: 'boolean', value: false },
-    text: { type: 'text', value: 'Hello Storybook' },
-  }
-}
-```
-
-## Available Controls
+# Available Controls
 
 The list of available controls and their documented properties is available [here](https://github.com/ccontrols/component-controls/blob/master/core/specification/src/types.ts)
 
-
-## Smart Controls
+# Smart Controls
 
 Smart Controls use a story component's properties table type information to generate automatically controls for the story. 
 
 By default, Addon Controls enables the smart-controls option for your storybook  site, but there are 2 basic requirements for a story to use smart controls: 
-1. The story needs to have a component assigned, and this component needs to have a valid properties table (it can be typescript, or prop-types or any other format supported by Storybook).
-2. The story needs to accept "some" parameters / internally detected by Addon Controls within the source loaders / enabling the story to use the passed control values.
+1\. The story needs to have a component assigned, and this component needs to have a valid properties table (it can be typescript, or prop-types or any other format supported by Storybook).
+2\. The story needs to accept "some" parameters / internally detected by Addon Controls within the source loaders / enabling the story to use the passed control values.
 
 A screenshot of smart controls in action.
 
@@ -235,6 +161,7 @@ A screenshot of smart controls in action.
 ## Smart Controls Examples
 
 ### Smart Controls React
+
 ```js
 import React from 'react';
 import { Button } from './Button';
@@ -250,6 +177,7 @@ export const smartControls = props => <Button {...props} />;
 ```
 
 ### Smart Controls MDX
+
 ```md
 import { Story, Preview, Meta } from '@storybook/addon-docs/blocks';
 import { Button } from './Button';
@@ -266,24 +194,9 @@ import { Button } from './Button';
 </Preview>
 ```
 
-### Smart Controls Angular
-```js
-import { Button } from './Button';
-
-export default {
-  title: 'Storybook smart controls',
-  component: Button,
-};
-
-export const smartControls = props => ({
-  component: Button,
-  props,
-});
-```
-
-
 ### Smart Controls Options
-- **include** an array of property names that allows you to select only a subset of the smart control properties to be displayed
+
+-   **include** an array of property names that allows you to select only a subset of the smart control properties to be displayed
 
 ```js
 onlyColors.story = {
@@ -297,7 +210,7 @@ onlyColors.story = {
 };
 ```
 
-- **exclude** an array of property names that allows you to exclude a subset of the smart control properties to be displayed
+-   **exclude** an array of property names that allows you to exclude a subset of the smart control properties to be displayed
 
 ```js
 noColors.story = {
@@ -311,7 +224,7 @@ noColors.story = {
 };
 ```
 
-## Testing with random data generators
+# Testing with random data generators
 
 This is one of our favorite features, basically allowing 1-line functional component testing out of the box.
 
@@ -334,8 +247,7 @@ randomNumber.story = {
 };
 ```
 
-
-## Categories
+# Categories
 
 This is very similar to the categorization concept in [addon-knobs](https://github.com/storybookjs/storybook/tree/next/addons/knobs).
 You can categorize your controls by assigning them a `groupId`. When a `groupId` exists, tabs will appear in the Controls storybook panel or in the docs blocks on the Docs page to filter between the groups. Controls without a `groupId` are automatically categorized into the `OTHER` group.
@@ -368,9 +280,7 @@ You can see Controls in separate tabs as shown below.
   <img src="https://raw.githubusercontent.com/ccontrols/component-controls/master/integrations/storybook/docs/grouped-controls.jpg" alt="control groups" width="428">
 </p>
 
-
-
-## Storybook Docs Block
+# Storybook Docs Block
 
 By default, Addon Controls integrates in the addon panels, in the `<Props />` table on the StoryBook DocsPage and well as in the `<Preview />` component on the DocsPage. You can also add a specifc docs block with story controls by either changing the default DocsPage or directly in your `mdx` stories:
 
@@ -414,7 +324,8 @@ import { ControlsTable } from '@component-controls/storybook';
 <ControlsTable name="small story" />
 
 ```
-## Options
+
+# Options
 
 Addon Controls accepts several option parameters to customize the default functionality. By default, all the following options are enabled, so you only need a custom configuration if you need to disable a feature:
 
@@ -435,12 +346,11 @@ within `.storybook/main.js`:
   ],
 ```
 
-### **smart** option
+## **smart** option
 
 Setting this option to `false` will disable auto-generating of controls for stories with a component assigned.
 
-
-### **addonPanel** option
+## **addonPanel** option
 
 Setting this option to `false` will disable showing the Controls panel in the addons section within the Storybook Canvas page:
 
@@ -448,8 +358,7 @@ Setting this option to `false` will disable showing the Controls panel in the ad
   <img src="https://raw.githubusercontent.com/ccontrols/component-controls/master/integrations/storybook/docs/option-addonPanel.jpg" alt="addon panel" width="428">
 </p>
 
-
-### **docsPreview** option
+## **docsPreview** option
 
 Setting this option to `false` will disable showing an additional tab and panel with Controls in the `<Preview />` component within the Storybopok DocsPage:
 
@@ -457,7 +366,7 @@ Setting this option to `false` will disable showing an additional tab and panel
   <img src="https://raw.githubusercontent.com/ccontrols/component-controls/master/integrations/storybook/docs/option-docsPreview.jpg" alt="docs preview addon" width="428">
 </p>
 
-### **docsProps** option
+## **docsProps** option
 
 Setting this option to `false` will disable showing an additional columns with Controls in the `<Props />` component within the Storybopok DocsPage:
 
@@ -465,5 +374,187 @@ Setting this option to `false` will disable showing an additional columns with C
   <img src="https://raw.githubusercontent.com/ccontrols/component-controls/master/integrations/storybook/docs/option-docsProps.jpg" alt="docs preview addon" width="428">
 </p>
 
+# List of components
+
+<react-docgen-typescript path="./src" exclude="index.ts,repositoryActions.tsx,StoryContext.tsx,utils.ts,ComponentsContext.tsx,context.tsx,argument-utils.ts,channel.ts" />
+
+<!-- START-REACT-DOCGEN-TYPESCRIPT -->
+
+## <ins>ComponentSource</ins>
+
+_ComponentSource [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/blocks/ComponentSource.tsx)_
+
+### properties
+
+| Name          | Type                                                               | Description                                                                                                                                                                                                                                                                                        |
+| ------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onSelect`    | _(name: string, component: StoryComponent) => boolean \| void_     | callback to be called when the tab changes if the function returns false, it can stop chabging to the new tab                                                                                                                                                                                      |
+| `of`          | _any_                                                              | Specify the component(s), for which to have information displayed. The default, a value of \`"."\` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab. |
+| `title`       | _string_                                                           | optional section title for the block.                                                                                                                                                                                                                                                              |
+| `id`          | _string_                                                           | optional id to be used for the block if no id is provided, one will be calculated automatically from the title.                                                                                                                                                                                    |
+| `collapsible` | _boolean_                                                          | if false, will nothave a collapsible frame.                                                                                                                                                                                                                                                        |
+| `sxStyle`     | _SystemStyleObject_                                                | theme-ui styling object for Block Box                                                                                                                                                                                                                                                              |
+| `actions`     | _ActionItem\[]_                                                    | optional actions provided to the component                                                                                                                                                                                                                                                         |
+| `plain`       | _boolean_                                                          | if plain, skip the border and spacing around the children                                                                                                                                                                                                                                          |
+| `theme`       | _PrismTheme_                                                       | optional \`PrismTheme\` theme provided to the component. Themes can be imported from \`prism-react-renderer/themes\`.                                                                                                                                                                              |
+| `language`    | _Language_                                                         | source lnguage used, by default "jsx".                                                                                                                                                                                                                                                             |
+| `renderFn`    | _(props: RenderProps, other: { theme: PrismTheme; }) => ReactNode_ | custom function to render the source code.                                                                                                                                                                                                                                                         |
+| `dark`        | _boolean_                                                          | used to specify a "dark" color theme - applcable only if no custom theme prop is provided. if dark: true, duotoneDark theme is used. if dark: false, duotoneLight theme is used.                                                                                                                   |
+| `style`       | _any_                                                              | css styles for the container.                                                                                                                                                                                                                                                                      |
+| `as`          | _any_                                                              | syntax container as element. Can be used as \`div\` or \`span\`.                                                                                                                                                                                                                                   |
+
+## <ins>ControlsTable</ins>
+
+_ControlsTable [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/blocks/ControlsTable.tsx)_
+
+## <ins>Description</ins>
+
+_Description [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/blocks/Description.tsx)_
+
+### properties
+
+| Name         | Type                                                                                                                                                                                                                     | Description                                                                                                                                                                                                                                                                                        |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `components` | _{ \[key: string]: ComponentOverride&lt;any, any>; a?: ComponentOverride&lt;any, any>; br?: ComponentOverride&lt;any, any>; button?: ComponentOverride&lt;any, any>; ... 27 more ...; ul?: ComponentOverride&lt;...>; }_ | components to customize the markdown display.                                                                                                                                                                                                                                                      |
+| `of`         | _any_                                                                                                                                                                                                                    | Specify the component(s), for which to have information displayed. The default, a value of \`"."\` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab. |
+
+## <ins>Meta</ins>
+
+empty component for storybook addon-docs compatibility
+
+_Meta [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/blocks/Meta.tsx)_
+
+## <ins>Playground</ins>
+
+_Playground [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/blocks/Playground.tsx)_
+
+### properties
+
+| Name      | Type            | Description                                                                                  |
+| --------- | --------------- | -------------------------------------------------------------------------------------------- |
+| `scale`   | _number_        | default scale for the zoom feature. If scale is set to 0, the zoom feature will be disabled. |
+| `openTab` | _any_           | by default, which tab to have open.                                                          |
+| `dark`    | _boolean_       | whether to use the dark theme for the story source component.                                |
+| `actions` | _ActionItem\[]_ | optional actions provided to the component                                                   |
+| `plain`   | _boolean_       | if plain, skip the border and spacing around the children                                    |
+
+## <ins>PropsTable</ins>
+
+_PropsTable [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/blocks/PropsTable.tsx)_
+
+### properties
+
+| Name            | Type                                                                                                                           | Description                                                                                                                                                                                                                                                                                        |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `extraColumns`  | _Column&lt;{}>\[]_                                                                                                             | extra custom columns passed to the PropsTable.                                                                                                                                                                                                                                                     |
+| `onSelect`      | _((name: string, component: StoryComponent) => boolean \| void) & ((event: SyntheticEvent&lt;HTMLDivElement, Event>) => void)_ | callback to be called when the tab changes if the function returns false, it can stop chabging to the new tab                                                                                                                                                                                      |
+| `of`            | _any_                                                                                                                          | Specify the component(s), for which to have information displayed. The default, a value of \`"."\` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab. |
+| `title`         | _string_                                                                                                                       | optional section title for the block.                                                                                                                                                                                                                                                              |
+| `id`            | _string_                                                                                                                       | optional id to be used for the block if no id is provided, one will be calculated automatically from the title.                                                                                                                                                                                    |
+| `collapsible`   | _boolean_                                                                                                                      | if false, will nothave a collapsible frame.                                                                                                                                                                                                                                                        |
+| `sxStyle`       | _SystemStyleObject_                                                                                                            | theme-ui styling object for Block Box                                                                                                                                                                                                                                                              |
+| `header`        | _boolean_                                                                                                                      | show or hide the header element.                                                                                                                                                                                                                                                                   |
+| `sorting`       | _boolean_                                                                                                                      | enable.disable sorting.                                                                                                                                                                                                                                                                            |
+| `filtering`     | _boolean_                                                                                                                      | enable/disable filtering.                                                                                                                                                                                                                                                                          |
+| `itemsLabel`    | _string_                                                                                                                       | string label for 'items' - used in the filter placeholder and grouping header.                                                                                                                                                                                                                     |
+| `groupBy`       | _string\[]_                                                                                                                    | field to be grouped by.                                                                                                                                                                                                                                                                            |
+| `hiddenColumns` | _string\[]_                                                                                                                    | list of columns to hide.                                                                                                                                                                                                                                                                           |
+| `expanded`      | _{ \[key: string]: boolean; }_                                                                                                 | object listing the initially expanded rows.                                                                                                                                                                                                                                                        |
+| `skipPageReset` | _boolean_                                                                                                                      | reset state update while update table data                                                                                                                                                                                                                                                         |
+
+## <ins>Stories</ins>
+
+_Stories [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/blocks/Stories.tsx)_
+
+### properties
+
+| Name      | Type            | Description                                                                                                                |
+| --------- | --------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `dark`    | _boolean_       | whether to display the dark theme storysource code component whether to use the dark theme for the story source component. |
+| `scale`   | _number_        | default scale for the zoom feature. If scale is set to 0, the zoom feature will be disabled.                               |
+| `openTab` | _any_           | by default, which tab to have open.                                                                                        |
+| `actions` | _ActionItem\[]_ | optional actions provided to the component                                                                                 |
+| `plain`   | _boolean_       | if plain, skip the border and spacing around the children                                                                  |
+
+## <ins>Story</ins>
+
+_Story [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/blocks/Story.tsx)_
+
+## <ins>StorySource</ins>
+
+_StorySource [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/blocks/StorySource.tsx)_
+
+### properties
+
+| Name       | Type                                                               | Description                                                                                                                                                                      |
+| ---------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `actions`  | _ActionItem\[]_                                                    | optional actions provided to the component                                                                                                                                       |
+| `plain`    | _boolean_                                                          | if plain, skip the border and spacing around the children                                                                                                                        |
+| `theme`    | _PrismTheme_                                                       | optional \`PrismTheme\` theme provided to the component. Themes can be imported from \`prism-react-renderer/themes\`.                                                            |
+| `language` | _Language_                                                         | source lnguage used, by default "jsx".                                                                                                                                           |
+| `renderFn` | _(props: RenderProps, other: { theme: PrismTheme; }) => ReactNode_ | custom function to render the source code.                                                                                                                                       |
+| `dark`     | _boolean_                                                          | used to specify a "dark" color theme - applcable only if no custom theme prop is provided. if dark: true, duotoneDark theme is used. if dark: false, duotoneLight theme is used. |
+| `style`    | _any_                                                              | css styles for the container.                                                                                                                                                    |
+| `as`       | _any_                                                              | syntax container as element. Can be used as \`div\` or \`span\`.                                                                                                                 |
+
+## <ins>Subtitle</ins>
+
+_Subtitle [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/blocks/Subtitle.tsx)_
+
+### properties
+
+| Name       | Type                                                                                                                                                                                                                                                                                 | Description                                                                 |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- |
+| `id`       | _string_                                                                                                                                                                                                                                                                             | id of the story                                                             |
+| `name`     | _string_                                                                                                                                                                                                                                                                             | alternatively you can use the name of a story to load from an external file |
+| `children` | _string \| (string & {}) \| (string & ReactElement&lt;any, string \| ((props: any) => ReactElement&lt;any, string \| ... \| (new (props: any) => Component&lt;any, any, any>)>) \| (new (props: any) => Component&lt;...>)>) \| (string & ReactNodeArray) \| (string & ReactPortal)_ | text to be displayed in the component.                                      |
+| `as`       | _"h1" \| "h2" \| "h3" \| "h4" \| "h5"_                                                                                                                                                                                                                                               | DOM node type to render as. By default h3.                                  |
+| `ref`      | _((instance: HTMLHeadingElement) => void) \| RefObject&lt;HTMLHeadingElement>_                                                                                                                                                                                                       |                                                                             |
+
+## <ins>Title</ins>
+
+_Title [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/blocks/Title.tsx)_
+
+### properties
+
+| Name       | Type                                                                                                                                                                                                                                                                                 | Description                                                                 |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- |
+| `id`       | _string_                                                                                                                                                                                                                                                                             | id of the story                                                             |
+| `name`     | _string_                                                                                                                                                                                                                                                                             | alternatively you can use the name of a story to load from an external file |
+| `children` | _string \| (string & {}) \| (string & ReactElement&lt;any, string \| ((props: any) => ReactElement&lt;any, string \| ... \| (new (props: any) => Component&lt;any, any, any>)>) \| (new (props: any) => Component&lt;...>)>) \| (string & ReactNodeArray) \| (string & ReactPortal)_ | text to be displayed in the component.                                      |
+| `ref`      | _((instance: HTMLHeadingElement) => void) \| RefObject&lt;HTMLHeadingElement>_                                                                                                                                                                                                       |                                                                             |
+
+## <ins>DocsPage</ins>
+
+_DocsPage [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/page/DocsPage.tsx)_
+
+## <ins>PageContextContainer</ins>
+
+_PageContextContainer [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/page/PageContainer.tsx)_
+
+### properties
+
+| Name         | Type                    | Description                                   |
+| ------------ | ----------------------- | --------------------------------------------- |
+| `storyId`    | _string_                | story to display in the page                  |
+| `dark`       | _boolean_               | dark/light theme for the page                 |
+| `components` | _MDXProviderComponents_ | components to customize the markdown display. |
+| `theme`      | _Theme_                 | optional custom theme                         |
+| `mockStore`  | _StoryStore_            | mock store for tests                          |
+
+## <ins>PageContainer</ins>
+
+_PageContainer [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/page/PageContainer.tsx)_
+
+### properties
 
+| Name         | Type                    | Description                                   |
+| ------------ | ----------------------- | --------------------------------------------- |
+| `storyId`    | _string_                | story to display in the page                  |
+| `dark`       | _boolean_               | dark/light theme for the page                 |
+| `components` | _MDXProviderComponents_ | components to customize the markdown display. |
+| `theme`      | _Theme_                 | optional custom theme                         |
+| `mockStore`  | _StoryStore_            | mock store for tests                          |
+| `active*`    | _boolean_               |                                               |
 
+<!-- END-REACT-DOCGEN-TYPESCRIPT -->
diff --git a/integrations/storybook/package.json b/integrations/storybook/package.json
index 5f62f68dc..0b6ce420e 100644
--- a/integrations/storybook/package.json
+++ b/integrations/storybook/package.json
@@ -17,6 +17,7 @@
   "scripts": {
     "build": "yarn cross-env NODE_ENV=production rollup -c",
     "dev": "yarn cross-env NODE_ENV=development rollup -cw",
+    "docs": "ts-node  -O '{\"module\": \"commonjs\"}' ../../scripts/docs.ts",
     "fix": "yarn lint --fix",
     "lint": "yarn eslint . --ext mdx,ts,tsx",
     "prepare": "yarn build",
diff --git a/integrations/storybook/rollup.config.js b/integrations/storybook/rollup.config.js
index c809cb8c3..c5f7b7240 100644
--- a/integrations/storybook/rollup.config.js
+++ b/integrations/storybook/rollup.config.js
@@ -4,7 +4,7 @@ export default config({
   input: [
     './src/index.ts',
     './src/preset.ts',
-    './src/config.ts',
+    './src/config.tsx',
     './src/register.tsx',
     './src/register-panel.tsx',
   ],
diff --git a/integrations/storybook/src/config.ts b/integrations/storybook/src/config.tsx
similarity index 73%
rename from integrations/storybook/src/config.ts
rename to integrations/storybook/src/config.tsx
index fffc9fcdf..4028cd9de 100644
--- a/integrations/storybook/src/config.ts
+++ b/integrations/storybook/src/config.tsx
@@ -1,9 +1,12 @@
+/* eslint-disable react/display-name */
+import React from 'react';
 import { addDecorator } from '@storybook/client-api';
 import addons, { makeDecorator } from '@storybook/addons';
 import { FORCE_RE_RENDER } from '@storybook/core-events';
 
 import { store } from '@component-controls/store';
 import { getControlValues } from '@component-controls/core';
+import { ThemeProvider } from './context/ThemeProvider';
 import './context/RenderDocsPages';
 
 store.addObserver(() => {
@@ -16,11 +19,11 @@ addDecorator(
     parameterName: 'controls',
     wrapper: (storyFn, context) => {
       const story = store.getStory(context.id);
-
       const values =
         story && story.controls ? getControlValues(story.controls) : undefined;
       //@ts-ignore
-      return values ? storyFn(values, context) : storyFn(context);
+      const render = values ? storyFn(values, context) : storyFn(context);
+      return <ThemeProvider>{render}</ThemeProvider>;
     },
   }),
 );
diff --git a/integrations/storybook/src/preset.ts b/integrations/storybook/src/preset.ts
index dc869796d..7dd408514 100644
--- a/integrations/storybook/src/preset.ts
+++ b/integrations/storybook/src/preset.ts
@@ -10,4 +10,10 @@ module.exports = {
     result.push(require.resolve('./register'));
     return result;
   },
+  webpack: (webpackConfig: any = {}, options: any = {}) => {
+    const result = {
+      ...webpackConfig,
+    };
+    return result;
+  },
 };