feat: renderExample with selected test framework

.vscode/launch.json

@@ -84,7 +84,7 @@
       "name": "jest config",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/core/config",
-      "args": ["stories"],
+      "args": ["config"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,
@@ -197,7 +197,7 @@
       "name": "test renderers",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/core/test-renderers",
-      "args": ["rtl"],
+      "args": ["rtr-story"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,

core/config/.babelrc

@@ -8,6 +8,7 @@
           "node": "current"
         }
       }
-    ]
+    ],
+    "@babel/preset-react"
   ]
-}
+}

core/config/src/index.ts

@@ -6,7 +6,15 @@ import globBase from 'glob-base';
 import { makeRe } from 'micromatch';
 
 import yargs from 'yargs';
-import { BuildConfiguration } from '@component-controls/core';
+import {
+  BuildConfiguration,
+  RunConfiguration,
+  defaultBuildConfig,
+  mergeConfig,
+  defaultRunConfig,
+  convertConfig,
+} from '@component-controls/core';
+import { defaultConfigFolder } from '@component-controls/core/node-utils';
 
 export const buildConfigFileNames = [
   'buildtime.js',
@@ -163,6 +171,38 @@ export const configRequireContext = ({
   return contexts;
 };
 
+/**
+ * loads bot the build time and run time configurations
+ * @param rootPath the roo path of the project
+ * @param configFilePath the config folder - relative to the root path
+ * @returns merged configuration
+ */
+export const loadConfigurations = (
+  rootPath: string,
+  configFilePath?: string,
+): RunConfiguration | undefined => {
+  const config = loadConfiguration(
+    rootPath,
+    configFilePath,
+    undefined,
+    defaultConfigFolder,
+  );
+  const buildConfig: BuildConfiguration = config
+    ? mergeConfig(defaultBuildConfig, config.config)
+    : defaultBuildConfig;
+  let runtimeConfig = {};
+  if (config?.optionsFilePath) {
+    const req = require(config?.optionsFilePath);
+    runtimeConfig = req.default || req;
+  }
+  const runConfig = mergeConfig(defaultRunConfig, runtimeConfig);
+
+  return mergeConfig(
+    defaultRunConfig,
+    convertConfig(mergeConfig(buildConfig, runConfig)),
+  );
+};
+
 /**
  * merge a configuration passed through cli or tools, with the build configration from the config path
  */

core/config/test/config.test.ts

@@ -0,0 +1,78 @@
+import { loadConfigurations } from '../src';
+
+describe('load both configurations', () => {
+  test('load', () => {
+    const config = loadConfigurations(__dirname, 'fixtures/.config');
+    expect(config).toMatchObject({
+      title: 'Component controls',
+      description:
+        'A next-generation tool to create blazing-fast documentation sites',
+      language: 'en',
+      author: '@component-controls',
+      pages: {
+        story: {
+          label: 'Docs',
+          navSidebar: true,
+          contextSidebar: true,
+          topMenu: true,
+          basePath: 'docs/',
+          sideNav: {
+            storyPaths: true,
+            collapseSingle: true,
+          },
+        },
+        blog: {
+          label: 'Blog',
+          contextSidebar: true,
+          topMenu: true,
+          indexHome: true,
+          basePath: 'blogs/',
+        },
+        author: {
+          label: 'Authors',
+          basePath: 'authors/',
+        },
+        page: {
+          label: 'Page',
+          container: null,
+          basePath: 'pages/',
+        },
+        tags: {
+          label: 'Tags',
+          basePath: 'tags/',
+        },
+      },
+      siteRoot: '/',
+      siteMap: {
+        pages: {
+          home: {
+            priority: 1,
+          },
+          index: {
+            priority: 0.8,
+          },
+          doc: {
+            priority: 0.5,
+          },
+        },
+      },
+      categories: ['author', 'tags'],
+      ignore: [
+        'readme.md',
+        'changelog.md',
+        'code_of_conduct.md',
+        'contributing.md',
+        'license.md',
+      ],
+      search: {
+        searchingModule: '@component-controls/search-fusejs',
+      },
+      stories: ['../*.docs.tsx'],
+      instrument: {
+        components: {
+          tests: true,
+        },
+      },
+    });
+  });
+});

core/config/test/fixtures/.config/buildtime.js

@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ['../*.docs.tsx'],
+  instrument: {
+    components: {
+      tests: true,
+    },
+  },
+};

core/config/test/fixtures/.config/runtime.tsx

@@ -0,0 +1,43 @@
+/** @jsx jsx */
+import { jsx, Box, Text } from 'theme-ui';
+import { RunOnlyConfiguration } from '@component-controls/core';
+import { Link } from '@component-controls/components';
+
+const config: RunOnlyConfiguration = {
+  title: `Component controls`,
+  description: `A next-generation tool to create blazing-fast documentation sites`,
+  language: `en`,
+  author: `@component-controls`,
+  toolbar: {
+    right: [
+      {
+        node: (
+          <Link href="https://twitter.com/atanasster">
+            <Box
+              sx={{
+                mr: 1,
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+              }}
+            >
+              <svg
+                viewBox="0 0 24 20"
+                xmlns="http://www.w3.org/2000/svg"
+                width={16}
+                height={16}
+                fill="currentColor"
+                sx={{ pt: '1px' }}
+              >
+                <path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"></path>
+              </svg>
+              <Text sx={{ ml: '2px' }}>twitter</Text>
+            </Box>
+          </Link>
+        ),
+      },
+    ],
+  },
+};
+
+export default config;

core/core/src/common.ts

@@ -1,4 +1,5 @@
 import { ElementType } from 'react';
+import { deepMerge } from './deepMerge';
 import { StoryRenderFn } from './utility';
 import { ComponentControls } from './controls';
 
@@ -60,3 +61,31 @@ export interface StoryProps<Props = unknown> {
    */
   category?: string;
 }
+
+export const extractStoryProps = (src: StoryProps): StoryProps => {
+  return {
+    component: src.component,
+    subcomponents: src.subcomponents,
+    controls: src.controls,
+    smartControls: src.smartControls,
+    category: src.category,
+    decorators: Array.isArray(src.decorators)
+      ? src.decorators.filter(d => typeof d === 'function')
+      : undefined,
+    plugins: src.plugins,
+  };
+};
+
+/**
+ * merge commont story props - from config, document and story
+ * @param dest the props to be overwritten
+ * @param src the props to keep, unless they are undefined
+ * @returns the merged props
+ */
+export const mergeStoryProps = (
+  dest: StoryProps | undefined = {},
+  src: StoryProps | undefined = {},
+): StoryProps => {
+  const destProps = extractStoryProps(dest);
+  return deepMerge(destProps, src);
+};

core/core/src/controls-utils.ts

@@ -283,3 +283,83 @@ export const newControlValues = (
     })
     .reduce((acc, f) => (f ? { ...acc, [f.name]: f.value } : acc), {});
 };
