@clickhouse/click-ui 0.0.2 → 0.0.4

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

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

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

@@ -1,28 +0,0 @@
-import { SidebarNavigationItem } from "@/components";
-
-export default {
-  component: SidebarNavigationItem,
-  title: "Display/SidebarNavigationItem",
-  tags: ["sidebar", "navigation-item", "autodocs"],
-};
-
-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

@@ -1,112 +0,0 @@
-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/Spacer/Spacer.stories.tsx

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

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

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

package/src/components/Switch/Switch.tsx

@@ -1,107 +0,0 @@
-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",
-    padding: 0,
-  };
-});
-
-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",
-  };
-});

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

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

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

@@ -1,36 +0,0 @@
-import { Tabs } from "@/components";
-import type { StoryObj } from "@storybook/react";
-
-export default {
-  component: Tabs,
-  title: "Display/Tabs",
-  tags: ["tabs", "autodocs"],
-};
-
-type Story = StoryObj<typeof Tabs>;
-
-export const Default: Story = {
-  args: {
-    defaultValue: "tab2",
-    onValueChange: s => console.log(s),
-    ariaLabel: "a simple tab component",
-    children: (
-      <>
-        <Tabs.TriggersList>
-          <Tabs.Trigger value="tab1" key="tab1">
-            tab1
-          </Tabs.Trigger>
-          <Tabs.Trigger value="tab2" key="tab2">
-            tab2
-          </Tabs.Trigger>
-          <Tabs.Trigger value="tab3" key="tab3">
-            tab3
-          </Tabs.Trigger>
-        </Tabs.TriggersList>
-        <Tabs.Content value="tab1">Tab 1 content</Tabs.Content>
-        <Tabs.Content value="tab2">Tab 2 content</Tabs.Content>
-        <Tabs.Content value="tab3">Tab 3 content</Tabs.Content>
-      </>
-    ),
-  },
-};

package/src/components/Tabs/Tabs.test.tsx

@@ -1,86 +0,0 @@
-import { ThemeProvider } from "../../theme";
-import { render, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Tabs } from "./Tabs";
-import { TabsProps } from "@/components/Tabs/Tabs";
-
-describe("Tabs", () => {
-  const renderTabs = (props: TabsProps) =>
-    render(
-      <ThemeProvider theme="dark">
-        <Tabs {...props} />
-      </ThemeProvider>
-    );
-
-  it("should render the Tabs", () => {
-    const { getByText } = renderTabs({
-      children: <p>Common text</p>,
-      defaultValue: "1",
-    });
-    expect(getByText("Common text").textContent).toBe("Common text");
-  });
-
-  it("should switch between tabs", () => {
-    const { getByText } = renderTabs({
-      defaultValue: "tab1",
-      ariaLabel: "Tabs",
-      children: (
-        <>
-          <Tabs.TriggersList>
-            <Tabs.Trigger value="tab1" key="tab1">
-              tab1
-            </Tabs.Trigger>
-            <Tabs.Trigger value="tab2" key="tab2">
-              tab2
-            </Tabs.Trigger>
-            <Tabs.Trigger value="tab3" key="tab3">
-              tab3
-            </Tabs.Trigger>
-          </Tabs.TriggersList>
-          <Tabs.Content value="tab1">Tab 1 content</Tabs.Content>
-          <Tabs.Content value="tab2">Tab 2 content</Tabs.Content>
-          <Tabs.Content value="tab3">Tab 3 content</Tabs.Content>
-        </>
-      ),
-    });
-    [1, 2, 3].forEach(async n => {
-      const tab = getByText(`tab${n}`);
-      userEvent.click(tab);
-      await waitFor(() => {
-        const content = getByText(`Tab ${n} content`);
-        expect(content.textContent).toEqual(`Tab ${n} content`);
-      });
-    });
-  });
-
-  it("should execute callback on value change", async () => {
-    let counter = 0;
-    const { getByText } = renderTabs({
-      onValueChange: () => counter++,
-      children: (
-        <>
-          <Tabs.TriggersList>
-            <Tabs.Trigger value="tab1" key="tab1">
-              tab1
-            </Tabs.Trigger>
-            <Tabs.Trigger value="tab2" key="tab2">
-              tab2
-            </Tabs.Trigger>
-            <Tabs.Trigger value="tab3" key="tab3">
-              tab3
-            </Tabs.Trigger>
-          </Tabs.TriggersList>
-          <Tabs.Content value="tab1">Tab 1 content</Tabs.Content>
-          <Tabs.Content value="tab2">Tab 2 content</Tabs.Content>
-          <Tabs.Content value="tab3">Tab 3 content</Tabs.Content>
-        </>
-      ),
-      defaultValue: "tab1",
-    });
-    const tab = getByText("tab2");
-    userEvent.click(tab);
-    await waitFor(() => {
-      expect(counter).toEqual(1);
-    });
-  });
-});

