Initial release preparation

.github/workflows/lint.yml

@@ -0,0 +1,33 @@
+name: Lint
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - "*"
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - name: Set up Node.js
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4
+        with:
+          node-version: '20.x'
+          cache: 'yarn'
+      - name: Install deps
+        run: yarn install --frozen-lockfile
+      - name: Run lint
+        run: yarn lint
+      - name: Run formatter check
+        run: |
+          yarn run --silent format-check || ( \
+            echo "Run this command on your local device to fix the error:" && \
+            echo "" && \
+            echo "  yarn run format" && \
+            echo "" && exit 1)

.github/workflows/publish.yml

@@ -4,6 +4,9 @@ on:
   release:
     types: [created]
   workflow_dispatch:
+  push:
+    branches:
+      - main
 
 jobs:
   publish:
@@ -12,14 +15,14 @@ jobs:
       contents: read
       packages: write
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/setup-node@8f152de45cc393bb48ceea73d27597364c9af683 # v4
         with:
           node-version: '20.x'
           registry-url: 'https://npm.pkg.github.com'
           scope: '@tailscale'
 
-      - name: Install dependencies
+      - name: Install deps
         run: yarn install --frozen-lockfile
 
       - name: Build package

.prettierignore

@@ -0,0 +1,3 @@
+dist
+yarn.lock
+package.json

.storybook/main.ts

@@ -11,7 +11,8 @@ const config: StorybookConfig = {
     "@storybook/addon-docs",
     "@storybook/addon-onboarding",
     "@storybook/addon-a11y",
-    "@storybook/addon-vitest"
+    "@storybook/addon-vitest",
+    "@storybook/addon-designs",
   ],
   staticDirs: ['../src/assets'],
   "framework": {

.storybook/preview.ts

@@ -10,6 +10,7 @@ const preview: Preview = {
       },
     },
   },
+  tags: ['autodocs'],
 };
 
 export default preview;

package.json

@@ -1,20 +1,26 @@
 {
   "name": "@tailscale/tailscale-ui-components",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "author": "Tailscale",
   "license": "BSD-3-Clause",
   "main": "dist/tailscale-ui-components.umd.js",
   "module": "dist/tailscale-ui-components.es.js",
   "types": "dist/index.d.ts",
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "tailwind.preset.js"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/tailscale-ui-components.es.js",
       "require": "./dist/tailscale-ui-components.umd.js"
+    },
+    "./tailwind.preset": {
+      "import": "./tailwind.preset.cjs",
+      "require": "./tailwind.preset.cjs",
+      "default": "./tailwind.preset.cjs"
     }
   },
   "publishConfig": {
@@ -33,10 +39,11 @@
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
     "classnames": "^2.5.1",
-    "date-fns": "^4.1.0",
+    "date-fns": "^2.28.0",
     "date-fns-tz": "^2.0.1",
     "downshift": "^9.0.10",
     "lucide-react": "^0.536.0"
@@ -51,12 +58,20 @@
     "@types/node": "^24.2.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
     "@vitejs/plugin-react-swc": "^3.11.0",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "autoprefixer": "^10.4.21",
+    "eslint": "^8.23.1",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-curly-quotes": "^1.0.4",
+    "eslint-plugin-unicorn": "^41.0.0",
     "playwright": "^1.54.2",
     "postcss": "^8.5.6",
+    "prettier": "^2.5.1",
+    "prettier-plugin-organize-imports": "^3.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^9.1.1",
@@ -70,6 +85,73 @@
   "scripts": {
     "build": "vite build && tsc --emitDeclarationOnly",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "format": "prettier --write 'src/**/*.{ts,tsx}'",
+    "format-check": "prettier --check 'src/**/*.{ts,tsx}'",
+    "lint": "tsc --noEmit && eslint 'src/**/*.{ts,tsx,js,jsx}' --fix --max-warnings=0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "plugin:unicorn/recommended"
+    ],
+    "plugins": [
+      "curly-quotes",
+      "react-hooks"
+    ],
+    "rules": {
+      "unicorn/catch-error-name": "off",
+      "unicorn/consistent-function-scoping": "off",
+      "unicorn/consistent-destructuring": "off",
+      "unicorn/expiring-todo-comments": "off",
+      "unicorn/prefer-json-parse-buffer": "off",
+      "unicorn/prefer-object-from-entries": "off",
+      "unicorn/prefer-spread": "off",
+      "unicorn/prevent-abbreviations": "off",
+      "unicorn/no-array-callback-reference": "off",
+      "unicorn/no-array-for-each": "off",
+      "unicorn/no-array-reduce": "off",
+      "unicorn/no-nested-ternary": "off",
+      "unicorn/no-null": "off",
+      "unicorn/no-useless-undefined": [
+        "error",
+        {
+          "checkArguments": false
+        }
+      ],
+      "unicorn/numeric-separators-style": "off",
+      "curly-quotes/no-straight-quotes": "warn",
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "error",
+      "@typescript-eslint/no-restricted-imports": [
+        "error",
+        {
+          "paths": [
+            {
+              "name": "lucide-react",
+              "message": "Use `src/ui/icons` instead of `lucide-react`"
+            }
+          ]
+        }
+      ],
+      "no-restricted-imports": [
+        "error",
+        {
+          "paths": [
+            {
+              "name": "lucide-react",
+              "importNames": [
+                "*"
+              ],
+              "message": "Please import only the specific icons you need from 'lucide-react' to enable tree-shaking."
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "prettier": {
+    "semi": false,
+    "printWidth": 80
   }
 }