@slimkhemiri/react-design-system 0.1.2 → 0.1.3

package/README.md

@@ -13,6 +13,15 @@ This package provides:
 npm i @slimkhemiri/react-design-system
 ```
 
+This package depends on `@slimkhemiri/web-components` (installed automatically).
+
+If you see `E404 Not Found` for `@slimkhemiri/web-components`, it means that package is **not published to your registry yet**. Publish it first (see repo-level publishing notes), or install from local tarballs.
+
+```bash
+npm whoami
+npm login
+```
+
 ## Usage
 
 Register the custom elements once, then use the React components.
@@ -44,12 +53,58 @@ export function App() {
   return (
     <div style={{ display: "grid", gap: 12, maxWidth: 360 }}>
       <SlimInput label="Email" type="email" onSlimChange={(e) => console.log(e.detail)} />
-      <SlimButton variant="primary">Continue</SlimButton>
+      <SlimButton variant="primary">Click me !</SlimButton>
     </div>
   );
 }
 ```
 
+## Troubleshooting: "Invalid hook call" / `useRef` is null
+
+This error almost always means **React is resolved twice** (or `react` / `react-dom` versions don’t match) in your consuming app.
+
+### 1) Verify there is only one React
+
+```bash
+npm ls react react-dom
+```
+
+You should see **a single version** of `react` and `react-dom`.
+
+### 1bis) Quick fix (npm): force a single React via overrides
+
+If you see something like `@slimkhemiri/react-design-system -> react@18.x` while your app is on React 19 (or vice-versa),
+force React to a single version in your app:
+
+```json
+{
+  "overrides": {
+    "@slimkhemiri/react-design-system": {
+      "react": "19.2.4",
+      "react-dom": "19.2.4"
+    }
+  }
+}
+```
+
+Then reinstall (`rm -rf node_modules package-lock.json` + `npm i`).
+
+### 2) If you use Vite + monorepo / workspace / `npm link`
+
+Add React dedupe to your consuming app’s `vite.config.ts`:
+
+```ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    dedupe: ["react", "react-dom"]
+  }
+});
+```
+
 ## Next.js / SSR notes
 
 Custom elements must be defined in the browser. In Next.js, call `defineCustomElements()` from a client component:

package/dist/components.d.ts

@@ -8,9 +8,11 @@ import { SlimButton as SlimButtonElement } from "@slimkhemiri/web-components/dis
 import { SlimCheckbox as SlimCheckboxElement } from "@slimkhemiri/web-components/dist/components/slim-checkbox.js";
 import { SlimInput as SlimInputElement } from "@slimkhemiri/web-components/dist/components/slim-input.js";
 import { SlimModal as SlimModalElement } from "@slimkhemiri/web-components/dist/components/slim-modal.js";
+import { SlimPlaygroundSidebar as SlimPlaygroundSidebarElement } from "@slimkhemiri/web-components/dist/components/slim-playground-sidebar.js";
 import { SlimSelect as SlimSelectElement } from "@slimkhemiri/web-components/dist/components/slim-select.js";
 import { SlimSwitch as SlimSwitchElement } from "@slimkhemiri/web-components/dist/components/slim-switch.js";
 import { SlimTextarea as SlimTextareaElement } from "@slimkhemiri/web-components/dist/components/slim-textarea.js";
+import { SlimTooltip as SlimTooltipElement } from "@slimkhemiri/web-components/dist/components/slim-tooltip.js";
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 type SlimAlertEvents = NonNullable<unknown>;
 export declare const SlimAlert: StencilReactComponent<SlimAlertElement, SlimAlertEvents>;
@@ -30,6 +32,11 @@ type SlimModalEvents = {
     onSlimClose: EventName<CustomEvent<void>>;
 };
 export declare const SlimModal: StencilReactComponent<SlimModalElement, SlimModalEvents>;
+type SlimPlaygroundSidebarEvents = {
+    onSlimSelect: EventName<CustomEvent<string>>;
+    onSlimToggle: EventName<CustomEvent<boolean>>;
+};
+export declare const SlimPlaygroundSidebar: StencilReactComponent<SlimPlaygroundSidebarElement, SlimPlaygroundSidebarEvents>;
 type SlimSelectEvents = {
     onSlimChange: EventName<CustomEvent<string>>;
 };
@@ -42,5 +49,10 @@ type SlimTextareaEvents = {
     onSlimChange: EventName<CustomEvent<string>>;
 };
 export declare const SlimTextarea: StencilReactComponent<SlimTextareaElement, SlimTextareaEvents>;
