ci: publish package to github and add wrokflows

.github/workflows/chromatic.yml

@@ -0,0 +1,44 @@
+name: Chromatic
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Check for Chromatic token
+        id: check-token
+        run: |
+          if [ -n "${{ secrets.CHROMATIC_PROJECT_TOKEN }}" ]; then
+            echo "has_token=true" >> $GITHUB_OUTPUT
+          else
+            echo "has_token=false" >> $GITHUB_OUTPUT
+            echo "::notice::Skipping Chromatic publish - CHROMATIC_PROJECT_TOKEN secret not set"
+          fi
+
+      - name: Publish to Chromatic
+        if: steps.check-token.outputs.has_token == 'true'
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          buildScriptName: build-storybook
+          onlyChanged: true

.github/workflows/ci.yml

@@ -0,0 +1,33 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run type check
+        run: npm run typecheck
+
+      - name: Build package
+        run: npm run build
+
+      - name: Build Storybook
+        run: npm run build-storybook

.github/workflows/publish.yml

@@ -0,0 +1,37 @@
+name: Publish Package
+
+on:
+  release:
+    types: [published]
+
+permissions:
+  contents: read
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run type check
+        run: npm run typecheck
+
+      - name: Build package
+        run: npm run build
+
+      - name: Publish to NPM
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -1,33 +1,32 @@
-# ui-library
+# @uselagoon/ui-library
 
-A component library based on [Shadcn](https://ui.shadcn.com/) and [tailwind](https://tailwindcss.com/) for all things lagoon related:
+A component library based on [Shadcn](https://ui.shadcn.com/) and [Tailwind](https://tailwindcss.com/) for all things Lagoon related.
 
 ## Installation 💾
 
-Install it in a React project with a single npm/yarn command:
+### 1. Configure npm registry
 
-```bash
-npm install github:uselagoon/ui-library#main tailwindcss @tailwindcss/postcss postcss
+Create or update `.npmrc` in your project root:
+
+```
+@uselagoon:registry=https://registry.npmjs.org
 ```
 
+### 2. Install the package
+
 ```bash
-yarn add github:uselagoon/ui-library#main tailwindcss @tailwindcss/postcss postcss
+npm install @uselagoon/ui-library tailwindcss @tailwindcss/postcss postcss
 ```
 
-Alternatively, add the following to your `package.json` and run `npm i` / `yarn` command:
-
-```json
-   "dependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "@tailwindcss/postcss": "^4.1.8",
-    "tailwindcss": "^4.1.10",
-    "ui-library": "github:uselagoon/ui-library#main",
-  }
+Or with yarn:
 
+```bash
+yarn add @uselagoon/ui-library tailwindcss @tailwindcss/postcss postcss
 ```
 
-Make sure to add generated dist styles from the ui-library like so, preferably in the root layout of your project:
+### 3. Import styles
+
+Add the UI library styles to your root layout:
 
 ```tsx
 import '@uselagoon/ui-library/dist/ui-library.css';
@@ -51,40 +50,59 @@ export default () => (
       label="Switch Text"
     />
   </>
+);
 ```
 
-## Vite config ⚙︎
+## Storybook 🎨
+
+View the component documentation on Chromatic (URL available after setup).
 
-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`
+### Storybook Composition
 
-## Linting and bundling
+To include UI library stories in your project's Storybook, add to your `.storybook/main.ts`:
 
-### Linting 🧶
+```typescript
+import type { StorybookConfig } from '@storybook/react-vite';
 
-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`.
+const config: StorybookConfig = {
+  // ... your existing config
+  refs: {
+    'ui-library': {
+      title: 'Lagoon UI Library',
+      url: 'https://<branch>--<app-id>.chromatic.com/', // Get URL from Chromatic dashboard
+    },
+  },
+};
 
-To adhere to formatting rules, run `npm run format`.
+export default config;
+```
 
-To configure the linter config, refer to eslint.config.js at the root of the project.
+## CI/CD
 
-### Bundling 📦
+### Automated Workflows
 
-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.
+| Workflow | Trigger | Actions |
+|----------|---------|---------|
+| **CI** | Push to main, PRs | Type check, lint, format check, build, build Storybook |
+| **Publish** | GitHub Release published | All CI checks + publish to NPM |
+| **Chromatic** | Push to main, PRs | Deploy Storybook to Chromatic (when token configured) |
 
-## Viewing storybook 👀
+### Publishing a New Version
 
-- Clone this repo
-- Run `npm i && npm run storybook`
-- Visit `http://localhost:6006/`
+1. Update version in `package.json`
+2. Commit and push to main
+3. Create a GitHub Release with a new tag (e.g., `v2.1.0`)
+4. The publish workflow automatically builds and publishes to NPM
 
 ## Development guide 🏗️
 
 Clone the repo locally:
 
 ```bash
-  git clone https://github.com/uselagoon/ui-library .
-  npm install
-  npm run storybook
+git clone https://github.com/uselagoon/ui-library.git
+cd ui-library
+npm install
+npm run storybook
 ```
 
 It is recommended to build components in isolation with the help of storybook (currently V 9.0).
@@ -106,18 +124,20 @@ The project structure is as follows:
 
 Given that there's a storybook instance running, navigate to the `src` directory and modify/create new components with their respective `stories.tsx` files.
 
-To add a new component from Shadcn, refer to this [guide](https://ui.shadcn.com/docs/cli)
-
 Modify and customize anything with Tailwind and/or custom css files if needed.
 
-Then run the lint and format scripts, then ultimately, the bundle script and you're ready to go!
+Then run the lint and format scripts, and you're ready to go!
 
 ```bash
-npm run lint
-npm run format
-npm run bundle
+npm run typecheck    # TypeScript check
+npm run lint         # ESLint
+npm run format       # Prettier formatting
 ```
 
+### Adding Shadcn Components
+
+To add a new component from Shadcn, refer to the [Shadcn CLI guide](https://ui.shadcn.com/docs/cli).
+
 ## Contributing 🤝
 
 PRs and issues are welcome, we invite contributions from everyone.

package.json

@@ -40,9 +40,13 @@
 		"url": "https://github.com/uselagoon/ui-library/issues"
 	},
 	"homepage": "https://github.com/uselagoon/ui-library#readme",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org"
+	},
 	"scripts": {
 		"build": "npm run bundle && npm run copy",
-		"bundle": "rm -rf ./dist && tsc -b && vite build",
+		"bundle": "npm run typecheck && rm -rf ./dist && vite build",
+		"typecheck": "tsc --project tsconfig.app.json --noEmit",
 		"lint": "eslint .",
 		"preview": "vite preview",
 		"copy": "cp package.json dist/",

tsconfig.app.json

@@ -21,11 +21,10 @@
 
 		/* Linting */
 		"strict": true,
-		"noUnusedLocals": true,
-		"noUnusedParameters": true,
 
 		"noFallthroughCasesInSwitch": true,
 		"noUncheckedSideEffectImports": true
 	},
-	"include": ["src"]
+	"include": ["src"],
+	"exclude": ["**/*.stories.tsx", "**/*.stories.ts"]
 }