Merge pull request deriv-com#5 from amirghadimi-fs/add_storybooks

Amir / Add storybooks

packages/components/stories/multi-step/README.md

@@ -0,0 +1,45 @@
+# SwipeableWrapper component
+Use this component only on mobile to have a swipeable wrapper.
+
+#### Supported events:
+All events for 'react-swipeable' plugin except 'onSwipedRight' and 'onSwipedLeft' because we're using them in the component.
+Please take a look at plugin's page to get more information  https://github.com/FormidableLabs/react-swipeable .
+
+## Usage
+
+```jsx
+import { SwipeableWrapper } from 'deriv-components';
+
+const DummyComponent = (props) => (
+    <SwipeableWrapper>
+        {props.slides.map(id => (
+            <Slide id={id + 1} key={id} />
+        ))}
+    </SwipeableWrapper>
+);
+```
+
+## Props
+
+| Name                     | Type                   | Default            | Description                                                                                                              |
+|--------------------------|------------------------|--------------------|--------------------------------------------------------------------------------------------------------------------------|
+| onChange                 | {function}             | null               | Callback function for swipe event                                                                                        |
+| is_disabled              | {boolean}              | null               | Set it to 'true' to disable the 'react-swipeable' functions                                                              |
+
+
+## Full example:
+
+```jsx
+import { SwipeableWrapper } from 'deriv-components';
+
+const DummyComponent = (props) => (
+    <SwipeableWrapper 
+        onChange={props.onChange} 
+        is_disabled={props.is_disabled}
+    >
+        {props.slides.map(id => (
+            <Slide id={id + 1} key={id} />
+        ))}
+    </SwipeableWrapper>
+);
+```

packages/components/stories/multi-step/multi-step.stories.js

@@ -0,0 +1,12 @@
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { withInfo } from '@storybook/addon-info';
+import Basic from './stories/basic';
+import notes from './README.md';
+import './styles.scss';
+
+const stories = storiesOf('MultiStep', module);
+
+stories.addDecorator(withKnobs).addDecorator(withInfo);
+
+stories.add('Basic usage', Basic, { notes });

packages/components/stories/multi-step/stories/basic.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
+import MultiStep from 'Components/multi-step';
+import Wrapper from '../../shared/wrapper';
+
+const Basic = () => {
+    const slides_count = [...Array(3).keys()];
+
+    return (
+        <Wrapper is_full_width is_block is_dark={boolean('Dark Theme', false)}>
+            <MultiStep
+                lbl_previous='Back'
+                steps={[{ component: 'Step 1' }, { component: 'Step 2' }, { component: 'Step 3' }]}
+            />
+        </Wrapper>
+    );
+};
+
+export default Basic;

packages/components/stories/multi-step/styles.scss

@@ -0,0 +1,15 @@
+.swipeable-wrapper-storybook {
+    .dc-swipeable__nav {
+        width: calc(100% - 15px);
+    }
+
+    &-slide {
+        display: flex;
+        width: 100%;
+        height: 300px;
+        align-items: center;
+        justify-content: center;
+        background-color: aquamarine;
+        font-size: 26px;
+    }
+}

packages/components/stories/page-error/README.md

@@ -0,0 +1,47 @@
+# PageError component
+Use this component to show a error page.
+
+## Usage
+
+```jsx
+import { PageError } from 'deriv-components';
+
+const DummyComponent = (props) => (
+    <PageError
+        header='We couldn’t find that page'
+        messages={['Error Code: 404 page not found']}
+    />
+);
+```
+
+## Props
+
+| Name                            | Type                   | Default            | Description                                                                                                              |
+|---------------------------------|------------------------|--------------------|--------------------------------------------------------------------------------------------------------------------------|
+| header                          | {string \| node }      | null               |                                                                                                                          |
+| messages                        | {array}                | null               | Array of strings as error text                                                                                           |
+| image\_url                      | {string}               | null               | This image will be shown beside the error text                                                                           |
+| classNameImage                  | {string}               | null               |                                                                                                                          |
+| redirect\_label                 | {string}               | null               | Redirect button text                                                                                                     |
+| redirect\_url                   | {string}               | null               | Where you want to land user after clicking on redirect button                                                            |
+| setError                        | {function}             | null               | Function to remove error on the parent component                                                                         |
+| should\_clear\_error\_on_click  | {boolean}              | null               | Set it to true to disable error on parent component on redirec. `setError` must be defined                               |
+
+
+## Full example:
+
+```jsx
+import { PageError } from 'deriv-components';
+
+const DummyComponent = (props) => (
+    <PageError
+        header='We couldn’t find that page'
+        messages={props.messages}
+        classNameImage='may-class'
+        image_url={props.image_url}
+        redirect_label={props.redirect_label}
+        buttonOnClick={props.buttonOnClick}
+        redirect_url={props.redirect_url}
+    />
+);
+```

