Merge fed7b00 into f5d6f1a

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Changed
 - [Core] `closable()` mixin is now triggered on `touchend` events on touch devices. (#176)
 - [Storybook] Update examples for `<Popover>` to add a row of hyperlink `<Button>`. (#176)
+- [Storybook] Split stories into different package-based sections. (#177)
 
 ## [1.9.0]
 ### Added

packages/storybook/.storybook/config.js

@@ -12,6 +12,7 @@ setOptions({
     name: 'iCHEF gypcrete',
     url: 'https://github.com/iCHEF/gypcrete',
     showDownPanel: true,
+    hierarchyRootSeparator: /\|/,
 });
 
 setDefaults({

packages/storybook/examples/Button/index.js → packages/storybook/examples/core/Button/index.js

@@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
 import Button, { PureButton } from '@ichef/gypcrete/src/Button';
+import getPropTables from 'utils/getPropTables';
 
 import BasicButtonExample from './BasicButton';
 import SolidButtonExample from './SolidButton';
@@ -10,9 +11,7 @@ import ExpandedButtonExample from './ExpandedButton';
 import ButtonWithStatusExample from './ButtonWithStatus';
 import CustomTagButtonExample from './CustomTagButton';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('Button', module)
+storiesOf('@ichef/gypcrete|Button', module)
     .add('basic usage',
         withInfo()(BasicButtonExample)
     )

packages/storybook/examples/Checkbox/index.js → packages/storybook/examples/core/Checkbox/index.js

@@ -3,14 +3,13 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
 import Checkbox, { PureCheckbox } from '@ichef/gypcrete/src/Checkbox';
+import getPropTables from 'utils/getPropTables';
 
 import BasicCheckboxExample from './BasicCheckbox';
 import CheckboxWithIndeterminateExample from './CheckboxWithIndeterminate';
 import CheckboxWithStatusExample from './CheckboxWithStatus';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('Checkbox', module)
+storiesOf('@ichef/gypcrete|Checkbox', module)
     .add('basic usage',
         withInfo()(BasicCheckboxExample)
     )

packages/storybook/examples/ColumnView/index.js → packages/storybook/examples/core/ColumnView/index.js

@@ -2,11 +2,10 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
 import ColumnView from '@ichef/gypcrete/src/ColumnView';
+import getPropTables from 'utils/getPropTables';
 import BasicUsage from './BasicUsage';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('ColumnView', module)
+storiesOf('@ichef/gypcrete|ColumnView', module)
     .add('basic usage',
         withInfo()(BasicUsage)
     )

packages/storybook/examples/EditableText/index.js → packages/storybook/examples/core/EditableText/index.js

@@ -2,14 +2,13 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
 import EditableText, { PureEditableText } from '@ichef/gypcrete/src/EditableText';
+import getPropTables from 'utils/getPropTables';
 
 import BasicUsage from './BasicUsage';
 import Alignments from './Alignments';
 import MultiLines from './MultiLines';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('EditableText', module)
+storiesOf('@ichef/gypcrete|EditableText', module)
     .add('Basic usage',
         withInfo()(BasicUsage)
     )

packages/storybook/examples/HeaderRow/index.js → packages/storybook/examples/core/HeaderRow/index.js

@@ -2,14 +2,12 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
 import HeaderRow from '@ichef/gypcrete/src/HeaderRow';
+import getPropTables from 'utils/getPropTables';
 
 import BasicUsage from './BasicUsage';
 import OptionalArea from './OptionalArea';
 
-import getPropTables from '../../utils/getPropTables';
-
-
-storiesOf('HeaderRow', module)
+storiesOf('@ichef/gypcrete|HeaderRow', module)
     .add('Basic usage', withInfo()(BasicUsage))
     .add(
         'Optional area',

packages/storybook/examples/Icon/index.js → packages/storybook/examples/core/Icon/index.js

@@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
 import Icon from '@ichef/gypcrete/src/Icon';
+import getPropTables from 'utils/getPropTables';
 
 import BasicIconsSet from './BasicIcons';
 import PaymentIconsSet from './PaymentIcons';
@@ -14,9 +15,7 @@ import InlineIconsSet from './InlineIcons';
 import LargeIconExample from './LargeIcon';
 import IconColorsExample from './IconColors';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('Icon', module)
+storiesOf('@ichef/gypcrete|Icon', module)
     .add('basic icons set',
         withInfo()(BasicIconsSet)
     )

packages/storybook/examples/IconButton/index.js → packages/storybook/examples/core/IconButton/index.js

@@ -2,13 +2,12 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
 import IconButton from '@ichef/gypcrete/src/IconButton';
+import getPropTables from 'utils/getPropTables';
 
 import BasicIconButtonExample from './BasicIconButton';
 import IconButtonWithStatusExample from './IconButtonWithStatus';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('IconButton', module)
+storiesOf('@ichef/gypcrete|IconButton', module)
     .add('basic usage',
         withInfo('IconButton is a variant of `<Button>`.')(
             BasicIconButtonExample

packages/storybook/examples/IconCheckbox/index.js → packages/storybook/examples/core/IconCheckbox/index.js

@@ -1,15 +1,13 @@
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
-// For props table
 import IconCheckbox from '@ichef/gypcrete/src/IconCheckbox';
+import getPropTables from 'utils/getPropTables';
 
 import BasicIconCheckboxExample from './BasicIconCheckbox';
 import IconCheckboxWithStatusExample from './IconCheckboxWithStatus';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('IconCheckbox', module)
+storiesOf('@ichef/gypcrete|IconCheckbox', module)
     .add('basic usage',
         withInfo('IconCheckbox is a variant of `<Checkbox>`')(
             BasicIconCheckboxExample

packages/storybook/examples/InfiniteScroll/index.js → packages/storybook/examples/core/InfiniteScroll/index.js

@@ -3,13 +3,12 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
 import InfiniteScroll from '@ichef/gypcrete/src/InfiniteScroll';
+import getPropTables from 'utils/getPropTables';
 
 import BasicUsageExample from './BasicUsage';
 import PageAsContainerExample from './PageAsContainer';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('InfiniteScroll')
+storiesOf('@ichef/gypcrete|InfiniteScroll', module)
     .add('basic usage',
         withInfo('placed in a fixed height container')(
             () => <BasicUsageExample />

packages/storybook/examples/List/index.js → packages/storybook/examples/core/List/index.js

@@ -4,14 +4,13 @@ import { withInfo } from '@storybook/addon-info';
 // For props table
 import List from '@ichef/gypcrete/src/List';
 import ListRow from '@ichef/gypcrete/src/ListRow';
+import getPropTables from 'utils/getPropTables';
 
 import NormalList from './NormalList';
 import SettingList from './SettingList';
 import NestedList from './NestedList';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('List', module)
+storiesOf('@ichef/gypcrete|List', module)
     .add('Normal list',
         withInfo()(NormalList)
     )

packages/storybook/examples/Modal/index.js → packages/storybook/examples/core/Modal/index.js

@@ -3,11 +3,11 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
 import Modal, { PureModal } from '@ichef/gypcrete/src/Modal';
+import getPropTables from 'utils/getPropTables';
 
 import BasicModalExample, { ClosableModalExample } from './BasicModal';
-import getPropTables from '../../utils/getPropTables';
 
-storiesOf('Modal', module)
+storiesOf('@ichef/gypcrete|Modal', module)
     .add(
         'basic usage',
         withInfo()(() => (

packages/storybook/examples/Popover/index.js → packages/storybook/examples/core/Popover/index.js

@@ -2,15 +2,13 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
-// For props table
 import Popover, { PurePopover } from '@ichef/gypcrete/src/Popover';
+import getPropTables from 'utils/getPropTables';
 
 import BasicExample from './Basic';
 import AnchoredExample from './Anchored';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('Popover', module)
+storiesOf('@ichef/gypcrete|Popover', module)
     .add('basic usage', withInfo()(BasicExample))
     .add(
         'anchored popover',

packages/storybook/examples/Popup/index.js → packages/storybook/examples/core/Popup/index.js

@@ -1,15 +1,13 @@
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
-// For props table
 import Popup, { PurePopup } from '@ichef/gypcrete/src/Popup';
+import getPropTables from 'utils/getPropTables';
 
 import BasicPopupExample from './BasicPopup';
 import HorizontalButtonsExample from './HorizontalButtons';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('Popup', module)
+storiesOf('@ichef/gypcrete|Popup', module)
     .add('basic usage', withInfo()(BasicPopupExample))
     .add('horizontal buttons', withInfo()(HorizontalButtonsExample))
     // Props table

packages/storybook/examples/SearchInput/index.js → packages/storybook/examples/core/SearchInput/index.js

@@ -1,13 +1,12 @@
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
-// For props table
 import SearchInput, { PureSearchInput } from '@ichef/gypcrete/src/SearchInput';
+import getPropTables from 'utils/getPropTables';
 
 import BasicSearchInputExample from './BasicSearchInput';
-import getPropTables from '../../utils/getPropTables';
 
-storiesOf('SearchInput', module)
+storiesOf('@ichef/gypcrete|SearchInput', module)
     .add('basic usage',
         withInfo()(BasicSearchInputExample)
     )

packages/storybook/examples/Section/index.js → packages/storybook/examples/core/Section/index.js

@@ -3,12 +3,12 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
 import Section from '@ichef/gypcrete/src/Section';
+
+import getPropTables from 'utils/getPropTables';
 import DebugBox from 'utils/DebugBox';
 import DemoContent from './DemoContent';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('Section', module)
+storiesOf('@ichef/gypcrete|Section', module)
     .add('Plain section', withInfo('Plain <Section> with spacing around container')(() => (
         <DebugBox>
             <Section>

packages/storybook/examples/StatusIcon/index.js → packages/storybook/examples/core/StatusIcon/index.js

@@ -1,15 +1,13 @@
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
-// For props table
 import StatusIcon from '@ichef/gypcrete/src/StatusIcon';
+import getPropTables from 'utils/getPropTables';
 
 import BasicStatusIconExample from './BasicStatusIcon';
 import CornerStatusIconExample from './CornerStatusIcon';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('StatusIcon', module)
+storiesOf('@ichef/gypcrete|StatusIcon', module)
     .add('basic usage',
         withInfo()(BasicStatusIconExample)
     )

packages/storybook/examples/SwichIcon/index.js → packages/storybook/examples/core/SwichIcon/index.js

@@ -2,11 +2,10 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
 import SwitchIcon from '@ichef/gypcrete/src/SwitchIcon';
+import getPropTables from 'utils/getPropTables';
 import BasicUsage from './BasicUsage';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('SwitchIcon', module)
+storiesOf('@ichef/gypcrete|SwitchIcon', module)
     .add('Basic usage',
         withInfo(
             `A <SwitchIcon> is a visual element that is supposed

packages/storybook/examples/Switch/index.js → packages/storybook/examples/core/Switch/index.js

@@ -2,15 +2,14 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
 import Switch, { PureSwitch } from '@ichef/gypcrete/src/Switch';
+import getPropTables from 'utils/getPropTables';
 
 import BasicUsage from './BasicUsage';
 import ControlledInput from './ControlledInput';
 import WithStatus from './WithStatus';
 import InputProps from './InputProps';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('Switch', module)
+storiesOf('@ichef/gypcrete|Switch', module)
     .add('Basic usage',
         withInfo(
             `A <Switch> is a row component which can be turned either on

packages/storybook/examples/Tag/index.js → packages/storybook/examples/core/Tag/index.js

@@ -1,15 +1,13 @@
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
-// For props table
 import Tag from '@ichef/gypcrete/src/Tag';
+import getPropTables from 'utils/getPropTables';
 
 import BasicTagExample from './BasicTag';
 import TagWithParentColorExample from './TagWithParentColor';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('Tag', module)
+storiesOf('@ichef/gypcrete|Tag', module)
     .add('basic usage',
         withInfo()(BasicTagExample)
     )

packages/storybook/examples/Text/index.js → packages/storybook/examples/core/Text/index.js

@@ -1,16 +1,14 @@
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
-// For props table
 import Text, { PureText } from '@ichef/gypcrete/src/Text';
+import getPropTables from 'utils/getPropTables';
 
 import BasicTextExample from './BasicText';
 import EllipsisExample from './Ellipsis';
 import TextWithStatusIconExample from './TextWithStatusIcon';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('Text', module)
+storiesOf('@ichef/gypcrete|Text', module)
     .add('basic usage',
         withInfo()(BasicTextExample)
     )

packages/storybook/examples/TextInput/index.js → packages/storybook/examples/core/TextInput/index.js

@@ -1,16 +1,14 @@
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
-// For props table
 import TextInput, { PureTextInput } from '@ichef/gypcrete/src/TextInput';
+import getPropTables from 'utils/getPropTables';
 
 import BasicUsage from './BasicUsage';
 import WithStatus from './WithStatus';
 import MultiLines from './MultiLines';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('TextInput', module)
+storiesOf('@ichef/gypcrete|TextInput', module)
     .add('Basic usage',
         withInfo()(BasicUsage)
     )

packages/storybook/examples/TextLabel/index.js → packages/storybook/examples/core/TextLabel/index.js

@@ -2,15 +2,14 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
 import TextLabel, { PureTextLabel } from '@ichef/gypcrete/src/TextLabel';
+import getPropTables from 'utils/getPropTables';
 
 import BasicTextLabelExample from './BasicTextLabel';
 import TextLabelWithStatusExample from './TextLabelWithStatus';
 import TextLabelWithTextExample from './TextLabelWithText';
 import Editable from './Editable';
 
-import getPropTables from '../../utils/getPropTables';
-
-storiesOf('TextLabel', module)
+storiesOf('@ichef/gypcrete|TextLabel', module)
     .add('basic usage',
         withInfo()(BasicTextLabelExample)
     )