@skbkontur/react-ui 0.0.0-dad43298ae → 0.0.0-db9f11da2a

package/components/Button/Button.md

@@ -1,261 +0,0 @@
-### Базовый пример
-По умолчанию, кнопка принимает все пропы `HTMLButtonElement`.
-
-```jsx harmony
-import { Button } from '@skbkontur/react-ui';
-
-<Button onClick={alert} name="report">Создать отчёт</Button>;
-```
-
-### Корневой компонент
-Кнопка может рендерить ссылку в качестве корневого элемента, c помощью пропа `component`. Кнопка принимает все пропы переданного в `component` компонента.
-
-```jsx harmony
-import { Button } from '@skbkontur/react-ui';
-
-<Button component='a' href='https://kontur.ru' target="_blank">Ссылка, но выглядит как кнопка</Button>
-```
-
-### Различные стили
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-const bgStyle = {
-  backgroundImage: `linear-gradient(to right, rgba(130, 130, 130, 0.5) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(130, 130, 130, 0.5) 1px, transparent 1px)`,
-  backgroundSize: `16px 16px`,
-  backgroundPosition: `-8px -8px`,
-  padding: 16
-};
-
-<Gapped vertical>
-  <Gapped>
-    <Button use="default">Default</Button>
-    <Button use="primary">Primary</Button>
-    <Button use="success">Success</Button>
-    <Button use="danger">Danger</Button>
-    <Button use="pay">Pay</Button>
-    <Button use="text">Text</Button>
-    <Button use="backless">Backless</Button>
-    <Button use="link">Link</Button>
-  </Gapped>
-  <Gapped style={bgStyle}>
-    <Button use="default">Default</Button>
-    <Button use="primary">Primary</Button>
-    <Button use="success">Success</Button>
-    <Button use="danger">Danger</Button>
-    <Button use="pay">Pay</Button>
-    <Button use="text">Text</Button>
-    <Button use="backless">Backless</Button>
-    <Button use="link">Link</Button>
-  </Gapped>
-</Gapped>
-```
-
-### Иконка
-В кнопку можно передать иконку. Иконка может находиться как слева от текста кнопки, так и справа и даже в обоих позициях одновременно.
-
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-import { XIcon16Regular } from '@skbkontur/icons/XIcon16Regular';
-
-<Gapped gap={5}>
-  <Button icon={<XIcon16Regular />}>Закрыть</Button>
-  <Button icon={<XIcon16Regular />} rightIcon={<XIcon16Regular />}>Закрыть</Button>
-  <Button rightIcon={<XIcon16Regular />}>Закрыть</Button>
-</Gapped>
-```
-
-### Размер
-
-```jsx harmony
-<div
-  style={{
-    display: "flex",
-    alignItems: "end",
-    gap: '10px',
-  }}
->
-  <Button size="small">Маленькая</Button>
-  <Button size="medium">Средняя</Button>
-  <Button size="large">Большая</Button>
-</div>
-```
-
-### Ширина
-
-```jsx harmony
-<Button width={40}>Закрыть</Button>
-```
-
-### Состояние валидации
-
-```jsx harmony
-import { Gapped, Button } from '@skbkontur/react-ui';
-<Gapped gap={5}>
-  <Button warning>Закрыть</Button>
-  <Button error>Закрыть</Button>
-</Gapped>
-```
-
-### Стрелка
-
-```jsx harmony
-import { Gapped, Button } from '@skbkontur/react-ui';
-
-<Gapped gap={5}>
-  <Button arrow="left" size="medium">
-    Назад
-  </Button>
-  <Button arrow size="medium">
-    Далее
-  </Button>
-</Gapped>
-```
-
-### Состояние загрузки
-
-**Поведение:**
-Кнопка на время нахождения в состоянии загрузки отключается.
-Если в кнопке есть иконка, на время загрузки иконка заменяется на спиннер, если иконки нет — весь контент кнопки заменяется на спиннер. Когда иконки две — заменяется только левая.
-
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-import { MinusCircleIcon16Light } from '@skbkontur/icons/MinusCircleIcon16Light';
-
-const [loading, setLoading] = React.useState(false);
-
-const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
-
-const handleLoadingStart = () => {
-  delay(2000)()
-    .then(() => {
-      setLoading(false);
-    })
-};
-
-const handleClick = () => {
-  setLoading(true);
-  handleLoadingStart();
-};
-
-<Gapped>
-  <Button width={150} onClick={handleClick} loading={loading}>
-    Удалить
-  </Button>
-  <Button icon={<MinusCircleIcon16Light />} width={150} onClick={handleClick} loading={loading}>
-    Удалить
-  </Button>
-  <Button rightIcon={<MinusCircleIcon16Light />} width={150} onClick={handleClick} loading={loading}>
-    Удалить
-  </Button>
-  <Button icon={<MinusCircleIcon16Light />} rightIcon={<MinusCircleIcon16Light />} width={150} onClick={handleClick} loading={loading}>
-    Удалить
-  </Button>
-</Gapped>
-
-```
-
-### Проп темы
-
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-
-<Gapped>
-  <Button theme={{textColorDefault: '#C00000'}}>Ok</Button>
-  <Button use="link" theme={{linkColor: '#C00000'}}>Ok</Button>
-  <Button>Ok</Button>
-</Gapped>
-```
-
-### Кастомизация кнопки-ссылки
-
-```jsx harmony
-import { Toast } from "@skbkontur/react-ui";
-import { CopyIcon16Regular } from "@skbkontur/icons/CopyIcon16Regular"
-
-const textDecorationStyles = {
-  btnLinkTextUnderlineOffset: '1px',
-}
-
-const underlineOnHoverStyles = {
-  btnLinkTextDecorationColor: 'transparent',
-}
-
-const differentColorStyles = {
-  btnLinkColor: 'blue',
-  btnLinkHoverColor: 'blue',
-  btnLinkActiveColor: 'blue',
-}
-
-const stringify = (styles) => {
-  return `${Object.entries(styles).map(([key, value]) => `${key}: "${value}"`).join(", ")}`
-}
-
-const copyStyles = (styles) => {
-  navigator.clipboard.writeText(stringify(styles));
-  Toast.push('Copied');
-}
-
-const tableStyle = {
-  borderCollapse: 'collapse',
-  width: '100%',
-};
-
-const tdStyle = {
-  border: '1px solid',
-  padding: '8px',
-};
-
-const renderExampleRow = (title, styles) => {
-  return (
-    <tr>
-      <td style={tdStyle}>{title}</td>
-      <td style={tdStyle}><Button use={'link'} theme={styles}>Button-link</Button></td>
-      <td style={tdStyle}>
-        <div style={{display: 'flex'}}>
-          <div style={{width: '80%', whiteSpace: 'pre-line'}}>{stringify(styles).replace(/, /g, '\n')}</div>
-          <Button icon={<CopyIcon16Regular />} use={'text'} onClick={() => copyStyles(styles)}/>
-        </div>
-      </td>
-    </tr>
-  )
-}
-
-<table style={tableStyle}>
-  <tr style={{textAlign: 'left'}}>
-    <th style={tdStyle}></th>
-    <th style={tdStyle}>Пример</th>
-    <th style={tdStyle}>Переменные темы</th>
-  </tr>
-  {renderExampleRow('Ссылка с подчеркиванием без отступа', textDecorationStyles)}
-  {renderExampleRow('Ссылка с подчеркиванием при наведении', underlineOnHoverStyles)}
-  {renderExampleRow('Изменение цвета ссылки', differentColorStyles)}
-</table>
-```
-
-### Узкая Кнопка
-
-```jsx harmony
-import { Button } from '@skbkontur/react-ui';
-
-<Button narrow>
-  Создать отчет
-</Button>
-```
-
-### Состояния валидации
-
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-
-<Gapped gap={5}>
-  <Button warning>
-    Warning
-  </Button>
-  <Button error>
-    Error
-  </Button>
-</Gapped>
-```

package/components/Calendar/Calendar.md

@@ -1,276 +0,0 @@
-### Календарь с заданной датой
-
-```jsx harmony
-const [date, setDate] = React.useState("01.11.2021");
-
-<Calendar
-  value={date}
-  onValueChange={setDate}
-/>
-```
-
-### initialMonth и initialYear
-Вне зависимости от того, какая дата выбрана в календаре в данный момент - можно изменить отображение начального года и месяца с помощью пропов `initialMonth` и `initialYear`
-
-```jsx harmony
-import { Checkbox } from '@skbkontur/react-ui';
-
-const [date, setDate] = React.useState("11.12.2021");
-const initialMonth = 7;
-const initialYear = 2000;
-
-<div style={{ display: 'flex' }}>
-  <Calendar
-    value={date}
-    onValueChange={setDate}
-    initialMonth={initialMonth}
-    initialYear={initialYear}
-  />
-  <div style={{ fontSize: '16px' }}>
-    <p>Выбранная дата: {date}</p>
-    <p>Начальный месяц: {initialMonth}</p>
-    <p>Начальный год: {initialYear}</p>
-  </div>
-</div>
-```
-
-### isHoliday
-
-В компонент можно передать функцию `isHoliday`, которая будет получать день строкой формата `dd.mm.yyyy` и флаг `isWeekend`, и должна вернуть `true` для выходного и `false` для рабочего дня.
-
-```jsx harmony
-import * as DatePickerHelpers from '@skbkontur/react-ui/components/DatePicker/DatePickerHelpers';
-
-const [date, setDate] = React.useState();
-
-const createRandomHolidays = () => {
-  const holidays = new Array(10);
-  const today = new Date();
-
-  for (let index = 0; index < holidays.length; index++) {
-    const day = new Date(today.setDate(today.getDate() + 1 + index).valueOf());
-
-    const holiday = {
-      date: day.getDate(),
-      month: day.getMonth(),
-      year: day.getFullYear(),
-    };
-
-    holidays[index] = DatePickerHelpers.formatDate(holiday);
-  }
-
-  return holidays;
-};
-const holidays = createRandomHolidays();
-
-const isHoliday = (day, isWeekend) => {
-  const today = new Date();
-  const holiday = {
-    date: today.getDate(),
-    month: today.getMonth(),
-    year: today.getFullYear(),
-  };
-
-  if (holidays.includes(day)) {
-    return !isWeekend;
-  }
-
-  return isWeekend;
-};
-
-<Calendar isHoliday={isHoliday} value={date} onValueChange={setDate} />;
-```
-
-### Высота
-Календарю можно задать кастомную высоту с помощью переменной темы `calendarWrapperHeight`
-
-- Базовая высота календаря - `330px`
-- Максимальная высота календаря - `450px`
-
-```jsx harmony
-import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { ThemeFactory } from '@skbkontur/react-ui/lib/theming/ThemeFactory';
-
-const [date, setDate] = React.useState("01.11.2021");
-const theme = React.useContext(ThemeContext);
-
-<ThemeContext.Provider
-  value={ThemeFactory.create({ calendarWrapperHeight: '450px' }, theme)}
-  >
-  <Calendar
-    value={date}
-    onValueChange={setDate}
-  />
-</ThemeContext.Provider>
-```
-
-### Кастомный рендер дня
-Для кастомнизации дней в календаре используется метод `renderDay` и компонент [Calendar.Day](#/Components/Calendar/Calendar.Day)
-
-```jsx harmony
-import { Tooltip, Hint, CalendarDay } from '@skbkontur/react-ui';
-
-const initialValue = "02.09.2023";
-
-const [value, setValue] = React.useState(initialValue);
-
-const renderDay = (props) => {
-  const [date, month, year] = props.date.split('.').map(Number);
-
-  if (month == 9 && date > 12 && date < 16) {
-    return (
-      <Tooltip render={() => "Кастомный день"}>
-        <CalendarDay {...props} style={{ background: 'darkgray' }} />
-      </Tooltip>
-    );
-  }
-
-  if (month == 8 && date == 20) {
-    return (
-      <Hint text={date} pos="right middle">
-        <CalendarDay {...props}>
-          <b style={{color: 'orange'}}>#</b>
-        </CalendarDay>
-      </Hint>
-    );
-  }
-
-  return <CalendarDay {...props} />
-};
-
-<Calendar
-  value={value}
-  onValueChange={setValue}
-  renderDay={renderDay}
-/>;
-```
-
-### Календарь с ценами
-Пример с кастомизацией темы и кастомным рендером дня.
-
-```jsx harmony
-import { CalendarDay } from '@skbkontur/react-ui';
-import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { ThemeFactory } from '@skbkontur/react-ui/lib/theming/ThemeFactory';
-
-const theme = React.useContext(ThemeContext);
-
-function renderDay(props) {
-  const [date, month] = props.date.split('.').map(Number);
-  const randomDay = date % 6 === 0 || date % 7 === 0 || date % 8 === 0;
-  const randomPrice = Math.round((date / month) * 1000);
-
-  return (
-    <CalendarDay {...props}>
-      <div style={{ fontSize: theme.calendarCellFontSize }}>{date}</div>
-      <div style={{ fontSize: '11px', fontFeatureSettings: 'tnum', fontVariantNumeric: 'tabular-nums' }}>
-        {randomDay ? <>{randomPrice}&thinsp;₽</> : <span style={{ color: theme.tokenTextColorDisabled }}>—</span>}
-      </div>
-    </CalendarDay>
-  );
-}
-
-const [value, setValue] = React.useState(null);
-
-<ThemeContext.Provider
-  value={ThemeFactory.create({
-    calendarCellWidth: '56px',
-    calendarCellHeight: '56px',
-    calendarCellLineHeight: '1.5',
-    calendarWrapperHeight: '600px',
-    calendarCellBorderRadius: '8px'
-  }, theme)}
->
-  <Calendar value={value} renderDay={renderDay} onValueChange={setValue} />
-</ThemeContext.Provider>
-```
-
-### Локали по умолчанию
-
-```typescript static
-interface CalendarLocale {
-  months?: string[];
-  selectMonthAriaLabel?: string;
-  selectYearAriaLabel?: string;
-  selectChosenAriaLabel?: string;
-  dayCellChooseDateAriaLabel?: string;
-}
-
-const ru_RU = {
-  months: [
-    'Январь',
-    'Февраль',
-    'Март',
-    'Апрель',
-    'Май',
-    'Июнь',
-    'Июль',
-    'Август',
-    'Сентябрь',
-    'Октябрь',
-    'Ноябрь',
-    'Декабрь',
-  ],
-  selectMonthAriaLabel: 'месяц',
-  selectYearAriaLabel: 'год',
-  selectChosenAriaLabel: 'Выбранный',
-  dayCellChooseDateAriaLabel: 'Выбрать дату',
-};
-
-const en_GB = {
-  months: [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ],
-  selectMonthAriaLabel: 'месяц',
-  selectYearAriaLabel: 'год',
-  selectChosenAriaLabel: 'Выбранный',
-  dayCellChooseDateAriaLabel: 'Выбрать дату',
-};
-```
-
-
-### Скролл к месяцу
-
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-
-const initialValue = "02.09.2023";
-const [value, setValue] = React.useState(initialValue);
-const calendarRef = React.useRef(null);
-
-<>
-  <Gapped gap={8} verticalAlign="top">
-    <Calendar
-      value={value}
-      ref={calendarRef}
-      onValueChange={setValue}
-    />
-
-    <Gapped vertical gap={8}>
-      <Button onClick={() => calendarRef.current.scrollToMonth(1, 2023)}>
-        I квартал
-      </Button>
-      <Button onClick={() => calendarRef.current.scrollToMonth(4, 2023)}>
-        II квартал
-      </Button>
-      <Button onClick={() => calendarRef.current.scrollToMonth(7, 2023)}>
-        III квартал
-      </Button>
-      <Button onClick={() => calendarRef.current.scrollToMonth(10, 2023)}>
-        IV квартал
-      </Button>
-    </Gapped>
-  </Gapped>
-</>;
-```

