colibri-ui 0.8.1 → 0.8.4

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

@@ -1,189 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TabsPanes should display new JSX content when activePane changes (snapshot) 1`] = `
-<div>
-  <div
-    class=""
-    role="menutabpanes"
-  >
-    <div
-      class=""
-      role="tabpanel"
-    >
-      <div>
-        Pane 3 Маркет
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`TabsPanes should display only the active pane content (snapshot) 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class=""
-        role="menutabpanes"
-      >
-        <div
-          class=""
-          role="tabpanel"
-        >
-          Pane 1 Поиск
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class=""
-      role="menutabpanes"
-    >
-      <div
-        class=""
-        role="tabpanel"
-      >
-        Pane 1 Поиск
-      </div>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
-exports[`TabsPanes should return the complete component template (snapshot) 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="mix"
-        role="menutabpanes"
-      >
-        <div
-          class=""
-          role="tabpanel"
-        >
-          Pane 1 Поиск
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="mix"
-      role="menutabpanes"
-    >
-      <div
-        class=""
-        role="tabpanel"
-      >
-        Pane 1 Поиск
-      </div>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;

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

@@ -1,29 +0,0 @@
-import React from 'react'
-import TabsPanes from ".";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof TabsPanes> = {
-  title: "UI/TabsPanes",
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-  },
-  component: TabsPanes,
-} satisfies Meta<typeof TabsPanes>;
-
-export default meta;
-
-type Story = StoryObj<typeof TabsPanes>;
-
-export const Default = (args: Story) => {
-  return(
-  <TabsPanes
-    {...args}
-    activePane="2"
-    panes={[
-      { id: '1', content: 'Pane 1 content' },
-      { id: '2', content: 'Pane 2 content' },
-    ]}
-  />
-)};

package/src/components/TabsPanes/index.tsx

@@ -1,37 +0,0 @@
-import React from "react";
-
-import classNames from "classnames";
-import { TabsPanesPane } from "./Pane/Pane";
-import type { TabsPanesProps } from "./index.props";
-import type { FC } from "react";
-import type { PaneProps } from "./Pane/index.props";
-
-const TabsPanes: FC<TabsPanesProps> = ({
-  activePane,
-  className,
-  innerRef,
-  panes,
-  ...props
-}) => {
-  const currentPane = panes.reduce<PaneProps | null>((acc, pane) => {
-    if (acc !== null) {
-      return acc;
-    }
-    return pane.id === activePane ? pane : null;
-  }, null);
-
-  const { ...paneProps } = currentPane || {};
-
-  return (
-    <div
-      {...props}
-      ref={innerRef}
-      role="menutabpanes"
-      className={classNames(null, [className])}
-    >
-      {currentPane && <TabsPanesPane {...paneProps} />}
-    </div>
-  );
-};
-
-export default TabsPanes;

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

@@ -1,23 +0,0 @@
-import type {
-  ChangeEvent,
-  ForwardedRef,
-  ReactNode,
-  TextareaHTMLAttributes,
-} from "react";
-
-export interface ITextAreaProps
-  extends Omit<
-    TextareaHTMLAttributes<HTMLTextAreaElement>,
-    "onChange" | "style"
-  > {
-  minRows?: number;
-  maxRows?: number;
-  value?: string;
-  label?: ReactNode;
-  hint?: ReactNode;
-  hasError?: boolean;
-  required?: boolean;
-  onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
-  inputRef?: ForwardedRef<HTMLTextAreaElement>;
-  ref?: React.Ref<HTMLDivElement>;
-}

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

@@ -1,33 +0,0 @@
-import React from "react";
-import TextArea from "./index";
-import type { Meta } from "@storybook/react";
-import { useState } from "react";
-
-const meta: Meta<typeof TextArea> = {
-  title: "UI/TextArea",
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-  },
-  args: {},
-  component: TextArea,
-} satisfies Meta<typeof TextArea>;
-
-export default meta;
-
-const Template = (args) => {
-  const [value, setValue] = useState("");
-
-  return <TextArea {...args} value={value} onChange={(v) => setValue(v)} />;
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  required: true,
-  disabled: false,
-  placeholder: 'Type text',
-  label: 'Label',
-  hint: 'Hint'
-};

package/src/components/TextArea/index.tsx

