[IOPLT-177] Publish the storybook on Github Pages via Github Actions

.github/workflows/release-storybook.yml

@@ -0,0 +1,34 @@
+name: Publish the storybook
+on:
+  push:
+    branches:
+      - main
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+jobs:
+  storybook-release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab #v3.5.2
+      - name: Setup Node
+        uses: actions/setup-node@7c12f8017d5436eb855f1ed4399f037a36fbd9e8 #v2.5.2
+        with:
+          node-version-file: .nvmrc
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install dependencies and build with builder bob
+        run: yarn install --frozen-lockfile
+      - name: Build Storybook
+        run: yarn predeploy
+      - name: 'upload'
+        uses: actions/upload-pages-artifact@a753861a5debcf57bf8b404356158c8e1e33150c #v2.0.0
+        with: 
+          path: "storybook-static"
+      - id: deploy
+        name: Deploy to GitHub Pages
+        uses: actions/deploy-pages@9dbe3824824f8a1377b8e298bafde1a50ede43e5 #v2.0.4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+

.gitignore

@@ -70,4 +70,7 @@ android/keystores/debug.keystore
 lib/
 
 #Jest
-coverage/
+coverage/
+
+# Storybook
+storybook-static

.storybook/main.ts

@@ -34,7 +34,12 @@ const config: StorybookConfig = {
     name: "@storybook/react-webpack5",
     options: {}
   },
-  staticDirs: ["../example/assets"],
+  staticDirs: [
+    "../example/assets/css",
+    "../example/assets/fonts/TitilliumWeb",
+    "../example/assets/fonts/ReadexPro",
+    "../example/assets/fonts/DMMono"
+  ],
   docs: {
     autodocs: "tag"
   },

.storybook/preview-head.html

@@ -2,22 +2,17 @@
 
 <!-- Pull in static files served from your Static directory or the internet -->
 <!-- Example: `main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts` directory inside your `public` directory -->
-<link rel="preload" href="/fonts/ReadexPro/ReadexPro-Regular.ttf" as="font" />
-<link rel="preload" href="/fonts/RobotoMono/RobotoMono-Bold.ttf" as="font"/>
-<link rel="preload" href="/fonts/RobotoMono/RobotoMono-BoldItalic.ttf" as="font"/>
-<link rel="preload" href="/fonts/RobotoMono/RobotoMono-Light.ttf" as="font"/>
-<link rel="preload" href="/fonts/RobotoMono/RobotoMono-LightItalic.ttf" as="font"/>
-<link rel="preload" href="/fonts/RobotoMono/RobotoMono-Regular.ttf" as="font"/>
-<link rel="preload" href="/fonts/RobotoMono/RobotoMono-RegularItalic.ttf" as="font"/>
-<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-Black.ttf" as="font"/>
-<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-Bold.ttf" as="font"/>
-<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-BoldItalic.ttf" as="font"/>
-<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-ExtraLight.ttf" as="font"/>
-<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-ExtraLightItalic.ttf" as="font"/>
-<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-Italic.ttf" as="font"/>
-<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-Light.ttf" as="font"/>
-<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-LightItalic.ttf" as="font" />
-<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-Regular.ttf" as="font" />
-<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-SemiBold.ttf" as="font"/>
-<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-SemiBoldItalic.ttf" as="font" />
-<link rel="stylesheet" href="/css/fonts.css" />
+<link rel="preload" href="ReadexPro-Regular.ttf" as="font" />
+<link rel="preload" href="DMMono-Medium.ttf" as="font"/>
+<link rel="preload" href="TitilliumWeb-Black.ttf" as="font"/>
+<link rel="preload" href="TitilliumWeb-Bold.ttf" as="font"/>
+<link rel="preload" href="TitilliumWeb-BoldItalic.ttf" as="font"/>
+<link rel="preload" href="TitilliumWeb-ExtraLight.ttf" as="font"/>
+<link rel="preload" href="TitilliumWeb-ExtraLightItalic.ttf" as="font"/>
+<link rel="preload" href="TitilliumWeb-Italic.ttf" as="font"/>
+<link rel="preload" href="TitilliumWeb-Light.ttf" as="font"/>
+<link rel="preload" href="TitilliumWeb-LightItalic.ttf" as="font" />
+<link rel="preload" href="TitilliumWeb-Regular.ttf" as="font" />
+<link rel="preload" href="TitilliumWeb-SemiBold.ttf" as="font"/>
+<link rel="preload" href="TitilliumWeb-SemiBoldItalic.ttf" as="font" />
+<link rel="stylesheet" href="fonts.css" />

.storybook/theme.ts

