Add bojagi

.gitignore

@@ -6,4 +6,5 @@ npm-debug.log
 coverage
 .idea
 .vscode
-dist
+dist
+.bojagi/tmp

.storybook/main.js

@@ -0,0 +1,4 @@
+const stories = require('./stories');
+module.exports = {
+  stories,
+};

.storybook/config.js → .storybook/preview.js

@@ -1,20 +1,8 @@
 import React from 'react';
-import 'babel-polyfill';
 import 'loki/configure-react';
-import { configure, addDecorator } from '@storybook/react';
 import { withOptions } from '@storybook/addon-options';
 import { UiStyle } from '@catho/quantum-storybook-ui';
 import GlobalStyle from '../components/GlobalStyle';
-import stories from './stories';
-
-addDecorator(
-  withOptions({
-    name: 'Quantum',
-    showAddonPanel: false,
-    addonPanelInRight: false,
-    url: 'https://github.com/catho/quantum/',
-  }),
-);
 
 const CSSDecorator = storyFn => <>{storyFn()}</>;
 const FontDecorator = storyFn => (
@@ -24,14 +12,14 @@ const FontDecorator = storyFn => (
   </>
 );
 
-addDecorator(UiStyle);
-addDecorator(CSSDecorator);
-addDecorator(FontDecorator);
-
-const reqStories = require.context('../stories', true, /.story.jsx?$/);
-
-function loadStories() {
-  stories.forEach(filename => reqStories(filename));
-}
-
-configure(loadStories, module);
+export const decorators = [
+  withOptions({
+    name: 'Quantum',
+    showAddonPanel: false,
+    addonPanelInRight: false,
+    url: 'https://github.com/catho/quantum/',
+  }),
+  UiStyle,
+  CSSDecorator,
+  FontDecorator,
+];

.storybook/regression-test/main.js

@@ -0,0 +1,4 @@
+const stories = require('./stories');
+module.exports = {
+  stories,
+};

.storybook/regression-test/preview.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import 'loki/configure-react';
+import { addDecorator } from '@storybook/react';
+import { UiStyle } from '@catho/quantum-storybook-ui';
+import GlobalStyle from '../../components/GlobalStyle';
+
+const CSSDecorator = storyFn => <>{storyFn()}</>;
+const FontDecorator = storyFn => (
+  <>
+    <GlobalStyle />
+    {storyFn()}
+  </>
+);
+
+export const decorators = [UiStyle, CSSDecorator, FontDecorator];

.storybook/regression-test/stories.js

@@ -4,7 +4,7 @@
  * order is reflected in storybook sidebar
  */
 
-export default [
+module.exports = [
   'Avatar',
   'Icon',
   'Accordion',
@@ -34,4 +34,4 @@ export default [
   'Tooltip',
   'Stepper',
   'SegmentedControl',
-].map(s => `./${s}/${s}.regression-test.story.jsx`);
+].map(s => `../../stories/${s}/${s}.regression-test.story.jsx`);

.storybook/stories.js

@@ -4,7 +4,7 @@
  * order is reflected in storybook sidebar
  */
 
-export default [
+module.exports = [
   'Introduction',
 
   // Foundations
@@ -78,4 +78,4 @@ export default [
   'Stepper',
 
   'SegmentedControl',
-].map(s => `./${s}/${s}.story.jsx`);
+].map(s => `../stories/${s}/${s}.story.jsx`);

.storybook/webpack.config.js

@@ -10,6 +10,15 @@ module.exports = {
   ],
   module: {
     rules: [
+      {
+        test: /\.jsx$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {},
+          },
+        ],
+      },
       {
         test: /\.css$/,
         use: [

components/shared/uniqId.js

@@ -1,5 +1,3 @@
-import 'babel-polyfill';
-
 export default function*(prefix = '') {
   let _counter = -1;
   while (true) yield `${prefix}${(_counter += 1)}`;

jest-config.js

@@ -1,5 +1,6 @@
 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import 'jest-styled-components';
+import 'babel-polyfill';
 
 Enzyme.configure({ adapter: new Adapter() });

package.json

@@ -56,6 +56,7 @@
     "@babel/node": "^7.2.2",
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
+    "@bojagi/cli": "^0.18.0-next.0",
     "@catho/quantum-storybook-ui": "^1.3.1",
     "@semantic-release/commit-analyzer": "^8.0.1",
     "@semantic-release/exec": "^5.0.0",

stories/Accordion/Accordion.regression-test.story.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import mockedProps, {
   mockWithFirstItemOpened,
   mockWithLastItemOpened,
@@ -8,14 +7,36 @@ import mockedProps, {
 
 import { Accordion } from '../../components';
 
-storiesOf('Accordion', module)
-  .add('Accordion default', () => <Accordion {...mockedProps} />)
-  .add('Accordion with first item opened', () => (
-    <Accordion {...mockWithFirstItemOpened} />
-  ))
-  .add('Accordion with last item opened', () => (
-    <Accordion {...mockWithLastItemOpened} />
-  ))
-  .add('Accordion with all items closed', () => (
-    <Accordion {...mockWithAllItemsClosed} />
-  ));
+export default {
+  title: 'Accordion',
+};
+
+export const AccordionDefault = () => <Accordion {...mockedProps} />;
+
+AccordionDefault.story = {
+  name: 'Accordion default',
+};
+
+export const AccordionWithFirstItemOpened = () => (
+  <Accordion {...mockWithFirstItemOpened} />
+);
+
+AccordionWithFirstItemOpened.story = {
+  name: 'Accordion with first item opened',
+};
+
+export const AccordionWithLastItemOpened = () => (
+  <Accordion {...mockWithLastItemOpened} />
+);
+
+AccordionWithLastItemOpened.story = {
+  name: 'Accordion with last item opened',
+};
+
+export const AccordionWithAllItemsClosed = () => (
+  <Accordion {...mockWithAllItemsClosed} />
+);
+
+AccordionWithAllItemsClosed.story = {
+  name: 'Accordion with all items closed',
+};

stories/Accordion/Accordion.story.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import {
   Heading,
   Tab,
@@ -17,7 +16,11 @@ import accordionExamples from './examples';
 const description =
   "An accordion is a vertical stack of interactive headings used to toggle the display of further information; each item can be 'collapsed', with just a short label visible, or 'expanded' to show the complete content.";
 
-storiesOf('Accordion', module).add('Accordion', () => (
+export default {
+  title: 'Accordion',
+};
+
+export const _Accordion = () => (
   <>
     <Heading name="Accordion">{description}</Heading>
     <TabbedView>
@@ -72,4 +75,4 @@ storiesOf('Accordion', module).add('Accordion', () => (
       </Tab>
     </TabbedView>
   </>
-));
+);

stories/Alert/Alert.regression-test.story.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { Alert } from '../../components';
 
 const sampleChildren = (
@@ -18,25 +17,52 @@ const props = {
   icon: 'info',
 };
 
-storiesOf('Alert', module)
-  .add('default', () => <Alert {...props}>{sampleChildren}</Alert>)
-  .add('skin primary', () => (
-    <Alert {...props} skin="primary">
-      {sampleChildren}
-    </Alert>
-  ))
-  .add('skin success', () => (
-    <Alert {...props} skin="success">
-      {sampleChildren}
-    </Alert>
-  ))
-  .add('skin error', () => (
-    <Alert {...props} skin="error">
-      {sampleChildren}
-    </Alert>
-  ))
-  .add('skin warning', () => (
-    <Alert {...props} skin="warning">
-      {sampleChildren}
-    </Alert>
-  ));
+export default {
+  title: 'Alert',
+};
+
+export const Default = () => <Alert {...props}>{sampleChildren}</Alert>;
+
+Default.story = {
+  name: 'default',
+};
+
+export const SkinPrimary = () => (
+  <Alert {...props} skin="primary">
+    {sampleChildren}
+  </Alert>
+);
+
+SkinPrimary.story = {
+  name: 'skin primary',
+};
+
+export const SkinSuccess = () => (
+  <Alert {...props} skin="success">
+    {sampleChildren}
+  </Alert>
+);
+
+SkinSuccess.story = {
+  name: 'skin success',
+};
+
+export const SkinError = () => (
+  <Alert {...props} skin="error">
+    {sampleChildren}
+  </Alert>
+);
+
+SkinError.story = {
+  name: 'skin error',
+};
+
+export const SkinWarning = () => (
+  <Alert {...props} skin="warning">
+    {sampleChildren}
+  </Alert>
+);
+
+SkinWarning.story = {
+  name: 'skin warning',
+};

stories/Alert/Alert.story.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { AutoExample } from '@catho/quantum-storybook-ui';
 import { Alert } from '../../components';
 
@@ -17,7 +16,11 @@ const sampleChildren = (
   </span>
 );
 
-storiesOf('Alert', module).add('Alert', () => (
+export default {
+  title: 'Alert',
+};
+
+export const _Alert = () => (
   <AutoExample
     description={description}
     component={Alert}
@@ -27,4 +30,4 @@ storiesOf('Alert', module).add('Alert', () => (
       icon: 'info',
     }}
   />
-));
+);