Skip to content

Commit 9f4021c

Browse files
HagerDakrouryHagerDakroury
committed
ci: publish package to github and add wrokflows
1 parent d67c284 commit 9f4021c

File tree

6 files changed

+183
-43
lines changed

6 files changed

+183
-43
lines changed

‎.github/workflows/chromatic.yml‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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

‎.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: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
name: Publish Package
2+
3+
on:
4+
release:
5+
types: [published]
6+
7+
permissions:
8+
contents: read
9+
packages: write
10+
11+
jobs:
12+
publish:
13+
runs-on: ubuntu-latest
14+
15+
steps:
16+
- name: Checkout
17+
uses: actions/checkout@v4
18+
19+
- name: Setup Node.js
20+
uses: actions/setup-node@v4
21+
with:
22+
node-version: '20'
23+
registry-url: 'https://npm.pkg.github.com'
24+
scope: '@uselagoon'
25+
cache: 'npm'
26+
27+
- name: Install dependencies
28+
run: npm ci
29+
30+
- name: Run type check
31+
run: npm run typecheck
32+
33+
- name: Build package
34+
run: npm run build
35+
36+
- name: Publish to GitHub Packages
37+
run: npm publish
38+
env:
39+
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

‎README.md‎

Lines changed: 61 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,34 @@
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
## Installation 💾
66

7-
Install it in a React project with a single npm/yarn command:
7+
### 1. Configure npm registry
8+
9+
Create or update `.npmrc` in your project root:
810

9-
```bash
10-
npm install github:uselagoon/ui-library#main tailwindcss @tailwindcss/postcss postcss
1111
```
12+
@uselagoon:registry=https://npm.pkg.github.com
13+
```
14+
15+
You may need to authenticate with GitHub Packages. See [GitHub Packages authentication](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-to-github-packages).
16+
17+
### 2. Install the package
1218

1319
```bash
14-
yarn add github:uselagoon/ui-library#main tailwindcss @tailwindcss/postcss postcss
20+
npm install @uselagoon/ui-library tailwindcss @tailwindcss/postcss postcss
1521
```
1622

17-
Alternatively, add the following to your `package.json` and run `npm i` / `yarn` command:
18-
19-
```json
20-
"dependencies": {
21-
"react": "^18",
22-
"react-dom": "^18",
23-
"@tailwindcss/postcss": "^4.1.8",
24-
"tailwindcss": "^4.1.10",
25-
"ui-library": "github:uselagoon/ui-library#main",
26-
}
23+
Or with yarn:
2724

25+
```bash
26+
yarn add @uselagoon/ui-library tailwindcss @tailwindcss/postcss postcss
2827
```
2928

30-
Make sure to add generated dist styles from the ui-library like so, preferably in the root layout of your project:
29+
### 3. Import styles
30+
31+
Add the UI library styles to your root layout:
3132

3233
```tsx
3334
import '@uselagoon/ui-library/dist/ui-library.css';
@@ -51,40 +52,59 @@ export default () => (
5152
label="Switch Text"
5253
/>
5354
</>
55+
);
5456
```
5557

56-
## Vite config ⚙︎
58+
## Storybook 🎨
59+
60+
View the component documentation on Chromatic (URL available after setup).
5761

58-
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`
62+
### Storybook Composition
5963

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

62-
### Linting 🧶
66+
```typescript
67+
import type { StorybookConfig } from '@storybook/react-vite';
6368

64-
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`.
69+
const config: StorybookConfig = {
70+
// ... your existing config
71+
refs: {
72+
'ui-library': {
73+
title: 'Lagoon UI Library',
74+
url: 'https://<branch>--<app-id>.chromatic.com/', // Get URL from Chromatic dashboard
75+
},
76+
},
77+
};
6578

66-
To adhere to formatting rules, run `npm run format`.
79+
export default config;
80+
```
6781

68-
To configure the linter config, refer to eslint.config.js at the root of the project.
82+
## CI/CD
6983

70-
### Bundling 📦
84+
### Automated Workflows
7185

72-
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.
86+
| Workflow | Trigger | Actions |
87+
|----------|---------|---------|
88+
| **CI** | Push to main, PRs | Type check, lint, format check, build, build Storybook |
89+
| **Publish** | GitHub Release published | All CI checks + publish to GitHub Packages |
90+
| **Chromatic** | Push to main, PRs | Deploy Storybook to Chromatic (when token configured) |
7391

74-
## Viewing storybook 👀
92+
### Publishing a New Version
7593

76-
- Clone this repo
77-
- Run `npm i && npm run storybook`
78-
- Visit `http://localhost:6006/`
94+
1. Update version in `package.json`
95+
2. Commit and push to main
96+
3. Create a GitHub Release with a new tag (e.g., `v2.1.0`)
97+
4. The publish workflow automatically builds and publishes to GitHub Packages
7998

8099
## Development guide 🏗️
81100

82101
Clone the repo locally:
83102

84103
```bash
85-
git clone https://github.com/uselagoon/ui-library .
86-
npm install
87-
npm run storybook
104+
git clone https://github.com/uselagoon/ui-library.git
105+
cd ui-library
106+
npm install
107+
npm run storybook
88108
```
89109

90110
It is recommended to build components in isolation with the help of storybook (currently V 9.0).
@@ -106,18 +126,20 @@ The project structure is as follows:
106126

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

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

113-
Then run the lint and format scripts, then ultimately, the bundle script and you're ready to go!
131+
Then run the lint and format scripts, and you're ready to go!
114132

115133
```bash
116-
npm run lint
117-
npm run format
118-
npm run bundle
134+
npm run typecheck # TypeScript check
135+
npm run lint # ESLint
136+
npm run format # Prettier formatting
119137
```
120138

139+
### Adding Shadcn Components
140+
141+
To add a new component from Shadcn, refer to the [Shadcn CLI guide](https://ui.shadcn.com/docs/cli).
142+
121143
## Contributing 🤝
122144

123145
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://npm.pkg.github.com"
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)