@gravity-ui/date-components 1.0.0

package/dist/esm/components/RelativeDatePicker/hooks/useRelativeDatePickerState.d.ts

@@ -0,0 +1,36 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { DateFieldState } from '../../DateField';
+import type { DatePickerState } from '../../DatePicker';
+import type { RelativeDateFieldState } from '../../RelativeDateField';
+import type { DateFieldBase } from '../../types';
+export type Value = {
+    type: 'absolute';
+    value: DateTime;
+} | {
+    type: 'relative';
+    value: string;
+};
+export type RelativeDatePickerMode = Value['type'];
+export interface RelativeDatePickerStateOptions extends DateFieldBase<Value> {
+}
+export interface RelativeDatePickerState {
+    value: Value | null;
+    setValue: (value: Value | null) => void;
+    mode: RelativeDatePickerMode;
+    setMode: (mode: RelativeDatePickerMode) => void;
+    datePickerState: DatePickerState;
+    dateFieldState: DateFieldState;
+    relativeDateState: RelativeDateFieldState;
+    selectedDate: DateTime | null;
+    /**
+     * Whether the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the value is immutable.
+     */
+    readOnly?: boolean;
+    isActive: boolean;
+    setActive: (isActive: boolean) => void;
+}
+export declare function useRelativeDatePickerState(props: RelativeDatePickerStateOptions): RelativeDatePickerState;

package/dist/esm/components/RelativeDatePicker/hooks/useRelativeDatePickerState.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import { useDateFieldState } from '../../DateField';
+import { useDatePickerState } from '../../DatePicker';
+import { useRelativeDateFieldState } from '../../RelativeDateField';
+import { useControlledState } from '../../hooks/useControlledState';
+export function useRelativeDatePickerState(props) {
+    const [value, setValue] = useControlledState(props.value, props.defaultValue, props.onUpdate);
+    const [mode, setMode] = React.useState((value === null || value === void 0 ? void 0 : value.type) === 'relative' ? 'relative' : 'absolute');
+    const [prevValue, setPrevValue] = React.useState(value);
+    if (value !== prevValue) {
+        setPrevValue(value);
+        if (value) {
+            setMode(value.type);
+        }
+    }
+    const [valueDate, setValueDate] = React.useState((value === null || value === void 0 ? void 0 : value.type) === 'absolute' ? value.value : null);
+    if ((value === null || value === void 0 ? void 0 : value.type) === 'absolute' && value.value !== valueDate) {
+        setValueDate(value.value);
+    }
+    const datePickerState = useDatePickerState({
+        value: valueDate,
+        onUpdate: (date) => {
+            setValueDate(date);
+            if ((value === null || value === void 0 ? void 0 : value.type) === 'absolute' && (date === null || date === void 0 ? void 0 : date.isSame(value.value))) {
+                return;
+            }
+            setValue(date ? { type: 'absolute', value: date } : null);
+        },
+        format: props.format,
+        placeholderValue: props.placeholderValue,
+        timeZone: props.timeZone,
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+    });
+    const dateFieldState = useDateFieldState({
+        value: valueDate,
+        onUpdate: datePickerState.setValue,
+        format: props.format,
+        placeholderValue: props.placeholderValue,
+        timeZone: props.timeZone,
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+    });
+    const [valueRelative, setValueRelative] = React.useState((value === null || value === void 0 ? void 0 : value.type) === 'relative' ? value.value : null);
+    if ((value === null || value === void 0 ? void 0 : value.type) === 'relative' && value.value !== valueRelative) {
+        setValueRelative(value.value);
+    }
+    const relativeDateState = useRelativeDateFieldState({
+        value: valueRelative,
+        onUpdate: (v) => {
+            setValueRelative(v);
+            if ((value === null || value === void 0 ? void 0 : value.type) === 'relative' && v === value.value) {
+                return;
+            }
+            setValue(v ? { type: 'relative', value: v } : null);
+        },
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+    });
+    if (!value) {
+        if (mode === 'absolute' && valueDate) {
+            setValueDate(null);
+        }
+        else if (mode === 'relative' && valueRelative) {
+            setValueRelative(null);
+        }
+    }
+    const selectedDate = mode === 'relative' ? relativeDateState.parsedDate : datePickerState.dateValue;
+    const [isActive, setActive] = React.useState(false);
+    return {
+        value: value !== null && value !== void 0 ? value : null,
+        setValue(v) {
+            if (props.readOnly || props.disabled) {
+                return;
+            }
+            setValue(v);
+        },
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+        mode,
+        setMode(newMode) {
+            if (props.readOnly || props.disabled || newMode === mode) {
+                return;
+            }
+            setMode(newMode);
+            if (newMode === 'relative') {
+                if ((!value && valueRelative) || value) {
+                    setValue(valueRelative ? { type: 'relative', value: valueRelative } : null);
+                }
+            }
+            else if ((!value && valueDate) || value) {
+                setValue(valueDate ? { type: 'absolute', value: valueDate } : null);
+            }
+        },
+        datePickerState,
+        dateFieldState,
+        relativeDateState,
+        selectedDate,
+        isActive,
+        setActive,
+    };
+}

