Skip to content

Commit 9f80a5e

Browse files
munlicodemunlicode
authored
feat: initialize component library infrastructure with Tailwind v4 and monorepo tooling (#1)
* feat: initialize @kreozalabs/ui package with project configuration and documentation * feat: initialize component library project with build, lint, and release automation * feat: add optional peer dependencies for styles and tailwind
1 parent e00c0a0 commit 9f80a5e

15 files changed

Lines changed: 3705 additions & 0 deletions

‎.eslintrc.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
extends: ["@kreozalabs/eslint-config"],
3+
};

‎.github/workflows/release.yml‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
on:
2+
push:
3+
branches:
4+
- main
5+
workflow_dispatch: # Allows manual triggering for testing
6+
7+
permissions:
8+
contents: write
9+
pull-requests: write
10+
id-token: write
11+
12+
name: release
13+
14+
jobs:
15+
release:
16+
runs-on: ubuntu-latest
17+
steps:
18+
- uses: googleapis/release-please-action@v4
19+
id: release
20+
with:
21+
token: ${{ secrets.GITHUB_TOKEN }}
22+
release-type: node
23+
24+
- name: checkout
25+
if: ${{ steps.release.outputs.release_created }}
26+
uses: actions/checkout@v6
27+
28+
- name: setup pnpm
29+
if: ${{ steps.release.outputs.release_created }}
30+
uses: pnpm/action-setup@a8198c4bff370c8506180b035930dea56dbd5288
31+
32+
- name: setup node
33+
if: ${{ steps.release.outputs.release_created }}
34+
uses: actions/setup-node@v6
35+
with:
36+
node-version: 24
37+
registry-url: "https://registry.npmjs.org"
38+
cache: "pnpm"
39+
40+
- name: install dependencies
41+
if: ${{ steps.release.outputs.release_created }}
42+
run: pnpm install --no-frozen-lockfile
43+
44+
- name: lint code
45+
if: ${{ steps.release.outputs.release_created }}
46+
run: pnpm run lint
47+
48+
- name: type check
49+
if: ${{ steps.release.outputs.release_created }}
50+
run: pnpm run typecheck
51+
52+
- name: build package
53+
if: ${{ steps.release.outputs.release_created }}
54+
run: pnpm run build
55+
56+
- name: publish to npm
57+
if: ${{ steps.release.outputs.release_created }}
58+
run: pnpm publish --no-git-checks --provenance

