@clickhouse/click-ui 0.0.0

package/src/components/Card/Card.tsx

@@ -0,0 +1,107 @@
+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/FormField/FormField.stories.ts

@@ -0,0 +1,14 @@
+import { TextFieldLabel } from "./FormField";
+
+export default {
+  component: TextFieldLabel,
+  title: "TextFieldLabel",
+  tags: ["form-field", "text-field-label"],
+};
+
+export const Default = {
+  args: {
+    text: "text field label",
+    state: "active",
+  },
+};

package/src/components/FormField/FormField.tsx

@@ -0,0 +1,22 @@
+import styled from "styled-components"
+import { States } from "../types"
+
+export type LabelProps = {
+  state: States
+  text: string
+}
+
+export const Label = styled.label<Pick<LabelProps, "state">>`
+  font: ${({state}) => (
+    `var(--click-field-typography-label-${state})`
+  )};
+
+  display: flex;
+  align-items: center;
+  color: var(--click-field-color-label-default);
+`
+
+export function TextFieldLabel({ state, text }: LabelProps) {
+  return <Label state={state}>{text}</Label>
+}
+

package/src/components/Icon/Icon.stories.ts

@@ -0,0 +1,46 @@
+import { Icon } from "./Icon";
+
+export default {
+  component: Icon,
+  title: "Icon",
+  tags: ["icon"],
+};
+
+export const Default = {
+  args: {
+    name: "users",
+    width: "1rem",
+    height: "16px",
+  },
+};
+
+export const Color = {
+  args: {
+    name: "users",
+    color: "darkturquoise",
+  },
+};
+
+export const Small = {
+  args: {
+    name: "users",
+    color: "darkturquoise",
+    size: "small",
+  },
+};
+
+export const Medium = {
+  args: {
+    name: "users",
+    color: "darkturquoise",
+    size: "medium",
+  },
+};
+
+export const Large = {
+  args: {
+    name: "users",
+    color: "darkturquoise",
+    size: "large",
+  },
+};

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,90 @@
+import { ElementType, ReactElement } from "react";
+import { UsersIcon } from "../icons/UsersIcon";
+import styled from "styled-components";
+import { UserIcon } from "../icons/UserIcon";
+import ChatIcon from "../icons/ChatIcon";
+import DatabaseIcon from "../icons/DatabaseIcon";
+import FilterIcon from "../icons/FilterIcon";
+import HistoryIcon from "../icons/HistoryIcon";
+import InsertRowIcon from "../icons/InsertRowIcon";
+import SortAltIcon from "../icons/SortAltIcon";
+import { IconProps } from "./types";
+import { ChevronRight } from "../icons/ChevronRight";
+import { ChevronDown } from "../icons/ChevronDown";
+
+const ICONS_MAP = {
+  chat: ChatIcon,
+  "chevron-right": ChevronRight,
+  "chevron-down": ChevronDown,
+  database: DatabaseIcon,
+  filter: FilterIcon,
+  history: HistoryIcon,
+  insertRow: InsertRowIcon,
+  sort: SortAltIcon,
+  user: UserIcon,
+  users: UsersIcon,
+};
+
+const SVGIcon = ({ name, ...delegated }: IconProps) => {
+  const Component = ICONS_MAP[name];
+  return <Component {...delegated} />;
+};
+
+const withStylesWrapper =
+  (IconComponent: ElementType) =>
+  ({
+    color,
+    width,
+    height,
+    className,
+    size,
+    ...props
+  }: IconProps): ReactElement =>
+    (
+      <SvgWrapper
+        color={color}
+        width={width}
+        height={height}
+        size={size}
+        className={className}
+      >
+        <IconComponent {...props} />
+      </SvgWrapper>
+    );
+
+const SvgWrapper = styled.div<Partial<IconProps>>`
+  display: flex;
+  align-items: center;
+
+  & path[stroke] {
+    stroke: ${props => props.color || "currentColor"};
+  }
+
+  & path[fill] {
+    fill: ${props => props.color || "currentColor"};
+  }
+
+  & svg {
+    width: ${props =>
+      props.width ||
+      props.theme.click.image[props.size || "medium"].size.width ||
+      "24px"};
+    height: ${props =>
+      props.height ||
+      props.theme.click.image[props.size || "medium"].size.height ||
+      "24px"};
+  }
+
+  & svg[stroke] {
+    stroke: ${props => props.color || "currentColor"};
+  }
+
+  & svg[fill]:not([fill="none"]) {
+    fill: ${props => props.color || "currentColor"};
+  }
+`;
+
+const Icon = withStylesWrapper(SVGIcon);
+const IconToExport = styled(Icon)``;
+
+export { IconToExport as Icon };

package/src/components/Icon/types.ts

@@ -0,0 +1,18 @@
+import { SVGAttributes } from "react";
+
+export type IconSize = "small" | "medium" | "large";
+export type IconName =
+  | "chat"
+  | "chevron-down"
+  | "chevron-right"
+  | "database"
+  | "filter"
+  | "history"
+  | "user"
+  | "users";
+
+export interface IconProps extends SVGAttributes<HTMLOrSVGElement> {
+  name: IconName;
+  color?: string;
+  size?: IconSize;
+}

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

