chore(monorepo): 🤖 split mono-repository into libs and packages (semantic distinction)

.github/workflows/build-health-checkup.yml

@@ -30,9 +30,9 @@ jobs:
         run: yarn build
 
       - name: Build
-        working-directory: packages/click-ui
+        working-directory: libs/click-ui
         run: yarn build
 
       - name: Build output health check
-        working-directory: packages/click-ui
+        working-directory: libs/click-ui
         run: yarn build:health_check

.github/workflows/chromatic-deployment.yml

@@ -32,4 +32,4 @@ jobs:
         uses: chromaui/action@latest
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          workingDir: packages/click-ui
+          workingDir: libs/click-ui

.github/workflows/code-quality.yml

@@ -27,17 +27,17 @@ jobs:
         run: yarn build
 
       - name: Typecheck
-        working-directory: packages/click-ui
+        working-directory: libs/click-ui
         run: yarn typecheck
 
       - name: Linter
-        working-directory: packages/click-ui
+        working-directory: libs/click-ui
         run: yarn lint
 
       - name: Formatter
-        working-directory: packages/click-ui
+        working-directory: libs/click-ui
         run: yarn format
 
       - name: Circular Dependencies
-        working-directory: packages/click-ui
+        working-directory: libs/click-ui
         run: yarn circular-dependency:check

.github/workflows/create-release.yml

@@ -114,8 +114,8 @@ jobs:
           CURRENT_TAG="N/A"
           IS_PRERELEASE="false"
 
-          if [[ -f packages/click-ui/.changeset/pre.json ]]; then
-            CURRENT_TAG=$(node -p "require('./packages/click-ui/.changeset/pre.json').tag")
+          if [[ -f libs/click-ui/.changeset/pre.json ]]; then
+            CURRENT_TAG=$(node -p "require('./libs/click-ui/.changeset/pre.json').tag")
             IS_PRERELEASE="true"
             echo "prerelease=true" >> $GITHUB_OUTPUT
             echo "current_tag=$CURRENT_TAG" >> $GITHUB_OUTPUT
@@ -131,7 +131,7 @@ jobs:
       - name: Prevent promotion without changes
         if: steps.check-prerelease.outputs.prerelease == 'true' && steps.check-prerelease.outputs.current_tag != inputs.release_type
         run: |
-          CHANGESET_COUNT=$(find packages/click-ui/.changeset -name "*.md" ! -name "README.md" | wc -l | tr -d ' ')
+          CHANGESET_COUNT=$(find libs/click-ui/.changeset -name "*.md" ! -name "README.md" | wc -l | tr -d ' ')
           echo "🔍 Debug: changeset_count=$CHANGESET_COUNT"
 
           if [[ "$CHANGESET_COUNT" -eq 0 ]]; then
@@ -201,8 +201,8 @@ jobs:
             exit 1
           fi
 
-          VERSION=$(node -p "require('./packages/click-ui/package.json').version")
-          PKG_NAME=$(node -p "require('./packages/click-ui/package.json').name")
+          VERSION=$(node -p "require('./libs/click-ui/package.json').version")
+          PKG_NAME=$(node -p "require('./libs/click-ui/package.json').name")
           echo "version=$VERSION" >> $GITHUB_OUTPUT
           echo "package_name=$PKG_NAME" >> $GITHUB_OUTPUT
 
@@ -249,7 +249,7 @@ jobs:
         run: |
           # WARNING: This is coupled with a verify release commit
           # if you need to modify, apply the changes accordingly
-          COMMIT_TITLE=$(packages/click-ui/.scripts/bash/generate-release-commit-message "${{ steps.version-package.outputs.version }}" "${{ inputs.release_type }}")
+          COMMIT_TITLE=$(libs/click-ui/.scripts/bash/generate-release-commit-message "${{ steps.version-package.outputs.version }}" "${{ inputs.release_type }}")
 
           echo "title=$COMMIT_TITLE" >> $GITHUB_OUTPUT
           echo "branch=changeset-release/v${{ steps.version-package.outputs.version }}-${{ inputs.release_type }}" >> $GITHUB_OUTPUT

.github/workflows/publish.yml

