colibri-ui 0.8.1 → 0.8.4

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

@@ -1,12 +0,0 @@
-export type TextProps = {
-  className?: string;
-  width?: number | string;
-  size?: number;
-};
-
-export type RectProps = {
-  className?: string;
-  width?: number | string;
-  height?: number | string;
-  borderRadius?: number | string;
-};

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

@@ -1,45 +0,0 @@
-import React from "react";
-import { SkeletonRect, SkeletonText } from ".";
-import type { Meta } from "@storybook/react";
-
-const meta: Meta<typeof SkeletonRect> = {
-  title: "UI/Skeleton",
-  parameters: {
-    layout: "centered",
-  },
-  component: SkeletonRect,
-} satisfies Meta<typeof SkeletonRect>;
-
-export default meta;
-
-export const Rect = () => {
-  const style = `
-        .my-rect-skeleton {
-            --skeleton-color: rgba(0, 0, 0, .05);
-            --skeleton-animation: skeleton-loading 1.5s ease-in-out infinite;
-        }
-    `;
-
-  return (
-    <>
-      <style>{style}</style>
-      <SkeletonRect width={128} height={32} borderRadius={6} />
-    </>
-  );
-};
-
-export const Text = () => {
-  const style = `
-        .my-text-skeleton {
-            --skeleton-color: rgba(0, 0, 0, .05);
-            --skeleton-animation: skeleton-loading 1.5s ease-in-out infinite;
-        }
-    `;
-
-  return (
-    <>
-      <style>{style}</style>
-      <SkeletonText width={128} size={16} />
-    </>
-  );
-};

package/src/components/Skeleton/index.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import styles from "./Skeleton.module.scss";
-import type { FC } from "react";
-import type { RectProps, TextProps } from "./index.props";
-
-export const SkeletonRect: FC<RectProps> = ({
-  className,
-  width,
-  height,
-  borderRadius,
-}) => (
-  <div
-    className={classNames(styles.rect, className)}
-    style={{ width, height, borderRadius }}
-  />
-);
-
-export const SkeletonText: FC<TextProps> = ({ className, width, size }) => (
-  <div
-    className={classNames(styles.text, className)}
-    style={{ width, height: size }}
-  />
-);

package/src/components/Status/index.module.scss

@@ -1,54 +0,0 @@
-.root {
-  align-items: center;
-  background-color: var(--status-neutral-bg);
-  border-radius: 6rem;
-  box-sizing: border-box;
-  display: inline-flex;
-  gap: 0.5rem;
-  inline-size: fit-content;
-  line-height: 1.5rem;
-  overflow: hidden;
-  padding: 0 0.5rem;
-  vertical-align: middle;
-  white-space: nowrap;
-
-  &::before {
-    background-color: var(--status-neutral);
-    block-size: 0.4rem;
-    border-radius: 100%;
-    content: "";
-    inline-size: 0.4rem;
-  }
-
-  &_success {
-    background-color: var(--status-success-bg);
-
-    &::before {
-      background-color: var(--status-success);
-    }
-  }
-
-  &_info {
-    background-color: var(--status-info-bg);
-
-    &::before {
-      background-color: var(--status-info);
-    }
-  }
-
-  &_failure {
-    background-color: var(--status-failure-bg);
-
-    &::before {
-      background-color: var(--status-failure);
-    }
-  }
-
-  &_warning {
-    background-color: var(--status-warning-bg);
-
-    &::before {
-      background-color: var(--status-warning);
-    }
-  }
-}

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

@@ -1,14 +0,0 @@
-export type StatusTag = "span" | "div";
-
-export enum STATUS_TYPE {
-  SUCCESS = "success",
-  FAILURE = "failure",
-  INFO = "info",
-  WARNING = "warning",
-}
-
-export type StatusProps = {
-  className?: string;
-  tag?: StatusTag;
-  type?: STATUS_TYPE;
-};

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

@@ -1,42 +0,0 @@
-import React from "react";
-import Status from ".";
-import type { Meta } from "@storybook/react";
-import { STATUS_TYPE } from "./index.props";
-
-const list = [
-  {
-    text: 'Neutral',
-  },
-  {
-    type: STATUS_TYPE.SUCCESS,
-    text: 'Success',
-  },
-  {
-    type: STATUS_TYPE.FAILURE,
-    text: 'Failure',
-  },
-  {
-    type: STATUS_TYPE.WARNING,
-    text: 'Warning',
-  },
-  {
-    type: STATUS_TYPE.INFO,
-    text: 'Info',
-  },
-];
-
-const meta: Meta<typeof Status> = {
-  title: "UI/Status",
-  parameters: {
-    layout: 'centered'
-  },
-  component: Status,
-} satisfies Meta<typeof Status>;
-
-export default meta;
-
-export const Default = (args) => {
-  return <div style={{display: 'flex', gap: '16px'}}>
-    {list.map(({text, type}, index) => (<Status type={type} {...args} key={index}>{text}</Status>))}
-    </div>;
-};