packages/components/stories/page-error/page-error.stories.js

@@ -0,0 +1,16 @@
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { withInfo } from '@storybook/addon-info';
+import Basic from './stories/basic';
+import HasImage from './stories/has-image';
+import HasRedirect from './stories/has-redirect';
+import notes from './README.md';
+import './styles.scss';
+
+const stories = storiesOf('PageError', module);
+
+stories.addDecorator(withKnobs).addDecorator(withInfo);
+
+stories.add('Basic usage', Basic, { notes });
+stories.add('Has image', HasImage, { notes });
+stories.add('Has redirect', HasRedirect, { notes });

packages/components/stories/page-error/stories/basic.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { boolean } from '@storybook/addon-knobs';
+import PageError from 'Components/page-error';
+import Wrapper from '../../shared/wrapper';
+
+const Basic = () => (
+    <Wrapper is_block is_full_width is_dark={boolean('Dark Theme', false)}>
+        <PageError
+            header='We couldn’t find that page'
+            messages={[
+                'You may have followed a broken link, or the page has moved to a new address.',
+                'Error Code: 404 page not found',
+            ]}
+        />
+    </Wrapper>
+);
+
+export default Basic;

packages/components/stories/page-error/stories/has-image.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { boolean } from '@storybook/addon-knobs';
+import PageError from 'Components/page-error';
+import Wrapper from '../../shared/wrapper';
+import image_404 from '../page-not-found.png';
+
+const HasImage = () => (
+    <Wrapper className='page-error-storybook' is_block is_full_width is_dark={boolean('Dark Theme', false)}>
+        <PageError
+            header='We couldn’t find that page'
+            classNameImage='page-error-storybook-image'
+            image_url={image_404}
+            messages={[
+                'You may have followed a broken link, or the page has moved to a new address.',
+                'Error Code: 404 page not found',
+            ]}
+        />
+    </Wrapper>
+);
+
+export default HasImage;

packages/components/stories/page-error/stories/has-redirect.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { routes } from '@deriv/shared';
+import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
+import PageError from 'Components/page-error';
+import Wrapper from '../../shared/wrapper';
+
+const Basic = () => (
+    <Router>
+        <Wrapper is_block is_full_width is_dark={boolean('Dark Theme', false)}>
+            <PageError
+                header='We couldn’t find that page'
+                messages={[
+                    'You may have followed a broken link, or the page has moved to a new address.',
+                    'Error Code: 404 page not found',
+                ]}
+                redirect_label='Return to Trade'
+                buttonOnClick={action('buttonOnClick')}
+                redirect_url={routes.trade}
+            />
+        </Wrapper>
+    </Router>
+);
+
+export default Basic;

packages/components/stories/page-error/styles.scss

@@ -0,0 +1,11 @@
+.page-error-storybook {
+    & .dc-page-error__container {
+        @media only screen and (max-width: 800px) {
+            flex-wrap: wrap;
+        }
+    }
+    &-image {
+        width: 400px;
+        height: auto;
+    }
+}

packages/components/stories/page-overlay/README.md

