colibri-ui 0.8.1 → 0.8.4

package/src/components/RadioGroup/Radio.tsx

@@ -1,56 +0,0 @@
-import React from "react";
-
-import InputRadio from "../InputRadio";
-import type { ChangeEvent, FC, FocusEvent } from "react";
-
-type Props = {
-  value: string | number;
-  text: string;
-  id?: string;
-  note?: string;
-  name?: string;
-  checked?: boolean;
-  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
-  onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
-  onMouseEnter?: (
-    event: React.MouseEvent<HTMLLabelElement, MouseEvent>,
-  ) => void;
-  className: string;
-  disabled?: boolean;
-  testId?: string;
-};
-
-const Radio: FC<Props> = ({
-  id,
-  value,
-  text,
-  note,
-  name,
-  checked = false,
-  onChange,
-  onBlur,
-  onClick,
-  onMouseEnter,
-  className,
-  disabled = false,
-  testId,
-}: Props) => (
-  <InputRadio
-    id={id}
-    value={value}
-    checked={checked}
-    onChange={onChange}
-    onBlur={onBlur}
-    onClick={onClick}
-    onMouseEnter={onMouseEnter}
-    text={text}
-    note={note}
-    name={name}
-    className={className}
-    disabled={disabled}
-    testid={testId}
-  />
-);
-
-export default Radio;

package/src/components/RadioGroup/RadioGroup.module.scss

@@ -1,37 +0,0 @@
-.radio {
-  line-height: 16px;
-  margin-inline-end: 20px;
-}
-
-.group {
-  display: inline-flex;
-
-  &_wide {
-    inline-size: 100%;
-  }
-
-  &_column {
-    flex-direction: column;
-
-    .radio:not(:last-child) {
-      margin-block-end: 16px;
-    }
-  }
-
-  &_wrapped {
-    flex-wrap: wrap;
-    /* stylelint-disable-next-line no-descending-specificity */
-    .radio {
-      inline-size: 100%;
-      margin: 8px auto;
-
-      &:first-child {
-        margin-block-start: 0;
-      }
-
-      &:last-child {
-        margin-block-end: 0;
-      }
-    }
-  }
-}

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -1,101 +0,0 @@
-import React, { useState } from 'react';
-import RadioGroup, { RadioGroupProps } from '.';
-
-import type { Meta, StoryObj } from "@storybook/react";
-
-const getOptions = (name?: string) => [
-  {
-    name: name || 'Option',
-    val: '1',
-    text: 'Option 1',
-  },
-  {
-    name: name || 'Option',
-    val: '2',
-    text: 'Option 2',
-  },
-  {
-    name: name || 'Option',
-    val: '3',
-    text: 'Option 3',
-  },
-];
-
-export const Example = (args: RadioGroupProps) => {
-  const [checked, setChecked] = useState<string>('1');
-  return (
-    <div style={{ margin: 20 }}>
-      <RadioGroup
-        {...args}
-        val={checked}
-        options={args.options || getOptions()}
-        onChange={(value: string) => setChecked(value)}
-      />
-    </div>
-  );
-};
-
-const meta: Meta<typeof Example> = {
-  title: "UI/RadioGroup",
-  parameters: {
-    layout: "centered",
-  },
-  args: {
-    disabled: false,
-    column: false,
-    
-    wrapped: false
-  },
-  component: Example,
-} satisfies Meta<typeof Example>;
-
-type Story = StoryObj<typeof meta>;
-
-export default meta;
-
-const getSomeDisabledOptions = (name?: string) =>
-  getOptions(name).map((option, index) => ({
-    ...option,
-    disabled: index % 2 !== 0,
-  }));
-
-export const Default: Story = {
-  args: {
-  },
-};
-
-export const DisabledRadio: Story = {
-  args: {
-    options: getSomeDisabledOptions('Radio')
-  },
-};
-
-export const WithNote: Story = {
-  args: {
-    options: [
-      {
-        name: 'With Note',
-        val: 'With Note',
-        text: 'With Note',
-        note: 'Lorem ipsum dolor sit amet consectetur adipisicing elit',
-      },
-    ]
-  },
-};
-
-export const LongText: Story = {
-  args: {
-    options: [
-      {
-        name: 'Long Text',
-        val: '1',
-        text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit',
-      },
-      {
-        name: 'Long Text',
-        val: '2',
-        text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit',
-      },
-    ]
-  },
-};

