diff --git a/core/webpack-compile/README.md b/core/webpack-compile/README.md index 176dbf192..162b38768 100644 --- a/core/webpack-compile/README.md +++ b/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 diff --git a/core/webpack-compile/src/index.ts b/core/webpack-compile/src/index.ts index 4022b62a3..9a016d554 100644 --- a/core/webpack-compile/src/index.ts +++ b/core/webpack-compile/src/index.ts @@ -9,14 +9,12 @@ export const compile = ({ webPack, presets, configPath, - bundleAnalyzer, }: CompileProps): Promise => { 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 => { return runCompiler( @@ -38,7 +35,6 @@ export const watch = ({ mode: 'development', presets, configPath, - bundleAnalyzer, }, ); }; diff --git a/core/webpack-compile/src/types.ts b/core/webpack-compile/src/types.ts index a9a9ee3d9..689a5b0fa 100644 --- a/core/webpack-compile/src/types.ts +++ b/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; } /** diff --git a/core/webpack-compile/src/utilities.ts b/core/webpack-compile/src/utilities.ts index cdd4e1eb6..14ff7afba 100644 --- a/core/webpack-compile/src/utilities.ts +++ b/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, diff --git a/examples/gatsby/package.json b/examples/gatsby/package.json index f5b2f5c5c..c81a74b81 100644 --- a/examples/gatsby/package.json +++ b/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", diff --git a/examples/stories/src/tutorial/getting-started-gatsby.mdx b/examples/stories/src/tutorial/getting-started-gatsby.mdx index f7e946904..2f3bc02b0 100644 --- a/examples/stories/src/tutorial/getting-started-gatsby.mdx +++ b/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 \ No newline at end of file diff --git a/integrations/gatsby-theme-stories/src/gatsby-node.ts b/integrations/gatsby-theme-stories/src/gatsby-node.ts index db4b070ff..fa7147f1a 100644 --- a/integrations/gatsby-theme-stories/src/gatsby-node.ts +++ b/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 = { story: require.resolve(`../src/templates/DocPage.tsx`), diff --git a/ui/components/src/Markdown/MarkdownComponents.tsx b/ui/components/src/Markdown/MarkdownComponents.tsx index 51f408dfc..a3c68235c 100644 --- a/ui/components/src/Markdown/MarkdownComponents.tsx +++ b/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 {children}; },