feat: shadcn based alert component

.husky/commit-msg

@@ -0,0 +1,12 @@
+pnpm commitlint --edit $1
+
+branch="$(git rev-parse --abbrev-ref HEAD)"
+
+color_red="$(tput setaf 1)"
+bold="$(tput bold)"
+reset="$(tput sgr0)"
+
+if [ "$branch" = "main" ]; then
+  echo "${color_red}${bold}You can't commit directly to the main branch${reset}"
+  exit 1
+fi

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm lint-staged

.lintstagedrc.js

@@ -0,0 +1,4 @@
+export default {
+	'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
+	'*.{json,md,yml}': ['prettier --write'],
+};

.prettierignore

@@ -0,0 +1,8 @@
+node_modules
+public
+build
+dist
+node_modules
+dist
+build
+.turbo

.prettierrc.js

@@ -0,0 +1,8 @@
+export default {
+	trailingComma: 'all',
+	useTabs: true,
+	tabWidth: 1,
+	singleQuote: true,
+	jsxSingleQuote: false,
+	semi: true,
+};

README.md

@@ -34,6 +34,7 @@ This guide explains how to use Signoz components library powered by Turborepo, R
 - `pnpm lint` - Lint all packages
 - `pnpm changeset` - Generate a changeset
 - `pnpm clean` - Clean up all `node_modules` and `dist` folders
+- `pnpm turbo gen new-package` - Custom generator script to add new component/package to the component library
 
 ## Available Packages
 

apps/docs/package.json

@@ -1,37 +1,39 @@
 {
-  "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-designs": "^8.0.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"
-  }
+	"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/alert": "workspace:*",
+		"@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-designs": "^8.0.3",
+		"@storybook/addon-essentials": "^8.3.3",
+		"@storybook/addon-links": "^8.3.3",
+		"@storybook/react": "^8.3.3",
+		"@storybook/react-vite": "^8.3.3",
+		"@types/react": "^18.3.11",
+		"@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"
+	}
 }

apps/docs/stories/alert.stories.tsx

@@ -0,0 +1,64 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Alert, AlertTitle, AlertDescription } from "@signozhq/alert";
+
+const meta: Meta<typeof Alert> = {
+  title: "Components/Alert",
+  component: Alert,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "destructive"],
+    },
+    title: {
+      control: "text",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Alert>;
+
+const Template: Story = {
+  render: ({ variant, title, children }) => (
+    <Alert variant={variant}>
+      {title && <AlertTitle>{title}</AlertTitle>}
+      <AlertDescription>{children}</AlertDescription>
+    </Alert>
+  ),
+};
+
+export const Default: Story = {
+  ...Template,
+  args: {
+    variant: "default",
+    title: "Heads up!",
+    children:
+      "You can add components and dependencies to your app using the cli.",
+  },
+};
+
+export const Destructive: Story = {
+  ...Template,
+  args: {
+    variant: "destructive",
+    title: "Error",
+    children: "Your session has expired. Please log in again.",
+  },
+};
+
+export const TitleOnly: Story = {
+  ...Template,
+  args: {
+    title: "Note",
+    children: null,
+  },
+};
+
+export const DescriptionOnly: Story = {
+  ...Template,
+  args: {
+    title: "",
+    children: "This is a description-only alert.",
+  },
+};

apps/docs/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@repo/typescript-config/react-app.json",
-  "include": ["."],
-  "exclude": ["dist", "build", "node_modules"]
+	"extends": "@repo/typescript-config/react-library.json",
+	"include": ["."],
+	"exclude": ["dist", "build", "node_modules"]
 }

apps/packages-playground/src/main.tsx

@@ -1,23 +1,24 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App.tsx";
-import "./index.css";
-import { ThemeProvider, useTheme } from "@signozhq/theme";
+import React from 'react';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './index.css';
+import { ThemeProvider, useTheme } from '@signozhq/theme';
 
 function ThemedApp() {
-  const { theme } = useTheme();
+	const { theme } = useTheme();
 
-  return (
-    <div className={`app ${theme}`}>
-      <App />
-    </div>
-  );
+	return (
+		<div className={`app ${theme}`}>
+			<App />
+		</div>
+	);
 }
 
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <ThemeProvider>
-      <ThemedApp />
-    </ThemeProvider>
-  </StrictMode>
+createRoot(document.getElementById('root')!).render(
+	<StrictMode>
+		<ThemeProvider>
+			<ThemedApp />
+		</ThemeProvider>
+	</StrictMode>,
 );