+type SlimTooltipEvents = {
+    onSlimShow: EventName<CustomEvent<void>>;
+    onSlimHide: EventName<CustomEvent<void>>;
+};
+export declare const SlimTooltip: StencilReactComponent<SlimTooltipElement, SlimTooltipEvents>;
 export {};
 //# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAEA;;;GAGG;AAIH,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAA0C,MAAM,2DAA2D,CAAC;AAClJ,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAA0C,MAAM,2DAA2D,CAAC;AAClJ,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAA2C,MAAM,4DAA4D,CAAC;AACtJ,OAAO,EAAE,YAAY,IAAI,mBAAmB,EAA6C,MAAM,8DAA8D,CAAC;AAC9J,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAA0C,MAAM,2DAA2D,CAAC;AAClJ,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAA0C,MAAM,2DAA2D,CAAC;AAClJ,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAA2C,MAAM,4DAA4D,CAAC;AACtJ,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAA2C,MAAM,4DAA4D,CAAC;AACtJ,OAAO,EAAE,YAAY,IAAI,mBAAmB,EAA6C,MAAM,8DAA8D,CAAC;AAC9J,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAI7F,KAAK,eAAe,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAE5C,eAAO,MAAM,SAAS,EAAE,qBAAqB,CAAC,gBAAgB,EAAE,eAAe,CAO7E,CAAC;AAEH,KAAK,eAAe,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAE5C,eAAO,MAAM,SAAS,EAAE,qBAAqB,CAAC,gBAAgB,EAAE,eAAe,CAO7E,CAAC;AAEH,KAAK,gBAAgB,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAE7C,eAAO,MAAM,UAAU,EAAE,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAOhF,CAAC;AAEH,KAAK,kBAAkB,GAAG;IAAE,YAAY,EAAE,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAA;CAAE,CAAC;AAE5E,eAAO,MAAM,YAAY,EAAE,qBAAqB,CAAC,mBAAmB,EAAE,kBAAkB,CAOtF,CAAC;AAEH,KAAK,eAAe,GAAG;IAAE,YAAY,EAAE,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAA;CAAE,CAAC;AAExE,eAAO,MAAM,SAAS,EAAE,qBAAqB,CAAC,gBAAgB,EAAE,eAAe,CAO7E,CAAC;AAEH,KAAK,eAAe,GAAG;IAAE,WAAW,EAAE,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAA;CAAE,CAAC;AAErE,eAAO,MAAM,SAAS,EAAE,qBAAqB,CAAC,gBAAgB,EAAE,eAAe,CAO7E,CAAC;AAEH,KAAK,gBAAgB,GAAG;IAAE,YAAY,EAAE,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAA;CAAE,CAAC;AAEzE,eAAO,MAAM,UAAU,EAAE,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAOhF,CAAC;AAEH,KAAK,gBAAgB,GAAG;IAAE,YAAY,EAAE,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAA;CAAE,CAAC;AAE1E,eAAO,MAAM,UAAU,EAAE,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAOhF,CAAC;AAEH,KAAK,kBAAkB,GAAG;IAAE,YAAY,EAAE,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAA;CAAE,CAAC;AAE3E,eAAO,MAAM,YAAY,EAAE,qBAAqB,CAAC,mBAAmB,EAAE,kBAAkB,CAOtF,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"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"}

package/dist/components.js