package/dist/esm/components/RelativeDatePicker/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "Calendar": "Calendar",
+  "Formula input mode": "Formula input mode"
+}

package/dist/esm/components/RelativeDatePicker/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "Calendar" | "Formula input mode", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/esm/components/RelativeDatePicker/i18n/index.js

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}relative-date-picker`);

package/dist/esm/components/RelativeDatePicker/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "Calendar": "Календарь",
+  "Formula input mode": "Режим ввода формулы"
+}

package/dist/esm/components/RelativeDatePicker/index.d.ts

@@ -0,0 +1,3 @@
+export * from './RelativeDatePicker';
+export * from './hooks/useRelativeDatePickerState';
+export * from './hooks/useRelativeDatePickerProps';

package/dist/esm/components/RelativeDatePicker/index.js

@@ -0,0 +1,3 @@
+export * from './RelativeDatePicker';
+export * from './hooks/useRelativeDatePickerState';
+export * from './hooks/useRelativeDatePickerProps';

package/dist/esm/components/hooks/useControlledState.d.ts

@@ -0,0 +1 @@
+export declare function useControlledState<T, C extends T = T>(value: T, defaultValue: T, onUpdate?: (value: C, ...args: any[]) => void): readonly [T, (newValue: C, ...args: any[]) => void];

package/dist/esm/components/hooks/useControlledState.js

@@ -0,0 +1,23 @@
+import React from 'react';
+export function useControlledState(value, defaultValue, onUpdate) {
+    const [innerValue, setInnerValue] = React.useState(defaultValue);
+    const [wasControlled] = React.useState(value !== undefined);
+    const isControlled = value !== undefined;
+    if (wasControlled !== isControlled) {
+        console.warn(`WARN: A component changed from ${wasControlled ? 'controlled' : 'uncontrolled'} to ${isControlled ? 'controlled' : 'uncontrolled'}.`);
+    }
+    const currentValueRef = React.useRef(isControlled ? value : defaultValue);
+    React.useEffect(() => {
+        currentValueRef.current = value;
+    }, [value]);
+    const setState = React.useCallback((newValue, ...args) => {
+        if (!Object.is(currentValueRef.current, newValue)) {
+            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(newValue, ...args);
+        }
+        if (!isControlled) {
+            currentValueRef.current = newValue;
+            setInnerValue(newValue);
+        }
+    }, [isControlled, onUpdate]);
+    return [isControlled ? value : innerValue, setState];
+}

package/dist/esm/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Calendar';
+export * from './DateField';
+export * from './DatePicker';
+export * from './RelativeDateField';
+export * from './RelativeDatePicker';

package/dist/esm/components/index.js

@@ -0,0 +1,5 @@
+export * from './Calendar';
+export * from './DateField';
+export * from './DatePicker';
+export * from './RelativeDateField';
+export * from './RelativeDatePicker';

package/dist/esm/components/types/datePicker.d.ts

@@ -0,0 +1,16 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { InputBase, Validation, ValueBase } from './inputs';
+export interface DateFieldBase<T = DateTime> extends ValueBase<T, T | null>, InputBase, Validation {
+    /** The minimum allowed date that a user may select. */
+    minValue?: DateTime;
+    /** The maximum allowed date that a user may select. */
+    maxValue?: DateTime;
+    /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
+    isDateUnavailable?: (date: DateTime) => boolean;
+    /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */
+    format?: string;
+    /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */
+    placeholderValue?: DateTime;
+    /** */
+    timeZone?: string;
+}

package/dist/esm/components/types/datePicker.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/types/events.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export interface KeyboardEvents {
+    /** Handler that is called when a key is pressed. */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    /** Handler that is called when a key is released. */
+    onKeyUp?: (e: React.KeyboardEvent) => void;
+}
+export interface FocusEvents<Target = Element> {
+    /** Handler that is called when the element receives focus. */
+    onFocus?: (e: React.FocusEvent<Target>) => void;
+    /** Handler that is called when the element loses focus. */
+    onBlur?: (e: React.FocusEvent<Target>) => void;
+}
+export interface FocusableProps<Target = Element> extends FocusEvents<Target> {
+    /** Whether the element should receive focus on render. */
+    autoFocus?: boolean;
+}

package/dist/esm/components/types/events.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/types/index.d.ts

@@ -0,0 +1,4 @@
+export type * from './datePicker';
+export type * from './inputs';
+export type * from './style';
+export type * from './events';

package/dist/esm/components/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/types/inputs.d.ts

@@ -0,0 +1,79 @@
+/// <reference types="react" />
+import type { TextInputProps as TextInputBaseProps, TextInputPin, TextInputSize, TextInputView } from '@gravity-ui/uikit';
+export type ValidationState = 'invalid';
+export interface AccessibilityProps {
+    /** Defines a string value that labels the current element. */
+    'aria-label'?: string;
+    /** Identifies the element (or elements) that labels the current element. */
+    'aria-labelledby'?: string;
+    /** Identifies the element (or elements) that describes the object. */
+    'aria-describedby'?: string;
+    /** Identifies the element (or elements) that provide a detailed, extended description for the object. */
+    'aria-details'?: string;
+}
+export interface ValueBase<T, C = T> {
+    /** The current value (controlled). */
+    value?: T | null;
+    /** The default value (uncontrolled). */
+    defaultValue?: T;
+    /** Handler that is called when the value changes. */
+    onUpdate?: (value: C) => void;
+}
+export interface Validation {
+    /** Whether the input should display its "invalid" visual styling */
+    validationState?: ValidationState;
+    /** An error message for the field */
+    errorMessage?: React.ReactNode;
+}
+export interface DomProps {
+    /** The element's unique identifier. */
+    id?: string;
+}
+export interface InputBase {
+    /**
+     * Whether the field is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the calendar value is immutable.
+     * @default false
+     */
+    readOnly?: boolean;
+}
+export interface TextInputProps {
+    /** The size of the element */
+    size?: TextInputSize;
+    /**
+     * Corner rounding
+     * @default 'round-round'
+     */
+    pin?: TextInputPin;
+    /** Control view */
+    view?: TextInputView;
+    /** Inner field label */
+    label?: TextInputBaseProps['label'];
+    /** Text that appears in the field when it has no value set */
+    placeholder?: string;
+    /**
+     * Show clear button
+     * @default false
+     */
+    hasClear?: boolean;
+}
+export interface TextInputExtendProps {
+    /**
+     * User`s node rendered before label and input
+     */
+    leftContent?: TextInputBaseProps['leftContent'];
+    /**
+     * User`s node rendered after input and clear button
+     */
+    rightContent?: TextInputBaseProps['rightContent'];
+}
+export interface RangeValue<T> {
+    /** The start value of the range. */
+    start: T;
+    /** The end value of the range. */
+    end: T;
+}

