iCHEF · kyoyadmoon · Dec 18, 2023 · Dec 12, 2023 · Dec 12, 2023
diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js
@@ -1,4 +1,8 @@
 module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
+
   stories: [
     '../examples/**/*.stories.(js|mdx)',
     '../examples/**/index.js',

diff --git a/packages/storybook/examples/core/Avatar.stories.js b/packages/storybook/examples/core/Avatar.stories.js
@@ -4,7 +4,7 @@ import Avatar from '@ichef/gypcrete/src/Avatar';
 import FlexRow from 'utils/FlexRow';
 
 export default {
-  title: '@ichef/gypcrete|Avatar',
+  title: 'gypcrete/Avatar',
   component: Avatar,
 };
 

diff --git a/packages/storybook/examples/core/Button.stories.js b/packages/storybook/examples/core/Button.stories.js
@@ -5,7 +5,7 @@ import Button, { PureButton } from '@ichef/gypcrete/src/Button';
 import FlexRow from 'utils/FlexRow';
 
 export default {
-  title: '@ichef/gypcrete|Button',
+  title: 'gypcrete/Button',
   component: PureButton,
   subcomponents: {
     'rowComp()': Button,

diff --git a/packages/storybook/examples/core/Checkbox.stories.js b/packages/storybook/examples/core/Checkbox.stories.js
@@ -4,7 +4,7 @@ import Avatar from '@ichef/gypcrete/src/Avatar';
 import DebugBox from 'utils/DebugBox';
 
 export default {
-  title: '@ichef/gypcrete|Checkbox',
+  title: 'gypcrete/Checkbox',
   component: PureCheckbox,
   subcomponents: {
     'rowComp()': Checkbox,

diff --git a/packages/storybook/examples/core/ColumnView.stories.js b/packages/storybook/examples/core/ColumnView.stories.js
@@ -9,7 +9,7 @@ import List from '@ichef/gypcrete/src/List';
 import ListRow from '@ichef/gypcrete/src/ListRow';
 
 export default {
-  title: '@ichef/gypcrete|ColumnView',
+  title: 'gypcrete/ColumnView',
   component: ColumnView,
 };
 

diff --git a/packages/storybook/examples/core/EditableText.stories.js b/packages/storybook/examples/core/EditableText.stories.js
@@ -6,7 +6,7 @@ import { PureText } from '@ichef/gypcrete/src/Text';
 import DebugBox from 'utils/DebugBox';
 
 export default {
-  title: '@ichef/gypcrete|EditableText',
+  title: 'gypcrete/EditableText',
   component: PureEditableText,
   subcomponents: {
     PureText,

diff --git a/packages/storybook/examples/core/EditableTextLabel.stories.js b/packages/storybook/examples/core/EditableTextLabel.stories.js
@@ -7,7 +7,7 @@ import TextLabel from '@ichef/gypcrete/src/TextLabel';
 import DebugBox from 'utils/DebugBox';
 
 export default {
-  title: '@ichef/gypcrete|EditableTextLabel',
+  title: 'gypcrete/EditableTextLabel',
   component: EditableTextLabel,
   subcomponents: { TextLabel },
 };

diff --git a/packages/storybook/examples/core/HeaderRow.stories.js b/packages/storybook/examples/core/HeaderRow.stories.js
@@ -8,7 +8,7 @@ import TextEllipsis from '@ichef/gypcrete/src/TextEllipsis';
 import DebugBox from 'utils/DebugBox';
 
 export default {
-  title: '@ichef/gypcrete|HeaderRow',
+  title: 'gypcrete/HeaderRow',
   component: HeaderRow,
   subcomponents: {
     HeaderArea,

diff --git a/packages/storybook/examples/core/Icon.stories.js b/packages/storybook/examples/core/Icon.stories.js
@@ -5,7 +5,7 @@ import Icon from '@ichef/gypcrete/src/Icon';
 import iconMap from '@ichef/gypcrete/src/icons/components';
 
 export default {
-  title: '@ichef/gypcrete|Icon',
+  title: 'gypcrete/Icon',
   component: Icon,
 };
 

diff --git a/packages/storybook/examples/core/IconButton.stories.js b/packages/storybook/examples/core/IconButton.stories.js
@@ -5,7 +5,7 @@ import IconButton from '@ichef/gypcrete/src/IconButton';
 import FlexRow from 'utils/FlexRow';
 
 export default {
-  title: '@ichef/gypcrete|IconButton',
+  title: 'gypcrete/IconButton',
   component: IconButton,
   subcomponents: {
     Button,

diff --git a/packages/storybook/examples/core/IconCheckbox.stories.js b/packages/storybook/examples/core/IconCheckbox.stories.js
@@ -5,7 +5,7 @@ import IconCheckbox from '@ichef/gypcrete/src/IconCheckbox';
 import FlexRow from 'utils/FlexRow';
 
 export default {
-  title: '@ichef/gypcrete|IconCheckbox',
+  title: 'gypcrete/IconCheckbox',
   component: IconCheckbox,
   subcomponents: {
     Checkbox,

diff --git a/packages/storybook/examples/core/InfiniteScroll.stories.js b/packages/storybook/examples/core/InfiniteScroll.stories.js
@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
 import InfiniteScroll from '@ichef/gypcrete/src/InfiniteScroll';
 
 export default {
-  title: '@ichef/gypcrete|InfiniteScroll',
+  title: 'gypcrete/InfiniteScroll',
   component: InfiniteScroll,
 };
 

diff --git a/packages/storybook/examples/core/List.stories.js b/packages/storybook/examples/core/List.stories.js
@@ -14,7 +14,7 @@ import TextLabel from '@ichef/gypcrete/src/TextLabel';
 import DebugBox from 'utils/DebugBox';
 
 export default {
-  title: '@ichef/gypcrete|List',
+  title: 'gypcrete/List',
   component: List,
   subcomponents: { ListRow, Section },
 };

diff --git a/packages/storybook/examples/core/Modal.stories.js b/packages/storybook/examples/core/Modal.stories.js
@@ -11,7 +11,7 @@ import TextLabel from '@ichef/gypcrete/src/TextLabel';
 import { ContainsColumnView } from './SplitView.stories';
 
 export default {
-  title: '@ichef/gypcrete|Modal',
+  title: 'gypcrete/Modal',
   component: PureModal,
   subcomponents: {
     'renderToLayer()': Modal,

diff --git a/packages/storybook/examples/core/Popover.stories.js b/packages/storybook/examples/core/Popover.stories.js
@@ -7,7 +7,7 @@ import List from '@ichef/gypcrete/src/List';
 import ListRow from '@ichef/gypcrete/src/ListRow';
 
 export default {
-  title: '@ichef/gypcrete|Popover',
+  title: 'gypcrete/Popover',
   component: PurePopover,
   subcomponents: {
     'renderToLayer(closable(anchored(Popover))': Popover,

diff --git a/packages/storybook/examples/core/Popup.stories.js b/packages/storybook/examples/core/Popup.stories.js
@@ -9,7 +9,7 @@ import Checkbox from '@ichef/gypcrete/src/Checkbox';
 const reactLogoImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K';
 
 export default {
-  title: '@ichef/gypcrete|Popup',
+  title: 'gypcrete/Popup',
   component: PurePopup,
   subcomponents: {
     'renderToLayer()': Popup,

diff --git a/packages/storybook/examples/core/Radio.stories.js b/packages/storybook/examples/core/Radio.stories.js
@@ -4,7 +4,7 @@ import Avatar from '@ichef/gypcrete/src/Avatar';
 import DebugBox from 'utils/DebugBox';
 
 export default {
-  title: '@ichef/gypcrete|Radio',
+  title: 'gypcrete/Radio',
   component: PureRadio,
   subcomponents: {
     'rowComp()': Radio,

diff --git a/packages/storybook/examples/core/SearchInput.stories.js b/packages/storybook/examples/core/SearchInput.stories.js
@@ -5,7 +5,7 @@ import SearchInput, { PureSearchInput } from '@ichef/gypcrete/src/SearchInput';
 import DebugBox from 'utils/DebugBox';
 
 export default {
-  title: '@ichef/gypcrete|SearchInput',
+  title: 'gypcrete/SearchInput',
   component: PureSearchInput,
   subcomponents: {
     'rowComp()': SearchInput,

diff --git a/packages/storybook/examples/core/Section.stories.js b/packages/storybook/examples/core/Section.stories.js
@@ -5,7 +5,7 @@ import Section from '@ichef/gypcrete/src/Section';
 import DebugBox from 'utils/DebugBox';
 
 export default {
-  title: '@ichef/gypcrete|Section',
+  title: 'gypcrete/Section',
   component: Section,
 };
 

diff --git a/packages/storybook/examples/core/SplitView.stories.js b/packages/storybook/examples/core/SplitView.stories.js
@@ -41,7 +41,7 @@ function DemoColumnView({ children, ...props }) {
 }
 
 export default {
-  title: '@ichef/gypcrete|SplitView',
+  title: 'gypcrete/SplitView',
   component: SplitView,
   subcomponents: { SplitViewColumn },
   decorators: [debugDecorator],

diff --git a/packages/storybook/examples/core/StatusIcon.stories.js b/packages/storybook/examples/core/StatusIcon.stories.js
@@ -7,7 +7,7 @@ import DebugBox from 'utils/DebugBox';
 import FlexRow from 'utils/FlexRow';
 
 export default {
-  title: '@ichef/gypcrete|StatusIcon',
+  title: 'gypcrete/StatusIcon',
   component: StatusIcon,
 };
 

diff --git a/packages/storybook/examples/core/Switch.stories.js b/packages/storybook/examples/core/Switch.stories.js
@@ -5,7 +5,7 @@ import DebugBox from 'utils/DebugBox';
 
 
 export default {
-  title: '@ichef/gypcrete|Switch',
+  title: 'gypcrete/Switch',
   component: PureSwitch,
   subcomponents: {
     'rowComp()': Switch,

diff --git a/packages/storybook/examples/core/SwitchIcon.stories.js b/packages/storybook/examples/core/SwitchIcon.stories.js
@@ -3,7 +3,7 @@ import SwitchIcon from '@ichef/gypcrete/src/SwitchIcon';
 
 
 export default {
-  title: '@ichef/gypcrete|SwitchIcon',
+  title: 'gypcrete/SwitchIcon',
   component: SwitchIcon,
 };
 

diff --git a/packages/storybook/examples/core/Tag.stories.js b/packages/storybook/examples/core/Tag.stories.js
@@ -3,7 +3,7 @@ import React from 'react';
 import Tag from '@ichef/gypcrete/src/Tag';
 
 export default {
-  title: '@ichef/gypcrete|Tag',
+  title: 'gypcrete/Tag',
   component: Tag,
 };
 

diff --git a/packages/storybook/examples/core/Text.stories.js b/packages/storybook/examples/core/Text.stories.js
@@ -7,7 +7,7 @@ import TextEllipsis from '@ichef/gypcrete/src/TextEllipsis';
 import DebugBox from 'utils/DebugBox';
 
 export default {
-  title: '@ichef/gypcrete|Text',
+  title: 'gypcrete/Text',
   component: PureText,
   subcomponents: { 'withStatus()': Text },
 };

diff --git a/packages/storybook/examples/core/TextInput.stories.js b/packages/storybook/examples/core/TextInput.stories.js
@@ -5,7 +5,7 @@ import TextInput, { PureTextInput } from '@ichef/gypcrete/src/TextInput';
 import DebugBox from 'utils/DebugBox';
 
 export default {
-  title: '@ichef/gypcrete|TextInput',
+  title: 'gypcrete/TextInput',
   component: PureTextInput,
   subcomponents: {
     'rowComp()': TextInput,

diff --git a/packages/storybook/examples/core/TextLabel.stories.js b/packages/storybook/examples/core/TextLabel.stories.js
@@ -7,7 +7,7 @@ import TextLabel, { PureTextLabel } from '@ichef/gypcrete/src/TextLabel';
 import DebugBox from 'utils/DebugBox';
 
 export default {
-  title: '@ichef/gypcrete|TextLabel',
+  title: 'gypcrete/TextLabel',
   component: PureTextLabel,
   subcomponents: {
     'rowComp()': TextLabel,

diff --git a/packages/storybook/examples/core/Tooltip.stories.js b/packages/storybook/examples/core/Tooltip.stories.js
@@ -3,7 +3,7 @@ import React, { useState, useRef } from 'react';
 import Tooltip, { PureTooltip } from '@ichef/gypcrete/src/Tooltip';
 
 export default {
-  title: '@ichef/gypcrete|Tooltip',
+  title: 'gypcrete/Tooltip',
   component: PureTooltip,
   subcomponents: {
     'renderToLayer(anchored({})': Tooltip,

diff --git a/packages/storybook/examples/form/RadioSelectList.stories.js b/packages/storybook/examples/form/RadioSelectList.stories.js
@@ -5,7 +5,7 @@ import RadioSelectList from '@ichef/gypcrete-form/src/RadioSelectList';
 import RadioSelectOption from '@ichef/gypcrete-form/src/RadioSelectOption';
 
 export default {
-  title: '@ichef/gypcrete-form|RadioSelectList',
+  title: 'gypcrete-form/RadioSelectList',
   component: RadioSelectList,
   subcomponents: { RadioSelectOption },
 };

diff --git a/packages/storybook/examples/form/SelectList.stories.js b/packages/storybook/examples/form/SelectList.stories.js
@@ -5,7 +5,7 @@ import SelectList from '@ichef/gypcrete-form/src/SelectList';
 import SelectOption from '@ichef/gypcrete-form/src/SelectOption';
 
 export default {
-  title: '@ichef/gypcrete-form|SelectList',
+  title: 'gypcrete-form/SelectList',
   component: SelectList,
   subcomponents: { SelectOption },
 };

diff --git a/packages/storybook/examples/form/SelectRow.stories.js b/packages/storybook/examples/form/SelectRow.stories.js
@@ -7,7 +7,7 @@ import SelectRow, { PureSelectRow } from '@ichef/gypcrete-form/src/SelectRow';
 import SelectOption from '@ichef/gypcrete-form/src/SelectOption';
 
 export default {
-  title: '@ichef/gypcrete-form|SelectRow',
+  title: 'gypcrete-form/SelectRow',
   component: PureSelectRow,
   subcomponents: {
     'formRow()': SelectRow,

diff --git a/packages/storybook/examples/form/SwitchRow.stories.js b/packages/storybook/examples/form/SwitchRow.stories.js
@@ -5,7 +5,7 @@ import { PureSwitch } from '@ichef/gypcrete/src/Switch';
 import SwitchRow, { PureSwitchRow } from '@ichef/gypcrete-form/src/SwitchRow';
 
 export default {
-  title: '@ichef/gypcrete-form|SwitchRow',
+  title: 'gypcrete-form/SwitchRow',
   component: PureSwitchRow,
   subcomponents: {
     'formRow()': SwitchRow,

diff --git a/packages/storybook/examples/form/TextInputRow.stories.js b/packages/storybook/examples/form/TextInputRow.stories.js
@@ -6,7 +6,7 @@ import { PureTextInput } from '@ichef/gypcrete/src/TextInput';
 import TextInputRow, { PureTextInputRow } from '@ichef/gypcrete-form/src/TextInputRow';
 
 export default {
-  title: '@ichef/gypcrete-form|TextInputRow',
+  title: 'gypcrete-form/TextInputRow',
   component: PureTextInputRow,
   subcomponents: {
     'formRow()': TextInputRow,

diff --git a/packages/storybook/examples/imageeditor/ImageEditor/index.stories.js b/packages/storybook/examples/imageeditor/ImageEditor/index.stories.js
@@ -8,7 +8,7 @@ import handleCropChange from './utils/handleCropChange';
 const EXAMPLE_IMAGE = 'https://i.imgur.com/VfBVxsO.jpg';
 
 export default {
-  title: '@ichef/gypcrete-imageeditor|ImageEditor',
+  title: 'gypcrete-imageeditor/ImageEditor',
   component: ImageEditor,
   subcomponents: { AvatarEditor },
 };

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -23,12 +23,12 @@
     "@ichef/gypcrete": "^6.1.0",
     "@ichef/gypcrete-form": "^6.1.0",
     "@ichef/gypcrete-imageeditor": "^6.1.0",
-    "@storybook/addon-actions": "^5.3.2",
-    "@storybook/addon-docs": "^5.3.2",
-    "@storybook/addon-info": "^5.3.2",
-    "@storybook/addon-options": "^5.3.2",
-    "@storybook/addons": "^5.3.2",
-    "@storybook/react": "^5.3.2",
+    "@storybook/builder-webpack5": "^6.5.12",
+    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-docs": "^6.5.12",
+    "@storybook/addons": "^6.5.12",
+    "@storybook/react": "^6.5.12",
     "autoprefixer": "^7.2.5",
     "mini-css-extract-plugin": "^2.7.6",
     "prop-types": "^15.6.2",

diff --git a/packages/storybook/utils/getComponentProps.js b/packages/storybook/utils/getComponentProps.js
@@ -1,4 +1,4 @@
-import { extractProps } from '@storybook/addon-docs/dist/frameworks/react/extractProps';
+import { extractProps } from '@storybook/addon-docs';
 
 function formatValue(value) {
   switch (typeof value) {

diff --git a/packages/storybook/utils/getPropTables.js b/packages/storybook/utils/getPropTables.js