feat: npm publish (#46)

* chore: updated storybook and react-day-picker

* chore: fix build and npm publish

* chore: installed semantinc release

* chore: implemented publish release workflow

Author: hussedev

.github/workflows/release.yml

@@ -0,0 +1,57 @@
+name: release
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # to be able to publish a GitHub release
+      issues: write # to be able to comment on released issues
+      pull-requests: write # to be able to comment on released pull requests
+      id-token: write # to enable use of OIDC for npm provenance
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: false
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile # Install dependencies with lockfile's versions to ensure consistency
+
+      - name: Cache Build
+        id: cache-build
+        uses: actions/cache@v4
+        with:
+          path: dist
+          key: ${{ runner.os }}-build-${{ hashFiles('**/*.ts', '**/*.tsx', '**/*.mdx') }} # Cache key based on OS and file hashes
+          restore-keys: |
+            ${{ runner.os }}-build-
+
+      - name: Build
+        if: steps.cache-build.outputs.cache-hit != 'true'
+        run: pnpm build
+
+      - name: Semantic Release
+        run: pnpx semantic-release
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.storybook/main.ts

@@ -21,6 +21,9 @@ const config: StorybookConfig = {
   core: {
     disableTelemetry: true, // 👈 Used to ignore update notifications.
   },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
   async viteFinal(config) {
     config.plugins = await withoutVitePlugins(config.plugins, ["vite:dts"]);
 

.storybook/preview.ts

@@ -24,6 +24,7 @@ const preview: Preview = {
       handlers,
     },
   },
+
   loaders: [mswLoader],
   decorators: [
     withThemeByDataAttribute({
@@ -35,6 +36,8 @@ const preview: Preview = {
       attributeName: "data-mode",
     }),
   ],
+
+  tags: ["autodocs"],
 };
 
 // NOTE: Example of global loaders

package.json

@@ -1,19 +1,21 @@
 {
   "name": "gitcoin-ui",
-  "version": "0.0.0",
+  "version": "0.0.10",
   "type": "module",
   "types": "./dist/index.d.ts",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
-    }
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./handlers": "./dist/mocks/handlers.js"
   },
   "scripts": {
     "dev": "pnpm storybook",
@@ -28,21 +30,21 @@
     "chromatic": "chromatic"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^2.0.2",
+    "@chromatic-com/storybook": "^3.2.2",
     "@eslint/js": "^9.11.1",
-    "@storybook/addon-a11y": "8.3.5",
-    "@storybook/addon-essentials": "8.3.5",
-    "@storybook/addon-interactions": "8.3.5",
-    "@storybook/addon-links": "8.3.5",
-    "@storybook/addon-themes": "8.3.5",
-    "@storybook/blocks": "8.3.5",
-    "@storybook/builder-vite": "8.3.5",
-    "@storybook/manager-api": "^8.4.3",
-    "@storybook/react": "8.3.5",
-    "@storybook/react-vite": "8.3.5",
-    "@storybook/test": "8.3.5",
+    "@storybook/addon-a11y": "^8.4.4",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-links": "^8.4.4",
+    "@storybook/addon-themes": "^8.4.4",
+    "@storybook/blocks": "^8.4.4",
+    "@storybook/builder-vite": "^8.4.4",
+    "@storybook/manager-api": "^8.4.4",
+    "@storybook/react": "^8.4.4",
+    "@storybook/react-vite": "^8.4.4",
+    "@storybook/test": "^8.4.4",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.4.3",
+    "@storybook/theming": "^8.4.4",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
@@ -64,14 +66,15 @@
     "lint-staged": "^15.2.10",
     "lucide-react": "^0.453.0",
     "msw": "^2.4.11",
-    "msw-storybook-addon": "^2.0.3",
+    "msw-storybook-addon": "^2.0.4",
     "playwright": "^1.48.1",
     "postcss": "^8.4.47",
     "prettier": "3.1.0",
     "prettier-plugin-tailwindcss": "0.5.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "storybook": "8.3.5",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "semantic-release": "^24.2.0",
+    "storybook": "^8.4.4",
     "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.14",
     "tailwindcss-animate": "^1.0.7",
@@ -83,6 +86,10 @@
     "vitest": "^2.1.3",
     "wait-on": "^8.0.1"
   },
+  "peerDependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
   "eslintConfig": {
     "extends": [
       "plugin:storybook/recommended"
@@ -129,13 +136,12 @@
     "@tanstack/react-query": "^5.59.15",
     "@uiw/react-markdown-preview": "^5.1.3",
     "cmdk": "1.0.0",
-    "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.3.0",
     "graphql-request": "^7.1.0",
     "input-otp": "^1.2.4",
     "moment": "^2.30.1",
     "next-themes": "^0.3.0",
-    "react-day-picker": "8.10.1",
+    "react-day-picker": "9.3.2",
     "react-hook-form": "^7.53.0",
     "react-markdown": "^9.0.1",
     "react-resizable-panels": "^2.1.4",