Merge pull request #162 from EmaSuriano/add-storybook-docs

docs: Add storybook docs

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/*.stories.(js|mdx)'],
+  addons: ['@storybook/addon-docs'],
+};

.storybook/preview.js

@@ -0,0 +1,9 @@
+import { addParameters } from '@storybook/react';
+import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
+
+addParameters({
+  docs: {
+    container: DocsContainer,
+    page: DocsPage,
+  },
+});

netlify.toml

@@ -0,0 +1,4 @@
+[build]
+  publish = "storybook-static"
+  command = "yarn docs:build"
+

package.json

@@ -18,16 +18,18 @@
     "test:ci": "start-server-and-test 6006",
     "lint": "eslint src/**",
     "start": "start-storybook -p 6006",
-    "storybook-build": "build-storybook"
+    "docs": "start-storybook --docs",
+    "docs:build": "build-storybook --docs"
   },
   "peerDependencies": {
     "react": "16.x",
     "styled-components": "5.x"
   },
   "devDependencies": {
-    "@storybook/addon-storyshots": "^5.0.6",
-    "@storybook/addon-storyshots-puppeteer": "^5.0.6",
-    "@storybook/react": "^5.0.6",
+    "@storybook/addon-docs": "^5.3.18",
+    "@storybook/addon-storyshots": "^5.3.18",
+    "@storybook/addon-storyshots-puppeteer": "^5.3.18",
+    "@storybook/react": "^5.3.18",
     "babel-jest": "^25.1.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-require-context-hook": "^1.0.0",

stories/Cloudy.stories.js

@@ -1,32 +1,38 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Cloudy } from '../src';
-import { CenterContainer, ThemeContainer } from './utils';
+import { Cloudy, WeatherThemeProvider } from '../src';
+import Center from './helpers/Center';
 
-const theme = {
-  cloudsColor: 'greenYellow',
-  backgroundColor: 'honeyDew',
-  sunColor: 'Orange',
-  raysColor: 'OrangeRed',
+export default {
+  title: 'Cloudy',
+  component: Cloudy,
+  decorators: [storyFn => <Center>{storyFn()}</Center>],
 };
 
-storiesOf('Cloudy', module)
-  .add('Variations', () => (
-    <CenterContainer>
-      <Cloudy />
-      <Cloudy patchy />
-    </CenterContainer>
-  ))
-  .add('Different Sizes', () => (
-    <CenterContainer>
-      <Cloudy size={0.7} />
-      <Cloudy />
-      <Cloudy size={1.3} />
-    </CenterContainer>
-  ))
-  .add('Theming', () => (
-    <ThemeContainer theme={theme}>
-      <Cloudy />
-      <Cloudy patchy />
-    </ThemeContainer>
-  ));
+export const Variations = () => (
+  <>
+    <Cloudy />
+    <Cloudy patchy />
+  </>
+);
+
+export const DifferentSizes = () => (
+  <>
+    <Cloudy size={0.7} />
+    <Cloudy />
+    <Cloudy size={1.3} />
+  </>
+);
+
+export const Theming = () => {
+  const theme = {
+    cloudsColor: 'greenYellow',
+    sunColor: 'Orange',
+    raysColor: 'OrangeRed',
+  };
+
+  return (
+    <WeatherThemeProvider theme={theme}>
+      <Variations />
+    </WeatherThemeProvider>
+  );
+};

stories/Rain.stories.js

@@ -1,38 +1,42 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Rain } from '../src';
-import { CenterContainer, ThemeContainer } from './utils';
+import { Rain, WeatherThemeProvider } from '../src';
+import Center from './helpers/Center';
 
-const theme = {
-  cloudsColor: 'MidnightBlue',
-  dropsColor: 'white',
-  boltColor: 'lightBlue',
-  backgroundColor: 'Lavender',
-  sunColor: 'Orange',
-  raysColor: 'OrangeRed',
+export default {
+  title: 'Rain',
+  component: Rain,
+  decorators: [storyFn => <Center>{storyFn()}</Center>],
 };
 
-storiesOf('Rain', module)
-  .add('Variations', () => (
-    <CenterContainer>
-      <Rain />
-      <Rain patchy />
-      <Rain lighting />
-      <Rain lighting patchy />
-    </CenterContainer>
-  ))
-  .add('Different Sizes', () => (
-    <CenterContainer>
-      <Rain size={0.7} />
-      <Rain />
-      <Rain size={1.3} />
-    </CenterContainer>
-  ))
-  .add('Theming', () => (
-    <ThemeContainer theme={theme}>
-      <Rain />
-      <Rain patchy />
-      <Rain lighting />
-      <Rain lighting patchy />
-    </ThemeContainer>
-  ));
+export const Variations = () => (
+  <>
+    <Rain />
+    <Rain patchy />
+    <Rain lighting />
+    <Rain lighting patchy />
+  </>
+);
+
+export const DifferentSizes = () => (
+  <>
+    <Rain size={0.7} />
+    <Rain />
+    <Rain size={1.3} />
+  </>
+);
+
+export const Theming = () => {
+  const theme = {
+    cloudsColor: 'MidnightBlue',
+    dropsColor: 'white',
+    boltColor: 'lightBlue',
+    sunColor: 'Orange',
+    raysColor: 'OrangeRed',
+  };
+
+  return (
+    <WeatherThemeProvider theme={theme}>
+      <Variations />
+    </WeatherThemeProvider>
+  );
+};

stories/Snow.stories.js

@@ -1,33 +1,39 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Snow } from '../src';
-import { CenterContainer, ThemeContainer } from './utils';
+import { Snow, WeatherThemeProvider } from '../src';
+import Center from './helpers/Center';
 
-const theme = {
-  cloudsColor: 'RoyalBlue ',
-  snowColor: 'SeaGreen ',
-  backgroundColor: 'PaleGoldenRod',
-  sunColor: 'Purple',
-  raysColor: 'RebeccaPurple',
+export default {
+  title: 'Snow',
+  component: Snow,
+  decorators: [storyFn => <Center>{storyFn()}</Center>],
 };
 
-storiesOf('Snow', module)
-  .add('Variations', () => (
-    <CenterContainer>
-      <Snow />
-      <Snow patchy />
-    </CenterContainer>
-  ))
-  .add('Different Sizes', () => (
-    <CenterContainer>
-      <Snow size={0.7} />
-      <Snow />
-      <Snow size={1.3} />
-    </CenterContainer>
-  ))
-  .add('Theming', () => (
-    <ThemeContainer theme={theme}>
-      <Snow />
-      <Snow patchy />
-    </ThemeContainer>
-  ));
+export const Variations = () => (
+  <>
+    <Snow />
+    <Snow patchy />
+  </>
+);
+
+export const DifferentSizes = () => (
+  <>
+    <Snow size={0.7} />
+    <Snow />
+    <Snow size={1.3} />
+  </>
+);
+
+export const Theming = () => {
+  const theme = {
+    cloudsColor: 'RoyalBlue ',
+    snowColor: 'SeaGreen ',
+    sunColor: 'Purple',
+    raysColor: 'RebeccaPurple',
+  };
+
+  return (
+    <WeatherThemeProvider theme={theme}>
+      <Variations />
+    </WeatherThemeProvider>
+  );
+};

stories/Sunny.stories.js

@@ -1,29 +1,36 @@
 import React from 'react';
-import { Sunny } from '../src';
-import { storiesOf } from '@storybook/react';
-import { CenterContainer, ThemeContainer } from './utils';
+import { Sunny, WeatherThemeProvider } from '../src';
+import Center from './helpers/Center';
 
-const theme = {
-  sunColor: 'SkyBlue',
-  raysColor: 'SlateBlue',
-  backgroundColor: 'peachPuff',
+export default {
+  title: 'Sunny',
+  component: Sunny,
+  decorators: [storyFn => <Center>{storyFn()}</Center>],
 };
 
-storiesOf('Sunny', module)
-  .add('Variations', () => (
-    <CenterContainer>
-      <Sunny />
-    </CenterContainer>
-  ))
-  .add('Different Sizes', () => (
-    <CenterContainer>
-      <Sunny size={0.7} />
-      <Sunny />
-      <Sunny size={1.3} />
-    </CenterContainer>
-  ))
-  .add('Theming', () => (
-    <ThemeContainer theme={theme}>
-      <Sunny />
-    </ThemeContainer>
-  ));
+export const Variations = () => (
+  <>
+    <Sunny />
+  </>
+);
+
+export const DifferentSizes = () => (
+  <>
+    <Sunny size={0.7} />
+    <Sunny />
+    <Sunny size={1.3} />
+  </>
+);
+
+export const Theming = () => {
+  const theme = {
+    sunColor: 'SkyBlue',
+    raysColor: 'SlateBlue',
+  };
+
+  return (
+    <WeatherThemeProvider theme={theme}>
+      <Variations />
+    </WeatherThemeProvider>
+  );
+};

stories/helpers/Center.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const Center = styled.div`
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export default Center;