feat: cc-cli templating engine

.vscode/launch.json

@@ -208,10 +208,10 @@
     {
       "type": "node",
       "request": "launch",
-      "name": "jest jest-addon",
+      "name": "jest cc-cli",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
-      "cwd": "${workspaceFolder}/plugins/jest-snapshots",
-      "args": ["enzyme-bundle-ts"],
+      "cwd": "${workspaceFolder}/plugins/cc-cli",
+      "args": ["story-enzyme-esm"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,

core/instrument/src/index.ts

@@ -39,6 +39,7 @@ import {
 export * from './types';
 export { getComponentProps } from './misc/props-info';
 export { getFileIinfo } from './misc/file-info';
+export { prettify };
 
 type TraverseFn = (
   ast: File,
@@ -61,7 +62,7 @@ const parseSource = async (
   filePath: string,
   options: Required<InstrumentOptions>,
 ): Promise<ParseStorieReturnType | undefined> => {
-  const source = await prettify(code, options.prettier, filePath);
+  const source = prettify(code, options.prettier, filePath);
   const { ast } = parseFile(filePath, options.parser, source);
 
   const store = traverseFn(ast, options, { source, filePath });

core/instrument/src/misc/prettify.ts

@@ -2,16 +2,16 @@ import prettier from 'prettier';
 import parserBabel from 'prettier/parser-babylon';
 import { PrettierOptions } from '../types';
 
-export const prettify = async (
+export const prettify = (
   code: string,
   options: PrettierOptions | false,
   filePath?: string,
-): Promise<string> => {
+): string => {
   if (options !== false) {
     const { resolveConfigOptions, ...otherOptions } = options || {};
     let allPrettierOptions: prettier.Options | undefined = otherOptions as any;
     if (filePath) {
-      const userOptions = await prettier.resolveConfig(
+      const userOptions = prettier.resolveConfig.sync(
         filePath,
         resolveConfigOptions,
       );

examples/stories/src/blogs/storybook-6-migration-gatsby-ssg.mdx

@@ -146,17 +146,17 @@ The new Testing Page should now be visible
 
 ## Add jest snapshot tests
 
-The `@component-controls/jest-snapshots` package is automatically creating jest [snapshot tests](/tutorial/testing/jest-snapshots) from your existing stories. It has an easy to use command-line interface that we will use in this example but also offers a [fully customizable API](/blogs/custom-test-runners).
+The `@component-controls/cc-cli` package is automatically creating jest [snapshot tests](/tutorial/testing/jest-snapshots) from your existing stories. It has an easy to use command-line interface that we will use in this example but also offers a [fully customizable API](/blogs/custom-test-runners).
 
-### Install the jest-snapshots package
+### Install the cc-cli package
 
 ```sh
-yarn add @component-controls/jest-snapshots -D
+yarn add @component-controls/cc-cli -D
 ```
 
-### Configure test script
+### Configure test:create script
 
-We will launch the `cc-jest` command-line with the -c parameter pointing to the folder storing your configuration files. You can also add other parameters such as `--coverage`.
+We will launch the `cc-cli` command-line tool to create automatically tests for all our existing stories.
 
 ```js:title=package.json {7}
 {
@@ -165,7 +165,8 @@ We will launch the `cc-jest` command-line with the -c parameter pointing to the
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "cc-jest -c .storybook",
+    "test:create": "cc-cli -c ./.config -o tests -t stories.test.ts -n components -f ts",
+    "test": "yarn jest"
     "eject": "react-scripts eject",
     ...
   },
@@ -179,7 +180,7 @@ We will launch the `cc-jest` command-line with the -c parameter pointing to the
 yarn test
 ```
 
-Running the `jest-snapshots` test will execute any existing tests (ie `src/lib/components/button/button.spec.tsx`) as well as snapshot tests automatically created for all your stories.
+Running the `test:create` script test will a tests file `stories.test.ts` (typecript format) in the `tests` folder.
 
 After running the tests, you should have a file `tests/__snapshots__/stories.test.js.snap`, with snapshots like this one:
 

examples/stories/src/blogs/storybook-6-migration-nextjs-ssg.mdx

@@ -166,17 +166,17 @@ The new Testing Page should now be visible
 
 ## Add jest snapshot tests
 
-The `@component-controls/jest-snapshots` package is automatically creating jest [snapshot tests](/tutorial/testing/jest-snapshots) from your existing stories. It has an easy to use command-line interface that we will use in this example but also offers a [fully customizable API](/blogs/custom-test-runners).
+The `@component-controls/cc-cli` package is automatically creating jest [snapshot tests](/tutorial/testing/jest-snapshots) from your existing stories. It has an easy to use command-line interface that we will use in this example but also offers a [fully customizable API](/blogs/custom-test-runners).
 
-### Install the jest-snapshots package
+### Install the cc-cli package
 
 ```sh
-yarn add @component-controls/jest-snapshots -D
+yarn add @component-controls/cc-cli -D
 ```
 
-### Configure test script
+### Configure test:create script
 
-We will launch the `cc-jest` command-line with the -c parameter pointing to the folder storing your configuration files. You can also add other parameters such as `--coverage`.
+We will launch the `cc-cli` command-line tool to create automatically tests for all our existing stories.
 
 ```js:title=package.json {7}
 {
@@ -185,7 +185,8 @@ We will launch the `cc-jest` command-line with the -c parameter pointing to the
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "cc-jest -c .storybook",
+    "test:create": "cc-cli -c ./.config -o tests -t stories.test.ts -n components -f ts",
+    "test": "yarn jest"
     "eject": "react-scripts eject",
     ...
   },
@@ -199,7 +200,7 @@ We will launch the `cc-jest` command-line with the -c parameter pointing to the
 yarn test
 ```
 
-Running the `jest-snapshots` test will execute any existing tests (ie `src/lib/components/button/button.spec.tsx`) as well as snapshot tests automatically created for all your stories.
+Running the `test:create` script test will a tests file `stories.test.ts` (typecript format) in the `tests` folder.
 
 After running the tests, you should have a file `tests/__snapshots__/stories.test.js.snap`, with snapshots like this one:
 

examples/stories/src/blogs/storybook-6-migration-storybook-ssg.mdx

@@ -8,15 +8,16 @@ description: Migrate a documentation site from Storybook 6 to component-controls
 tags:
   - storybook
   - tailwind
-image: /static/docs-and-page.jpg  
+image: /static/docs-and-page.jpg
 ---
-import { Button } from '../components/Button'
+
+import { Button } from '../components/Button';
 import docsAndPageImg from './media/docs-and-page.jpg';
 import testingPageImg from './media/testing-page.jpg';
 
 # Storybook as a static site generator
 
-The starting sample project was cloned from 
+The starting sample project was cloned from
 
 [tw-sb-rtl-starter](https://github.com/ssengalanto/tw-sb-rtl-starter)
 
@@ -26,14 +27,13 @@ The final project can be found here:
 
 [live site](https://tailwind-storybook-controls-starter.netlify.app/?path=/docs-page/components-button--primary)
 
-
 ## Install `@component-controls/storybook`
 
 ```sh
 yarn add @component-controls/storybook -D
 ```
 
-component-controls has two [configuration](/configuration/overview/) files - one is used during build-time in a nodejs environment, the other is used during run-time in a browser environment. 
+component-controls has two [configuration](/configuration/overview/) files - one is used during build-time in a nodejs environment, the other is used during run-time in a browser environment.
 
 The rough equivalents of Storybook for those two configuration files are `main.js` and `preview.(js|ts)`
 
@@ -47,12 +47,12 @@ module.exports = {
   addons: [
     '@storybook/addon-essentials',
     '@storybook/preset-create-react-app',
-    '@component-controls/storybook'
+    '@component-controls/storybook',
   ],
 };
 ```
 
-At his point, you can start your documentation site 
+At his point, you can start your documentation site
 
 ```sh
  yarn storybook
@@ -64,7 +64,7 @@ And a new documentation Page tab will be visible
 
 ## Add testing page
 
-component-controls allows adding fully customizable documentation pages to your documentation site. 
+component-controls allows adding fully customizable documentation pages to your documentation site.
 
 ### Install testing packages
 
@@ -102,13 +102,13 @@ const TestingPage = () => {
             <Story id="." />
           </Playground>
           <PropsTable of="." title="Controls" visibility="controls" />
-        </>  
+        </>
       )}
       <AllyBlock title="A11y tests" />
       <ViewportBlock title="Viewport" />
-    </>  
+    </>
   );
-}
+};
 
 export default {
   key: 'docs-test',
@@ -140,8 +140,8 @@ module.exports = {
           require.resolve('@component-controls/storybook/full-page'), // this is the default documentation page
           require.resolve('./testing-page'),
         ],
-      }
-    }
+      },
+    },
   ],
 };
 ```
@@ -150,20 +150,19 @@ The new Testing Page should now be visible
 
 <img alt="testing page" title="testing page" src={testingPageImg} />
 
-
 ## Add jest snapshot tests
 
-The `@component-controls/jest-snapshots` package is automatically creating jest [snapshot tests](/tutorial/testing/jest-snapshots) from your existing stories. It has an easy to use command-line interface that we will use in this example but also offers a [fully customizable API](/blogs/custom-test-runners).
+The `@component-controls/cc-cli` package is automatically creating jest [snapshot tests](/tutorial/testing/jest-snapshots) from your existing stories. It has an easy to use command-line interface that we will use in this example but also offers a [fully customizable API](/blogs/custom-test-runners).
 
-### Install the jest-snapshots package
+### Install the cc-cli package
 
 ```sh
-yarn add @component-controls/jest-snapshots -D
+yarn add @component-controls/cc-cli -D
 ```
 
-### Configure test script
+### Configure test:create script
 
-We will launch the `cc-jest` command-line with the -c parameter pointing to the folder storing your configuration files. You can also add other parameters such as `--coverage`.
+We will launch the `cc-cli` command-line tool to create automatically tests for all our existing stories.
 
 ```js:title=package.json {7}
 {
@@ -172,12 +171,13 @@ We will launch the `cc-jest` command-line with the -c parameter pointing to the
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "cc-jest -c .storybook",
+    "test:create": "cc-cli -c ./.config -o tests -t stories.test.ts -n components -f ts",
+    "test": "yarn jest"
     "eject": "react-scripts eject",
     ...
   },
   ...
-}  
+}
 ```
 
 ### Run the tests
@@ -186,7 +186,7 @@ We will launch the `cc-jest` command-line with the -c parameter pointing to the
 yarn test
 ```
 
-Running the `jest-snapshots` test will execute any existing tests (ie `src/lib/components/button/button.spec.tsx`) as well as snapshot tests automatically created for all your stories.
+Running the `test:create` script test will a tests file `stories.test.ts` (typecript format) in the `tests` folder.
 
 After running the tests, you should have a file `tests/__snapshots__/stories.test.js.snap`, with snapshots like this one:
 
@@ -223,15 +223,15 @@ module.exports = {
           require.resolve('@component-controls/storybook/full-page'), // this is the default documentation oage
           require.resolve('./testing-page'),
         ],
-      }
-    }
+      },
+    },
   ],
 };
 ```
 
 ### Add MDX instrumenting
 
-If you have MDX documents in your documentation,  we will need to add a custom `webpack` configration to `@component-controls/storybook`
+If you have MDX documents in your documentation, we will need to add a custom `webpack` configration to `@component-controls/storybook`
 
 ```js:title=.storybook/main.js
 module.exports = {
@@ -245,8 +245,8 @@ module.exports = {
           require.resolve('./testing-page'),
         ],
         webpack: ['instrument', 'react-docgen-typescript'],
-      }  
-    }
+      },
+    },
   ],
 };
 ```

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

@@ -13,7 +13,7 @@ author: atanasster
 
 ## Overview
 
-The [jest-snapshots](https://github.com/ccontrols/component-controls/tree/master/plugins/jest-snapshots) package automatically creates snapshot tests for your component based on the already created documentation stories.
+The [cc-cli](https://github.com/ccontrols/component-controls/tree/master/plugins/cc-cli) package automatically creates snapshot tests for your component based on the already created documentation stories.
 
 3 levels from ease of use to full control:
 
@@ -30,7 +30,7 @@ Supports a variety of test renderers:
 ## Install
 
 ```sh
