fix: import path and empty stories/mdx

examples/stories/src/tutorial/getting-started/documentation-site.mdx

@@ -14,7 +14,7 @@ In this tutorial, we assume you have already selected and set up a static site g
 
 - [Getting started with gatsby](/tutorial/getting-started/gatsby)
 - [Getting started with nextjs](/tutorial/getting-started/nextjs)
-- [Getting started with storybook](/tutorial/getting-started/storybook)
+- [Getting started with webpack](/tutorial/getting-started/webpack)
 
 ## Configuration folder
 
@@ -28,7 +28,7 @@ In this file, enter the paths (e.g. .mdx and/or .tsx) we want to search for the
 
 ```js:title=.config/buildtime.js
 module.exports = {
-  stories: ['../src/docs/*.@(mdx|tsx)'],
+  stories: stories: ["../src/docs/*.mdx", "../src/components/**/*.docs.tsx"],
   siteUrl: `https://component-controls-gatsby.netlify.app`,
 };
 ```
@@ -73,16 +73,14 @@ more: [writing mdx documentation](/tutorial/mdx-documentation)
 
 ### MDX "story" file
 
-Assuming you have a `Button` component, you can write stories(examples) for it.
-
-(If you don't have a `Button` component, we built a simple one you can copy [here](https://github.com/ccontrols/gatsby-controls-starter/blob/master/src/components/Button.tsx).)
+We built a simple component for this turial [VariantButton](https://github.com/ccontrols/gatsby-controls-starter/blob/master/src/components/VariantButton/VariantButton.tsx).
 
 ```mdx:title=src/docs/first-story.mdx
 ---
 title: First Story
 ---
 
