@clickhouse/click-ui 0.0.1 → 0.0.3

package/src/components/Badge/Badge.stories.ts

@@ -2,13 +2,29 @@ import { Badge } from "./Badge";
 
 export default {
   component: Badge,
-  title: "Badge",
-  tags: ["badge"],
+  title: "Display/Badge",
+  tags: ["badge","autodocs"],
+  argTypes: {
+    size: {
+      options: ["sm", "md"],
+      control: { type: "radio" },
+    },
+    state: {
+      options: ["default","success","neutral", "info", "warning", "danger", "disabled"],
+      control: { type: "radio" },
+    },
+    dismissible: {
+      options: [true, false],
+      control: { type: "boolean" },
+    }
+  }
 };
 
-export const Default = {
+export const Playground = {
   args: {
     text: "experiment",
     state: "success",
+    size: "md",
+    dismissible: false,
   },
 };

package/src/components/Badge/Badge.test.tsx

@@ -1,10 +1,15 @@
 import { render } from "@testing-library/react";
 import { Badge } from "./Badge";
+import { ThemeProvider } from "@/theme";
 
 describe("Badge", () => {
   test("given a text, should render it", () => {
     const text = "text to render";
-    const rendered = render(<Badge text={text} />);
+    const rendered = render(
+      <ThemeProvider theme="light">
+        <Badge text={text} />
+      </ThemeProvider>
+    );
 
     expect(rendered.getByText(text).textContent).toEqual(text);
   });

package/src/components/Badge/Badge.tsx

@@ -1,24 +1,78 @@
 import styled from "styled-components";
+import { Icon } from "../Icon/Icon";
+export type BadgeState =
+  | "default"
+  | "success"
+  | "neutral"
+  | "danger"
+  | "disabled"
+  | "warning"
+  | "info";
 
-export type BadgeState = "default" | "success" | "neutral" | "danger" | "disabled";
+export type BadgeSize = "sm" | "md";
 
 export interface BadgeProps {
-    text: string;
-    state?: BadgeState;
+  text: string;
+  state?: BadgeState;
+  size?: BadgeSize;
 }
 
-const Wrapper = styled.div<Pick<BadgeProps, "state">>`
-  background-color: ${({state}) => `var(--click-badge-color-background-${state})`};
-  color: ${({state}) => `var(--click-badge-color-text-${state})`};
-  font: var(--click-badge-typography-label-default);
-  border-radius: var(--click-badge-radii-all);
-  border: ${({state}) => `var(--sizes-1) solid var(--click-badge-color-stroke-${state})`};
-  padding: var(--click-badge-space-y) var(--click-badge-space-x);
+export interface DismissibleBadge extends BadgeProps {
+  dismissible: true;
+  onClose: () => void;
+}
+
+export interface NonDismissibleBadge extends BadgeProps {
+  dismissible?: never;
+  onClose?: never;
+}
 
+const Wrapper = styled.div<Pick<BadgeProps, "state" | "size">>`
+  background-color: ${({ state = "default", theme }) =>
+    theme.click.badge.color.background[state]};
+  color: ${({ state = "default", theme }) => theme.click.badge.color.text[state]};
+  font: ${({ size = "md", theme }) => theme.click.badge.typography.label[size].default};
+  border-radius: ${({ theme }) => theme.click.badge.radii.all};
+  border: ${({ state = "default", theme }) =>
+    `${theme.click.badge.stroke} solid ${theme.click.badge.color.stroke[state]}`};
+  padding: ${({ size = "md", theme }) => theme.click.badge.space[size].y}
+    ${({ size = "md", theme }) => theme.click.badge.space[size].x};
   display: inline-block;
 `;
 
-export function Badge({text, state = "default"}: BadgeProps) {
-    return <Wrapper state={state}>{text}</Wrapper>
-}
+const Content = styled.div<Pick<BadgeProps, "state" | "size">>`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ size = "md", theme }) => theme.click.badge.space[size].gap};
+`;
+
+const CrossContainer = styled.svg<Pick<BadgeProps, "state" | "size">>`
+  color: ${({ state = "default", theme }) => theme.click.badge.color.text[state]};
+  height: ${({ size = "md", theme }) => theme.click.badge.icon[size].size.height};
+  width: ${({ size = "md", theme }) => theme.click.badge.icon[size].size.width};
+`;
 
+export const Badge = ({
+  text,
+  state = "default",
+  size = "md",
+  dismissible,
+  onClose,
+}: NonDismissibleBadge | DismissibleBadge) => (
+  <Wrapper
+    state={state}
+    size={size}
+  >
+    <Content>
+      {text}
+      {dismissible && (
+        <CrossContainer
+          name="cross"
+          state={state}
+          as={Icon}
+          onClick={onClose}
+        />
+      )}
+    </Content>
+  </Wrapper>
+);

package/src/components/BigStat/BigStat.stories.ts

@@ -2,14 +2,19 @@ import { BigStat } from "./BigStat";
 
 export default {
   component: BigStat,
-  title: "Big Stat",
-  tags: ["big-stat"],
+  title: "Display/Big Stat",
+  tags: ["big-stat", "autodocs"],
+  size: {
+    options: ["lg", "sm"],
+    control: { type: "radio" },
+  },
 };
 
-export const Default = {
+export const Playground = {
   args: {
-    label: "big stat label",
-    largeValue: "Big Stat",
+    label: "Percentage complete",
+    title: "100%",
     state: "default",
+    size: "lg"
   },
 };

package/src/components/BigStat/BigStat.tsx

@@ -1,37 +1,49 @@
 import styled from "styled-components";
 
 export type bigStatState = "default";
+export type bigStatSize = "sm" | "lg";
 
 export interface BigStatProps {
-    label: string;
-    largeValue: string;
-    state?: bigStatState;
+  label: React.ReactNode;
+  title: React.ReactNode;
+  state?: bigStatState;
+  size?: bigStatSize;
 }
 
-const Wrapper = styled.div<Pick<BigStatProps, "state">>`
-  background-color: ${({state}) => `var(--click-big-stat-color-background-${state})`};
-  border-radius: var(--click-big-stat-radii-all);
-  border: ${({state}) => `var(--click-big-stat-stroke) solid var(--click-big-stat-color-stroke-${state})`};
-  gap: var(--click-big-stat-space-gap);
-  padding: var(--click-big-stat-space-all);
+//* Use this component to highlight important pieces of information. */
+export const BigStat = ({
+  label = "Label",
+  title = "Title",
+  size,
+  state,
+}: BigStatProps) => (
+  <Wrapper state={state} size={size}>
+    <Label state={state} size={size}>{label}</Label>
+    <Title state={state} size={size}>{title}</Title>
+  </Wrapper>
+);
+
+const Wrapper = styled.div<Pick<BigStatProps, "state" | "size">>`
+  background-color: ${({ state = "default", theme }) =>
+    theme.click.bigStat.color.background[state]};
+  border-radius: ${props => props.theme.click.bigStat.radii.all};
+  border: ${({ state = "default", theme }) =>
+    `${theme.click.bigStat.stroke} solid ${theme.click.bigStat.color.stroke[state]}`};
+  gap: ${props => props.theme.click.bigStat.space.gap};
+  padding: ${props => props.theme.click.bigStat.space.all};
   display: flex;
-  flex-direction: column;
+  flex-direction: ${({ size }) => size === "sm" ? "column-reverse" : "column"}
 `;
 
