feature(packages/ui): Prepare ui package for Vercel deployment (#15251

)

* update scripts

* add vercel config

* update styles import in preview

* update readme

packages/ui/.storybook/preview.ts

@@ -1,4 +1,4 @@
-import '../lib/index.css'
+import '../lib/styles/index.css'
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

packages/ui/README.md

@@ -2,6 +2,10 @@
 
 This package includes React Components used across our products.
 
+## Component Playground
+
+Explore the components at [storybook.unlock-protocol.com](https://storybook.unlock-protocol.com) – an interactive playground for testing and previewing.
+
 ## Using the package
 
 First of all, you will need to run the `yarn build` command in root.

packages/ui/package.json

@@ -27,8 +27,9 @@
     "build": "yarn build:lib && yarn build:cdn && tsup ./lib/index.tsx --dts-only",
     "build:lib": "vite build",
     "build:cdn": "IS_CDN=1 && vite build",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "storybook": "storybook dev -p 6006 -s public",
+    "build-storybook": "storybook build -s public",
+    "serve-storybook": "serve storybook-static"
   },
   "dependencies": {
     "@headlessui/react": "2.2.0",

packages/ui/vercel.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "buildCommand": "npm run build-storybook",
+  "devCommand": "npm run storybook",
+  "installCommand": "npm install",
+  "framework": null,
+  "outputDirectory": "./storybook-static"
+}