@salutejs/plasma-new-hope 0.149.0-canary.1421.10946935893.0 → 0.149.0-canary.1421.10954838350.0

package/styled-components/es/examples/plasma_b2c/components/Mask/Mask.stories.tsx

@@ -0,0 +1,127 @@
+import React, { useEffect, useRef } from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Mask } from './Mask';
+
+const onChange = action('onChange');
+
+const sizes = ['l', 'm', 's', 'xs'];
+const views = ['default', 'positive', 'warning', 'negative'];
+
+const meta: Meta<typeof Mask> = {
+    title: 'plasma_b2c/Mask',
+    component: Mask,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = Omit<
+    ComponentProps<typeof Mask>,
+    | 'helperBlock'
+    | 'contentLeft'
+    | 'htmlSize'
+    | 'contentRight'
+    | 'type'
+    | 'name'
+    | 'onFocus'
+    | 'onBlur'
+    | 'onChange'
+    | 'value'
+    | 'checked'
+    | 'maxLength'
+    | 'minLength'
+    | 'required'
+    | 'enumerationType'
+    | 'chips'
+    | 'onChangeChips'
+>;
+
+const StoryDemo = ({ view, ...rest }: StoryPropsDefault) => {
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '50%' }}>
+            <Mask
+                label="Маска телефона"
+                mask="+7 (000) 000 - 00 - 00"
+                maskChar="_"
+                showStartChars={false}
+                view={view}
+                onChange={onChange}
+                {...rest}
+            />
+
+            <Mask
+                label="Маска телефона: отображается всегда"
+                mask="+7 (000) 000 - 00 - 00"
+                maskChar="_"
+                view={view}
+                alwaysShowMask
+                onChange={onChange}
+                {...rest}
+                value="+79123"
+                name="example"
+            />
+
+            <Mask
+                label="Маска даты"
+                mask="00/00/0000"
+                maskString="DD/MM/YYYY"
+                alwaysShowMask
+                view={view}
+                onChange={onChange}
+                {...rest}
+            />
+
+            <Mask
+                label="Маска даты: значения по умолчанию"
+                // eslint-disable-next-line no-octal-escape
+                mask="12.\04.0000"
+                maskChar="_"
+                alwaysShowMask
+                view={view}
+                onChange={onChange}
+                {...rest}
+            />
+
+            <Mask
+                label="Маска времени"
+                mask="00:00"
+                maskChar="_"
+                alwaysShowMask
+                view={view}
+                onChange={onChange}
+                {...rest}
+            />
+        </div>
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        size: 'l',
+        view: 'default',
+        labelPlacement: 'outer',
+        placeholder: 'Заполните поле',
+        disabled: false,
+        readOnly: false,
+    },
+    render: (args) => <StoryDemo {...args} />,
+};

package/styled-components/es/examples/plasma_web/components/Form/Form.stories.tsx

