@clickhouse/click-ui 0.0.3 → 0.0.5

package/src/components/IconButton/IconButton.stories.ts

@@ -1,34 +0,0 @@
-import { IconButton } from "./IconButton";
-
-export default {
-  component: IconButton,
-  title: "Buttons/IconButton",
-  tags: ["icon-button","autodocs"],
-};
-
-export const Playground = {
-  args: {
-    icon: "user",
-  },
-};
-
-export const Disabled = {
-  args: {
-    disabled: true,
-    icon: "user",
-  },
-};
-
-export const Empty = {
-  args: {
-    display: "empty",
-    icon: "user",
-  },
-};
-
-export const Small = {
-  args: {
-    size: "small",
-    icon: "user",
-  },
-};

package/src/components/IconButton/IconButton.test.tsx

@@ -1,32 +0,0 @@
-import { ThemeProvider } from "styled-components";
-import { IconButton, IconButtonProps } from "./IconButton";
-import { themes } from "../../theme";
-import { render, fireEvent } from "@testing-library/react";
-
-describe("Button", () => {
-  const renderButton = (props: IconButtonProps) =>
-    render(
-      <ThemeProvider theme={themes.dark}>
-        <IconButton {...props} />
-      </ThemeProvider>
-    );
-
-  it("should render the button", () => {
-    const { getAllByRole } = renderButton({ icon: "user" });
-    expect(getAllByRole("button").length).toEqual(1);
-  });
-
-  it("should execute action on click", () => {
-    let counter = 0;
-    const handleClick = () => (counter = 1);
-    const { getByRole } = renderButton({
-      onClick: handleClick,
-      icon: "user",
-    });
-    const button = getByRole("button");
-    button.focus();
-    fireEvent.click(button);
-
-    expect(counter).toEqual(1);
-  });
-});

package/src/components/IconButton/IconButton.tsx

@@ -1,83 +0,0 @@
-import { Icon } from "@/components";
-import { IconName } from "@/components/Icon/types";
-import { HTMLAttributes, forwardRef } from "react";
-import styled from "styled-components";
-
-export interface IconButtonProps extends HTMLAttributes<HTMLButtonElement> {
-  size?: "small" | "medium" | "large";
-  disabled?: boolean;
-  type?: "primary" | "secondary";
-  icon: IconName;
-}
-
-export interface StyledButtonProps {
-  size?: "small" | "medium" | "large";
-  disabled?: boolean;
-  styleType?: "primary" | "secondary";
-  icon: IconName;
-}
-
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ type = "primary", icon, size = "medium", ...props }, ref) => {
-    return (
-      <Button
-        {...props}
-        styleType={type}
-        ref={ref}
-      >
-        <Icon
-          name={icon}
-          size={size}
-        />
-      </Button>
-    );
-  }
-);
-
-IconButton.displayName = "IconButton";
-
-const Button = styled.button<Partial<StyledButtonProps>>`
-  border-radius: ${props => props.theme.click.button.iconButton.radii.all};
-  border-color: ${props =>
-    props.theme.click.button.iconButton.color.primary.stroke.default};
-  padding: ${props =>
-    `${props.theme.click.button.iconButton.default.space.y} ${props.theme.click.button.iconButton.default.space.x}`};
-
-  background-color: ${props =>
-    props.styleType === "primary"
-      ? props.theme.click.button.iconButton.color.primary.background.default
-      : props.theme.click.button.iconButton.color.secondary.background.default};
-
-  color: ${props =>
-    props.styleType === "primary"
-      ? props.theme.click.button.iconButton.color.primary.text.default
-      : props.theme.click.button.iconButton.color.secondary.text.default};
-
-  &:hover {
-    background-color: ${props =>
-      props.styleType === "primary"
-        ? props.theme.click.button.iconButton.color.primary.background.hover
-        : props.theme.click.button.iconButton.color.secondary.background.hover};
-    color: ${props =>
-      props.styleType === "primary"
-        ? props.theme.click.button.iconButton.color.primary.text.hover
-        : props.theme.click.button.iconButton.color.secondary.text.hover};
-  }
-
-  &:active {
-    background-color: ${props =>
-      props.styleType === "primary"
-        ? props.theme.click.button.iconButton.color.primary.background.active
-        : props.theme.click.button.iconButton.color.secondary.background.active};
-    color: ${props =>
-      props.styleType === "primary"
-        ? props.theme.click.button.iconButton.color.primary.text.default
-        : props.theme.click.button.iconButton.color.secondary.text.default};
-  }
-
-  &[disabled] {
-    background-color: ${props =>
-      props.theme.click.button.iconButton.color.disabled.background.default};
-    color: ${props => props.theme.click.button.iconButton.color.disabled.text.default};
-  }
-`;

