feat: initial checkin gatsby bundler

.eslintrc.js

@@ -1,6 +1,8 @@
 module.exports = {
+  "root": true,
   extends: [
     'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
     'plugin:prettier/recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:mdx/recommended',
@@ -29,6 +31,8 @@ module.exports = {
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/no-object-literal-type-assertion': 'off',
     '@typescript-eslint/no-parameter-properties': 'off',
+    "no-restricted-globals":'error',
+    'react-hooks/rules-of-hooks': 'off',
   },
   parserOptions: {
     ecmaVersion: 2018,

.gitignore

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

.vscode/launch.json

@@ -95,6 +95,18 @@
       "windows": {
         "program": "${workspaceFolder}/node_modules/jest/bin/jest",
       }
+    },
+    {
+      "name": "Gatsby build",
+      "type": "node",
+      "request": "launch",
+      "protocol": "inspector",
+      "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",
+      "args": ["develop"],
+      "cwd": "${workspaceFolder}/examples/gatsby",
+      "stopOnEntry": false,
+      "runtimeArgs": ["--nolazy"],
+      "sourceMaps": false
     }
   ]
 }

core/config/.eslintignore

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

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/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/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();
   });

core/core/src/utils.ts

@@ -132,6 +132,8 @@ export const getControlValue = (
         }
         break;
       }
+      default:
+        return value;
     }
     return value;
   }
@@ -149,7 +151,7 @@ export const getControlValues = (controls?: ComponentControls): ControlValues =>
 export const visibleControls = (
   controls?: ComponentControls,
 ): ComponentControls =>