@@ -63,12 +63,12 @@ jobs:
           git config user.name "GitHub Actions"
       - name: Bump package version (for version inputs)
         if: ${{ env.IS_VERSION_INPUT == 'true' }}
-        working-directory: packages/click-ui
+        working-directory: libs/click-ui
         run: |
           npm pkg set version=$GITHUB_TAG
       - name: Generate prerelease version (for tag inputs)
         if: ${{ env.IS_VERSION_INPUT == 'false' }}
-        working-directory: packages/click-ui
+        working-directory: libs/click-ui
         run: |
           # Get current version from package.json
           CURRENT_VERSION=$(node -p "require('./package.json').version")
@@ -93,9 +93,9 @@ jobs:
         working-directory: packages/icons
         run: yarn build
       - run: yarn test
-        working-directory: packages/click-ui
+        working-directory: libs/click-ui
       - run: yarn build
-        working-directory: packages/click-ui
+        working-directory: libs/click-ui
       - name: Determine npm tag
         run: |
           # If it's a version input (e.g., 0.0.242 or 0.0.242-beta.1), check for prerelease keywords
@@ -110,12 +110,12 @@ jobs:
             echo "NPM_TAG=$GITHUB_TAG" >> "$GITHUB_ENV"
           fi
       - name: Publish to npm with OIDC
-        working-directory: packages/click-ui
+        working-directory: libs/click-ui
         run: npm publish --access public --tag $NPM_TAG --provenance
       - name: update package version (for version inputs only)
         if: ${{ env.IS_VERSION_INPUT == 'true' }}
         run: |
-          git add packages/click-ui/package.json yarn.lock
+          git add libs/click-ui/package.json yarn.lock
           git commit -m 'bump version to ${{ env.GITHUB_TAG }}'
           git push
       - name: Create and push git tag (for version inputs only)

.github/workflows/pull-request-slack-notification.yml

@@ -19,8 +19,8 @@ jobs:
           PR_BODY: ${{ github.event.pull_request.body }}
           PR_TITLE: ${{ github.event.pull_request.title }}
         run: |
-          DESC=$(packages/click-ui/.scripts/bash/pull-request-truncate-body "$PR_BODY")
-          TITLE=$(packages/click-ui/.scripts/bash/pull-request-json-escape "$PR_TITLE")
+          DESC=$(libs/click-ui/.scripts/bash/pull-request-truncate-body "$PR_BODY")
+          TITLE=$(libs/click-ui/.scripts/bash/pull-request-json-escape "$PR_TITLE")
 
           echo "description=$DESC" >> $GITHUB_OUTPUT
           echo "title=$TITLE" >> $GITHUB_OUTPUT

.github/workflows/release-publisher.yml

@@ -36,7 +36,7 @@ jobs:
           # WARNING: This is coupled with generate release commit
           # if you need to modify, apply the changes accordingly
           # Script outputs "VERSION RELEASE_TYPE" on success (e.g., "1.2.3 latest")
-          if OUTPUT=$(packages/click-ui/.scripts/bash/verify-release-commit "$COMMIT_MSG"); then
+          if OUTPUT=$(libs/click-ui/.scripts/bash/verify-release-commit "$COMMIT_MSG"); then
             VERSION=$(echo "$OUTPUT" | awk '{print $1}')
             RELEASE_TYPE=$(echo "$OUTPUT" | awk '{print $2}')
             echo "✅ Detected release PR merge for version $VERSION ($RELEASE_TYPE)"
@@ -126,13 +126,13 @@ jobs:
 
       - name: Build package
         if: steps.verify-merge.outputs.is_release == 'true'
-        working-directory: packages/click-ui
+        working-directory: libs/click-ui
         run: yarn build
 
       - name: Get package info
         if: steps.verify-merge.outputs.is_release == 'true'
         id: package-info
-        working-directory: packages/click-ui
+        working-directory: libs/click-ui
         run: |
           VERSION="${{ steps.verify-merge.outputs.version }}"
           RELEASE_TYPE="${{ steps.verify-merge.outputs.release_type }}"