package/src/components/Panel/Panel.stories.tsx

@@ -1,25 +0,0 @@
-import { Panel } from "./Panel";
-import { Text } from "../Typography/Text/Text";
-import { Title } from "../Typography/Title/Title";
-
-export default {
-  component: Panel,
-  title: "Display/Panel",
-  tags: ["panel","autodocs"],
-  argTypes: {
-    padding: {
-      options: ["none", "xs", "sm", "md", "lg", "xl"],
-      control: { type: "select" },
-    },
-	},
-};
-
-export const Playground = {
-  args: {
-    color: "default",
-    padding: "md",
-    hasBorder: true,
-    hasShadow: true,
-    children: <div><Title type='h3'>Example panel title</Title><br /><Text size="md" color="default">Panel content</Text></div>
-	},
-};

package/src/components/Panel/Panel.tsx

@@ -1,33 +0,0 @@
-import styled from "styled-components";
-
-export type panelPadding = "none" | "xs" | "sm" | "md" | "lg" | "xl";
-export type panelColor = "default" | "muted" | "transparent";
-
-export interface panelProps {
-  hasBorder?: boolean;
-	hasShadow?: boolean;
-	color?: panelColor;
-  padding?: panelPadding;
-	children?: React.ReactNode;
-}
-
-export const Panel = ({
-  hasBorder,
-	hasShadow,
-	color,
-	padding,
-	children
-}: panelProps) => (
-  <Wrapper hasBorder={hasBorder} hasShadow={hasShadow} color={color} padding={padding}>
-		{children}
-	</Wrapper>
-);
-
-const Wrapper = styled.div<panelProps>`
-  background-color: ${({ color = "default", theme }) => theme.click.panel.color.background[color]};
-  border-radius: ${({ theme }) => theme.click.panel.radii.all};
-  padding: ${({ padding = "md", theme }) => theme.click.panel.space.y[padding]};
-	border: ${({ hasBorder, theme }) => hasBorder ? `1px solid ${theme.click.global.color.stroke.default}` : "none"};
-	box-shadow: ${({ hasShadow, theme }) => hasShadow ? theme.shadow[1] : "none"};
-  display: flex;
-`;

package/src/components/Popover/Popover.stories.tsx

