Merge pull request #238 from iCHEF/feature/storybook_docs

Install storybook docs

CHANGELOG.md

@@ -6,7 +6,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
-N/A
+### Upgrade
+- [Storybook] Upgrade `@storybook` packages to `v5.3.2`.
+
+### Added
+- [Storybook] Add and configure storybook docs addon.
+
 
 ## [4.0.0]
 

packages/storybook/.storybook/config.js

@@ -1,7 +1,9 @@
-import { configure } from '@storybook/react';
+import { configure, addParameters } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
 import { setDefaults } from '@storybook/addon-info';
 
+import getComponentProps from '../utils/getComponentProps';
+
 import Code from './Code';
 
 // -------------------------------------
@@ -12,6 +14,7 @@ setOptions({
     name: 'iCHEF gypcrete',
     url: 'https://github.com/iCHEF/gypcrete',
     showDownPanel: true,
+    hierarchySeparator: /\./,
     hierarchyRootSeparator: /\|/,
 });
 
@@ -31,18 +34,19 @@ setDefaults({
     components: { codespan: Code },
 });
 
+addParameters({
+    docs: {
+        extractProps: component => ({
+            rows: getComponentProps(component),
+        }),
+    },
+});
+
 // -------------------------------------
 //   Load Stories
 // -------------------------------------
 
-const reqContext = require.context(
-    '../examples/',
-    true,
-    /index\.js$/
-);
-
-function loadStories() {
-    reqContext.keys().forEach(reqContext);
-}
-
-configure(loadStories, module);
+configure([
+    require.context('../examples/', true, /\.stories\.(js|mdx)$/),
+    require.context('../examples/', true, /index\.js$/), // legacy
+], module);

packages/storybook/.storybook/presets.js

@@ -0,0 +1,3 @@
+module.exports = [
+    '@storybook/addon-docs/react/preset',
+];

packages/storybook/examples/intro.stories.mdx

@@ -0,0 +1,25 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+
+<Meta title="0 | Introduction" />
+
+# Introduction
+
+`gypcrete` is an in-house components library from iCHEF.
+It's currently split into 3 packages:
+
+- `@ichef/gypcrete` - core components and styles
+- `@ichef/gypcrete-form` - components built for form purposes
+- `@ichef/gypcrete-imageeditor` - a component that allows you to scale, rotate and crop images
+
+Here's a quick example of how you might use components from gypcrete:
+
+```jsx
+import React from 'react';
+import { Button } from '@ichef/gypcrete';
+
+const CustomComponent = () => (
+  <Button basic="Hello World!" />
+);
+
+export default CustomComponent;
+```

packages/storybook/package.json

@@ -23,11 +23,12 @@
     "@ichef/gypcrete": "^4.0.0",
     "@ichef/gypcrete-form": "^4.0.0",
     "@ichef/gypcrete-imageeditor": "^4.0.0",
-    "@storybook/addon-actions": "^5.2.6",
-    "@storybook/addon-info": "^5.2.6",
-    "@storybook/addon-options": "^5.2.6",
-    "@storybook/addons": "^5.2.6",
-    "@storybook/react": "^5.2.6",
+    "@storybook/addon-actions": "^5.3.2",
+    "@storybook/addon-docs": "^5.3.2",
+    "@storybook/addon-info": "^5.3.2",
+    "@storybook/addon-options": "^5.3.2",
+    "@storybook/addons": "^5.3.2",
+    "@storybook/react": "^5.3.2",
     "autoprefixer": "^7.2.5",
     "prop-types": "^15.6.2",
     "react": "^16.6.1",

packages/storybook/utils/getComponentProps.js

@@ -0,0 +1,36 @@
+import { extractProps } from '@storybook/addon-docs/dist/frameworks/react/extractProps';
+
+function formatValue(value) {
+    switch (typeof value) {
+        case 'string':
+            return `'${value}'`;
+        case 'boolean':
+            return `${value}`;
+        case 'function':
+            return '[function]';
+        default:
+            return value;
+    }
+}
+
+export default function getComponentProps(component) {
+    const extractedProps = extractProps(component).rows;
+
+    if (!extractedProps.length) {
+        const inferredProps = Object.keys(component.propTypes || {})
+            .map((propName) => {
+                const required = !(typeof component.propTypes[propName].isRequired === 'function');
+                const defaultValue = formatValue((component.defaultProps || {})[propName]);
+
+                return {
+                    name: propName,
+                    required,
+                    defaultValue: defaultValue && ({ summary: defaultValue }),
+                };
+            });
+
+        return inferredProps;
+    }
+
+    return extractedProps;
+}