@andreyfedkovich/cozy-ui 0.3.0 → 0.5.0

package/README.md

@@ -31,7 +31,7 @@ npm i @andreyfedkovich/cozy-ui
 - [Design tokens](#design-tokens)
 - [Component API](#component-api)
   - [Layout & content](#layout--content) — `BaseBlock`, `Card`, `CollapsableBlock`, `Collapse`, `Carousel`, `EmptyComponent`, `Spinner`
-  - [Inputs & forms](#inputs--forms) — `Button`, `RadioGroupButton`, `Select`, `DialogSelect`, `TreeDialogSelect`, `InputCaption`, `Label`
+  - [Inputs & forms](#inputs--forms) — `Button`, `RadioGroupButton`, `Input`, `Calendar`, `Checkbox`, `Select`, `DialogSelect`, `TreeDialogSelect`, `InputCaption`, `Label`
   - [Navigation](#navigation) — `Tabs`, `TabsRounded`, `Stepper`
   - [Overlays](#overlays) — `Popover`, `TooltipDark`, `TooltipLight`
   - [Utility](#utility) — `Tag`, `CopyTextTrigger`
@@ -312,6 +312,121 @@ const [view, setView] = useState<"grid" | "list">("grid");
 />;
 ```
 
+#### `Input`
+
+Accessible text field with optional label and validation message for product forms.
+
+| Prop             | Type                                    | Default | Description                          |
+| ---------------- | --------------------------------------- | ------- | ------------------------------------ |
+| `label`                  | `ReactNode`      | —       | Field label above the input.                         |
+| `tooltipContent`         | `ReactNode`      | —       | Help tooltip on the «?» icon next to the label.      |
+| `tooltipPopperClassName` | `string`         | —       | Extra class for the tooltip popper.                  |
+| `error`                  | `string \| null` | —       | Validation message under the input.                  |
+| `disabled`       | `boolean`                               | `false` | Disabled state.                      |
+| `className`      | `string`                                | —       | Wrapper class.                       |
+| `inputClassName` | `string`                                | —       | Native `<input>` class.              |
+| `...rest`        | `InputHTMLAttributes<HTMLInputElement>` | —       | All native input props.              |
+
+```tsx
+import { Input } from "@andreyfedkovich/cozy-ui";
+import { useState } from "react";
+
+const [email, setEmail] = useState("");
+
+<Input
+  label="Email"
+  placeholder="you@company.com"
+  value={email}
+  onChange={(e) => setEmail(e.target.value)}
+/>;
+
+<Input
+  label="Password"
+  type="password"
+  error="Minimum 8 characters."
+/>;
+```
+
+#### `Calendar`
+
+Date picker field for forms. Value is stored as `yyyy-MM-dd` (or `null`); the trigger shows `dd.MM.yyyy`. Includes helpers for parsing and serializing local calendar days.
+
+| Prop                      | Type                              | Default | Description                                              |
+| ------------------------- | --------------------------------- | ------- | -------------------------------------------------------- |
+| `label`                   | `string`                          | —       | Field label.                                             |
+| `required`                | `boolean`                         | `false` | Appends ` *` to the label.                               |
+| `value`                   | `string \| null`                  | —       | Selected date as `yyyy-MM-dd`.                           |
+| `onChange`                | `(value: string \| null) => void` | —       | Called when the user picks or clears a date.             |
+| `minDate`                 | `Date`                            | —       | Earliest selectable day (inclusive, local calendar).     |
+| `error`                   | `string \| null`                  | —       | Validation message under the field.                      |
+| `disabled`                | `boolean`                         | `false` | Disables the trigger.                                    |
+| `tooltipContent`          | `ReactNode`                       | —       | Help tooltip on the «i» icon next to the label.          |
+| `tooltipPopperClassName`  | `string`                          | —       | Extra class for the tooltip popper.                      |
+| `className`               | `string`                          | —       | Wrapper class.                                           |
+
+Exported utilities: `startOfLocalDay`, `todayLocalDay`, `toYmdString`, `parseYmdToLocalDay`.
+
+```tsx
+import {
+  Calendar,
+  todayLocalDay,
+} from "@andreyfedkovich/cozy-ui";
+import { useState } from "react";
+
+const [startDate, setStartDate] = useState<string | null>(null);
+
+<Calendar
+  label="Дата начала"
+  required
+  value={startDate}
+  onChange={setStartDate}
+  minDate={todayLocalDay()}
+/>;
+
+<Calendar
+  label="Дедлайн"
+  value={startDate}
+  onChange={setStartDate}
+  error="Укажите дату."
+  tooltipContent="Дата должна быть не раньше сегодня."
+/>;
+```
+
+#### `Checkbox`
+
+Accessible checkbox with a custom premium box, optional inline label, and validation message.
+
+| Prop                | Type                                         | Default | Description                              |
+| ------------------- | -------------------------------------------- | ------- | ---------------------------------------- |
+| `label`             | `ReactNode`                                  | —       | Label text to the right of the checkbox. |
+| `error`             | `string \| null`                             | —       | Validation message under the control.    |
+| `disabled`          | `boolean`                                    | `false` | Disabled state.                          |
+| `className`         | `string`                                     | —       | Wrapper class.                           |
+| `checkboxClassName` | `string`                                     | —       | Class on the visual checkbox box.        |
+| `...rest`           | `Omit<InputHTMLAttributes<HTMLInputElement>, "type">` | — | All native checkbox props (`checked`, `onChange`, `name`, etc.). |
+
+```tsx
+import { Checkbox } from "@andreyfedkovich/cozy-ui";
+import { useState } from "react";
+
+const [agreed, setAgreed] = useState(false);
+
+<Checkbox
+  label="Согласен с условиями обработки данных"
+  checked={agreed}
+  onChange={(e) => setAgreed(e.target.checked)}
+/>;
+
+<Checkbox label="Уведомления по email" defaultChecked disabled />;
+
+<Checkbox
+  label="Обязательное согласие"
+  checked={agreed}
+  onChange={(e) => setAgreed(e.target.checked)}
+  error={agreed ? null : "Необходимо принять условия."}
+/>;
+```
+
 #### `Select`
 
 Powerful, virtualized-friendly select with `single` and `multiple` modes, search, custom rendering, and table layout.
@@ -327,7 +442,9 @@ Powerful, virtualized-friendly select with `single` and `multiple` modes, search
 | `columns`     | `SelectColumn[]`                      | —          | Required when `template="table"`.    |
 | `isLoading`   | `boolean`                             | `false`    | Show loading state in dropdown.      |
 | `error`       | `string \| null`                      | —          | Validation message.                  |
-| `label`       | `ReactNode`                           | —          | Field label.                         |
+| `label`                  | `ReactNode` | —          | Field label.                                    |
+| `tooltipContent`         | `ReactNode` | —          | Help tooltip on the «?» icon next to the label. |
+| `tooltipPopperClassName` | `string`    | —          | Extra class for the tooltip popper.             |
 
 ```tsx
 import { Select, type CustomOption } from "@andreyfedkovich/cozy-ui";
@@ -354,6 +471,12 @@ const [value, setValue] = useState<CustomOption<unknown, string> | null>(null);
 
 Dialog-based picker for large datasets — search + paginated loading + multi-select.
 
+| Prop                     | Type        | Description                                     |
+| ------------------------ | ----------- | ----------------------------------------------- |
+| `label`                  | `ReactNode` | Field label above the trigger.                  |
+| `tooltipContent`         | `ReactNode` | Help tooltip on the «?» icon next to the label. |
+| `tooltipPopperClassName` | `string`    | Extra class for the tooltip popper.             |
+
 ```tsx
 import { DialogSelect } from "@andreyfedkovich/cozy-ui";
 
@@ -373,6 +496,12 @@ import { DialogSelect } from "@andreyfedkovich/cozy-ui";
 
 Hierarchical picker with lazy-loaded branches and search.
 
+| Prop                     | Type        | Description                                     |
+| ------------------------ | ----------- | ----------------------------------------------- |
+| `label`                  | `ReactNode` | Field label above the trigger.                  |
+| `tooltipContent`         | `ReactNode` | Help tooltip on the «?» icon next to the label. |
+| `tooltipPopperClassName` | `string`    | Extra class for the tooltip popper.             |
+
 ```tsx
 import { TreeDialogSelect } from "@andreyfedkovich/cozy-ui";
 

package/dist-lib/index.d.ts

@@ -25,6 +25,7 @@ import { default as FileReloadIcon } from './fileReload.svg?react';
 import { default as FileSync } from './fileSync.svg?react';
 import { default as FilterIcon } from './filter.svg?react';
 import { default as FolderEditIcon } from './folderEdit.svg?react';
+import { ForwardRefExoticComponent } from 'react';
 import { default as GraduateIcon } from './graduate.svg?react';
 import { default as GridIcon } from './grid.svg?react';
 import { default as HeartIcon } from './heart.svg?react';
@@ -33,6 +34,7 @@ import { default as HistoryBlue } from './historyBlue.svg?react';
 import { default as HomeIcon } from './home.svg?react';
 import { HTMLAttributes } from 'react';
 import { default as InfoIcon } from './info.svg?react';
+import { InputHTMLAttributes } from 'react';
 import { default as IslandIcon } from './island.svg?react';
 import { JSX } from 'react/jsx-runtime';
 import { default as ListIcon } from './list.svg?react';
@@ -48,6 +50,7 @@ import { default as ProfileSearchIcon } from './profileSearch.svg?react';
 import { PropsWithChildren } from 'react';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { default as ReloadIcon } from './reload.svg?react';
 import { default as SchoolIcon } from './school.svg?react';
@@ -131,6 +134,23 @@ declare type ButtonSize = "small" | "medium" | "large";
 
 declare type ButtonVariant = "default" | "primary" | "secondary" | "text" | "link" | "danger";
 
+export declare const Calendar: ({ label, required, value, onChange, minDate, error, disabled, tooltipContent, tooltipPopperClassName, className, }: CalendarProps) => JSX.Element;
+
+export declare interface CalendarProps {
+    label: string;
+    required?: boolean;
+    value?: string | null;
+    onChange: (value: string | null) => void;
+    /** Нижняя граница выбора (включительно), локальный календарный день */
+    minDate?: Date;
+    error?: string | null;
+    disabled?: boolean;
+    /** Подсказка по наведению на иконку «?» справа от подписи */
+    tooltipContent?: ReactNode;
+    tooltipPopperClassName?: string;
+    className?: string;
+}
+
 export { CameraIcon }
 
 export { CancelIcon }
@@ -178,6 +198,14 @@ export { ChartIcon }
 
 export { ChatIcon }
 
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: ReactNode;
+    error?: string | null;
+    checkboxClassName?: string;
+}
+
 export { CheckGreen }
 
 export { ClockFilledIcon }
@@ -228,6 +256,100 @@ export declare enum Colors {
     YELLOW_02 = "#FFA300"
 }
 
+declare type Comment_2 = {
+    id: string;
+    parentId: string | null;
+    author: CommentAuthor;
+    text: string;
+    createdAt: string;
+    editedAt?: string;
+    attachments?: CommentAttachment[];
+    recipients?: CommentAuthor[];
+    repliesCount: number;
+    deleted?: boolean;
+    permissions?: CommentPermissions;
+};
+export { Comment_2 as Comment }
+
+export declare type CommentAttachment = {
+    id: string;
+    name: string;
+    size: number;
+    url?: string;
+    mimeType?: string;
+};
+
+export declare type CommentAuthor = {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+};
+
+export declare type CommentEditInput = {
+    id: string;
+    text: string;
+    attachments: CommentAttachment[];
+    recipients: CommentAuthor[];
+};
+
+export declare const CommentFeed: default_2.ForwardRefExoticComponent<CommentFeedProps & default_2.RefAttributes<CommentFeedHandle>>;
+
+export declare interface CommentFeedHandle {
+    refresh: (parentId?: string | null) => void;
+}
+
+export declare interface CommentFeedProps {
+    loadComments: (p: CommentLoadParams) => Promise<CommentLoadResult>;
+    currentUser: CommentAuthor;
+    recipientsSource?: (params: {
+        search: string;
+        page: number;
+        pageSize: number;
+    }) => Promise<{
+        options: CustomOption<CommentAuthor, string>[];
+        total?: number;
+    }>;
+    onCreate?: (input: CommentMutationInput) => Promise<Comment_2>;
+    onEdit?: (input: CommentEditInput) => Promise<Comment_2>;
+    onDelete?: (id: string) => Promise<void>;
+    onUploadAttachment?: (file: File) => Promise<CommentAttachment>;
+    onDownloadAttachment?: (a: CommentAttachment) => void;
+    onDeleteAttachment?: (a: CommentAttachment) => Promise<void>;
+    permissions?: {
+        canCreate?: boolean;
+        canReply?: boolean;
+    };
+    editWindowMs?: number;
+    pageSize?: number;
+    title?: string;
+    eyebrow?: string;
+    className?: string;
+}
+
+export declare type CommentLoadParams = {
+    parentId: string | null;
+    skip: number;
+    take: number;
+};
+
+export declare type CommentLoadResult = {
+    items: Comment_2[];
+    total: number;
+};
+
+export declare type CommentMutationInput = {
+    parentId: string | null;
+    text: string;
+    attachments: CommentAttachment[];
+    recipients: CommentAuthor[];
+};
+
+export declare type CommentPermissions = {
+    canEdit?: boolean;
+    canDelete?: boolean;
+    canReply?: boolean;
+};
+
 export { CopyIcon }
 
 export declare const CopyTextTrigger: MemoExoticComponent<({ children, onClick, copied, tooltipText, ariaLabel, showIcon, iconOnly, className, }: CopyTextTriggerProps) => JSX.Element>;
@@ -273,6 +395,9 @@ declare type CustomSelectProps<T, S> = {
     onClear?: () => void;
     icon?: ReactNode;
     label?: ReactNode;
+    /** Подсказка по наведению на иконку «?» справа от подписи */
+    tooltipContent?: ReactNode;
+    tooltipPopperClassName?: string;
     onSearch?: (value: string) => void;
     isLoading?: boolean;
     disabled?: boolean;
@@ -346,7 +471,7 @@ export declare interface DetailViewProps {
     id?: string;
 }
 
-export declare const DialogSelect: <T, S extends string | number>({ value, placeholder, loadOptions, onChange, onClear, columns, label, title, searchPlaceholder, selectButtonText, closeButtonText, manualButtonText, onManualAdd, pageSize, debounceMs, disabled, error, className, inputClassName, selectedOptionRender, }: DialogSelectProps<T, S>) => JSX.Element;
+export declare const DialogSelect: <T, S extends string | number>({ value, placeholder, loadOptions, onChange, onClear, columns, label, tooltipContent, tooltipPopperClassName, title, searchPlaceholder, selectButtonText, closeButtonText, manualButtonText, onManualAdd, pageSize, debounceMs, disabled, error, className, inputClassName, selectedOptionRender, }: DialogSelectProps<T, S>) => JSX.Element;
 
 export declare type DialogSelectColumn<T, S extends string | number> = {
     key: string;
@@ -363,6 +488,9 @@ export declare interface DialogSelectProps<T, S extends string | number> {
     onClear?: () => void;
     columns?: DialogSelectColumn<T, S>[];
     label?: ReactNode;
+    /** Подсказка по наведению на иконку «?» справа от подписи */
+    tooltipContent?: ReactNode;
+    tooltipPopperClassName?: string;
     title?: ReactNode;
     searchPlaceholder?: string;
     selectButtonText?: string;
@@ -438,6 +566,8 @@ export { HomeIcon }
 
 export { InfoIcon }
 
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
+
 export declare const InputCaption: React_2.FC<PropsWithChildren<InputCaptionProps>>;
 
 declare interface InputCaptionProps {
@@ -450,6 +580,15 @@ declare interface InputCaptionProps {
 
 export declare type InputCaptionVariant = "neutral" | "error" | "success";
 
+export declare interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: ReactNode;
+    error?: string | null;
+    inputClassName?: string;
+    /** Подсказка по наведению на иконку «?» справа от подписи */
+    tooltipContent?: ReactNode;
+    tooltipPopperClassName?: string;
+}
+
 export { IslandIcon }
 
 export declare const Label: ({ htmlFor, children, className }: LabelProps) => JSX.Element;
@@ -501,6 +640,8 @@ declare type ModeProps<T, S> = {
 
 export { NotebookIcon }
 
+export declare const parseYmdToLocalDay: (value: string | null | undefined) => Date | undefined;
+
 export { PhoneIcon }
 
 export { PlaneIcon }
@@ -603,7 +744,7 @@ declare interface SectionComponentProps extends Omit<DetailSection, "fields"> {
     children?: ReactNode;
 }
 
-export declare const Select: <T, S extends string | number>({ options, value, mode, placeholder, onChange, dropdownRender, optionRender, selectedOptionRender, dropdownIcon, tagRender, dropDownClassName, optionClassName, inputClassName, deleteIconClassName, onDelete, onClear, label, onSearch, searchClassName, searchPlaceholder, isLoading, disabled, onClose, portalTarget, error, fixedHeight, template, columns, total, }: CustomSelectProps<T, S>) => JSX.Element;
+export declare const Select: <T, S extends string | number>({ options, value, mode, placeholder, onChange, dropdownRender, optionRender, selectedOptionRender, dropdownIcon, tagRender, dropDownClassName, optionClassName, inputClassName, deleteIconClassName, onDelete, onClear, label, tooltipContent, tooltipPopperClassName, onSearch, searchClassName, searchPlaceholder, isLoading, disabled, onClose, portalTarget, error, fixedHeight, template, columns, total, }: CustomSelectProps<T, S>) => JSX.Element;
 
 export declare type SelectColumn<T, S> = {
     key: string;
@@ -618,6 +759,8 @@ export declare const Spinner: React_2.FC<Props>;
 
 declare type SpinnerSize = "big" | "small" | "extraSmall" | "medium" | "large";
 
+export declare const startOfLocalDay: (d: Date) => Date;
+
 export declare const Stepper: default_2.FC<StepperProps>;
 
 export declare type StepperItem = {
@@ -688,6 +831,8 @@ export { TaskListIcon }
 
 export { TimesheetIcon }
 
+export declare const todayLocalDay: () => Date;
+
 export declare const TooltipDark: MemoExoticComponent<({ title, content, open: openProp, defaultOpen, trigger, mouseEnterDelay, mouseLeaveDelay, onOpenChange, placement, arrow, children, overlayClassName, getPopupContainer, }: TooltipProps) => JSX.Element>;
 
 export declare const TooltipLight: FC<TooltipLightProps>;
@@ -731,7 +876,10 @@ declare type TooltipTarget = string | HTMLElement | RefObject<HTMLElement | null
 
 export declare type TooltipTrigger = "hover" | "click";
 
-export declare const TreeDialogSelect: <T, S extends string | number>({ value, placeholder, loadChildren: loadChildrenProp, loadNodes, searchNodes, onChange, onClear, label, title, searchPlaceholder, selectButtonText, closeButtonText, confirmButtonText, debounceMs, disabled, error, className, inputClassName, selectedOptionRender, nodeRender, leafConfirmOnly, }: TreeDialogSelectProps<T, S>) => JSX.Element;
+/** `yyyy-MM-dd` for API / form state */
+export declare const toYmdString: (d: Date) => string;
+
+export declare const TreeDialogSelect: <T, S extends string | number>({ value, placeholder, loadChildren: loadChildrenProp, loadNodes, searchNodes, onChange, onClear, label, tooltipContent, tooltipPopperClassName, title, searchPlaceholder, selectButtonText, closeButtonText, confirmButtonText, debounceMs, disabled, error, className, inputClassName, selectedOptionRender, nodeRender, leafConfirmOnly, }: TreeDialogSelectProps<T, S>) => JSX.Element;
 
 /** Pass either {@link loadNodes} or {@link loadChildren} (deprecated alias). */
 export declare type TreeDialogSelectProps<T, S extends string | number> = TreeDialogSelectShared<T, S> & ({
@@ -749,6 +897,9 @@ declare interface TreeDialogSelectShared<T, S extends string | number> {
     onChange?: (node: TreeNode<T, S>) => void;
     onClear?: () => void;
     label?: ReactNode;
+    /** Подсказка по наведению на иконку «?» справа от подписи */
+    tooltipContent?: ReactNode;
+    tooltipPopperClassName?: string;
     title?: ReactNode;
     searchPlaceholder?: string;
     selectButtonText?: string;