@clickhouse/click-ui 0.0.0 → 0.0.2

package/src/components/RadioGroup/RadioGroup.test.tsx

@@ -0,0 +1,59 @@
+import { ThemeProvider } from "styled-components";
+import { themes } from "../../theme";
+import { fireEvent, render } from "@testing-library/react";
+import { RadioGroup } from "@/components";
+import { RadioGroupProps } from "./RadioGroup";
+
+describe("RadioGroup", () => {
+  const renderRadioGroup = (props: RadioGroupProps) =>
+    render(
+      <ThemeProvider theme={themes.dark}>
+        <RadioGroup
+          inline
+          {...props}
+        >
+          <RadioGroup.Item
+            id="RadioButton1"
+            label="Radio Button1"
+            value="RadioButton1"
+          />
+          <RadioGroup.Item
+            label="Radio Button2"
+            value="RadioButton2"
+            id="RadioButton2"
+          />
+          <RadioGroup.Item
+            label="Radio Button3"
+            value="RadioButton3"
+            id="RadioButton3"
+          />
+        </RadioGroup>
+      </ThemeProvider>
+    );
+
+  it("should execute action on click", () => {
+    const handleClick = jest.fn();
+    const { getByLabelText } = renderRadioGroup({
+      onValueChange: handleClick,
+    });
+    const radio = getByLabelText("Radio Button1");
+    expect(radio.dataset.state).toBe("unchecked");
+    fireEvent.click(radio);
+    expect(radio.dataset.state).toBe("checked");
+    expect(handleClick).toBeCalledTimes(1);
+  });
+
+  it("should not execute action on click if the radio is disabled", () => {
+    const handleClick = jest.fn();
+    const { getByLabelText } = renderRadioGroup({
+      onValueChange: handleClick,
+      disabled: true,
+    });
+    const radio = getByLabelText("Radio Button2");
+    expect(radio.dataset.state).toBe("unchecked");
+    expect(radio).not.toBeNull();
+    fireEvent.click(radio);
+    expect(radio.dataset.state).toBe("unchecked");
+    expect(handleClick).toBeCalledTimes(0);
+  });
+});

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,149 @@
+import * as RadixRadioGroup from "@radix-ui/react-radio-group";
+import { HTMLAttributes, ReactNode, useId } from "react";
+import styled from "styled-components";
+
+export interface RadioGroupProps extends RadixRadioGroup.RadioGroupProps {
+  inline?: boolean;
+}
+
+const RadioGroupRoot = styled(RadixRadioGroup.Root)<{ inline: "true" | "false" }>`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.click.checkbox.space.gap};
+  flex-direction: ${({ inline }) => (inline === "true" ? "row" : "column")};
+`;
+
+export const RadioGroup = ({ children, inline, ...props }: RadioGroupProps) => {
+  return (
+    <RadioGroupRoot
+      inline={inline === true ? "true" : "false"}
+      {...props}
+    >
+      {children}
+    </RadioGroupRoot>
+  );
+};
+
+interface RadioGroupInputProps extends RadixRadioGroup.RadioGroupItemProps {
+  label?: ReactNode;
+}
+
+export type RadioGroupItemProps = RadioGroupInputProps & HTMLAttributes<HTMLDivElement>;
+
+const RadioGroupItem = ({
+  id,
+  label,
+  value,
+  disabled,
+  required,
+  ...props
+}: RadioGroupItemProps) => {
+  const defaultId = useId();
+  return (
+    <Wrapper {...props}>
+      <RadioInput
+        value={value}
+        id={id ?? defaultId}
+        disabled={disabled}
+        required={required}
+      >
+        <RadioGroupIndicator />
+      </RadioInput>
+      {label && (
+        <label
+          className="Label"
+          htmlFor={id ?? defaultId}
+        >
+          {label}
+        </label>
+      )}
+    </Wrapper>
+  );
+};
+
+RadioGroupItem.displayName = "RadioGroupItem";
+RadioGroup.Item = RadioGroupItem;
+
+const Wrapper = styled.div`
+  padding: ${({ theme }) => theme.click.checkbox.space.all};
+
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.click.checkbox.space.gap};
+`;
+
+const RadioInput = styled(RadixRadioGroup.Item)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  cursor: pointer;
+  ${({ theme }) => `
+    border-radius: ${theme.click.radio.radii.all};
+    width: 1rem;
+    height: 1rem;
+    background: ${theme.click.radio.color.background.default};
+    border: 1px solid ${theme.click.radio.color.stroke.default};
+
+    & ~ label {
+      color: ${theme.click.field.color.genericLabel.default};
+      font: ${theme.click.radio.typography.label.default};
+      cursor: pointer;
+    }
+    &:hover {
+      background: ${theme.click.radio.color.background.hover};
+      & ~ label {
+        color: ${theme.click.field.color.genericLabel.hover};
+        font: ${theme.click.radio.typography.label.hover};
+      }
+    }
+    &[data-state="checked"] {
+      border-color: ${theme.click.radio.color.stroke.active};
+      background: ${theme.click.radio.color.background.active};
+      & ~ label {
+        color: ${theme.click.field.color.genericLabel.active};
+        font: ${theme.click.radio.typography.label.active};
+      }
+    }
+    &[data-disabled] {
+      background: ${theme.click.radio.color.background.disabled};
+      border-color: ${theme.click.radio.color.stroke.disabled};
+      & ~ label {
+        color: ${theme.click.field.color.genericLabel.disabled};
+        font: ${theme.click.radio.typography.label.disabled};
+      }
+    }
+  `};
+`;
+
+const RadioGroupIndicator = styled(RadixRadioGroup.Indicator)`
+  ${({ theme }) => `
+    background: ${theme.click.radio.color.background.default};
+    &::after {
+      content: '';
+      display: block;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background-color: ${theme.click.radio.color.indicator.default};
+      &:hover {
+        background: ${theme.click.radio.color.indicator.hover};
+      }
+    }
+    &[data-state="checked"] {
+      background: ${theme.click.radio.color.background.active};
+      &::after {
+        background: ${theme.click.radio.color.indicator.active};
+      }
+    }
+    &:hover {
+      background: ${theme.click.radio.color.background.hover};
+    }
+    &[data-disabled] {
+      background: ${theme.click.radio.color.background.disabled};
+      &::after {
+        background: ${theme.click.radio.color.indicator.disabled};
+      }
+    }
+  `}
+`;

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

@@ -0,0 +1,24 @@
+import Separator from "./Separator";
+
+export default {
+  component: Separator,
+  title: "Display/Separator",
+  tags: ["separator","autodocs"],
+  argTypes: {
+    size: {
+      options: ["xs", "sm", "md", "lg", "xl", "xxl"],
+      control: { type: "radio" },
+    },
+    orientation: {
+      options: ["horizontal", "vertical"],
+      control: { type: "radio" },
+    },
+  },
+};
+
+export const Playground = {
+  args: {
+    size: "xs",
+    orientation: "horizontal",
+  },
+};

package/src/components/Separator/Separator.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import * as RadixSeparator from "@radix-ui/react-separator";
+interface Props extends RadixSeparator.SeparatorProps {
+  size: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+}
+const CUISeparator = styled(RadixSeparator.Root)<Props>`
+  &[data-orientation="horizontal"] {
+    height: 0.0625rem;
+    width: 100%;
+  }
+  &[data-orientation="vertical"] {
+    height: 100%;
+    width: 0.0625rem;
+  }
+  ${({ theme, size, orientation }) => `
+    background: ${theme.click.separator.color.stroke.default};
+    margin: ${
+      orientation === "horizontal"
+        ? `${theme.click.separator.horizontal.space.y[size]} ${theme.click.separator.horizontal.space.x.all}`
+        : `${theme.click.separator.vertical.space.y.all} ${theme.click.separator.vertical.space.x[size]}`
+    }
+  `}
+`;
+
+const Separator = ({ orientation = "horizontal", ...props }: Props) => (
+  <CUISeparator orientation={orientation} {...props} />
+);
+
+export default Separator;

package/src/components/SidebarNavigationItem/SidebarNavigationItem.stories.tsx

@@ -2,8 +2,8 @@ import { SidebarNavigationItem } from "@/components";
 
 export default {
   component: SidebarNavigationItem,
-  title: "SidebarNavigationItem",
-  tags: ["sidebar", "navigation-item"],
+  title: "Display/SidebarNavigationItem",
+  tags: ["sidebar", "navigation-item", "autodocs"],
 };
 
 export const Default = {

package/src/components/Spacer/Spacer.stories.tsx

@@ -0,0 +1,20 @@
+import { Spacer } from "./Spacer";
+
+export default {
+  component: Spacer,
+  title: "Display/Spacer",
+  tags: ["spacer","autodocs"],
+  argTypes: {
+    size: {
+      options: ["xs", "sm", "md", "lg", "xl", "xxl"],
+      control: { type: "radio" },
+    },
+  },
+};
+
+export const Playground = {
+  args: {
+    size: "xxl",
+  },
+};
+

package/src/components/Spacer/Spacer.tsx

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+export interface SpacerProps {
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+}
+
+const CUISpacer = styled.div<SpacerProps>` 
+  background: transparent;
+  display: flex;
+  padding: ${({ theme, size = "md" }) => `${theme.click.spacer.horizontal.space.y[size]} ${theme.click.spacer.horizontal.space.x.all}`};
+`
+
+export const Spacer = ({ size }: SpacerProps) => (
+  <CUISpacer size={size} />
+);

package/src/components/Switch/Switch.stories.ts

@@ -2,11 +2,11 @@ import { Switch } from "./Switch";
 
 export default {
   component: Switch,
-  title: "Switch",
-  tags: ["switch"],
+  title: "Forms/Switch",
+  tags: ["switch", "autodocs"],
 };
 
-export const Default = {
+export const Playground = {
   args: {
     checked: true,
     disabled: false,

package/src/components/Switch/Switch.tsx

@@ -77,7 +77,7 @@ function getThumbVars(
   }
 }
 
-const SwitchRoot = styled(RadixSwitch.Root)<RootProps>(props => {
+const SwitchRoot = styled(RadixSwitch.Root)<RootProps>((props) => {
   const vars = getRootVars(props.theme, props.disabled, props.checked);
 
   return {
@@ -87,10 +87,11 @@ const SwitchRoot = styled(RadixSwitch.Root)<RootProps>(props => {
     border: vars.border,
     borderRadius: props.theme.click.switch.radii.all,
     position: "relative",
+    padding: 0,
   };
 });
 
-const SwitchThumb = styled(RadixSwitch.Thumb)<ThumbProps>(props => {
+const SwitchThumb = styled(RadixSwitch.Thumb)<ThumbProps>((props) => {
   const vars = getThumbVars(props.theme, props.disabled, props.checked);
 
   return {

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,29 @@
+import { Table } from "./Table";
+
+export default {
+  component: Table,
+  title: "Display/Table",
+  tags: ["table", "autodocs"],
+};
+
+export const Playground = {
+  args: {
+    children: [
+      <Table.Tr>
+        <Table.Th>Company</Table.Th>
+        <Table.Th>Contact</Table.Th>
+        <Table.Th>Country</Table.Th>
+      </Table.Tr>,
+      <Table.Tr>
+        <Table.Td>Alfreds Futterkiste</Table.Td>
+        <Table.Td>Maria Anders</Table.Td>
+        <Table.Td>Germany</Table.Td>
+      </Table.Tr>,
+      <Table.Tr>
+        <Table.Td>Centro comercial Moctezuma</Table.Td>
+        <Table.Td>Francisco Chang</Table.Td>
+        <Table.Td>Mexico</Table.Td>
+      </Table.Tr>,
+    ],
+  },
+};

package/src/components/Table/Table.tsx

@@ -0,0 +1,109 @@
+import { Icon } from "@/components";
+import { IconName } from "@/components/Icon/types";
+import styled from "styled-components";
+
+type TableHeaderProps = {
+  children: React.ReactNode;
+  leftIcon?: IconName;
+  rightIcon?: IconName;
+};
+const StyledHeader = styled.th`
+  padding: 8px 16px;
+  background-color: ${props =>
+    props.theme.click.table.header.color.background.default};
+  font: ${props => props.theme.click.table.header.title.default};
+  color: ${props => props.theme.click.table.header.color.title.default};
+  gap: 4px;
+  text-align: left;
+
+  &:first-of-type {
+    border-top-left-radius: ${props => props.theme.click.table.radii.all};
+  }
+  &:last-of-type {
+    border-top-right-radius: ${props => props.theme.click.table.radii.all};
+  }
+`;
+
+const HeaderContentWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 4px;
+`;
+
+const TableHeader = ({
+  leftIcon,
+  rightIcon,
+  children,
+  ...delegated
+}: TableHeaderProps) => (
+  <StyledHeader {...delegated}>
+    <HeaderContentWrapper>
+      {leftIcon && <Icon name={leftIcon} width="12px" height="12px" />}
+      {children}
+      {rightIcon && <Icon name={rightIcon} width="12px" height="12px" />}
+    </HeaderContentWrapper>
+  </StyledHeader>
+);
+
+const TableRow = styled.tr`
+  background-color: ${props =>
+    props.theme.click.table.row.color.background.default};
+  border-bottom: 1px solid
+    ${props => props.theme.click.table.row.color.stroke.default};
+
+  &:has(${StyledHeader}) {
+    border-bottom: revert;
+  }
+
+  &:active {
+    background-color: ${props =>
+      props.theme.click.table.row.color.background.active};
+  }
+
+  &:hover {
+    background-color: ${props =>
+      props.theme.click.table.row.color.background.hover};
+  }
+`;
+
+const TableData = styled.td`
+  font: ${props => props.theme.click.table.cell.label.default};
+  padding: 16px;
+  border: 1px solid
+    ${props => props.theme.click.table.global.color.stroke.default};
+  border-top: none;
+
+  :not(:last-of-type) {
+    border-right: none;
+  }
+  :not(:first-of-type) {
+    border-left: none;
+  }
+
+  ${TableRow}:last-of-type &:first-of-type {
+    border-bottom-left-radius: ${props => props.theme.click.table.radii.all};
+  }
+  ${TableRow}:last-of-type &:last-of-type {
+    border-bottom-right-radius: ${props => props.theme.click.table.radii.all};
+  }
+`;
+
+const Table = (props: React.HTMLAttributes<HTMLTableElement>) => (
+  <StyledTable {...props} />
+);
+
+const StyledTable = styled.table`
+  border-spacing: 0;
+`;
+
+TableHeader.displayName = "Table.Th";
+Table.Th = TableHeader;
+
+TableData.displayName = "Table.Td";
+Table.Td = TableData;
+
+TableRow.displayName = "Table.Tr";
+Table.Tr = TableRow;
+
+export { Table };