-yarn add @component-controls/jest-snapshots --dev
+yarn add @component-controls/cc-cli --dev
 ```
 
 ## Examples
@@ -44,36 +44,34 @@ The starter projects are set up to demonstrate no-code jest snapshots:
 
 ## CLI
 
-The command-line interface for jest-snapshots allows for the quickest, zero-config setup. You can add a `test` script to your `package.json` file
+The command-line interface for cc-cli allows for the quickest, zero-config setup. You can add a `test:create` script to your `package.json` file
 
-Using this approach will generate a temporary test file in `tests/stories.test.js` that will be used by jest to generate the snapshots.
+Using this approach will generate a test file in `tests/stories.test.js` that will be used by jest to generate the snapshots.
 
 ```js:title=package.json
 "scripts": {
   ...
-  "test": "cc-jest"
+  "test:create": "cc-cli"
 },
 ```
 
 ### CLI Parameters
 
-All of the [compiler cli parameters](/tutorial/reference/cli#parameters) are valid and a few additional parameters can be used:
-
 | Parameter             | Explanation            | Input type                   | Default value |
 | --------------------- | ---------------------- | ---------------------------- | ------------- |
 | `--renderer`<br/>`-r` | jest framework rendere | 'react' \| 'rtr' \| 'enzyme' | `react`       |
 | `--test`<br/>`-t`     | tests output folder    | string                       | `tests`       |
 
-Additionally, all [jest cli parameters](https://jestjs.io/docs/en/cli) apply. If a `jest` parameter name conflicts with a `cc-jest` parameter (for example the `-c` config path parameter), you can prefix the `jest` parameter with `jest-` prefix
+Examples:
 
 ```sh
