NRP-3193 Multiselect

.github/workflows/chromatic.yml

@@ -0,0 +1,53 @@
+name: Chromatic PR Preview
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+      contents: read
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Enable pnpm via corepack
+        uses: pnpm/action-setup@v6
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "pnpm"
+          cache-dependency-path: "pnpm-lock.yaml"
+
+      - run: pnpm i --frozen-lockfile
+
+      - name: Build Storybook
+        run: pnpm run build-storybook
+
+      - name: Run Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          storybookBuildDir: storybook-static
+          exitZeroOnChanges: true
+
+      - name: Post Storybook link as PR comment
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            await github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: `📚 **Storybook Preview**: ${{ steps.chromatic.outputs.storybookUrl }}`
+            })

.github/workflows/ci.yml

@@ -0,0 +1,24 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Enable pnpm via corepack
+        run: corepack enable pnpm
+
+      - run: pnpm i --frozen-lockfile
+      - run: pnpm run lint
+      - run: pnpm test

.gitignore

@@ -1,7 +1,9 @@
-node_modules
+.mypy_cache
+.vscode
 build
 dist
+node_modules
 storybook.log
 storybook-static
-.mypy_cache
-.vscode
+debug-storybook.log
+package-lock.json

.storybook/main.ts

@@ -1,5 +1,8 @@
 const config = {
-  stories: ["../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: [
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
 
   addons: [
     "@storybook/addon-links",
@@ -20,10 +23,9 @@ const config = {
   typescript: {
     reactDocgen: "react-docgen-typescript"
   },
-   previewBody: (body: any) => `
+  previewBody: (body: any) => `
     ${body}
-    ${
-       `<script
+    ${`<script
         src="syncTheme.js"
         type="application/javascript"
       ></script>`

eslint.config.js

@@ -6,6 +6,8 @@ import tsParser from "@typescript-eslint/parser";
 import importPlugin from "eslint-plugin-import";
 
 export default [{
+  ignores: ["**/*.test.ts", "**/*.test.tsx"],
+}, {
   files: ["**/*.ts", "**/*.tsx"],
   languageOptions: {
     parser: tsParser,

package.json

@@ -13,6 +13,8 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "rm -rf ./dist && rollup -c && storybook build && cp ./dist/src/utils/syncTheme.js ./storybook-static/syncTheme.js",
     "lint": "tsc && eslint src",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "check": "npx tsc -b",
     "build": "rm -rf ./dist && rollup -c && rm -rf ./dist/node_modules",
     "prepare": "husky"
@@ -36,7 +38,7 @@
     },
     "./tokens.css": "./dist/tokens.css"
   },
-  "types": "./dist/types/src/index.d.ts",
+  "types": "./dist/types/index.d.ts",
   "mode": "production",
   "repository": {
     "type": "git",
@@ -58,7 +60,10 @@
     "@storybook/addon-onboarding": "^10.3.5",
     "@storybook/react-vite": "^10.3.5",
     "@tailwindcss/typography": "^0.5.15",
-    "@types/react": "^18.3.28",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^18.3.29",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/parser": "^8.58.2",
     "@vitejs/plugin-react": "^4.3.4",
@@ -69,6 +74,7 @@
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-storybook": "10.3.5",
     "husky": "^9.1.7",
+    "jsdom": "^29.1.1",
     "postcss": "^8.4.32",
     "prop-types": "^15.8.1",
     "rollup": "^2.79.2",
@@ -81,7 +87,8 @@
     "semantic-release": "^24.2.5",
     "storybook": "^10.3.5",
     "typescript": "^6.0.2",
-    "vite": "^8.0.12"
+    "vite": "^8.0.12",
+    "vitest": "^4.1.7"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",

pnpm-workspace.yaml

@@ -1,7 +1,9 @@
 allowBuilds:
-  esbuild: true
+  esbuild: false
   unrs-resolver: false
 minimumReleaseAge: 20160 # 14  days
 minimumReleaseAgeStrict: true
 trustPolicy: no-downgrade
 trustPolicyIgnoreAfter: 43200 # 30 days, See https://pnpm.io/settings#trustpolicyignoreafter
+trustPolicyExclude:
+  - "tinyexec@1.2.2"

src/custom/multi-select/__snapshots__/multi-select.test.tsx.snap

@@ -0,0 +1,69 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MultiSelect > Props > should render as expected 1`] = `
+<div
+  class="flex flex-col gap-1.5 min-w-52 max-w-3xl w-full"
+>
+  <div
+    class=""
+  >
+    <div
+      class="flex items-center gap-1.5"
+    >
+      <label
+        class="text-sm font-medium leading-none text-muted-foreground"
+        for=":r0:"
+      >
+        Team Members
+      </label>
+    </div>
+  </div>
+  <div
+    class="w-full"
+  >
+    <button
+      aria-controls="radix-:r1:"
+      aria-describedby=":r0:-message"
+      aria-expanded="false"
+      aria-haspopup="dialog"
+      class="flex min-h-9 w-full items-center gap-2 rounded-md border bg-transparent px-3 py-1.5 text-sm shadow-sm ring-offset-background hover:bg-muted focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 border-input"
+      data-state="closed"
+      id=":r0:"
+      role="combobox"
+      type="button"
+    >
+      <div
+        class="flex-1 text-left text-muted-foreground"
+      >
+        Select members...
+      </div>
+      <div
+        class="ml-auto shrink-0"
+      >
+        <svg
+          class="lucide lucide-chevron-down h-4 w-4 opacity-50"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m6 9 6 6 6-6"
+          />
+        </svg>
+      </div>
+    </button>
+    <p
+      class="text-sm text-muted-foreground"
+      id=":r0:-message"
+    >
+      Choose one or more
+    </p>
+  </div>
+</div>
+`;

src/custom/multi-select/index.ts

@@ -0,0 +1,2 @@
+export { MultiSelect } from "./multi-select"
+export type { MultiSelectItem, MultiSelectProps } from "./types"

src/custom/multi-select/multi-select-label.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { Info } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../shadcn/ui/tooltip"
+import { cn } from "../../utils/cn"
+import type { MultiSelectLabelProps } from "./types"
+
+export const MultiSelectLabel = ({
+  htmlFor,
+  label,
+  tooltip,
+  position = "top",
+  icon: Icon,
+}: MultiSelectLabelProps) => {
+  return (
+    <div className={cn("flex items-center gap-1.5", position === "left" && "whitespace-nowrap")}>
+      {Icon && <Icon className="h-4 w-4 shrink-0" />}
+      <label htmlFor={htmlFor} className="text-sm font-medium leading-none text-muted-foreground">
+        {label}
+      </label>
+      {tooltip && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Info className="h-4 w-4 shrink-0 cursor-help text-muted-foreground" />
+          </TooltipTrigger>
+          <TooltipContent>{tooltip}</TooltipContent>
+        </Tooltip>
+      )}
+    </div>
+  )
+}

src/custom/multi-select/multi-select-list-item.tsx

@@ -0,0 +1,47 @@
+import { Checkbox } from "../../shadcn/ui/checkbox"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../shadcn/ui/tooltip"
+import { cn } from "../../utils/cn"
+
+import type { MultiSelectListItemProps } from "./types"
+
+export const MultiSelectListItem = ({
+  item,
+  isSelected,
+  isDisabled,
+  disabledTooltip,
+  renderItem,
+}: MultiSelectListItemProps) => {
+  const itemContent = (
+    <div className={cn("flex items-start gap-2 w-full", isDisabled && "opacity-50 cursor-not-allowed")}>
+      <Checkbox
+        checked={isSelected}
+        disabled={isDisabled}
+        className="mr-2 shrink-0 mt-0.5 pointer-events-none"
+      />
+
+      <div className="flex flex-wrap items-center gap-2 flex-1">
+        {renderItem ? (
+          renderItem(item)
+        ) : (
+          <>
+            {item.icon && <item.icon className="h-4 w-4 text-muted-foreground shrink-0" />}
+            <span className="text-sm leading-5">{item.label}</span>
+          </>
+        )}
+      </div>
+    </div>
+  )
+
+  if (isDisabled) {
+    return (
+      <TooltipProvider>
+        <Tooltip disableHoverableContent>
+          <TooltipTrigger asChild>{itemContent}</TooltipTrigger>
+          <TooltipContent align="start">{disabledTooltip}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    )
+  }
+
+  return itemContent
+}