@@ -1,56 +0,0 @@
-import React from "react";
-import TextareaAutosize from "react-textarea-autosize";
-import classNames from "classnames/bind";
-import FormField from "../base/FormField";
-import InputRoot from "../base/InputRoot";
-import styles from "./TextArea.module.scss";
-import type { ITextAreaProps } from "./index.props";
-import type { ChangeEvent } from "react";
-
-const clx = classNames.bind(styles);
-
-const TextArea = ({
-  className,
-  value = "",
-  minRows = 3,
-  maxRows = 6,
-  onChange,
-  label,
-  required,
-  hasError,
-  hint,
-  disabled,
-  inputRef,
-  ref,
-  ...props
-}: ITextAreaProps) => {
-  const onChangeHandler = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    if (onChange) onChange(event.target.value, event);
-  };
-
-  return (
-    <FormField
-      ref={ref}
-      className={clx(null, className)}
-      required={required}
-      label={label}
-      hint={hint}
-      hasError={hasError}
-    >
-      <InputRoot disabled={!!disabled} hasError={hasError}>
-        <TextareaAutosize
-          ref={inputRef}
-          data-testid="textarea"
-          minRows={minRows}
-          maxRows={maxRows}
-          value={value}
-          className={clx(styles.textarea, className)}
-          onChange={onChangeHandler}
-          {...props}
-        />
-      </InputRoot>
-    </FormField>
-  );
-};
-
-export default TextArea;

package/src/components/Theme/breakpoints.ts

@@ -1,52 +0,0 @@
-export type Breakpoints = {
-  hd: number;
-  xl: number;
-  lg: number;
-  md: number;
-  sm: number;
-  xs: number;
-};
-
-export type BreakpointName = keyof Breakpoints;
-
-export type BreakpointsTheme = {
-  values: Breakpoints;
-  up: (breakpoint: BreakpointName, isMedial?: boolean) => string;
-  under: (breakpoint: BreakpointName, isMedial?: boolean) => string;
-  between: (
-    [from, to]: [BreakpointName, BreakpointName],
-    isMedial?: boolean,
-  ) => string;
-};
-
-export type BreakpointMap<T = number> = Map<BreakpointName, T>;
-
-const Breakpoints: BreakpointsTheme = {
-  values: {
-    hd: 2560,
-    xl: 1920,
-    lg: 1450,
-    md: 1075,
-    sm: 680,
-    xs: 320,
-  },
-  up(breakpoint, isMedia = true) {
-    return `${isMedia ? "@media " : ""}(min-width: ${
-      this.values[breakpoint]
-    }px)`;
-  },
-  under(breakpoint, isMedia = true) {
-    return `${isMedia ? "@media " : ""}(max-width: ${
-      this.values[breakpoint] - 1
-    }px)`;
-  },
-  between([min, max], isMedia = true) {
-    const from = this.values[min];
-    const to = this.values[max] - 1;
-    return `${
-      isMedia ? "@media " : ""
-    }(min-width: ${from}px) and (max-width: ${to}px)`;
-  },
-};
-
-export default Breakpoints;

package/src/components/Theme/colors/common.ts

@@ -1,31 +0,0 @@
-export const Common = {
-  WHITE: "#FFF",
-  BLACK: "#000",
-};
-
-export const Backgrounds = {
-  BG_1: "#ECEEF2",
-  BG_2: "#E4E6EA",
-  BG_3: "#D6D9E0",
-  BG_4: "#C9CDD6",
-  BG_5: "#BCC1CC",
-};
-
-export const Accents = {
-  ALERT: "#FF564E",
-  ALERT_HOVER: "#e72d24",
-  ALERT_ACTIVE: "#af2d26",
-  ALERT_LIGHT: "#ffeeed",
-  SUCCESS: "#4AC99B",
-  SUCCESS_HOVER: "#42b48b",
-  SUCCESS_ACTIVE: "#3ba07c",
-  SUCCESS_LIGHT: "#ecf9f5",
-};
-
-export const Color = {
-  ...Common,
-  ...Accents,
-  ...Backgrounds,
-};
-
-export default Color;

package/src/components/Theme/colors/index.ts

@@ -1,9 +0,0 @@
-import ThemeDefaultColors from "./theme_default";
-import ThemeBAColors from "./theme_buenos_aires";
-import CommonColors from "./common";
-
-export default {
-  ...CommonColors,
-  ...ThemeBAColors,
-  ...ThemeDefaultColors,
-};

package/src/components/Theme/global.scss

@@ -1,59 +0,0 @@
-[data-page="colibri-ui"] {
-  html {
-    margin: 0;
-    padding: 0;
-  }
-
-  html,
-  body {
-    font-family: Roboto, Arial, sans-serif;
-    font-style: normal;
-    font-weight: 400;
-  }
-
-  input,
-  label,
-  textarea,
-  select,
-  button {
-    background: none;
-  }
-
-  * {
-    border: none;
-    box-sizing: border-box;
-    margin: 0;
-    outline: none;
-    padding: 0;
-    text-decoration: none;
-  }
-
-  *,
-  *::before,
-  *::after {
-    box-sizing: inherit;
-  }
-
-  input,
-  textarea,
-  select,
-  button,
-  body {
-    margin: 0;
-    padding: 0;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: inherit;
-    margin: 0;
-  }
-
-  img {
-    border: 0;
-  }
-}

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

