feat: local configuration (#91)

Author: bitpshr

README.md

@@ -2,22 +2,22 @@
 
 A library to show off your widget library.
 
-* Show running demos
-* Syntax highlighted example code
-* Auto documented widget properties
-* Auto documented theme class hooks
-* Run on codesandbox
-* Run unit tests
+-   Show running demos
+-   Syntax highlighted example code
+-   Auto documented widget properties
+-   Auto documented theme class hooks
+-   Run on codesandbox
+-   Run unit tests
 
-![screenshot](/screenshot.png?raw=true "screenshot")
+![screenshot](/screenshot.png?raw=true 'screenshot')
 
 ## Compatibility
 
 Each major release of Dojo Parade is compatible with a specific major version of the rest of the Dojo framework:
 
 | Parade Version | Dojo Version |
-| :------------: | :-----------:|
-| `1.*.*`        | `7.*.*`      |
+| :------------: | :----------: |
+|    `1.*.*`     |   `7.*.*`    |
 
 ## Usage
 
@@ -26,13 +26,15 @@ npm install @dojo/parade
 ```
 
 #### **`.dojorc`**
+
 ```json
 {
-  "extends": "./node_modules/@dojo/parade/parade.json"
+	"extends": "./node_modules/@dojo/parade/parade.json"
 }
 ```
 
 #### **`main.tsx`**
+
 ```tsx
 import parade from '@dojo/parade';
 
@@ -42,14 +44,15 @@ import config from './config';
 parade({ config });
 ```
 
-### Example config:
+### Example global config:
+
 #### **`config.tsx`**
+
 ```tsx
 import dojoTheme from '@dojo/themes/dojo';
 import '@dojo/themes/dojo/index.css';
 
 import BasicAccordion from './widgets/accordion/Basic';
-import Exclusive from './widgets/accordion/Exclusive';
 import BasicButton from './widgets/button/Basic';
 import DisabledSubmit from './widgets/button/DisabledSubmit';
 import ToggleButton from './widgets/button/ToggleButton';
@@ -60,43 +63,21 @@ export default {
   header: 'My Widget Library',
   codesandbox: {},
   tests,
-  themes: [ dojoTheme ],
-  widgets: {
-    accordion: {
-      examples: [
-        {
-          filename: 'Exclusive',
-          module: Exclusive
-        }
-      ],
-      filename: 'index',
-      overview: {
-        example: {
-          filename: 'Basic',
-          module: BasicAccordion
-        }
-      }
-    },
-    button: {
-      examples: [
-        {
-          filename: 'DisabledSubmit',
-          module: DisabledSubmit,
-          title: 'Disabled Submit Button'
-        },
-        {
-          filename: 'ToggleButton',
-          module: ToggleButton,
-          title: 'Toggle Button'
-        }
-      ],
-      filename: 'index',
-      overview: {
-        example: {
-          filename: 'Basic',
-          module: BasicButton
-        }
-      }
-    }
-  }
+  themes: [ dojoTheme ]
+```
+
+### Example local config:
+
+#### **`AccordionBasic.example.tsx`**
+
+```tsx
+import dojoTheme from '@dojo/themes/dojo';
+import '@dojo/themes/dojo/index.css';
+
+import AccordionBasic from './widgets/accordion/Basic';
+
+export default {
+	module: AccordionBasic,
+	overview: true
+};
 ```

package.json

@@ -1,53 +1,53 @@
 {
-  "name": "@dojo/parade",
-  "version": "1.0.2-pre",
-  "scripts": {
-    "dev": "dojo build app -m dev -w -s",
-    "start": "npm run dev",
-    "dist": "dojo build widget -t lib",
-    "dist:legacy": "dojo build widget -t lib --legacy",
-    "copy": "shx mkdir -p ./dist/release && shx cp -r ./output/dist/* ./dist/release/",
-    "clean": "shx rm -rf ./output/dist && shx rm -rf output",
-    "package": "npm run clean && npm run dist && npm run copy && npm run dist:legacy && npm run copy",
-    "prettier": "prettier --write \"src/**/*.{ts,tsx,css}\"",
-    "release": "npm run package && dojo-release"
-  },
-  "peerDependencies": {
-    "@dojo/framework": "~7.0.0"
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-free": "5.15.3",
-    "canonical-path": "1.0.0",
-    "cldr-data": "36.0.0",
-    "postcss": "7.0.21",
-    "prismjs": "1.17.1",
-    "rehype-add-classes": "^1.0.0",
-    "rehype-stringify": "6.0.0",
-    "remark-parse": "7.0.1",
-    "remark-rehype": "5.0.0",
-    "remark-sectionize": "^1.1.0",
-    "ts-morph": "4.2.0",
-    "tslib": "~1.9.1",
-    "unified": "8.4.1"
-  },
-  "devDependencies": {
-    "@dojo/cli": "~7.0.0",
-    "@dojo/cli-build-app": "~7.0.0",
-    "@dojo/cli-build-widget": "~7.0.0",
-    "@dojo/framework": "~7.0.0",
-    "@dojo/scripts": "^4.0.2",
-    "@types/node": "~9.6.5",
-    "intern": "^4.6.0",
-    "prettier": "^1.19.1",
-    "shx": "^0.3.2",
-    "tailwindcss": "^1.1.4",
-    "typescript": "~3.4.5"
-  },
-  "prettier": {
-    "singleQuote": true,
-    "tabWidth": 4,
-    "useTabs": true,
-    "printWidth": 100,
-    "arrowParens": "always"
-  }
+	"name": "@dojo/parade",
+	"version": "1.0.2-pre",
+	"scripts": {
+		"dev": "dojo build app -m dev -w -s",
+		"start": "npm run dev",
+		"dist": "dojo build widget -t lib",
+		"dist:legacy": "dojo build widget -t lib --legacy",
+		"copy": "shx mkdir -p ./dist/release && shx cp -r ./output/dist/* ./dist/release/",
+		"clean": "shx rm -rf ./output/dist && shx rm -rf output",
+		"package": "npm run clean && npm run dist && npm run copy && npm run dist:legacy && npm run copy",
+		"prettier": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+		"release": "npm run package && dojo-release"
+	},
+	"peerDependencies": {
+		"@dojo/framework": "~7.0.0"
+	},
+	"dependencies": {
+		"@fortawesome/fontawesome-free": "5.15.3",
+		"canonical-path": "1.0.0",
+		"cldr-data": "36.0.0",
+		"postcss": "7.0.21",
+		"prismjs": "1.17.1",
+		"rehype-add-classes": "^1.0.0",
+		"rehype-stringify": "6.0.0",
+		"remark-parse": "7.0.1",
+		"remark-rehype": "5.0.0",
+		"remark-sectionize": "^1.1.0",
+		"ts-morph": "4.2.0",
+		"tslib": "~1.9.1",
+		"unified": "8.4.1"
+	},
+	"devDependencies": {
+		"@dojo/cli": "~7.0.0",
+		"@dojo/cli-build-app": "~7.0.0",
+		"@dojo/cli-build-widget": "~7.0.0",
+		"@dojo/framework": "~7.0.0",
+		"@dojo/scripts": "^4.0.2",
+		"@types/node": "~9.6.5",
+		"intern": "^4.6.0",
+		"prettier": "^1.19.1",
+		"shx": "^0.3.2",
+		"tailwindcss": "^1.1.4",
+		"typescript": "~3.4.5"
+	},
+	"prettier": {
+		"singleQuote": true,
+		"tabWidth": 4,
+		"useTabs": true,
+		"printWidth": 100,
+		"arrowParens": "always"
+	}
 }

src/App.tsx

@@ -19,18 +19,21 @@ import getTheme from './theme.block';
 import code from './code.block';
 
 import '@fortawesome/fontawesome-free/css/all.css';
+import { Config } from '.';
 
-function getWidgetFileNames(config: any): { [index: string]: string } {
+function getWidgetFileNames(config: Config): { [index: string]: string } {
+	if (!config.widgets) return {};
 	return Object.keys(config.widgets).reduce((newConfig, widget) => {
 		return {
 			...newConfig,
-			[widget]: config.widgetPath(widget, config.widgets[widget].filename)
+			[widget]: config.widgetPath(widget)
 		};
 	}, {});
 }
 
-function getReadmeFileNames(config: any): string[] {
+function getReadmeFileNames(config: Config): string[] {
 	const filenames: string[] = [];
+	if (!config.widgets) return filenames;
 	Object.keys(config.widgets).forEach((key) => {
 		filenames.push(config.readmePath(key));
 	});
@@ -40,18 +43,16 @@ function getReadmeFileNames(config: any): string[] {
 	return filenames;
 }
 
-function getExampleFileNames(config: any): string[] {
+function getExampleFileNames(config: Config): string[] {
 	const filenames: string[] = [];
+	if (!config.widgets) {
+		return filenames;
+	}
 	Object.keys(config.widgets).forEach((key) => {
-		const widget = config.widgets[key];
-		if (widget.overview && widget.overview.example) {
-			filenames.push(config.examplePath(key, widget.overview.example.filename));
-		}
-		if (widget.examples) {
-			widget.examples.forEach((example: any) => {
-				filenames.push(config.examplePath(key, example.filename));
-			});
-		}
+		const examples = config.widgets![key];
+		examples.forEach((example) => {
+			filenames.push(config.examplePath(key, example.filename));
+		});
 	});
 	return filenames;
 }
@@ -69,7 +70,6 @@ export default factory(function App({ properties, middleware: { block, icache, t
 		window.location.search = `theme=${label}`;
 		theme.set(newTheme);
 	};
-
 	const widgetReadmeContent = isCodeSandbox ? {} : block(readme)(readmeFilenames) || {};
 	const widgetExampleContent = isCodeSandbox ? {} : block(code)(exampleFilenames) || {};
 	const widgetProperties = isCodeSandbox ? {} : block(getWidgetProperties)(widgetFilenames) || {};

src/Example.tsx

@@ -7,6 +7,7 @@ import { isThemeInjectorPayloadWithVariant } from '@dojo/framework/core/ThemeInj
 import HorizontalRule from './HorizontalRule';
 import ThemeTable from './ThemeTable';
 import InterfaceTable from './InterfaceTable';
+import { Config } from '.';
 
 const middleware = create({ destroy, icache });
 
@@ -29,7 +30,7 @@ const factory = create({ theme, icache, postMessage }).properties<{
 	widgetExamples: any;
 	widgetProperties: any;
 	widgetThemes: any;
-	config: any;
+	config: Config;
 }>();
 
 export default factory(function Example({
@@ -58,11 +59,14 @@ export default factory(function Example({
 		}
 	});
 	const isOverview = !exampleName;
-	const example = isOverview
-		? config.widgets[widgetName].overview.example
-		: config.widgets[widgetName].examples.find(
-				(e: any) => e.filename.toLowerCase() === exampleName
-		  );
+	const example =
+		config.widgets &&
+		config.widgets[widgetName].find((e: any) =>
+			isOverview ? e.overview : e.filename.toLowerCase() === exampleName
+		);
+	if (!example) {
+		return;
+	}
 	const codesandboxPath =
 		config.codesandboxPath && config.codesandboxPath(widgetName, example.filename, themeName);
 	const examplePath = config.examplePath(widgetName, example.filename);

src/ExampleSandbox.tsx

@@ -26,16 +26,12 @@ export default factory(function Example({ properties, middleware: { theme, resiz
 	if (height) {
 		parent.postMessage(JSON.stringify({ height: `${height}px` }), '*');
 	}
-	const isOverview =
-		config.widgets[widgetName].overview.example.filename.toLowerCase() === exampleName;
-	const example = isOverview
-		? config.widgets[widgetName].overview.example
-		: config.widgets[widgetName].examples.find(
-				(e: any) => e.filename.toLowerCase() === exampleName
-		  );
-	return (
+	const example =
+		config.widgets &&
+		config.widgets[widgetName].find((e: any) => e.filename.toLowerCase() === exampleName);
+	return example ? (
 		<div key="example-container" classes={css.container}>
 			<example.module />
 		</div>
-	);
+	) : null;
 });