@k8slens/lds 0.56.0 → 0.57.2

package/llms.txt

@@ -0,0 +1,319 @@
+# @k8slens/lds
+
+> Lens Design System - A React component library providing accessible, themeable UI components for building Kubernetes management applications.
+
+This package provides a comprehensive set of React components styled with CSS modules and powered by @k8slens/lds-tokens for consistent theming. Components support both light and dark themes and are designed with accessibility in mind.
+
+## Installation
+
+```bash
+npm install @k8slens/lds
+```
+
+### Peer Dependencies
+
+The following peer dependencies are required:
+
+```bash
+npm install @headlessui/react @k8slens/lds-icons @popperjs/core clsx initialism randomcolor react react-dom react-popper rooks
+```
+
+Required peer dependencies:
+- `@headlessui/react` ^2.2.0
+- `@k8slens/lds-icons` *
+- `@popperjs/core` ^2.11.6
+- `clsx` ^1.2.1
+- `initialism` ^1.0.4
+- `randomcolor` ^0.6.2
+- `react` ^18.2.0
+- `react-dom` ^18.2.0
+- `react-popper` ^2.3.0
+- `rooks` ^7.4.3
+
+## 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/lib/es/typography.css";
+```
+
+## Importing Components
+
+All components are exported from the package root:
+
+```typescript
+import { Button, Input, Modal, Select, Avatar, Badge } from "@k8slens/lds";
+```
+
+## TypeScript Types
+
+TypeScript definitions are included and exported from `lib/es/index.d.ts`. Component prop types are exported alongside components:
+
+```typescript
+import { Button, ButtonProps } from "@k8slens/lds";
+import { Select, SelectProps } from "@k8slens/lds";
+```
+
+## Module Formats
+
+- ES Modules: `lib/es/index.js` (recommended)
+- CommonJS: `lib/cjs/index.js`
+
+## Components
+
+### Avatar
+
+Displays user's profile picture or initials with random background color.
+
+```tsx
+import { Avatar } from "@k8slens/lds";
+
+<Avatar name="John Doe" image="avatar.jpg" />
+```
+
+### Badge
+
+A small status indicator dot. Use `type` prop for semantic colors.
+
+```tsx
+import { Badge } from "@k8slens/lds";
+
+<Badge type="success" title="Active" />
+```
+
+### Button
+
+Accessible button with loading state and icon support.
+
+```tsx
+import { Button } from "@k8slens/lds";
+
+<Button label="Click me" type="primary" onClick={handleClick} />
+```
+
+### ButtonBar
+
+Container for button groups with layout control.
+
+```tsx
+import { ButtonBar } from "@k8slens/lds";
+
+<ButtonBar type="default">
+  <Button label="Cancel" />
+  <Button label="Submit" type="primary" />
+</ButtonBar>
+```
+
+### Checkbox
+
+A styled checkbox input with checkmark icon.
+
+```tsx
+import { Checkbox } from "@k8slens/lds";
+
+<Checkbox value={checked} onChange={setChecked} />
+```
+
+### ConfirmDialog
+
+A modal dialog that asks the user to confirm an action. Use with `useConfirmDialog` hook.
+
+```tsx
+import { useConfirmDialog } from "@k8slens/lds";
+
+const { ConfirmDialog, confirm } = useConfirmDialog();
+return (
+  <>
+    <Button onClick={() => confirm("Delete?", "This cannot be undone.")} />
+    {ConfirmDialog}
+  </>
+);
+```
+
+### Input
+
+A text input with optional icon.
+
+```tsx
+import { Input } from "@k8slens/lds";
+
+<Input type="text" placeholder="Enter text..." />
+```
+
+### LinkButton
+
+A text link with arrow icon for navigation actions.
+
+```tsx
+import { LinkButton } from "@k8slens/lds";
+
+<LinkButton label="Learn more" href="/docs" />
+```
+
+### LoadingIndicator
+
+A spinning loading indicator.
+
+```tsx
+import { LoadingIndicator } from "@k8slens/lds";
+
+<LoadingIndicator size="xl" />
+```
+
+### Lozenge
+
+A pill-shaped label for status or category display.
+
+```tsx
+import { Lozenge } from "@k8slens/lds";
+
+<Lozenge type="success">Active</Lozenge>
+```
+
+### Modal
+
+A responsive modal dialog with header, footer, and content areas.
+
+```tsx
+import { Modal } from "@k8slens/lds";
+
+<Modal isOpen={isOpen} onClose={close} title="Title" footer={<Button label="Close" />}>
+  Content
+</Modal>
+```
+
+### Notification
+
+Alert banner for user feedback. `type="flash"` auto-dismisses, `type="closable"` shows close button.
+
+```tsx
+import { Notification } from "@k8slens/lds";
+
+<Notification level="success" message="Saved successfully" />
+```
+
+### NumberBadge
+
+A numeric badge that formats large numbers (1500 → "1.5k").
+
+```tsx
+import { NumberBadge } from "@k8slens/lds";
+
+<NumberBadge value={42} title="Items" />
+```
+
+### Panel
+
+A container with optional header, footer, and loading state.
+
+```tsx
+import { Panel } from "@k8slens/lds";
+
+<Panel header={<h2>Title</h2>} loading={isLoading}>Content</Panel>
+```
+
+### ProfileBlock
+
+Displays user info with avatar, title, and subtitle.
+
+```tsx
+import { ProfileBlock } from "@k8slens/lds";
+
+<ProfileBlock item={{ title: "@user", subtitle: "Name", avatarTitle: "Name" }} />
+```
+
+### ProgressBar
+
+A progress bar with semantic color types. Value can be 0-1 or use custom `max`.
+
+```tsx
+import { ProgressBar } from "@k8slens/lds";
+
+<ProgressBar value={0.75} type="ok" />
+```
+
+### RadioCard
+
+Styled radio button cards for option selection.
+
+```tsx
+import { RadioCard } from "@k8slens/lds";
+
+<RadioCard name="choice" options={options} value={selected} onChange={setSelected} />
+```
+
+### Select
+
+A dropdown select component with single or multiple selection.
+
+```tsx
+import { Select } from "@k8slens/lds";
+
+<Select options={options} value={selected} onChange={setSelected} />
+```
+
+### SideNav
+
+Side navigation container. Use with SideNavGroup and SideNavItem.
+
+```tsx
+import { SideNav, SideNavGroup, SideNavItem } from "@k8slens/lds";
+
+<SideNav>
+  <SideNavGroup label="Section">
+    <SideNavItem href="/page1">Page 1</SideNavItem>
+  </SideNavGroup>
+</SideNav>
+```
+
+### Switch
+
+A toggle switch input with label support.
+
+```tsx
+import { Switch } from "@k8slens/lds";
+
+<Switch checked={enabled} onChange={setEnabled}>Enable feature</Switch>
+```
+
+### Tooltip
+
+Shows contextual information on hover/focus.
+
+```tsx
+import { Tooltip } from "@k8slens/lds";
+
+<Tooltip text="Helpful info"><span>Hover me</span></Tooltip>
+```
+
+### UserMenu
+
+Displays user info with dropdown menu for account actions. Uses default menu items if `items` prop is not provided.
+
+```tsx
+import { UserMenu } from "@k8slens/lds";
+
+<UserMenu user={{ name: "John", username: "john" }} onLogoutClick={logout} />
+```
+
+## Theming
+
+Components are styled using CSS modules with CSS custom properties from @k8slens/lds-tokens. Import the tokens CSS to enable theming:
+
+```css
+@import '@k8slens/lds-tokens/lib/web/tokens.core.css';
+@import '@k8slens/lds-tokens/lib/web/tokens.dark.css';
+/* or tokens.light.css for light theme */
+```
+
+## Documentation
+
+- [Lens Design System Storybook](https://lens-design-system.k8slens.dev/)
+
+## Optional
+
+- [npm Package](https://www.npmjs.com/package/@k8slens/lds)
+- [Source Code](https://github.com/lensapp/lens-design-system)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8slens/lds",
-  "version": "0.56.0",
+  "version": "0.57.2",
   "description": "Lens Design System – Core React Component Library",
   "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,11 +25,11 @@
     "rollup": "rollup -c",
     "clean": "rimraf lib",
     "test": "jest",
-    "lint": "eslint .",
-    "format": "eslint --fix ."
+    "lint": "oxlint .",
+    "format": "oxlint --fix . && prettier --write ."
   },
   "devDependencies": {
-    "@k8slens/lds-tokens": "^0.57.0",
+    "@k8slens/lds-tokens": "^0.58.2",
     "@storybook/react": "6.5.16",
     "@testing-library/react": "14.0.0",
     "@types/randomcolor": "0.5.9",
@@ -37,11 +38,11 @@
     "typescript": "4.8.4"
   },
   "peerDependencies": {
-    "@headlessui/react": "^1.7.14",
+    "@headlessui/react": "^2.2.0",
     "@k8slens/lds-icons": "*",
     "@popperjs/core": "^2.11.6",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.1",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "clsx": "^1.2.1",
     "initialism": "^1.0.4",
     "randomcolor": "^0.6.2",
@@ -52,6 +53,9 @@
   },
   "jest": {
     "testEnvironment": "jsdom",
+    "setupFilesAfterEnv": [
+      "<rootDir>/../../jest.setup.js"
+    ],
     "transform": {
       "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
     },
@@ -60,5 +64,5 @@
       "\\.svg": "<rootDir>/../../__mocks__/SVGStub.js"
     }
   },
-  "gitHead": "9cbede843e83a36f06e73d8e6f46a8b4235810ae"
+  "gitHead": "1edf9b6761a700920be41adb01f3de528320f639"
 }