@@ -0,0 +1,245 @@
+import { useForm as useReactHookForm, Controller } from 'react-hook-form';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+import { Button } from '../Button/Button';
+import { TextField } from '../TextField/TextField';
+import { TextArea } from '../TextArea/TextArea';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { Switch } from '../Switch/Switch';
+import { Radiobox } from '../Radiobox/Radiobox';
+import { RadioGroup } from '../../../../components/Radiobox';
+import { Slider } from '../Slider/Slider';
+import { useForm } from '../../../../hooks';
+import { DatePicker, DatePickerRange } from '../DatePicker/DatePicker';
+
+type StoryDropdownProps = {};
+
+const langName = 'language';
+const itemsRadiobox = [
+    { langName, value: 'c', label: 'C', disabled: false },
+    { langName, value: 'cpp', label: 'C++', disabled: false },
+    { langName, value: 'assembly', label: 'Assembly', disabled: false },
+];
+
+const PlasmaForm = () => {
+    const onSubmit = (data) => {
+        console.log(data);
+    };
+
+    const { formRef, formData } = useForm(onSubmit, {
+        textfield: 'textfield',
+        textarea: 'textarea',
+        checkbox: 'checkobox',
+        switch: true,
+        radiobox: 'c',
+        slider: 10,
+        sliderd: [10, 20],
+        datepicker: '12.09.2024',
+        datepickerRange: ['09.09.2024', '12.09.2024'],
+    });
+
+    return (
+        <form onSubmit={formData} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }} ref={formRef}>
+            <TextField name="textfield" placeholder="Textfield" required={false} />
+            <TextArea name="textarea" autoResize placeholder="Textarea" />
+            <Checkbox name="checkbox" label="Checkbox" />
+            <Switch name="switch" label="Switch" labelPosition="after" />
+            <RadioGroup aria-labelledby="radiogroup-title-id">
+                <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
+                    Выберите язык программирования для изучения.
+                </div>
+                {itemsRadiobox.map((item) => (
+                    <Radiobox
+                        name="radiobox"
+                        key={item.value}
+                        value={item.value}
+                        label={item.label}
+                        disabled={item.disabled}
+                    />
+                ))}
+            </RadioGroup>
+            <Slider name="slider" label="Slider" type="single" min={0} max={100} />
+            <Slider name="sliderd" label="Slider" type="double" min={0} max={100} />
+            <DatePicker label="DatePicker" name="datepicker" />
+            <DatePickerRange label="DatePicker" name="datepickerRange" />
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const meta: Meta<StoryDropdownProps> = {
+    title: 'plasma_web/Form',
+    decorators: [WithTheme],
+    component: PlasmaForm,
+};
+
+export default meta;
+
+const StoryPlasmaForm = () => {
+    return <PlasmaForm />;
+};
+
+export const DefaultPlasmaForm: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryPlasmaForm />,
+};
+
+const DefaultForm = () => {
+    const onSubmit = (event) => {
+        event.preventDefault();
+
+        const fData = new FormData(event.target);
+
+        for (const p of fData) {
+            const name = p[0];
+            const value = p[1];
+
+            console.log(name, value);
+        }
+    };
+    return (
+        <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            <TextField name="textfield" placeholder="Textfield" required={false} />
+            <TextArea name="textarea" autoResize placeholder="Textarea" />
+            <Checkbox name="checkbox" label="Checkbox" />
+            <Switch name="switch" label="Switch" labelPosition="after" />
+            <RadioGroup aria-labelledby="radiogroup-title-id">
+                <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
+                    Выберите язык программирования для изучения.
+                </div>
+                {itemsRadiobox.map((item) => (
+                    <Radiobox
+                        name="radiobox"
+                        key={item.value}
+                        value={item.value}
+                        label={item.label}
+                        disabled={item.disabled}
+                    />
+                ))}
+            </RadioGroup>
+            <Slider name="slider" label="Slider" type="single" min={0} max={100} />
+            <Slider name="sliderd" label="Slider" type="double" min={0} max={100} />
+            <DatePicker label="DatePicker" name="datepicker" />
+            <DatePickerRange label="DatePicker" name="datepickerRange" />
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const StoryDefaultForm = () => {
+    return <DefaultForm />;
+};
+
+export const FormDefault: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryDefaultForm />,
+};
+
+const DefaultUseForm = () => {
+    const { register, handleSubmit } = useReactHookForm({
+        defaultValues: {
+            textfield: 'John Doe',
+            textarea: 'Default description',
+            checkbox: true,
+            switch: true,
+            radiobox: 'c',
+            slider: 10,
+        },
+    });
+    const onSubmit = (data) => {
+        console.log(data);
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            <TextField {...register('textfield')} placeholder="Textfield" required={false} />
+            <TextArea {...register('textarea')} autoResize placeholder="Textarea" />
+            <Checkbox {...register('checkbox')} label="Checkbox" />
+            <Switch {...register('switch')} label="Switch" labelPosition="after" />
+            <RadioGroup aria-labelledby="radiogroup-title-id">
+                <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
+                    Выберите язык программирования для изучения.
+                </div>
+                {itemsRadiobox.map((item) => (
+                    <Radiobox
+                        {...register('radiobox')}
+                        key={item.value}
+                        value={item.value}
+                        label={item.label}
+                        disabled={item.disabled}
+                    />
+                ))}
+            </RadioGroup>
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const StoryHookForm = () => {
+    return <DefaultUseForm />;
+};
+
+export const UseHookForm: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryHookForm />,
+};
+
+const DefaultUseFormController = () => {
+    const { control, handleSubmit } = useReactHookForm({
+        defaultValues: {
+            textfield: 'John Doe',
+            textarea: 'Default description',
+            checkbox: true,
+            switch: true,
+            radiobox: 'c',
+            slider: 10,
+            sliderd: [10, 20],
+        },
+    });
+    const onSubmit = (data) => {
+        console.log(data);
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            <Controller
+                name="textfield"
+                control={control}
+                render={({ field }) => <TextField {...field} label="TextField" />}
+            />
+            <Controller
+                name="textarea"
+                control={control}
+                render={({ field }) => <TextArea {...field} label="TextArea" />}
+            />
+            <Controller
+                name="checkbox"
+                control={control}
+                render={({ field }) => <Checkbox {...field} checked={field.value} label="Checkbox" />}
+            />
+            <Controller
+                name="switch"
+                control={control}
+                render={({ field }) => <Switch {...field} checked={field.value} labelPosition="after" label="Switch" />}
+            />
+            <Controller
+                name="slider"
+                control={control}
+                render={({ field }) => <Slider {...field} type="single" label="Slider" min={0} max={100} />}
+            />
+            <Controller
+                name="sliderd"
+                control={control}
+                render={({ field }) => <Slider {...field} type="double" label="Slider" min={0} max={100} />}
+            />
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const StoryHookFormController = () => {
+    return <DefaultUseFormController />;
+};
+
+export const UseHookFormController: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryHookFormController />,
+};

package/styled-components/es/examples/plasma_web/components/Mask/Mask.js

@@ -0,0 +1,3 @@
+import { composeMask } from '../../../../components/Mask';
+import { TextField } from '../TextField/TextField';
+export var Mask = /*#__PURE__*/composeMask(TextField);

package/styled-components/es/examples/plasma_web/components/Mask/Mask.stories.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Mask } from './Mask';
+
+const onChange = action('onChange');
+
+const sizes = ['l', 'm', 's', 'xs'];
+const views = ['default', 'positive', 'warning', 'negative'];
+
+const meta: Meta<typeof Mask> = {
+    title: 'plasma_web/Mask',
+    component: Mask,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = Omit<
+    ComponentProps<typeof Mask>,
+    | 'helperBlock'
+    | 'contentLeft'
+    | 'htmlSize'
+    | 'contentRight'
+    | 'type'
+    | 'name'
+    | 'onFocus'
+    | 'onBlur'
+    | 'onChange'
+    | 'value'
+    | 'checked'
+    | 'maxLength'
+    | 'minLength'
+    | 'required'
+    | 'enumerationType'
+    | 'chips'
+    | 'onChangeChips'
+>;
+
+const StoryDemo = ({ view, ...rest }: StoryPropsDefault) => {
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '50%' }}>
+            <Mask
+                label="Маска телефона"
+                mask="+7 (000) 000 - 00 - 00"
+                maskChar="_"
+                showStartChars={false}
+                view={view}
+                onChange={onChange}
+                {...rest}
+            />
+
+            <Mask
+                label="Маска телефона: отображается всегда"
+                mask="+7 (000) 000 - 00 - 00"
+                maskChar="_"
+                view={view}
+                alwaysShowMask
+                onChange={onChange}
+                {...rest}
+            />
+
+            <Mask
+                label="Маска даты"
+                mask="00/00/0000"
+                maskString="DD/MM/YYYY"
+                alwaysShowMask
+                view={view}
+                onChange={onChange}
+                {...rest}
+            />
+
+            <Mask
+                label="Маска даты: значения по умолчанию"
+                // eslint-disable-next-line no-octal-escape
+                mask="12.\04.0000"
+                maskChar="_"
+                alwaysShowMask
+                view={view}
+                onChange={onChange}
+                {...rest}
+            />
+
+            <Mask
+                label="Маска времени"
+                mask="00:00"
+                maskChar="_"
+                alwaysShowMask
+                view={view}
+                onChange={onChange}
+                {...rest}
+            />
+        </div>
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        size: 'l',
+        view: 'default',
+        labelPlacement: 'outer',
+        placeholder: 'Заполните поле',
+        disabled: false,
+        readOnly: false,
+    },
+    render: (args) => <StoryDemo {...args} />,
+};