package/src/components/RadioGroup/index.tsx

@@ -1,92 +0,0 @@
-import React, { memo } from "react";
-import classNames from "classnames/bind";
-import Radio from "./Radio";
-import styles from "./RadioGroup.module.scss";
-import type { FC } from "react";
-
-const clx = classNames.bind(styles);
-
-export interface Option {
-  id?: string;
-  val: string | number;
-  text: string;
-  note?: string;
-  name?: string;
-  tooltipContent?: () => React.ReactElement;
-  onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
-  onMouseEnter?: (
-    event: React.MouseEvent<HTMLLabelElement, MouseEvent>,
-  ) => void;
-  className?: string;
-  disabled?: boolean;
-}
-
-export interface RadioGroupProps {
-  val?: string | number;
-  options: Option[];
-  onChange: (value: string) => void;
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  column?: boolean;
-  wrapped?: boolean;
-  className?: string;
-  disabled?: boolean;
-}
-
-const RadioGroup: FC<RadioGroupProps> = memo(
-  ({
-    val,
-    options,
-    onChange,
-    onBlur,
-    column = false,
-    wrapped = false,
-    className,
-    disabled = false,
-  }: RadioGroupProps) => (
-    <div
-      className={clx(
-        styles.group,
-        {
-          group_column: !!column,
-          group_wrapped: !!wrapped,
-        },
-        className,
-      )}
-    >
-      {options.map((option) => {
-        const {
-          id,
-          val: optionVal,
-          text,
-          note,
-          name,
-          onClick,
-          onMouseEnter,
-          className: optionClassName,
-          disabled: optionDisabled,
-        } = option;
-
-        return (
-          <Radio
-            key={optionVal}
-            id={id}
-            testId={id}
-            value={optionVal}
-            text={text}
-            note={note}
-            name={name}
-            className={clx(styles.radio, optionClassName)}
-            checked={val === optionVal}
-            onChange={(e) => onChange(e.target.value)}
-            onBlur={onBlur}
-            onClick={onClick}
-            onMouseEnter={onMouseEnter}
-            disabled={disabled || optionDisabled}
-          />
-        );
-      })}
-    </div>
-  ),
-);
-
-export default RadioGroup;

package/src/components/Select/__tests__/Select.test.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Select from '..';
-
-describe('<Select />', () => {
-  const options = Array(5)
-    .fill(null)
-    .map((_, i) => ({
-      label: `options ${i}`,
-      value: i,
-    }));
-
-  it('renders', () => {
-    const onChange = jest.fn();
-    render(
-      <Select value={2} label="hint" options={options} onChange={onChange} />
-    );
-
-    const selectLabel = screen.getByText(/hint/i);
-    expect(selectLabel).toBeInTheDocument();
-  });
-
-  it('calls onChange when an option is selected', async () => {
-    const onChange = jest.fn();
-    render(<Select value={2} options={options} onChange={onChange} />);
-
-    const selectButton = screen.getByTestId('base-input');
-    await userEvent.click(selectButton);
-
-    const firstOption = screen.getByText(/options 0/i);
-    await userEvent.click(firstOption);
-
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith(0);
-  });
-});

package/src/components/Select/components/MenuOverlay/index.tsx

