fix: remove bundle analyzer dependency

core/webpack-compile/README.md

@@ -42,30 +42,30 @@ returns the stories store object
 
 _defined in [@component-controls/webpack-compile/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-compile/src/index.ts#L8)_
 
-**function** compile(`__namedParameters`\*: **bundleAnalyzer**: boolean**configPath**: string**presets**: string | [RuleOptions](#ruleoptions)\[]**webPack**: [Configuration](#configuration)): Promise<[CompileResults](#compileresults)>;
+**function** compile(`__namedParameters`\*: **configPath**: string**presets**: string | [RuleOptions](#ruleoptions)\[]**webPack**: [Configuration](#configuration)): Promise<[CompileResults](#compileresults)>;
 
 ### parameters
 
-| Name                 | Type                                                                                                                                               | Description |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `__namedParameters*` | **bundleAnalyzer**: boolean**configPath**: string**presets**: string \| [RuleOptions](#ruleoptions)\[]**webPack**: [Configuration](#configuration) |             |
-| `returns`            | Promise<[CompileResults](#compileresults)>                                                                                                      |             |
+| Name                 | Type                                                                                                                    | Description |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `__namedParameters*` | **configPath**: string**presets**: string \| [RuleOptions](#ruleoptions)\[]**webPack**: [Configuration](#configuration) |             |
+| `returns`            | Promise<[CompileResults](#compileresults)>                                                                           |             |
 
 ## watch
 
 compile the stories with webpack and launch watching for changes
 returns the stories store object
 
-_defined in [@component-controls/webpack-compile/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-compile/src/index.ts#L27)_
+_defined in [@component-controls/webpack-compile/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-compile/src/index.ts#L25)_
 
-**function** watch(`__namedParameters`\*: **bundleAnalyzer**: boolean**configPath**: string**presets**: string | [RuleOptions](#ruleoptions)\[]**watchOptions**: [WatchOptions](#watchoptions)**webPack**: [Configuration](#configuration)): Promise<[CompileResults](#compileresults)>;
+**function** watch(`__namedParameters`\*: **configPath**: string**presets**: string | [RuleOptions](#ruleoptions)\[]**watchOptions**: [WatchOptions](#watchoptions)**webPack**: [Configuration](#configuration)): Promise<[CompileResults](#compileresults)>;
 
 ### parameters
 
-| Name                 | Type                                                                                                                                                                                              | Description |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `__namedParameters*` | **bundleAnalyzer**: boolean**configPath**: string**presets**: string \| [RuleOptions](#ruleoptions)\[]**watchOptions**: [WatchOptions](#watchoptions)**webPack**: [Configuration](#configuration) |             |
-| `returns`            | Promise<[CompileResults](#compileresults)>                                                                                                                                                     |             |
+| Name                 | Type                                                                                                                                                                   | Description |
+| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `__namedParameters*` | **configPath**: string**presets**: string \| [RuleOptions](#ruleoptions)\[]**watchOptions**: [WatchOptions](#watchoptions)**webPack**: [Configuration](#configuration) |             |
+| `returns`            | Promise<[CompileResults](#compileresults)>                                                                                                                          |             |
 
 ## CompileProps
 
@@ -77,18 +77,17 @@ _defined in [@component-controls/webpack-compile/src/types.ts](https://github.co
 
 ### properties
 
-| Name             | Type                            | Description                                                           |
-| ---------------- | ------------------------------- | --------------------------------------------------------------------- |
-| `bundleAnalyzer` | boolean                         | if true, will display webpack analyzer results                        |
-| `configPath`     | string                          | path to the configuration file e.g : '.storybook'                     |
-| `presets`        | [RuleTypes](#ruletypes)         | a list of webpack configuration presets from webpack-configs packages |
-| `webPack`        | [Configuration](#configuration) | webpack configuration object                                          |
+| Name         | Type                            | Description                                                           |
+| ------------ | ------------------------------- | --------------------------------------------------------------------- |
+| `configPath` | string                          | path to the configuration file e.g : '.storybook'                     |
+| `presets`    | [RuleTypes](#ruletypes)         | a list of webpack configuration presets from webpack-configs packages |
+| `webPack`    | [Configuration](#configuration) | webpack configuration object                                          |
 
 ## CompileResults
 
 return type from compile and watch functions
 
-_defined in [@component-controls/webpack-compile/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-compile/src/types.ts#L31)_
+_defined in [@component-controls/webpack-compile/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-compile/src/types.ts#L26)_
 
 
 
@@ -103,7 +102,7 @@ _defined in [@component-controls/webpack-compile/src/types.ts](https://github.co
 
 adds webpack WatchOptions to the Compiler options
 
-_defined in [@component-controls/webpack-compile/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-compile/src/types.ts#L45)_
+_defined in [@component-controls/webpack-compile/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-compile/src/types.ts#L40)_
 
 ### properties
 

core/webpack-compile/src/index.ts

@@ -9,14 +9,12 @@ export const compile = ({
   webPack,
   presets,
   configPath,
-  bundleAnalyzer,
 }: CompileProps): Promise<CompileResults> => {
   return runCompiler((compiler, callback) => compiler.run(callback), {
     webPack,
     mode: 'production',
     presets,
     configPath,
-    bundleAnalyzer,
   });
 };
 
@@ -28,7 +26,6 @@ export const watch = ({
   webPack,
   presets,
   configPath,
-  bundleAnalyzer,
   watchOptions,
 }: WatchProps): Promise<CompileResults> => {
   return runCompiler(
@@ -38,7 +35,6 @@ export const watch = ({
       mode: 'development',
       presets,
       configPath,
-      bundleAnalyzer,
     },
   );
 };

core/webpack-compile/src/types.ts

@@ -18,11 +18,6 @@ export interface CompileProps {
    * path to the configuration file e.g : '.storybook'
    */
   configPath?: string;
-
-  /**
-   * if true, will display webpack analyzer results
-   */
-  bundleAnalyzer?: boolean;
 }
 
 /**

core/webpack-compile/src/utilities.ts

@@ -1,6 +1,4 @@
 import * as webpack from 'webpack';
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-  .BundleAnalyzerPlugin;
 import * as path from 'path';
 import LoaderPlugin from '@component-controls/loader/plugin';
 import {
@@ -20,22 +18,13 @@ export type CompileRunProps = CompileProps & {
 };
 
 const createConfig = (options: CompileRunProps): webpack.Configuration => {
-  const { webPack, presets, configPath, mode, bundleAnalyzer } = options;
+  const { webPack, presets, configPath, mode } = options;
   const plugins = [
     new LoaderPlugin({
       config: configPath,
       escapeOutput: mode === 'development',
     }),
   ];
-  if (bundleAnalyzer) {
-    plugins.push(
-      new BundleAnalyzerPlugin({
-        generateStatsFile: true,
-        statsFilename: 'stats.json',
-      }),
-    );
-  }
-
   const webpackConfig = mergeWebpackConfig(
     {
       mode,

examples/gatsby/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "scripts": {
     "build-sample": "gatsby build",
-    "start": "gatsby develop"
+    "start": "gatsby develop -p 9020"
   },
   "repository": {
     "type": "git",

examples/stories/src/tutorial/getting-started-gatsby.mdx

@@ -1,37 +1,83 @@
 ---
-title: Getting started/Gatsby/Theme
+title: Getting started/Gatsby
 type: tutorial
 ---
 
 # Getting started with Gatsby
 
-## New project
+## New project 
 
-### Install
+Create a new folder
 
 ```sh
-yarn add @component-controls/gatsby-theme-stories
+mkdir my-gatsby-project
+cd my-gatsby-project
+```
+
+initialize the project
+
+```sh
+yarn init
+```
+
+add gatsby dependencies
+
+```sh
+yarn add gatsby react react-dom
 ```
 
-### Configure
+in `package.json`
+```json
+...
+  "scripts": {
+    "build": "gatsby build",
+    "start": "gatsby develop"
+  },
+...
+```
+
+The remaining steps are the same as for an existing gatsby project
 
-the default options will configure `component-controls` to work with react apps,  with `react-docgen` for prop-types and `react-docgen-typescript` for typescript props information
+## Existing project
 
-in `gatsby-config.js`:
+### Add theme
 
-```js:title=
+```sh
+yarn add @component-controls/gatsby-theme-stories
+```
+
+### Configure theme
+
+create a `gatsby-config.js` file in your project folder
+```js
+//gatsby-config.js:
+module.exports = {
   plugins: [
-    ...
     {
       resolve: '@component-controls/gatsby-theme-stories',
       options: {
-        //path to the configuration files
         configPath: '.config',
       },
     },
-    ...
   ],
+};
+```
+
+### Create component-controls config folder
 
+Create a new folder `.config` inside your proejct (or any other name that you used in the step above)
+
+
+### Create component-controls build-time configuration
+
+create a file `.config/buildtime.js` and enter the paths to search for component-controls documentation files
+
+```js
+//.config/buildtime.js
+module.exports = {
+  stories: [
+    '../src/docs/*.mdx',
+  ],
+};
 ```
 
-## Existing project

integrations/gatsby-theme-stories/src/gatsby-node.ts

@@ -23,7 +23,6 @@ exports.createPages = async (
     webPack: options.webpack,
     presets: defaultPresets,
     configPath: options.configPath,
-    // bundleAnalyzer: true,
   };
   const pageTemplates: Record<PageType, string> = {
     story: require.resolve(`../src/templates/DocPage.tsx`),

ui/components/src/Markdown/MarkdownComponents.tsx

@@ -58,7 +58,7 @@ export const markdownComponents: MarkdownComponentType = {
     const { className = '', children } = codeProps || {};
     const arrClass = className.split('-');
     const mdxLanguage = arrClass.length === 2 ? arrClass[1] : 'js';
-
+    console.log(props);
     const language = mdxLanguageMap[mdxLanguage] || mdxLanguage;
     return <Source language={language}>{children}</Source>;
   },