@clickhouse/click-ui 0.0.2 → 0.0.4

package/src/components/FormField/Label.tsx

@@ -1,47 +0,0 @@
-import { HTMLAttributes } from "react";
-import styled from "styled-components";
-
-export interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
-  disabled?: boolean;
-  error?: boolean;
-  htmlFor?: string;
-}
-
-const FormFieldLabel = styled.label<LabelProps>`
-  ${({ theme, disabled, error }) => `
-    ${
-      disabled
-        ? `
-    color: ${theme.click.field.color.label.disabled};
-    font: ${theme.click.field.typography.label.disabled};
-    `
-        : error
-        ? `
-    color: ${theme.click.field.color.label.error};
-    font: ${theme.click.field.typography.label.error};
-    `
-        : `
-    color: ${theme.click.field.color.label.default};
-    font: ${theme.click.field.typography.label.default};
-    &:hover {
-      color: ${theme.click.field.color.label.hover};
-      font: ${theme.click.field.typography.label.hover};
-    }
-    &:focus, &:focus-within {
-      color: ${theme.click.field.color.label.active};
-      font: ${theme.click.field.typography.label.active};
-    }
-    `
-    };
-  `}
-`;
-
-export const Label = ({ disabled, error, children, ...props }: LabelProps) => (
-  <FormFieldLabel
-    disabled={disabled}
-    error={error}
-    {...props}
-  >
-    {children}
-  </FormFieldLabel>
-);

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

@@ -1,48 +0,0 @@
-import { Select, SelectProps } from "./Select";
-interface Props extends SelectProps {
-  clickableNoData?: boolean;
-}
-const SelectExample = ({ clickableNoData, ...props }: Props) => {
-  return (
-    <Select {...props}>
-      <Select.Group heading="Group label">
-        <Select.Item value="content0">Content0</Select.Item>
-      </Select.Group>
-      <Select.Item value="content1">Content1 long text content</Select.Item>
-      <Select.Item value="content2">Content2</Select.Item>
-      <Select.Item value="content3">Content3</Select.Item>
-      {clickableNoData ? (
-        <Select.NoData onClick={() => console.log("Asasas")}>
-          {({ search }) => `No Field found ${search}`}
-        </Select.NoData>
-      ) : (
-        <Select.NoData />
-      )}
-    </Select>
-  );
-};
-export default {
-  component: SelectExample,
-  title: "Forms/Select",
-  tags: ["form-field", "select", "autodocs"],
-  argTypes: {
-    label: { control: "string" },
-    disabled: { control: "boolean" },
-    error: { control: "string" },
-    value: { control: "string" },
-    defaultValue: { control: "string" },
-    open: { control: "inline-radio", options: [undefined, true, false] },
-    defaultOpen: { control: "boolean" },
-    name: { control: "string" },
-    required: { control: "boolean" },
-    showSearch: { control: "boolean" },
-    isFormCotrol: { control: "boolean" },
-    clickableNoData: { control: "boolean" },
-  },
-};
-
-export const Playground = {
-  args: {
-    label: "Label",
-  },
-};

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