@@ -0,0 +1,48 @@
+# PageOverlay component
+To render a content in page overlay format use this component.
+
+## Usage
+
+```jsx
+import { PageOverlay } from 'deriv-components';
+
+const DummyComponent = (props) => (
+    <PageOverlay 
+        header={<h1>Page Header</h1>}
+    >
+        <div>
+            <p>Page content</p>
+        </div>
+    </PageOverlay>
+);
+```
+
+## Props
+
+| Name                     | Type                   | Default            | Description                                                                                                                                              |
+|--------------------------|------------------------|--------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
+| header                   | {string \| node }      | null               | Page header                                                                                                                                              |
+| id                       | {string}               | null               | Id of the main wrapper of the component                                                                                                                  |
+| portal_id                | {string}               | null               | If you want to render page in a react portal insert a dom's id                                                                                           |
+| is\_open                 | {boolean}              | null               | If there is a 'portal\_id', set this props to 'true' to open the portal using 'react-transition-group' plugin                                            |
+| onClickClose             | {function}             | null               | Calback function for clicking on close button in header if it's 'null' default function will change the page to previous location. (window.history.back) |
+
+## Full example:
+
+```jsx
+import { PageOverlay } from 'deriv-components';
+
+const DummyComponent = (props) => (
+    <PageOverlay 
+        header={<h1>Page Header</h1>}
+        id={props.id}
+        is_open={props.is_open}
+        onClickClose={pops.onClickClose}
+        portal_id={props.portal_id}
+    >
+        <div>
+            <p>Page content</p>
+        </div>
+    </PageOverlay>
+);
+```

packages/components/stories/page-overlay/page-overlay.stories.js

@@ -0,0 +1,11 @@
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { withInfo } from '@storybook/addon-info';
+import Basic from './stories/basic';
+import notes from './README.md';
+
+const stories = storiesOf('PageOverlay', module);
+
+stories.addDecorator(withKnobs).addDecorator(withInfo);
+
+stories.add('Basic usage', Basic, { notes });

packages/components/stories/page-overlay/stories/basic.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
+import PageOverlay from 'Components/page-overlay';
+import page_content from '../page-content';
+import Wrapper from '../../shared/wrapper';
+
+const Basic = () => (
+    <Wrapper is_dark={boolean('Dark Theme', false)}>
+        <PageOverlay header={<h1>Page Header</h1>} onClickClose={action('onClickClose')}>
+            <div>
+                <h2>Page content:</h2>
+                <p>{page_content}</p>
+            </div>
+        </PageOverlay>
+    </Wrapper>
+);
+
+export default Basic;

packages/components/stories/password-input/README.md

@@ -0,0 +1,42 @@
+# PasswordInput component
+To have a password type input use this component.
+
+#### Supported events:
+All events supported by an '\<input>' tag.
+
+## Usage
+
+```jsx
+import { PasswordInput } from 'deriv-components';
+
+const DummyComponent = (props) => (
+    <PasswordInput
+        label='New password'
+        name='new_password'
+    />
+);
+```
+
+## Props
+
+| Name                     | Type                   | Default            | Description                                                                                                              |
+|--------------------------|------------------------|--------------------|--------------------------------------------------------------------------------------------------------------------------|
+| label                    | {string}               | null               |                                                                                                                          |
+| name                     | {string}               | null               |                                                                                                                          |
+| error                    | {boolean}              | null               | If component has an error set this to 'true' to enable error styles                                                      |
+
+
+## Full example:
+
+```jsx
+import { PasswordInput } from 'deriv-components';
+
+const DummyComponent = (props) => (
+    <PasswordInput
+        label='New password'
+        name='new_password'
+        error={props.has_error}
+        onChange={props.onChange}
+    />
+);
+```

packages/components/stories/password-input/password-input.stories.js

@@ -0,0 +1,13 @@
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { withInfo } from '@storybook/addon-info';
+import Basic from './stories/basic';
+import HasError from './stories/has-error';
+import notes from './README.md';
+
+const stories = storiesOf('PasswordInput', module);
+
+stories.addDecorator(withKnobs).addDecorator(withInfo);
+
+stories.add('Basic usage', Basic, { notes });
+stories.add('Has error', HasError, { notes });