Skip to content

Commit 6bec408

Browse files
CGoodwin90CGoodwin90
authored
Merge pull request #27 from uselagoon/feature/github-packages-ci
ci: publish package to github and add wrokflows
2 parents 70b6d01 + f5018fa commit 6bec408

File tree

6 files changed

+180
-43
lines changed

6 files changed

+180
-43
lines changed

‎.github/workflows/chromatic.yml‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
name: Chromatic
2+
3+
on:
4+
push:
5+
branches: [main]
6+
pull_request:
7+
branches: [main]
8+
9+
jobs:
10+
chromatic:
11+
runs-on: ubuntu-latest
12+
13+
steps:
14+
- name: Checkout
15+
uses: actions/checkout@v4
16+
with:
17+
fetch-depth: 0
18+
19+
- name: Setup Node.js
20+
uses: actions/setup-node@v4
21+
with:
22+
node-version: '20'
23+
cache: 'npm'
24+
25+
- name: Install dependencies
26+
run: npm ci
27+
28+
- name: Check for Chromatic token
29+
id: check-token
30+
run: |
31+
if [ -n "${{ secrets.CHROMATIC_PROJECT_TOKEN }}" ]; then
32+
echo "has_token=true" >> $GITHUB_OUTPUT
33+
else
34+
echo "has_token=false" >> $GITHUB_OUTPUT
35+
echo "::notice::Skipping Chromatic publish - CHROMATIC_PROJECT_TOKEN secret not set"
36+
fi
37+
38+
- name: Publish to Chromatic
39+
if: steps.check-token.outputs.has_token == 'true'
40+
uses: chromaui/action@latest
41+
with:
42+
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
43+
buildScriptName: build-storybook
44+
onlyChanged: true

‎.github/workflows/ci.yml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
name: CI
2+
3+
on:
4+
push:
5+
branches: [main]
6+
pull_request:
7+
branches: [main]
8+
9+
jobs:
10+
build:
11+
runs-on: ubuntu-latest
12+
13+
steps:
14+
- name: Checkout
15+
uses: actions/checkout@v4
16+
17+
- name: Setup Node.js
18+
uses: actions/setup-node@v4
19+
with:
20+
node-version: '20'
21+
cache: 'npm'
22+
23+
- name: Install dependencies
24+
run: npm ci
25+
26+
- name: Run type check
27+
run: npm run typecheck
28+
29+
- name: Build package
30+
run: npm run build
31+
32+
- name: Build Storybook
33+
run: npm run build-storybook

‎.github/workflows/publish.yml‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
name: Publish Package
2+
3+
on:
4+
release:
5+
types: [published]
6+
7+
permissions:
8+
contents: read
9+
10+
jobs:
11+
publish:
12+
runs-on: ubuntu-latest
13+
14+
steps:
15+
- name: Checkout
16+
uses: actions/checkout@v4
17+
18+
- name: Setup Node.js
19+
uses: actions/setup-node@v4
20+
with:
21+
node-version: '20'
22+
registry-url: 'https://registry.npmjs.org'
23+
cache: 'npm'
24+
25+
- name: Install dependencies
26+
run: npm ci
27+
28+
- name: Run type check
29+
run: npm run typecheck
30+
31+
- name: Build package
32+
run: npm run build
33+
34+
- name: Publish to NPM
35+
run: npm publish --access public
36+
env:
37+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎README.md‎

Lines changed: 59 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# ui-library
1+
# @uselagoon/ui-library
22

