@skbkontur/react-ui 0.0.0-68e286f9fe → 0.0.0-6911f001e4

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