@@ -1,67 +0,0 @@
-import { Checkbox } from "..";
-import { GridCenter } from "../FormField/commonElement";
-import { Text } from "../Typography/Text/Text";
-import { Title } from "../Typography/Title/Title";
-import { Popover } from "./Popover";
-
-const PopoverComponent = ({
-  open,
-  modal,
-  showArrow,
-  showClose,
-  forceMount,
-  side,
-}: {
-  open: "default" | "open" | "closed";
-  modal: boolean;
-  showArrow: boolean;
-  showClose: boolean;
-  forceMount?: boolean;
-  side: "top" | "right" | "left" | "bottom";
-}) => (
-  <GridCenter>
-    <Popover
-      open={open === "default" ? undefined : open === "open"}
-      modal={modal}
-    >
-      <Popover.Trigger>
-        <div>Click Here</div>
-      </Popover.Trigger>
-      <Popover.Content
-        side={side}
-        showArrow={showArrow}
-        showClose={showClose}
-        forceMount={forceMount ? true : undefined}
-      >
-        <Title type="h2">Content popover</Title>
-        <br />
-        <Text>Click on the input element below.</Text>
-        <br />
-        <Checkbox label="This is a sample data to experiment the popover" />
-      </Popover.Content>
-    </Popover>
-  </GridCenter>
-);
-
-export default {
-  component: PopoverComponent,
-  title: "Display/Popover",
-  tags: ["autodocs", "form-field", "popover"],
-  argTypes: {
-    open: { control: "inline-radio", options: ["default", "open", "closed"] },
-    modal: { control: "boolean" },
-    showArrow: { control: "boolean" },
-    showClose: { control: "boolean" },
-    forceMount: { control: "boolean" },
-    side: { control: "select", options: ["top", "right", "left", "bottom"] },
-  },
-};
-
-export const Default = {
-  args: {
-    open: "default",
-    showArrow: true,
-    showClose: true,
-    side: "bottom",
-  },
-};

package/src/components/Popover/Popover.test.tsx

@@ -1,46 +0,0 @@
-import { ThemeProvider } from "styled-components";
-import { themes } from "../../theme";
-import { PopoverProps } from "@radix-ui/react-popover";
-import { Checkbox, Popover } from "@/components";
-import { render, fireEvent } from "@testing-library/react";
-
-describe("Popover", () => {
-  const renderPopover = (props: PopoverProps) =>
-    render(
-      <ThemeProvider theme={themes.dark}>
-        <Popover {...props}>
-          <Popover.Trigger>
-            <div>Click Here</div>
-          </Popover.Trigger>
-          <Popover.Content>
-            <div>
-              Click on the input element below
-              <Checkbox />
-              <div>This is a sample data to experiment the popover</div>
-            </div>
-          </Popover.Content>
-        </Popover>
-      </ThemeProvider>
-    );
-
-  it("should open popover on click", () => {
-    const { getByText } = renderPopover({});
-    const popoverTrigger = getByText("Click Here");
-    expect(popoverTrigger).not.toBeNull();
-    fireEvent.click(popoverTrigger);
-
-    expect(getByText("Click on the input element below")).not.toBeNull();
-  });
-
-  it("should not close popover on clicking the checkbox", () => {
-    const { getByText, getByTestId } = renderPopover({});
-    const popoverTrigger = getByText("Click Here");
-    expect(popoverTrigger).not.toBeNull();
-    fireEvent.click(popoverTrigger);
-
-    expect(getByText("Click on the input element below")).not.toBeNull();
-    const checkbox = getByTestId("checkbox");
-    fireEvent.click(checkbox);
-    expect(getByText("Click on the input element below")).not.toBeNull();
-  });
-});

package/src/components/Popover/Popover.tsx

