rouse-ui-kit-make-kit 0.1.2

package/guidelines/Guidelines.md

@@ -0,0 +1,114 @@
+<!-- make-kit-guidelines -->
+## Design System Setup — MANDATORY
+
+This project depends on `@make-kits/rouse-ui-kit` packages. Before writing
+any code:
+
+1. Read guidelines/setup.md and guidelines/Guidelines.md by their exact
+   path (e.g. node_modules/<scope>/<package>/guidelines/setup.md).
+   This project uses pnpm, which symlinks packages — do NOT use
+   `find`, `glob`, or `file_search` to discover files as they silently
+   fail on symlinks. Instead use: reading files by exact path,
+   `ls` (follows symlinks), `find -L` (`-L` follows symlinks), or `cat`.
+2. Execute all setup instructions (install dependencies, config changes)
+   against THIS project — not the package itself.
+3. Do not skip, modify, or improvise any setup steps.
+4. Read ALL other required .md files specified in guidelines/Guidelines.md.
+5. Verify that all packages specified in setup.md appear in this
+   project's package.json and that all required .md files have been read before proceeding.
+<!-- /make-kit-guidelines -->
+
+**Add your own guidelines here**
+
+## Rouse Design System Guidelines
+
+Read `guidelines/setup.md` for full component reference and import patterns.
+
+### General
+- Use `rouse-ui-kit` components for ALL UI elements — never build custom buttons, inputs, chips, alerts, or labels from scratch
+- Import everything from `rouse-ui-kit`; never import directly from `@mui/material` for UI components (MUI is a peer dependency of the kit)
+- Always wrap the app in `ThemeProvider` + `CssBaseline` from MUI using the `theme` export from `rouse-ui-kit`
+- Set `html { font-size: 16px }` in global CSS so MUI rem values are correct
+
+### Typography
+- Use `Typography variant="h4"` for page titles, `h5` for section headers, `h6` for card headers
+- Never set `fontSize` manually — always use MUI Typography `variant` prop
+- Never use `color: "black"` — use `theme.palette.text.primary` (#191919) or `theme.palette.text.secondary` (#666666)
+
+### Status & Labels
+- Use `LabelFilled` for status (Active/Inactive) with `color="success"` or `color="default"`
+- Use `ChipStatus` for contract tier / category badges (Premium, Basic)
+- Use `AlertStandard` for all contextual messages — never custom-build alert boxes
+
+### Layout
+- Page backgrounds: `bgcolor: theme.palette.background.default` (#F5F5F5)
+- Card/section backgrounds: `bgcolor: background.white` (#FFFFFF) with `border: 1px solid ${theme.palette.divider}`
+- Section cards have a header (title in `h6` + optional `LabelFilled` badge) separated by a divider from the content
+- Modals: `background.white`, `borderRadius: 2`, `boxShadow: 3`, max-width `28rem`–`32rem`
+
+### Forms
+- All text inputs: `TextFieldOutlined` — use `placeholder` + `size="small"` for search bars
+- All dropdowns: `SelectOutlined`
+- All checkboxes: `Checkbox` from rouse-ui-kit
+- Form modals always have 3 sections: header (title+desc), content (fields), footer (Cancel + primary CTA)
+
+<!--
+
+System Guidelines (original template — keep for reference)
+
+Use this file to provide the AI with rules and guidelines you want it to follow.
+This template outlines a few examples of things you can add. You can add your own sections and format it to suit your needs
+
+TIP: More context isn't always better. It can confuse the LLM. Try and add the most important rules you need
+
+# General guidelines
+
+Any general rules you want the AI to follow.
+For example:
+
+* Only use absolute positioning when necessary. Opt for responsive and well structured layouts that use flexbox and grid by default
+* Refactor code as you go to keep code clean
+* Keep file sizes small and put helper functions and components in their own files.
+
+--------------
+
+# Design system guidelines
+Rules for how the AI should make generations look like your company's design system
+
+Additionally, if you select a design system to use in the prompt box, you can reference
+your design system's components, tokens, variables and components.
+For example:
+
+* Use a base font-size of 14px
+* Date formats should always be in the format “Jun 10”
+* The bottom toolbar should only ever have a maximum of 4 items
+* Never use the floating action button with the bottom toolbar
+* Chips should always come in sets of 3 or more
+* Don't use a dropdown if there are 2 or fewer options
+
+You can also create sub sections and add more specific details
+For example:
+
+
+## Button
+The Button component is a fundamental interactive element in our design system, designed to trigger actions or navigate
+users through the application. It provides visual feedback and clear affordances to enhance user experience.
+
+### Usage
+Buttons should be used for important actions that users need to take, such as form submissions, confirming choices,
+or initiating processes. They communicate interactivity and should have clear, action-oriented labels.
+
+### Variants
+* Primary Button
+  * Purpose : Used for the main action in a section or page
+  * Visual Style : Bold, filled with the primary brand color
+  * Usage : One primary button per section to guide users toward the most important action
+* Secondary Button
+  * Purpose : Used for alternative or supporting actions
+  * Visual Style : Outlined with the primary color, transparent background
+  * Usage : Can appear alongside a primary button for less important actions
+* Tertiary Button
+  * Purpose : Used for the least important actions
+  * Visual Style : Text-only with no border, using primary color
+  * Usage : For actions that should be available but not emphasized
+-->

package/guidelines/setup.md

@@ -0,0 +1,260 @@
+# Rouse UI Kit — Setup & Component Reference
+
+## Installation
+
+This project uses `rouse-ui-kit` from npm. It is already listed in `package.json`.
+
+```bash
+npm install
+```
+
+## Import pattern
+
+All components and tokens are imported from `rouse-ui-kit`:
+
+```tsx
+import {
+  ButtonContained, ButtonOutlined, ButtonText,
+  TextFieldOutlined, SelectOutlined,
+  ChipFilled, ChipStatus,
+  LabelFilled, LabelOutlined,
+  AlertStandard,
+  Checkbox,
+  IconButtonOutlined,
+  Menu,
+  theme, background, gray, other, interaction,
+  primary, secondary, text, typography,
+} from "rouse-ui-kit";
+```
+
+Always wrap the app in `ThemeProvider` and `CssBaseline` from MUI:
+
+```tsx
+import { ThemeProvider } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import { theme } from "rouse-ui-kit";
+
+<ThemeProvider theme={theme}>
+  <CssBaseline />
+  {/* app content */}
+</ThemeProvider>
+```
+
+---
+
+## Design Tokens
+
+### Colors — use via `theme.palette.*`
+
+| Token | Value | Usage |
+|---|---|---|
+| `theme.palette.text.primary` | `#191919` | All primary text |
+| `theme.palette.text.secondary` | `#666666` | Labels, captions, metadata |
+| `theme.palette.text.disabled` | `#999999` | Disabled states |
+| `theme.palette.secondary.main` | `#2C4D9E` | Links, active nav, accent |
+| `theme.palette.secondary.light` | `#6F8DE3` | Hover/light accent |
+| `theme.palette.primary.main` | `#4C4C4C` | Borders, icons |
+| `theme.palette.divider` | `rgba(0,0,0,0.12)` | Borders, dividers |
+| `theme.palette.action.hover` | `rgba(0,0,0,0.04)` | Row hover |
+| `background.white` | `#FFFFFF` | Card/surface backgrounds |
+| `background.paper` | `#FAFAFA` | Slightly off-white surfaces |
+| `background.default` | `#F5F5F5` | Page background |
+| `gray[10]` | `#E5E5E5` | Avatar backgrounds, subtle fills |
+
+Import standalone tokens when needed:
+```tsx
+import { background, gray, other, interaction } from "rouse-ui-kit";
+```
+
+### Typography — use MUI `variant` prop, never hardcode font sizes
+
+| Variant | Size | Weight | Use for |
+|---|---|---|---|
+| `h4` | 34px (2.125rem) | 400 | Page titles |
+| `h5` | 24px (1.5rem) | 400 | Section headers |
+| `h6` | 20px (1.25rem) | 500 | Card headers, sub-section titles |
+| `subtitle1` | 16px | 400 | Secondary headers |
+| `subtitle2` | 14px | 500 | Table headers, labels with emphasis |
+| `body1` | 16px | 400 | Body text |
+| `body2` | 14px | 400 | Secondary body, descriptions |
+| `caption` | 12px | 400 | Metadata, timestamps, hints |
+
+**Never** set `fontSize` manually on `Typography` — always use `variant`.
+**Never** use `color: "black"` — always use `theme.palette.text.primary`.
+
+---
+
+## Components
+
+### ButtonContained
+Primary CTA. Use for the main action on a page/section.
+
+```tsx
+<ButtonContained label="Add client" onClick={handleClick} />
+<ButtonContained label="Save" disabled={!isValid} />
+```
+
+Props: `label`, `onClick`, `disabled`, `icon` ("none" | "left" | "right")
+
+### ButtonOutlined
+Secondary action. Use alongside `ButtonContained` for cancel/alternative actions.
+
+```tsx
+<ButtonOutlined label="Cancel" onClick={handleClose} />
+<ButtonOutlined label="Filters" icon={FilterList} />
+```
+
+Props: `label`, `onClick`, `disabled`, `icon`
+
+### ButtonText
+Tertiary action. Least emphasis.
+
+```tsx
+<ButtonText label="Learn more" onClick={handleClick} />
+```
+
+### TextFieldOutlined
+Use for all text inputs. For search bars use `placeholder` instead of `label` with `size="small"`.
+
+```tsx
+// Form field (floating label)
+<TextFieldOutlined label="Name" value={name} onChange={setName} />
+
+// Search bar (placeholder, no floating label)
+<TextFieldOutlined
+  placeholder="Search clients"
+  value={search}
+  onChange={setSearch}
+  icon={SearchIcon}
+  clearable
+  size="small"
+  onClear={() => setSearch("")}
+/>
+
+// With error
+<TextFieldOutlined label="Email" value={email} onChange={setEmail} error helperText="Invalid email" />
+```
+
+Props: `label`, `placeholder`, `value`, `onChange`, `error`, `helperText`, `disabled`, `clearable`, `onClear`, `icon`, `onIconClick`, `type`, `size` ("small" | "medium")
+
+### SelectOutlined
+Use for all dropdown selects.
+
+```tsx
+const options = [
+  { value: "rouse", label: "Rouse" },
+  { value: "rb", label: "Ritchie Bros" },
+];
+
+<SelectOutlined
+  label="Company"
+  value={company}
+  options={options}
+  onChange={setCompany}
+/>
+```
+
+Props: `label`, `value`, `options`, `onChange`, `error`, `helperText`, `disabled`, `clearable`, `onClear`
+
+### Checkbox
+Use for boolean fields and multi-select lists.
+
+```tsx
+<Checkbox label="All Seller Orgs" checked={isChecked} onChange={setIsChecked} />
+<Checkbox label="Disabled" disabled />
+```
+
+Props: `label`, `checked`, `onChange`, `disabled`, `indeterminate`
+
+### ChipFilled
+Use for filter tabs and toggleable categories.
+
+```tsx
+<ChipFilled label="All clients" selected={filter === "all"} onClick={() => setFilter("all")} />
+```
+
+Props: `label`, `selected`, `onClick`, `disabled`, `color` ("primary" | "secondary"), `deletable`, `onDelete`
+
+### ChipStatus
+Use for contract tiers and category badges (not status — use LabelFilled for status).
+
+```tsx
+<ChipStatus label="Premium" color="secondary" />
+<ChipStatus label="Basic" color="default" />
+```
+
+Props: `label`, `color` ("primary" | "secondary" | "default"), `icon`
+
+### LabelFilled
+**Use for status indicators** (Active/Inactive, approval states).
+
+```tsx
+<LabelFilled label="Active" color="success" icon="none" />
+<LabelFilled label="Inactive" color="default" icon="none" />
+<LabelFilled label="Full edit" color="primary" icon="none" />
+<LabelFilled label="Required" color="error" icon="none" />
+```
+
+Colors: `"default"` | `"primary"` | `"secondary"` | `"error"` | `"warning"` | `"success"` | `"info"`
+Props: `label`, `color`, `icon` ("none" | "left" | "right" | "only")
+
+### LabelOutlined
+Same as LabelFilled but outlined style. Use when less emphasis is needed.
+
+```tsx
+<LabelOutlined label="View only" color="default" icon="none" />
+```
+
+### AlertStandard
+Use for contextual messages, warnings, and info banners.
+
+```tsx
+<AlertStandard severity="info">
+  Seller Orgs are independent units.
+</AlertStandard>
+
+<AlertStandard severity="warning" action="End session" onAction={handleEnd}>
+  You are viewing as Carlos Mendez — session ends in 15 min
+</AlertStandard>
+
+<AlertStandard severity="secondary" onClose={handleClose}>
+  Draft saved automatically.
+</AlertStandard>
+```
+
+Severities: `"error"` | `"warning"` | `"info"` | `"success"` | `"primary"` | `"secondary"`
+Props: `severity`, `title`, `children`, `action`, `onAction`, `onClose`
+
+### IconButtonOutlined
+Use for icon-only actions in tables and cards.
+
+```tsx
+<IconButtonOutlined icon={MoreVert} size="small" aria-label="More options" onClick={handleClick} />
+```
+
+Sizes: `"xSmall"` | `"small"` | `"medium"` | `"large"`
+
+### Menu
+Use for dropdown menus and option lists.
+
+```tsx
+<Menu
+  options={[{ value: "edit", label: "Edit" }, { value: "delete", label: "Delete" }]}
+  selectedValues={[selected]}
+  onSelect={setSelected}
+/>
+```
+
+---
+
+## Rules
+
+- **Never use hardcoded hex colors** — always use `theme.palette.*` or named tokens
+- **Never use hardcoded font sizes** — always use Typography `variant` prop
+- **Never use `fontWeight: 700`** unless it's a stat number (use `fontWeight: 500` for emphasis)
+- **Use `background.white`** for card/surface backgrounds, not `"#fff"` or `"white"`
+- **Use `LabelFilled` for status** (Active/Inactive), **ChipStatus for category** (Premium/Basic)
+- **Use `AlertStandard` for all banners and contextual messages** — never build custom alert boxes
+- **Modals** should use `background.white`, `borderRadius: 2`, `boxShadow: 3`, max-width constraint
+- **Tables**: use `Box component="table"` with `borderCollapse: "collapse"`, headers with `Typography variant="subtitle2"`
+- **Form modals**: always have a header section (title + description), content section, and footer with Cancel + primary action

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "rouse-ui-kit-make-kit",
+  "version": "0.1.2",
+  "description": "Rouse UI Kit — Figma Make guidelines",
+  "keywords": ["make-kit", "figma-make", "rouse", "design-system"],
+  "files": ["guidelines"],
+  "make-kit": {
+    "library": "rouse-ui-kit",
+    "version": "0.1.2"
+  }
+}