@@ -1,66 +0,0 @@
-import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
-import classNames from "classnames/bind";
-import Menu from "../../../Menu";
-import SelectItem from "../MenuOverlayItem";
-import styles from "./index.module.scss";
-import type { Coordinates, IOption } from "../../index.props";
-
-const clx = classNames.bind(styles);
-
-interface Props<T extends string> {
-  options: {
-    value: T;
-    label: React.ReactNode;
-    selected: boolean;
-  }[];
-  onChange: (value: T) => void;
-}
-
-const OFFSET_ITEMS_COUNT = 2;
-
-const MenuOverlay = <T extends string>({ options, onChange }: Props<T>) => {
-  const [selected, setSelected] = useState<string[]>();
-  const [scrollView, setScrollView] = useState<Coordinates>({
-    top: 0,
-    height: 0,
-  });
-  const listRef = useRef<null | HTMLUListElement>(null);
-  const rootRef = useRef<HTMLDivElement>(null);
-
-  const handleSelect = useCallback(
-    (option: IOption<T>, key: string) => {
-      onChange(option.value);
-      setSelected(key.split(" "));
-    },
-    [onChange],
-  );
-
-  useLayoutEffect(() => {
-    if (!rootRef || !rootRef.current) {
-      return;
-    }
-
-    if (typeof rootRef.current.scrollTo === "function") {
-      rootRef.current.scrollTo({
-        top: scrollView.top - OFFSET_ITEMS_COUNT * scrollView.height,
-      });
-    }
-  }, [scrollView, rootRef]);
-
-  return (
-    <div ref={rootRef} className={clx(styles.root)}>
-      <Menu ref={listRef} selected={selected}>
-        {options.map((option, index) => (
-          <SelectItem
-            setScrollView={setScrollView}
-            option={option}
-            key={index}
-            onClick={() => handleSelect(option, `item-${index}`)}
-          />
-        ))}
-      </Menu>
-    </div>
-  );
-};
-
-export default MenuOverlay;

package/src/components/Select/components/MenuOverlayItem/index.tsx

