buildgrid-ui 1.0.0 → 1.1.0-alpha.1

package/.github/workflows/release.yml

@@ -3,6 +3,9 @@ on:
   push:
     branches:
       - main
+      - alpha
+      - beta
+      - rc
 jobs:
   release:
     runs-on: ubuntu-latest

package/.releaserc.json

@@ -1,5 +1,19 @@
 {
-  "branches": ["main"],
+  "branches": [
+    "main",
+    {
+      "name": "alpha",
+      "prerelease": "alpha"
+    },
+    {
+      "name": "beta",
+      "prerelease": "beta"
+    },
+    {
+      "name": "release-candidate",
+      "prerelease": "rc"
+    }
+  ],
   "plugins": [
     "@semantic-release/commit-analyzer",
     "@semantic-release/release-notes-generator",

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [1.1.0-alpha.1](https://github.com/adrianomaringolo/buildgrid-ui/compare/v1.0.0...v1.1.0-alpha.1) (2025-01-02)
+
+
+### Features
+
+* adding shadcn configuration ([5841434](https://github.com/adrianomaringolo/buildgrid-ui/commit/584143402fad7aa19e477693d2a4727f5625e430))
+* enhance Button component stories with props and update export ([69292b3](https://github.com/adrianomaringolo/buildgrid-ui/commit/69292b3d467dd5ed8eacf521e9c5f89e465af323))
+
 # 1.0.0 (2025-01-02)
 
 

package/README.md

@@ -0,0 +1,132 @@
+# buildgrid-ui
+
+### This lib is under construction, take a look again soon 🚧
+
+A React component library built using [Vite](https://vitejs.dev) and [shadcn](https://shadcn.dev) as the foundation. This library is designed to integrate seamlessly with React and Next.js applications and includes support for [TailwindCSS](https://tailwindcss.com). It also provides a Storybook setup to display and document the components.
+
+## Features
+
+- **Built with Vite** for a fast development experience.
+- **TailwindCSS Integration** for utility-first styling.
+- **shadcn Components** as a robust base.
+- **Storybook** for component documentation and testing.
+- **Semantic Versioning** with automated releases using [semantic-release](https://semantic-release.gitbook.io/semantic-release/).
+
+---
+
+## Getting Started
+
+### Installation
+
+To install the library, run:
+
+```bash
+npm install buildgrid-ui
+```
+
+or
+
+```bash
+yarn add buildgrid-ui
+```
+
+---
+
+### Usage
+
+1. Import a component in your React project:
+
+   ```jsx
+   import { Button } from "buildgrid-ui";
+
+   const App = () => <Button variant="primary">Click Me</Button>;
+
+   export default App;
+   ```
+
+2. Ensure TailwindCSS is configured in your project. Add the following imports to your `styles.css` file (or equivalent):
+
+   ```css
+   @tailwind base;
+   @tailwind components;
+   @tailwind utilities;
+   ```
+
+3. Include the `tailwind.config.js` content paths for buildgrid-ui:
+   ```javascript
+   module.exports = {
+     content: [
+       "./src/**/*.{js,ts,jsx,tsx}",
+       "./node_modules/buildgrid-ui/**/*.{js,ts,jsx,tsx}",
+     ],
+     theme: {
+       extend: {},
+     },
+     plugins: [],
+   };
+   ```
+
+---
+
+## Development
+
+### Setting Up the Project
+
+Clone the repository and install dependencies:
+
+```bash
+git clone https://github.com/yourusername/buildgrid-ui.git
+cd buildgrid-ui
+npm install
+```
+
+### Storybook
+
+Run Storybook locally to preview and develop components:
+
+```bash
+npm run storybook
+```
+
+---
+
+### Build the Library
+
+To build the library for production:
+
+```bash
+npm run build
+```
+
+The output will be in the `dist/` directory, ready for publishing or integration.
+
+---
+
+## Semantic Releases
+
+This project uses [semantic-release](https://semantic-release.gitbook.io/) for automated versioning and releases.
+
+### Steps to Create a Pre-release
+
+1. Push changes to the designated pre-release branch (e.g., `alpha`):
+   ```bash
+   git checkout -b alpha
+   git push origin alpha
+   ```
+2. Pre-release versions (e.g., `1.0.0-alpha.1`) will be automatically created.
+
+---
+
+## Contributing
+
+Contributions are welcome! To contribute:
+
+1. Fork the repository.
+2. Create a new branch for your feature or bugfix.
+3. Submit a pull request with a detailed description of your changes.
+
+---
+
+## License
+
+This project is licensed under the [MIT License](LICENSE).

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/tailwind.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "buildgrid-ui",
-  "version": "1.0.0",
+  "version": "1.1.0-alpha.1",
+  "publishConfig": {
+    "access": "public"
+  },
   "main": "dist/buildgrid-ui.umd.js",
   "module": "dist/buildgrid-ui.esm.js",
   "types": "dist/index.d.ts",
@@ -15,9 +18,15 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "@radix-ui/react-slot": "^1.1.1",
     "@shadcn/ui": "^0.0.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.469.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
     "vite": "^6.0.6"
   },
   "devDependencies": {
@@ -36,6 +45,7 @@
     "@storybook/react": "^8.4.7",
     "@storybook/react-vite": "^8.4.7",
     "@storybook/test": "^8.4.7",
+    "@types/node": "^22.10.3",
     "@types/react": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",

package/src/components/button/Button.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import Button from "./Button";
+import { Button, ButtonProps } from "./Button";
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -9,8 +9,19 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof Button>;
 
-export const Primary: Story = {
+const Template = (args: ButtonProps) => {
+  return (
+    <div style={{ padding: "10px" }}>
+      <Button>{args.children}</Button>
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: Template.bind({}),
   args: {
-    label: "Button example",
+    children: "Primary Button",
+    variant: "default",
+    size: "default",
   },
 };

package/src/components/button/Button.tsx

@@ -1,17 +1,57 @@
-import React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../lib/utils/cn";
 
-export interface ButtonProps {
-  label: string;
-  onClick?: () => void;
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        xl: "h-12 rounded-md px-10 text-xl",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
 }
 
-const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
-  <button
-    onClick={onClick}
-    className="px-4 py-2 bg-blue-500 text-white rounded"
-  >
-    {label}
-  </button>
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
 );
+Button.displayName = "Button";
 
-export default Button;
+export { Button, buttonVariants };

package/src/index.ts

@@ -1 +1 @@
-export { default as Button } from "./components/button/Button";
+export { Button } from "./components/button/Button";

package/src/lib/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/styles/tailwind.css

@@ -1,3 +1,66 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/tailwind.config.js

@@ -1,8 +1,57 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
+    darkMode: ["class"],
+    content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+  	extend: {
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		colors: {
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		}
+  	}
   },
-  plugins: [],
+  plugins: [require("tailwindcss-animate")],
 };

package/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    // ...
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+    // ...
+  }
+}

package/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "target": "esnext",
     "module": "esnext",
     "lib": ["dom", "esnext"],
@@ -8,7 +9,11 @@
     "moduleResolution": "node",
     "esModuleInterop": true,
     "declaration": true,
-    "outDir": "dist"
+    "outDir": "dist",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }

package/vite.config.ts

@@ -1,8 +1,20 @@
 import { defineConfig } from "vite";
+import path from "path";
 import react from "@vitejs/plugin-react";
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  css: {
+    postcss: {
+      plugins: [require("tailwindcss"), require("autoprefixer")],
+    },
+  },
+
   build: {
     lib: {
       entry: "src/index.ts",