package/src/components/Tabs/Tabs.stories.tsx

@@ -3,7 +3,7 @@ import type { StoryObj } from "@storybook/react";
 
 export default {
   component: Tabs,
-  title: "Tabs",
+  title: "Display/Tabs",
   tags: ["tabs", "autodocs"],
 };
 
@@ -33,39 +33,4 @@ export const Default: Story = {
       </>
     ),
   },
-};
-
-export const Hover = {
-  args: {
-    children: [
-      <>
-        <Tabs.TriggersList>
-          <Tabs.Trigger value="tab1" key="tab1">
-            tab1
-          </Tabs.Trigger>
-        </Tabs.TriggersList>
-        <Tabs.Content value="tab1">Tab 1 content</Tabs.Content>
-      </>,
-    ],
-  },
-  parameters: {
-    pseudo: {
-      hover: true,
-    },
-  },
-};
-
-export const Selected = {
-  args: {
-    children: [
-      <>
-        <Tabs.TriggersList>
-          <Tabs.Trigger value="tab1" data-state="active" key="tab1">
-            tab1
-          </Tabs.Trigger>
-        </Tabs.TriggersList>
-        <Tabs.Content value="tab1">Tab 1 content</Tabs.Content>
-      </>,
-    ],
-  },
-};
+};

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,68 @@
+import { TooltipProps } from "@radix-ui/react-tooltip";
+import { Tooltip, TooltipProvider } from "./Tooltip";
+
+interface Props extends TooltipProps {
+  showArrow?: boolean;
+  delayDuration?: number;
+  skipDelayDuration?: number;
+  disableHoverableContent?: boolean;
+  side: "top" | "right" | "left" | "bottom";
+}
+const TooltipExample = ({
+  delayDuration,
+  skipDelayDuration,
+  showArrow,
+  disableHoverableContent,
+  side,
+  ...props
+}: Props) => {
+  return (
+    <div
+      style={{
+        display: "grid",
+        placeItems: "center",
+        width: "100%",
+        height: "100%",
+      }}
+    >
+      <TooltipProvider
+        delayDuration={delayDuration}
+        disableHoverableContent={disableHoverableContent}
+        skipDelayDuration={skipDelayDuration}
+      >
+        <Tooltip {...props}>
+          <Tooltip.Trigger>
+            <div>Tooltip Trigger(Hover)</div>
+          </Tooltip.Trigger>
+          <Tooltip.Content
+            showArrow={showArrow}
+            side={side}
+          >
+            Tooltip content
+          </Tooltip.Content>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  );
+};
+export default {
+  component: TooltipExample,
+  title: "Display/Tooltip",
+  tags: ["form-field", "tooltip", "autodocs"],
+  argTypes: {
+    open: { control: "inline-radio", options: [undefined, true, false] },
+    defaultOpen: { control: "boolean" },
+    showArrow: { control: "boolean" },
+    delayDuration: { control: "number" },
+    skipDelayDuration: { control: "number" },
+    disableHoverableContent: { control: "boolean" },
+    side: { control: "select", options: ["top", "right", "left", "bottom"] },
+  },
+};
+
+export const Playground = {
+  args: {
+    side: "bottom",
+    showArrow: true,
+  },
+};

