feat: initial setup for components library

* feat: initial setup for components library (#2)

* fix: properly inject css in button and input

* chore: remove Vite boilerplate style

* chore: update repo link in readme

* @SigNoz -> @signozhq

* chore: rename packages playground dev script

* chore: update readme

* chore: wrap input and button classNames in cn

* chore: update readme

* Update README.md

* chore: upgrade storybook and add preview.js

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "updateInternalDependencies": "patch",
+  "baseBranch": "main"
+}

.github/workflows/release.yml

@@ -0,0 +1,43 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Setup Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: pnpm release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Send a Slack notification if a publish happens
+        if: steps.changesets.outputs.published == 'true'
+        run: my-slack-bot send-notification --message "A new version of ${GITHUB_REPOSITORY} was published!"

.gitignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+.turbo
+*.log
+.next
+dist
+dist-ssr
+*.local
+.env
+.cache
+server/dist
+public/dist
+storybook-static/

.npmrc

@@ -0,0 +1,2 @@
+auto-install-peers = true
+public-hoist-pattern[]=*storybook*

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "eslint.workingDirectories": [
+    {
+      "mode": "auto"
+    }
+  ]
+}

README.md

@@ -1 +1,139 @@
-# components
+# Signoz Components Library
+
+This guide explains how to use Signoz components library powered by Turborepo, React, and Storybook.
+
+## Getting Started
+
+1. Clone the repository:
+
+   ```sh
+   git clone [email protected]:SigNoz/components.git
+   ```
+
+2. Install dependencies:
+
+   ```sh
+   pnpm install
+   ```
+
+3. Build the packages:
+
+   ```sh
+   pnpm build
+   ```
+
+4. Start Storybook:
+   ```sh
+   pnpm run dev
+   ```
+
+## Useful Commands
+
+- `pnpm build` - Build all packages, including the Storybook site
+- `pnpm dev` - Run all packages locally and preview with Storybook
+- `pnpm lint` - Lint all packages
+- `pnpm changeset` - Generate a changeset
+- `pnpm clean` - Clean up all `node_modules` and `dist` folders
+
+## Available Packages
+
+- `@signozhq/theme`: Contains theme provider, theme switcher, ...
+- `@signozhq/tailwind-config`: UI configuration, including Tailwind CSS setup
+- `@signozhq/button`: Button component
+- `@signozhq/input`: Input component
+
+## Creating a New Package
+
+To create a new package:
+
+1. Create a new branch:
+
+   ```sh
+   git checkout -b feature/new-package-name
+   ```
+
+2. From the root of the project, run:
+
+   ```sh
+   pnpm turbo gen new-package
+   ```
+
+   When creating a new package, you'll be prompted to provide a name and description for it. Enter these details as requested. For example:
+
+   - Package name: Enter a name that corresponds to a shadcn component (e.g., "dropdown-menu")
+   - Description: Provide a brief explanation of the package's purpose
+
+   e.g.
+
+   ```sh
+   ❯ pnpm turbo gen new-package
+   turbo 2.1.2
+
+
+   >>> Modify "design-system" using custom generators
+
+   ? What is the name of the new package? dropdown-menu
+   ? Provide a brief description of the package: dropdown menu package
+   ```
+
+   Executing this generator will automatically set up and configure the new package with the necessary files and structure.
+
+   ```
+   ├── apps
+   │   └── docs
+   │       ├── package.json (modified)
+   │       └── stories
+   │           └── dropdown-menu.stories.tsx (new)
+   ├── packages
+   │   └── dropdown-menu
+   │       ├── .eslintrc.js (new)
+   │       ├── components.json (new)
+   │       ├── package.json (new)
+   │       ├── postcss.config.js (new)
+   │       ├── src
+   │       │   ├── dropdown-menu.tsx (new)
+   │       │   ├── index.css (new)
+   │       │   └── lib
+   │       │       └── utils.ts (new)
+   │       ├── tailwind.config.js (new)
+   │       ├── tsconfig.app.json (new)
+   │       ├── tsconfig.json (new)
+   │       └── vite.config.ts (new)
+   ```
+
+3. Make the necessary changes:
+
+   - Modify the component (e.g. `packages/dropdown-menu/src/dropdown-menu.tsx`)
+   - Add a storybook story in `apps/docs/stories/dropdown-menu.stories.tsx`
+
+4. From the root of the project, commit the changes to the new branch:
+
+   ```sh
+   git add .
+   git commit -m "Add new package: dropdown-menu"
+   ```
+
+5. From the root of the project, run:
+
+   ```sh
+   pnpm changeset
+   ```
+
+   This will guide you through the process of creating a changeset, which is used to document changes and manage version bumps.
+
+   #### It will prompt you with the following:
+
+   - Which packages would you like to include? – This shows which packages and changed and which have remained the same. By default, no packages are included. Press space to select the packages you want to include in the changeset.
+   - Which packages should have a major bump? – Press space to select the packages you want to bump versions for.
+   - If doing the first major version, confirm you want to release.
+   - Write a summary for the changes.
+   - Confirm the changeset looks as expected.
+   - A new Markdown file will be created in the changeset folder with the summary and a list of the packages included.
+
+6. Push the changes to the remote repository:
+
+   ```sh
+   git push origin feature/new-package-name
+   ```
+
+7. Create a new PR

apps/docs/.eslintrc.cjs

@@ -0,0 +1,4 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: ["@repo/eslint-config/storybook.js"],
+};

apps/docs/.storybook/main.js

@@ -0,0 +1,37 @@
+import { dirname, join, resolve } from "path";
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+
+const config = {
+  stories: ["../stories/*.stories.tsx", "../stories/**/*.stories.tsx"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+
+  core: {},
+
+  async viteFinal(config, { configType }) {
+    // customize the Vite config here
+    return {
+      ...config,
+      define: { "process.env": {} },
+      resolve: {
+        alias: [],
+      },
+    };
+  },
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
+};
+
+export default config;

apps/docs/.storybook/preview.js

@@ -0,0 +1,11 @@
+// Configure Storybook parameters
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+export const tags = ["autodocs"];

apps/docs/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "docs",
+  "version": "0.1.18",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "storybook build --docs",
+    "preview-storybook": "serve storybook-static",
+    "clean": "rm -rf .turbo && rm -rf node_modules",
+    "lint": "eslint ./stories/*.stories.tsx --max-warnings 0"
+  },
+  "dependencies": {
+    "@signozhq/button": "workspace:*",
+    "@signozhq/input": "workspace:*",
+    "@signozhq/tailwind-config": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1",
+    "@repo/eslint-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "@storybook/addon-actions": "^8.3.3",
+    "@storybook/addon-essentials": "^8.3.3",
+    "@storybook/addon-links": "^8.3.3",
+    "@storybook/react": "^8.3.3",
+    "@storybook/react-vite": "^8.3.3",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^9.11.0",
+    "serve": "^14.2.1",
+    "storybook": "^8.3.3",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4"
+  }
+}