Add bojagi and generate stories from docs examples

.bojagi/decorator.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { StylesProvider, jssPreset } from '@material-ui/styles';
+import jssRtl from 'jss-rtl';
+import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { create } from 'jss';
+
+// Configure JSS
+const jss = create({
+  plugins: [...jssPreset().plugins, jssRtl()],
+  insertionPoint: process.browser ? document.querySelector('#insertion-point-jss') : null,
+});
+
+const theme = createMuiTheme({});
+
+console.log('test');
+
+export default (Story) => (
+  <StyledEngineProvider injectFirst>
+    <StylesProvider jss={jss}>
+      <MuiThemeProvider theme={theme}>
+        <CssBaseline />
+        <Story />
+      </MuiThemeProvider>
+    </StylesProvider>
+  </StyledEngineProvider>
+);

.bojagirc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  storyPath: ['./stories/generated/*.stories.@(tsx|ts|jsx|js)', './stories/*.stories.@(tsx|ts|jsx|js)'],
+  webpackConfig: __dirname + '/webpackBaseConfig.js',
+};

.gitignore

@@ -24,3 +24,5 @@ build
 node_modules
 package-lock.json
 size-snapshot.json
+.bojagi/tmp
+stories/generated

package.json

@@ -71,6 +71,7 @@
     "@babel/preset-env": "^7.10.2",
     "@babel/preset-react": "^7.10.1",
     "@babel/register": "^7.10.1",
+    "@bojagi/cli": "^0.14.1",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "@octokit/rest": "^18.0.14",
@@ -142,6 +143,7 @@
     "lodash": "^4.17.15",
     "mocha": "^8.0.1",
     "node-fetch": "^ 2.6.0",
+    "nodegit": "^0.27.0",
     "nyc": "^15.0.0",
     "playwright": "^1.6.1",
     "prettier": "^2.0.1",

scripts/generateStories.js

@@ -0,0 +1,49 @@
+const fs = require('fs');
+const path = require('path');
+
+const TEMP_WHITELIST_STORIES = ['lists', 'menus', 'switches', 'text-fields', 'pickers', 'tooltips'];
+const IGNORE_STORIES = ['no-ssr', 'material-icons'];
+
+const docsComponentsFolderPath = path.resolve(__dirname, '../docs/src/pages/components');
+const generatedStoriesPath = path.resolve(__dirname, '../stories/generated');
+
+const JS_FILE_REGEXP = /(.*?)\.js$/;
+
+const allTopLevelFiles = fs.readdirSync(docsComponentsFolderPath);
+const allComponents = allTopLevelFiles
+  .filter(item => fs.lstatSync(path.resolve(docsComponentsFolderPath, item)).isDirectory())
+  .filter(item => !IGNORE_STORIES.includes(item))
+  .filter(item => TEMP_WHITELIST_STORIES.includes(item));
+
+// Delete and create the generated stories path
+if (fs.existsSync(generatedStoriesPath)) {
+  fs.rmdirSync(generatedStoriesPath, { recursive: true });
+}
+fs.mkdirSync(generatedStoriesPath);
+
+
+allComponents
+  .map(componentName => {
+    const componentFolderPath = path.resolve(docsComponentsFolderPath, componentName);
+    const allExampleFiles = fs.readdirSync(componentFolderPath);
+    return [componentName, allExampleFiles];
+  })
+  .filter(([,allExampleFiles]) => allExampleFiles.length > 0)
+  .forEach(([componentName, allExampleFiles]) =>{
+
+    // Only get js files
+    const jsFiles = allExampleFiles.filter(fileName => JS_FILE_REGEXP.test(fileName));
+
+    const exportStatements = jsFiles
+      // Remove extension
+      .map(fileName => fileName.replace(JS_FILE_REGEXP, '$1'))
+      // Get relative path to file
+      .map(fileName => [fileName, `../../docs/src/pages/components/${componentName}/${fileName}`])
+      .map(([fileName, filePath]) => `export { default as ${fileName} } from '${filePath}'`);
+
+    const defaultExport  = `export default { title: '${componentName}' };\n`;
+
+    const storyPath = path.resolve(generatedStoriesPath, `${componentName}.stories.js`);
+    const storyFile = [defaultExport, ...exportStatements].join('\n');
+    fs.writeFileSync(storyPath, storyFile);
+  });