-  controls && typeof controls == 'object'
+  controls && typeof controls === 'object'
     ? Object.keys(controls)
         .filter(key => !controls[key].hidden)
         .map((key, index) => ({
@@ -175,7 +177,7 @@ export const visibleControls = (
     : {};
 
 export const hasControls = (controls?: ComponentControls): boolean =>
-  controls && typeof controls == 'object'
+  controls && typeof controls === 'object'
     ? !!Object.keys(controls).filter(key => !controls[key].hidden).length
     : false;
 export const newControlValues = (
@@ -249,7 +251,10 @@ export const newControlValues = (
           break;
         }
         default:
-          break;
+          return {
+            name,
+            value: control.defaultValue,
+          };
       }
       return {
         name,

core/loader/src/plugin.ts

@@ -4,15 +4,22 @@ import * as webpack from 'webpack';
 import { createHash } from 'crypto';
 import { store } from './store';
 
+export interface LoaderPluginOptions {
+  config?: string;
+}
 class LoaderPlugin {
   public static pluginName = 'component-controls-loader-plugin';
   private readonly compilationHash: string;
+  private readonly options: LoaderPluginOptions;
 
-  constructor() {
+  constructor(options: LoaderPluginOptions) {
     const hash = createHash('md5')
       .update(new Date().getTime().toString())
       .digest('hex');
     this.compilationHash = `__${hash.substr(0, 6)}__`;
+    this.options = {
+      ...options,
+    };
   }
 
   apply(compiler: webpack.Compiler) {
@@ -40,7 +47,10 @@ class LoaderPlugin {
         if (resource.resource) {
           resource.loaders.push({
             loader: path.join(__dirname, 'runtimeLoader.js'),
-            options: JSON.stringify({ compilationHash: this.compilationHash }),
+            options: JSON.stringify({
+              compilationHash: this.compilationHash,
+              ...this.options,
+            }),
           });
         }
       },

core/loader/src/runtimeLoader.ts

@@ -1,20 +1,19 @@
-import { getConfiguration, extractStories } from '@component-controls/config';
+import { loadConfiguration, extractStories } from '@component-controls/config';
 import { stringifyRequest } from 'loader-utils';
 import { replaceSource, StoryPath } from './replaceSource';
 
 module.exports = function(content: string) {
   //@ts-ignore
   const params = JSON.parse(this.query.slice(1));
   //@ts-ignore
-  const config = getConfiguration(this.rootContext);
+  const config = loadConfiguration(this.rootContext, params.config);
   const stories: StoryPath[] = (config ? extractStories(config) || [] : []).map(
     fileName => ({
       absPath: fileName,
       //@ts-ignore
       relPath: stringifyRequest(this, fileName),
     }),
   );
-
   content = replaceSource(
     stories,
     `__COMPILATION_HASH__${params.compilationHash}`,

core/loader/story-store-data.js

@@ -1 +1 @@
-export default null;
+module.exports = null;

core/specification/src/stories/controls-files.stories.js

@@ -10,7 +10,7 @@ export default {
 export const overview = ({ images }) => (
   <div>
     {images.map((image, index) => (
-      <img src={image} key={`image_${index}`} />
+      <img src={image} key={`image_${index}`} alt={`run time control`} />
     ))}
   </div>
 );

core/store/package.json

@@ -12,7 +12,9 @@
     "live_store.js",
     "live_store.d.ts",
     "static_store.js",
-    "static_store.d.ts"
+    "static_store.d.ts",
+    "singleton_store.js",
+    "singleton_store.d.ts"
   ],
   "scripts": {
     "build": "yarn cross-env NODE_ENV=production rollup -c",

core/store/rollup.config.js

@@ -1,5 +1,10 @@
 import { config } from '../../rollup-config';
 
 export default config({
-  input: ['./src/index.ts', './src/live_store.ts', './src/static_store.ts'],
+  input: [
+    './src/index.ts',
+    './src/live_store.ts',
+    './src/static_store.ts',
+    './src/singleton_store.ts',
+  ],
 });

core/store/singleton_store.d.ts

@@ -0,0 +1 @@
+export * from './dist/singleton_store';

core/store/singleton_store.js

@@ -0,0 +1 @@
+module.exports = require('./dist/singleton_store');

core/store/src/Store/Store.ts

@@ -1,7 +1,5 @@
 import { StoriesStore } from '@component-controls/specification';
-
 import { BroadcastChannel } from 'broadcast-channel';
-export { BroadcastChannel };
 import {
   StoreObserver,
   StoryStore,
@@ -10,6 +8,7 @@ import {
 } from '../types';
 import { readStore, updateStory } from '../serialization/StoreStorage';
 
+export { BroadcastChannel };
 export { StoreObserver, StoryStore };
 
 export interface StoreOptions {
@@ -28,7 +27,7 @@ export interface StoreOptions {
 export class Store implements StoryStore {
   private loadedStore: StoriesStore | undefined;
   private updateLocalStorage: boolean = true;
-  private channel: BroadcastChannel;
+  private channel: BroadcastChannel | undefined;
   private observers: StoreObserver[];
   private moduleId: number;
 
@@ -40,18 +39,24 @@ export class Store implements StoryStore {
     this.moduleId = Math.random();
     this.loadedStore = store;
     this.updateLocalStorage = updateLocalStorage;
-    this.channel = new BroadcastChannel<MessageType>(UPDATE_STORY_MSG, {
-      type: 'localstorage',
-    });
     this.observers = [];
-    this.channel.onmessage = ({ storyId, moduleId, propName }: MessageType) => {
-      if (storyId && moduleId) {
-        if (this.moduleId !== moduleId) {
-          this.readData(storyId, propName);
-          this.notifyObservers(storyId, propName);
+    if (updateLocalStorage) {
+      this.channel = new BroadcastChannel<MessageType>(UPDATE_STORY_MSG, {
+        type: 'localstorage',
+      });
+      this.channel.onmessage = ({
+        storyId,
+        moduleId,
+        propName,
+      }: MessageType) => {
+        if (storyId && moduleId) {
+          if (this.moduleId !== moduleId) {
+            this.readData(storyId, propName);
+            this.notifyObservers(storyId, propName);
+          }
         }
-      }
-    };
+      };
+    }
   }
   /**
    * add observer callback function
@@ -118,7 +123,7 @@ export class Store implements StoryStore {
       this.updateLocalStorage,
     );
     if (this.loadedStore) {
-      if (this.updateLocalStorage) {
+      if (this.channel) {
         const message: MessageType = {
           storyId,
           moduleId: this.moduleId,

core/store/src/serialization/StoreStorage.ts

@@ -18,7 +18,7 @@ const encodeFn = (name: string, val: any) => {
 };
 export const saveStore = (store: StoriesStore) => {
   for (var key in localStorage) {
-    if (key.indexOf(COMPONENT_CONTROLS_STORAGE) == 0) {
+    if (key.indexOf(COMPONENT_CONTROLS_STORAGE) === 0) {
       localStorage.removeItem(key);
     }
   }

core/store/src/serialization/load-store.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-unused-vars */
 import {
   StoriesStore,
   Story,