Skip to content

Commit b47e8b4

Browse files
ptrubyptruby
committed
initial commit
0 parents  commit b47e8b4

File tree

116 files changed

+12261
-0
lines changed

Some content is hidden

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

116 files changed

+12261
-0
lines changed

‎.github/workflows/lint.yml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
name: Lint
2+
3+
on:
4+
workflow_dispatch:
5+
push:
6+
branches:
7+
- main
8+
pull_request:
9+
branches:
10+
- "*"
11+
12+
jobs:
13+
lint:
14+
runs-on: ubuntu-latest
15+
steps:
16+
- name: Checkout code
17+
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
18+
- name: Set up Node.js
19+
uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4
20+
with:
21+
node-version: '20.x'
22+
cache: 'yarn'
23+
- name: Install deps
24+
run: yarn install --frozen-lockfile
25+
- name: Run lint
26+
run: yarn lint
27+
- name: Run formatter check
28+
run: |
29+
yarn run --silent format-check || ( \
30+
echo "Run this command on your local device to fix the error:" && \
31+
echo "" && \
32+
echo " yarn run format" && \
33+
echo "" && exit 1)

‎.github/workflows/publish.yml‎

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

‎.gitignore‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
node_modules
2+
.env
3+
.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/

‎.prettierignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
dist
2+
yarn.lock
3+
package.json

‎.storybook/main.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
"@storybook/addon-designs",
16+
],
17+
staticDirs: ['../src/assets'],
18+
"framework": {
19+
"name": "@storybook/react-vite",
20+
"options": {}
21+
},
22+
async viteFinal(config) {
23+
config.plugins = [...(config.plugins || []), tsconfigPaths()];
24+
return config;
25+
},
26+
};
27+
export default config;

‎.storybook/preview.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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+
tags: ['autodocs'],
14+
};
15+
16+
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]);

‎LICENSE‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
BSD 3-Clause License
2+
3+
Copyright (c) 2020 Tailscale Inc & AUTHORS.
4+
5+
Redistribution and use in source and binary forms, with or without
6+
modification, are permitted provided that the following conditions are met:
7+
8+
1. Redistributions of source code must retain the above copyright notice, this
9+
list of conditions and the following disclaimer.
10+
11+
2. Redistributions in binary form must reproduce the above copyright notice,
12+
this list of conditions and the following disclaimer in the documentation
13+
and/or other materials provided with the distribution.
14+
15+
3. Neither the name of the copyright holder nor the names of its
16+
contributors may be used to endorse or promote products derived from
17+
this software without specific prior written permission.
18+
19+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
20+
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
21+
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
22+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
23+
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
24+
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
25+
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
26+
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
27+
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
28+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

‎README.md‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
# tailscale-ui-components
2+
3+
Tailscale UI component library used by Tailscale web 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+
```

0 commit comments

Comments
 (0)