package/src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,44 @@
+import { ThemeProvider } from "styled-components";
+import { themes } from "../../theme";
+import { TooltipProps } from "@radix-ui/react-tooltip";
+import { Tooltip, TooltipProvider } from "..";
+import { render, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+describe("Tooltip", () => {
+  const renderTooltip = (props: TooltipProps) =>
+    render(
+      <ThemeProvider theme={themes.dark}>
+        <TooltipProvider delayDuration={0}>
+          <Tooltip {...props}>
+            <Tooltip.Trigger>
+              <div>Hover Here</div>
+            </Tooltip.Trigger>
+            <Tooltip.Content data-testid="tooltip-content">
+              Tooltip content
+            </Tooltip.Content>
+          </Tooltip>
+        </TooltipProvider>
+      </ThemeProvider>
+    );
+
+  it("should open tooltip on hover", async () => {
+    const { getAllByText } = renderTooltip({});
+    const TooltipTrigger = getAllByText("Hover Here");
+    expect(TooltipTrigger.length).toEqual(1);
+    await userEvent.hover(TooltipTrigger[0]);
+    expect(getAllByText("Tooltip content")).not.toBeNull();
+  });
+
+  it("should close hover card on pointerLeave", async () => {
+    const { getByText, getAllByText, getByTestId } = renderTooltip({});
+    const TooltipTrigger = getByText("Hover Here");
+    expect(TooltipTrigger).not.toBeNull();
+    await userEvent.hover(TooltipTrigger);
+    expect(getAllByText("Tooltip content")).not.toBeNull();
+    await userEvent.unhover(TooltipTrigger);
+    waitFor(() => {
+      expect(getByTestId("tooltip-content")).toBeNull();
+    });
+  });
+});