@matteoaliano/forest-ui 0.2.10 → 0.3.0

package/README.md

@@ -0,0 +1,123 @@
+# Forest UI
+
+Forest Design System — A multi-tenant MUI v7 + Emotion component library.
+
+## Installation
+
+```bash
+npm install @matteoaliano/forest-ui
+```
+
+## Quick Start
+
+```tsx
+import { ForestProvider, Button, Typography } from '@matteoaliano/forest-ui';
+import '@fontsource/poppins'; // or load Aeonik font
+
+function App() {
+  return (
+    <ForestProvider>
+      <Typography variant="h1">Hello Forest</Typography>
+      <Button variant="contained">Click me</Button>
+    </ForestProvider>
+  );
+}
+```
+
+## Theme Presets
+
+Three presets are available:
+
+| Preset | Use Case |
+|--------|----------|
+| `forest-agency` | Internal tools + partner agencies (default) |
+| `forest-external` | Client-facing products |
+| `forest-internal` | Internal tools |
+
+### Using a Preset
+
+```tsx
+import { ForestProvider } from '@matteoaliano/forest-ui';
+
+<ForestProvider preset="forest-external">
+  {/* Your app */}
+</ForestProvider>
+```
+
+### Using a Custom Theme
+
+```tsx
+import { ForestProvider, buildTheme } from '@matteoaliano/forest-ui';
+import { getPreset } from '@matteoaliano/forest-ui';
+
+const preset = getPreset('forest-agency');
+const theme = buildTheme(preset.variants.light.tokens);
+
+<ForestProvider theme={theme}>
+  {/* Your app */}
+</ForestProvider>
+```
+
+## Components
+
+40+ wrapped MUI components with Forest defaults. See [Storybook](https://storybook.url) for all components.
+
+### Inputs
+- Button, ButtonGroup
+- TextField, Select, MultiSelect
+- Checkbox, RadioGroup, Switch
+- ToggleButton
+- DatePicker
+- Autocomplete
+- Search
+
+### Data Display
+- Typography
+- Table, DataGrid
+- Chip, Badge
+- Tooltip
+- List
+- Divider
+- Skeleton
+
+### Surfaces
+- Card, Paper
+- AppBar
+- Accordion
+
+### Feedback
+- Alert, Snackbar
+- Dialog, Modal, Popover
+- Progress (Linear, Circular)
+- Backdrop
+
+### Navigation
+- Tabs, Stepper
+- Pagination
+- Breadcrumbs
+- Link
+- Menu
+- SidebarNav
+
+### Charts
+- LineChart, BarChart, PieChart
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build
+npm run build
+
+# Run tests
+npm test
+
+# Storybook
+npm run storybook
+```
+
+## License
+
+MIT

package/bin/sync.mjs

@@ -14,12 +14,12 @@
  *   .antigravity/rules.md     — Antigravity
  *
  * Guideline categories:
- *   - FOREST_AI_GUIDELINES.md            — Design system components, tokens, patterns
- *   - FOREST_DEV_GUIDELINES.md           — Development best practices
- *   - themes/FOREST_THEME_<NAME>.md      — Theme-specific guidelines (auto-discovered)
+ *   - FOREST_UI_GUIDELINES.md            — Design system components, tokens, patterns
+ *   - FOREST_FE_GUIDELINES.md            — Next.js frontend best practices
+ *   - FOREST_BE_GUIDELINES.md            — FastAPI backend best practices
  */
 
-import { readFileSync, writeFileSync, mkdirSync, existsSync, readdirSync } from "node:fs";
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from "node:fs";
 import { resolve, dirname, basename } from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -30,48 +30,32 @@ const pkgPath = resolve(__dirname, "..", "package.json");
 const pkgVersion = JSON.parse(readFileSync(pkgPath, "utf-8")).version;
 
 const guidelinesDir = resolve(__dirname, "..", "guidelines");
-const themesDir = resolve(guidelinesDir, "themes");
 
 // Static guideline entries
 const staticEntries = [
     {
-        source: resolve(guidelinesDir, "FOREST_AI_GUIDELINES.md"),
+        source: resolve(guidelinesDir, "FOREST_UI_GUIDELINES.md"),
         claudeName: "forest-ui.md",
         geminiName: "forest-ui.md",
         cursorName: "forest-ui.mdc",
         cursorDescription: "Forest UI Design System guidelines — components, tokens, and patterns",
     },
     {
-        source: resolve(guidelinesDir, "FOREST_DEV_GUIDELINES.md"),
-        claudeName: "forest-dev.md",
-        geminiName: "forest-dev.md",
-        cursorName: "forest-dev.mdc",
-        cursorDescription: "Forest UI development best practices",
+        source: resolve(guidelinesDir, "FOREST_FE_GUIDELINES.md"),
+        claudeName: "forest-fe.md",
+        geminiName: "forest-fe.md",
+        cursorName: "forest-fe.mdc",
+        cursorDescription: "Next.js frontend best practices",
+    },
+    {
+        source: resolve(guidelinesDir, "FOREST_BE_GUIDELINES.md"),
+        claudeName: "forest-be.md",
+        geminiName: "forest-be.md",
+        cursorName: "forest-be.mdc",
+        cursorDescription: "FastAPI backend requirements and best practices",
     },
 ];
 
-// Auto-discover theme files from guidelines/themes/
-function discoverThemeEntries() {
-    if (!existsSync(themesDir)) return [];
-
-    return readdirSync(themesDir)
-        .filter((f) => /^FOREST_THEME_\w+\.md$/.test(f))
-        .map((f) => {
-            const themeName = f
-                .replace(/^FOREST_THEME_/, "")
-                .replace(/\.md$/, "")
-                .toLowerCase();
-
-            return {
-                source: resolve(themesDir, f),
-                claudeName: `forest-theme-${themeName}.md`,
-                geminiName: `forest-theme-${themeName}.md`,
-                cursorName: `forest-theme-${themeName}.mdc`,
-                cursorDescription: `Forest UI theme guidelines — ${themeName}`,
-            };
-        });
-}
-
 // Find the consuming project root (walk up until we find package.json)
 function findProjectRoot(startDir) {
     let dir = startDir;
@@ -90,7 +74,7 @@ function findProjectRoot(startDir) {
 }
 
 const projectRoot = findProjectRoot(process.cwd());
-const entries = [...staticEntries, ...discoverThemeEntries()];
+const entries = [...staticEntries];
 
 console.log(`\n🌲 Forest UI — Syncing AI guidelines\n`);
 console.log(`   Project root: ${projectRoot}`);