@@ -1,53 +0,0 @@
-import React, { useLayoutEffect, useRef } from "react";
-import MenuItem from "../../../Menu/components/MenuItem";
-import Check from "../../../Icons/Check";
-import type { Coordinates } from "../../index.props";
-
-type SelectItemProps = {
-  option: {
-    value: string;
-    label: React.ReactNode;
-    selected: boolean;
-    disabled?: boolean;
-  };
-  onClick?: () => void;
-  setScrollView: (value: Coordinates) => void;
-};
-
-const SelectItem = ({ option, onClick, setScrollView }: SelectItemProps) => {
-  const ref = useRef<null | HTMLLIElement>(null);
-
-  function scrollToItem(): void {
-    if (!ref.current) {
-      return;
-    }
-
-    const { offsetTop, offsetHeight } = ref.current;
-
-    setScrollView({
-      top: offsetTop,
-      height: offsetHeight,
-    });
-  }
-
-  useLayoutEffect(() => {
-    if (option.selected) {
-      scrollToItem();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <MenuItem
-      ref={ref}
-      onClick={onClick}
-      isSelected={option.selected}
-      disabled={option.disabled}
-    >
-      {option.label}
-      {option.selected && <Check width={16} height={16} />}
-    </MenuItem>
-  );
-};
-
-export default SelectItem;

package/src/components/Select/index.props.ts

@@ -1,32 +0,0 @@
-import type { ReactNode } from "react";
-import type { FormFieldProps } from "../base/FormField/index.props";
-
-type Size = "s" | "m" | "l";
-
-export type Coordinates = {
-  height: number;
-  top: number;
-};
-
-export interface IOption<T extends string> {
-  disabled?: boolean;
-  label: ReactNode;
-  value: T;
-}
-
-export interface SelectProps<T extends string>
-  extends Omit<FormFieldProps, "children"> {
-  className?: string;
-  customInputRoot?: ReactNode;
-  disabled?: boolean;
-  fontSize?: number;
-  fullWidth?: boolean;
-  name?: string;
-  onChange: (value: T) => void;
-  options: IOption<T>[];
-  placeholder?: string;
-  required?: boolean;
-  size?: Size;
-  value?: T;
-  zIndex?: number;
-}

package/src/components/Select/index.stories.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import { useState } from "react";
-import Select from "./";
-
-import type { Meta } from "@storybook/react";
-
-const meta: Meta<typeof Select> = {
-  title: "UI/Select",
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {},
-  args: {
-    hasError: false,
-    fullWidth: false,
-    placeholder: "select options",
-    label: "Label",
-    hint: "hint",
-  },
-  component: Select,
-} satisfies Meta<typeof Select>;
-
-export default meta;
-
-const options = Array(5)
-  .fill(null)
-  .map((_, i) => ({
-    label: (
-      <span>
-        <strong>Long long option</strong> {String(i)}
-      </span>
-    ),
-    value: String(i),
-    disabled: i === 2,
-  }));
-
-const Template = (args) => {
-  const [value, setValue] = useState<string>();
-
-  return (
-    <Select
-      {...args}
-      value={value}
-      options={options}
-      onChange={(v) => setValue(v)}
-    />
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {};

package/src/components/Select/index.tsx

@@ -1,106 +0,0 @@
-import React, { useState, useMemo } from "react";
-import classNames from "classnames/bind";
-import Chevron from "../Icons/Chevron";
-import InputRoot from "../base/InputRoot";
-import FormField from "../base/FormField";
-import Dropdown from "../Dropdown";
-import styles from "./index.module.scss";
-import MenuOverlay from "./components/MenuOverlay";
-import type { SelectProps } from "./index.props";
-
-const clx = classNames.bind(styles);
-
-const Select = <T extends string>({
-  options = [],
-  value,
-  name,
-  zIndex,
-  fontSize,
-  label,
-  hint,
-  hasError,
-  required,
-  placeholder,
-  disabled,
-  size = "m",
-  fullWidth = false,
-  customInputRoot,
-  className,
-  onChange,
-}: SelectProps<T>) => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-
-  const preparedOptions = useMemo(
-    () =>
-      options.map(({ value: lvalue, label: llabel, disabled: ldisabled }) => ({
-        value: lvalue,
-        label: llabel,
-        selected: value === lvalue,
-        disabled: ldisabled,
-      })),
-    [value, options],
-  );
-
-  const prepraredLabel = useMemo(
-    () => preparedOptions.find(({ selected }) => selected)?.label,
-    [preparedOptions],
-  );
-
-  return (
-    <FormField
-      className={clx(
-        styles["form-field"],
-        {
-          "full-width": fullWidth ? 1 : 0,
-        },
-        className,
-      )}
-      required={required}
-      label={label}
-      hint={hint}
-      hasError={hasError}
-    >
-      <Dropdown
-        placement="bottom-start"
-        preventOverflow={true}
-        onVisibleChange={setIsOpen}
-        trigger={["click"]}
-        zIndex={zIndex}
-        fontSize={fontSize}
-        disabled={!!disabled}
-        overlay={<MenuOverlay options={preparedOptions} onChange={onChange} />}
-        samewidth
-      >
-        {customInputRoot ? (
-          customInputRoot
-        ) : (
-          <InputRoot
-            hasError={hasError}
-            size={size}
-            className={clx(styles.root)}
-            endIcon={
-              <Chevron
-                className={clx(styles.icon, { icon_isOpen: isOpen ? 1 : 0 })}
-              />
-            }
-            disabled={!!disabled}
-          >
-            <div className={clx(styles["base-input"])} data-testid="base-input">
-              {prepraredLabel ?? (
-                <span className={clx(styles.placeholder)}>{placeholder}</span>
-              )}
-            </div>
-            <input
-              type="hidden"
-              name={name}
-              tabIndex={-1}
-              value={value || ""}
-            />
-          </InputRoot>
-        )}
-      </Dropdown>
-    </FormField>
-  );
-};
-
-export default Select;

package/src/components/Separator/Separator.stories.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import Separator from '.';
-
-export default { 
-    title: 'UI/Separator',
-    parameters: {
-        layout: "centered",
-    },
-};
-
-export const Default: React.FC = (): JSX.Element => <Separator />;

package/src/components/Separator/index.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import styles from "./Separator.module.scss";
-import type { FC } from "react";
-
-type Props = {
-  className?: string;
-};
-
-const Separator: FC<Props> = ({ className }) => (
-  <div className={classNames(styles.root, className)} />
-);
-
-export default Separator;

package/src/components/Skeleton/Skeleton.module.scss

@@ -1,39 +0,0 @@
-.rect {
-  animation: skeleton-loading 1.5s ease-in-out infinite;
-  background-color: var(--palette-bg-2);
-
-  @keyframes skeleton-loading {
-    0% {
-      opacity: 1;
-    }
-
-    50% {
-      opacity: 0.4;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-}
-
-.text {
-  animation: skeleton-loading 1.5s ease-in-out infinite;
-  background-color: var(--palette-bg-2);
-  border-radius: 6px;
-  height: 12px;
-
-  @keyframes skeleton-loading {
-    0% {
-      opacity: 1;
-    }
-
-    50% {
-      opacity: 0.4;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-}