Skip to content

Commit 1fce4b9

Browse files
ptrubyptruby
committed
new component repo effort, including Storybook support and new setup
Signed-off-by: Richard Castro <[email protected]>
1 parent 39607ea commit 1fce4b9

File tree

167 files changed

+14016
-3574
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

167 files changed

+14016
-3574
lines changed

‎.github/workflows/publish.yml‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
name: Publish to GitHub Packages
2+
3+
on:
4+
release:
5+
types: [created]
6+
workflow_dispatch:
7+
8+
jobs:
9+
publish:
10+
runs-on: ubuntu-latest
11+
permissions:
12+
contents: read
13+
packages: write
14+
steps:
15+
- uses: actions/checkout@v4
16+
- uses: actions/setup-node@v4
17+
with:
18+
node-version: '20.x'
19+
registry-url: 'https://npm.pkg.github.com'
20+
scope: '@tailscale'
21+
22+
- name: Install dependencies
23+
run: yarn install --frozen-lockfile
24+
25+
- name: Build package
26+
run: yarn build
27+
28+
- name: Publish package
29+
run: yarn publish
30+
env:
31+
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

‎.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,8 @@
11
node_modules
2+
.env
23
.DS_Store
4+
dist
5+
storybook-static
6+
tsconfig.tsbuildinfo
7+
8+
*storybook.log

‎.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@tailscale:registry=https://npm.pkg.github.com/

‎.storybook/main.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import type { StorybookConfig } from '@storybook/react-vite';
2+
import tsconfigPaths from 'vite-tsconfig-paths';
3+
4+
const config: StorybookConfig = {
5+
"stories": [
6+
'../src/**/*.mdx',
7+
'../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'
8+
],
9+
"addons": [
10+
"@chromatic-com/storybook",
11+
"@storybook/addon-docs",
12+
"@storybook/addon-onboarding",
13+
"@storybook/addon-a11y",
14+
"@storybook/addon-vitest"
15+
],
16+
staticDirs: ['../src/assets'],
17+
"framework": {
18+
"name": "@storybook/react-vite",
19+
"options": {}
20+
},
21+
async viteFinal(config) {
22+
config.plugins = [...(config.plugins || []), tsconfigPaths()];
23+
return config;
24+
},
25+
};
26+
export default config;

‎.storybook/preview.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import type { Preview } from "@storybook/react";
2+
import '../src/tailwind.css';
3+
4+
const preview: Preview = {
5+
parameters: {
6+
controls: {
7+
matchers: {
8+
color: /(background|color)$/i,
9+
date: /Date$/i,
10+
},
11+
},
12+
},
13+
};
14+
15+
export default preview;

‎.storybook/vitest.setup.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
2+
import { setProjectAnnotations } from '@storybook/react-vite';
3+
import * as projectAnnotations from './preview';
4+
5+
// This is an important step to apply the right configuration when testing your stories.
6+
// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
7+
setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

‎README.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,105 @@
11
# tailscale-ui-components
22

33
Tailscale UI component library used by tailscale/corp/adminhttp/panel and tailscale/tailscale/client/web React projects. Not maintained for external use.
4+
5+
## Development Setup
6+
7+
### Prerequisites
8+
9+
Ensure you have the following tools installed:
10+
11+
- **Node.js 22.14.0** (use `nvm` to manage Node versions)
12+
```bash
13+
nvm use 22.14.0
14+
```
15+
- **Yarn 1.22.19** (package manager)
16+
```bash
17+
npm install -g [email protected]
18+
```
19+
20+
### Getting Started
21+
22+
1. **Clone the repository**
23+
```bash
24+
git clone https://github.com/tailscale/tailscale-ui-components.git
25+
cd tailscale-ui-components
26+
```
27+
28+
2. **Install dependencies**
29+
```bash
30+
yarn install
31+
```
32+
33+
3. **Start Storybook for development**
34+
```bash
35+
yarn storybook
36+
```
37+
This will start Storybook on `http://localhost:6006` (or the next available port)
38+
39+
### Available Scripts
40+
41+
- `yarn storybook` - Start Storybook development server
42+
- `yarn build-storybook` - Build Storybook for production
43+
- `yarn build` - Build the component library for production
44+
- `yarn test` - Run tests with Vitest
45+
46+
### Environment Compatibility
47+
48+
This project has been tested and works with:
49+
- **Node.js 22.14.0** (recommended for team consistency)
50+
51+
### Package Management
52+
53+
This project uses **Yarn v1** as the package manager. The `yarn.lock` file should be committed, and `package-lock.json` should be ignored/removed if present.
54+
55+
### Component Development
56+
57+
Components are located in `src/components/` and follow these patterns:
58+
59+
1. **OSS-ready structure** with proper style mappings
60+
2. **Comprehensive TypeScript types** and exported constants
61+
3. **Accessibility features** with proper ARIA attributes
62+
4. **Storybook stories** for documentation and testing
63+
64+
Example component structure:
65+
```
66+
src/components/button/
67+
├── button.tsx # Main component
68+
├── button.stories.tsx # Storybook stories
69+
```
70+
71+
### Styling Guidelines
72+
73+
- Use the `.button`, `.input`, and other base CSS classes from `src/tailwind.css`
74+
- Follow the established design tokens and color system
75+
- Ensure components have rounded corners and consistent spacing
76+
- Support both light and dark themes
77+
78+
### Contributing
79+
80+
**Branch Workflow:**
81+
82+
There are many components and stories for those components already ported over from corp to this UI library. They live in the **staging branch**. When making updates to components, adding stories, etc., please submit the PR towards that staging branch. **Main will only contain components that we're actively using in corp and other repos**.
83+
84+
When adding or modifying components:
85+
86+
1. Ensure TypeScript strict mode compliance
87+
2. Add comprehensive Storybook stories
88+
3. Include proper accessibility attributes
89+
4. Follow the established component patterns
90+
5. Export components from `src/index.ts`
91+
92+
### Troubleshooting
93+
94+
**Node.js Version Issues:**
95+
If you encounter build errors, ensure you're using Node.js 22.14.0:
96+
```bash
97+
node --version # Should output v22.14.0
98+
```
99+
100+
**Package Manager Issues:**
101+
If dependencies fail to install, try:
102+
```bash
103+
rm -rf node_modules yarn.lock
104+
yarn install
105+
```