package/src/components/Status/index.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-import classNames from "classnames/bind";
-import styles from "./index.module.scss";
-import type { PropsWithChildren } from "react";
-import type { StatusProps } from "./index.props";
-
-const clx = classNames.bind(styles);
-
-const Status = ({
-  className,
-  tag: Component = "span",
-  children,
-  type,
-}: PropsWithChildren<StatusProps>) => (
-  <Component
-    className={clx(styles.root, { [`root_${type}`]: !!type }, className)}
-  >
-    {children}
-  </Component>
-);
-
-export default Status;

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

@@ -1,8 +0,0 @@
-import type { InputHTMLAttributes } from "react";
-
-export interface SwitchProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
-  variant?: "primary";
-  disabled?: boolean;
-  ref?: React.Ref<HTMLInputElement>;
-}

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

@@ -1,27 +0,0 @@
-import React, { useState } from "react";
-import Switch from ".";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Switch> = {
-  title: "UI/Switch",
-  parameters: {
-    layout: "centered",
-  },
-  component: Switch,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Switch>;
-
-export const Deafault = ({ args }: Story) => {
-  const [value, setValue] = useState(false);
-
-  return (
-    <Switch
-      checked={value}
-      onChange={(e) => setValue(e.target.checked)}
-      {...args}
-    />
-  );
-};

package/src/components/Switch/index.tsx

@@ -1,40 +0,0 @@
-import React from "react";
-import classNames from "classnames/bind";
-import styles from "./Switch.module.scss";
-import type { SwitchProps } from "./index.props";
-
-const clx = classNames.bind(styles);
-
-const Switch = ({
-  disabled,
-  className,
-  variant = "primary",
-  ref,
-  ...props
-}: SwitchProps) => (
-  <div
-    className={clx(
-      styles.root,
-      {
-        root_disabled: disabled ? 1 : 0,
-      },
-      className,
-    )}
-  >
-    <input
-      className={clx(styles.checkbox)}
-      ref={ref}
-      type="checkbox"
-      {...props}
-    />
-    <div
-      className={clx(styles.wrapper, {
-        [`wrapper_variant_${variant}`]: variant ? 1 : 0,
-      })}
-    >
-      <div className={clx(styles["base-switch"])} />
-    </div>
-  </div>
-);
-
-export default Switch;

package/src/components/TabsMenu/Tab/Tab.module.scss

@@ -1,78 +0,0 @@
-.tab {
-  cursor: pointer;
-  padding: 0 0.875em;
-  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
-  transition-duration: 0.3s;
-  transition-property: background, box-shadow, transform;
-  transition-timing-function: ease;
-  user-select: none;
-  white-space: nowrap;
-
-  &[data-size="xs"] {
-    border-radius: 1.75rem;
-    font-size: 0.775rem/1.15rem;
-    line-height: 1.75rem;
-  }
-
-  &[data-size="s"] {
-    border-radius: 2rem;
-    font-size: 0.875rem/1.25rem;
-    line-height: 2rem;
-  }
-
-  &[data-size="m"] {
-    border-radius: 2.25rem;
-    font-size: 1rem;
-    line-height: 2.25rem;
-    padding: 0 1em;
-  }
-
-  &[data-size="l"] {
-    border-radius: 2.625rem;
-    font-size: 1rem/1.5rem;
-    line-height: 2.625rem;
-    padding: 0 1em;
-  }
-
-  &_active {
-    background: var(--palette-bg-1);
-  }
-
-  &_inactive {
-    background: var(--palette-white);
-    box-shadow: rgb(193 193 193 / 40%) 0 5px 20px;
-
-    &:hover {
-      box-shadow: rgb(193 193 193 / 40%) 0 5px 20px;
-    }
-
-    &:active {
-      background: rgb(0 0 0 / 2%);
-      box-shadow: rgb(193 193 193 / 40%) 0 1px 3px;
-      outline: 0;
-      transition-duration: 0.15s;
-    }
-
-    @media (hover: none) {
-      &:hover {
-        box-shadow: rgb(193 193 193 / 40%) 0 5px 20px;
-      }
-
-      &:active {
-        box-shadow: rgb(193 193 193 / 40%) 0 1px 3px;
-      }
-    }
-  }
-
-  &_first {
-    margin-left: 0;
-  }
-
-  &_disabled {
-    background: #f7f8f9;
-    box-shadow: none;
-    color: var(--palette-bg-3);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-}

package/src/components/TabsMenu/Tab/Tab.props.ts

@@ -1,20 +0,0 @@
-import type { Size } from "../index.props";
-import type {
-  KeyboardEventHandler,
-  MouseEventHandler,
-  ReactNode,
-  RefObject,
-} from "react";
-
-export type TabProps = {
-  id?: string;
-  active?: boolean;
-  disabled?: boolean;
-  content?: ReactNode;
-  onClick?: MouseEventHandler<HTMLLIElement>;
-  innerRef?: RefObject<HTMLLIElement>;
-  className?: string;
-  tabIndex?: number;
-  onKeyDown?: KeyboardEventHandler<HTMLElement>;
-  size?: Size;
-};

package/src/components/TabsMenu/Tab/Tab.tsx

@@ -1,40 +0,0 @@
-import React from "react";
-
-import classNames from "classnames/bind";
-import styles from "./Tab.module.scss";
-import type { FC } from "react";
-import type { TabProps } from "./Tab.props";
-
-const clx = classNames.bind(styles);
-
-const Tab: FC<TabProps> = ({
-  innerRef,
-  active,
-  className,
-  content,
-  disabled,
-  size,
-  ...props
-}) => (
-  <li
-    {...props}
-    aria-selected={active}
-    ref={innerRef}
-    className={clx(
-      styles.tab,
-      {
-        tab_inactive: !active,
-        tab_active: !!active,
-        tab_disabled: !!disabled,
-      },
-      className,
-    )}
-    data-size={size}
-    role="tab"
-    tabIndex={disabled ? undefined : active ? 0 : -1}
-  >
-    {content}
-  </li>
-);
-
-export default Tab;

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

@@ -1,13 +0,0 @@
-import type { RefObject } from "react";
-import type { TabProps } from "./Tab/Tab.props";
-
-export type Size = "xs" | "s" | "m" | "l";
-
-export type TabsMenuProps = {
-  activeTab?: string;
-  onChange?: (tabId: string) => void;
-  tabs: TabProps[];
-  innerRef?: RefObject<HTMLUListElement>;
-  className?: string;
-  size?: Size;
-};

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

@@ -1,40 +0,0 @@
-import React, { useState } from 'react'
-import TabsMenu from ".";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof TabsMenu> = {
-  title: "UI/TabsMenu",
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: ["xs", "s", "m", "l"],
-    },
-  },
-  component: TabsMenu,
-} satisfies Meta<typeof TabsMenu>;
-
-export default meta;
-
-type Story = StoryObj<typeof TabsMenu>;
-
-
-export const Default = (args: Story) => {
-  const [activeTab, setActiveTab] = useState('tab1')
-
-  return(
-  <div>
-    <TabsMenu
-      {...args}
-      activeTab={activeTab}
-      tabs={[
-        { id: 'tab1', onClick: () => setActiveTab('tab1'), content: 'Tab 1'},
-        { id: 'tab2', onClick: () => setActiveTab('tab2'), content: 'Tab 2', disabled: true},
-        { id: 'tab3', onClick: () => setActiveTab('tab3'), content: 'Tab 3' },
-        { id: 'tab4', onClick: () => setActiveTab('tab4'), content: 'Tab 4' },
-      ]}
-    />
-  </div>
-)};

