@salutejs/plasma-new-hope 0.159.0-canary.1443.11131308290.0 → 0.159.0-canary.1443.11139400186.0

package/styled-components/cjs/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.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}
-    />
-  );
-};
-
-```