@@ -0,0 +1,16 @@
+import { IconButton } from "./IconButton";
+
+export default {
+  component: IconButton,
+  title: "IconButton",
+  tags: ["icon-button"],
+};
+
+export const Default = {
+  args: {
+    size: "default",
+    state: "active",
+    disabled: "false",
+    display: "fileld",
+  },
+};

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,94 @@
+import { HTMLAttributes, forwardRef } from "react";
+import styled from "styled-components";
+
+interface IconButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  state?: "default" | "active";
+  size?: "small" | "default";
+  disabled?: boolean;
+  display?: "empty" | "filled";
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ children, display = "filled", ...props }, ref) => {
+    return (
+      <Button {...props} display={display} ref={ref}>
+        {children}
+      </Button>
+    );
+  }
+);
+
+IconButton.displayName = "IconButton";
+
+const Button = styled.button<IconButtonProps>`
+  border-radius: var(--click-button-radii-all);
+  border-color: transparent;
+
+  ${({ state, disabled, display }: IconButtonProps) => {
+    if (disabled) {
+      return `
+        background-color: var(--click-button-basic-color-disabled-background-default);
+        color: var(--click-button-basic-color-disabled-text-default);
+      `;
+    }
+    if (state === "active") {
+      return `
+        background-color: ${
+          display === "filled"
+            ? "var(--click-button-basic-color-primary-background-active)"
+            : "var(--click-button-basic-color-secondary-background-active)"
+        };
+        color: ${
+          display === "filled"
+            ? "var(--click-button-basic-color-primary-text-default)"
+            : "var(--click-button-basic-color-secondary-text-default)"
+        };
+      `;
+    }
+
+    return `
+        background-color: ${
+          display === "filled"
+            ? "var(--click-button-basic-color-primary-background-default)"
+            : "transparent"
+        };
+        color: ${
+          display === "filled"
+            ? "var(--click-button-basic-color-primary-text-default)"
+            : "var(--click-button-basic-color-secondary-text-default)"
+        };
+      `;
+  }};
+  ${({ size }: IconButtonProps) => {
+    if (size === "small") {
+      return `
+        padding: var(--click-button-icon-button-space-1);
+      `;
+    }
+
+    return `
+      padding: var(--click-button-icon-button-space-2);
+    `;
+  }};
+  &:hover {
+    ${({ disabled, state, display }: IconButtonProps) => {
+      if (disabled) {
+        return `
+          cursor-pointer: not-allowed;
+      `;
+      }
+
+      if (state !== "active") {
+        return `
+          background-color: ${
+            display === "filled"
+              ? "var(--click-button-basic-color-primary-background-hover)"
+              : "var(--click-button-basic-color-secondary-background-hover)"
+          };
+        `;
+      }
+
+      return "";
+    }}
+  }
+`;

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

@@ -0,0 +1,28 @@
+import { SidebarNavigationItem } from "@/components";
+
+export default {
+  component: SidebarNavigationItem,
+  title: "SidebarNavigationItem",
+  tags: ["sidebar", "navigation-item"],
+};
+
+export const Default = {
+  args: {
+    icon: "user",
+    children: <a href="/profile">Profile</a>,
+  },
+};
+
+export const Collapsible = {
+  args: {
+    icon: "user",
+    collapsible: true,
+    label: "Profile",
+    children: (
+      <>
+        <h2>Content</h2>
+        <p>SomeText</p>
+      </>
+    ),
+  },
+};

package/src/components/SidebarNavigationItem/SidebarNavigationItem.tsx

