refactor(doc): update docs and stories from storybook (#679)

* feat(storybook): update parameters * feat(storybook): add code source addon * doc(Button): update Button doc and its stories * doc(storybook): remove deprecated addon * doc(Avatar): update doc and stories * doc(ButtonGroup): update doc and stories * doc(CheckBox): update doc and stories * doc(Counter): update doc and stories * doc(DatePicker): update doc and stories * doc(Dropdown): update doc and stories * doc(storybook): wrap stories for styling
tillersystems · Aug 7, 2019 · 22dbbc0 · 22dbbc0
1 parent fb1f34d
commit 22dbbc0
Show file tree

Hide file tree

Showing 28 changed files with 804 additions and 490 deletions.
diff --git a/.storybook/addons.js b/.storybook/addons.js
@@ -1,5 +1,5 @@
 import '@storybook/addon-knobs/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
-import '@storybook/addon-options/register';
+import '@storybook/addon-storysource/register';
 import 'storybook-readme/register';
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -1,27 +1,27 @@
 import '@babel/polyfill';
 
 import React from 'react';
-import styled from 'styled-components';
 import { configure, addDecorator, addParameters } from '@storybook/react';
 import { create } from '@storybook/theming';
 import { ThemeProvider } from 'styled-components';
-import { addReadme, configureReadme } from 'storybook-readme';
+import { addReadme } from 'storybook-readme';
 
 import GlobalStyles from './styles';
 import { Theme } from '../src';
 
 // Option defaults:
 addParameters({
   options: {
+    isFullScreen: false,
+    panelPosition: 'right',
+    showNav: true,
+    showPanel: true,
+    sidebarAnimations: true,
     theme: create({
       base: 'light',
       brandTitle: 'Stardust',
       brandUrl: 'http://stardust.tillersystems.com',
     }),
-    isFullscreen: false,
-    panelPosition: 'right',
-    showNav: true,
-    showPanel: true,
   },
   readme: {
     /**

diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -0,0 +1,9 @@
+module.exports = function({ config }) {
+  config.module.rules.push({
+    test: /\.stories\.jsx?$/,
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
+    enforce: 'pre',
+  });
+
+  return config;
+};
diff --git a/package.json b/package.json
@@ -82,7 +82,7 @@
     "@storybook/addon-info": "5.1.10",
     "@storybook/addon-knobs": "5.1.10",
     "@storybook/addon-links": "5.1.10",
-    "@storybook/addon-options": "5.1.10",
+    "@storybook/addon-storysource": "5.1.10",
     "@storybook/addons": "5.1.10",
     "@storybook/react": "5.1.10",
     "@storybook/theming": "5.1.10",

diff --git a/src/Avatar/README.md b/src/Avatar/README.md
@@ -8,19 +8,21 @@ import { Avatar } from '@tillersystems/stardust';
 
 <!-- STORY -->
 
+### Description
+
+An Avatar depicts an user with an image if its path is provided.  
+It fallbacks to the initials of the person.
+
+<!-- PROPS -->
+
 ### Properties
 
-- `className` - className needed by styled component.
-- `name` - user name.
-- `size` - size of the avatar.
-- `src` - source image of a user.
-
-| propName    | propType | defaultValue | isRequired |
-| ----------- | :------: | :----------: | :--------: |
-| `className` | `string` |     `''`     |     -      |
-| `name`      | `string` |              |     \*     |
-| `size`      | `number` |    `3.1`     |     -      |
-| `src`       | `string` |    `null`    |     -      |
+| Name        | Required |   Type   | DefaultValue |                Description                 |
+| ----------- | :------: | :------: | :----------: | :----------------------------------------: |
+| `className` |    -     | `string` |     `''`     |    className needed by styled component    |
+| `name`      |    \*    | `string` |              | name that will form the displayed initials |
+| `size`      |    -     | `number` |    `3.1`     |             size of the avatar             |
+| `src`       |    -     | `string` |    `null`    |           source image of a user           |
 
 ### Example
 

diff --git a/src/Avatar/__stories__/Avatar.stories.js b/src/Avatar/__stories__/Avatar.stories.js
@@ -1,43 +1,68 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withKnobs, text, select } from '@storybook/addon-knobs';
+import { number, text, withKnobs } from '@storybook/addon-knobs';
 
+import Wrapper from '../../Wrapper';
 import { Avatar } from '../..';
 import AvatarReadme from '../README.md';
 
 storiesOf('Avatar', module)
   .addDecorator(withKnobs)
   .addParameters({
     readme: {
+      includePropTables: [Avatar], // won't work right now because of wrapped styled-comp https://github.com/tuchk4/storybook-readme/issues/177
       // Show readme before story
       content: AvatarReadme,
     },
   })
-  .add('default', () => {
-    const name1 = text('Name 1', 'Thomas Roux', 'name');
-    const name2 = text('Name 2', 'Léopold Houdin', 'name');
-    const name3 = text('Name 3', 'Mickey Mouse', 'name');
+  .add('default with initials', () => {
+    const name1 = text('Name 1', 'Thomas Roux', 'Props');
+    const name2 = text('Name 2', 'Léopold Houdin', 'Props');
+    const name3 = text('Name 3', 'Mickey Mouse', 'Props');
+
+    const size = number(
+      'Size',
+      3,
+      {
+        range: true,
+        min: 1.5,
+        max: 10,
+        step: 0.5,
+      },
+      'Props',
+    );
 
     return (
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 40px)' }}>
-        <Avatar name={name1} />
-        <Avatar name={name2} />
-        <Avatar name={name3} />
-      </div>
+      <Wrapper style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 120px)' }}>
+        <Avatar name={name1} size={size} />
+        <Avatar name={name2} size={size} />
+        <Avatar name={name3} size={size} />
+      </Wrapper>
     );
   })
-  .add('with user image', () => {
-    const name = text('Name', 'Tony Starck', 'name');
+  .add('with an user image', () => {
+    const name = text('Name', 'Tony Starck', 'Props');
     const imageUrl = text(
       'Image',
       'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9urBbQTr7erOXvN978IfXd5TzG5KYU4BRwTfqixgTPodK32ewfg',
-      'image',
+      'Props',
+    );
+
+    const size = number(
+      'Size',
+      3,
+      {
+        range: true,
+        min: 1.5,
+        max: 10,
+        step: 0.5,
+      },
+      'Props',
+    );
+
+    return (
+      <Wrapper>
+        <Avatar name={name} src={imageUrl} size={size} />
+      </Wrapper>
     );
-    const options = {
-      medium: 1.5,
-      big: 3.1,
-      huge: 4.1,
-    };
-    const size = select('Size', options, 3.1, 'size');
-    return <Avatar name={name} src={imageUrl} size={size} />;
   });
diff --git a/src/Avatar/index.js b/src/Avatar/index.js
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import initials from 'initials';
@@ -19,7 +19,7 @@ const defaultColors = [
 /**
  * Sum Chars
  *
- * Do the sums of the carcatere of a string
+ * Do the sums of the caracteres of a string
  *
  * @return {jsx}
  */
@@ -33,50 +33,57 @@ function sumChars(str) {
 }
 
 /**
- * Avatar
- *
- * This component is in charge of displaying
- * an avatar of a user
+ * An Avatar depicts an user with an image if its path is provided.
+ * It fallbacks to the initials of the person.
  *
  * @return {jsx}
  */
 
-class Avatar extends PureComponent {
+const Avatar = ({ className, name, size, src }) => {
+  const abbr = initials(name);
+  const normalizeSize = size * 10;
+
+  return (
+    <div aria-label={name} className={className}>
+      {src && <Image src={src} width={normalizeSize} height={normalizeSize} alt={name} />}
+      {!src && <span>{abbr}</span>}
+    </div>
+  );
+};
+
+/**
+ * PropTypes validation
+ */
+Avatar.propTypes = {
   /**
-   * PropTypes validation
+   * className needed by styled component
    */
-  static propTypes = {
-    className: PropTypes.string, // className needed by styled component.
-    name: PropTypes.string.isRequired, // user name.
-    size: PropTypes.number, // size of the avatar.
-    src: PropTypes.string, // source image of a user.
-  };
+  className: PropTypes.string,
 
   /**
-   * Default propTypes
+   * name that will form the displayed initials
    */
-  static defaultProps = {
-    className: '',
-    size: Theme.dimensions.bigInt,
-    src: null,
-  };
+  name: PropTypes.string.isRequired,
 
   /**
-   * Render function
+   * size of the avatar
    */
-  render() {
-    const { className, name, size, src } = this.props;
-    const abbr = initials(name);
-    const normalizeSize = size * 10;
+  size: PropTypes.number,
 
-    return (
-      <div aria-label={name} className={className}>
-        {src && <Image src={src} width={normalizeSize} height={normalizeSize} alt={name} />}
-        {!src && <span>{abbr}</span>}
-      </div>
-    );
-  }
-}
+  /**
+   * source image of a user
+   */
+  src: PropTypes.string,
+};
+
+/**
+ * Default propTypes
+ */
+Avatar.defaultProps = {
+  className: '',
+  size: Theme.dimensions.bigInt,
+  src: null,
+};
 
 export default styled(Avatar)`
   display: flex;

diff --git a/src/Button/README.md b/src/Button/README.md
@@ -8,31 +8,30 @@ import { Button } from '@tillersystems/stardust';
 
 <!-- STORY -->
 
+### Description
+
+A Button comes in three possible sizes and six visual sizes.  
+An Icon component can be displayed next to the text label of the button, left or right side.
+For now, instance of the Icon must be passed to the Button so styling is rather free.
+
+Button can be a simple standalone button or part of a form.
+
+<!-- PROPS -->
+
 ### Properties
 
-- `appearance` - The base styling to apply to the button.
-- `children` - Anything that can be rendered: numbers, strings, elements or an array (or fragment).
-- `className` - ClassName needed by styled components.
-- `fluid` - Whether the button is fluid or not.
-- `disabled` - Whether the button is disabled or not.
-- `icon` - Add icon node here to illustrate the text aside.
-- `iconPosition` - Set the icon position compared to the text. It will be set to the left side by default.
-- `onClick` - Handler of click on the button.
-- `size` - Whether the button size is small, default or large. It will be set to default by default.
-- `type` - Whether it is a button or a form submission.
-
-| propName       |                                  propType                                   | defaultValue | isRequired |
-| -------------- | :-------------------------------------------------------------------------: | :----------: | :--------: |
-| `appearance`   | `oneOf(['default', 'primary', 'secondary', 'success', 'danger', 'google'])` |  `default`   |     -      |
-| `children`     |                                   `node`                                    |    `null`    |     -      |
-| `className`    |                                  `string`                                   |     `''`     |     -      |
-| `fluid`        |                                   `bool`                                    |   `false`    |     -      |
-| `disabled`     |                                   `bool`                                    |   `false`    |     -      |
-| `icon`         |                                   `node`                                    |    `null`    |     -      |
-| `iconPosition` |                                  `string`                                   |    `left`    |     -      |
-| `onClick`      |                                   `func`                                    |  `() = {}`   |     -      |
-| `size`         |                   `oneOf(['small', 'default', 'large'])`                    |  `default`   |     -      |
-| `type`         |                        `oneOf(['button', 'submit'])`                        |   `button`   |     -      |
+| Name           | Required |                                    Type                                     | DefaultValue |                                        Description                                         |
+| -------------- | :------: | :-------------------------------------------------------------------------: | :----------: | :----------------------------------------------------------------------------------------: |
+| `appearance`   |    -     | `oneOf(['default', 'primary', 'secondary', 'success', 'danger', 'google'])` |  `default`   |                          The base styling to apply to the button                           |
+| `children`     |    -     |                                   `node`                                    |    `null`    |    Anything that can be rendered: numbers, strings, elements or an array (or fragment)     |
+| `className`    |    -     |                                  `string`                                   |     `''`     |                           ClassName needed by styled components                            |
+| `fluid`        |    -     |                                   `bool`                                    |   `false`    |                             Whether the button is fluid or not                             |
+| `disabled`     |    -     |                                   `bool`                                    |   `false`    |                           Whether the button is disabled or not                            |
+| `icon`         |    -     |                                   `node`                                    |    `null`    |                     Adds icon next to the text button to illustrate it                     |
+| `iconPosition` |    -     |                                  `string`                                   |    `left`    |  Sets the icon position compared to the text. It will be set to the left side by default   |
+| `onClick`      |    -     |                                   `func`                                    |  `() = {}`   |                               Handler of click on the button                               |
+| `size`         |    -     |                   `oneOf(['small', 'default', 'large'])`                    |  `default`   | Whether the button size is small, default or large. It will be set to `default` by default |
+| `type`         |    -     |                        `oneOf(['button', 'submit'])`                        |   `button`   |                        Whether it is a button or a form submission                         |
 
 ### Example