@@ -1,70 +0,0 @@
-import React from "react";
-import chroma from 'chroma-js';
-import ColorsDefault from './themes/default';
-import ColorsBA from './themes/buenos_aires';
-import Typography from '../Typography'
-
-const meta = {
-  title: "UI/Theme",
-};
-
-export default meta;
-
-export const Themes = () => {
-  const style = `
-    #storybook-root {
-      flex: 1;
-      display: block;
-    }
-  `;
-
-  function isColorDark(color) {
-    const rgb = chroma(color).rgb();
-    const [r, g, b] = rgb.map(Number);
-    const brightness = (r * 0.299 + g * 0.587 + b * 0.114);
-    return brightness < 128;
-  }
-
-  function getTextColorForBackground(bgColor) {
-    return isColorDark(bgColor) ? 'white' : 'black';
-  }
-
-  return (
-    <>
-      <style>{style}</style>
-      <div>
-        <div style={{ display: 'flex', gap: '16px', flexDirection: 'column' }}>
-        <div style={{ display: 'flex', gap: '16px' }}>
-          <div style={{ flex: 1 }}/>
-          <div style={{ flex: 1 }}>
-            <Typography tag="h5" size="h5">Theme Default</Typography>
-          </div>
-          <div style={{ flex: 1 }}>
-            <Typography tag="h5" size="h5">Theme BA</Typography>
-          </div>
-        </div>
-          {Object.entries(ColorsDefault).map((item, index) => {
-            const backgroundColor = item[1];
-            const textColor = getTextColorForBackground(backgroundColor);
-            const backgroundBAColor = ColorsBA[item[0]];
-            const textBAColor = getTextColorForBackground(backgroundColor);
-
-            return (
-              <div style={{ display: 'flex', gap: '16px' }} key={index}>
-                <div style={{ flex: 1 }}>
-                  {`--${item[0]}`}
-                </div>
-                <div style={{ backgroundColor, color: textColor, flex: 1 }}>
-                  {item[1]}
-                </div>
-                <div style={{ backgroundColor: backgroundBAColor, color: textBAColor, flex: 1 }}>
-                  {ColorsBA[item[0]]}
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    </>
-  );
-};

package/src/components/Theme/index.tsx

@@ -1,7 +0,0 @@
-import THEME_DEFAULT from "./themes/default";
-import THEME_BA from "./themes/buenos_aires";
-
-export const THEMES = {
-  DEFAULT: THEME_DEFAULT,
-  BA: THEME_BA,
-};

package/src/components/TimeSelect/Label/index.tsx

@@ -1,20 +0,0 @@
-import React, { useRef } from "react";
-import type { FC } from "react";
-
-type OptionLabelProps = {
-  time: string;
-  onClick?: () => void;
-  onMouseEnter?: () => void;
-};
-
-const OptionLabel: FC<OptionLabelProps> = ({ time, onClick, onMouseEnter }) => {
-  const ref = useRef<null | HTMLLIElement>(null);
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    <span onClick={onClick} onMouseEnter={onMouseEnter} ref={ref}>
-      {time}
-    </span>
-  );
-};
-
-export default OptionLabel;

package/src/components/TimeSelect/helpers.ts

@@ -1,37 +0,0 @@
-import { addMinutes, format, isBefore, parse } from "date-fns";
-import type { Timestamp } from "./index.props";
-
-const day = new Date();
-day.setHours(24, 0, 0, 0);
-
-export const DEFAULT_TIME = { index: 24, time: "12:00" };
-export const formatTime = (date: Date): string => format(date, "HH:mm");
-
-export const generateSuggest = (interval: number = 15): Timestamp[] =>
-  new Array((24 * 60) / interval).fill(null).map((_, index) => {
-    const date = addMinutes(day, index * interval);
-
-    return {
-      time: formatTime(date),
-    };
-  });
-
-export const checkIsBeforeNow = (
-  time: string,
-  currentDate?: Date | null,
-): boolean =>
-  currentDate ? isBefore(parse(time, "HH:mm", currentDate), new Date()) : false;
-
-export const checkIsBeforeSelectedDate = (
-  time: string,
-  interval: number,
-  date?: Date | null,
-): boolean => {
-  if (date) {
-    const selectedDate = new Date(date);
-    selectedDate.setMinutes(selectedDate.getMinutes() + interval);
-    return isBefore(parse(time, "HH:mm", date), selectedDate);
-  }
-
-  return false;
-};

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

@@ -1,4 +0,0 @@
-export type Timestamp = {
-  time: string;
-  disabled?: boolean;
-};