@@ -10,9 +10,11 @@ import { SlimButton as SlimButtonElement, defineCustomElement as defineSlimButto
 import { SlimCheckbox as SlimCheckboxElement, defineCustomElement as defineSlimCheckbox } from "@slimkhemiri/web-components/dist/components/slim-checkbox.js";
 import { SlimInput as SlimInputElement, defineCustomElement as defineSlimInput } from "@slimkhemiri/web-components/dist/components/slim-input.js";
 import { SlimModal as SlimModalElement, defineCustomElement as defineSlimModal } from "@slimkhemiri/web-components/dist/components/slim-modal.js";
+import { SlimPlaygroundSidebar as SlimPlaygroundSidebarElement, defineCustomElement as defineSlimPlaygroundSidebar } from "@slimkhemiri/web-components/dist/components/slim-playground-sidebar.js";
 import { SlimSelect as SlimSelectElement, defineCustomElement as defineSlimSelect } from "@slimkhemiri/web-components/dist/components/slim-select.js";
 import { SlimSwitch as SlimSwitchElement, defineCustomElement as defineSlimSwitch } from "@slimkhemiri/web-components/dist/components/slim-switch.js";
 import { SlimTextarea as SlimTextareaElement, defineCustomElement as defineSlimTextarea } from "@slimkhemiri/web-components/dist/components/slim-textarea.js";
+import { SlimTooltip as SlimTooltipElement, defineCustomElement as defineSlimTooltip } from "@slimkhemiri/web-components/dist/components/slim-tooltip.js";
 import { createComponent } from '@stencil/react-output-target/runtime';
 import React from 'react';
 export const SlimAlert = /*@__PURE__*/ createComponent({
@@ -63,6 +65,17 @@ export const SlimModal = /*@__PURE__*/ createComponent({
     events: { onSlimClose: 'slimClose' },
     defineCustomElement: defineSlimModal
 });
+export const SlimPlaygroundSidebar = /*@__PURE__*/ createComponent({
+    tagName: 'slim-playground-sidebar',
+    elementClass: SlimPlaygroundSidebarElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onSlimSelect: 'slimSelect',
+        onSlimToggle: 'slimToggle'
+    },
+    defineCustomElement: defineSlimPlaygroundSidebar
+});
 export const SlimSelect = /*@__PURE__*/ createComponent({
     tagName: 'slim-select',
     elementClass: SlimSelectElement,
@@ -87,3 +100,14 @@ export const SlimTextarea = /*@__PURE__*/ createComponent({
     events: { onSlimChange: 'slimChange' },
     defineCustomElement: defineSlimTextarea
 });
+export const SlimTooltip = /*@__PURE__*/ createComponent({
+    tagName: 'slim-tooltip',
+    elementClass: SlimTooltipElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onSlimShow: 'slimShow',
+        onSlimHide: 'slimHide'
+    },
+    defineCustomElement: defineSlimTooltip
+});

package/dist/stories/Button.stories.d.ts

@@ -8,7 +8,7 @@ declare const meta: {
     tags: string[];
     argTypes: {
         backgroundColor: {
-            control: "color";
+            control: string;
         };
     };
     args: {

package/dist/stories/slim/SlimAlert.stories.d.ts

@@ -8,7 +8,7 @@ declare const meta: {
     tags: string[];
     argTypes: {
         variant: {
-            control: "select";
+            control: string;
             options: string[];
         };
     };

package/dist/stories/slim/SlimBadge.stories.d.ts

@@ -8,11 +8,11 @@ declare const meta: {
     tags: string[];
     argTypes: {
         variant: {
-            control: "select";
+            control: string;
             options: string[];
         };
         size: {
-            control: "radio";
+            control: string;
             options: string[];
         };
     };

package/dist/stories/slim/SlimButton.stories.d.ts

@@ -8,15 +8,15 @@ declare const meta: {
     tags: string[];
     argTypes: {
         variant: {
-            control: "select";
+            control: string;
             options: string[];
         };
         size: {
-            control: "radio";
+            control: string;
             options: string[];
         };
         type: {
-            control: "radio";
+            control: string;
             options: string[];
         };
     };

package/dist/stories/slim/SlimInput.stories.d.ts

@@ -11,7 +11,7 @@ declare const meta: {
     };
     argTypes: {
         type: {
-            control: "select";
+            control: string;
             options: string[];
         };
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slimkhemiri/react-design-system",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "type": "module",
   "main": "dist/index.js",
@@ -21,13 +21,18 @@
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "clean": "node ./scripts/clean.mjs",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "storybook": "pnpm --filter @slim-ds/tokens build && pnpm --filter @slimkhemiri/web-components build && storybook dev -p 6006",
+    "build-storybook": "pnpm --filter @slim-ds/tokens build && pnpm --filter @slimkhemiri/web-components build && storybook build",
+    "prepack": "npm run build"
   },
   "dependencies": {
-    "@slimkhemiri/web-components": "^0.1.1",
-    "@stencil/react-output-target": "^0.8.2",
-    "react": "^18.3.1"
+    "@slimkhemiri/web-components": "workspace:*",
+    "@stencil/react-output-target": "^0.8.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.1",
@@ -42,6 +47,7 @@
     "@vitest/coverage-v8": "^4.0.18",
     "chromatic": "^15.0.0",
     "playwright": "^1.58.2",
+    "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "storybook": "^10.2.7",
     "typescript": "^5.5.4",