@skbkontur/react-ui 0.0.0-a8f1c3e7a1 → 0.0.0-ab4ec97409

package/cjs/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/cjs/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/cjs/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>
-```

package/cjs/components/Checkbox/Checkbox.md

@@ -1,171 +0,0 @@
-### Базовый пример чекбокса
-
-```jsx harmony
-const [checked, setChecked] = React.useState(false);
-
-<Checkbox checked={checked} onValueChange={setChecked}>
-  Обычный чекбокс
-</Checkbox>;
-```
-
-### Cостояния
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-const CheckboxWithState = ({children, ...props}) => {
-  const [checked, setChecked] = React.useState(false);
-
-  return (
-    <Checkbox checked={checked} onValueChange={setChecked} {...props}>
-      {children}
-    </Checkbox>
-  )
-};
-
-<Gapped vertical>
-  <CheckboxWithState>
-    Обычный чекбокс
-  </CheckboxWithState>
-  <CheckboxWithState error>
-    Чекбокс в состоянии ошибки
-  </CheckboxWithState>
-  <CheckboxWithState warning>
-    Чекбокс в состоянии предупреждения
-  </CheckboxWithState>
-</Gapped>
-```
-
-### Размер
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped vertical>
-  <Checkbox size="small" checked>
-    Маленький
-  </Checkbox>
-  <Checkbox size="medium" checked>
-    Средний
-  </Checkbox>
-  <Checkbox size="large" checked>
-    Большой
-  </Checkbox>
-</Gapped>
-```
-
-### focus и blur
-
-```jsx harmony
-import { Button, Checkbox, Gapped } from '@skbkontur/react-ui';
-
-const [checked, setChecked] = React.useState(false);
-
-let checkboxInstance = React.useRef(null);
-
-<Gapped vertical>
-  <Checkbox
-    ref={el => checkboxInstance = el}
-    checked={checked}
-    onValueChange={setChecked}
-    >
-    Пример чекбокса с программным фокусом
-  </Checkbox>
-  <Gapped gap={12}>
-    <Button
-      onClick={() => {
-        checkboxInstance.focus();
-      }}
-    >
-      Дать фокус
-    </Button>
-    <Button
-      onClick={() => {
-        checkboxInstance.blur();
-      }}
-    >
-      Забрать фокус
-    </Button>
-  </Gapped>
-</Gapped>
-```
-
-### Неопределенное состояние
-Чекбокс может находится в неопределённом состоянии. <br/> Это состояние полностью копирует поведение состояния `indeterminate` ([подробнее](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)) из HTML.
-
-Это состояние влияет только на внешний вид и не влияет на состояние `checked`.
-
-```jsx harmony
-import { Button, Checkbox, Gapped } from '@skbkontur/react-ui';
-
-const [checked, setChecked] = React.useState(false);
-
-let checkboxInstance = React.useRef(null);
-
-<Gapped vertical>
-  <Checkbox
-    initialIndeterminate
-    checked={checked}
-    onValueChange={setChecked}
-    ref={el => checkboxInstance = el}
-  >
-    Неопределённый чекбокс
-  </Checkbox>
-  <Gapped>
-    <Button onClick={() => checkboxInstance.setIndeterminate()}>
-      Перевести в неопределённое состояние
-    </Button>
-    <Button onClick={() => checkboxInstance.resetIndeterminate()}>
-      Сбросить неопределённое состояние
-    </Button>
-  </Gapped>
-</Gapped>
-```
-
-### Пример использования неопределённого состояния чекбокса
-
-```jsx harmony
-const [checkedSiblings, setCheckedSiblings] = React.useState([]);
-const siblingCheckboxes = [1, 2];
-
-let parentCheckboxRef;
-
-React.useEffect(() => {
-  if (checkedSiblings.length === 0 || checkedSiblings.length === siblingCheckboxes.length) {
-    parentCheckboxRef.resetIndeterminate();
-  } else if (checkedSiblings.length !== 0) {
-    parentCheckboxRef.setIndeterminate();
-  }
-}, [JSON.stringify(checkedSiblings)]);
-
-<>
-  <Checkbox checked={checkedSiblings.length === siblingCheckboxes.length} ref={(el) => (parentCheckboxRef = el)}>
-    Родитель
-  </Checkbox>
-  <div style={{ display: 'flex', flexDirection: 'column', marginLeft: '20px' }}>
-    {siblingCheckboxes.map((id) => {
-      return (
-        <Checkbox
-          key={id}
-          checked={checkedSiblings.includes(id)}
-          onValueChange={() => {
-            const siblingIndex = checkedSiblings.indexOf(id);
-
-            if (siblingIndex === -1) {
-              setCheckedSiblings((prev) => [...prev, id]);
-            } else {
-              setCheckedSiblings((prev) =>
-                prev.filter((siblingId) => {
-                  return siblingId !== id;
-                }),
-              );
-            }
-          }}
-        >
-          Ребёнок ({id})
-        </Checkbox>
-      );
-    })}
-  </div>
-</>
-```