stories/generated/lists.stories.js

@@ -0,0 +1,15 @@
+export default { title: 'lists' };
+
+export { default as AlignItemsList } from '../../docs/src/pages/components/lists/AlignItemsList'
+export { default as CheckboxList } from '../../docs/src/pages/components/lists/CheckboxList'
+export { default as CheckboxListSecondary } from '../../docs/src/pages/components/lists/CheckboxListSecondary'
+export { default as FolderList } from '../../docs/src/pages/components/lists/FolderList'
+export { default as GutterlessList } from '../../docs/src/pages/components/lists/GutterlessList'
+export { default as InsetList } from '../../docs/src/pages/components/lists/InsetList'
+export { default as InteractiveList } from '../../docs/src/pages/components/lists/InteractiveList'
+export { default as NestedList } from '../../docs/src/pages/components/lists/NestedList'
+export { default as PinnedSubheaderList } from '../../docs/src/pages/components/lists/PinnedSubheaderList'
+export { default as SelectedListItem } from '../../docs/src/pages/components/lists/SelectedListItem'
+export { default as SimpleList } from '../../docs/src/pages/components/lists/SimpleList'
+export { default as SwitchListSecondary } from '../../docs/src/pages/components/lists/SwitchListSecondary'
+export { default as VirtualizedList } from '../../docs/src/pages/components/lists/VirtualizedList'

stories/generated/menus.stories.js

@@ -0,0 +1,12 @@
+export default { title: 'menus' };
+
+export { default as ContextMenu } from '../../docs/src/pages/components/menus/ContextMenu'
+export { default as CustomizedMenus } from '../../docs/src/pages/components/menus/CustomizedMenus'
+export { default as FadeMenu } from '../../docs/src/pages/components/menus/FadeMenu'
+export { default as LongMenu } from '../../docs/src/pages/components/menus/LongMenu'
+export { default as MenuListComposition } from '../../docs/src/pages/components/menus/MenuListComposition'
+export { default as MenuPopupState } from '../../docs/src/pages/components/menus/MenuPopupState'
+export { default as PositionedMenu } from '../../docs/src/pages/components/menus/PositionedMenu'
+export { default as SimpleListMenu } from '../../docs/src/pages/components/menus/SimpleListMenu'
+export { default as SimpleMenu } from '../../docs/src/pages/components/menus/SimpleMenu'
+export { default as TypographyMenu } from '../../docs/src/pages/components/menus/TypographyMenu'

stories/generated/pickers.stories.js

@@ -0,0 +1,6 @@
+export default { title: 'pickers' };
+
+export { default as DateAndTimePickers } from '../../docs/src/pages/components/pickers/DateAndTimePickers'
+export { default as DatePickers } from '../../docs/src/pages/components/pickers/DatePickers'
+export { default as MaterialUIPickers } from '../../docs/src/pages/components/pickers/MaterialUIPickers'
+export { default as TimePickers } from '../../docs/src/pages/components/pickers/TimePickers'

stories/generated/switches.stories.js

@@ -0,0 +1,8 @@
+export default { title: 'switches' };
+
+export { default as CustomizedSwitches } from '../../docs/src/pages/components/switches/CustomizedSwitches'
+export { default as FormControlLabelPosition } from '../../docs/src/pages/components/switches/FormControlLabelPosition'
+export { default as SwitchLabels } from '../../docs/src/pages/components/switches/SwitchLabels'
+export { default as Switches } from '../../docs/src/pages/components/switches/Switches'
+export { default as SwitchesGroup } from '../../docs/src/pages/components/switches/SwitchesGroup'
+export { default as SwitchesSize } from '../../docs/src/pages/components/switches/SwitchesSize'

