@stamcat/craftsman 0.0.62 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.62",
+  "version": "0.1.4",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -33,9 +33,13 @@
     "@atlaskit/pragmatic-drag-and-drop": "^3.0.0",
     "@floating-ui/react-dom": "^2.1.0",
     "@wojtekmaj/react-daterange-picker": "^7.1.0",
+    "ag-grid-community": "^36.2.0",
+    "ag-grid-react": "^36.2.0",
+    "chart.js": "^4.5.1",
     "dompurify": "^3.4.0",
     "embla-carousel-react": "^8.6.0",
     "react": "^19.0.0",
+    "react-chartjs-2": "^5.3.1",
     "react-date-picker": "^12.0.0",
     "react-datetime-picker": "^7.0.0",
     "react-device-detect": "^2.2.0",
@@ -92,6 +96,7 @@
     "is-weakref": "npm:@socketregistry/is-weakref@^1",
     "is-weakset": "npm:@socketregistry/is-weakset@^1",
     "isarray": "npm:@socketregistry/isarray@^1",
+    "js-yaml": "4.3.2",
     "object-keys": "npm:@socketregistry/object-keys@^1",
     "object.assign": "npm:@socketregistry/object.assign@^1",
     "object.fromentries": "npm:@socketregistry/object.fromentries@^1",
@@ -165,6 +170,7 @@
     "is-weakref": "npm:@socketregistry/is-weakref@^1",
     "is-weakset": "npm:@socketregistry/is-weakset@^1",
     "isarray": "npm:@socketregistry/isarray@^1",
+    "js-yaml": "4.3.2",
     "object-keys": "npm:@socketregistry/object-keys@^1",
     "object.assign": "npm:@socketregistry/object.assign@^1",
     "object.fromentries": "npm:@socketregistry/object.fromentries@^1",

package/skills/craftsman-component-usage/SKILL.md

@@ -129,6 +129,46 @@ toast.warning("Unsaved changes.");
 toast.info("New version available.");
 ```
 
+## Charts (react-chartjs-2)
+
+Craftsman uses `react-chartjs-2` directly, without modification — there is no Craftsman `Chart` wrapper component. Consumers install `react-chartjs-2` and its `chart.js` peer dependency themselves and use the upstream API exactly as documented at https://react-chartjs-2.js.org/examples.
+
+Import:
+
+```tsx
+import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Tooltip, Legend } from "chart.js";
+import { Bar } from "react-chartjs-2";
+
+// Register only the controllers/elements/scales/plugins the chart type needs — chart.js is tree-shakeable.
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+```
+
+Usage:
+
+- Every chart type used (`Bar`, `Line`, `Pie`, `Doughnut`, `PolarArea`, `Radar`, `Scatter`, `Bubble`, `Chart` for mixed types) must have its corresponding `chart.js` pieces registered once at module scope before render.
+- Dataset colors must be literal color values (hex/`rgba()`), not CSS variables (`var(--blue500)`) — chart.js draws to a `<canvas>` 2D context, which cannot resolve CSS custom properties. Use `colors` and `hexToRgba` from `@stamcat/craftsman/styles` (see the [craftsman-style-utilities skill](../craftsman-style-utilities/SKILL.md)) to stay on-palette instead of hard-coding hex strings inline.
+- See `src/stories/organisms/Charts.stories.tsx` in this repo for a full worked example of every chart type from the react-chartjs-2 examples page.
+
+## Tables (ag-grid-community)
+
+Craftsman does not wrap `ag-grid-community`/`ag-grid-react` with a custom component. We use them directly, without modification, for advanced data visualization tables (large sortable/filterable datasets) — exactly as documented upstream at https://www.ag-grid.com/react-data-grid/.
+
+Import:
+
+```tsx
+import { AllCommunityModule, ModuleRegistry, themeQuartz } from "ag-grid-community";
+import { AgGridReact } from "ag-grid-react";
+
+// Register only the Community module — do not register Enterprise modules without a license.
+ModuleRegistry.registerModules([AllCommunityModule]);
+```
+
+Usage:
+
+- Only the **free Community feature set** is used/showcased in this repo: client-side sorting, filtering, pagination, row selection, cell rendering/formatting, quick filter, and CSV export.
+- AG Grid also sells **Enterprise-only** features (row grouping, pivoting, master/detail, server-side row model, Excel export, and others). These require registering separate Enterprise modules and a commercial license key. Do not enable or suggest Enterprise modules unless the consumer confirms they hold an AG Grid Enterprise license — it is the consumer's responsibility to obtain and configure that license.
+- See `src/stories/organisms/Tables.stories.tsx` in this repo for worked Community-only examples.
+
 ## Code Generation Patterns to Prefer
 
 1. Generate fully typed React usage examples.

package/src/components/Button/AGENTS.md

@@ -17,6 +17,8 @@ Behavior notes:
 
 - `type` defaults to `"button"`.
 - For `variant !== "default"`, variant is appended to `className` (for example `"primary"`).
+- `primary` and `secondary` share a distinct filled look (blue background, white text); `default` is a base outlined look; `text` is a borderless, underline-on-hover link style.
+- A `<button>` element can wrap arbitrary content (icons, custom markup, anything) purely so it stays usable by screen readers and other automated/assistive services — the native semantics and keyboard behavior come for free. Not every `<button>` should visually look like a button though, so styling is opt-in via class names rather than the bare element: base button styles (`%button-styles`) are scoped to the `.button` class the component always applies, not the bare `button` element — plain `<button>` markup without that class receives no library styling.
 - `className` is preserved and merged after component classes.
 - Theme component overrides are selector-based CSS emitted by `ThemeProvider`; `theme.components.*` accepts JS style objects or raw CSS/Sass strings for the target selector.
 - If `children` is empty (per `isEmpty`), the component renders nothing.

package/src/styles/global/components/_button.scss

@@ -1,6 +1,12 @@
 @use "../../utilities/functions" as u;
 
 @layer cf-base {
+  %button-reset {
+    background: none;
+    border: none;
+    color: #{u.color("text")};
+  }
+
   %text-link {
       padding: 0;
       border: none;
@@ -18,7 +24,7 @@
           }
       }
   }
-
+  
   %button-styles {
     --btn-size: 1;
     color: var(--blue600);
@@ -47,7 +53,16 @@
         background-color: var(--blue700);
       }
     }
-    
+
+    &.secondary {
+      color: var(--white);
+      background-color: var(--blue500);
+
+      &:hover {
+        background-color: var(--blue700);
+      }
+    }
+
     &.text {
       @extend %text-link;
     }
@@ -58,7 +73,7 @@
       border-color:  #{u.color("gray200")};
       color:  #{u.color("gray400")};
 
-      &.primary {
+      &.primary, &.secondary {
         border-color:  #{u.color("gray200")};
         background-color:  #{u.color("gray400")};
         color:  #{u.color("gray200")};

package/src/styles/global/globalStyles.scss

@@ -59,8 +59,10 @@
     code {
         @extend %code;
     }
-
     button {
+        @extend %button-reset;
+    }
+    .button {
         @extend %button-styles;
     }