package/dist/esm/components/types/inputs.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/types/style.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface StyleProps {
+    /** Sets inline style for the element. */
+    style?: React.CSSProperties;
+    /** Sets the CSS className for the element. */
+    className?: string;
+}

package/dist/esm/components/types/style.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/utils/getButtonSizeForInput.d.ts

@@ -0,0 +1,2 @@
+import type { TextInputSize } from '@gravity-ui/uikit';
+export declare function getButtonSizeForInput(size: TextInputSize | undefined): "s" | "m" | "l" | "xs";

package/dist/esm/components/utils/getButtonSizeForInput.js

@@ -0,0 +1,16 @@
+export function getButtonSizeForInput(size) {
+    switch (size) {
+        case 'xl': {
+            return 'l';
+        }
+        case 'l': {
+            return 'm';
+        }
+        case 's': {
+            return 'xs';
+        }
+        default: {
+            return 's';
+        }
+    }
+}

package/dist/esm/components/utils/mergeProps.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    [key: string]: any;
+}
+type PropsArgs = Props | undefined | null;
+type TupleTypes<T> = {
+    [P in keyof T]: T[P];
+} extends {
+    [key: number]: infer V;
+} ? NullToObject<V> : never;
+type NullToObject<T> = T extends null | undefined ? {} : T;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+export declare function mergeProps<T extends PropsArgs[]>(...args: T): UnionToIntersection<TupleTypes<T>>;
+export {};

package/dist/esm/components/utils/mergeProps.js

