@eccenca/gui-elements 23.8.0 → 24.0.0-rc.1

package/src/components/Tag/stories/Tag.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
 
@@ -26,9 +26,9 @@ export default {
         },
         emphasized: { control: "none" },
     },
-} as ComponentMeta<typeof Tag>;
+} as Meta<typeof Tag>;
 
-const Template: ComponentStory<typeof Tag> = (args) => <Tag {...args} />;
+const Template: StoryFn<typeof Tag> = (args) => <Tag {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/Tag/stories/TagList.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Tag, TagList } from "./../../../../index";
 
@@ -11,9 +11,9 @@ export default {
             control: "none",
         },
     },
-} as ComponentMeta<typeof TagList>;
+} as Meta<typeof TagList>;
 
-const Template: ComponentStory<typeof TagList> = (args) => <TagList {...args} />;
+const Template: StoryFn<typeof TagList> = (args) => <TagList {...args} />;
 
 export const List = Template.bind({});
 List.args = {

package/src/components/TextField/stories/SearchField.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import SearchField from "./../SearchField";
 
@@ -13,9 +13,9 @@ export default {
         hasStateDanger: { table: { disable: true } },
         fullWidth: { table: { disable: true } },
     },
-} as ComponentMeta<typeof SearchField>;
+} as Meta<typeof SearchField>;
 
-const Template: ComponentStory<typeof SearchField> = (args) => <SearchField {...args}></SearchField>;
+const Template: StoryFn<typeof SearchField> = (args) => <SearchField {...args}></SearchField>;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -23,7 +23,7 @@ Default.args = {
     onClearanceText: "",
 };
 
-export const SearchFieldWithClearanceIcon: ComponentStory<typeof SearchField> = (args) => {
+export const SearchFieldWithClearanceIcon: StoryFn<typeof SearchField> = (args) => {
     const [query, setQuery] = React.useState<string>("");
     return (
         <SearchField

package/src/components/TextField/stories/TextField.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
 import characters from "../../../common/utils/characters";
@@ -21,9 +21,9 @@ export default {
             ...helpersArgTypes.exampleIntent,
         },
     },
-} as ComponentMeta<typeof TextField>;
+} as Meta<typeof TextField>;
 
-const Template: ComponentStory<typeof TextField> = (args) => <TextField {...args}></TextField>;
+const Template: StoryFn<typeof TextField> = (args) => <TextField {...args}></TextField>;
 
 export const Default = Template.bind({});
 

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Button from "../Button/Button";
 import IconButton from "../Icon/IconButton";
@@ -15,9 +15,9 @@ export default {
         ToolbarSection,
     },
     argTypes: {},
-} as ComponentMeta<typeof Toolbar>;
+} as Meta<typeof Toolbar>;
 
-const Template: ComponentStory<typeof Toolbar> = (args) => (
+const Template: StoryFn<typeof Toolbar> = (args) => (
     <Toolbar {...args}>
         <ToolbarSection>
             <IconButton name="operation-undo" />

package/src/components/Tree/Tree.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LogoReact } from "@carbon/icons-react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Icon, OverflowText, Tag, TestIcon, Tree, TreeNodeInfo } from "./../../index";
 import { TreeNodeShadow as TreeNode } from "./Tree";
@@ -10,9 +10,9 @@ export default {
     component: Tree,
     subcomponents: { TreeNode },
     argTypes: {},
-} as ComponentMeta<typeof Tree>;
+} as Meta<typeof Tree>;
 
-const Template: ComponentStory<typeof Tree> = (args) => {
+const Template: StoryFn<typeof Tree> = (args) => {
     const [treeContents, setTreeContents] = React.useState(args.contents);
 
     return (

package/src/components/Typography/stories/WhiteSpaceContainer.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { WhiteSpaceContainer as WhiteSpaceContainerElement } from "../../../index";
 
@@ -30,9 +30,9 @@ export default {
         paddingBottom: { ...whiteSpaceSizeOptions },
         paddingLeft: { ...whiteSpaceSizeOptions },
     },
-} as ComponentMeta<typeof WhiteSpaceContainerElement>;
+} as Meta<typeof WhiteSpaceContainerElement>;
 
-const Template: ComponentStory<typeof WhiteSpaceContainerElement> = (args) => (
+const Template: StoryFn<typeof WhiteSpaceContainerElement> = (args) => (
     <WhiteSpaceContainerElement {...args} style={{ background: "#eee" }} />
 );
 

package/src/extensions/codemirror/CodeMirror.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { CodeEditor } from "./CodeMirror";
 
@@ -12,9 +12,9 @@ export default {
             action: "value changed",
         },
     },
-} as ComponentMeta<typeof CodeEditor>;
+} as Meta<typeof CodeEditor>;
 