‎.gitignore‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
9+
# Diagnostic reports (https://nodejs.org/api/report.html)
10+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11+
12+
# Runtime data
13+
pids
14+
*.pid
15+
*.seed
16+
*.pid.lock
17+
18+
# Directory for instrumented libs generated by jscoverage/JSCover
19+
lib-cov
20+
21+
# Coverage directory used by tools like istanbul
22+
coverage
23+
*.lcov
24+
25+
# nyc test coverage
26+
.nyc_output
27+
28+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29+
.grunt
30+
31+
# Bower dependency directory (https://bower.io/)
32+
bower_components
33+
34+
# node-waf configuration
35+
.lock-wscript
36+
37+
# Compiled binary addons (https://nodejs.org/api/addons.html)
38+
build/Release
39+
40+
# Dependency directories
41+
node_modules/
42+
jspm_packages/
43+
44+
# Snowpack dependency directory (https://snowpack.dev/)
45+
web_modules/
46+
47+
# TypeScript cache
48+
*.tsbuildinfo
49+
50+
# Optional npm cache directory
51+
.npm
52+
53+
# Optional eslint cache
54+
.eslintcache
55+
56+
# Optional stylelint cache
57+
.stylelintcache
58+
59+
# Optional REPL history
60+
.node_repl_history
61+
62+
# Output of 'npm pack'
63+
*.tgz
64+
65+
# Yarn Integrity file
66+
.yarn-integrity
67+
68+
# dotenv environment variable files
69+
.env
70+
.env.*
71+
!.env.example
72+
73+
# parcel-bundler cache (https://parceljs.org/)
74+
.cache
75+
.parcel-cache
76+
77+
# Next.js build output
78+
.next
79+
out
80+
81+
# Nuxt.js build / generate output
82+
.nuxt
83+
dist
84+
.output
85+
86+
# Gatsby files
87+
.cache/
88+
# Comment in the public line in if your project uses Gatsby and not Next.js
89+
# https://nextjs.org/blog/next-9-1#public-directory-support
90+
# public
91+
92+
# vuepress build output
93+
.vuepress/dist
94+
95+
# vuepress v2.x temp and cache directory
96+
.temp
97+
.cache
98+
99+
# Sveltekit cache directory
100+
.svelte-kit/
101+
102+
# vitepress build output
103+
**/.vitepress/dist
104+
105+
# vitepress cache directory
106+
**/.vitepress/cache
107+
108+
# Docusaurus cache and generated files
109+
.docusaurus
110+
111+
# Serverless directories
112+
.serverless/
113+
114+
# FuseBox cache
115+
.fusebox/
116+
117+
# DynamoDB Local files
118+
.dynamodb/
119+
120+
# Firebase cache directory
121+
.firebase/
122+
123+
# TernJS port file
124+
.tern-port
125+
126+
# Stores VSCode versions used for testing VSCode extensions
127+
.vscode-test
128+
129+
# pnpm
130+
.pnpm-store
131+
132+
# yarn v3
133+
.pnp.*
134+
.yarn/*
135+
!.yarn/patches
136+
!.yarn/plugins
137+
!.yarn/releases
138+
!.yarn/sdks
139+
!.yarn/versions
140+
141+
# Vite files
142+
vite.config.js.timestamp-*
143+
vite.config.ts.timestamp-*
144+
.vite/

‎.pre-commit-config.yaml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
default_language_version:
2+
node: 24.14.1
3+
4+
repos:
5+
- repo: https://github.com/kreozalabs/tooling
6+
rev: main
7+
hooks:
8+
- id: kreoza-prettier

‎.prettierrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require("@kreozalabs/prettier-config");

‎CONTRIBUTING.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Contributing to `@kreozalabs/ui`
2+
3+
When adding or modifying components in this package, please adhere to the following architectural boundaries.
4+
5+
## 📐 What belongs here?
6+
- **Framework-specific components:** Only React (`.tsx`, `.ts`) components.
7+
- **Generic Building Blocks:** Reusable UI components like `<Button>`, `<Table>`, `<Card>`, `<Input>`, etc.
8+
- **Composed UI:** Slightly more complex generic UI elements (e.g., a standard `<Pagination>` or `<DateRangePicker>` component).
9+
- **UI Logic:** Hooks that deal explicitly with UI states (like `useMediaQuery` or `useDisclosure`).
10+
11+
## 🚫 What does NOT belong here?
12+
- **Business Logic:** Do not include API calls, global state management, or product-specific data fetching.
13+
- **Raw Branding and Assets:** SVG logos and exact hex color logic belong in `@kreozalabs/brand`.
14+
- **CSS Configurations:** Global css variables and tailwind presets belong in `@kreozalabs/styles`. The UI package heavily *consumes* the styles package, but does not define the styles.
15+
- **Custom Icons:** Raw custom SVG React icons belong in `@kreozalabs/icons`.
16+
17+
## 🛠️ Adding a New Component
18+
1. Run the component generator (e.g., shadcn/ui CLI) to build the component into the `src/components/` directory.
19+
2. Ensure the component is exported cleanly via the main `src/index.ts` file so consumers can easily import it.
20+
3. If the component requires a new color or design token, add that token to `@kreozalabs/styles`. **Do not** hardcode magic hex colors directly in this package.

‎README.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# @kreozalabs/ui
2+
3+
The core React component library for Kreoza Labs. This package provides foundational UI building blocks (buttons, dialogs, inputs, etc.) intended to be consumed by our web, desktop (Tauri), and mobile applications.
4+
5+
## 📦 Installation
6+
7+
This package is intended to be consumed within the Kreoza Labs monorepo workspace.
8+
9+
```bash
10+
pnpm add @kreozalabs/ui
11+
```
12+
13+
### Peer Dependencies
14+
Ensure the consuming application has the following installed:
15+
- `react`
16+
- `react-dom`
17+
- `tailwindcss`
18+
- `@kreozalabs/styles` (for the required design tokens and presets)
19+
20+
## 🚀 Usage
21+
22+
Import components directly from the package into your React app.
23+
24+
```tsx
25+
import { Button } from "@kreozalabs/ui";
26+
27+
export default function App() {
28+
return (
29+
<div className="p-4">
30+
<Button variant="default">Click Me</Button>
31+
</div>
32+
);
33+
}
34+
```
35+
36+
## 🛠️ Configuration
37+
Ensure your application's `tailwind.config.ts` extends the presets from `@kreozalabs/styles` so that these UI components render with the correct brand theme and colors.
38+
39+
## 🤝 Contributing
40+
For guidelines on what belongs in this package, how to add new components, and our architectural boundaries, please carefully read the [CONTRIBUTING.md](./CONTRIBUTING.md).

‎components.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "default",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.ts",
8+
"css": "../styles/base.css",
9+
"baseColor": "slate",
10+
"cssVariables": true
11+
},
12+
"aliases": {
13+
"components": "@/components",
14+
"utils": "@/lib/utils"
15+
}
16+
}

‎package.json‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "@kreozalabs/ui",
3+
"version": "0.1.0",
4+
"private": false,
5+
"main": "./dist/index.js",
6+
"module": "./dist/index.mjs",
7+
"types": "./dist/index.d.ts",
8+
"publishConfig": {
9+
"access": "public"
10+
},
11+
"scripts": {
12+
"build": "tsup",
13+
"dev": "tsup --watch",
14+
"lint": "eslint \"src/**/*.ts*\"",
15+
"format": "prettier --write \"src/**/*.{ts,tsx}\"",
16+
"typecheck": "tsc --noEmit"
17+
},
18+
"dependencies": {
19+
"@radix-ui/react-slot": "^1.0.2",
20+
"clsx": "^2.1.0",
21+
"lucide-react": "^0.368.0",
22+
"tailwind-merge": "^2.2.2"
23+
},
24+
"devDependencies": {
25+
"@kreozalabs/eslint-config": "1.1.0",
26+
"@kreozalabs/prettier-config": "1.1.0",
27+
"@kreozalabs/styles": "2.0.0",
28+
"@tailwindcss/postcss": "^4.0.0",
29+
"@types/react": "^18.2.0",
30+
"@types/react-dom": "^18.2.0",
31+
"prettier": "^3.2.5",
32+
"tailwindcss": "^4.0.0",
33+
"tsup": "^8.0.2",
34+
"typescript": "~5.5.4"
35+
},
36+
"peerDependencies": {
37+
"react": "^18.0.0 || ^19.0.0",
38+
"react-dom": "^18.0.0 || ^19.0.0"
39+
},
40+
"optionalPeerDependencies": {
41+
"@kreozalabs/styles": ">=2.0.0",
42+
"tailwindcss": ">=3.4.0 || >=4.0.0"
43+
}
44+
}

0 commit comments

Comments
 (0)