@clickhouse/click-ui 0.0.0 → 0.0.2

package/src/components/Button/Button.tsx

@@ -2,10 +2,12 @@ import { Icon } from "@/components";
 import { IconName } from "@/components/Icon/types";
 import styled from "styled-components";
 
-type ButtonType = "primary" | "secondary";
-type Alignment = "left";
+type ButtonType = "primary" | "secondary" | "danger";
+type Alignment = "center" | "left";
+
 export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   type?: ButtonType;
+  disabled?: boolean;
   label?: string;
   iconLeft?: IconName;
   iconRight?: IconName;
@@ -16,6 +18,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 
 export interface StyledButtonProps {
   styleType: ButtonType;
+  disabled?: boolean;
   align?: Alignment;
   width?: string;
   height?: string;
@@ -26,14 +29,28 @@ export const Button = ({
   iconLeft,
   iconRight,
   label,
-  align,
+  align = "center",
   children,
   ...delegated
 }: ButtonProps) => (
-  <StyledButton styleType={type} align={align} {...delegated}>
-    {iconLeft && <Icon name={iconLeft} size="small" />}
+  <StyledButton
+    styleType={type}
+    align={align}
+    {...delegated}
+  >
+    {iconLeft && (
+      <Icon
+        name={iconLeft}
+        size="small"
+      />
+    )}
     {label ? label : children}
-    {iconRight && <Icon name={iconRight} size="small" />}
+    {iconRight && (
+      <Icon
+        name={iconRight}
+        size="small"
+      />
+    )}
   </StyledButton>
 );
 
@@ -41,57 +58,58 @@ const BaseButton = styled.button`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  align-items: center;
-
-  padding-left: ${props => props.theme.click.button.basic.space.x};
-  padding-right: ${props => props.theme.click.button.basic.space.x};
-  padding-top: ${props => props.theme.click.button.basic.space.y};
-  padding-bottom: ${props => props.theme.click.button.basic.space.y};
+  padding: ${props =>
+    `${props.theme.click.button.basic.space.y} ${props.theme.click.button.basic.space.x}`};
   border-radius: ${props => props.theme.click.button.radii.all};
   gap: ${props => props.theme.click.button.basic.space.gap};
   cursor: pointer;
 `;
 
-const StyledButton = styled(BaseButton)<StyledButtonProps>`
+const StyledButton = styled(BaseButton)<
+  Pick<StyledButtonProps, "width" | "height" | "align" | "styleType">
+>`
   width: ${props => props.width};
   height: ${props => props.height};
+  font: ${props => props.theme.click.button.basic.typography.label.default};
+  color: ${({ styleType = "primary", theme }) =>
+    theme.click.button.basic.color[styleType].text.default};
+  background-color: ${({ styleType = "primary", theme }) =>
+    theme.click.button.basic.color[styleType].background.default};
+  border: 1px solid
+    ${({ styleType = "primary", theme }) =>
+      theme.click.button.basic.color[styleType].stroke.default};
 
   display: flex;
   align-items: center;
-  justify-content: ${props =>
-    props.align === "left" ? "flex-start" : "center"};
+  justify-content: ${props => (props.align === "left" ? "flex-start" : "center")};
 
-  border: 1px solid
-    ${props =>
-      props.theme.click.button.basic.color[props.styleType].stroke.default};
-  background-color: ${props =>
-    props.theme.click.button.basic.color[props.styleType].background.default};
-  color: ${props =>
-    props.theme.click.button.basic.color[props.styleType].text.default};
-  font: ${props => props.theme.click.button.basic.typography.label.default};
-
-  &:active {
+  &:hover {
+    background-color: ${({ styleType = "primary", theme }) =>
+      theme.click.button.basic.color[styleType].background.hover};
     border: 1px solid
-      ${props =>
-        props.theme.click.button.basic.color[props.styleType].stroke.active};
-    background-color: ${props =>
-      props.theme.click.button.basic.color[props.styleType].background.active};
-    font: ${props => props.theme.click.button.basic.typography.label.active};
+      ${({ styleType = "primary", theme }) =>
+        theme.click.button.basic.color[styleType].stroke.hover};
   }
 
-  &:hover {
+  &:active,
+  &:focus {
+    background-color: ${({ styleType = "primary", theme }) =>
+      theme.click.button.basic.color[styleType].background.active};
     border: 1px solid
-      ${props =>
-        props.theme.click.button.basic.color[props.styleType].stroke.hover};
-    background-color: ${props =>
-      props.theme.click.button.basic.color[props.styleType].background.hover};
-    font: ${props => props.theme.click.button.basic.typography.label.hover};
+      ${({ styleType = "primary", theme }) =>
+        theme.click.button.basic.color[styleType].stroke.active};
   }
 
-  &[disabled] {
-    background-color: ${props =>
-      props.theme.click.button.basic.color.disabled.background.default};
-    color: ${props =>
-      props.theme.click.button.basic.color.disabled.text.default};
+  &:disabled,
+  &:disabled:hover,
+  &:disabled:active {
+    background-color: ${({ styleType = "primary", theme }) =>
+      theme.click.button.basic.color[styleType].background.disabled};
+    color: ${({ styleType = "primary", theme }) =>
+      theme.click.button.basic.color[styleType].text.disabled};
+    border: 1px solid
+      ${({ styleType = "primary", theme }) =>
+        theme.click.button.basic.color[styleType].stroke.disabled};
+    cursor: not-allowed;
   }
 `;

package/src/components/ButtonGroup/ButtonGroup.stories.ts

@@ -2,11 +2,11 @@ import { ButtonGroup } from "./ButtonGroup";
 
 export default {
   component: ButtonGroup,
-  title: "ButtonGroup",
-  tags: ["buttons"],
+  title: "Buttons/ButtonGroup",
+  tags: ["button-group", "autodocs"],
 };
 
-export const Default = {
+export const Playground = {
   args: {
     labels: ["Button 1", "Button 2", "Button 3"],
     activeIndex: 2,

package/src/components/Card/Card.stories.ts

@@ -2,11 +2,11 @@ import { Card } from "./Card";
 
 export default {
   component: Card,
-  title: "Card",
-  tags: ["card"],
+  title: "Display/Card",
+  tags: ["card","autodocs"],
 };
 
-export const Default = {
+export const Playground = {
   args: {
     title: "Card title",
     badgeText: "experiment",

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,35 @@
+import { Checkbox } from "./Checkbox";
+
+const CheckboxComponent = ({
+  checked,
+  ...props
+}: {
+  checked: "default" | "checked" | "unchecked";
+  disabled: boolean;
+  label?: string;
+}) => {
+  return (
+    <Checkbox
+      checked={checked === "default" ? undefined : checked === "checked"}
+      {...props}
+    />
+  );
+};
+export default {
+  component: CheckboxComponent,
+  title: "Forms/Checkbox",
+  tags: ["checkbox","autodocs"],
+  argTypes: {
+    checked: { control: "radio", options: ["default", "checked", "unchecked"] },
+    disabled: { control: "boolean" },
+    label: { control: "text" },
+  },
+};
+
+export const Playground = {
+  args: {
+    label: "Accept terms and conditions",
+    disabled: false,
+    checked: "default",
+  },
+};

package/src/components/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,41 @@
+import { ThemeProvider } from "styled-components";
+import { themes } from "../../theme";
+import { render, fireEvent } from "@testing-library/react";
+import { Checkbox } from "@/components";
+import { CheckboxProps } from "@/components/Checkbox/Checkbox";
+
+describe("Checkbox", () => {
+  const renderCheckbox = (props: CheckboxProps) =>
+    render(
+      <ThemeProvider theme={themes.dark}>
+        <Checkbox {...props} />
+      </ThemeProvider>
+    );
+
+  it("should execute action on click", () => {
+    let counter = 0;
+    const handleClick = () => counter++;
+    const { getByTestId } = renderCheckbox({
+      onCheckedChange: handleClick,
+      label: "Accept terms and conditions",
+    });
+    const checkbox = getByTestId("checkbox");
+    fireEvent.click(checkbox);
+
+    expect(counter).toEqual(1);
+  });
+
+  it("should not execute action on click if the checkbox is disabled", () => {
+    let counter = 0;
+    const handleClick = () => counter++;
+    const { getByTestId } = renderCheckbox({
+      onCheckedChange: handleClick,
+      label: "Accept terms and conditions",
+      disabled: true,
+    });
+    const checkbox = getByTestId("checkbox");
+    fireEvent.click(checkbox);
+
+    expect(counter).toEqual(0);
+  });
+});

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,89 @@
+import { Icon } from "@/components";
+import * as RadixCheckbox from "@radix-ui/react-checkbox";
+import { useId } from "react";
+import styled from "styled-components";
+
+export interface CheckboxProps extends RadixCheckbox.CheckboxProps {
+  label?: string;
+}
+export const Checkbox = ({ id, label = "", ...delegated }: CheckboxProps) => {
+  const defaultId = useId();
+  return (
+    <Wrapper>
+      <CheckInput
+        id={id ?? defaultId}
+        data-testid="checkbox"
+        {...delegated}
+      >
+        <CheckIconWrapper>
+          <Icon
+            name="check"
+            size="small"
+          />
+        </CheckIconWrapper>
+      </CheckInput>
+      {label && <label htmlFor={id ?? defaultId}>{label}</label>}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  padding: ${({ theme }) => theme.click.checkbox.space.all};
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.click.checkbox.space.gap};
+`;
+
+const CheckInput = styled(RadixCheckbox.Root)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ theme }) => `
+    border-radius: ${theme.click.checkbox.radii.all};
+    width: ${theme.click.checkbox.size.all};
+    height: ${theme.click.checkbox.size.all};
+    background: ${theme.click.checkbox.color.background.default};
+    border: 1px solid ${theme.click.checkbox.color.stroke.default};
+    cursor: pointer;
+    
+    & ~ label {
+      color: ${theme.click.checkbox.color.label.default};
+      font: ${theme.click.field.typography.fieldText.default}
+      cursor: pointer;
+    }
+    &:hover {
+      background: ${theme.click.checkbox.color.background.hover};
+      &~ label {
+        color: ${theme.click.checkbox.color.label.hover};
+      }
+    }
+    &[data-state="checked"] {
+      border-color: ${theme.click.checkbox.color.stroke.active};
+      background: ${theme.click.checkbox.color.background.active};
+      & ~ label {
+        color: ${theme.click.checkbox.color.label.active};
+      }
+    }
+    &[data-disabled] {
+      background: ${theme.click.checkbox.color.background.disabled};
+      border-color: ${theme.click.checkbox.color.stroke.disabled};
+      &[data-state="checked"] {
+        background: ${theme.click.checkbox.color.background.disabled};
+        border-color: ${theme.click.checkbox.color.stroke.disabled};
+      }
+      & ~ label {
+        color: ${theme.click.checkbox.color.label.disabled};
+      }
+    }
+  `};
+`;
+
+const CheckIconWrapper = styled(RadixCheckbox.Indicator)`
+  ${({ theme }) => `
+    color: ${theme.click.checkbox.color.check.active};
+    &[data-disabled] {
+      color: ${theme.click.checkbox.color.check.disabled};
+    }
+  `}
+`;

package/src/components/ContextMenu/ContextMenu.stories.tsx

@@ -0,0 +1,73 @@
+import { ContextMenuProps } from "@radix-ui/react-context-menu";
+import { ContextMenu } from "./ContextMenu";
+import styled from "styled-components";
+
+interface Props extends ContextMenuProps {
+  disabled?: boolean;
+  showArrow?: boolean;
+  side: "top" | "right" | "left" | "bottom";
+}
+const GridCenter = styled.div`
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+`;
+
+const Trigger = styled(GridCenter)`
+  border: 2px currentColor dashed;
+`;
+const ContextMenuExample = ({ showArrow, disabled, side, ...props }: Props) => {
+  return (
+    <GridCenter>
+      <ContextMenu {...props}>
+        <ContextMenu.Trigger disabled={disabled}>
+          <Trigger>ContextMenu Trigger</Trigger>
+        </ContextMenu.Trigger>
+        <ContextMenu.Content
+          showArrow={showArrow}
+          side={side}
+        >
+          <ContextMenu.Group>
+            <ContextMenu.Item>Content0</ContextMenu.Item>
+          </ContextMenu.Group>
+          <ContextMenu.Item>Content1 long text content</ContextMenu.Item>
+          <ContextMenu.Sub>
+            <ContextMenu.SubTrigger>Hover over</ContextMenu.SubTrigger>
+            <ContextMenu.Content sub>
+              <ContextMenu.Item>SubContent0</ContextMenu.Item>
+              <ContextMenu.Item>SubContent1</ContextMenu.Item>
+              <ContextMenu.Item>SubContent0</ContextMenu.Item>
+              <ContextMenu.Item>SubContent1</ContextMenu.Item>
+              <ContextMenu.Item>SubContent0</ContextMenu.Item>
+              <ContextMenu.Item>SubContent1</ContextMenu.Item>
+              <ContextMenu.Item>SubContent0</ContextMenu.Item>
+              <ContextMenu.Item>SubContent1</ContextMenu.Item>
+              <ContextMenu.Item>SubContent0</ContextMenu.Item>
+              <ContextMenu.Item>SubContent1</ContextMenu.Item>
+            </ContextMenu.Content>
+          </ContextMenu.Sub>
+          <ContextMenu.Item>Content2</ContextMenu.Item>
+          <ContextMenu.Item disabled>Content3</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu>
+    </GridCenter>
+  );
+};
+export default {
+  component: ContextMenuExample,
+  title: "Display/ContextMenu",
+  tags: ["form-field", "dropdown", "autodocs"],
+  argTypes: {
+    disabled: { control: "boolean" },
+    showArrow: { control: "boolean" },
+    side: { control: "select", options: ["top", "right", "left", "bottom"] },
+  },
+};
+
+export const Playground = {
+  args: {
+    showArrow: true,
+    side: "left",
+  },
+};

package/src/components/ContextMenu/ContextMenu.test.tsx

@@ -0,0 +1,152 @@
+import { ThemeProvider } from "styled-components";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+import { ContextMenuProps } from "@radix-ui/react-context-menu";
+import userEvent from "@testing-library/user-event";
+import { themes } from "../../theme";
+import { ContextMenu } from "./ContextMenu";
+
+interface Props extends ContextMenuProps {
+  disabled?: boolean;
+}
+
+describe("ContextMenu", () => {
+  beforeAll(() => {
+    window.HTMLElement.prototype.scrollIntoView = jest.fn();
+    global.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+    global.DOMRect = class DOMRect {
+      bottom = 0;
+      left = 0;
+      right = 0;
+      top = 0;
+      constructor(public x = 0, public y = 0, public width = 0, public height = 0) {}
+      static fromRect(other?: DOMRectInit): DOMRect {
+        return new DOMRect(other?.x, other?.y, other?.width, other?.height);
+      }
+      toJSON() {
+        return JSON.stringify(this);
+      }
+    };
+  });
+  const renderContextMenu = ({ disabled, ...props }: Props) =>
+    render(
+      <ThemeProvider theme={themes.dark}>
+        <ContextMenu {...props}>
+          <ContextMenu.Trigger disabled={disabled}>
+            <div>ContextMenu Trigger</div>
+          </ContextMenu.Trigger>
+          <ContextMenu.Content>
+            <ContextMenu.Group>
+              <ContextMenu.Item>Content0</ContextMenu.Item>
+            </ContextMenu.Group>
+            <ContextMenu.Item>Content1 long text content</ContextMenu.Item>
+            <ContextMenu.Sub>
+              <ContextMenu.SubTrigger>Hover over</ContextMenu.SubTrigger>
+              <ContextMenu.Content sub>
+                <ContextMenu.Item>SubContent0</ContextMenu.Item>
+                <ContextMenu.Item>SubContent1</ContextMenu.Item>
+              </ContextMenu.Content>
+            </ContextMenu.Sub>
+            <ContextMenu.Item>Content2</ContextMenu.Item>
+            <ContextMenu.Item disabled>Content3</ContextMenu.Item>
+          </ContextMenu.Content>
+        </ContextMenu>
+      </ThemeProvider>
+    );
+
+  it("should open menu on rightclick", () => {
+    const { getByText } = renderContextMenu({});
+    const contextMenuTrigger = getByText("ContextMenu Trigger");
+    expect(contextMenuTrigger).not.toBeNull();
+    fireEvent.contextMenu(contextMenuTrigger);
+    expect(getByText("Content0")).not.toBeNull();
+  });
+
+  it("should not open disabled contextMenu on pointer", () => {
+    const { getByText, queryByText } = renderContextMenu({
+      disabled: true,
+    });
+    const contextMenuTrigger = getByText("ContextMenu Trigger");
+    fireEvent.contextMenu(contextMenuTrigger);
+    expect(queryByText("Content0")).toBeNull();
+  });
+
+  it("should close contextMenu on clicking outside content", async () => {
+    const { getByText, queryByText } = renderContextMenu({});
+    const contextMenuTrigger = getByText("ContextMenu Trigger");
+    fireEvent.contextMenu(contextMenuTrigger);
+    expect(queryByText("Content0")).not.toBeNull();
+    fireEvent.click(document, {
+      ctrlKey: false,
+      button: 0,
+    });
+    await waitFor(() => {
+      expect(queryByText("Content1")).toBeNull();
+    });
+  });
+
+  it("should close contextMenu on selecting item", () => {
+    const { getByText, queryByText } = renderContextMenu({});
+    const contextMenuTrigger = getByText("ContextMenu Trigger");
+    expect(contextMenuTrigger).not.toBeNull();
+    fireEvent.contextMenu(contextMenuTrigger);
+    expect(getByText("Content0")).not.toBeNull();
+    const item = queryByText("Content0");
+    expect(item).not.toBeNull();
+    item && fireEvent.click(item);
+    expect(item).not.toBeNull();
+    expect(queryByText("Content1")).toBeNull();
+  });
+
+  it("should open submenu contextMenu on selecting item with subcontent", async () => {
+    const { getByText, queryByText } = renderContextMenu({});
+    const contextMenuTrigger = getByText("ContextMenu Trigger");
+    expect(contextMenuTrigger).not.toBeNull();
+    fireEvent.contextMenu(contextMenuTrigger);
+
+    expect(queryByText("Content0")).not.toBeNull();
+    const item = getByText("Hover over");
+    expect(item).not.toBeNull();
+    await userEvent.hover(item);
+    await waitFor(() => {
+      expect(queryByText("SubContent0")).not.toBeNull();
+    });
+    expect(item).not.toBeNull();
+  });
+
+  it("should close contextMenu on selecting sub item", async () => {
+    const { getByText, queryByText } = renderContextMenu({});
+    const contextMenuTrigger = getByText("ContextMenu Trigger");
+    fireEvent.contextMenu(contextMenuTrigger);
+
+    expect(queryByText("Content0")).not.toBeNull();
+    const item = queryByText("Hover over");
+    item && (await userEvent.hover(item));
+    await waitFor(() => {
+      expect(queryByText("SubContent0")).not.toBeNull();
+    });
+    expect(item).not.toBeNull();
+    const subItem = queryByText("SubContent0");
+    subItem && fireEvent.click(subItem);
+    await waitFor(() => {
+      expect(queryByText("SubContent1")).toBeNull();
+    });
+    expect(queryByText("Content0")).toBeNull();
+  });
+
+  it("should not close contextMenu on selecting disabled item", () => {
+    const { getByText, queryByText } = renderContextMenu({});
+    const contextMenuTrigger = getByText("ContextMenu Trigger");
+    fireEvent.contextMenu(contextMenuTrigger);
+
+    expect(queryByText("Content3")).not.toBeNull();
+    const item = queryByText("Content3");
+    expect(item).not.toBeNull();
+    item && fireEvent.pointerDown(item);
+    expect(item).not.toBeNull();
+    expect(queryByText("Content2")).not.toBeNull();
+  });
+});