feat: global options, storySort

core/config/src/index.ts

@@ -14,6 +14,7 @@ export const configFileNames = [
 export interface ConfigrationResult {
   config: Configuration;
   configPath: string;
+  configFilePath: string;
 }
 /**
  * return the configration folder from command-line parameters
@@ -54,12 +55,15 @@ export const loadConfiguration = (
     configFileNames.includes(file.toLowerCase()),
   );
 
-  return configFile
-    ? {
-        config: require(path.resolve(configPath, configFile)),
-        configPath,
-      }
-    : undefined;
+  if (configFile) {
+    const configFilePath = path.resolve(configPath, configFile);
+    return {
+      config: require(configFilePath),
+      configFilePath,
+      configPath,
+    };
+  }
+  return undefined;
 };
 
 /**

core/loader/src/replaceSource.ts

@@ -3,9 +3,16 @@ export interface StoryPath {
   relPath: string;
 }
 
-export const replaceSource = (stories: StoryPath[], hashKey: string) => {
+export const replaceSource = (
+  stories: StoryPath[],
+  configFilePath: string | undefined,
+  hashKey: string,
+) => {
   const imports = `
 const imports = {};
+const configJSON = ${
+    configFilePath ? `require("${configFilePath}")` : 'undefined'
+  };
 ${stories
   .map(story => `imports['${story.absPath}'] = require(${story.relPath});`)
   .join('\n')}
@@ -59,6 +66,7 @@ ${stories
   const newContent = `
 ${imports}
 ${storeConst}
+store.config = configJSON;
 ${loadStories}
 ${hmr}
 ${exports}

core/loader/src/runtimeLoader.ts

@@ -16,6 +16,7 @@ module.exports = function(content: string) {
   );
   content = replaceSource(
     stories,
+    config?.configFilePath,
     `__COMPILATION_HASH__${params.compilationHash}`,
   );
   return content;

core/loader/src/store.ts

@@ -2,9 +2,14 @@ import {
   StoriesStore,
   StoryComponents,
   StoryPackages,
+  Configuration,
 } from '@component-controls/specification';
 
 export interface LoadingStore {
+  /**
+   * global configuration from project config file
+   */
+  config?: Configuration;
   /**
    * global store of packages
    */

core/specification/src/configuration.ts

@@ -17,4 +17,13 @@ export interface Configuration {
    * example: [story => <ThemeProvider>{story()}</ThemeProvider>]
    */
   decorators?: StoryRenderFn[];
+  /**
+   * global options object
+   */
+  options?: {
+    /**
+     * story sorting function
+     */
+    storySort?: (a: string, b: string) => number;
+  };
 }

core/specification/src/stories.ts

@@ -1,7 +1,7 @@
 import { CodeLocation, PackageInfo, StoryRenderFn } from './utility';
 import { StoryComponent } from './components';
 import { ComponentControls } from './controls';
-
+import { Configuration } from './configuration';
 /**
  * an identifier/variable.argument in the source code
  */
@@ -271,6 +271,10 @@ export interface StoryPackages {
  * store of stories information in memory after the loader is applied
  */
 export interface StoriesStore {
+  /**
+   * global configuration for config file
+   */
+  config?: Configuration;
   /**
    * list of story files, or groups
    */

core/store/src/Store/Store.ts

@@ -1,4 +1,4 @@
-import { StoriesStore } from '@component-controls/specification';
+import { StoriesStore, Configuration } from '@component-controls/specification';
 import { BroadcastChannel } from 'broadcast-channel';
 import {
   StoreObserver,
@@ -121,6 +121,10 @@ export class Store implements StoryStore {
     const store = this.getStore();
     return store ? store.docs : undefined;
   };
+
+  get config(): Configuration | undefined {
+    return this.loadedStore?.config;
+  }
   /**
    * modify story properties, for example controls values.
    * will notify all installed store observers of the changed story.

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

@@ -25,6 +25,7 @@ export const loadStoryStore = (
         stores,
         packages: loadedPackages,
         components: loadedComponents,
+        config,
       } = newStore;
 
       if (stores) {
@@ -33,6 +34,7 @@ export const loadStoryStore = (
           stories: {},
           components: {},
           packages: {},
+          config,
         };
         stores.forEach(s => {
           const storeDocs = s.docs;

core/store/src/types.ts

@@ -2,6 +2,7 @@ import {
   StoriesStore,
   Story,
   StoryDocs,
+  Configuration,
 } from '@component-controls/specification';
 
 /**
@@ -16,6 +17,7 @@ export interface StoryStore {
   getStory: (storyId: string) => Story | undefined;
   getStoryDoc: (name: string) => StoryDocs | undefined;
   getDocs: () => StoryDocs | undefined;
+  config: Configuration | undefined;
   updateStoryProp: (
     storyId: string,
     propName: string,

examples/gatsby/.config/main.js

@@ -1,5 +1,26 @@
+const categories = ['Introduction', 'Controls','Blocks', 'Editors', 'Components', 'App components', 'Plugins'];
+storySort: (a, b) => {
+  const aKind = a[1].kind.split('/')[0];
+  const aIndex = categories.findIndex(c => c === aKind);
+  const bKind = b[1].kind.split('/')[0];
+  const bIndex = categories.findIndex(c => c === bKind);
+  return aIndex - bIndex;
+},
+
 module.exports = {
   stories: [
     '../../stories/src/**/*.stories.(js|jsx|tsx|mdx)',
+    '../../../core/specification/src/stories/**/*.stories.(js|jsx|tsx|mdx)',
+    '../../../ui/app-components/src/**/*.stories.(js|jsx|tsx|mdx)',
+    '../../../ui/components/src/**/*.stories.(js|jsx|tsx|mdx)',
   ],
+  options: {
+    storySort: (a, b) => {
+      const aDoc = a.split('/')[0];
+      const aIndex = categories.findIndex(c => c === aDoc);
+      const bDoc = b.split('/')[0];
+      const bIndex = categories.findIndex(c => c === bDoc);
+      return aIndex - bIndex;
+    },
+  }  
 };

integrations/gatsby-theme-stories/src/gatsby-node.ts

@@ -1,4 +1,8 @@
-import { compile } from '@component-controls/webpack-compile';
+import {
+  compile,
+  watch,
+  CompileProps,
+} from '@component-controls/webpack-compile';
 import { NodePluginArgs, NodeInput, CreatePagesArgs } from 'gatsby';
 import { StoriesStore } from '@component-controls/specification';
 import { loadStoryStore } from '@component-controls/store';
@@ -11,12 +15,12 @@ exports.sourceNodes = async function sourceNodes(
   options: LoaderOptions,
 ) {
   const { createNode } = actions;
-
-  const { store } = await compile({
+  const config: CompileProps = {
     webPack: options.webpack,
     presets: defaultPresets,
     configPath: options.configPath,
-  });
+  };
+  const { store } = true ? await watch(config) : await compile(config);
   const loadedStore: StoriesStore | undefined = loadStoryStore(store);
 
   if (loadedStore) {

integrations/storybook/src/preset.ts

@@ -47,7 +47,6 @@ module.exports = {
     return result;
   },
   webpackFinal: (config: any = {}, options: PresetOptions = {}) => {
-    debugger;
     const mergedConfig = mergeWebpackConfig(
       config,
       options?.webpack || defaultRules,

ui/app/src/Sidebar/Sidebar.tsx

@@ -65,8 +65,12 @@ export const Sidebar: FC<SidebarProps> = ({ docPath, buttonClass, title }) => {
   const { storeProvider } = useContext(BlockContext);
   const menuItems = useMemo(() => {
     if (storeProvider) {
+      const { options } = storeProvider.config || {};
+
       const docs: string[] = Object.keys(storeProvider.getDocs() || []);
-      const menuItems = docs.reduce((acc: MenuItems, doc: string) => {
+      const sortedDocs =
+        options && options.storySort ? docs.sort(options.storySort) : docs;
+      const menuItems = sortedDocs.reduce((acc: MenuItems, doc: string) => {
         const levels = doc.split('/');
         createMenuItem(levels, levels, acc);
         return acc;