@@ -1,115 +0,0 @@
-import * as RadixPopover from "@radix-ui/react-popover";
-import { Arrow, GenericMenuPanel } from "../GenericMenu";
-import styled from "styled-components";
-import { ReactNode } from "react";
-import { Icon } from "..";
-import { EmptyButton } from "../FormField/commonElement";
-import PopoverArrow from "../icons/PopoverArrow";
-
-export const Popover = ({ children, ...props }: RadixPopover.PopoverProps) => {
-  return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;
-};
-
-const Trigger = styled(RadixPopover.Trigger)`
-  width: fit-content;
-  background: transparent;
-  border: none;
-`;
-
-interface TriggerProps extends RadixPopover.PopoverTriggerProps {
-  anchor?: ReactNode;
-}
-
-const PopoverTrigger = ({ children, anchor, ...props }: TriggerProps) => {
-  return (
-    <>
-      <Trigger
-        asChild
-        {...props}
-      >
-        {children}
-      </Trigger>
-      {anchor && <RadixPopover.Anchor asChild>{anchor}</RadixPopover.Anchor>}
-    </>
-  );
-};
-PopoverTrigger.displayName = "PopoverTrigger";
-Popover.Trigger = PopoverTrigger;
-
-interface PopoverContentProps extends RadixPopover.PopoverContentProps {
-  showArrow?: boolean;
-  showClose?: boolean;
-  forceMount?: true;
-  container?: HTMLElement | null;
-}
-
-const MenuPanel = styled(GenericMenuPanel)<{ showClose?: boolean }>`
-  display: block;
-  padding: ${({ theme }) => theme.click.popover.space.y}
-    ${({ theme }) => theme.click.popover.space.x};
-  background-color: ${({ theme }) => theme.click.popover.color.panel.background.default};
-  border: 1px solid ${({ theme }) => theme.click.popover.color.panel.stroke.default};
-  border-radius: ${({ theme }) => theme.click.popover.radii.all};
-  box-shadow: ${({ theme }) => theme.click.popover.shadow.default};
-
-  ${({ showClose }) =>
-    showClose
-      ? `
-    padding-top: 1rem;
-  `
-      : ""};
-`;
-
-const CloseButton = styled(EmptyButton)`
-  position: absolute;
-  top: ${({ theme }) => theme.click.popover.space.y};
-  right: ${({ theme }) => theme.click.popover.space.x};
-  width: ${({ theme }) => theme.click.popover.icon.size.width};
-  height: ${({ theme }) => theme.click.popover.icon.size.height};
-`;
-
-const PopoverContent = ({
-  children,
-  showArrow,
-  showClose,
-  forceMount,
-  container,
-  ...props
-}: PopoverContentProps) => {
-  return (
-    <RadixPopover.Portal
-      forceMount={forceMount}
-      container={container}
-    >
-      <MenuPanel
-        as={RadixPopover.Content}
-        type="popover"
-        showClose={showClose}
-        $showArrow={showArrow}
-        {...props}
-      >
-        {showClose && (
-          <CloseButton
-            as={RadixPopover.Close}
-            asChild
-          >
-            <Icon name="cross" />
-          </CloseButton>
-        )}
-        {showArrow && (
-          <Arrow
-            asChild
-            as={RadixPopover.Arrow}
-            width={20}
-            height={10}
-          >
-            <PopoverArrow />
-          </Arrow>
-        )}
-        {children}
-      </MenuPanel>
-    </RadixPopover.Portal>
-  );
-};
-PopoverContent.displayName = "PopoverContent";
-Popover.Content = PopoverContent;

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -1,43 +0,0 @@
-import { RadioGroup, RadioGroupProps } from "./RadioGroup";
-
-const RadioGroupComponent = (props: RadioGroupProps) => {
-  return (
-    <RadioGroup {...props}>
-      <RadioGroup.Item
-        label="Radio Button1"
-        value="RadioButton1"
-      />
-      <RadioGroup.Item
-        label="Radio Button2"
-        value="RadioButton2"
-      />
-      <RadioGroup.Item
-        label="Radio Button3"
-        value="RadioButton3"
-      />
-    </RadioGroup>
-  );
-};
-export default {
-  component: RadioGroupComponent,
-  title: "Forms/RadioGroup",
-  tags: ["radio", "autodocs"],
-  argTypes: {
-    disabled: { control: "boolean" },
-    required: { control: "boolean" },
-    inline: { control: "boolean" },
-    dir: { control: "inline-radio", options: ["ltr", "rtl"] },
-    orientation: { control: "inline-radio", options: ["horizontal", "vertical"] },
-    loop: { control: "inline-radio", options: [undefined, true, false] },
-    value: {
-      control: "select",
-      options: [undefined, "RadioButton1", "RadioButton2", "RadioButton3"],
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    disabled: false,
-  },
-};

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

@@ -1,59 +0,0 @@
-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

@@ -1,149 +0,0 @@
-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};
-      }
-    }
-  `}
-`;