-yarn cc-jest -c .storybook --coverage
+yarn cc-cli -c .storybook --coverage
 ```
 
 or
 
 ```sh
-yarn cc-jest -c .storybook jest---coverage true
+yarn cc-cli -c .storybook jest---coverage true
 ```
 
 ## Custom tests

plugins/addon-catalog/package.json

@@ -21,7 +21,7 @@
     "fix": "yarn lint --fix",
     "lint": "yarn eslint . --ext mdx,ts,tsx",
     "prepare": "yarn build",
-    "test:create": "cc-jest -c ./.config -o tests -t stories.test.ts -f ts",
+    "test:create": "cc-cli -c ./.config -o tests -t stories.test.ts -f ts",
     "test": "yarn jest"
   },
   "homepage": "https://github.com/ccontrols/component-controls",

plugins/addon-images/package.json

@@ -23,7 +23,7 @@
     "fix": "yarn lint --fix",
     "lint": "yarn eslint . --ext mdx,ts,tsx",
     "prepare": "yarn build",
-    "test:create": "cc-jest -c ./.config -o tests -t stories.test.ts -f ts",
+    "test:create": "cc-cli -c ./.config -o tests -t stories.test.ts -f ts",
     "test": "yarn jest"
   },
   "homepage": "https://github.com/ccontrols/component-controls",
@@ -42,7 +42,7 @@
     "@component-controls/store": "^3.4.5"
   },
   "devDependencies": {
-    "@component-controls/jest-snapshots": "^3.4.5",
+    "@component-controls/cc-cli": "^3.4.5",
     "@types/react": "^16.9.34",
     "jest-url-loader": "^0.1.0",
     "react": "^17.0.1",