Ci/chromatic

.env

@@ -1 +1,2 @@
 VITE_LIGHTNING_DOM_RENDERING=false
+VITE_API_KEY_V4=eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4MWZiNTczN2I3ZTk0NmIzOTIzOWNiYWFlMjBmZmUyNiIsIm5iZiI6MTc2NDI2OTgwOS44OTMsInN1YiI6IjY5Mjg5ZWYxYTJiNDdhYjBhMmMxMjU2NCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.p0Qiymkxup3tASiA92uyNMNWHb6sgVDMNqLi7uREyzs

.env.template

@@ -0,0 +1,2 @@
+VITE_LIGHTNING_DOM_RENDERING=false
+VITE_API_KEY_V4=YOUR_KEY_HERE

.github/workflows/main.yml

@@ -0,0 +1,55 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - "**"
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  ci-checks:
+    if: github.event_name != 'workflow_dispatch'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 10.17.0
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Build
+        run: pnpm build
+      - name: Type check
+        run: pnpm run tsc
+      - name: Lint & Prettier
+        run: pnpm run lint:fix:prettier
+
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Use pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 10.17.0
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Build Storybook
+        run: pnpm run build-storybook
+      - name: Publish to Chromatic
+        if: github.ref != 'refs/heads/main'
+        run: pnpx chromatic --project-token=chpt_6601787c71d2014

.gitignore

@@ -19,3 +19,5 @@ lg/assets
 lg/fonts
 lg/*.ipk
 lg/index.html
+.env
+storybook-static/

.storybook/main.ts

@@ -1,11 +1,27 @@
 import type { StorybookConfig } from 'storybook-solidjs-vite';
+import type { InlineConfig } from 'vite';
+
+function flattenPlugins(plugins: any[]): any[] {
+  return plugins.reduce((acc: any[], p: any) => {
+    if (Array.isArray(p)) return acc.concat(flattenPlugins(p));
+    if (p) acc.push(p);
+    return acc;
+  }, []);
+}
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(ts|tsx)'],
   addons: [],
   framework: {
     name: 'storybook-solidjs-vite',
     options: {}
+  },
+  async viteFinal(config: InlineConfig) {
+    if (config.plugins) {
+      const flat = flattenPlugins(config.plugins as any[]);
+      config.plugins = flat.filter((p: any) => !String(p?.name ?? '').includes('legacy'));
+    }
+    return config;
   }
 };
 

.vscode/settings.json

@@ -7,6 +7,7 @@
   },
   "chat.tools.terminal.autoApprove": {
     "pkill": true,
-    "true": true
+    "true": true,
+    "pnpm": true
   }
 }

README.md

@@ -18,8 +18,10 @@ Solid
 
 ## Getting started
 
+Remove the .template to the .env.template to create a .env file. This is where all the secrets of the application will be.
+
 Get an API Read Access Token from [TMDB API](https://developers.themoviedb.org/3/getting-started/introduction)
-and put the key in `src/api/key.js` with `export default 'KEY_VALUE'`
+and put the key in .env with the variable `VITE_API_KEY_V4`
 
 ```
 git clone https://github.com/lightning-tv/solid-demo-app

package.json

@@ -8,7 +8,8 @@
     "start": "vite --host --force",
     "start:dom": "VITE_LIGHTNING_DOM_RENDERING=true vite --host --force",
     "start:prod": "vite --host --force --mode production",
-    "storybook": "storybook dev -p 6006"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "build": "vite build --sourcemap=true --emptyOutDir false",
     "build:tizen": "vite build --config vite.config.tizen.js --base=./ --outDir tizen --emptyOutDir false",
     "build:lg": "vite build --sourcemap=false --base=./ --outDir lg --emptyOutDir false && ares-package lg --outdir lg --no-minify",