@@ -3,7 +3,7 @@ import { create } from "@storybook/theming";
 export const sbTheme = create({
   base: "light",
   brandTitle: "IO App Design System",
-  brandUrl: "https://github.com/pagopa/io-app-design-system",
+  brandUrl: "https://pagopa.github.io/io-app-design-system",
   brandImage:
     "https://raw.githubusercontent.com/pagopa/io-app/master/img/app-logo.svg",
   brandTarget: "_self"

example/assets/css/fonts.css

@@ -1,128 +1,94 @@
 @font-face {
     font-family: 'ReadexPro';
-    src: url('../fonts/ReadexPro/ReadexPro-Regular.ttf') format("truetype");
+    src: url('ReadexPro-Regular.ttf') format("truetype");
     font-weight: 400;
     font-style: normal;
 }
 
-/* ROBOTO MONO */
+/* DM MONO */
 @font-face {
-    font-family: 'RobotoMono';
-    src: url('../fonts/RobotoMono/RobotoMono-Regular.ttf') format("truetype");
+    font-family: 'DMMono';
+    src: url('DMMono-Medium.ttf') format("truetype");
     font-weight: 400;
     font-style: normal;
 }
 
-@font-face {
-    font-family: 'RobotoMono';
-    src: url('../fonts/RobotoMono/RobotoMono-RegularItalic.ttf') format("truetype");
-    font-weight: 400;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'RobotoMono';
-    src: url('../fonts/RobotoMono/RobotoMono-Light.ttf') format("truetype");
-    font-weight: 300;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'RobotoMono';
-    src: url('../fonts/RobotoMono/RobotoMono-LightItalic.ttf') format("truetype");
-    font-weight: 300;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'RobotoMono';
-    src: url('../fonts/RobotoMono/RobotoMono-Bold.ttf') format("truetype");
-    font-weight: 700;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'RobotoMono';
-    src: url('../fonts/RobotoMono/RobotoMono-BoldItalic.ttf') format("truetype");
-    font-weight: 700;
-    font-style: italic;
-}
 
 /* TITILLIUM WEB */
 @font-face {
     font-family: 'TitilliumWeb';
-    src: url('../fonts/TitilliumWeb/TitilliumWeb-Regular.ttf') format("truetype");
+    src: url('TitilliumWeb-Regular.ttf') format("truetype");
     font-weight: 400;
     font-style: normal;
 }
 
 /* @font-face {
     font-family: 'TitilliumWeb';
-    src: url('../fonts/TitilliumWeb/TitilliumWeb-Black.ttf') format("truetype");
+    src: url('TitilliumWeb-Black.ttf') format("truetype");
     font-weight: 400;
     font-style: normal;
     color: black;
 } */
 
 @font-face {
     font-family: "TitilliumWeb";
-    src: url('../fonts/TitilliumWeb/TitilliumWeb-Bold.ttf') format("truetype");
+    src: url('TitilliumWeb-Bold.ttf') format("truetype");
     font-weight: 700;
     font-style: normal;
 }
 
 @font-face {
     font-family: "TitilliumWeb";
-    src: url('../fonts/TitilliumWeb/TitilliumWeb-BoldItalic.ttf') format("truetype");
+    src: url('TitilliumWeb-BoldItalic.ttf') format("truetype");
     font-weight: 700;
     font-style: italic;
 }
 
 @font-face {
     font-family: "TitilliumWeb";
-    src: url('../fonts/TitilliumWeb/TitilliumWeb-ExtraLight.ttf') format("truetype");
+    src: url('TitilliumWeb-ExtraLight.ttf') format("truetype");
     font-weight: 200;
     font-style: normal;
 }
 
 @font-face {
     font-family: "TitilliumWeb";
-    src: url('../fonts/TitilliumWeb/TitilliumWeb-ExtraLightItalic.ttf') format("truetype");
+    src: url('TitilliumWeb-ExtraLightItalic.ttf') format("truetype");
     font-weight: 200;
     font-style: italic;
 }
 
 @font-face {
     font-family: "TitilliumWeb";
-    src: url('../fonts/TitilliumWeb/TitilliumWeb-Italic.ttf') format("truetype");
+    src: url('TitilliumWeb-Italic.ttf') format("truetype");
     font-weight: 400;
     font-style: italic;
 }
 
 @font-face {
     font-family: "TitilliumWeb";
-    src: url('../fonts/TitilliumWeb/TitilliumWeb-Light.ttf') format("truetype");
+    src: url('TitilliumWeb-Light.ttf') format("truetype");
     font-weight: 300;
     font-style: normal;
 }
 
 @font-face {
     font-family: "TitilliumWeb";
-    src: url('../fonts/TitilliumWeb/TitilliumWeb-LightItalic.ttf') format("truetype");
+    src: url('TitilliumWeb-LightItalic.ttf') format("truetype");
     font-weight: 300;
     font-style: italic;
 }
 
 @font-face {
     font-family: "TitilliumWeb";
-    src: url('../fonts/TitilliumWeb/TitilliumWeb-SemiBold.ttf') format("truetype");
+    src: url('TitilliumWeb-SemiBold.ttf') format("truetype");
     font-weight: 600;
     font-style: normal;
 }
 
 @font-face {
     font-family: "TitilliumWeb";
-    src: url('../fonts/TitilliumWeb/TitilliumWeb-SemiBoldItalic.ttf') format("truetype");
+    src: url('TitilliumWeb-SemiBoldItalic.ttf') format("truetype");
     font-weight: 600;
     font-style: italic;
 }

package.json

@@ -37,6 +37,8 @@
     "bootstrap": "yarn example && yarn install",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "predeploy": "yarn build-storybook",
+    "deploy-storybook": "gh-pages -d storybook-static",
     "generate:icons": "node scripts/generateNewIcons.js",
     "generate:pictograms": "node scripts/generateNewPictograms.js",
     "generate": "npm-run-all generate:*"
@@ -52,7 +54,7 @@
   "bugs": {
     "url": "https://github.com/pagopa/io-app-design-system/issues"
   },
-  "homepage": "https://github.com/pagopa/io-app-design-system#readme",
+  "homepage": "https://pagopa.github.io/io-app-design-system",
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",