diff --git a/.babelrc.js b/.babelrc.js new file mode 100644 index 000000000..a56f5e9eb --- /dev/null +++ b/.babelrc.js @@ -0,0 +1,3 @@ +module.exports = { + plugins: ['babel-plugin-named-exports-order'], +}; diff --git a/package.json b/package.json index ca71d2ca4..c2211ce28 100644 --- a/package.json +++ b/package.json @@ -120,6 +120,7 @@ "babel-jest": "27.4.2", "babel-loader": "8.2.3", "babel-plugin-named-asset-import": "0.3.8", + "babel-plugin-named-exports-order": "0.0.2", "babel-preset-react-app": "10.0.1", "bfj": "7.0.2", "browserslist": "4.18.1", diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx index 665b65a46..dc7bad34b 100644 --- a/src/components/Accordion/Accordion.stories.tsx +++ b/src/components/Accordion/Accordion.stories.tsx @@ -82,19 +82,20 @@ const Single_Story: ComponentStory = (args) => ( ); -export const Single = Single_Story.bind({}); - -const List_Vertical_Story: ComponentStory = (args) => ( - -); - -export const List_Vertical = List_Vertical_Story.bind({}); +const List_Story: ComponentStory = (args) => ; -const List_Horizontal_Story: ComponentStory = (args) => ( - -); +export const Single = Single_Story.bind({}); +export const List_Vertical = List_Story.bind({}); +export const List_Horizontal = List_Story.bind({}); -export const List_Horizontal = List_Horizontal_Story.bind({}); +// Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports, +// this line ensures they are exported in the desired order. +// See https://www.npmjs.com/package/babel-plugin-named-exports-order +export const __namedExportsOrder = [ + 'Single', + 'List_Vertical', + 'List_Horizontal', +]; Single.args = { children: ( diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx index ea9eebd2f..41eb065b5 100644 --- a/src/components/Avatar/Avatar.stories.tsx +++ b/src/components/Avatar/Avatar.stories.tsx @@ -47,42 +47,22 @@ const imageProps = { alt: 'random profile image', }; -const Avatar_Default_Story: ComponentStory = (args) => ( +const Avatar_Story: ComponentStory = (args) => ( ); -export const Avatar_Default = Avatar_Default_Story.bind({}); - -const Avatar_Icon_Story: ComponentStory = (args) => ( - -); - -export const Avatar_Icon = Avatar_Icon_Story.bind({}); - const Avatar_Round_Story: ComponentStory = (args) => ( ); -export const Avatar_Round = Avatar_Round_Story.bind({}); - -const Avatar_Round_Icon_Story: ComponentStory = (args) => ( - -); - -export const Avatar_Round_Icon = Avatar_Round_Icon_Story.bind({}); - const Avatar_Fallback_Theme_Story: ComponentStory = (args) => ( ); -export const Avatar_Fallback_Theme = Avatar_Fallback_Theme_Story.bind({}); - const Avatar_Fallback_Hashing_Story: ComponentStory = (args) => ( 3} /> ); -export const Avatar_Fallback_Hashing = Avatar_Fallback_Hashing_Story.bind({}); - const Avatar_StatusItem_Story: ComponentStory = (args) => { const avatarSize = 100; const [statusItemSize] = getStatusItemSizeAndPadding(avatarSize); @@ -230,14 +210,33 @@ const Avatar_StatusItem_Story: ComponentStory = (args) => { ); }; -export const Avatar_StatusItem = Avatar_StatusItem_Story.bind({}); - const Avatar_Tooltip_Story: ComponentStory = (args) => ( ); +export const Avatar_Default = Avatar_Story.bind({}); +export const Avatar_Icon = Avatar_Story.bind({}); +export const Avatar_Round = Avatar_Round_Story.bind({}); +export const Avatar_Round_Icon = Avatar_Story.bind({}); +export const Avatar_Fallback_Theme = Avatar_Fallback_Theme_Story.bind({}); +export const Avatar_Fallback_Hashing = Avatar_Fallback_Hashing_Story.bind({}); +export const Avatar_StatusItem = Avatar_StatusItem_Story.bind({}); export const Avatar_Tooltip = Avatar_Tooltip_Story.bind({}); +// Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports, +// this line ensures they are exported in the desired order. +// See https://www.npmjs.com/package/babel-plugin-named-exports-order +export const __namedExportsOrder = [ + 'Avatar_Default', + 'Avatar_Icon', + 'Avatar_Round', + 'Avatar_Round_Icon', + 'Avatar_Fallback_Theme', + 'Avatar_Fallback_Hashing', + 'Avatar_StatusItem', + 'Avatar_Tooltip', +]; + const avatarArgs: Object = { children: 'JD', classNames: 'my-avatar-class', diff --git a/src/components/Avatar/AvatarGroup.stories.tsx b/src/components/Avatar/AvatarGroup.stories.tsx index 6f427f819..30ff08eb4 100644 --- a/src/components/Avatar/AvatarGroup.stories.tsx +++ b/src/components/Avatar/AvatarGroup.stories.tsx @@ -198,12 +198,6 @@ const Basic_Story: ComponentStory = (args) => ( ); -export const Basic = Basic_Story.bind({}); - -export const Basic_Spaced = Basic_Story.bind({}); - -export const Basic_Max_Props_Exceed_Children = Basic_Story.bind({}); - const List_Story: ComponentStory = (args) => ( = (args) => ( /> ); +export const Basic = Basic_Story.bind({}); +export const Basic_Spaced = Basic_Story.bind({}); +export const Basic_Max_Props_Exceed_Children = Basic_Story.bind({}); export const List_Group = List_Story.bind({}); - export const List_Group_Spaced = List_Story.bind({}); - export const List_Group_Max_Props_Exceed_Children = List_Story.bind({}); +// Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports, +// this line ensures they are exported in the desired order. +// See https://www.npmjs.com/package/babel-plugin-named-exports-order +export const __namedExportsOrder = [ + 'Basic', + 'Basic_Spaced', + 'Basic_Max_Props_Exceed_Children', + 'List_Group', + 'List_Group_Spaced', + 'List_Group_Max_Props_Exceed_Children', +]; + const avatarGroupArgs: Object = { classNames: 'my-avatar-group-class', 'data-test-id': 'my-avatar-group-test-id', diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx index cc7bef429..a41668eaf 100644 --- a/src/components/Badge/Badge.stories.tsx +++ b/src/components/Badge/Badge.stories.tsx @@ -28,23 +28,20 @@ export default { }, } as ComponentMeta; -const Badge_Default_Story: ComponentStory = (args) => ( - -); +const Badge_Story: ComponentStory = (args) => ; -export const Badge_Default = Badge_Default_Story.bind({}); +export const Badge_Default = Badge_Story.bind({}); +export const Badge_Active = Badge_Story.bind({}); +export const Badge_Disruptive = Badge_Story.bind({}); -const Badge_Active_Story: ComponentStory = (args) => ( - -); - -export const Badge_Active = Badge_Active_Story.bind({}); - -const Badge_Disruptive_Story: ComponentStory = (args) => ( - -); - -export const Badge_Disruptive = Badge_Disruptive_Story.bind({}); +// Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports, +// this line ensures they are exported in the desired order. +// See https://www.npmjs.com/package/babel-plugin-named-exports-order +export const __namedExportsOrder = [ + 'Badge_Default', + 'Badge_Active', + 'Badge_Disruptive', +]; const badgeArgs: Object = { active: false, diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx index 39d2dc6f4..a963112e0 100644 --- a/src/components/Button/Button.stories.tsx +++ b/src/components/Button/Button.stories.tsx @@ -179,6 +179,23 @@ export const Split = Button_Story.bind({}); export const Split_With_Counter = Button_Story.bind({}); export const Floating_Button = Button_Story.bind({}); +// Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports, +// this line ensures they are exported in the desired order. +// See https://www.npmjs.com/package/babel-plugin-named-exports-order +export const __namedExportsOrder = [ + 'Primary', + 'Counter', + 'Secondary', + 'Default', + 'Neutral', + 'System_UI', + 'Toggle', + 'Toggle_With_Counter', + 'Split', + 'Split_With_Counter', + 'Floating_Button', +]; + const buttonArgs: Object = { alignIcon: ButtonIconAlign.Left, alignText: ButtonTextAlign.Center, diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx index effdcf89e..d83c37c8c 100644 --- a/src/components/Card/Card.stories.tsx +++ b/src/components/Card/Card.stories.tsx @@ -31,17 +31,15 @@ export default { }, } as ComponentMeta; -const Base_Card_Story: ComponentStory = (args) => ( - -); +const Card_Story: ComponentStory = (args) => ; -export const BaseCard = Base_Card_Story.bind({}); +export const BaseCard = Card_Story.bind({}); +export const CustomCard = Card_Story.bind({}); -const Custom_Card_Story: ComponentStory = (args) => ( - -); - -export const CustomCard = Custom_Card_Story.bind({}); +// Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports, +// this line ensures they are exported in the desired order. +// See https://www.npmjs.com/package/babel-plugin-named-exports-order +export const __namedExportsOrder = ['BaseCard', 'CustomCard']; const baseCardArgs: Object = { dropShadow: true, diff --git a/src/components/Carousel/Carousel.stories.tsx b/src/components/Carousel/Carousel.stories.tsx index 187498471..ba24ee99a 100644 --- a/src/components/Carousel/Carousel.stories.tsx +++ b/src/components/Carousel/Carousel.stories.tsx @@ -98,6 +98,11 @@ export const Slider = Slide_Story.bind({}); export const Scroller = Scroll_Story.bind({}); export const Scroller_Single = Scroll_Story.bind({}); +// Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports, +// this line ensures they are exported in the desired order. +// See https://www.npmjs.com/package/babel-plugin-named-exports-order +export const __namedExportsOrder = ['Slider', 'Scroller', 'Scroller_Single']; + const carouselArgs: Object = { classNames: 'my-carousel', controls: true, diff --git a/src/components/CheckBox/CheckBox.stories.tsx b/src/components/CheckBox/CheckBox.stories.tsx index fc91f0025..bcd7bc91b 100644 --- a/src/components/CheckBox/CheckBox.stories.tsx +++ b/src/components/CheckBox/CheckBox.stories.tsx @@ -106,16 +106,12 @@ const CheckBox_Story: ComponentStory = (args) => ( ); -export const Check_Box = CheckBox_Story.bind({}); - const CheckBox_Long_text_Story: ComponentStory = (args) => (
); -export const Check_Box_Long_Text = CheckBox_Long_text_Story.bind({}); - const CheckBoxGroup_Story: ComponentStory = (args) => { const [selected, setSelected] = useState([]); return ( @@ -130,8 +126,19 @@ const CheckBoxGroup_Story: ComponentStory = (args) => { ); }; +export const Check_Box = CheckBox_Story.bind({}); +export const Check_Box_Long_Text = CheckBox_Long_text_Story.bind({}); export const Check_Box_Group = CheckBoxGroup_Story.bind({}); +// Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports, +// this line ensures they are exported in the desired order. +// See https://www.npmjs.com/package/babel-plugin-named-exports-order +export const __namedExportsOrder = [ + 'Check_Box', + 'Check_Box_Long_Text', + 'Check_Box_Group', +]; + const checkBoxArgs: Object = { allowDisabledFocus: false, ariaLabel: 'Label', diff --git a/src/components/ConfigProvider/ConfigProvider.stories.tsx b/src/components/ConfigProvider/ConfigProvider.stories.tsx index 7cd96dbca..875c6b4f0 100644 --- a/src/components/ConfigProvider/ConfigProvider.stories.tsx +++ b/src/components/ConfigProvider/ConfigProvider.stories.tsx @@ -20,6 +20,7 @@ import { ThemeOptions, useConfig, } from './'; +import { Label } from '../Label'; import { MatchScore } from '../MatchScore'; import { Spinner } from '../Spinner'; import { Stack } from '../Stack'; @@ -281,22 +282,34 @@ const ThemedComponents: FC = () => { }; // If themeOptions isn't custom, ensure any previously set custom - // colors don't linger and interfer with named color palette. + // colors don't linger and interfere with named color palette. if (newThemeOptions.name !== 'custom') { - newThemeOptions.customTheme.primaryColor = undefined; - newThemeOptions.customTheme.accentColor = undefined; + newThemeOptions.customTheme = undefined; } setThemeOptions(addCustomFontsToThemeOptions(newThemeOptions)); }; + const themeSelectOptions: SelectOption[] = themes.map( + (theme: OcThemeName) => ({ + text: theme, + value: theme, + }) + ); + + const onThemeOptionChange = (options: SelectOption[]) => { + options.forEach((option: SelectOption) => { + console.log(option); + updateThemeOptions({ name: option as unknown as OcThemeName }); + }); + }; + return (

- Selected Theme: + Selected theme: { {

-

Color palette

- - {themes.map((theme) => ( - - ))} - - + id="colorPalette" + onOptionsChange={onThemeOptionChange} + options={[ + ...themeSelectOptions, + { + text: 'custom', + value: 'custom', + }, + ]} + size={SelectSize.Small} + />
{themeOptions.name === 'custom' && ( <>
-

Custom Primary

+
-

Custom Accent

+