feat: webpack-compile - standalone stories

.gitignore

@@ -4,4 +4,5 @@ dist
 .cache
 .rpt2_cache
 *.log
-docs
+docs
+public

.vscode/launch.json

@@ -83,7 +83,7 @@
     {
       "type": "node",
       "request": "launch",
-      "name": "jest test",
+      "name": "jest instrument",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/core/instrument",
       "args": [
@@ -95,6 +95,38 @@
       "windows": {
         "program": "${workspaceFolder}/node_modules/jest/bin/jest",
       }
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "jest webpack-configs",
+      "program": "${workspaceFolder}/node_modules/.bin/jest",
+      "cwd": "${workspaceFolder}/core/webpack-configs",
+      "args": [
+        "webpack-merge",
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true,
+      "windows": {
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+      }
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "jest webpack-compile",
+      "program": "${workspaceFolder}/node_modules/.bin/jest",
+      "cwd": "${workspaceFolder}/core/webpack-compile",
+      "args": [
+        "example-stories",
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true,
+      "windows": {
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+      }
     }
   ]
 }

README.md

@@ -14,6 +14,7 @@
     -   [@component-controls/core](#component-controlscore)
     -   [@component-controls/instrument](#component-controlsinstrument)
     -   [@component-controls/loader](#component-controlsloader)
+    -   [@component-controls/webpack-compile](#component-controlswebpack-compile)
     -   [@component-controls/webpack-configs](#component-controlswebpack-configs)
     -   [@component-controls/store](#component-controlsstore)
     -   [@component-controls/config](#component-controlsconfig)
@@ -62,6 +63,7 @@ There are many developments that have contributed to the creation of `component-
 -   [x] UI Libraries
 -   [x] Storybook integration with addon-docs
 -   [x] Storybook integration without addon-docs (replace all storybook loaders)
+-   [x] Standalone webpack compiler API
 -   [ ] HMR
 -   [ ] Gatsby standalone app/static app builder
 -   [ ] Nextjs standalone app/static app builder
@@ -181,6 +183,18 @@ Webpack loader that injects the data collected by [@component-controls/instrumen
 
 <!-- END-PACKAGE-SECTION -->
 
+<package-section file="./core/webpack-compile/README.md" section="overview" />
+
+<!-- START-PACKAGE-SECTION -->
+
+## [@component-controls/webpack-compile](https://github.com/ccontrols/component-controls/blob/master/core/webpack-compile)
+
+Webpack compile api
+
+Standalone webpack compile/watch API for [@component-controls](https://github.com/ccontrols/component-controls).
+
+<!-- END-PACKAGE-SECTION -->
+
 <package-section file="./core/webpack-configs/README.md" section="overview" />
 
 <!-- START-PACKAGE-SECTION -->

core/config/.eslintignore

@@ -0,0 +1 @@
+dist

core/config/README.md

@@ -6,7 +6,8 @@
     -   [ConfigrationResult](#configrationresult)
     -   [configFileNames](#configfilenames)
     -   [extractStories](#extractstories)
-    -   [getConfiguration](#getconfiguration)
+    -   [getConfigurationArg](#getconfigurationarg)
+    -   [loadConfiguration](#loadconfiguration)
     -   [Configuration](#configuration)
 
 # Overview
@@ -29,7 +30,7 @@ $ npm install @component-controls/config --save-dev
 
 ## ConfigrationResult
 
-_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L9)_
+_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L14)_
 
 
 
@@ -51,7 +52,7 @@ _defined in [@component-controls/config/src/index.ts](https://github.com/ccontro
 find the story files out of a configuration file
 using glob for the regex file search
 
-_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L53)_
+_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L70)_
 
 **function** extractStories(`__namedParameters`\*: **config**: [Configuration](#configuration)**configPath**: string): string\[] | undefined;
 
@@ -62,23 +63,39 @@ _defined in [@component-controls/config/src/index.ts](https://github.com/ccontro
 | `__namedParameters*` | **config**: [Configuration](#configuration)**configPath**: string |             |
 | `returns`            | string\[] \| undefined                                            |             |
 
-## getConfiguration
+## getConfigurationArg
 
-return the configration object
+return the configration folder from command-line parameters
 command line accepts -c/ -config parameter for config path
 the config file is assumed named main.js/main.ts
 
-_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L19)_
+_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L24)_
 
-**function** getConfiguration(`baseFolder`\*: string, `args`\*: string\[]): [ConfigrationResult](#configrationresult) | undefined;
+**function** getConfigurationArg(`args`\*: string\[]): string | undefined;
 
 ### parameters
 
-| Name          | Type                                                   | Description                             |
-| ------------- | ------------------------------------------------------ | --------------------------------------- |
-| `baseFolder*` | string                                                 | project folder to start the searh with  |
-| `args*`       | string\[]                                              |                                         |
-| `returns`     | [ConfigrationResult](#configrationresult) \| undefined |                                         |
+| Name      | Type                | Description |
+| --------- | ------------------- | ----------- |
+| `args*`   | string\[]           |             |
+| `returns` | string \| undefined |             |
+
+## loadConfiguration
+
+ given a base project folder and a configuration folder, returns the configuration file
+
+_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L45)_
+
+**function** loadConfiguration(`baseFolder`\*: string, `configFolder`: string, `args`: string\[]): [ConfigrationResult](#configrationresult) | undefined;
+
+### parameters
+
+| Name           | Type                                                   | Description                                    |
+| -------------- | ------------------------------------------------------ | ---------------------------------------------- |
+| `baseFolder*`  | string                                                 | project folder to start the search with        |
+| `configFolder` | string                                                 | folder where the configuration file is located |
+| `args`         | string\[]                                              | optional arguments                             |
+| `returns`      | [ConfigrationResult](#configrationresult) \| undefined |                                                |
 
 ## Configuration
 

core/config/src/index.ts

@@ -4,22 +4,26 @@ import { sync as globSync } from 'glob';
 import yargs from 'yargs';
 import { Configuration } from '@component-controls/specification';
 
-export const configFileNames = ['main.js', 'main.json', 'main.ts'];
+export const configFileNames = [
+  'main.js',
+  'main.json',
+  'main.ts',
+  'controls.js',
+];
 
 export interface ConfigrationResult {
   config: Configuration;
   configPath: string;
 }
 /**
- * return the configration object
+ * return the configration folder from command-line parameters
  * command line accepts -c/ -config parameter for config path
  * the config file is assumed named main.js/main.ts
- * @param baseFolder project folder to start the searh with
+ * @param baseFolder project folder to start the search with
  */
-export const getConfiguration = (
-  baseFolder: string,
+export const getConfigurationArg = (
   args: string[] = process.argv,
-): ConfigrationResult | undefined => {
+): string | undefined => {
   const argv = yargs(args)
     .option('config', {
       alias: 'c',
@@ -28,10 +32,23 @@ export const getConfiguration = (
     })
     .help()
     .alias('help', 'h').argv;
+  return argv.config;
+};
 
-  const configPath = argv.config
-    ? path.resolve(baseFolder, argv.config)
-    : baseFolder;
+/**
+ *  given a base project folder and a configuration folder, returns the configuration file
+ *
+ * @param baseFolder project folder to start the search with
+ * @param configFolder folder where the configuration file is located
+ * @param args optional arguments
+ */
+export const loadConfiguration = (
+  baseFolder: string,
+  configFolder?: string,
+  args?: string[],
+): ConfigrationResult | undefined => {
+  const folder = configFolder ?? getConfigurationArg(args);
+  const configPath = folder ? path.resolve(baseFolder, folder) : baseFolder;
   const configFiles = fs.readdirSync(configPath);
   const configFile = configFiles.find(file =>
     configFileNames.includes(file.toLowerCase()),

core/config/test/__snapshots__/config-folder.test.ts.snap

@@ -15,10 +15,10 @@ Object {
       },
     ],
     "stories": Array [
-      "../../../../ui/editors/src/**/*.stories.(js|tsx|mdx)",
-      "../../../../ui/components/src/**/*.stories.(js|tsx|mdx)",
-      "../../../../ui/blocks/src/**/*.stories.(js|tsx|mdx)",
-      "../../../../examples/stories/src/**/*.stories.(js|tsx|mdx)",
+      "../../../../ui/editors/src/**/*.stories.(js|jsx|tsx|mdx)",
+      "../../../../ui/components/src/**/*.stories.(js|jsx|tsx|mdx)",
+      "../../../../ui/blocks/src/**/*.stories.(js|jsx|tsx|mdx)",
+      "../../../../examples/stories/src/**/*.stories.(js|jsx|tsx|mdx)",
     ],
   },
   "configPath": "/Users/atanasster/component-controls/core/config/test/fixtures",
@@ -40,10 +40,10 @@ Object {
       },
     ],
     "stories": Array [
-      "../../../../ui/editors/src/**/*.stories.(js|tsx|mdx)",
-      "../../../../ui/components/src/**/*.stories.(js|tsx|mdx)",
-      "../../../../ui/blocks/src/**/*.stories.(js|tsx|mdx)",
-      "../../../../examples/stories/src/**/*.stories.(js|tsx|mdx)",
+      "../../../../ui/editors/src/**/*.stories.(js|jsx|tsx|mdx)",
+      "../../../../ui/components/src/**/*.stories.(js|jsx|tsx|mdx)",
+      "../../../../ui/blocks/src/**/*.stories.(js|jsx|tsx|mdx)",
+      "../../../../examples/stories/src/**/*.stories.(js|jsx|tsx|mdx)",
     ],
   },
   "configPath": "/Users/atanasster/component-controls/core/config/test/fixtures",

core/config/test/__snapshots__/stories.test.ts.snap

@@ -43,7 +43,7 @@ Array [
   "/Users/atanasster/component-controls/ui/blocks/src/Subtitle/Subtitle.stories.tsx",
   "/Users/atanasster/component-controls/ui/blocks/src/Title/Title.stories.tsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories/controls-editors-starter.stories.tsx",
-  "/Users/atanasster/component-controls/examples/stories/src/stories/controls-editors.stories.js",
+  "/Users/atanasster/component-controls/examples/stories/src/stories/controls-editors.stories.jsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories/inherit-from-kind.stories.tsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories/smart-prop-type.stories.js",
   "/Users/atanasster/component-controls/examples/stories/src/stories/smart-typescript.stories.js",
@@ -94,7 +94,7 @@ Array [
   "/Users/atanasster/component-controls/ui/blocks/src/Subtitle/Subtitle.stories.tsx",
   "/Users/atanasster/component-controls/ui/blocks/src/Title/Title.stories.tsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories/controls-editors-starter.stories.tsx",
-  "/Users/atanasster/component-controls/examples/stories/src/stories/controls-editors.stories.js",
+  "/Users/atanasster/component-controls/examples/stories/src/stories/controls-editors.stories.jsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories/inherit-from-kind.stories.tsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories/smart-prop-type.stories.js",
   "/Users/atanasster/component-controls/examples/stories/src/stories/smart-typescript.stories.js",

core/config/test/config-folder.test.ts

@@ -1,14 +1,24 @@
-import { getConfiguration } from '../src/index';
+import { loadConfiguration } from '../src/index';
 
 describe('config-folder', () => {
   it('config file short option', () => {
     expect(
-      getConfiguration(__dirname, ['file', 'name', '-c', 'fixtures']),
+      loadConfiguration(__dirname, undefined, [
+        'file',
+        'name',
+        '-c',
+        'fixtures',
+      ]),
     ).toMatchSnapshot();
   });
   it('config file long option', () => {
     expect(
-      getConfiguration(__dirname, ['file', 'name', '--config', 'fixtures']),
+      loadConfiguration(__dirname, undefined, [
+        'file',
+        'name',
+        '--config',
+        'fixtures',
+      ]),
     ).toMatchSnapshot();
   });
 });

core/config/test/fixtures/main.js

@@ -8,9 +8,9 @@ module.exports = {
     },
   ],
   stories: [
-    '../../../../ui/editors/src/**/*.stories.(js|tsx|mdx)',
-    '../../../../ui/components/src/**/*.stories.(js|tsx|mdx)',
-    '../../../../ui/blocks/src/**/*.stories.(js|tsx|mdx)',
-    '../../../../examples/stories/src/**/*.stories.(js|tsx|mdx)',
+    '../../../../ui/editors/src/**/*.stories.(js|jsx|tsx|mdx)',
+    '../../../../ui/components/src/**/*.stories.(js|jsx|tsx|mdx)',
+    '../../../../ui/blocks/src/**/*.stories.(js|jsx|tsx|mdx)',
+    '../../../../examples/stories/src/**/*.stories.(js|jsx|tsx|mdx)',
   ],
 };

core/config/test/stories.test.ts

@@ -1,18 +1,28 @@
-import { getConfiguration, extractStories } from '../src/index';
+import { loadConfiguration, extractStories } from '../src/index';
 
 describe('config-folder', () => {
   it('config file short option', () => {
     expect(
       extractStories(
-        getConfiguration(__dirname, ['file', 'name', '-c', 'fixtures']),
+        loadConfiguration(__dirname, undefined, [
+          'file',
+          'name',
+          '-c',
+          'fixtures',
+        ]),
       ),
     ).toMatchSnapshot();
   });
 
   it('config file long option', () => {
     expect(
       extractStories(
-        getConfiguration(__dirname, ['file', 'name', '--config', 'fixtures']),
+        loadConfiguration(__dirname, undefined, [
+          'file',
+          'name',
+          '--config',
+          'fixtures',
+        ]),
       ),
     ).toMatchSnapshot();
   });