@@ -153,7 +153,7 @@ jobs:
 
       - name: Publish to npm over OpenID Connect (OIDC)
         if: steps.verify-merge.outputs.is_release == 'true'
-        working-directory: packages/click-ui
+        working-directory: libs/click-ui
         run: |
           # WARNING: It's preferred NPM for publishing
           npm publish \
@@ -166,13 +166,13 @@ jobs:
         id: changelog
         run: |
           VERSION="${{ steps.verify-merge.outputs.version }}"
-          CHANGELOG_PATH="packages/click-ui/CHANGELOG.md"
+          CHANGELOG_PATH="libs/click-ui/CHANGELOG.md"
           CHANGELOG_OUTPUT_TEMP_PATH="/tmp/changelog.txt"
           FALLBACK_MSG="📝 See [CHANGELOG.md](./CHANGELOG.md) for details."
 
           CHANGELOG=""
           if [[ -f "$CHANGELOG_PATH" ]]; then
-            CHANGELOG=$(packages/click-ui/.scripts/bash/extract-changelog "$VERSION" "$CHANGELOG_PATH")
+            CHANGELOG=$(libs/click-ui/.scripts/bash/extract-changelog "$VERSION" "$CHANGELOG_PATH")
           fi
 
           if [[ -n "$CHANGELOG" ]]; then

.github/workflows/storybook-vercel.yml

@@ -13,7 +13,7 @@ permissions:
 
 env:
   HUSKY: 0
-  STORYBOOK_BUILD_DIR: packages/click-ui/.storybook/out
+  STORYBOOK_BUILD_DIR: libs/click-ui/.storybook/out
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
   VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
   VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
@@ -54,7 +54,7 @@ jobs:
         run: npm install --global vercel@latest
 
       - name: Build Storybook
-        working-directory: packages/click-ui
+        working-directory: libs/click-ui
         run: yarn storybook:build
 
       - name: Pull Vercel Environment Information
@@ -104,7 +104,7 @@ jobs:
         run: |
           COMMIT_MSG=$(git log -1 --format=%s)
 
-          if OUTPUT=$(packages/click-ui/.scripts/bash/verify-release-commit "$COMMIT_MSG"); then
+          if OUTPUT=$(libs/click-ui/.scripts/bash/verify-release-commit "$COMMIT_MSG"); then
             VERSION=$(echo "$OUTPUT" | awk '{print $1}')
             RELEASE_TYPE=$(echo "$OUTPUT" | awk '{print $2}')
             echo "🤖 Detected release commit for version $VERSION ($RELEASE_TYPE) will deploy..."

.github/workflows/unit-tests.yml

@@ -28,5 +28,5 @@ jobs:
         run: yarn build
 
       - name: unit tests
-        working-directory: packages/click-ui
+        working-directory: libs/click-ui
         run: yarn test

README.md