@@ -0,0 +1,112 @@
+import { Icon } from "@/components";
+import { SidebarAccordion } from "@/components/Accordion/Accordion";
+import { IconName } from "@/components/Icon/types";
+
+import styled from "styled-components";
+
+interface DefaultSidebarNavigationItemProps
+  extends React.HTMLAttributes<HTMLButtonElement> {
+  collapsible?: false | undefined | null;
+  label?: undefined;
+  icon?: IconName;
+  children: React.ReactNode;
+}
+
+interface CollapsibleSidebarNavigationItemProps
+  extends React.HTMLAttributes<HTMLButtonElement> {
+  collapsible: true;
+  label: string;
+  icon?: IconName;
+  children: React.ReactNode;
+}
+
+export type SidebarNavigationItemProps =
+  | DefaultSidebarNavigationItemProps
+  | CollapsibleSidebarNavigationItemProps;
+
+const SidebarNavigationItem = ({
+  icon,
+  collapsible,
+  children,
+  label,
+}: SidebarNavigationItemProps) => (
+  <>
+    {collapsible ? (
+      <CollapsibleNavigationItem
+        collapsible={collapsible}
+        label={label}
+        icon={icon}
+        children={children}
+      />
+    ) : (
+      <Wrapper>
+        <IconsWrapper>
+          {/* This icon is only used as a place holder */}
+          <Icon name="chevron-right" size="small" visibility="hidden" />
+          {icon && <Icon name={icon || "user"} size="small" />}
+        </IconsWrapper>
+        {children}
+      </Wrapper>
+    )}
+  </>
+);
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${props => props.theme.click.sidebar.navigation.item.default.space.gap};
+
+  padding: ${props =>
+    `${props.theme.click.sidebar.navigation.item.default.space.y} 0`};
+
+  border-radius: ${props =>
+    props.theme.click.sidebar.navigation.item.radii.all};
+  font: ${props =>
+    props.theme.click.sidebar.navigation.item.typography.default};
+  background-color: ${props =>
+    props.theme.click.sidebar.navigation.item.color.background.default};
+
+  &:hover {
+    font: ${props =>
+      props.theme.click.sidebar.navigation.item.typography.hover};
+    background-color: ${props =>
+      props.theme.click.sidebar.navigation.item.color.background.hover};
+  }
+
+  &:active {
+    font: ${props =>
+      props.theme.click.sidebar.navigation.item.typography.active};
+    background-color: ${props =>
+      props.theme.click.sidebar.navigation.item.color.background.active};
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+
+    &:active {
+      color: inherit;
+    }
+  }
+`;
+const IconsWrapper = styled.div`
+  display: flex;
+`;
+const CollapsibleNavigationItem = ({
+  collapsible,
+  icon,
+  label,
+  children,
+}: CollapsibleSidebarNavigationItemProps) => (
+  <CollapsibleWrapper>
+    {label && collapsible && (
+      <SidebarAccordion title={label} icon={icon} iconSize="small">
+        {children}
+      </SidebarAccordion>
+    )}
+  </CollapsibleWrapper>
+);
+
+const CollapsibleWrapper = styled(Wrapper)`
+  padding-left: 0;
+`;
+export { SidebarNavigationItem };

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

@@ -0,0 +1,14 @@
+import { Switch } from "./Switch";
+
+export default {
+  component: Switch,
+  title: "Switch",
+  tags: ["switch"],
+};
+
+export const Default = {
+  args: {
+    checked: true,
+    disabled: false,
+  },
+};

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,106 @@
+import * as RadixSwitch from "@radix-ui/react-switch";
+import styled, { DefaultTheme } from "styled-components";
+
+interface SwitchProps extends RadixSwitch.SwitchProps {
+  checked: boolean;
+  disabled?: boolean;
+}
+
+interface RootProps {
+  checked: boolean;
+  disabled?: boolean;
+}
+
+interface ThumbProps {
+  checked: boolean;
+  disabled?: boolean;
+}
+
+export function Switch({ checked, disabled, ...props }: SwitchProps) {
+  return (
+    <SwitchRoot disabled={disabled} checked={checked} {...props}>
+      <SwitchThumb checked={checked} />
+    </SwitchRoot>
+  );
+}
+
+function getRootVars(
+  theme: any,
+  disabled: boolean | undefined,
+  checked: boolean
+) {
+  const baseVars = {};
+
+  if (disabled) {
+    return {
+      ...baseVars,
+      backgroundColor: theme.click.switch.color.background.disabled,
+      border: `1px solid ${theme.click.switch.color.stroke.disabled}`,
+    };
+  } else if (checked) {
+    return {
+      ...baseVars,
+      backgroundColor: theme.click.switch.color.background.active,
+      border: `1px solid ${theme.click.switch.color.stroke.active}`,
+    };
+  } else {
+    return {
+      ...baseVars,
+      backgroundColor: theme.click.switch.color.background.default,
+      border: `1px solid ${theme.click.switch.color.stroke.default}`,
+    };
+  }
+}
+
+function getThumbVars(
+  theme: DefaultTheme,
+  disabled: boolean | undefined,
+  checked: boolean
+) {
+  const baseVars = {};
+
+  if (disabled) {
+    return {
+      ...baseVars,
+      backgroundColor: theme.click.switch.color.indicator.disabled,
+    };
+  } else if (checked) {
+    return {
+      ...baseVars,
+      backgroundColor: theme.click.switch.color.indicator.active,
+    };
+  } else {
+    return {
+      ...baseVars,
+      backgroundColor: theme.click.switch.color.indicator.default,
+    };
+  }
+}
+
+const SwitchRoot = styled(RadixSwitch.Root)<RootProps>(props => {
+  const vars = getRootVars(props.theme, props.disabled, props.checked);
+
+  return {
+    width: props.theme.click.switch.size.width,
+    height: props.theme.click.switch.size.height,
+    backgroundColor: vars.backgroundColor,
+    border: vars.border,
+    borderRadius: props.theme.click.switch.radii.all,
+    position: "relative",
+  };
+});
+
+const SwitchThumb = styled(RadixSwitch.Thumb)<ThumbProps>(props => {
+  const vars = getThumbVars(props.theme, props.disabled, props.checked);
+
+  return {
+    display: "block",
+    width: "12px",
+    height: "12px",
+    backgroundColor: vars.backgroundColor,
+    borderRadius: props.theme.click.switch.radii.all,
+    transition: "transform 100ms",
+    transform: props.checked ? "translateX(15px)" : "translateX(2px)",
+    willChange: "transform",
+  };
+});