@clickhouse/click-ui 0.0.0

package/app/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

package/build-tokens.js

@@ -0,0 +1,131 @@
+import _ from "lodash";
+import {registerTransforms,transforms} from"@tokens-studio/sd-transforms";
+import StyleDictionary from "style-dictionary";
+
+registerTransforms(StyleDictionary);
+const themes = ["classic", "dark", "light"];
+
+function generateThemeFromDictionary (dictionary, valueFunc = (value) => value) {
+  const theme = {};
+  dictionary.allTokens.forEach((token) => {
+    _.setWith(theme, token.name, valueFunc(token.value), Object)
+  });
+  return theme;
+}
+
+StyleDictionary.registerTransform({
+  type: "name",
+  name: "name/cti/dot",
+  transformer: (token, options) => {
+    if (options.prefix && options.prefix.length) {
+      return [options.prefix].concat(token.path).join(".");
+    } else {
+      return token.path.join(".");
+    }
+  }
+});
+
+StyleDictionary.registerFormat({
+  name: "ThemeFormat",
+  formatter: function({ dictionary, platform, options, file }) {
+    const theme = generateThemeFromDictionary(dictionary);
+    return JSON.stringify(theme, null, 2);
+  }
+});
+
+StyleDictionary.registerFormat({
+  name: "TypescriptFormat",
+  formatter: function({ dictionary, platform, options, file }) {
+    const theme = generateThemeFromDictionary(dictionary, (value) => typeof value);
+    
+    return `
+      export interface Theme ${JSON.stringify(theme, null, 2).replaceAll("\"string\"", "string")}
+    `
+  }
+});
+
+StyleDictionary.extend({
+  source: [`./tokens/**/!(${themes.join("|*.")}).json`],
+  platforms: {
+    css: {
+      transforms: [...transforms, "name/cti/kebab"],
+      buildPath: "build/css/",
+      files: [
+        {
+          destination: "variables.css",
+          format: "css/variables",
+          options: {
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+    js: {
+      transforms: [...transforms, "name/cti/dot"],
+      buildPath: "src/styles/",
+      files: [
+        {
+          destination: "variables.json",
+          format: "ThemeFormat",
+          options: {
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+    ts: {
+      transforms: [...transforms, "name/cti/dot"],
+      buildPath: "src/styles/",
+      files: [
+        {
+          destination: "types.ts",
+          format: "TypescriptFormat",
+          options: {
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+  },
+})
+  .cleanAllPlatforms()
+  .buildAllPlatforms();
+
+themes.forEach(theme =>
+  StyleDictionary.extend({
+    include: [`./tokens/**/!(${themes.join("|*.")}).json`],
+    source: [`./tokens/**/${theme}.json`],
+    platforms: {
+      css: {
+        transforms: [...transforms, "name/cti/kebab"],
+        buildPath: "build/css/",
+        files: [
+          {
+            destination: `variables.${theme}.css`,
+            format: "css/variables",
+            filter: token => token.filePath.indexOf(`${theme}`) > -1,
+            options: {
+              outputReferences: true,
+            },
+          },
+        ],
+      },
+      js: {
+        transforms: [...transforms, "name/cti/dot"],
+        buildPath: "src/styles/",
+        files: [
+          {
+            destination: `variables.${theme}.json`,
+            format: "ThemeFormat",
+            filter: token => token.filePath.indexOf(`${theme}`) > -1,
+            options: {
+              outputReferences: true,
+            },
+          },
+        ],
+      },
+    },
+  })
+    .cleanAllPlatforms()
+    .buildAllPlatforms()
+);

package/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Inter&display=swap"
+      rel="stylesheet"
+    />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/jest.config.ts

@@ -0,0 +1,11 @@
+export default {
+  transform: {
+    "^.+\\.tsx?$": "ts-jest",
+    "^.+\\.js$": "babel-jest",
+  },
+  testEnvironment: "jsdom",
+
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
+  },
+};

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@clickhouse/click-ui",
+  "version": "0.0.0",
+  "description": "Official ClickHouse design system react library",
+  "type": "module",
+  "keywords": [
+    "clickhouse",
+    "design system"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ClickHouse/click-ui.git"
+  },
+  "homepage": "https://clickhouse.com",
+  "scripts": {
+    "watch": "jest --watch",
+    "test": "jest",
+    "dev": "vite",
+    "generate-tokens": "node build-tokens.js",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@radix-ui/react-switch": "^1.0.2",
+    "@storybook/addon-essentials": "^7.0.18",
+    "@storybook/addon-interactions": "^7.0.18",
+    "@storybook/addon-links": "^7.0.18",
+    "@storybook/blocks": "^7.0.18",
+    "@storybook/manager-api": "^7.0.23",
+    "@storybook/react": "^7.0.18",
+    "@storybook/react-vite": "^7.0.18",
+    "@storybook/testing-library": "^0.1.0",
+    "@storybook/theming": "^7.0.23",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.5.2",
+    "@types/lodash-es": "^4.17.7",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "@vitejs/plugin-react": "^4.0.1",
+    "babel-jest": "^29.5.0",
+    "babel-plugin-styled-components": "^2.1.4",
+    "chromatic": "^6.18.2",
+    "eslint": "^8.43.0",
+    "eslint-plugin-prefer-arrow-functions": "^3.1.4",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "eslint-plugin-storybook": "^0.6.12",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "prop-types": "^15.8.1",
+    "storybook": "^7.0.18",
+    "storybook-addon-pseudo-states": "^2.0.1",
+    "ts-jest": "^29.1.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.3.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.css

@@ -0,0 +1 @@
+

package/src/App.module.css

@@ -0,0 +1,235 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6rem;
+  min-height: 100vh;
+}
+
+.description {
+  display: inherit;
+  justify-content: inherit;
+  align-items: inherit;
+  font-size: 0.85rem;
+  max-width: var(--max-width);
+  width: 100%;
+  z-index: 2;
+  font-family: var(--font-mono);
+}
+
+.description a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.description p {
+  position: relative;
+  margin: 0;
+  padding: 1rem;
+  background-color: rgba(var(--callout-rgb), 0.5);
+  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
+  border-radius: var(--border-radius);
+}
+
+.code {
+  font-weight: 700;
+  font-family: var(--font-mono);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(25%, auto));
+  width: var(--max-width);
+  max-width: 100%;
+}
+
+.card {
+  padding: 1rem 1.2rem;
+  border-radius: var(--border-radius);
+  background: rgba(var(--card-rgb), 0);
+  border: 1px solid rgba(var(--card-border-rgb), 0);
+  transition: background 200ms, border 200ms;
+}
+
+.card span {
+  display: inline-block;
+  transition: transform 200ms;
+}
+
+.card h2 {
+  font-weight: 600;
+  margin-bottom: 0.7rem;
+}
+
+.card p {
+  margin: 0;
+  opacity: 0.6;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  max-width: 30ch;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 4rem 0;
+}
+
+.center::before {
+  background: var(--secondary-glow);
+  border-radius: 50%;
+  width: 480px;
+  height: 360px;
+  margin-left: -400px;
+}
+
+.center::after {
+  background: var(--primary-glow);
+  width: 240px;
+  height: 180px;
+  z-index: -1;
+}
+
+.center::before,
+.center::after {
+  content: '';
+  left: 50%;
+  position: absolute;
+  filter: blur(45px);
+  transform: translateZ(0);
+}
+
+.logo {
+  position: relative;
+}
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+  .card:hover {
+    background: rgba(var(--card-rgb), 0.1);
+    border: 1px solid rgba(var(--card-border-rgb), 0.15);
+  }
+
+  .card:hover span {
+    transform: translateX(4px);
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .card:hover span {
+    transform: none;
+  }
+}
+
+/* Mobile */
+@media (max-width: 700px) {
+  .content {
+    padding: 4rem;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+    margin-bottom: 120px;
+    max-width: 320px;
+    text-align: center;
+  }
+
+  .card {
+    padding: 1rem 2.5rem;
+  }
+
+  .card h2 {
+    margin-bottom: 0.5rem;
+  }
+
+  .center {
+    padding: 8rem 0 6rem;
+  }
+
+  .center::before {
+    transform: none;
+    height: 300px;
+  }
+
+  .description {
+    font-size: 0.8rem;
+  }
+
+  .description a {
+    padding: 1rem;
+  }
+
+  .description p,
+  .description div {
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    width: 100%;
+  }
+
+  .description p {
+    align-items: center;
+    inset: 0 0 auto;
+    padding: 2rem 1rem 1.4rem;
+    border-radius: 0;
+    border: none;
+    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
+    background: linear-gradient(
+      to bottom,
+      rgba(var(--background-start-rgb), 1),
+      rgba(var(--callout-rgb), 0.5)
+    );
+    background-clip: padding-box;
+    backdrop-filter: blur(24px);
+  }
+
+  .description div {
+    align-items: flex-end;
+    pointer-events: none;
+    inset: auto 0 0;
+    padding: 2rem;
+    height: 200px;
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgb(var(--background-end-rgb)) 40%
+    );
+    z-index: 1;
+  }
+}
+
+/* Tablet and Smaller Desktop */
+@media (min-width: 701px) and (max-width: 1120px) {
+  .grid {
+    grid-template-columns: repeat(2, 50%);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .vercelLogo {
+    filter: invert(1);
+  }
+
+  .logo {
+    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+.flexWrap {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 10px;
+}

package/src/App.tsx

@@ -0,0 +1,154 @@
+import { useState } from "react";
+
+import "@/styles/globals.css";
+import "./styles/variables.css";
+import "./styles/variables.dark.css";
+
+import styles from "./App.module.css";
+import { ThemeName, ThemeProvider } from "./theme";
+import {
+  Accordion,
+  Badge,
+  Button,
+  ButtonGroup,
+  Card,
+  Icon,
+  IconButton,
+  ProfileIcon,
+  SidebarNavigationItem,
+  Switch,
+  Tabs,
+  TextFieldLabel,
+} from "@/components";
+
+const App = () => {
+  const [currentTheme, setCurrentTheme] = useState<ThemeName>("dark");
+  const [selectedButton, setSelectedButton] = useState(0);
+  const [checked, setChecked] = useState(false);
+  const [disabled] = useState(false);
+
+  return (
+    <ThemeProvider theme={currentTheme}>
+      <TextFieldLabel state="default" text="my label" />
+      <TextFieldLabel state="active" text="my label" />
+      <TextFieldLabel state="disabled" text="my label" />
+      <TextFieldLabel state="error" text="my label" />
+      <div className={styles.flexWrap}>
+        <IconButton size="small">
+          <ProfileIcon />
+        </IconButton>
+        <IconButton size="small" state="active">
+          <ProfileIcon />
+        </IconButton>
+        <IconButton size="small" disabled>
+          <ProfileIcon />
+        </IconButton>
+      </div>
+      <div className={styles.flexWrap}>
+        <IconButton>
+          <ProfileIcon />
+        </IconButton>
+        <IconButton state="active">
+          <ProfileIcon />
+        </IconButton>
+        <IconButton disabled>
+          <ProfileIcon />
+        </IconButton>
+      </div>
+      <div className={styles.flexWrap}>
+        <IconButton display="empty">
+          <ProfileIcon />
+        </IconButton>
+        <IconButton display="empty" state="active">
+          <ProfileIcon />
+        </IconButton>
+        <IconButton display="empty" disabled>
+          <ProfileIcon />
+        </IconButton>
+      </div>
+      <div className={styles.flexWrap}>
+        <Badge text={"default"}></Badge>
+        <Badge text={"success"} state={"success"}></Badge>
+        <Badge text={"neutral"} state={"neutral"}></Badge>
+        <Badge text={"danger"} state={"danger"}></Badge>
+        <Badge text={"disabled"} state={"disabled"}></Badge>
+      </div>
+      <Card
+        title="Card title"
+        description="This is a card description"
+        badgeText="experiment"
+        infoText="Read More"
+        infoUrl="#"
+      />
+
+      <ButtonGroup
+        labels={["Left center", "Center", "Center", "Center", "Right end"]}
+        activeIndex={selectedButton}
+        onClick={(index: number) => setSelectedButton(index)}
+      />
+      <Switch
+        checked={checked}
+        disabled={disabled}
+        onCheckedChange={setChecked}
+      />
+      <div style={{ color: "white" }}>disabled: {`${disabled}`}</div>
+      <button
+        onClick={() => {
+          document.body.style.backgroundColor = "black";
+          setCurrentTheme("dark");
+        }}
+      >
+        Dark
+      </button>
+      <button
+        onClick={() => {
+          document.body.style.backgroundColor = "white";
+          setCurrentTheme("light");
+        }}
+      >
+        Light
+      </button>
+      <button
+        onClick={() => {
+          document.body.style.backgroundColor = "white";
+          setCurrentTheme("classic");
+        }}
+      >
+        Classic
+      </button>
+
+      <Button
+        type="primary"
+        onClick={() => alert("you clicked on the primary button")}
+      >
+        Primary
+      </Button>
+      <Button
+        type="secondary"
+        onClick={() => alert("you clicked on the secondary button")}
+      >
+        Secondary
+      </Button>
+      <Icon name="users" />
+      <Accordion title="Accordion">I'm some content </Accordion>
+      <SidebarNavigationItem icon="user">
+        <a href="/color"> link to color</a>
+      </SidebarNavigationItem>
+      <SidebarNavigationItem icon="user" collapsible label="collapsible item">
+        <a href="/color"> link to color</a>
+      </SidebarNavigationItem>
+      <Tabs defaultValue="tab1" onValueChange={e => console.log(e)}>
+        <Tabs.TriggersList>
+          <Tabs.Trigger value="tab1">tab1 </Tabs.Trigger>
+          <Tabs.Trigger value="tab2">tab2 </Tabs.Trigger>
+          <Tabs.Trigger value="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>
+      </Tabs>
+    </ThemeProvider>
+  );
+};
+
+export default App;

package/src/assets/RightArrow/RightArrow.tsx

@@ -0,0 +1,17 @@
+export const RightArrow = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.33334 13.3333L11.6667 10L8.33334 6.66667"
+      stroke="#161517"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);