commitlint.config.js

@@ -0,0 +1 @@
+export default { extends: ['@commitlint/config-conventional'] };

eslint.config.js

@@ -0,0 +1,29 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+
+export default [
+	{
+		ignores: [
+			'dist',
+			'node_modules',
+			'packages/**/dist',
+			'apps/**/dist',
+			'packages/**/node_modules',
+			'apps/**/node_modules',
+		],
+	},
+	{ files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
+	{ languageOptions: { globals: globals.browser } },
+	pluginJs.configs.recommended,
+	...tseslint.configs.recommended,
+	pluginReact.configs.flat.recommended,
+	{
+		settings: {
+			react: {
+				version: 'detect', // Automatically detect the React version
+			},
+		},
+	},
+];

package.json

@@ -1,22 +1,49 @@
 {
-  "private": true,
-  "scripts": {
-    "build": "turbo run build",
-    "dev": "turbo run dev",
-    "lint": "turbo run lint",
-    "clean": "turbo run clean && rm -rf node_modules",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
-    "changeset": "changeset",
-    "version-packages": "changeset version",
-    "update-version": "changeset && changeset version",
-    "release": "turbo run build --filter=docs^... && changeset publish"
-  },
-  "devDependencies": {
-    "@changesets/cli": "^2.27.1",
-    "inquirer": "^11.0.2",
-    "prettier": "^3.2.5",
-    "turbo": "^2.1.2"
-  },
-  "packageManager": "pnpm@8.15.6",
-  "name": "design-system"
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "turbo run build",
+		"dev": "turbo run dev",
+		"lint": "turbo run lint",
+		"clean": "turbo run clean && rm -rf node_modules",
+		"format": "prettier --write \"**/*.{ts,tsx,md}\"",
+		"changeset": "changeset",
+		"version-packages": "changeset version",
+		"update-version": "changeset && changeset version",
+		"release": "turbo run build --filter=docs^... && changeset publish",
+		"prepare": "husky",
+		"pre-commit": "lint-staged"
+	},
+	"lint-staged": {
+		"*.{js, jsx,ts,tsx}": [
+			"sh scripts/typecheck-staged.sh",
+			"eslint --quiet --fix",
+			"prettier --write"
+		],
+		"*.{json,js,ts,jsx,tsx,html}": [
+			"prettier --write --ignore-unknown"
+		]
+	},
+	"devDependencies": {
+		"@changesets/cli": "^2.27.1",
+		"@commitlint/cli": "^19.5.0",
+		"@commitlint/config-conventional": "^19.5.0",
+		"@eslint/js": "^9.9.0",
+		"@repo/typescript-config": "workspace:*",
+		"@turbo/gen": "^2.1.2",
+		"@types/fs-extra": "^11.0.4",
+		"eslint": "^9.11.0",
+		"eslint-plugin-react": "^7.37.1",
+		"fs-extra": "^11.2.0",
+		"globals": "^15.9.0",
+		"husky": "^9.1.6",
+		"inquirer": "^11.0.2",
+		"lint-staged": "^15.2.10",
+		"prettier": "^3.2.5",
+		"turbo": "^2.1.2",
+		"typescript": "^5.6.2",
+		"typescript-eslint": "^8.0.1"
+	},
+	"packageManager": "pnpm@8.15.6",
+	"name": "design-system"
 }

packages/alert/.eslintrc.js

@@ -0,0 +1,4 @@
+/** @type {import("eslint").Linter.Config} */
+export default {
+	extends: ['@repo/eslint-config/react.js'],
+};

packages/alert/components.json

@@ -0,0 +1,19 @@
+{
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "@signozhq/tailwind-config/tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "src",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}