chore(NumberInput): refactor stories

src/components/controls/NumberInput/__stories__/NumberInput.stories.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryFn, StoryObj} from '@storybook/react';
 
 import {NumberInput} from '../NumberInput';
 import type {NumberInputProps} from '../NumberInput';
 
 import {NumberInputShowcase} from './NumberInputShowcase';
+import {NumberInputSizes} from './NumberInputSizes';
 
 export default {
     title: 'Components/Inputs/NumberInput',
@@ -48,5 +49,27 @@ const DefaultTemplate: StoryFn<NumberInputProps> = (args) => {
 };
 export const Default = DefaultTemplate.bind({});
 
-const ShowcaseTemplate: StoryFn = (args: NumberInputProps) => <NumberInputShowcase {...args} />;
+const ShowcaseTemplate: StoryFn<NumberInputProps> = (args: NumberInputProps) => (
+    <NumberInputShowcase {...args} />
+);
 export const Showcase = ShowcaseTemplate.bind({});
+
+export const Sizes: StoryObj<typeof NumberInput> = {
+    args: {
+        ...fixConsoleErrors,
+        label: 'Label:',
+    },
+    render: (args: NumberInputProps) => <NumberInputSizes {...args} />,
+};
+
+export const WithErrors: StoryObj<typeof NumberInput> = {
+    args: {
+        ...fixConsoleErrors,
+        validationState: 'invalid',
+        errorPlacement: 'inside',
+        errorMessage: 'A validation error has occurred',
+        hasClear: true,
+        label: 'Label:',
+    },
+    render: (args: NumberInputProps) => <NumberInputSizes {...args} />,
+};

src/components/controls/NumberInput/__stories__/NumberInputShowcase.scss

@@ -1,68 +1,9 @@
 .number-input-showcase {
-    &__number-input-examples {
-        grid-area: number-input;
-        display: grid;
-        grid-template:
-            'title title' auto
-            'sizes states' auto / 1fr 1fr;
-        gap: 20px;
-        padding: 20px;
-    }
-
-    &__number-input-label-examples {
-        grid-area: number-input-label;
-        display: grid;
-        grid-template:
-            'title title' auto
-            'sizes states' auto / 1fr 1fr;
-        gap: 20px;
-        padding: 20px;
-    }
-
-    &__number-input-error-examples {
-        grid-area: text-area;
-        display: grid;
-        grid-template:
-            'title title' auto
-            'sizes additional-content' auto / 1fr 1fr;
-        gap: 20px;
-        padding: 20px;
-    }
-
-    &__number-input-custom-css {
-        grid-area: text-area;
-        display: grid;
-        grid-template:
-            'title title' auto
-            'states themed' auto / 1fr 1fr;
-        gap: 20px;
-        padding: 20px;
-    }
-
-    &__title {
-        grid-area: title;
-        margin: 0;
-    }
-
-    &__section-header {
-        text-align: center;
-        margin: 0 0 10px;
-    }
-
-    &__size-examples {
-        grid-area: sizes;
-    }
-
-    &__state-examples {
-        grid-area: states;
-    }
-
-    &__row {
-        display: flex;
-        gap: 10px;
-    }
-
-    &__input:not(:last-child) {
-        margin-block-end: 20px;
-    }
+    grid-area: number-input;
+    display: grid;
+    grid-template:
+        'title title' auto
+        'col col' auto / 1fr 1fr;
+    gap: 20px;
+    padding: 20px;
 }