@clickhouse/click-ui 0.0.0

package/.eslintrc.cjs

@@ -0,0 +1,32 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2020: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:storybook/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["react-refresh", "prefer-arrow-functions"],
+  rules: {
+    "react-refresh/only-export-components": "warn",
+    "no-multiple-empty-lines": "error",
+    quotes: ["error", "double"],
+    "prefer-arrow-functions/prefer-arrow-functions": [
+      "warn",
+      {
+        classPropertiesAllowed: false,
+        disallowPrototype: false,
+        returnStyle: "unchanged",
+        singleReturnOnly: false,
+      },
+    ],
+  },
+};

package/.github/workflows/deployment.yml

@@ -0,0 +1,34 @@
+# Workflow name
+name: "deployment"
+
+# Event for the workflow
+on:
+  push:
+  workflow_dispatch:
+
+# List of jobs
+jobs:
+  unit-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install dependencies
+        run: npm install
+      - name: unit tests
+        run: npm run test
+
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        run: npm install
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

package/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-addon-pseudo-states",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<link
+  href="https://fonts.googleapis.com/css?family=Inter:400;700;900&display=swap"
+  rel="stylesheet"
+/>

package/.storybook/preview.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import type { Preview } from "@storybook/react";
+import "../src/styles/variables.css";
+import { Decorator } from "@storybook/react";
+import { ThemeProvider } from "../src/theme";
+import styled from "styled-components";
+
+const ThemeBlock = styled.div<{ left?: boolean; bfill?: boolean }>(
+  ({ left, bfill: fill, theme }) => `
+      position: absolute;
+      top: 0;
+      left: ${left || fill ? 0 : "50vw"};
+      border-right: ${left ? "1px solid #202020" : "none"};
+      right: ${left ? "50vw" : 0};
+      width: ${fill ? "100vw" : "50vw"};
+      height: 100vh;
+      bottom: 0;
+      overflow: auto;
+      padding: 1rem;
+      background: ${theme.click.global.color.background.default};
+    `
+);
+
+export const globalTypes = {
+  theme: {
+    name: "Theme",
+    description: "Global theme for components",
+    defaultValue: "dark",
+    toolbar: {
+      // The icon for the toolbar item
+      icon: "circlehollow",
+      // Array of options
+      items: [
+        { value: "light", icon: "circlehollow", title: "light" },
+        { value: "dark", icon: "circle", title: "dark" },
+      ],
+      // Property that specifies if the name of the item will be displayed
+      showName: true,
+    },
+  },
+};
+const withTheme: Decorator = (StoryFn, context) => {
+  const parameters = context.parameters;
+  const theme = parameters?.theme || context.globals.theme;
+  return (
+    <ThemeProvider theme={theme}>
+      <ThemeBlock bfill>
+        <StoryFn />
+      </ThemeBlock>
+    </ThemeProvider>
+  );
+};
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export const decorators = [withTheme];
+export default preview;

package/README.md

@@ -0,0 +1,11 @@
+# Click UI
+The home of the ClickHouse design system and component library. Click UI is in very early development and subject to change, we do not recommend using it for production purposes.
+
+## Get started 🚀
+1. Clone this repo, cd into the `click-ui` directory
+2. To install dependencies, run `yarn` 
+3. To build the latest styles, run `yarn generate-tokens`
+4. To run ClickUI locally, run `yarn dev` and navigate to https://localhost:5173
+5. To run Storybook locally, run `yarn storybook` and navigate to https://localhost:6006
+
+Enjoy! 

package/app/.babelrc

@@ -0,0 +1,27 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    "@babel/plugin-transform-typescript",
+    [
+      "babel-plugin-styled-components",
+      {
+        "fileName": false
+      }
+    ]
+  ],
+  "env": {
+    "development": {
+      "plugins": [["babel-plugin-styled-components", { "displayName": true }]]
+    },
+    "test": {
+      "plugins": [
+        [
+          "babel-plugin-transform-import-ignore",
+          {
+            "patterns": [".css"]
+          }
+        ]
+      ]
+    }
+  }
+}

package/app/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:storybook/recommended"
+  ]
+}

package/app/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/app/.storybook/preview.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import type { Preview } from "@storybook/react";
+import "../src/styles/variables.css";
+import { Decorator } from "@storybook/react";
+import { ThemeProvider } from "../../src/theme";
+
+const withTheme: Decorator = StoryFn => (
+  <ThemeProvider theme="dark">
+    <StoryFn />
+  </ThemeProvider>
+);
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export const decorators = [withTheme];
+export default preview;

package/app/README.md

@@ -0,0 +1,38 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

package/app/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig