Merge pull request #17 from DiamondLightSource/vbe/gh-actions

Add GH actions

.github/workflows/deploy-storybook.yaml

@@ -0,0 +1,43 @@
+name: Build and Publish storybook to GitHub Pages
+
+on:
+  push:
+    branches:
+      - "main"
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.build-publish.outputs.page_url }}
+
+    permissions:
+      pages: write
+      id-token: write
+
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: ["22.12.0"]
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - uses: pnpm/action-setup@v4
+      with:
+        run_install: |
+          args: [ --force ]
+
+    - name: Set Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: pnpm
+
+    - name: Build and publish
+      id: build-publish
+      uses: bitovi/[email protected]
+      with:
+        checkout: false
+        path: storybook/storybook-static
+        install_command: echo Already done
+        build_command: pnpm build:storybook

.github/workflows/npm-publish.yaml

@@ -0,0 +1,45 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  push:
+    tags:
+      - v*
+
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          run_install: |
+            args: [ --force ]
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22.12.0'
+          registry-url: https://registry.npmjs.org/
+          scope: '@diamondlightsource'
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm build
+
+      - name: Test
+        run: pnpm jest
+
+      - name: Publish
+        run: pnpm publish -r --no-git-checks --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN_DLS}}

.github/workflows/test-build.yaml

@@ -0,0 +1,39 @@
+# This workflow will install dependencies, run tests and lint
+
+name: Run CI
+
+on:
+  push:
+    branches: [ "main" ]
+    tags: ['v*']
+  pull_request:
+    types: [ opened, synchronize ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: ["22.12.0"]
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Install dependencies
+      uses: pnpm/action-setup@v4
+      with:
+        run_install: |
+          args: [ --force ]
+
+    - name: Set Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: pnpm
+
+    - name: Run Typescript tests and lint client code
+      run: |
+        pnpm lint
+        pnpm jest
+        pnpm build

.storybook/ThemeSwapper.tsx

@@ -1,27 +1,38 @@
-import {useColorScheme} from "@mui/material";
+import { useColorScheme } from "@mui/material";
 import * as React from "react";
-import {useEffect} from "react";
+import { useEffect } from "react";
+
+interface Globals {
+  theme: string;
+  themeMode: string;
+}
+
+interface Context {
+  globals: Globals;
+}
 
 export interface ThemeSwapperProps {
-  context: any,
+  context: Context;
   children: React.ReactNode;
 }
 
-export const TextLight = 'Mode: Light'
-export const TextDark = 'Mode: Dark'
+export const TextLight = "Mode: Light";
+export const TextDark = "Mode: Dark";
 
-const ThemeSwapper = ( {context, children}: ThemeSwapperProps ) => {
+const ThemeSwapper = ({ context, children }: ThemeSwapperProps) => {
   const { mode, setMode } = useColorScheme();
   //if( !mode ) return
-  
+
   useEffect(() => {
     const selectedThemeMode = context.globals.themeMode || TextLight;
-    setMode((selectedThemeMode == TextLight) ? "light" : "dark")
-  },[context.globals.themeMode]);
-
-  return <div style={{backgroundColor: mode === "light" ? "#fafafa" : "#050505"}}>
-    {children}
-  </div>
+    setMode(selectedThemeMode == TextLight ? "light" : "dark");
+  }, [context.globals.themeMode]);
+
+  return (
+    <div style={{ backgroundColor: mode === "light" ? "#fafafa" : "#050505" }}>
+      {children}
+    </div>
+  );
 };
 
-export { ThemeSwapper };
+export { ThemeSwapper, Context };

.storybook/main.ts