package/src/components/TabsMenu/index.tsx

@@ -1,110 +0,0 @@
-import React, { useCallback, createRef, useMemo } from "react";
-
-import classNames from "classnames/bind";
-import { isKey, Keys } from "../lib/keyboard";
-import Tab from "./Tab/Tab";
-import styles from "./TabsMenu.module.scss";
-import type { TabsMenuProps } from "./index.props";
-
-import type { KeyboardEvent, FC } from "react";
-
-const clx = classNames.bind(styles);
-
-const TabsMenu: FC<TabsMenuProps> = ({
-  activeTab,
-  onChange,
-  className,
-  innerRef,
-  tabs,
-  size = "m",
-  ...props
-}) => {
-  const tabsRefs = useMemo(
-    () => tabs.map(() => createRef<HTMLLIElement>()),
-    [tabs],
-  );
-
-  const onKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLUListElement>) => {
-      if (isKey(event.key, [Keys.LEFT, Keys.DOWN, Keys.RIGHT, Keys.UP])) {
-        event.preventDefault();
-
-        let nextTabMenuIndex = 0;
-        const direction = isKey(event.key, [Keys.LEFT, Keys.UP]) ? -1 : 1;
-
-        for (let i = 0; i < tabs.length; i++) {
-          if (tabs[i].id === activeTab) {
-            nextTabMenuIndex = i;
-            break;
-          }
-        }
-
-        for (let i = nextTabMenuIndex; i < tabs.length; i += direction) {
-          nextTabMenuIndex += direction;
-          const isEdge =
-            nextTabMenuIndex >= tabs.length || nextTabMenuIndex < 0;
-          const isTabNonDisabled =
-            tabs[nextTabMenuIndex] && !tabs[nextTabMenuIndex].disabled;
-          if (isEdge || isTabNonDisabled) {
-            break;
-          }
-        }
-
-        const nextTabMenu = tabs[nextTabMenuIndex];
-        const nextTabMenuRef = tabsRefs[nextTabMenuIndex];
-
-        if (
-          nextTabMenu !== undefined &&
-          nextTabMenuRef !== undefined &&
-          nextTabMenuRef.current !== null &&
-          (nextTabMenu.onClick !== undefined || onChange !== undefined)
-        ) {
-          nextTabMenuRef.current.focus();
-          if (nextTabMenu.onClick !== undefined) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            nextTabMenu.onClick(event as any);
-          }
-          if (onChange !== undefined) {
-            onChange(nextTabMenuIndex.toString());
-          }
-        }
-      }
-    },
-    [activeTab, tabsRefs, tabs, onChange],
-  );
-
-  return (
-    <ul
-      {...props}
-      className={clx(styles.root, className)}
-      ref={innerRef}
-      role="tablist"
-    >
-      {tabs.map(({ id, disabled, ...tabProps }, index) => (
-        <Tab
-          {...tabProps}
-          innerRef={tabsRefs[index]}
-          disabled={disabled}
-          size={size}
-          onClick={
-            disabled || (!onChange && !tabProps.onClick)
-              ? undefined
-              : (event) => {
-                  if (tabProps.onClick !== undefined) {
-                    tabProps.onClick(event);
-                  }
-                  if (onChange !== undefined) {
-                    onChange(id as string);
-                  }
-                }
-          }
-          active={id === activeTab}
-          key={id}
-          onKeyDown={onKeyDown}
-        />
-      ))}
-    </ul>
-  );
-};
-
-export default TabsMenu;

