@k8slens/lds-tips 0.47.0 → 0.48.0

package/README.md

@@ -1,14 +1,22 @@
-# Lens Design System – React Tips component
+# @k8slens/lds-tips
 
-## Documentation
-Browse the documentation at [lens-design-system.k8slens.dev](https://lens-design-system.k8slens.dev/?path=/docs/tips).
+Tips/tour component for the Lens Design System – display contextual hints and guided tours.
+
+## Installation
+
+```bash
+npm install @k8slens/lds-tips @k8slens/lds @k8slens/lds-tokens
+```
 
-## Usage in React apps
-- run `npm i -s @k8slens/lds @k8slens/lds-tokens @k8slens/lds-tips`
-- import `@k8slens/lds-tokens/lib/es/font-imports.css` in your React app to include fonts
-- import `@k8slens/lds/lib/es/index.css` in your React app to include core styles
-- import `@k8slens/lds-tips/lib/es/index.css` in your React app to include Tips styles
-- Use in a component:
+## Setup
+
+```tsx
+import "@k8slens/lds-tokens/lib/electron/font-face.css";
+import "@k8slens/lds/lib/es/index.css";
+import "@k8slens/lds-tips/lib/es/index.css";
+```
+
+## Usage
 
 ```tsx
 import { Tips } from "@k8slens/lds-tips";
@@ -29,11 +37,12 @@ export const Component = () => (
 ## Example using MobX
 
 ### Tours
+
 ```tsx
 // tours.ts
 import type { Tour } from "@k8slens/lds-tips/lib/es/Tips/Tips";
 
-export default const tours: Array<Tour> = [
+const tours: Array<Tour> = [
   {
     id: "tour-1",
     steps: [
@@ -60,14 +69,17 @@ export default const tours: Array<Tour> = [
         ),
       },
     ],
-  }
-]
+  },
+];
+
+export default tours;
 ```
 
 ### TipStore
+
 ```ts
 // tips-store.ts
-import { action, makeObservable, observable, toJS } from "mobx";
+import { action, makeObservable, observable } from "mobx";
 
 import type { Tour, TipsProps } from "@k8slens/lds-tips/lib/es/Tips/Tips";
 
@@ -84,13 +96,11 @@ export class TipStore {
   @observable
   store: TipStoreModel = {
     skipAll: false,
-    activeSteps: {}
+    activeSteps: {},
   };
   tours: Array<Tour> = tours;
 
   constructor() {
-    super();
-
     makeObservable(this);
   }
 
@@ -104,11 +114,11 @@ export class TipStore {
     let nextStep = 1;
     if (typeof this.store.activeSteps[tourId] === "number") {
       nextStep += this.store.activeSteps[tourId];
-    };
+    }
 
     this.store.activeSteps = {
       ...this.store.activeSteps,
-      [tourId]: nextStep
+      [tourId]: nextStep,
     };
 
     return nextStep;
@@ -121,6 +131,7 @@ export class TipStore {
 ```
 
 ### Component
+
 ```tsx
 // Component.tsx
 import React from "react";
@@ -135,7 +146,6 @@ interface Props {
 }
 
 export const Component = observer(({ tipStore }: Props) => {
-
   if (!tipStore) {
     return null;
   }
@@ -150,4 +160,18 @@ export const Component = observer(({ tipStore }: Props) => {
     />
   );
 });
-```
+```
+
+## Documentation
+
+Browse examples at [lens-design-system.k8slens.dev](https://lens-design-system.k8slens.dev/?path=/docs/tips).
+
+## AI Assistance
+
+This package includes an `llms.txt` file with API documentation optimized for LLMs. Add to your project's AI configuration (e.g., `AGENTS.md` or `CLAUDE.md`):
+
+```markdown
+Read node_modules/@k8slens/lds-tips/llms.txt for tips/tours API reference.
+
+Use the LDS Tips component instead of custom tooltip implementations.
+```

package/llms.txt

@@ -0,0 +1,81 @@
+# @k8slens/lds-tips
+
+> Tips component for the Lens Design System - displays contextual hints and guidance.
+
+## Installation
+
+```bash
+npm install @k8slens/lds-tips @k8slens/lds-tokens
+```
+
+### Peer Dependencies
+
+```bash
+npm install react react-dom clsx @popperjs/core react-popper rooks lodash
+```
+
+## Setup
+
+Import required styles in your app entry point:
+
+```tsx
+import "@k8slens/lds-tokens/lib/electron/font-face.css";
+import "@k8slens/lds/lib/es/index.css";
+import "@k8slens/lds-tips/lib/es/index.css";
+```
+
+## Components
+
+### Tips
+
+Container component that renders tips for guided tours. Requires a store to track step progress.
+
+```tsx
+import { Tips } from "@k8slens/lds-tips";
+import type { Tour } from "@k8slens/lds-tips/lib/es/Tips/Tips";
+
+const tours: Tour[] = [{
+  id: "tour-1",
+  steps: [{
+    id: "step-1",
+    selector: "#target-element",
+    content: <><h3>Welcome</h3><p>Click here to start.</p></>,
+  }],
+}];
+
+<Tips
+  tours={tours}
+  setNextStepNumber={(tourId) => /* increment step */}
+  getActiveStep={(tourId) => /* return current step */}
+  setSkipAll={() => /* mark all skipped */}
+  skipped={false}
+/>
+```
+
+### Tip
+
+Low-level tip popup component positioned relative to a target element.
+
+```tsx
+import { Tip } from "@k8slens/lds-tips";
+
+<Tip
+  target={document.getElementById("target")}
+  onDoneClick={() => /* advance to next */}
+  onSkipAllClick={() => /* skip all tips */}
+>
+  Tip content here
+</Tip>
+```
+
+## Dependencies
+
+This package depends on `@k8slens/lds` core components.
+
+## Documentation
+
+- [Lens Design System](https://lens-design-system.k8slens.dev/)
+
+## Optional
+
+- [npm Package](https://www.npmjs.com/package/@k8slens/lds-tips)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8slens/lds-tips",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "description": "Lens Design System – React Tips component",
   "author": "Mirantis Inc",
   "license": "MIT",
@@ -15,7 +15,8 @@
   "types": "./lib/es/index.d.ts",
   "type": "module",
   "files": [
-    "lib/"
+    "lib/",
+    "llms.txt"
   ],
   "scripts": {
     "start": "npm run rollup-watch",
@@ -24,15 +25,15 @@
     "rollup": "rollup -c",
     "clean": "rimraf lib",
     "test": "jest",
-    "lint": "eslint .",
-    "format": "eslint --fix ."
+    "lint": "oxlint .",
+    "format": "oxlint --fix . && prettier --write ."
   },
   "dependencies": {
-    "@k8slens/lds": "^0.57.0"
+    "@k8slens/lds": "^0.58.0"
   },
   "devDependencies": {
-    "@k8slens/lds-icons": "^0.55.0",
-    "@k8slens/lds-tokens": "^0.58.0",
+    "@k8slens/lds-icons": "^0.56.0",
+    "@k8slens/lds-tokens": "^0.59.0",
     "@rollup/plugin-node-resolve": "15.0.2",
     "@storybook/react": "6.5.16",
     "@testing-library/react": "14.0.0",
@@ -59,5 +60,5 @@
       "\\.svg": "<rootDir>/../../__mocks__/SVGStub.js"
     }
   },
-  "gitHead": "dc375594fe63bf08745b6cfa09c4dc8437a4dc03"
+  "gitHead": "e41693e45edd36a94e34ab286d4ededba24f5daf"
 }