@@ -7,8 +7,9 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
-    '@storybook/addon-links',
-    'storybook-dark-mode'
+    "@storybook/addon-links",
+    "@storybook/addon-toolbars",
+    "storybook-dark-mode",
   ],
   framework: {
     name: "@storybook/react-webpack5",

.storybook/preview.tsx

@@ -1,64 +1,70 @@
-import React from 'react';
-import {CssBaseline} from "@mui/material";
+import React from "react";
+import { CssBaseline } from "@mui/material";
 import type { Preview } from "@storybook/react";
 
-import {ThemeProvider} from '../src'
-import {GenericTheme, DiamondTheme} from '../src'
+import { ThemeProvider } from "../src";
+import { GenericTheme, DiamondTheme } from "../src";
 
-import {ThemeSwapper, TextLight, TextDark} from "./ThemeSwapper";
+import { Context, ThemeSwapper, TextLight, TextDark } from "./ThemeSwapper";
 
-const TextThemeBase = 'Theme: Generic'
-const TextThemeDiamond = 'Theme: Diamond'
+const TextThemeBase = "Theme: Generic";
+const TextThemeDiamond = "Theme: Diamond";
 
 export const decorators = [
-  (StoriesWithPadding:any) => {
-    return <div style={{padding: '2em'}}>
-      <StoriesWithPadding />
-    </div>
+  (StoriesWithPadding: React.FC) => {
+    return (
+      <div style={{ padding: "2em" }}>
+        <StoriesWithPadding />
+      </div>
+    );
   },
-  (StoriesWithThemeSwapping:any, context: any) => {
-    return <ThemeSwapper context={context}>
-      <StoriesWithThemeSwapping/>
-    </ThemeSwapper>
+  (StoriesWithThemeSwapping: React.FC, context: Context) => {
+    return (
+      <ThemeSwapper context={context}>
+        <StoriesWithThemeSwapping />
+      </ThemeSwapper>
+    );
   },
-  (StoriesWithThemeProvider:any, context:any) => {
+  (StoriesWithThemeProvider: React.FC, context: Context) => {
     const selectedTheme = context.globals.theme || TextThemeBase;
     const selectedThemeMode = context.globals.themeMode || TextLight;
 
-    return <ThemeProvider
-        theme={(selectedTheme == TextThemeBase) ? GenericTheme : DiamondTheme}
-        defaultMode={(selectedThemeMode == TextLight) ? "light" : "dark"}
-    >
-      <CssBaseline/>
-      <StoriesWithThemeProvider/>
-    </ThemeProvider>
+    return (
+      <ThemeProvider
+        theme={selectedTheme == TextThemeBase ? GenericTheme : DiamondTheme}
+        defaultMode={selectedThemeMode == TextLight ? "light" : "dark"}
+      >
+        <CssBaseline />
+        <StoriesWithThemeProvider />
+      </ThemeProvider>
+    );
   },
 ];
 
 const preview: Preview = {
   globalTypes: {
     theme: {
-      description: 'Global theme for components',
+      description: "Global theme for components",
       toolbar: {
-        title: 'Theme',
-        icon: 'cog',
+        title: "Theme",
+        icon: "cog",
         items: [TextThemeBase, TextThemeDiamond],
         dynamicTitle: true,
       },
     },
     themeMode: {
-      description: 'Global theme mode for components',
+      description: "Global theme mode for components",
       toolbar: {
-        title: 'Theme Mode',
-        icon: 'mirror',
+        title: "Theme Mode",
+        icon: "mirror",
         items: [TextLight, TextDark],
         dynamicTitle: true,
       },
     },
   },
   initialGlobals: {
-    theme: 'Theme: Diamond',
-    themeMode: 'Mode: Light',
+    theme: "Theme: Diamond",
+    themeMode: "Mode: Light",
   },
   parameters: {
     controls: {
@@ -68,7 +74,7 @@ const preview: Preview = {
       },
     },
     backgrounds: { disable: true },
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
 };
 

babel.config.js

@@ -1,7 +1,5 @@
-module.exports = {
-    presets: [
-        "@babel/preset-env",
-        ["@babel/preset-react",{runtime: 'automatic'}],
-        "@babel/preset-typescript",
-    ],
-};
+export const presets = [
+  "@babel/preset-env",
+  ["@babel/preset-react", { runtime: "automatic" }],
+  "@babel/preset-typescript",
+];

eslint.config.js

@@ -0,0 +1,56 @@
+import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import tsPlugin from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+import reactPlugin from "eslint-plugin-react";
+import prettierPlugin from "eslint-plugin-prettier";
+
+const compat = new FlatCompat();
+
+export default [
+  {ignores: [
+    "**/storybook-static/**",
+    "**/*.css",
+    "**/*.json",
+    "**/*.d.ts",
+    "**/dist/*",
+    "**/*.html",
+    "**/*.svg",
+    "**/*.md",
+    "babel.config.js",
+    "eslint.config.js",
+    "jest.config.js",
+    "rollup.config.mjs",
+  ]},
+  js.configs.recommended,
+  ...compat.extends("plugin:@typescript-eslint/recommended"),
+  ...compat.extends("plugin:react/recommended"),
+  ...compat.extends("prettier"),
+  {
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: "tsconfig.eslint.json"
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tsPlugin,
+      prettier: prettierPlugin,
+      react: reactPlugin,
+    },
+    rules: {
+      "react/react-in-jsx-scope": "off",
+      "no-console": "off",
+      "prettier/prettier": "error",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { argsIgnorePattern: "^_" },
+      ],
+    },
+    settings: {
+      react: {
+        version: "18",
+      },
+    },
+  },
+];

jest.config.js

@@ -1,6 +1,4 @@
-module.exports = {
-    testEnvironment: "jsdom",
-    moduleNameMapper: {
-        '^.+.(svg)$': 'jest-transform-stub',
-    }
-};
+export const testEnvironment = "jsdom";
+export const moduleNameMapper = {
+  "^.+.(svg)$": "jest-transform-stub",
+};