-const TemplateFull: ComponentStory<typeof CodeEditor> = (args) => <CodeEditor {...args} />;
+const TemplateFull: StoryFn<typeof CodeEditor> = (args) => <CodeEditor {...args} />;
 
 export const BasicExample = TemplateFull.bind({});
 BasicExample.args = {

package/src/extensions/react-flow/edges/stories/EdgeLabel.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../../.storybook/helpers";
 
@@ -36,9 +36,9 @@ export default {
             ...helpersArgTypes.exampleIntent,
         },
     },
-} as ComponentMeta<typeof EdgeLabel>;
+} as Meta<typeof EdgeLabel>;
 
-const Template: ComponentStory<typeof EdgeLabel> = (args) => <EdgeLabel {...args} />;
+const Template: StoryFn<typeof EdgeLabel> = (args) => <EdgeLabel {...args} />;
 
 const labelText = loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString();
 

package/src/extensions/react-flow/nodes/stories/NodeContentExtension.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import IconButton from "../../../../components/Icon/IconButton";
 import HtmlContentBlock from "../../../../components/Typography/HtmlContentBlock";
@@ -14,9 +14,9 @@ export default {
         children: { control: "none" },
         actionButtons: { control: "none" },
     },
-} as ComponentMeta<typeof NodeContentExtension>;
+} as Meta<typeof NodeContentExtension>;
 
-const Template: ComponentStory<typeof NodeContentExtension> = (args: NodeContentExtensionProps) => (
+const Template: StoryFn<typeof NodeContentExtension> = (args: NodeContentExtensionProps) => (
     <NodeContentExtension {...args} /*some comment*/ />
 );
 

package/src/includes/carbon-components/_components.scss

@@ -4,8 +4,8 @@
     the Carbon components itself when they are necessary as sub components. We may remove this
     file later when we haven't experiences any problems.
 */
-// @use "~@carbon/styles/scss/components/select/index" as select;
-// @use "~@carbon/styles/scss/components/list-box/index" as list-box;
-// @use "~@carbon/styles/scss/components/dropdown/index" as dropdown;
+// @use "~@carbon/react/scss/components/select/index" as select;
+// @use "~@carbon/react/scss/components/list-box/index" as list-box;
+// @use "~@carbon/react/scss/components/dropdown/index" as dropdown;
 
-@use "~@carbon/styles/scss/components/popover/index" as popover; // necessary for pagination
+@use "~@carbon/react/scss/components/popover/index" as popover; // necessary for pagination

package/src/includes/carbon-components/_requisits.scss

@@ -1,4 +1,4 @@
-@use "~@carbon/styles/scss/config" with (
+@use "~@carbon/react/scss/config" with (
     $css--body: $css--body,
     $css--font-face: $css--font-face,
     $css--reset: $css--reset,
@@ -7,15 +7,19 @@
     $flex-grid-columns: $flex-grid-columns,
     $use-flexbox-grid: $use-flexbox-grid
 );
-@use "~@carbon/styles/scss/utilities/_visually-hidden";
-@import "~@carbon/styles/scss/components/ui-shell/functions";
-@import "~@carbon/styles/scss/feature-flags";
-@import "~@carbon/styles/scss/colors";
-@import "~@carbon/styles/scss/theme";
+@use "~@carbon/react/scss/utilities/_visually-hidden";
+// we replicate the function here because the distinct import is not ossible via @carbon/react
+// @import "~@carbon/styles/scss/components/ui-shell/functions";
+@function mini-units($count) {
+    @return 0.5rem * $count;
+}
+@import "~@carbon/react/scss/feature-flags";
+@import "~@carbon/react/scss/colors";
+@import "~@carbon/react/scss/theme";
 
 :root {
     @include theme;
 }
 
-@import "~@carbon/styles/scss/spacing";
-@import "~@carbon/styles/scss/utilities/z-index";
+@import "~@carbon/react/scss/spacing";
+@import "~@carbon/react/scss/utilities/z-index";

package/src/includes/carbon-components/_variables.scss

@@ -29,7 +29,7 @@ $css--default-type: false !default;
 $css--plex: false !default;
 $base-font-size: $eccgui-size-typo-base !default;
 
-@import "~@carbon/styles/scss/utilities/convert";
+@import "~@carbon/react/scss/utilities/convert";
 
 $label-01: (
     font-size: rem($eccgui-size-typo-caption),

package/src/legacy-replacements/Tabs/Tabs.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Tabs } from "./../../legacy-replacements";
 
@@ -7,18 +7,10 @@ export default {
     title: "Legacy/Tabs",
     component: Tabs,
     argTypes: {
-        className: {
-            description: "A space-delimited list of class names.",
-            control: "string",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "string" },
-            },
-        },
     },
-} as ComponentMeta<typeof Tabs>;
+} as Meta<typeof Tabs>;
 
-const TemplateDeprecated: ComponentStory<typeof Tabs> = (args) => <Tabs {...args} />;
+const TemplateDeprecated: StoryFn<typeof Tabs> = (args) => <Tabs {...args} />;
 
 export const DeprecatedUsage = TemplateDeprecated.bind({});
 DeprecatedUsage.args = {