@boilerhaus-ui/boilerhaus-ui 0.1.0 → 0.1.1

package/README.md

@@ -1,73 +1,165 @@
-# React + TypeScript + Vite
+# BoilerHAUS UI
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+`@boilerhaus-ui/boilerhaus-ui` is the BoilerHAUS design system package: a Bauhaus-inspired React component library for BoilerHAUS, ScopeHouse, and related products.
 
-Currently, two official plugins are available:
+It combines:
+- design tokens in CSS
+- React 19 components
+- Tailwind v4 utilities generated from tokens
+- Radix UI primitives for accessibility
+- Storybook as the primary component workshop
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+## Stack
 
-## React Compiler
+- React 19
+- TypeScript 5
+- Vite 8
+- Tailwind CSS v4
+- Storybook 10
+- Radix UI
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## Package
 
-## Expanding the ESLint configuration
+```bash
+npm install @boilerhaus-ui/boilerhaus-ui
+```
+
+```tsx
+import { Button } from '@boilerhaus-ui/boilerhaus-ui'
+import '@boilerhaus-ui/boilerhaus-ui/tokens.css'
+```
+
+If the consuming app uses Tailwind v4, include the package as a source so Tailwind sees the shipped class names:
+
+```css
+@import "tailwindcss";
+@import "@boilerhaus-ui/boilerhaus-ui/tokens.css";
+@source "../node_modules/@boilerhaus-ui/boilerhaus-ui/dist";
+```
+
+## Local Development
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Run the local Vite app:
+
+```bash
+npm run dev
+```
+
+Run Storybook:
+
+```bash
+npm run storybook
+```
+
+Build the package library:
+
+```bash
+npm run build:lib
+```
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+Build Storybook:
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+```bash
+npm run build-storybook
+```
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+Lint the repo:
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+```bash
+npm run lint
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+## Workflow
+
+Storybook is the main development surface for this repo.
+
+The expected component workflow is:
+1. Define the API in `<Component>.stories.tsx`
+2. Implement the component in `<Component>.tsx`
+3. Export it from its local `index.ts`
+4. Re-export it from [`src/components/index.ts`](/media/boilerrat/Bobby/boilerhaus-ui/src/components/index.ts)
+5. Verify accessibility and visual states in Storybook
+
+## Design Rules
+
+- Use tokens only. Do not introduce raw hex values, arbitrary spacing, or ad hoc durations.
+- Prefer Tailwind token utilities in JSX such as `bg-signal`, `text-void`, `border-rule`, `rounded-md`, and `duration-fast`.
+- Use CSS custom properties from [`src/tokens/tokens.css`](/media/boilerrat/Bobby/boilerhaus-ui/src/tokens/tokens.css) when utilities are not enough.
+- Keep components isolated. Avoid cross-component styling dependencies.
+- Favor Radix primitives for focus management, keyboard behavior, and ARIA support.
+
+The canonical repo rules and design constraints live in [`CLAUDE.md`](/media/boilerrat/Bobby/boilerhaus-ui/CLAUDE.md).
+
+## Structure
+
+```text
+boilerhaus-ui/
+├── .storybook/         Storybook config
+├── src/
+│   ├── components/     Reusable UI components
+│   ├── lib/            Shared helpers such as cn()
+│   ├── tokens/         Design tokens
+│   ├── index.css       Base styles
+│   └── index.ts        Public library entry
+├── package.json
+└── CLAUDE.md
 ```
+
+## Current Component Set
+
+The library currently includes:
+
+- Accordion
+- Alert
+- AspectRatio
+- Avatar
+- Badge
+- Breadcrumb
+- Button
+- Card
+- Checkbox
+- Combobox
+- DataTable
+- DatePicker
+- Dialog
+- DropdownMenu
+- FileUpload
+- Input
+- Label
+- PageShell
+- Popover
+- Progress
+- RadioGroup
+- Select
+- Skeleton
+- Spinner
+- Stat
+- Stepper
+- Switch
+- Table
+- Tabs
+- Textarea
+- Toast
+- Tooltip
+
+## Publishing
+
+This package publishes to npm as a public scoped package:
+
+```bash
+npm publish
+```
+
+Package name:
+
+```text
+@boilerhaus-ui/boilerhaus-ui
+```
+
+`prepublishOnly` automatically runs the library build before publishing.

package/dist/components/Logo/Logo.d.ts

@@ -0,0 +1,13 @@
+export type LogoVariant = 'color' | 'void' | 'dark' | 'paper';
+export type LogoLockup = 'horizontal' | 'stacked' | 'mark-only' | 'wordmark-only';
+export type LogoSize = 'sm' | 'md' | 'lg';
+export interface LogoProps {
+    /** Color scheme. Use 'dark' or 'paper' on dark backgrounds. Defaults to 'color'. */
+    variant?: LogoVariant;
+    /** Layout of mark and wordmark. Defaults to 'horizontal'. */
+    lockup?: LogoLockup;
+    /** Overall size — sm for topbar, md default, lg for hero/display. Defaults to 'md'. */
+    size?: LogoSize;
+    className?: string;
+}
+export declare function Logo({ variant, lockup, size, className, }: LogoProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/index.d.ts

@@ -0,0 +1,2 @@
+export { Logo } from './Logo';
+export type { LogoProps, LogoVariant, LogoLockup, LogoSize } from './Logo';

package/dist/components/index.d.ts

@@ -62,3 +62,5 @@ export { DataTable } from './DataTable';
 export type { DataTableProps, DataTableColumn } from './DataTable';
 export { AspectRatio } from './AspectRatio';
 export type { AspectRatioProps } from './AspectRatio';
+export { Logo } from './Logo';
+export type { LogoProps, LogoVariant, LogoLockup, LogoSize } from './Logo';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boilerhaus-ui/boilerhaus-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Boilerhaus design system — Bauhaus-inspired tokens and components for ScopeHouse and beyond.",
   "type": "module",
   "exports": {
@@ -20,7 +20,13 @@
   "sideEffects": [
     "./dist/tokens.css"
   ],
-  "keywords": ["design-system", "react", "tailwind", "components", "ui"],
+  "keywords": [
+    "design-system",
+    "react",
+    "tailwind",
+    "components",
+    "ui"
+  ],
   "license": "MIT",
   "publishConfig": {
     "access": "public"