package/src/components/Tabs/Tabs.tsx

@@ -1,82 +0,0 @@
-import * as RadixTabs from "@radix-ui/react-tabs";
-import styled from "styled-components";
-
-export type TabProps = {
-  label: React.ReactNode;
-  value: string;
-  children?: React.ReactNode;
-};
-
-export type TabsProps = {
-  defaultValue?: string;
-  ariaLabel?: string;
-  onValueChange?: (s: string) => unknown;
-  children: React.ReactElement<TabProps>[] | React.ReactElement<TabProps>;
-};
-
-const Trigger = styled(RadixTabs.Trigger)`
-  border: none;
-  padding: ${props =>
-    `${props.theme.click.tabs.space.y} ${props.theme.click.tabs.space.x}`};
-
-  border-top-left-radius: ${props => props.theme.click.tabs.radii.all};
-  border-top-right-radius: ${props => props.theme.click.tabs.radii.all};
-
-  border-bottom: ${props => props.theme.click.tabs.basic.stroke.default};
-  background-color: ${props =>
-    props.theme.click.tabs.basic.color.background.default};
-  color: ${props => props.theme.click.tabs.basic.color.text.default};
-  font: ${props => props.theme.click.tabs.typography.label.default};
-  cursor: pointer;
-
-  &[data-state="active"] {
-    border-bottom: ${props => props.theme.click.tabs.basic.stroke.active};
-    background-color: ${props =>
-      props.theme.click.tabs.basic.color.background.active};
-    color: ${props => props.theme.click.tabs.basic.color.text.active};
-    font: ${props => props.theme.click.tabs.typography.label.active};
-  }
-
-  &:hover {
-    border-bottom: ${props => props.theme.click.tabs.basic.stroke.hover};
-    background-color: ${props =>
-      props.theme.click.tabs.basic.color.background.hover};
-    color: ${props => props.theme.click.tabs.basic.color.text.hover};
-    font: ${props => props.theme.click.tabs.typography.label.hover};
-  }
-
-  &:hover[data-state="active"] {
-    border-bottom: ${props => props.theme.click.tabs.basic.stroke.active};
-  }
-`;
-
-const Content = styled(RadixTabs.Content)``;
-
-const TriggersList = styled(RadixTabs.List)`
-  border-bottom: ${props => props.theme.click.tabs.basic.stroke.global};
-`;
-
-const Tabs = ({
-  defaultValue,
-  children,
-  ariaLabel,
-  onValueChange,
-  ...delegated
-}: TabsProps) => {
-  return (
-    <RadixTabs.Root
-      aria-label={ariaLabel}
-      defaultValue={defaultValue}
-      onValueChange={onValueChange}
-      {...delegated}
-    >
-      {children}
-    </RadixTabs.Root>
-  );
-};
-
-Tabs.TriggersList = TriggersList;
-Tabs.Trigger = Trigger;
-Tabs.Content = Content;
-
-export { Tabs };