3-
A component library based on [Shadcn](https://ui.shadcn.com/) and [tailwind](https://tailwindcss.com/) for all things lagoon related:
3+
A component library based on [Shadcn](https://ui.shadcn.com/) and [Tailwind](https://tailwindcss.com/) for all things Lagoon related.
44

55
## ChangeLog Component
66

@@ -25,30 +25,29 @@ export default function ChangeLog() {
2525

2626
## Installation 💾
2727

28-
Install it in a React project with a single npm/yarn command:
28+
### 1. Configure npm registry
2929

30-
```bash
31-
npm install github:uselagoon/ui-library#main tailwindcss @tailwindcss/postcss postcss
30+
Create or update `.npmrc` in your project root:
31+
32+
```
33+
@uselagoon:registry=https://registry.npmjs.org
3234
```
3335

36+
### 2. Install the package
37+
3438
```bash
35-
yarn add github:uselagoon/ui-library#main tailwindcss @tailwindcss/postcss postcss
39+
npm install @uselagoon/ui-library tailwindcss @tailwindcss/postcss postcss
3640
```
3741

38-
Alternatively, add the following to your `package.json` and run `npm i` / `yarn` command:
39-
40-
```json
41-
"dependencies": {
42-
"react": "^18",
43-
"react-dom": "^18",
44-
"@tailwindcss/postcss": "^4.1.8",
45-
"tailwindcss": "^4.1.10",
46-
"ui-library": "github:uselagoon/ui-library#main",
47-
}
42+
Or with yarn:
4843

44+
```bash
45+
yarn add @uselagoon/ui-library tailwindcss @tailwindcss/postcss postcss
4946
```
5047

51-
Make sure to add generated dist styles from the ui-library like so, preferably in the root layout of your project:
48+
### 3. Import styles
49+
50+
Add the UI library styles to your root layout:
5251

5352
```tsx
5453
import '@uselagoon/ui-library/dist/ui-library.css';
@@ -72,40 +71,59 @@ export default () => (
7271
label="Switch Text"
7372
/>
7473
</>
74+
);
7575
```
7676

77-
## Vite config ⚙︎
77+
## Storybook 🎨
78+
79+
View the component documentation on Chromatic (URL available after setup).
7880

79-
The ui-library is bootstrapped with Vite and TS. To modify the configuration, edit `vite.config.ts` in the root directory; To modify TypeScript rules, refer to `tsconfig.app.json`
81+
### Storybook Composition
8082

81-
## Linting and bundling
83+
To include UI library stories in your project's Storybook, add to your `.storybook/main.ts`:
8284

83-
### Linting 🧶
85+
```typescript
86+
import type { StorybookConfig } from '@storybook/react-vite';
8487

85-
The linter is configured for both JS and TypeScript files. It runs during the build step but can also be ran during development by `npm run lint`.
88+
const config: StorybookConfig = {
89+
// ... your existing config
90+
refs: {
91+
'ui-library': {
92+
title: 'Lagoon UI Library',
93+
url: 'https://<branch>--<app-id>.chromatic.com/', // Get URL from Chromatic dashboard
94+
},
95+
},
96+
};
8697

87-
To adhere to formatting rules, run `npm run format`.
98+
export default config;
99+
```
88100

89-
To configure the linter config, refer to eslint.config.js at the root of the project.
101+
## CI/CD
90102

91-
### Bundling 📦
103+
### Automated Workflows
92104

93-
After making changes to the source files, make sure to run `npm run bundle` command which empties the dist folder and generates updated code for components.
105+
| Workflow | Trigger | Actions |
106+
|----------|---------|---------|
107+
| **CI** | Push to main, PRs | Type check, lint, format check, build, build Storybook |
108+
| **Publish** | GitHub Release published | All CI checks + publish to NPM |
109+
| **Chromatic** | Push to main, PRs | Deploy Storybook to Chromatic (when token configured) |
94110

95-
## Viewing storybook 👀
111+
### Publishing a New Version
96112

97-
- Clone this repo
98-
- Run `npm i && npm run storybook`
99-
- Visit `http://localhost:6006/`
113+
1. Update version in `package.json`
114+
2. Commit and push to main
115+
3. Create a GitHub Release with a new tag (e.g., `v2.1.0`)
116+
4. The publish workflow automatically builds and publishes to NPM
100117

101118
## Development guide 🏗️
102119

103120
Clone the repo locally:
104121

105122
```bash
106-
git clone https://github.com/uselagoon/ui-library .
107-
npm install
108-
npm run storybook
123+
git clone https://github.com/uselagoon/ui-library.git
124+
cd ui-library
125+
npm install
126+
npm run storybook
109127
```
110128

111129
It is recommended to build components in isolation with the help of storybook (currently V 9.0).
@@ -127,18 +145,20 @@ The project structure is as follows:
127145

128146
Given that there's a storybook instance running, navigate to the `src` directory and modify/create new components with their respective `stories.tsx` files.
129147

130-
To add a new component from Shadcn, refer to this [guide](https://ui.shadcn.com/docs/cli)
131-
132148
Modify and customize anything with Tailwind and/or custom css files if needed.
133149

134-
Then run the lint and format scripts, then ultimately, the bundle script and you're ready to go!
150+
Then run the lint and format scripts, and you're ready to go!
135151

136152
```bash
137-
npm run lint
138-
npm run format
139-
npm run bundle
153+
npm run typecheck # TypeScript check
154+
npm run lint # ESLint
155+
npm run format # Prettier formatting
140156
```
141157

158+
### Adding Shadcn Components
159+
160+
To add a new component from Shadcn, refer to the [Shadcn CLI guide](https://ui.shadcn.com/docs/cli).
161+
142162
## Contributing 🤝
143163

144164
PRs and issues are welcome, we invite contributions from everyone.

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,13 @@
4040
"url": "https://github.com/uselagoon/ui-library/issues"
4141
},
4242
"homepage": "https://github.com/uselagoon/ui-library#readme",
43+
"publishConfig": {
44+
"registry": "https://registry.npmjs.org"
45+
},
4346
"scripts": {
4447
"build": "npm run bundle && npm run copy",
45-
"bundle": "rm -rf ./dist && tsc -b && vite build",
48+
"bundle": "npm run typecheck && rm -rf ./dist && vite build",
49+
"typecheck": "tsc --project tsconfig.app.json --noEmit",
4650
"lint": "eslint .",
4751
"preview": "vite preview",
4852
"copy": "cp package.json dist/",

‎tsconfig.app.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,10 @@
2121

2222
/* Linting */
2323
"strict": true,
24-
"noUnusedLocals": true,
25-
"noUnusedParameters": true,
2624

2725
"noFallthroughCasesInSwitch": true,
2826
"noUncheckedSideEffectImports": true
2927
},
30-
"include": ["src"]
28+
"include": ["src"],
29+
"exclude": ["**/*.stories.tsx", "**/*.stories.ts"]
3130
}

0 commit comments

Comments
 (0)