@@ -1,216 +0,0 @@
-import { ThemeProvider } from "styled-components";
-import { render, fireEvent } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import { themes } from "../../theme";
-import { Select, SelectProps } from "./Select";
-import { ReactNode } from "react";
-interface Props extends Omit<SelectProps, "children" | "label"> {
-  nodata?: ReactNode;
-}
-describe("Select", () => {
-  beforeAll(() => {
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    global.ResizeObserver = jest.fn().mockImplementation(() => ({
-      observe: jest.fn(),
-      unobserve: jest.fn(),
-      disconnect: jest.fn(),
-    }));
-  });
-  const renderSelect = ({ nodata, ...props }: Props) =>
-    render(
-      <ThemeProvider theme={themes.dark}>
-        <Select
-          label="Test Select Label"
-          {...props}
-        >
-          <Select.Group heading="Group label">
-            <Select.Item value="content0">Content0</Select.Item>
-          </Select.Group>
-          <Select.Item value="content1">Content1</Select.Item>
-          <Select.Item value="content2">Content2</Select.Item>
-          <Select.Item value="content3">Content3</Select.Item>
-          <Select.Item
-            value="content4"
-            disabled
-          >
-            Content4
-          </Select.Item>
-          {nodata ? nodata : <Select.NoData />}
-        </Select>
-      </ThemeProvider>
-    );
-
-  it("should open select on click", () => {
-    const { queryByText } = renderSelect({});
-    const selectTrigger = queryByText("Select an option");
-    expect(selectTrigger).not.toBeNull();
-    selectTrigger && fireEvent.click(selectTrigger);
-
-    expect(queryByText("Content0")).not.toBeNull();
-  });
-
-  it("should show error", () => {
-    const { queryByText } = renderSelect({
-      error: "Select Error",
-    });
-    expect(queryByText("Select an option")).not.toBeNull();
-    expect(queryByText("Select Error")).not.toBeNull();
-  });
-
-  it("should not open disabled select on click", () => {
-    const { queryByText } = renderSelect({
-      disabled: true,
-    });
-    const selectTrigger = queryByText("Select an option");
-    expect(selectTrigger).not.toBeNull();
-    selectTrigger && fireEvent.click(selectTrigger);
-
-    expect(queryByText("Content0")).toBeNull();
-  });
-
-  it("should close select on clicking outside content", () => {
-    const { queryByText } = renderSelect({});
-    const selectTrigger = queryByText("Select an option");
-    expect(selectTrigger).not.toBeNull();
-    selectTrigger && fireEvent.click(selectTrigger);
-
-    expect(queryByText("Content0")).not.toBeNull();
-    selectTrigger && fireEvent.click(selectTrigger);
-    expect(queryByText("Content0")).toBeNull();
-  });
-
-  it("should close select on selecting item", () => {
-    const { queryByText } = renderSelect({});
-    const selectTrigger = queryByText("Select an option");
-    expect(selectTrigger).not.toBeNull();
-    selectTrigger && fireEvent.click(selectTrigger);
-
-    const item = queryByText("Content0");
-    expect(item).not.toBeNull();
-    item && fireEvent.click(item);
-    expect(item).not.toBeNull();
-    expect(queryByText("Content1")).toBeNull();
-  });
-
-  it("should close select on selecting diabled item", () => {
-    const { queryByText } = renderSelect({});
-    const selectTrigger = queryByText("Select an option");
-    expect(selectTrigger).not.toBeNull();
-    selectTrigger && fireEvent.click(selectTrigger);
-
-    const item = queryByText("Content4");
-    expect(item).not.toBeNull();
-    item && fireEvent.click(item);
-    expect(item).not.toBeNull();
-    expect(queryByText("Content1")).not.toBeNull();
-  });
-
-  describe("onSearch enabled", () => {
-    it("on open show all options", () => {
-      const { queryByText } = renderSelect({
-        showSearch: true,
-      });
-      const selectTrigger = queryByText("Select an option");
-      expect(selectTrigger).not.toBeNull();
-      selectTrigger && fireEvent.click(selectTrigger);
-
-      expect(queryByText("Content0")).not.toBeNull();
-      expect(queryByText("Content1")).not.toBeNull();
-      expect(queryByText("Content2")).not.toBeNull();
-      expect(queryByText("Content3")).not.toBeNull();
-      expect(queryByText("Content4")).not.toBeNull();
-    });
-
-    it("filter by text", () => {
-      const { queryByText, getByTestId } = renderSelect({
-        showSearch: true,
-      });
-      const selectTrigger = queryByText("Select an option");
-      expect(selectTrigger).not.toBeNull();
-      selectTrigger && fireEvent.click(selectTrigger);
-
-      expect(queryByText("Group label")).toBeVisible();
-      expect(queryByText("Content0")).not.toBeNull();
-      expect(queryByText("Content1")).not.toBeNull();
-      expect(queryByText("Content2")).not.toBeNull();
-      expect(queryByText("Content3")).not.toBeNull();
-      expect(queryByText("Content4")).not.toBeNull();
-      fireEvent.change(getByTestId("select-search-input"), {
-        target: { value: "content2" },
-      });
-      expect(queryByText("Content2")).not.toBeNull();
-      expect(queryByText("Content1")).toBeNull();
-      expect(queryByText("Group label")).not.toBeVisible();
-    });
-
-    it("on clear show all data", () => {
-      const { queryByText, getByTestId } = renderSelect({
-        showSearch: true,
-      });
-      const selectTrigger = queryByText("Select an option");
-      expect(selectTrigger).not.toBeNull();
-      selectTrigger && fireEvent.click(selectTrigger);
-
-      const selectInput = getByTestId("select-search-input");
-      fireEvent.change(selectInput, {
-        target: { value: "content2" },
-      });
-      expect(queryByText("Content2")).not.toBeNull();
-      expect(queryByText("Content1")).toBeNull();
-      expect(queryByText("Group label")).not.toBeVisible();
-      fireEvent.click(getByTestId("select-search-close"));
-      expect(queryByText("Group label")).toBeVisible();
-      expect(queryByText("Content0")).not.toBeNull();
-      expect(queryByText("Content1")).not.toBeNull();
-      expect(queryByText("Content2")).not.toBeNull();
-      expect(queryByText("Content3")).not.toBeNull();
-      expect(queryByText("Content4")).not.toBeNull();
-      expect(document.activeElement).toBe(selectInput);
-    });
-    it("on no options available show no data", () => {
-      const { queryByText, getByTestId } = renderSelect({
-        showSearch: true,
-      });
-      const selectTrigger = queryByText("Select an option");
-      expect(selectTrigger).not.toBeNull();
-      selectTrigger && fireEvent.click(selectTrigger);
-
-      fireEvent.change(getByTestId("select-search-input"), {
-        target: { value: "nodata" },
-      });
-      expect(queryByText("Content2")).toBeNull();
-      expect(queryByText("Content1")).toBeNull();
-      expect(queryByText("Group label")).not.toBeVisible();
-      const btn = queryByText(/No Options found/i);
-      expect(btn).not.toBeNull();
-      btn && fireEvent.click(btn);
-      expect(btn).not.toBeNull();
-    });
-    it("on no options available show no custom data", () => {
-      const onClick = jest.fn();
-      const { queryByText, getByTestId } = renderSelect({
-        showSearch: true,
-        nodata: (
-          <Select.NoData onClick={onClick}>
-            {({ search }) => `No Field found ${search}`}
-          </Select.NoData>
-        ),
-      });
-      const selectTrigger = queryByText("Select an option");
-      expect(selectTrigger).not.toBeNull();
-      selectTrigger && fireEvent.click(selectTrigger);
-
-      fireEvent.change(getByTestId("select-search-input"), {
-        target: { value: "nodata" },
-      });
-      expect(queryByText("Content2")).toBeNull();
-      expect(queryByText("Content1")).toBeNull();
-      expect(queryByText("Group label")).not.toBeVisible();
-      const btn = queryByText(/No Field found/i);
-      expect(btn).not.toBeNull();
-      btn && fireEvent.click(btn);
-      expect(onClick).toBeCalledTimes(1);
-      expect(btn).not.toBeVisible();
-    });
-  });
-});