@salutejs/plasma-new-hope 0.158.0-canary.1443.11128958088.0 → 0.158.0-canary.1464.11126264901.0

package/styled-components/cjs/examples/plasma_web/components/Steps/Steps.stories.tsx

@@ -1,169 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { disableProps } from '@salutejs/plasma-sb-utils';
-
-import { IconMic } from '../../../../components/_Icon';
-import { argTypesFromConfig, WithTheme } from '../../../_helpers';
-import { StepItemProps } from '../../../../components/Steps/ui';
-
-import { Steps, mergedConfig } from './Steps';
-
-const meta: Meta<typeof Steps> = {
-    title: 'plasma_web/Steps',
-    decorators: [WithTheme],
-    component: Steps,
-    argTypes: {
-        ...argTypesFromConfig(mergedConfig),
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<ComponentProps<typeof Steps>>;
-
-const renderIndicator = ({ status, size }) => {
-    let iconSize;
-    if (size === 'xs' || size === 's') {
-        iconSize = 'xs';
-    } else if (status === 'active') {
-        iconSize = 's';
-    } else {
-        iconSize = 'xs';
-    }
-
-    return <IconMic color="inherit" size={iconSize} />;
-};
-
-const DefaultStory = (args) => {
-    const { maxWidth, title, content, size, indicatorType, quantity, hasContent, loading, disabled, simple } = args;
-
-    const innerTitle = title || 'Title';
-
-    const [items, setItems] = useState([]);
-
-    useEffect(() => {
-        const newItems = new Array(quantity).fill(null).map((_, index) => {
-            const indicator = index + 1;
-
-            if (simple) {
-                return {
-                    indicator,
-                    status: 'inactive',
-                };
-            }
-
-            return {
-                title: innerTitle,
-                content,
-                indicator,
-                status: 'inactive',
-            };
-        });
-
-        setItems(newItems);
-    }, [hasContent, loading, quantity, innerTitle, content, simple]);
-
-    useEffect(() => {
-        setItems((curItems) =>
-            curItems.map((item, index) => {
-                if (indicatorType === 'numbered') {
-                    return { ...item, indicator: index + 1 };
-                }
-
-                if (indicatorType === 'bullet') {
-                    return { ...item, indicator: undefined };
-                }
-
-                if (indicatorType === 'icon') {
-                    return { ...item, indicator: renderIndicator };
-                }
-
-                return item;
-            }),
-        );
-    }, [indicatorType]);
-
-    useEffect(() => {
-        setItems((curItems) => curItems.map((item) => ({ ...item, disabled })));
-    }, [disabled]);
-
-    const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
-        if (prevIndex !== undefined) {
-            items[prevIndex].status = 'completed';
-        }
-
-        items[index].status = 'active';
-
-        setItems([...items]);
-    };
-
-    return (
-        <div style={{ maxWidth }}>
-            <Steps size={size} items={items} onChange={onChange} hasLoader={loading} {...args} />
-        </div>
-    );
-};
-
-export const Default: Story = {
-    args: {
-        maxWidth: '100%',
-        quantity: 6,
-        size: 'm',
-        title: 'Title',
-        content: 'Content',
-        contentAlign: 'left',
-        indicatorType: 'numbered',
-        orientation: 'horizontal',
-        hasLine: true,
-        hasContent: 'all',
-        disabled: false,
-        loading: false,
-        simple: false,
-    },
-    argTypes: {
-        maxWidth: {
-            control: {
-                type: 'text',
-            },
-        },
-        size: {
-            options: ['xs', 's', 'm', 'l'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        orientation: {
-            options: ['horizontal', 'vertical'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        contentAlign: {
-            options: ['left', 'center'],
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'orientation', eq: 'horizontal' },
-        },
-        indicatorType: {
-            options: ['numbered', 'bullet', 'icon'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        hasContent: {
-            options: ['all', 'active', 'none'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        simple: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        ...disableProps(['view']),
-    },
-    render: (args) => <DefaultStory {...args} />,
-};

package/styled-components/es/components/Steps/Steps.js

@@ -1,121 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["size", "orientation", "contentAlign", "hasLine", "hasContent", "hasLoader", "items", "onChange", "current", "status"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { forwardRef, useState, useEffect } from 'react';
-import cls from 'classnames';
-import { classes } from './Steps.tokens';
-import { base } from './Steps.styles';
-import { StepItem } from './ui';
-import { base as sizeCSS } from './variations/_size/base';
-import { base as viewCSS } from './variations/_view/base';
-export var stepsRoot = function stepsRoot(Root) {
-  return /*#__PURE__*/forwardRef(function (props, outerRef) {
-    var _props$size = props.size,
-      size = _props$size === void 0 ? 's' : _props$size,
-      _props$orientation = props.orientation,
-      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
-      _props$contentAlign = props.contentAlign,
-      contentAlign = _props$contentAlign === void 0 ? 'left' : _props$contentAlign,
-      _props$hasLine = props.hasLine,
-      hasLine = _props$hasLine === void 0 ? true : _props$hasLine,
-      _props$hasContent = props.hasContent,
-      hasContent = _props$hasContent === void 0 ? 'all' : _props$hasContent,
-      hasLoader = props.hasLoader,
-      _props$items = props.items,
-      items = _props$items === void 0 ? [] : _props$items,
-      onChange = props.onChange,
-      current = props.current,
-      status = props.status,
-      rest = _objectWithoutProperties(props, _excluded);
-    var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      prevIndex = _useState2[0],
-      setPrevIndex = _useState2[1];
-    var isUncontrolled = current !== undefined;
-    var hasIndicator = items.some(function (item) {
-      return item.indicator != null;
-    });
-    var isSimple = items.every(function (item) {
-      return !item.title && !item.content;
-    });
-    useEffect(function () {
-      return function () {
-        if (current !== undefined) {
-          setPrevIndex(current);
-        } else {
-          var index = items.findIndex(function (item) {
-            return item.status === 'active';
-          });
-          setPrevIndex(index !== -1 ? index : undefined);
-        }
-      };
-    }, [current, items]);
-    return /*#__PURE__*/React.createElement(Root, _extends({
-      size: size,
-      view: "default",
-      ref: outerRef,
-      className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, orientation === 'vertical'), classes.simple, isSimple), classes.hasIndicator, hasIndicator))
-    }, rest), items.map(function (item, index) {
-      var itemStatus = 'inactive';
-      if (isUncontrolled) {
-        if (current > index) {
-          itemStatus = 'completed';
-        } else if (current === index) {
-          itemStatus = status || 'active';
-        }
-      } else {
-        itemStatus = status || item.status || 'inactive';
-      }
-      if (item.disabled) {
-        itemStatus = 'inactive';
-      }
-      var isActive = itemStatus === 'active';
-      var content = item.content;
-      if (hasContent === 'active' && !isActive || hasContent === 'none') {
-        content = '';
-      }
-      return /*#__PURE__*/React.createElement(StepItem, {
-        key: index,
-        index: index,
-        title: item.title,
-        content: content,
-        indicator: item.indicator,
-        status: itemStatus,
-        size: size,
-        orientation: orientation,
-        contentAlign: orientation === 'horizontal' ? contentAlign : 'left',
-        hasLine: hasLine,
-        hasLoader: hasLoader && isActive,
-        onClick: onChange ? function () {
-          return onChange(item, index, prevIndex);
-        } : undefined,
-        items: items
-      });
-    }));
-  });
-};
-export var stepsConfig = {
-  name: 'Steps',
-  tag: 'div',
-  layout: stepsRoot,
-  base: base,
-  variations: {
-    size: sizeCSS,
-    view: viewCSS
-  },
-  defaults: {
-    view: 'default',
-    size: 's'
-  }
-};

package/styled-components/es/components/Steps/Steps.review-doc.mdx

@@ -1,304 +0,0 @@
----
-id: steps
-title: Steps
----
-
-# Steps
-Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
-
-```tsx live
-import { ReactNode } from 'react';
-
-export type StepStatus = 'active' | 'inactive' | 'completed';
-
-export interface StepItemProps {
-  /**
-   * Заголовок
-   */
-  title?: string;
-  /**
-   * Контент, может быть как React компонентом, так и функцией
-   */
-  content?: string | ReactNode | ((status: StepStatus, index: number, items: StepItemProps[]) => ReactNode);
-  /**
-   * Индикатор шага, может быть как React компонентом, так и функцией
-   */
-  indicator?: number | string | ReactNode | ((status: StepStatus, item: StepItemProps) => ReactNode | null);
-  /**
-   * Статус шага: активный, инактивный, завершенный
-   * @description
-   * active - активный шаг
-   * inactive - не пройденный шаг
-   * completed - пройденный шаг
-   */
-  status?: StepStatus;
-  /**
-   * Отключенный шаг
-   * @default false
-   */
-  disabled?: boolean;
-}
-
-interface BaseSteps {
-  /**
-   * Ориентация компонента
-   * @default 'horizontal'
-   */
-  orientation?: 'horizontal' | 'vertical';
-  /**
-   * Выравнивание контента в шагах
-   * @default 'left'
-   */
-  contentAlign?: 'left' | 'center';
-  /**
-   * Включает разделительную линию
-   * @default true
-   */
-  hasLine?: boolean;
-  /**
-   * Индекс текущего шага, для uncontrolled компонента
-   */
-  current?: number;
-  /**
-   * Статус текущего шага, имеет приоритет над item.status
-   */
-  status?: StepStatus;
-  /**
-   * Обработчик изменения шага, делает индикаторы и заголовки шагов кликабельными
-   */
-  onChange?: (item: StepItemProps, index: number, prevIndex?: number) => void;
-  /**
-   * Массив шагов
-   */
-  items: StepItemProps[];
-}
-
-type IndicatorSizeSimple = 8 | 16;
-type IndicatorSize = 24 | 36;
-
-export type Steps = BaseSteps & {
-  /**
-   * Размер шага
-   */
-  size: 'xs' | 's';
-  indicatorSize: never;
-} & {
-  /**
-   * Размер шага
-   */
-  size: 'm' | 'l';
-  /**
-   * Размер индикатора
-   */
-  indicatorSize: IndicatorSize | IndicatorSizeSimple;
-};
-
-```
-
-примеры использования https://codesandbox.io/p/devbox/crzql2?file=%2Fsrc%2FDemo.tsx%3A23%2C1
-
-```
-import React, { useState } from 'react';
-import { fullItems } from './App.data.tsx';
-import { Steps } from './Steps/Steps.tsx';
-import { StepItemProps, StepStatus } from './Steps/Steps.types';
-
-const DemoContent: React.FC<{ onClick: () => void; status: string; index?: number; current?: number }> = ({
-  onClick,
-  status,
-  index,
-  current = 0,
-  children,
-}) => {
-  return (
-    <>
-      <div>Content</div>
-      <button onClick={onClick} disabled={index !== (current || 0)}>
-        {children}
-      </button>
-    </>
-  );
-};
-
-export const DemoWithExternalControl = () => {
-  const items = [
-    {
-      title: 'Title',
-      indicator: '1',
-      content: 'Content',
-    },
-    {
-      title: 'Title',
-      indicator: '2',
-      content: 'Content',
-    },
-    {
-      title: 'Title',
-      indicator: '3',
-      content: 'Content',
-    },
-    {
-      title: 'Title',
-      indicator: '4',
-      content: 'Content',
-    },
-  ];
-
-  const [current, setCurrent] = useState(1);
-  const [status, setStatus] = useState('active');
-
-  const isLast = current === items.length - 1;
-
-  const onClick = () => {
-    if (isLast) {
-      setStatus('completed');
-    } else {
-      setCurrent(current + 1);
-    }
-  };
-
-  return (
-    <>
-      <Steps style={{ width: '1000px' }} current={current} status={status} items={items} />
-      <br />
-      <div>
-        External control:{' '}
-        <button onClick={onClick} style={{ width: '5rem' }}>
-          {isLast ? 'complete' : 'next'}
-        </button>
-      </div>
-      <hr />
-    </>
-  );
-};
-
-export const DemoWithInternalControls = () => {
-  const [current, setCurrent] = useState(undefined);
-  const [status, setStatus] = useState<StepStatus | undefined>();
-
-  const renderContent = (status, index, items) => {
-    const isFirst = index === 0 && current === undefined;
-    const isLast = index === items.length - 1;
-
-    const onNext = () => setCurrent((current) => (current === undefined ? 0 : current + 1));
-    const onComplete = () => {
-      setStatus('completed');
-    };
-
-    return (
-      <DemoContent onClick={isLast ? onComplete : onNext} index={index} status={status} current={current}>
-        {isFirst && 'go'}
-        {isLast && 'complete'}
-        {!isFirst && !isLast && 'next'}
-      </DemoContent>
-    );
-  };
-
-  return (
-    <Steps
-      current={current}
-      status={status}
-      items={[
-        {
-          title: 'Title',
-          indicator: '1',
-          content: renderContent,
-        },
-        {
-          title: 'Title',
-          indicator: '2',
-          content: renderContent,
-        },
-        {
-          title: 'Title',
-          indicator: '3',
-          content: renderContent,
-        },
-        {
-          title: 'Title',
-          indicator: '4',
-          content: renderContent,
-        },
-      ]}
-    />
-  );
-};
-
-export const DemoWithControlledUsage = () => {
-  const [exampleItems, setExampleItems] = useState<StepItemProps[]>(() =>
-    fullItems.map((item) => ({ ...item, status: 'inactive' }))
-  );
-
-  return (
-    <Steps
-      style={{ width: '1000px' }}
-      onChange={(item, index) => {
-        setExampleItems(
-          exampleItems.map((item, itemIndex) => {
-            if (index > itemIndex) {
-              return { ...item, status: 'completed' };
-            }
-
-            if (index === itemIndex) {
-              return { ...item, status: 'active' };
-            }
-
-            return { ...item, status: 'inactive' };
-          })
-        );
-      }}
-      items={exampleItems}
-    />
-  );
-};
-
-export const DemoWithControlledFreeUsage = () => {
-  const [items, setItems] = useState<StepItemProps[]>(() => fullItems.map((item) => ({ ...item, status: 'inactive' })));
-
-  return (
-    <Steps
-      style={{ width: '1000px' }}
-      onChange={(item, index, prevIndex) => {
-        console.log('!!! onChange', index, prevIndex);
-
-        const newItems = [...items];
-        if (prevIndex !== undefined) {
-          newItems[prevIndex].status = 'completed';
-        }
-        newItems[index].status = 'active';
-
-        setItems(newItems);
-      }}
-      items={items}
-    />
-  );
-};
-
-export const DemoControlledWithStatus = () => {
-  const [items, setItems] = useState<StepItemProps[]>(() => fullItems.map(({ status, ...item }) => ({ ...item })));
-  return (
-    <Steps
-      style={{ width: '1000px' }}
-      current={2}
-      status="active"
-      onClick={(item, index) => {
-        setItems(
-          items.map((item, itemIndex) => {
-            if (index > itemIndex) {
-              return { ...item, status: 'completed' };
-            }
-
-            if (index === itemIndex) {
-              return { ...item, status: 'active' };
-            }
-
-            return { ...item, status: 'inactive' };
-          })
-        );
-      }}
-      items={items}
-    />
-  );
-};
-
-```

package/styled-components/es/components/Steps/Steps.styles.js

@@ -1,3 +0,0 @@
-import { css } from 'styled-components';
-import { classes, tokens } from './Steps.tokens';
-export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;&.", "{align-items:center;&.", "{height:var(", ");}&:not(.", "){height:var(", ");}&.", "{&.", "{width:var(", ");height:auto;}&:not(.", "){width:var(", ");height:auto;}}}&.", "{display:inline;flex-direction:column;justify-content:center;&.", "{display:inline-flex;}}"], classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.simple);

package/styled-components/es/components/Steps/Steps.template-doc.mdx

@@ -1,84 +0,0 @@
----
-id: steps
-title: Steps
----
-
-import { PropsTable, Description } from '@site/src/components';
-
-# Steps
-
-<Description name="Steps" />
-<PropsTable name="Steps" />
-
-## Вариант использования с управлением текущим элементом из вне
-
-```tsx live
-import React, { useState } from 'react';
-import { Steps, Button } from '@salutejs/{{ package }}';
-
-const items = [{
-    indicator: 1,
-}, {
-    indicator: 2,
-}, {
-    indicator: 3,
-}];
-
-export function App() {
-    const [current, setCurrent] = useState<number>(0);
-    const onClick = () => setCurrent(() => current + 1);
-
-    return (
-        <section>
-            <Steps items={items}
-                current={current}
-            />
-            <br />
-            <Button view="secondary" onClick={onClick}>
-                Next
-            </Button>
-        </section>
-    );
-}
-```
-
-## Вариант более гибкого использования через onChange и status в items
-
-```tsx live
-import React, { useState } from 'react';
-import { Steps, StepItemProps  } from '@salutejs/{{ package }}';
-
-const initialItems = [{
-    indicator: 1,
-    title: 'Title',
-    content: 'Content',
-}, {
-    indicator: 2,
-    title: 'Title',
-    content: 'Content',
-}, {
-    indicator: 3,
-    title: 'Title',
-    content: 'Content',
-}];
-
-export function App() {
-    const [items, setItems] = useState(initialItems);
-
-    const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
-        if (prevIndex !== undefined) {
-            items[prevIndex].status = 'completed';
-        }
-
-        items[index].status = 'active';
-
-        setItems([...items]);
-    };
-
-    return (
-        <section>
-            <Steps items={items} onChange={onChange} />
-        </section>
-    );
-}
-```