feat(universal-date-input): storybook split version (#1526)

Author: fulcanellee

packages/universal-date-input/src/docs/Component.stories.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { UniversalDateInput } from '@alfalab/core-components-universal-date-input';
+import { UniversalDateInputDesktop } from '@alfalab/core-components-universal-date-input/desktop';
+import { UniversalDateInputMobile } from '@alfalab/core-components-universal-date-input/mobile';
 import { Calendar } from '@alfalab/core-components-calendar';
 import { boolean, select } from '@storybook/addon-knobs';
 
@@ -13,8 +15,8 @@ const meta: Meta<typeof UniversalDateInput> = {
 
 type Story = StoryObj<typeof UniversalDateInput>;
 
-export const universal_date_input: Story = {
-    name: 'UniversalDateInput',
+export const universal_date_input_responsive: Story = {
+    name: 'UniversalDateInputResponsive',
     render: () => {
         return (
             <UniversalDateInput
@@ -28,4 +30,34 @@ export const universal_date_input: Story = {
     },
 };
 
+export const universal_date_input_desktop: Story = {
+    name: 'UniversalDateInputDesktop',
+    render: () => {
+        return (
+            <UniversalDateInputDesktop
+                autoCorrection={boolean('autoCorrection', true)}
+                view={select('view', ['date', 'date-time', 'date-range', 'time'] as any, 'date')}
+                picker={boolean('picker', false) as true}
+                Calendar={Calendar}
+                size={select('size', [40, 48, 56, 64, 72], 48)}
+            />
+        );
+    },
+};
+
+export const universal_date_input_mobile: Story = {
+    name: 'UniversalDateInputMobile',
+    render: () => {
+        return (
+            <UniversalDateInputMobile
+                autoCorrection={boolean('autoCorrection', true)}
+                view={select('view', ['date', 'date-time', 'date-range', 'time'] as any, 'date')}
+                picker={boolean('picker', false) as true}
+                Calendar={Calendar}
+                size={select('size', [40, 48, 56, 64, 72], 48)}
+            />
+        );
+    },
+};
+
 export default meta;

tsconfig.json

@@ -41,7 +41,8 @@
             "@alfalab/core-components-step-input/*": ["packages/step-input/src/*"],
             "@alfalab/core-components-number-input/*": ["packages/number-input/src/*"],
             "@alfalab/core-components-navigation-bar-private/*": ["packages/navigation-bar-private/src/*"],
-            "@alfalab/core-components-spinner/*": ["packages/spinner/src/*"]
+            "@alfalab/core-components-spinner/*": ["packages/spinner/src/*"],
+            "@alfalab/core-components-universal-date-input/*": ["packages/universal-date-input/src/*"]
         }
     },
     "exclude": ["node_modules", "dist", "**/*.stories*", "**/*.test*"],