@@ -0,0 +1,148 @@
+<p align="center">
+  <a href="https://clickhouse.com" target="_blank">
+    <img
+      alt="Clickhouse logo"
+      src="./.repo/images/banner.jpg"
+    />
+  </a>
+</p>
+
+# Click UI (Monorepo)
+
+[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-blue.svg)](https://conventionalcommits.org)
+
+This is the official monorepo for Click UI, the ClickHouse Design System's Component Library.
+
+You can find the official docs for the Click UI design system and component library at [clickhouse.design/click-ui](https://clickhouse.design/click-ui).
+
+## Overview
+
+* [Requirements](#requirements)
+* [Project Structure](#project-structure)
+* [Packages](#packages)
+* [Quick Start](#quick-start)
+  - [Development](#development)
+  - [Consumer apps](#consumer-apps)
+* [Monorepo Architecture](#monorepo-architecture)
+* [Contributing](#contributing)
+  - [Component RFC](#component-rfc)
+  - [Conventional Commits](#conventional-commits)
+
+## Requirements
+
+- Nodejs (>= 22.12.x) as runtime
+- Yarn (>= 4.5.3) for development, any other package manager in a consumer app project
+
+## Project Structure
+
+```
+click-ui/
+├── libs/
+│   └── click-ui/   # Main component library
+└── packages/
+   └── icons/
+```
+
+## Packages
+
+| Package | Description | Path |
+|---------|-------------|------|
+| `@clickhouse/click-ui` | Component library | [libs/click-ui](./libs/click-ui) |
+| `icons` | Internal icon generation tooling | [packages/icons](./packages/icons) |
+
+## Quick Start
+
+### Development
+
+The project uses yarn package manager for development.
+
+After cloning the repository change to the work directory and install the dependencies:
+
+```sh
+yarn
+```
+
+For detailed development instructions, see [libs/click-ui/README.md](./libs/click-ui/README.md#development).
+
+### Consumer Apps
+
+Install the package via npm or your favourite package manager:
+
+```sh
+npm i @clickhouse/click-ui@latest
+```
+
+To use Click UI, you must wrap your application in the provider. This ensures styles and themes are applied correctly across all components.
+
+```ts
+import { ClickUIProvider, Title, Text } from '@clickhouse/click-ui'
+
+function App() {
+  return (
+    <ClickUIProvider theme="dark">
+      <Title type="h1">Hello ClickHouse</Title>
+      <Text>Start building today!</Text>
+    </ClickUIProvider>
+  )
+}
+```
+
+For more examples, including theme switching and configuration, see [libs/click-ui/README.md](./libs/click-ui/README.md#quick-start).
+
+## Monorepo Architecture
+
+This monorepo uses a two-directory structure to semantically distinguish between the core component library and supporting packages, or tooling:
+
+| Directory | Purpose | Published |
+|-----------|---------|-----------|
+| `libs/` | Core libraries for external consumption | Yes |
+| `packages/` | tools and utilities | Yes |
+
+### Creating a New Internal Package
+
+1. Create the package directory under `packages/`
+2. Initialize with a `package.json` (no npm scope needed)
+3. Add internal documentation as needed
+4. Reference from the consuming library's build scripts
+
+## Contributing
+
+### Component RFC
+
+To propose a new component, open an RFC using the [Component RFC template](https://github.com/ClickHouse/click-ui/compare/main...branchName?template=component_rfc.md).
+
+> [!NOTE]
+> Replace the <branchName> in the Component RFC template URL by your branch name.
+
+For example, to open a Component RFC for branch name `feat/slider`, you'd open the URL:
+
+```sh
+https://github.com/ClickHouse/click-ui/compare/main...feat/slider?template=component_rfc.md
+```
+
+For GitHub CLI users:
+
+```sh
+gh pr create --template component_rfc.md
+```
+
+### Conventional commits
+
+We prefer to commit our work following [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0) conventions. Conventional Commits are a simple way to write commit messages that both people and computers can understand. It help us keep track fo changes in a consistent manner, making it easier to see what was added, changed, or fixed in each commit or update.
+
+The commit messages are formatted as **[type]/[scope]**
+The **type** is a short descriptor indicating the nature of the work (e.g., feat, fix, docs, style, refactor, test, chore). This follows the conventional commit types.
+
+The **scope** is a more detailed description of the feature or fix. This could be the component or part of the codebase affected by the change.
+
+Here's an example of different conventional commits messages that you must follow:
+
+```txt
+test: 💍 Adding missing tests
+feat: 🎸 A new feature
+fix: 🐛 A bug fix
+chore: 🤖 Build process or auxiliary tool changes
+docs: 📝 Documentation only changes
+refactor: 💡 A code change that neither fixes a bug or adds a feature
+style: 💄 Markup, white-space, formatting, missing semi-colons...
+```

packages/click-ui/.storybook/Introduction.mdx → libs/click-ui/.storybook/Introduction.mdx

@@ -4,7 +4,7 @@
 
 # Click UI
 
-Click UI is the ClickHouse design system and component library. Our aim with Click UI is to provide an accessible, theme-able, modern, and attractive interface with which to experience the speed and power of ClickHouse.
+Click UI is the ClickHouse Design System's Component Library. Our aim with Click UI is to provide an accessible, theme-able, modern, and attractive interface with which to experience the speed and power of ClickHouse.
 
 This site is a reference for inspecting components and their props. Official documentation lives at [clickhouse.design/click-ui](https://clickhouse.design/click-ui).