+
+/**
+ * transforms the control shortcuts ie controls: { text: 'VALUE'} to full controls
+ * @param name the name of the control
+ * @param controls all the story assigned controls
+ * @param propControls all the smart automatic controls
+ * @returns the fully induced ComponentControl
+ */
+const controlShortcuts = (
+  name: string,
+  controls: ComponentControls,
+  propControls?: ComponentControls,
+): ComponentControl => {
+  const control: ComponentControl | any = controls[name];
+  const propControl = propControls?.[name] || {};
+  const valueType = typeof control;
+  switch (valueType) {
+    case 'boolean':
+      return {
+        type: ControlTypes.BOOLEAN,
+        ...propControl,
+        value: control,
+      };
+    case 'string':
+      return { type: ControlTypes.TEXT, ...propControl, value: control };
+    case 'number':
+      return { type: ControlTypes.NUMBER, ...propControl, value: control };
+    case 'object': {
+      if (control instanceof Date) {
+        return { type: ControlTypes.DATE, ...propControl, value: control };
+      }
+      if (Array.isArray(control)) {
+        return { type: ControlTypes.OPTIONS, ...propControl, options: control };
+      }
+      if (
+        control.type === ControlTypes.OBJECT &&
+        typeof control.value === 'object'
+      ) {
+        return {
+          ...control,
+          ...propControl,
+          value: Object.keys(control.value).reduce(
+            (acc, name) => ({
+              ...acc,
+              [name]: controlShortcuts(name, control.value, propControl),
+            }),
+            {},
+          ),
+        };
+      }
+      return { ...propControl, ...control };
+    }
+    default:
+      return { ...propControl, ...control };
+  }
+};
+
+/**
+ *
+ * @param controls all the story controls
+ * @param propControls all the automatic prop controls
+ * @returns the transformed ComponentControls
+ */
+export const transformControls = (
+  controls?: ComponentControls,
+  propControls?: ComponentControls,
+): ComponentControls | undefined => {
+  return controls
+    ? Object.keys(controls).reduce((acc, key) => {
+        const control = controlShortcuts(key, controls, propControls);
+        if (control.defaultValue === undefined) {
+          const defaultValue = getControlValue(control);
+          if (typeof defaultValue !== 'function') {
+            control.defaultValue = defaultValue;
+          }
+        }
+        return { ...acc, [key]: control };
+      }, {})
+    : undefined;
+};

core/core/src/node-utils.ts

@@ -21,6 +21,8 @@ export const findUpFile = (
 
 export const defaultDistFolder = 'public';
 
+export const defaultConfigFolder = '.config';
+
 export const getDistFolder = (options: BuildProps): string => {
   const distFolder = options.distFolder || defaultDistFolder;
   return path.isAbsolute(distFolder)

core/instrument/src/types.ts

@@ -164,6 +164,11 @@ export interface ComponentOptions {
    */
   fileInfo?: boolean;
 
+  /**
+   * If set to false, will not collect test data
+   */
+  tests?: boolean;
+
   /**
    * options for extracting repository information from the component's package,json file
    */

core/jest-testing/package.json

@@ -36,7 +36,8 @@
   "dependencies": {
     "jest-cli": "^26.4.2",
     "babel-jest": "^26.4.4",
-    "ts-jest": "^26.4.4"
+    "ts-jest": "^26.4.4",
+    "path": "^0.12.7"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.13.10",