@k8slens/lds 0.57.0 → 0.58.0

package/llms.txt

@@ -0,0 +1,372 @@
+# @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>
+```
+
+### Table
+
+A composable data table with responsive layout, sorting indicators, and row states. Uses dot notation API for sub-components.
+
+```tsx
+import { Table } from "@k8slens/lds";
+
+<Table responsive bordered={false}>
+  <Table.Caption visibility="sr-only">User data</Table.Caption>
+  <Table.Head>
+    <Table.Row>
+      <Table.HeaderCell sortable sorted="asc">Name</Table.HeaderCell>
+      <Table.HeaderCell align="end">Count</Table.HeaderCell>
+    </Table.Row>
+  </Table.Head>
+  <Table.Body loading={false}>
+    <Table.Row error={false}>
+      <Table.Cell primary responsiveHeader="Name">John</Table.Cell>
+      <Table.Cell align="end" textStyle="accent">42</Table.Cell>
+    </Table.Row>
+    <Table.StatusRow colSpan={2}>No data available</Table.StatusRow>
+  </Table.Body>
+</Table>
+```
+
+**Table Props:**
+- `responsive` (default: true) - Enables responsive layout on mobile
+- `bordered` (default: false) - Adds inner row borders
+
+**TableCaption Props:**
+- `visibility` (default: "sr-only") - "visible", "sr-only", or "hidden"
+
+**TableBody Props:**
+- `loading` (default: false) - Indicates loading state, sets `aria-busy` when true
+
+**TableRow Props:**
+- `error` (default: false) - Shows error flash animation
+
+**TableHeaderCell Props:**
+- `align` - "start", "center", or "end"
+- `sortable` (default: false) - Indicates column is sortable
+- `sorted` (default: false) - "asc", "desc", or false. When `sortable` is true, a sort direction icon is always visible. The icon appears at reduced opacity when the column is not the active sort column. When actively sorted, the icon shows full opacity with direction (up for asc, down for desc)
+
+**TableCell Props:**
+- `primary` (default: false) - Renders as `<th scope="row">`
+- `align` - "start", "center", or "end"
+- `textStyle` - "default", "accent", "secondary", "tertiary", or "quarternary"
+- `responsiveHeader` - Label shown on mobile viewports
+
+**TableStatusRow Props:**
+- `colSpan` (required) - Number of columns to span
+- Extends `HTMLAttributes<HTMLTableRowElement>`
+
+### 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.57.0",
+  "version": "0.58.0",
   "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.58.0",
+    "@k8slens/lds-tokens": "^0.59.0",
     "@storybook/react": "6.5.16",
     "@testing-library/react": "14.0.0",
     "@types/randomcolor": "0.5.9",
@@ -63,5 +64,5 @@
       "\\.svg": "<rootDir>/../../__mocks__/SVGStub.js"
     }
   },
-  "gitHead": "dc375594fe63bf08745b6cfa09c4dc8437a4dc03"
+  "gitHead": "e41693e45edd36a94e34ab286d4ededba24f5daf"
 }