@salutejs/plasma-new-hope 0.187.0-canary.1551.11740641367.0 → 0.187.1-canary.1517.11744378817.0

package/emotion/cjs/examples/plasma_web/components/NumberInput/NumberInput.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NumberInput = void 0;
+var _NumberInput = /*#__PURE__*/require("../../../../components/NumberInput");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _NumberInput2 = /*#__PURE__*/require("./NumberInput.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_NumberInput.numberInputConfig, _NumberInput2.config);
+var NumberInput = exports.NumberInput = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/emotion/cjs/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx

@@ -0,0 +1,108 @@
+import React, { ComponentProps, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { WithTheme } from '../../../_helpers';
+
+import { NumberInput } from './NumberInput';
+
+const onChange = action('onChange');
+const onDecrement = action('onDecrement');
+const onIncrement = action('onIncrement');
+
+const views = ['default', 'secondary', 'accent', 'clear'];
+const sizes = ['l', 'm', 's', 'xs'];
+const shapes = ['cornered', 'pilled'];
+const inputBackgroundTypes = ['fill', 'clear'];
+const segmentation = ['default', 'segmented', 'solid'];
+
+const meta: Meta<typeof NumberInput> = {
+    title: 'plasma_web/NumberInput',
+    component: NumberInput,
+    decorators: [WithTheme],
+    argTypes: {
+        min: {
+            control: {
+                type: 'number',
+            },
+        },
+        max: {
+            control: {
+                type: 'number',
+            },
+        },
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        shape: {
+            options: shapes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        inputBackgroundType: {
+            options: inputBackgroundTypes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        segmentation: {
+            options: segmentation,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof NumberInput>;
+
+const StoryDefault = (args: StoryPropsDefault) => {
+    const [value, setValue] = useState(5);
+
+    const handleChange = (_: any, newValue: number) => {
+        setValue(newValue);
+        onChange(newValue);
+    };
+
+    return (
+        <NumberInput
+            {...args}
+            value={value}
+            onChange={handleChange}
+            onDecrement={onDecrement}
+            onIncrement={onIncrement}
+        />
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        view: 'default',
+        size: 'l',
+        shape: 'cornered',
+        inputBackgroundType: 'fill',
+        segmentation: 'default',
+        min: 0,
+        max: 9,
+        step: 1,
+        width: 188,
+        isManualInput: false,
+        textBefore: '',
+        textAfter: '',
+        isLoading: false,
+        disabled: false,
+    },
+    render: StoryDefault,
+};