package/src/components/TabsPanes/Pane/Pane.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import type { PaneProps } from "./index.props";
-import type { FC } from "react";
-
-export const TabsPanesPane: FC<PaneProps> = ({
-  content,
-  className,
-  ...props
-}) => (
-  <div {...props} role="tabpanel" className={classNames(null, className)}>
-    {content}
-  </div>
-);

package/src/components/TabsPanes/Pane/index.props.ts

@@ -1,8 +0,0 @@
-import type { ReactNode } from "react";
-
-export type PaneProps = {
-  content?: ReactNode;
-  disabled?: boolean;
-  className?: string;
-  id?: string;
-};

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

@@ -1,39 +0,0 @@
-import React, { createRef } from 'react';
-import { render, screen } from '@testing-library/react';
-import TabsPanes from '..';
-
-const pane1 = { id: 'tab1', content: 'Pane 1 Поиск' };
-const pane2 = { id: 'tab2', content: 'Pane 2 Картинки' };
-const pane3 = { id: 'tab3', content: <div>Pane 3 Маркет</div> };
-
-const panes = [pane1, pane2, pane3];
-
-describe('TabsPanes', () => {
-  test('should return the complete component template (snapshot)', () => {
-    expect(render(<TabsPanes activePane={pane1.id} panes={panes} className="mix" />)).toMatchSnapshot();
-  });
-  
-  test('should set a reference to the root DOM element', async () => {
-    const innerRef = createRef<HTMLDivElement>();
-    render(<TabsPanes activePane={pane1.id} panes={panes} innerRef={innerRef} />);
-  
-    expect(innerRef.current).not.toBe(null);
-  });
-  
-  test('should display only the active pane content (snapshot)', () => {
-    expect(render(<TabsPanes activePane={pane1.id} panes={panes} />)).toMatchSnapshot();
-  });
-  
-  test('should display new JSX content when activePane changes (snapshot)', () => {
-    const { container, rerender } = render(<TabsPanes activePane={pane1.id} panes={panes} />);
-    rerender(<TabsPanes activePane={pane3.id} panes={panes} />);
-    expect(container).toMatchSnapshot();
-  });
-  
-  test('should render an empty panel when activePane is not set', () => {
-    render(<TabsPanes activePane={undefined} panes={panes} />);
-    const tabpanes = screen.getByRole('menutabpanes');
-    expect(tabpanes.childNodes.length).toBe(0);
-  });
-
-});