package/styled-components/es/index.js

@@ -56,4 +56,5 @@ export * from './components/Portal';
 export * from './components/Price';
 export * from './components/Autocomplete';
 export * from './components/EmptyState';
-export * from './components/Editable';
+export * from './components/Editable';
+export * from './components/Mask';

package/styled-components/es/utils/inputHidden.js

@@ -1,4 +1,5 @@
-var _templateObject;
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { styled } from '@linaria/react';
-export var InputHidden = /*#__PURE__*/styled.input(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    visibility: hidden;\n    width: 0;\n    height: 0;\n    opacity: 0;\n    margin: 0;\n    padding: 0;\n    border: none;\n"])));
+// import { styled } from '@linaria/react';
+import styled from 'styled-components';
+export var InputHidden = /*#__PURE__*/styled.input.withConfig({
+  componentId: "plasma-new-hope__sc-12z83ad-0"
+})(["visibility:hidden;width:0;height:0;opacity:0;margin:0;padding:0;border:none;"]);

package/types/components/Mask/Mask.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { FC } from 'react';
+import type { CustomInputProps, MaskProps } from './Mask.types';
+export declare const composeMask: <T extends CustomInputProps>(InputComponent: React.FC<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<T & MaskProps> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Mask.d.ts.map

package/types/components/Mask/Mask.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mask.d.ts","sourceRoot":"","sources":["../../../src/components/Mask/Mask.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAqBhE,eAAO,MAAM,WAAW,4KAWvB,CAAC"}

package/types/components/Mask/Mask.types.d.ts

@@ -0,0 +1,62 @@
+import type { InputHTMLAttributes } from 'react';
+import type { IMaskItem, IInputValue, ISelectRange, IInputState } from '@salutejs/input-core';
+export declare type MaskProps = {
+    /**
+     * Маска.
+     * Поддерживаются следующие символы:
+     * * 0 — любая цифра 0-9
+     * * \* — любой символ
+     * * a — A-Z, a-z
+     * * я — А-Я, а-я, ё, Ё
+     * * q — буква "q"
+     * * 2 — цифра "2"
+     * * \a — "\\" - символ экранирования; "a" - буква
+     */
+    mask?: string;
+    /**
+     * Символ маскирования.
+     */
+    maskChar?: string;
+    /**
+     * Строка, которая будет отображена в незаполненную часть маски.
+     * Если передать maskString, то maskChar игнорируется.
+     */
+    maskString?: string;
+    /**
+     * Набор соответствий маски и маскируемого значения.
+     */
+    maskFormat?: Array<IMaskItem>;
+    /**
+     * Отображать ли маску во время ввода.
+     */
+    showMask?: boolean;
+    /**
+     * Отображать ли маску всегда.
+     */
+    alwaysShowMask?: boolean;
+    /**
+     * Отображать ли префикс маски. Например у маски телефона "+7"
+     */
+    showStartChars?: boolean;
+    /**
+     * Значение по умолчанию.
+     */
+    defaultValue?: string;
+    /**
+     * Функция форматирования, которая позволяет задать собственные правила форматирования.
+     */
+    reformat?: (params: {
+        value: Array<IInputValue> | string;
+        selection: ISelectRange;
+        input?: string;
+    }) => IInputState;
+    /**
+     * Callback при изменении значения маски с дополнительной информацией.
+     */
+    onValueChange?: (params: {
+        maskedValue: string;
+        value: string;
+    }) => void;
+};
+export declare type CustomInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur'>;
+//# sourceMappingURL=Mask.types.d.ts.map

package/types/components/Mask/Mask.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mask.types.d.ts","sourceRoot":"","sources":["../../../src/components/Mask/Mask.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAE9F,oBAAY,SAAS,GAAG;IACpB;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;QAAC,SAAS,EAAE,YAAY,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,WAAW,CAAC;IACpH;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,oBAAY,gBAAgB,GAAG,IAAI,CAC/B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAC9D,CAAC"}

package/types/components/Mask/index.d.ts

@@ -0,0 +1,2 @@
+export { composeMask } from './Mask';
+//# sourceMappingURL=index.d.ts.map

package/types/components/Mask/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Mask/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC"}

package/types/components/TextField/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,KAAK,EAAuC,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA4B7F,eAAO,MAAM,IAAI,0CAGhB,CAAC;AAEF,eAAO,MAAM,aAAa,SAAU,UAAU,cAAc,EAAE,cAAc,CAAC,4FA8QxE,CAAC;AAEN,eAAO,MAAM,eAAe;;;mBAhRQ,UAAU,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CA4S5E,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,KAAK,EAAuC,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA4B7F,eAAO,MAAM,IAAI,0CAGhB,CAAC;AAEF,eAAO,MAAM,aAAa,SAAU,UAAU,cAAc,EAAE,cAAc,CAAC,4FAiRxE,CAAC;AAEN,eAAO,MAAM,eAAe;;;mBAnRQ,UAAU,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CA+S5E,CAAC"}