@salutejs/plasma-new-hope 0.135.0-canary.1404.10630068652.0 → 0.135.0-canary.1405.10631388441.0

package/emotion/es/examples/plasma_b2c/components/InputGroup/InputGroup.js

@@ -0,0 +1,5 @@
+import { inputGroupConfig } from '../../../../components/InputGroup';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './InputGroup.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(inputGroupConfig, config);
+export var InputGroup = /*#__PURE__*/component(mergedConfig);

package/emotion/es/examples/plasma_b2c/components/InputGroup/InputGroup.stories.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+import { TextField } from '../TextField/TextField';
+
+import { InputGroup } from './InputGroup';
+
+type StoryProps = Omit<ComponentProps<typeof InputGroup>, 'gap'> & {
+    itemsCount?: number;
+    gapDefaultShape?: string;
+    gapSegmentedShape?: string;
+};
+type Story = StoryObj<StoryProps>;
+
+const sizes = ['l', 'm', 's', 'xs'];
+const orientationValues = ['horizontal', 'vertical'];
+const gapDefaultValues = ['dense', 'wide'];
+const gapSegmentedValues = ['none', 'dense'];
+const shapeValues = ['segmented', 'default'];
+const stretchingValues = ['auto', 'filled'];
+
+const meta: Meta<typeof InputGroup> = {
+    title: 'plasma_b2c/InputGroup',
+    decorators: [WithTheme],
+    argTypes: {
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        orientation: {
+            options: orientationValues,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        shape: {
+            options: shapeValues,
+            control: {
+                type: 'select',
+            },
+        },
+        stretching: {
+            options: stretchingValues,
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(['gap']),
+    },
+};
+
+export default meta;
+
+export const Default: Story = {
+    argTypes: {
+        gapDefaultShape: {
+            options: gapDefaultValues,
+            control: { type: 'select' },
+            if: { arg: 'shape', eq: 'default' },
+        },
+        gapSegmentedShape: {
+            options: gapSegmentedValues,
+            control: { type: 'select' },
+            if: { arg: 'shape', eq: 'segmented' },
+        },
+    },
+    args: {
+        size: 'm',
+        shape: 'default',
+        gapDefaultShape: 'dense',
+        gapSegmentedShape: 'dense',
+        orientation: 'horizontal',
+        itemsCount: 5,
+        stretching: 'auto',
+    },
+    render: ({ itemsCount, gapDefaultShape, gapSegmentedShape, ...args }: StoryProps) => {
+        return (
+            <InputGroup {...args} gap={(gapDefaultShape || gapSegmentedShape) as any}>
+                {Array(itemsCount)
+                    .fill(true)
+                    .map((_, i) => (
+                        <TextField placeholder={`input #${i}`} />
+                    ))}
+            </InputGroup>
+        );
+    },
+};
+
+export const CustomInputs: Story = {
+    args: {
+        ...Default.args,
+        isCommonInputStyles: false,
+    },
+    argTypes: {
+        ...Default.argTypes,
+        ...disableProps(['itemsCount']),
+    },
+    render: ({ gapDefaultShape, gapSegmentedShape, ...args }: StoryProps) => {
+        return (
+            <>
+                <h3>Группа Input с разными размерами</h3>
+                <InputGroup {...args} gap={(gapDefaultShape || gapSegmentedShape) as any}>
+                    <TextField placeholder="Размер l" size="l" />
+                    <TextField placeholder="Размер m" size="m" />
+                    <TextField placeholder="Размер s" size="s" />
+                    <TextField placeholder="Размер xs" size="xs" />
+                </InputGroup>
+            </>
+        );
+    },
+};

package/emotion/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx

@@ -47,12 +47,6 @@ const meta: Meta = {
                 type: 'date',
             },
         },
-        lang: {
-            options: ['ru', 'en'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
     },
 };
 
@@ -69,8 +63,6 @@ const StoryDefault = ({
     valueError,
     valueSuccess,
     size,
-    lang,
-    format,
     ...rest
 }: StoryPropsDefault) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -91,8 +83,6 @@ const StoryDefault = ({
             onChangeValue={(e, currentValue) => {
                 onChangeValue(e, currentValue);
             }}
-            lang={lang}
-            format={format}
             onCommitDate={() => setIsOpen(false)}
             {...rest}
         />
@@ -112,12 +102,6 @@ export const Default: StoryObj<StoryPropsDefault> = {
                 type: 'inline-radio',
             },
         },
-        format: {
-            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
-            control: {
-                type: 'select',
-            },
-        },
     },
     args: {
         label: 'Лейбл',
@@ -125,7 +109,6 @@ export const Default: StoryObj<StoryPropsDefault> = {
         placeholder: '30.05.2024',
         size: 'l',
         view: 'default',
-        labelPlacement: 'outer',
         defaultDate: new Date(2024, 5, 14),
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
@@ -137,8 +120,6 @@ export const Default: StoryObj<StoryPropsDefault> = {
         enableContentRight: true,
         valueError: false,
         valueSuccess: false,
-        lang: 'ru',
-        format: 'DD.MM.YYYY',
     },
     render: (args) => <StoryDefault {...args} />,
 };
@@ -248,12 +229,6 @@ export const Range: StoryObj<StoryPropsRange> = {
                 type: 'inline-radio',
             },
         },
-        format: {
-            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
-            control: {
-                type: 'select',
-            },
-        },
     },
     args: {
         label: 'Лейбл',
@@ -280,9 +255,6 @@ export const Range: StoryObj<StoryPropsRange> = {
         enableSecondTextfieldContentLeft: false,
         enableSecondTextfieldContentRight: false,
 
-        lang: 'ru',
-        format: 'DD.MM.YYYY',
-
         firstValueError: false,
         firstValueSuccess: false,
         secondValueError: false,
@@ -348,12 +320,6 @@ export const Deferred: StoryObj<StoryPropsDefault> = {
                 type: 'inline-radio',
             },
         },
-        format: {
-            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
-            control: {
-                type: 'select',
-            },
-        },
     },
     args: {
         label: 'Лейбл',