chili-ui 0.0.1

package/leda/components/CheckBox/CheckBox.test.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CheckBox } from './index';
+import type { ChangeEvent } from './types';
+
+describe('CheckBox SNAPSHOTS', () => {
+  it('should render', () => {
+    const { container } = render(<CheckBox id="test" />);
+
+    expect(container.querySelector('input')).toBeDefined();
+
+    expect(container.querySelector('label')).toBeDefined();
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render controllable mode', () => {
+    const eventMatcher = expect.objectContaining({
+      component: expect.objectContaining({
+        value: false,
+        name: 'checker',
+      }),
+    });
+    const Wrapper = () => {
+      const [value, setValue] = React.useState(true);
+      const handleChange = (ev: ChangeEvent) => {
+        expect(ev).toMatchObject(eventMatcher);
+        setValue(!value);
+      };
+      return (
+        <CheckBox onChange={handleChange} id="test" name="checker" value={value} />
+      );
+    };
+    const { container } = render(<Wrapper />);
+
+    const input = document.querySelector('input');
+
+    expect(input).toBeInTheDocument();
+
+    expect(input?.checked).toBeTruthy();
+
+    expect(container).toMatchSnapshot();
+
+    const label = document.querySelector('label');
+
+    expect(label).not.toEqual(null);
+
+    userEvent.click(label as HTMLElement);
+
+    expect(input?.checked).toBeFalsy();
+
+    expect(container).toMatchSnapshot();
+  });
+});
+
+describe('CheckBox HANDLERS', () => {
+  it('should trigger onChange', () => {
+    const onChange = jest.fn();
+    const eventMatcher = expect.objectContaining({
+      component: expect.objectContaining({
+        value: true,
+        name: 'chegevara',
+      }),
+    });
+    const { container } = render(<CheckBox onChange={onChange} id="test" name="chegevara" />);
+
+    const input = container.querySelector('input');
+
+    expect(input).toBeInTheDocument();
+
+    expect(input?.checked).toBeFalsy();
+
+    userEvent.click(container.querySelector('label') as HTMLElement);
+
+    expect(input?.checked).toBeTruthy();
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+
+    expect(onChange).toHaveBeenCalledWith(eventMatcher);
+  });
+
+  describe('should trigger onClick', () => {
+    it('should trigger onClick', () => {
+      const onClick = jest.fn();
+
+      const { container } = render(<CheckBox id="test" onClick={onClick} />);
+
+      const input = container.querySelector('input');
+
+      expect(input).toBeInTheDocument();
+
+      expect(input?.checked).toBeFalsy();
+      // кликнем по инпуту
+      userEvent.click(container.querySelector('label') as HTMLElement);
+      // проверим, что значение изменилось
+      expect(input?.checked).toBeTruthy();
+
+      // проверим, что был вызван обработик
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onChange if checkbox is disabled', () => {
+      const onChange = jest.fn();
+      const { container } = render(<CheckBox isDisabled onChange={onChange} />);
+      const input = container.querySelector('input');
+
+      expect(input).toBeInTheDocument();
+
+      expect(input?.disabled).toBeTruthy();
+      // вызываем click
+      userEvent.click(container.querySelector('label') as HTMLElement);
+      // проверим, что значение в инпуте не изменилось
+      expect(input?.checked).toBeFalsy();
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+});
+
+describe('CheckBox ATTRIBUTES', () => {
+  describe(', should add classname "semi" to wrapper', () => {
+    it('should have className', () => {
+      const { container } = render(<CheckBox _semi />);
+
+      expect(container.querySelector('input')).toHaveClass('checkbox-input');
+
+      expect(container.querySelector('label')).toHaveClass('checkbox-label');
+
+      expect(container.querySelector('label.checkbox-label')).toHaveClass('semi');
+    });
+
+    it(', should convert props to classes', () => {
+      const { container } = render(<CheckBox _active />);
+
+      expect(container.querySelector('.checkbox-label.box')).toBeNull();
+
+      expect(container.querySelector('.checkbox-label.active')).toBeInTheDocument();
+    });
+
+    it('classes passed through className should not override prop-classes', () => {
+      const { container } = render(<CheckBox className="test" _active />);
+
+      expect(container.querySelector('.checkbox-label.test')).toBeInTheDocument();
+
+      expect(container.querySelector('.checkbox-label.active')).toBeInTheDocument();
+    });
+  });
+
+  describe('children prop', () => {
+    it('children should have correct className', () => {
+      const { container } = render(<CheckBox><div className="lvl1"><span className="lvl2">TEXT</span></div></CheckBox>);
+
+      expect(container.querySelector('div.lvl1')).toBeInTheDocument();
+
+      expect(container.querySelector('span.lvl2')).toBeInTheDocument();
+    });
+
+    it('should have children', () => {
+      const { container } = render(<CheckBox><div className="lvl1"><span className="lvl2">TEXT</span></div></CheckBox>);
+
+      expect(container.children).toBeInstanceOf(HTMLCollection);
+
+      expect(container.querySelector('div.lvl1 span.lvl2')?.textContent).toEqual('TEXT');
+    });
+
+    it('children should be passed to .checkbox-label', () => {
+      const { container } = render(<CheckBox><div className="lvl1"><span className="lvl2">TEXT</span></div></CheckBox>);
+
+      expect(container.querySelector('.checkbox-label div.lvl1 span.lvl2')).toBeInTheDocument();
+    });
+  });
+});

package/leda/components/CheckBox/__snapshots__/CheckBox.test.tsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CheckBox SNAPSHOTS should render 1`] = `
+<div>
+  <span>
+    <input
+      class="checkbox-input"
+      id="test"
+      type="checkbox"
+    />
+    <label
+      class="checkbox-label"
+      for="test"
+    />
+  </span>
+</div>
+`;
+
+exports[`CheckBox SNAPSHOTS should render controllable mode 1`] = `
+<div>
+  <span>
+    <input
+      checked=""
+      class="checkbox-input"
+      id="test"
+      name="checker"
+      type="checkbox"
+    />
+    <label
+      class="checkbox-label"
+      for="test"
+    />
+  </span>
+</div>
+`;
+
+exports[`CheckBox SNAPSHOTS should render controllable mode 2`] = `
+<div>
+  <span>
+    <input
+      checked=""
+      class="checkbox-input"
+      id="test"
+      name="checker"
+      type="checkbox"
+    />
+    <label
+      class="checkbox-label"
+      for="test"
+    />
+  </span>
+</div>
+`;

package/leda/components/CheckBox/handlers.ts

@@ -0,0 +1,47 @@
+import type * as React from 'react';
+import { isFunction, isNil } from 'lodash';
+import type { SetState } from '../../commonTypes';
+import type { CheckBoxProps } from './types';
+
+export const createChangeHandler = (
+  props: CheckBoxProps,
+  setUncontrolledValue: SetState<boolean>,
+  validateCurrent: (value?: boolean) => boolean,
+): React.ChangeEventHandler<HTMLInputElement> => (ev) => {
+  const { onChange, name } = props;
+
+  setUncontrolledValue(ev.currentTarget.checked);
+
+  validateCurrent(ev.currentTarget.checked);
+
+  if (!isFunction(onChange)) return;
+
+  const customEvent = {
+    ...ev,
+    component: {
+      name,
+      value: ev.currentTarget.checked,
+    },
+  };
+
+  onChange(customEvent);
+};
+
+export const createResetHandler = (
+  props: CheckBoxProps,
+  setValue: SetState<boolean>,
+) => () => {
+  const newValue = (() => {
+    if (!isNil(props.defaultValue)) return props.defaultValue;
+    return false;
+  })();
+
+  setValue(newValue);
+
+  props.onChange?.({
+    component: {
+      name: props.name,
+      value: newValue,
+    },
+  });
+};

package/leda/components/CheckBox/index.tsx

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import {
+  useTheme, useElement, generateId, useValue, useProps,
+} from '../../utils';
+import { COMPONENTS_NAMESPACES } from '../../constants';
+import { createChangeHandler, createResetHandler } from './handlers';
+import type { CheckBoxProps } from './types';
+import { LedaContext } from '../LedaProvider';
+import {
+  Div, Icon, IconTypes, Label,
+} from '../../index';
+import { useValidation } from '../Validation';
+
+export const CheckBox = React.forwardRef((props: CheckBoxProps, ref?: React.Ref<HTMLElement>): React.ReactElement => {
+  const {
+    checkboxIcon,
+    children,
+    className,
+    defaultValue = false,
+    form,
+    id,
+    inputRender,
+    isDisabled,
+    isRequired,
+    labelRender,
+    name,
+    onChange,
+    theme: themeProp,
+    value: valueProp,
+    wrapperRender,
+    ...restProps
+  } = useProps(props);
+
+  const theme = useTheme(props.theme, COMPONENTS_NAMESPACES.checkBox);
+
+  const [value, setUncontrolledValue] = useValue(valueProp, defaultValue);
+
+  const { renders: { [COMPONENTS_NAMESPACES.checkBox]: checkBoxRenders } } = React.useContext(LedaContext);
+
+  const { isValid, InvalidMessage, validateCurrent } = useValidation(props, {
+    value,
+  }, {
+    reset: createResetHandler(props, setUncontrolledValue),
+  });
+
+  const Wrapper = useElement(
+    'Wrapper',
+    Div,
+    wrapperRender || checkBoxRenders.wrapperRender,
+    props,
+  );
+
+  const LabelElement = useElement(
+    'Label',
+    Label,
+    labelRender || checkBoxRenders.labelRender,
+    props,
+  );
+
+  const Input = useElement(
+    'Input',
+    'input' as unknown as React.FC<React.InputHTMLAttributes<HTMLInputElement>>,
+    inputRender || checkBoxRenders.inputRender,
+    props,
+  );
+
+  const checkBoxId = id || `checkbox-${generateId()}`;
+
+  const handleChange = createChangeHandler(props, setUncontrolledValue, validateCurrent);
+
+  const iconClassNames = classnames(
+    theme.icon,
+    value ? theme.iconChecked : theme.iconUnchecked,
+  );
+
+  const labelClassNames = classnames(
+    theme.label,
+    {
+      [theme.required]: isRequired,
+      [theme.invalid]: !isValid,
+    },
+  );
+
+  return (
+    <Wrapper
+      ref={ref}
+      className={className}
+    >
+      <Input
+        {...restProps}
+        id={checkBoxId}
+        onChange={handleChange}
+        type="checkbox"
+        name={name}
+        className={theme.input}
+        disabled={isDisabled}
+        checked={value}
+      />
+      <LabelElement
+        htmlFor={checkBoxId}
+        className={labelClassNames}
+      >
+        <Icon
+          icon={(() => {
+            if (checkboxIcon) return checkboxIcon;
+            return value
+              ? IconTypes.Icons.CheckSquare
+              : IconTypes.Icons.Square;
+          })()}
+          className={iconClassNames}
+        />
+        {children}
+      </LabelElement>
+      {!isValid && (
+        <InvalidMessage />
+      )}
+    </Wrapper>
+  );
+}) as React.FC<CheckBoxProps>;
+
+CheckBox.displayName = 'CheckBox';

package/leda/components/CheckBox/theme.ts

@@ -0,0 +1,11 @@
+/* eslint-disable key-spacing */
+export const defaultCheckBoxTheme = {
+  input:                    'ld-checkbox-input',
+  label:                    'ld-checkbox-label',
+  icon:                     'ld-checkbox-icon',
+  iconChecked:              'ld-checked',
+  iconUnchecked:            'ld-unchecked',
+  invalid:                  'ld-checkbox-invalid',
+  required:                 'ld-checkbox-required',
+};
+/* eslint-enable key-spacing */

package/leda/components/CheckBox/types.ts

@@ -0,0 +1,54 @@
+import type * as React from 'react';
+import type { CustomRender } from '../../commonTypes';
+import type { PartialGlobalDefaultTheme } from '../../utils/useTheme';
+import type { COMPONENTS_NAMESPACES } from '../../constants';
+import type { IconTypes } from '../..';
+import type { ValidationProps } from '../Validation/types';
+
+export interface CheckBoxChangeEvent extends React.ChangeEvent<HTMLInputElement> {
+  component: {
+    value: boolean,
+    name?: string,
+  },
+}
+
+export interface ResetEvent {
+  currentTarget?: undefined,
+  component: {
+    value: boolean,
+    name?: string,
+  },
+}
+
+export type ChangeEvent = CheckBoxChangeEvent | ResetEvent;
+
+export interface CheckBoxProps extends ValidationProps {
+  /** Checkbox icon, is independent from value,  */
+  checkboxIcon?: IconTypes.Icons | false | null,
+  /** All you wrap into CheckBox goes to the label */
+  children?: React.ReactNode,
+  /** Dfeault value, false if not set */
+  defaultValue?: boolean,
+  /** Id */
+  id?: string,
+  /** Input customizator */
+  inputRender?: CustomRender<CheckBoxProps, Record<string, never>, React.InputHTMLAttributes<HTMLInputElement>>,
+  /** In case you want to disable it */
+  isDisabled?: boolean,
+  /** Label customization */
+  labelRender?: CustomRender<CheckBoxProps, Record<string, never>, React.LabelHTMLAttributes<HTMLElement>>,
+  /** Component name */
+  name?: string,
+  /** Change handler */
+  onChange?: (event: ChangeEvent) => void,
+  /** Ref */
+  ref?: React.Ref<HTMLElement>,
+  /** Theme */
+  theme?: PartialGlobalDefaultTheme[typeof COMPONENTS_NAMESPACES.checkBox],
+  /** CheckBox value */
+  value?: boolean,
+  /** Wrapper customization */
+  wrapperRender?: CustomRender<CheckBoxProps, Record<string, never>, Partial<CheckBoxProps>>,
+  /** _css-class-names */
+  [x: string]: unknown,
+}

package/leda/components/Collapse/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import classnames from 'classnames';
+import type { CollapseProps } from './types';
+import { useProps, useTheme } from '../../utils';
+import { COMPONENTS_NAMESPACES } from '../../constants';
+import { Icon } from '../Icon';
+import { IconTypes } from '../..';
+
+export const Collapse = React.forwardRef((props: CollapseProps, ref?: React.Ref<HTMLDetailsElement>): React.ReactElement | null => {
+  const {
+    children,
+    className,
+    isOpen,
+    onToggle,
+    shouldRender,
+    summary,
+    theme: themeProp,
+    ...restProps
+  } = useProps(props);
+
+  const theme = useTheme(themeProp, COMPONENTS_NAMESPACES.collapse);
+
+  if (shouldRender === false) return null;
+
+  const detailsClassName = classnames(
+    theme.wrapper,
+    className,
+  );
+
+  return (
+    <details
+      open={isOpen}
+      onToggle={(ev: React.SyntheticEvent<HTMLDetailsElement, Event & { newState: 'open' | 'closed' }>) => {
+        const isDetailsOpen = ev.nativeEvent.newState === 'open';
+        onToggle?.({ isOpen: isDetailsOpen });
+      }}
+      {...restProps}
+      ref={ref}
+      className={detailsClassName}
+    >
+      <summary className={theme.summary}>
+        {summary}
+
+        <Icon
+          icon={IconTypes.Icons.ChevronDown}
+          className={theme.icon}
+        />
+      </summary>
+      <div className={theme.content}>
+        {children}
+      </div>
+    </details>
+  );
+}) as React.FC<CollapseProps>;

package/leda/components/Collapse/theme.ts

@@ -0,0 +1,7 @@
+/* eslint-disable key-spacing */
+export const defaultCollapseTheme = {
+  icon:         'ld-collapse-icon',
+  content:      'ld-collapse-content',
+  summary:      'ld-collapse-summary',
+  wrapper:      'ld-collapse-wrapper',
+};

package/leda/components/Collapse/types.ts

@@ -0,0 +1,27 @@
+import type * as React from 'react';
+import type { PartialGlobalDefaultTheme } from '../../utils/useTheme';
+import type { COMPONENTS_NAMESPACES } from '../../constants';
+
+export interface CollapseToggleEvent {
+  /** The new state */
+  isOpen: boolean,
+}
+
+export interface CollapseProps {
+  /** Content */
+  children?: React.ReactNode,
+  /** Controlled mode */
+  isOpen?: boolean,
+  /** Toggle handler */
+  onToggle?: (ev: CollapseToggleEvent) => void,
+  /** Ref */
+  ref?: React.Ref<HTMLElement>,
+  /** Pass *false* if you don't want the component to appear */
+  shouldRender: boolean,
+  /** Summary */
+  summary: React.ReactNode,
+  /** Theme */
+  theme?: PartialGlobalDefaultTheme[typeof COMPONENTS_NAMESPACES.collapse],
+  /** _css-class-names */
+  [x: string]: unknown,
+}

package/leda/components/DatePicker/index.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import * as React from 'react';
+import { DateTimeInput } from '../../src/DateTimeInput';
+import { COMPONENT_TYPES } from '../../src/DateTimeInput/constants';
+import type { DatePickerProps } from './types';
+
+export const DatePicker = React.forwardRef((props: DatePickerProps, ref: React.Ref<HTMLElement>) => (
+  <DateTimeInput
+    {...props}
+    format={props.format || 'dd.MM.yyyy'}
+    type={COMPONENT_TYPES.DATE_ONLY}
+    ref={ref}
+  />
+)) as React.FC<DatePickerProps>;
+
+DatePicker.displayName = 'DatePicker';

package/leda/components/DatePicker/types.ts

@@ -0,0 +1,42 @@
+import type * as React from 'react';
+import type { COMPONENTS_NAMESPACES } from '../../constants';
+import type {
+  BlurEvent,
+  ChangeEvent,
+  FocusEvent,
+  DateTimeInputProps,
+} from '../../src/DateTimeInput/types';
+import type { PartialGlobalDefaultTheme } from '../../utils/useTheme';
+
+export interface DatePickerProps extends DateTimeInputProps {
+  /** Date format, dd.MM.yyyy by default */
+  format?: string,
+  /** Control opened state */
+  isOpen?: boolean,
+  /** Disabled input state */
+  isDisabled?: boolean,
+  /** Max available date */
+  max?: Date,
+  /** Min available date */
+  min?: Date,
+  /** Component name */
+  name?: string,
+  /** Blur handler */
+  onBlur?: (ev: BlurEvent) => void,
+  /** Change handler */
+  onChange?: (ev: ChangeEvent) => void,
+  /** Enter press handler */
+  onEnterPress?: (ev: ChangeEvent) => void,
+  /** Focus handler */
+  onFocus?: (ev: FocusEvent) => void,
+  /** Placeholder */
+  placeholder?: string,
+  /** Ref */
+  ref?: React.Ref<HTMLElement>,
+  /** Theme */
+  theme?: PartialGlobalDefaultTheme[typeof COMPONENTS_NAMESPACES.dateTimeInput],
+  /** Value */
+  value?: string | Date | null,
+  /** _css-class-names */
+  [x: string]: unknown,
+}