@clickhouse/click-ui 0.0.3 → 0.0.5

package/src/components/Button/Button.test.tsx

@@ -1,32 +0,0 @@
-import { ThemeProvider } from "styled-components";
-import { Button, ButtonProps } from "./Button";
-import { themes } from "../../theme";
-import { render, fireEvent } from "@testing-library/react";
-
-describe("Button", () => {
-  const renderButton = (props: ButtonProps) =>
-    render(
-      <ThemeProvider theme={themes.dark}>
-        <Button {...props} />
-      </ThemeProvider>
-    );
-
-  it("should render the button", () => {
-    const { getByText } = renderButton({ children: "Hello" });
-    expect(getByText("Hello").textContent).toBe("Hello");
-  });
-
-  it("should execute action on click", () => {
-    let counter = 0;
-    const handleClick = () => (counter = 1);
-    const { getByText } = renderButton({
-      onClick: handleClick,
-      label: "Button",
-    });
-    const button = getByText("Button");
-    button.focus();
-    fireEvent.click(button);
-
-    expect(counter).toEqual(1);
-  });
-});

package/src/components/Button/Button.tsx

@@ -1,115 +0,0 @@
-import { Icon } from "@/components";
-import { IconName } from "@/components/Icon/types";
-import styled from "styled-components";
-
-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;
-  align?: Alignment;
-  width?: string;
-  height?: string;
-}
-
-export interface StyledButtonProps {
-  styleType: ButtonType;
-  disabled?: boolean;
-  align?: Alignment;
-  width?: string;
-  height?: string;
-}
-
-export const Button = ({
-  type = "primary",
-  iconLeft,
-  iconRight,
-  label,
-  align = "center",
-  children,
-  ...delegated
-}: ButtonProps) => (
-  <StyledButton
-    styleType={type}
-    align={align}
-    {...delegated}
-  >
-    {iconLeft && (
-      <Icon
-        name={iconLeft}
-        size="small"
-      />
-    )}
-    {label ? label : children}
-    {iconRight && (
-      <Icon
-        name={iconRight}
-        size="small"
-      />
-    )}
-  </StyledButton>
-);
-
-const BaseButton = styled.button`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  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)<
-  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")};
-
-  &:hover {
-    background-color: ${({ styleType = "primary", theme }) =>
-      theme.click.button.basic.color[styleType].background.hover};
-    border: 1px solid
-      ${({ styleType = "primary", theme }) =>
-        theme.click.button.basic.color[styleType].stroke.hover};
-  }
-
-  &:active,
-  &:focus {
-    background-color: ${({ styleType = "primary", theme }) =>
-      theme.click.button.basic.color[styleType].background.active};
-    border: 1px solid
-      ${({ styleType = "primary", theme }) =>
-        theme.click.button.basic.color[styleType].stroke.active};
-  }
-
-  &: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

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

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,78 +0,0 @@
-import styled from "styled-components";
-
-export interface ButtonGroupProps {
-  labels: string[];
-  activeIndex?: number;
-  onClick?: (index: number) => void;
-}
-
-export const ButtonGroup = ({
-  labels,
-  activeIndex,
-  onClick,
-}: ButtonGroupProps) => {
-  const btns = labels.map((label, index) => {
-    const position: ButtonPosition =
-      index === 0 ? "left" : index === labels.length - 1 ? "right" : "center";
-    return (
-      <Button
-        key={index}
-        active={index === activeIndex}
-        position={position}
-        onClick={() => onClick?.(index)}
-      >
-        {label}
-      </Button>
-    );
-  });
-  return <ButtonGroupWrapper>{btns}</ButtonGroupWrapper>;
-};
-
-type ButtonPosition = "left" | "center" | "right";
-interface ButtonProps {
-  active: boolean;
-  position: ButtonPosition;
-}
-
-const ButtonGroupWrapper = styled.div`
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 0px 1px;
-  border: var(--click-button-group-color-stroke-panel);
-  background: var(--click-button-group-color-background-panel);
-`;
-
-const endRadii = "var(--click-button-button-group-radii-end)";
-const leftBorderRadius = `${endRadii} 0px 0px ${endRadii}`;
-const rightBorderRadius = `0px ${endRadii} ${endRadii} 0px`;
-const centerBorderRadius = "var(--click-button-button-group-radii-center)";
-
-const Button = styled.button<ButtonProps>`
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  padding: var(--click-button-basic-space-y) var(--click-button-basic-space-x);
-  gap: 10px;
-
-  background: ${({ active }: ButtonProps) =>
-    active
-      ? "var(--click-button-group-color-background-active)"
-      : "var(--click-button-group-color-background-default)"};
-
-  border-radius: ${({ position }: ButtonProps) =>
-    position === "left"
-      ? leftBorderRadius
-      : position === "right"
-      ? rightBorderRadius
-      : centerBorderRadius};
-
-  &:hover {
-    background: var(--click-button-group-color-background-hover);
-  }
-`;

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

@@ -1,19 +0,0 @@
-import { Card } from "./Card";
-
-export default {
-  component: Card,
-  title: "Display/Card",
-  tags: ["card","autodocs"],
-};
-
-export const Playground = {
-  args: {
-    title: "Card title",
-    badgeText: "experiment",
-    description:
-      "A description very interesting that presumably relates to the card",
-    infoUrl: "#",
-    infoText: "Read More",
-    state: "active",
-  },
-};

package/src/components/Card/Card.tsx

@@ -1,107 +0,0 @@
-import styled from "styled-components";
-import { Badge } from "@/components/Badge/Badge";
-import { S3Logo } from "@/assets/S3Logo/S3Logo";
-import { RightArrow } from "@/assets/RightArrow/RightArrow";
-
-export type CardState = "active" | "disabled";
-export interface CardProps {
-  title: string;
-  badgeText: string;
-  description: string;
-  infoUrl: string;
-  infoText: string;
-  state?: CardState;
-}
-export const Card = ({
-  title,
-  badgeText,
-  description,
-  infoUrl,
-  infoText,
-  state = "active",
-}: CardProps) => (
-  <Wrapper state={state}>
-    <Header>
-      <HeaderLeft>
-        <S3Logo />
-        <Title>{title}</Title>
-      </HeaderLeft>
-      <Badge
-        text={badgeText}
-        state={state === "disabled" ? "disabled" : "default"}
-      ></Badge>
-    </Header>
-
-    <Content>
-      <Description>{description}</Description>
-    </Content>
-
-    <InfoLink>
-      <LinkButton href={infoUrl}>{infoText}</LinkButton>
-      <RightArrow />
-    </InfoLink>
-  </Wrapper>
-);
-
-interface WrapperProps {
-  state: CardState;
-}
-const Wrapper = styled.div<WrapperProps>`
-  background-color: ${({ state }) =>
-    state === "active"
-      ? "var(--click-card-color-background-active)"
-      : "var(--click-card-color-background-disabled)"};
-  border-radius: 4px;
-  border: 1px solid #e6e7e9;
-  max-width: 420px;
-  min-width: 300px;
-
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-  gap: 16px;
-`;
-
-const Header = styled.div`
-  margin-top: 8px;
-  width: 100%;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-const HeaderLeft = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 16px;
-`;
-
-const Title = styled.h3`
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 600;
-`;
-
-const Content = styled.div`
-  /* width: 330px; */
-`;
-
-const Description = styled.p`
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 150%;
-  color: #696e79;
-`;
-
-const InfoLink = styled.div`
-  display: flex;
-  align-items: center;
-`;
-const LinkButton = styled.a`
-  width: max-content;
-  text-decoration: none;
-  color: #161517;
-  font-size: 14px;
-  font-weight: 600;
-`;

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

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

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

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

@@ -1,73 +0,0 @@
-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",
-  },
-};