-const Label = styled.div<Pick<BigStatProps, "state">>`
-  color: ${({state}) => `var(--click-big-stat-color-label-${state})`};
-  font: ${({state}) => `var(--click-big-stat-typography-label-${state})`};
+const Label = styled.div<Pick<BigStatProps, "state" | "size">>`
+  color: ${({ state = "default", theme }) => theme.click.bigStat.color.label[state]};
+  font: ${({ state = "default", size = "lg", theme }) =>
+    theme.click.bigStat.typography[size].label[state]};
 `;
 
-const LargeValue = styled.div<Pick<BigStatProps, "state">>`
-  color: ${({state}) => `var(--click-big-stat-color-large-value-${state})`};
-  font: ${({state}) => `var(--click-big-stat-typography-title-${state})`};
+const Title = styled.div<Pick<BigStatProps, "state" | "size">>`
+  color: ${({ state = "default", theme }) =>
+    theme.click.bigStat.color.title[state]};
+  font: ${({ state = "default", size="lg", theme }) =>
+    theme.click.bigStat.typography[size].title[state]};
 `;
-
-export function BigStat({label, largeValue, state = "default"}: BigStatProps) {
-  return <Wrapper state={state}>
-    <Label state={state}>{label}</Label>
-    <LargeValue state={state}>{largeValue}</LargeValue>
-  </Wrapper>
-}
-

package/src/components/Button/Button.stories.ts

@@ -1,82 +1,26 @@
 import { Button } from "./Button";
 
 export default {
+  title: "Buttons/Button",
   component: Button,
-  title: "Button",
-  tags: ["button"],
-};
-
-export const Primary = {
-  args: {
-    type: "primary",
-    disabled: false,
-    label: "Button",
-  },
-};
-
-export const Secondary = {
-  args: {
-    type: "secondary",
-    disabled: false,
-    label: "Button",
-  },
-};
-
-export const Hover = {
-  args: {
-    type: "primary",
-    disabled: false,
-    label: "Button",
-  },
-  parameters: {
-    pseudo: {
-      hover: true,
+  tags: ["button", "autodocs"],
+  argTypes: {
+    type: {
+      options: ["primary", "secondary", "danger"],
+      control: { type: "radio" },
     },
-  },
-};
-
-export const Active = {
-  args: {
-    type: "primary",
-    disabled: false,
-    label: "Button",
-  },
-  parameters: {
-    pseudo: {
-      active: true,
+    align: {
+      options: ["center", "left"],
+      control: { type: "radio" },
     },
   },
 };
 
-export const IconLeft = {
-  args: {
-    type: "primary",
-    label: "Button",
-    iconLeft: "user",
-  },
-};
-
-export const IconRight = {
-  args: {
-    type: "primary",
-    label: "Button",
-    iconRight: "user",
-  },
-};
-export const IconLeftRight = {
+export const Playground = {
   args: {
     type: "primary",
+    disabled: false,
     label: "Button",
-    iconRight: "user",
-    iconLeft: "database",
-  },
-};
-export const AlignLeft = {
-  args: {
-    type: "secondary",
-    label: "Button",
-    iconLeft: "database",
-    align: "left",
-    width: "270px",
+    align: "center",
   },
 };

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

@@ -18,9 +18,9 @@ describe("Button", () => {
 
   it("should execute action on click", () => {
     let counter = 0;
-    const hanldeClick = () => (counter = 1);
+    const handleClick = () => (counter = 1);
     const { getByText } = renderButton({
-      onClick: hanldeClick,
+      onClick: handleClick,
       label: "Button",
     });
     const button = getByText("Button");

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);
+  });
+});