package/components/Calendar/CalendarDay.md

@@ -1,70 +0,0 @@
-Компонент для отрисовки дня в Calendar. Полезен при использовании вместе с его пропом `renderDay`.
-
-### Базовый пример
-```jsx harmony
-import { CalendarDay, Gapped } from '@skbkontur/react-ui';
-
-const date = '20.05.2024';
-const style = { width: 32, height: 32 };
-
-<Gapped>
-  <CalendarDay style={style} date={date} />
-  <CalendarDay style={style} date={date} isToday={true} />
-  <CalendarDay style={style} date={date} isSelected={true} />
-  <CalendarDay style={style} date={date} isDisabled={true} />
-  <CalendarDay style={style} date={date} isWeekend={true} />
-  <CalendarDay style={style}><b>20</b></CalendarDay>
-</Gapped>
-```
-
-### Функции для сравнения строковых дат
-
-```jsx harmony
-const { isBetween, isEqual, isGreater, isGreaterOrEqual, isLess, isLessOrEqual } = require('@skbkontur/react-ui/lib/date/comparison');
-
-const date_a = '10.03.2017';
-const date_b = '11.03.2017';
-
-const Table = ({ children }) => (
-  <table>
-    <thead>
-      <tr>
-        <td>Функция</td>
-        <td>Результат</td>
-      </tr>
-    </thead>
-    <tbody>
-      { children }
-    </tbody>
-  </table>
-)
-
-const Row = ({ code }) => (
-  <tr>
-    <td><code>{code}</code></td>
-    <td><code>{JSON.stringify(eval(code), null, 2)}</code></td>
-  </tr>
-);
-
-<Table>
-  <Row code={`isEqual("${date_a}", "${date_a}")`} />
-  <Row code={`isLess("${date_a}", "${date_b}")`} />
-  <Row code={`isLessOrEqual("${date_a}", "${date_b}")`} />
-  <Row code={`isGreater("${date_b}", "${date_a}")`} />
-  <Row code={`isGreaterOrEqual("${date_b}", "${date_a}")`} />
-  <Row code={`isBetween("${date_b}", "${date_a}", "${date_b}")`} />
-</Table>
-
-```
-
-```typescript static
-export function isEqual(left: string, right: string): boolean;
-export function isLess(left: string, right: string): boolean;
-export function isLessOrEqual(left: string, right: string): boolean;
-export function isGreater(left: string, right: string): boolean;
-export function isGreaterOrEqual(left: string, right: string): boolean;
-export function isBetween(
-  date: string,
-  left?: string,
-  right?: string,
-): boolean;

package/components/Center/Center.md

@@ -1,26 +0,0 @@
-### Пример использования
-
-```jsx harmony
-import { Switcher, Gapped } from '@skbkontur/react-ui';
-
-const [alignAt, setAlignAt] = React.useState("center");
-
-<Gapped vertical gap="12px">
-  <Switcher
-    items={[
-      {label: "Слева", value: "left"},
-      {label: "По центру", value: "center"},
-      {label: "Справа", value: "right"}
-    ]}
-    value={alignAt}
-    onValueChange={setAlignAt}
-  />
-
-  <Center
-    align={alignAt}
-    style={{ background: '#fdd', height: 150 }}
-  >
-    <div style={{ background: 'black', width: 30, height: 30 }} />
-  </Center>
-</Gapped>
-```