@@ -0,0 +1,43 @@
+export function mergeProps(...args) {
+    const result = Object.assign({}, args[0]);
+    for (let i = 1; i < args.length; i++) {
+        const props = args[i];
+        if (!props) {
+            continue;
+        }
+        for (const key of Object.keys(props)) {
+            const left = result[key];
+            const right = props[key];
+            if (typeof left === 'function' &&
+                typeof right === 'function' &&
+                key.startsWith('on') &&
+                key.charCodeAt(2) >= /* A */ 65 &&
+                key.charCodeAt(2) <= /* Z */ 90) {
+                result[key] = chain(left, right);
+            }
+            else if (key === 'className' &&
+                typeof left === 'string' &&
+                typeof right === 'string') {
+                result[key] = left + ' ' + right;
+            }
+            else if (key === 'controlProps' &&
+                typeof left === 'object' &&
+                typeof right === 'object') {
+                result[key] = mergeProps(left, right);
+            }
+            else {
+                result[key] = right === undefined ? left : right;
+            }
+        }
+    }
+    return result;
+}
+function chain(...fns) {
+    return (...args) => {
+        for (const callback of fns) {
+            if (typeof callback === 'function') {
+                callback(...args);
+            }
+        }
+    };
+}

package/dist/esm/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/esm/utils/cn.d.ts

@@ -0,0 +1,2 @@
+export declare const NAMESPACE = "g-date-";
+export declare const block: import("@bem-react/classname").ClassNameInitilizer;

package/dist/esm/utils/cn.js

@@ -0,0 +1,3 @@
+import { withNaming } from '@bem-react/classname';
+export const NAMESPACE = 'g-date-';
+export const block = withNaming({ n: NAMESPACE, e: '__', m: '_' });

package/package.json

@@ -0,0 +1,119 @@
+{
+  "name": "@gravity-ui/date-components",
+  "version": "1.0.0",
+  "description": "",
+  "license": "MIT",
+  "main": "dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/esm/index.d.js",
+      "import": "./dist/esm/index.js",
+      "default": "./dist/cjs/index.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gravity-ui/date-components.git"
+  },
+  "bugs": {
+    "url": "https://github.com/gravity-ui/date-components/issues"
+  },
+  "homepage": "https://github.com/gravity-ui/date-components#readme",
+  "scripts": {
+    "prepare": "husky install",
+    "lint": "run-p lint:*",
+    "lint:js": "eslint --ext .js,.jsx,.ts,.tsx .",
+    "lint:styles": "stylelint 'src/**/*.scss'",
+    "lint:other": "npm run prettier -- --check",
+    "prettier": "prettier '**/*.{md,yaml,yml,json}'",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "clean": "gulp clean",
+    "build": "gulp",
+    "start": "storybook dev",
+    "build-storybook": "storybook build -c .storybook -o storybook-static",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@bem-react/classname": "^1.6.0",
+    "@gravity-ui/date-utils": "^1.4.1",
+    "@gravity-ui/icons": "^2.2.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@commitlint/cli": "^17.6.7",
+    "@commitlint/config-conventional": "^17.6.7",
+    "@gravity-ui/eslint-config": "^2.1.1",
+    "@gravity-ui/prettier-config": "^1.0.1",
+    "@gravity-ui/stylelint-config": "^2.0.0",
+    "@gravity-ui/tsconfig": "^1.0.0",
+    "@gravity-ui/uikit": "^5.0.0",
+    "@storybook/addon-a11y": "^7.2.1",
+    "@storybook/addon-essentials": "^7.2.1",
+    "@storybook/api": "^7.2.1",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.2.1",
+    "@storybook/react-webpack5": "^7.2.1",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.5.3",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.45.0",
+    "eslint-plugin-testing-library": "^5.11.0",
+    "gulp": "^4.0.2",
+    "gulp-cli": "^2.3.0",
+    "gulp-dart-sass": "^1.1.0",
+    "gulp-replace": "^1.1.4",
+    "gulp-typescript": "^5.0.1",
+    "husky": "^8.0.3",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-transform-css": "^6.0.1",
+    "nano-staged": "^0.8.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.64.1",
+    "sass-loader": "^13.3.2",
+    "storybook": "^7.2.1",
+    "style-loader": "^3.3.3",
+    "stylelint": "^15.10.2",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.1.6"
+  },
+  "peerDependencies": {
+    "@gravity-ui/uikit": "^5.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "overrides": {
+    "stylelint": "^15.10.2"
+  },
+  "nano-staged": {
+    "*.{scss}": [
+      "stylelint --fix --quiet"
+    ],
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix --quiet"
+    ],
+    "*.{md,json,yml,yaml}": [
+      "prettier --write"
+    ]
+  }
+}