stories/generated/text-fields.stories.js

@@ -0,0 +1,21 @@
+export default { title: 'text-fields' };
+
+export { default as BasicTextFields } from '../../docs/src/pages/components/text-fields/BasicTextFields'
+export { default as ColorTextFields } from '../../docs/src/pages/components/text-fields/ColorTextFields'
+export { default as ComposedTextField } from '../../docs/src/pages/components/text-fields/ComposedTextField'
+export { default as CustomizedInputBase } from '../../docs/src/pages/components/text-fields/CustomizedInputBase'
+export { default as CustomizedInputs } from '../../docs/src/pages/components/text-fields/CustomizedInputs'
+export { default as FormPropsTextFields } from '../../docs/src/pages/components/text-fields/FormPropsTextFields'
+export { default as FormattedInputs } from '../../docs/src/pages/components/text-fields/FormattedInputs'
+export { default as HelperTextAligned } from '../../docs/src/pages/components/text-fields/HelperTextAligned'
+export { default as HelperTextMisaligned } from '../../docs/src/pages/components/text-fields/HelperTextMisaligned'
+export { default as InputAdornments } from '../../docs/src/pages/components/text-fields/InputAdornments'
+export { default as InputWithIcon } from '../../docs/src/pages/components/text-fields/InputWithIcon'
+export { default as Inputs } from '../../docs/src/pages/components/text-fields/Inputs'
+export { default as LayoutTextFields } from '../../docs/src/pages/components/text-fields/LayoutTextFields'
+export { default as MultilineTextFields } from '../../docs/src/pages/components/text-fields/MultilineTextFields'
+export { default as SelectTextFields } from '../../docs/src/pages/components/text-fields/SelectTextFields'
+export { default as StateTextFields } from '../../docs/src/pages/components/text-fields/StateTextFields'
+export { default as TextFieldHiddenLabel } from '../../docs/src/pages/components/text-fields/TextFieldHiddenLabel'
+export { default as TextFieldSizes } from '../../docs/src/pages/components/text-fields/TextFieldSizes'
+export { default as ValidationTextFields } from '../../docs/src/pages/components/text-fields/ValidationTextFields'

stories/generated/tooltips.stories.js

@@ -0,0 +1,16 @@
+export default { title: 'tooltips' };
+
+export { default as AccessibilityTooltips } from '../../docs/src/pages/components/tooltips/AccessibilityTooltips'
+export { default as AnchorElTooltips } from '../../docs/src/pages/components/tooltips/AnchorElTooltips'
+export { default as ArrowTooltips } from '../../docs/src/pages/components/tooltips/ArrowTooltips'
+export { default as BasicTooltip } from '../../docs/src/pages/components/tooltips/BasicTooltip'
+export { default as ControlledTooltips } from '../../docs/src/pages/components/tooltips/ControlledTooltips'
+export { default as CustomizedTooltips } from '../../docs/src/pages/components/tooltips/CustomizedTooltips'
+export { default as DelayTooltips } from '../../docs/src/pages/components/tooltips/DelayTooltips'
+export { default as DisabledTooltips } from '../../docs/src/pages/components/tooltips/DisabledTooltips'
+export { default as FollowCursorTooltips } from '../../docs/src/pages/components/tooltips/FollowCursorTooltips'
+export { default as NonInteractiveTooltips } from '../../docs/src/pages/components/tooltips/NonInteractiveTooltips'
+export { default as PositionedTooltips } from '../../docs/src/pages/components/tooltips/PositionedTooltips'
+export { default as TransitionsTooltips } from '../../docs/src/pages/components/tooltips/TransitionsTooltips'
+export { default as TriggersTooltips } from '../../docs/src/pages/components/tooltips/TriggersTooltips'
+export { default as VariableWidth } from '../../docs/src/pages/components/tooltips/VariableWidth'