-import { Button } from '../components/Button';
+import { VariantButton } from '../components/VariantButton';
 import {
   Playground,
   Story,
@@ -93,8 +91,8 @@ import {
 
 # My first doc story
 
-<ComponentSource of={Button} title="Component source" />
-<Playground description="Button story">
+<ComponentSource of={VariantButton} title="Component source" />
+<Playground description="VariantButton story">
   <Story name="simple">
     <Button>click me</Button>
   </Story>
@@ -107,24 +105,58 @@ more: [writing mdx stories](/tutorial/mdx-stories)
 
 ### ESM "story" file
 
-Assuming you have a `Button` component, you can write stories(examples) for it.
-
-(If you don't have a `Button` component, we built a simple one you can copy [here](https://github.com/ccontrols/gatsby-controls-starter/blob/master/src/components/Button.tsx).)
+Using the [VariantButton] example, we will create a new documentation page for our component. It is a recommended practice to place you components in their own folder and to also create their documentation, test files etc. in the same folder.
 
-```jsx:title=src/docs/first-story.stories.tsx
+```jsx:title=src/components/VariantButton/VariantButton.docs.tsx
 import React from 'react';
-import { Button } from '../components/Button';
+import { Document, Example } from '@component-controls/core';
+import { VariantButton, VariantButtonProps } from './VariantButton';
 
 export default {
-  title: 'ES Story',
-  component: Button,
+  title: 'VariantButton',
+  component: VariantButton,
+} as Document;
+
+export const overview: Example<VariantButtonProps> = props => (
+  <VariantButton {...props} />
+);
+
+overview.controls = {
+  text: 'Button',
+  icon: 'search',
 };
 
-export const overview = () => <Button>click me</Button>;
+export const primary: Example = () => (
+  <VariantButton variant="primary" text="Primary" />
+);
+
+export const accent: Example = () => (
+  <VariantButton variant="accent" text="Accent" />
+);
+
+export const disabled: Example = () => (
+  <VariantButton variant="disabled" text="Disabled" />
+);
+
+export const success: Example = () => (
+  <VariantButton variant="success" text="Success" />
+);
+
+export const error: Example = () => (
+  <VariantButton variant="error" text="Error" />
+);
+
+export const warning: Example = () => (
+  <VariantButton variant="error" text="Warning" />
+);
 ```
 
 more: [writing esm stories](/tutorial/esmodules-stories)
 
+### Add automatic tests
+
+We provide a command-line tool that will automatically generate [snapshot tests](/tutorial/testing/jest-snapshots) for your new documentation site.
+
 ### Project repository
 
 If your project is public, you can automatically display a git link on all documentation pages. For example, check out the "Edit this page" section [here](https://gatsby-controls-starter.netlify.app/docs/es-story--overview).

examples/stories/src/tutorial/testing/jest-snapshots.mdx

@@ -32,6 +32,54 @@ Supports a variety of test renderers:
 ```sh
 yarn add @component-controls/cc-cli --dev
 ```
+## Pre-requisites
+
+If you haven't already, you will need to first install jest and related depenencies:
+
+### jest
+
+```sh
+yarn add jest babel-jest jest-matchmedia-mock rc-util --dev
+```
+### typescript
+
+```sh
+yarn add ts-jest @types/jest --dev
+```
+
+```js:title=package.json
+"scripts": {
+  ...
+ "jest": {
+    "preset": "ts-jest",
+    "transform": {
+      "^.+\\.(ts|tsx)?$": "ts-jest",
+      "^.+\\.(js|jsx)$": "babel-jest"
+    },
+  },
+},
+```
+
+### renderers
+
+Depending on your choice for jest rendering, you will need to install one of the following dependecnies:
+
+**react-testing-library**
+```sh
+yarn add @testing-library/jest-dom @testing-library/react @types/testing-library__jest-dom --dev
+```
+
+**enzyme**
+
+```sh
+yarn add enzyme enzyme-to-json @wojtekmaj/enzyme-adapter-react-17 @types/enzyme @types/testing-library__jest-dom --dev
+```
+
+**react-test-renderer**
+
+```sh
+yarn add react-test-renderer @types/react-test-renderer --dev
+```
 
 ## Examples
 

plugins/addon-catalog/src/stories/Catalog.test.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderDocument } from '@component-controls/test-renderers';

plugins/addon-catalog/src/stories/ComponentCard.test.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderDocument } from '@component-controls/test-renderers';

plugins/addon-catalog/src/stories/ComponentFilter.test.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderDocument } from '@component-controls/test-renderers';

plugins/addon-catalog/src/stories/ComponentList.test.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderDocument } from '@component-controls/test-renderers';

plugins/addon-catalog/src/stories/ComponentsCatalog.test.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderDocument } from '@component-controls/test-renderers';

plugins/addon-images/src/stories/ImagesBlock.test.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderDocument } from '@component-controls/test-renderers';

plugins/addon-notes/src/stories/NotesBlock.test.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderDocument } from '@component-controls/test-renderers';

plugins/addon-stats/src/stories/AttributeUsage.test.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderDocument } from '@component-controls/test-renderers';

plugins/addon-stats/src/stories/AttributesUsageDetails.test.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderDocument } from '@component-controls/test-renderers';

plugins/addon-stats/src/stories/AttributesUsageList.test.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderDocument } from '@component-controls/test-renderers';

plugins/addon-stats/src/stories/ComponentUsage.test.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderDocument } from '@component-controls/test-renderers';

plugins/addon-stats/src/stories/ComponentUsageDetails.test.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderDocument } from '@component-controls/test-renderers';

plugins/addon-stats/src/stories/ComponentUsageList.test.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderDocument } from '@component-controls/test-renderers';

plugins/axe-plugin/src/stories/AllyBlock.test.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderDocument } from '@component-controls/test-renderers';

plugins/cc-cli/src/cli/save-template.ts

@@ -21,10 +21,6 @@ export const saveTemplate = async <P extends TemplateOptions>(
     testFolder = path.resolve(process.cwd(), testFolder);
   }
 
-  if (!fs.existsSync(testFolder)) {
-    fs.mkdirSync(testFolder);
-  }
-
   const testFilePath = path.resolve(testFolder, test);
 
   if (!overwrite && fs.existsSync(testFilePath)) {
@@ -37,5 +33,10 @@ export const saveTemplate = async <P extends TemplateOptions>(
     output: testFolder,
     ...rest,
   } as unknown) as P);
-  fs.writeFileSync(testFilePath, content, 'utf8');
+  if (content) {
+    if (!fs.existsSync(testFolder)) {
+      fs.mkdirSync(testFolder);
+    }
+    fs.writeFileSync(testFilePath, content, 'utf8');
+  }
 };

plugins/cc-cli/src/document-template.ts

@@ -64,6 +64,9 @@ export const createDocumentTemplate: TemplateFunction<StoryTemplateOptions> = as
       }));
     }
   }
+  if (stories.length <= 0 || doc.MDXPage) {
+    return '';
+  }
   const store = bundle ? 'bundle' : 'imports';
   const documentLoopPath = path.resolve(
     __dirname,

plugins/cc-cli/src/stories-template.ts

@@ -64,6 +64,9 @@ export const createStoriesTemplate: TemplateFunction<StoryTemplateOptions> = asy
       }));
     }
   }
+  if (stories.length <= 0 || doc.MDXPage) {
+    return '';
+  }
   const store = bundle ? 'bundle' : 'imports';
   const renderPath = path.resolve(
     __dirname,

plugins/cc-cli/templates/top-imports/imports.ts.js

@@ -1 +1 @@
-import path from 'path';
+import * as path from 'path';

plugins/cc-cli/test/Header.test.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderExample } from '@component-controls/test-renderers';

plugins/cc-cli/test/__snapshots__/document-enzyme-bundle-ts.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`enzyme bundle ts 1`] = `
-"import path from 'path';
+"import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadStore } from '@component-controls/store';
 const { render: reactRender } = require('@component-controls/render/react');

plugins/cc-cli/test/__snapshots__/document-enzyme-ts.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`enzyme  ts 1`] = `
-"import path from 'path';
+"import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderDocument } from '@component-controls/test-renderers';

plugins/cc-cli/test/__snapshots__/document-rtl-bundle-ts.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`rtl bundle ts 1`] = `
-"import path from 'path';
+"import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadStore } from '@component-controls/store';
 const { render: reactRender } = require('@component-controls/render/react');

plugins/cc-cli/test/__snapshots__/document-rtl-ts.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`rtl  ts 1`] = `
-"import path from 'path';
+"import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderDocument } from '@component-controls/test-renderers';

plugins/cc-cli/test/__snapshots__/document-rtr-bundle-ts.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`rtr bundle ts 1`] = `
-"import path from 'path';
+"import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadStore } from '@component-controls/store';
 const { render: reactRender } = require('@component-controls/render/react');

plugins/cc-cli/test/__snapshots__/document-rtr-ts.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`rtr  ts 1`] = `
-"import path from 'path';
+"import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadConfigurations } from '@component-controls/config';
 import { renderDocument } from '@component-controls/test-renderers';

plugins/cc-cli/test/__snapshots__/store-enzyme-bundle-ts.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`enzyme bundle ts 1`] = `
-"import path from 'path';
+"import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadStore } from '@component-controls/store';
 import { render as reactRender } from '@component-controls/render/react';

plugins/cc-cli/test/__snapshots__/store-enzyme-ts.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`enzyme  ts 1`] = `
-"import path from 'path';
+"import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import {
   loadConfigurations,

plugins/cc-cli/test/__snapshots__/store-rtl-bundle-ts.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`rtl bundle ts 1`] = `
-"import path from 'path';
+"import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { loadStore } from '@component-controls/store';
 import { render as reactRender } from '@component-controls/render/react';

plugins/cc-cli/test/__snapshots__/store-rtl-ts.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`rtl  ts 1`] = `
-"import path from 'path';
+"import * as path from 'path';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import {
   loadConfigurations,