‎index.ts‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎package.json‎

Lines changed: 65 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,75 @@
11
{
2-
"name": "tailscale-ui-components",
3-
"version": "0.0.1",
4-
"license": "BSD-3-Clause",
5-
"engines": {
6-
"node": "18.16.1",
7-
"yarn": "1.22.19"
2+
"name": "@tailscale/tailscale-ui-components",
3+
"version": "0.0.3",
4+
"author": "Tailscale",
5+
"license": "MIT",
6+
"main": "dist/tailscale-ui-components.umd.js",
7+
"module": "dist/tailscale-ui-components.es.js",
8+
"types": "dist/index.d.ts",
9+
"type": "module",
10+
"files": [
11+
"dist"
12+
],
13+
"exports": {
14+
".": {
15+
"types": "./dist/index.d.ts",
16+
"import": "./dist/tailscale-ui-components.es.js",
17+
"require": "./dist/tailscale-ui-components.umd.js"
18+
}
19+
},
20+
"publishConfig": {
21+
"registry": "https://npm.pkg.github.com"
822
},
9-
"private": true,
10-
"main": "index.ts",
1123
"peerDependencies": {
12-
"classnames": "^2.3.1",
13-
"react": "^18.2.0"
24+
"react": "^18.2.0",
25+
"react-dom": "^18.2.0"
26+
},
27+
"dependencies": {
28+
"@radix-ui/react-checkbox": "^1.3.2",
29+
"@radix-ui/react-collapsible": "^1.1.11",
30+
"@radix-ui/react-dialog": "^1.1.14",
31+
"@radix-ui/react-dropdown-menu": "^2.1.15",
32+
"@radix-ui/react-hover-card": "^1.1.14",
33+
"@radix-ui/react-popover": "^1.1.14",
34+
"@radix-ui/react-select": "^2.2.5",
35+
"@radix-ui/react-tabs": "^1.1.12",
36+
"@radix-ui/react-toggle-group": "^1.1.10",
37+
"@radix-ui/react-tooltip": "^1.2.7",
38+
"classnames": "^2.5.1",
39+
"date-fns": "^4.1.0",
40+
"date-fns-tz": "^2.0.1",
41+
"downshift": "^9.0.10",
42+
"lucide-react": "^0.536.0"
1443
},
1544
"devDependencies": {
16-
"@types/react": "18.0.20",
17-
"classnames": "^2.3.1",
18-
"eslint": "^8.23.1",
19-
"eslint-config-react-app": "^7.0.1",
20-
"prettier": "^2.5.1",
21-
"prettier-plugin-organize-imports": "^3.2.2",
45+
"@chromatic-com/storybook": "^4.1.0",
46+
"@storybook/addon-a11y": "^9.1.1",
47+
"@storybook/addon-docs": "^9.1.1",
48+
"@storybook/addon-onboarding": "^9.1.1",
49+
"@storybook/addon-vitest": "^9.1.1",
50+
"@storybook/react-vite": "^9.1.1",
51+
"@types/node": "^24.2.0",
52+
"@types/react": "^18.2.0",
53+
"@types/react-dom": "^18.2.0",
54+
"@vitejs/plugin-react-swc": "^3.11.0",
55+
"@vitest/browser": "^3.2.4",
56+
"@vitest/coverage-v8": "^3.2.4",
57+
"autoprefixer": "^10.4.21",
58+
"playwright": "^1.54.2",
59+
"postcss": "^8.5.6",
2260
"react": "^18.2.0",
23-
"tailwindcss": "^3.3.3",
24-
"typescript": "^4.7.4",
25-
"vitest": "^0.32.0"
61+
"react-dom": "^18.2.0",
62+
"storybook": "^9.1.1",
63+
"tailwindcss": "^3.4.0",
64+
"typescript": "^5.9.2",
65+
"vite": "^7.0.6",
66+
"vite-plugin-svgr": "^4.3.0",
67+
"vite-tsconfig-paths": "^5.1.4",
68+
"vitest": "^3.2.4"
2669
},
2770
"scripts": {
28-
"lint": "tsc --noEmit && eslint 'src/**/*.{ts,tsx,js,jsx}'",
29-
"test": "vitest",
30-
"format": "prettier --write 'src/**/*.{ts,tsx}'",
31-
"format-check": "prettier --check 'src/**/*.{ts,tsx}'"
32-
},
33-
"eslintConfig": {
34-
"extends": [
35-
"react-app"
36-
],
37-
"plugins": [
38-
"react-hooks"
39-
],
40-
"rules": {
41-
"react-hooks/rules-of-hooks": "error",
42-
"react-hooks/exhaustive-deps": "error"
43-
},
44-
"settings": {
45-
"projectRoot": "package.json"
46-
}
47-
},
48-
"prettier": {
49-
"semi": false,
50-
"printWidth": 80
71+
"build": "vite build && tsc --emitDeclarationOnly",
72+
"storybook": "storybook dev -p 6006",
73+
"build-storybook": "storybook build"
5174
}
5275
}

‎postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};

0 commit comments

Comments
 (0)