Skip to content

Commit b6fbb15

Browse files
VictoriaBeilsten-EdmandsVictoriaBeilsten-Edmands
authored
Merge pull request #17 from DiamondLightSource/vbe/gh-actions
Add GH actions
2 parents b99bccc + fb0f25e commit b6fbb15

38 files changed

+3241
-1944
lines changed

‎.github/workflows/deploy-storybook.yaml‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
name: Build and Publish storybook to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- "main"
7+
jobs:
8+
deploy:
9+
environment:
10+
name: github-pages
11+
url: ${{ steps.build-publish.outputs.page_url }}
12+
13+
permissions:
14+
pages: write
15+
id-token: write
16+
17+
runs-on: ubuntu-latest
18+
strategy:
19+
matrix:
20+
node-version: ["22.12.0"]
21+
22+
steps:
23+
- uses: actions/checkout@v4
24+
25+
- uses: pnpm/action-setup@v4
26+
with:
27+
run_install: |
28+
args: [ --force ]
29+
30+
- name: Set Node.js ${{ matrix.node-version }}
31+
uses: actions/setup-node@v4
32+
with:
33+
node-version: ${{ matrix.node-version }}
34+
cache: pnpm
35+
36+
- name: Build and publish
37+
id: build-publish
38+
uses: bitovi/[email protected]
39+
with:
40+
checkout: false
41+
path: storybook/storybook-static
42+
install_command: echo Already done
43+
build_command: pnpm build:storybook

‎.github/workflows/npm-publish.yaml‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
2+
# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
3+
4+
name: Node.js Package
5+
6+
on:
7+
push:
8+
tags:
9+
- v*
10+
11+
12+
jobs:
13+
publish-npm:
14+
runs-on: ubuntu-latest
15+
steps:
16+
- name: Checkout
17+
uses: actions/checkout@v4
18+
19+
- name: Setup pnpm
20+
uses: pnpm/action-setup@v4
21+
with:
22+
run_install: |
23+
args: [ --force ]
24+
25+
- name: Setup node
26+
uses: actions/setup-node@v4
27+
with:
28+
node-version: '22.12.0'
29+
registry-url: https://registry.npmjs.org/
30+
scope: '@diamondlightsource'
31+
cache: pnpm
32+
33+
- name: Install dependencies
34+
run: pnpm install --frozen-lockfile
35+
36+
- name: Build
37+
run: pnpm build
38+
39+
- name: Test
40+
run: pnpm jest
41+
42+
- name: Publish
43+
run: pnpm publish -r --no-git-checks --access public
44+
env:
45+
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN_DLS}}

‎.github/workflows/test-build.yaml‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# This workflow will install dependencies, run tests and lint
2+
3+
name: Run CI
4+
5+
on:
6+
push:
7+
branches: [ "main" ]
8+
tags: ['v*']
9+
pull_request:
10+
types: [ opened, synchronize ]
11+
12+
jobs:
13+
build:
14+
runs-on: ubuntu-latest
15+
strategy:
16+
fail-fast: false
17+
matrix:
18+
node-version: ["22.12.0"]
19+
20+
steps:
21+
- uses: actions/checkout@v4
22+
23+
- name: Install dependencies
24+
uses: pnpm/action-setup@v4
25+
with:
26+
run_install: |
27+
args: [ --force ]
28+
29+
- name: Set Node.js ${{ matrix.node-version }}
30+
uses: actions/setup-node@v4
31+
with:
32+
node-version: ${{ matrix.node-version }}
33+
cache: pnpm
34+
35+
- name: Run Typescript tests and lint client code
36+
run: |
37+
pnpm lint
38+
pnpm jest
39+
pnpm build

‎.storybook/ThemeSwapper.tsx‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,38 @@
1-
import {useColorScheme} from "@mui/material";
1+
import { useColorScheme } from "@mui/material";
22
import * as React from "react";
3-
import {useEffect} from "react";
3+
import { useEffect } from "react";
4+
5+
interface Globals {
6+
theme: string;
7+
themeMode: string;
8+
}
9+
10+
interface Context {
11+
globals: Globals;
12+
}
413

514
export interface ThemeSwapperProps {
6-
context: any,
15+
context: Context;
716
children: React.ReactNode;
817
}
918

10-
export const TextLight = 'Mode: Light'
11-
export const TextDark = 'Mode: Dark'
19+
export const TextLight = "Mode: Light";
20+
export const TextDark = "Mode: Dark";
1221

13-
const ThemeSwapper = ( {context, children}: ThemeSwapperProps ) => {
22+
const ThemeSwapper = ({ context, children }: ThemeSwapperProps) => {
1423
const { mode, setMode } = useColorScheme();
1524
//if( !mode ) return
16-
25+
1726
useEffect(() => {
1827
const selectedThemeMode = context.globals.themeMode || TextLight;
19-
setMode((selectedThemeMode == TextLight) ? "light" : "dark")
20-
},[context.globals.themeMode]);
21-
22-
return <div style={{backgroundColor: mode === "light" ? "#fafafa" : "#050505"}}>
23-
{children}
24-
</div>
28+
setMode(selectedThemeMode == TextLight ? "light" : "dark");
29+
}, [context.globals.themeMode]);
30+
31+
return (
32+
<div style={{ backgroundColor: mode === "light" ? "#fafafa" : "#050505" }}>
33+
{children}
34+
</div>
35+
);
2536
};
2637

27-
export { ThemeSwapper };
38+
export { ThemeSwapper, Context };

‎.storybook/main.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ const config: StorybookConfig = {
77
"@storybook/addon-essentials",
88
"@chromatic-com/storybook",
99
"@storybook/addon-interactions",
10-
'@storybook/addon-links',
11-
'storybook-dark-mode'
10+
"@storybook/addon-links",
11+
"@storybook/addon-toolbars",
12+
"storybook-dark-mode",
1213
],
1314
framework: {
1415
name: "@storybook/react-webpack5",

‎.storybook/preview.tsx‎

Lines changed: 38 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,70 @@
1-
import React from 'react';
2-
import {CssBaseline} from "@mui/material";
1+
import React from "react";
2+
import { CssBaseline } from "@mui/material";
33
import type { Preview } from "@storybook/react";
44

5-
import {ThemeProvider} from '../src'
6-
import {GenericTheme, DiamondTheme} from '../src'
5+
import { ThemeProvider } from "../src";
6+
import { GenericTheme, DiamondTheme } from "../src";
77

8-
import {ThemeSwapper, TextLight, TextDark} from "./ThemeSwapper";
8+
import { Context, ThemeSwapper, TextLight, TextDark } from "./ThemeSwapper";
99

10-
const TextThemeBase = 'Theme: Generic'
11-
const TextThemeDiamond = 'Theme: Diamond'
10+
const TextThemeBase = "Theme: Generic";
11+
const TextThemeDiamond = "Theme: Diamond";
1212

1313
export const decorators = [
14-
(StoriesWithPadding:any) => {
15-
return <div style={{padding: '2em'}}>
16-
<StoriesWithPadding />
17-
</div>
14+
(StoriesWithPadding: React.FC) => {
15+
return (
16+
<div style={{ padding: "2em" }}>
17+
<StoriesWithPadding />
18+
</div>
19+
);
1820
},
19-
(StoriesWithThemeSwapping:any, context: any) => {
20-
return <ThemeSwapper context={context}>
21-
<StoriesWithThemeSwapping/>
22-
</ThemeSwapper>
21+
(StoriesWithThemeSwapping: React.FC, context: Context) => {
22+
return (
23+
<ThemeSwapper context={context}>
24+
<StoriesWithThemeSwapping />
25+
</ThemeSwapper>
26+
);
2327
},
24-
(StoriesWithThemeProvider:any, context:any) => {
28+
(StoriesWithThemeProvider: React.FC, context: Context) => {
2529
const selectedTheme = context.globals.theme || TextThemeBase;
2630
const selectedThemeMode = context.globals.themeMode || TextLight;
2731

28-
return <ThemeProvider
29-
theme={(selectedTheme == TextThemeBase) ? GenericTheme : DiamondTheme}
30-
defaultMode={(selectedThemeMode == TextLight) ? "light" : "dark"}
31-
>
32-
<CssBaseline/>
33-
<StoriesWithThemeProvider/>
34-
</ThemeProvider>
32+
return (
33+
<ThemeProvider
34+
theme={selectedTheme == TextThemeBase ? GenericTheme : DiamondTheme}
35+
defaultMode={selectedThemeMode == TextLight ? "light" : "dark"}
36+
>
37+
<CssBaseline />
38+
<StoriesWithThemeProvider />
39+
</ThemeProvider>
40+
);
3541
},
3642
];
3743

3844
const preview: Preview = {
3945
globalTypes: {
4046
theme: {
41-
description: 'Global theme for components',
47+
description: "Global theme for components",
4248
toolbar: {
43-
title: 'Theme',
44-
icon: 'cog',
49+
title: "Theme",
50+
icon: "cog",
4551
items: [TextThemeBase, TextThemeDiamond],
4652
dynamicTitle: true,
4753
},
4854
},
4955
themeMode: {
50-
description: 'Global theme mode for components',
56+
description: "Global theme mode for components",
5157
toolbar: {
52-
title: 'Theme Mode',
53-
icon: 'mirror',
58+
title: "Theme Mode",
59+
icon: "mirror",
5460
items: [TextLight, TextDark],
5561
dynamicTitle: true,
5662
},
5763
},
5864
},
5965
initialGlobals: {
60-
theme: 'Theme: Diamond',
61-
themeMode: 'Mode: Light',
66+
theme: "Theme: Diamond",
67+
themeMode: "Mode: Light",
6268
},
6369
parameters: {
6470
controls: {
@@ -68,7 +74,7 @@ const preview: Preview = {
6874
},
6975
},
7076
backgrounds: { disable: true },
71-
layout: 'fullscreen',
77+
layout: "fullscreen",
7278
},
7379
};
7480

‎babel.config.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
module.exports = {
2-
presets: [
3-
"@babel/preset-env",
4-
["@babel/preset-react",{runtime: 'automatic'}],
5-
"@babel/preset-typescript",
6-
],
7-
};
1+
export const presets = [
2+
"@babel/preset-env",
3+
["@babel/preset-react", { runtime: "automatic" }],
4+
"@babel/preset-typescript",
5+
];

‎eslint.config.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { FlatCompat } from "@eslint/eslintrc";
2+
import js from "@eslint/js";
3+
import tsPlugin from "@typescript-eslint/eslint-plugin";
4+
import tsParser from "@typescript-eslint/parser";
5+
import reactPlugin from "eslint-plugin-react";
6+
import prettierPlugin from "eslint-plugin-prettier";
7+
8+
const compat = new FlatCompat();
9+
10+
export default [
11+
{ignores: [
12+
"**/storybook-static/**",
13+
"**/*.css",
14+
"**/*.json",
15+
"**/*.d.ts",
16+
"**/dist/*",
17+
"**/*.html",
18+
"**/*.svg",
19+
"**/*.md",
20+
"babel.config.js",
21+
"eslint.config.js",
22+
"jest.config.js",
23+
"rollup.config.mjs",
24+
]},
25+
js.configs.recommended,
26+
...compat.extends("plugin:@typescript-eslint/recommended"),
27+
...compat.extends("plugin:react/recommended"),
28+
...compat.extends("prettier"),
29+
{
30+
languageOptions: {
31+
parser: tsParser,
32+
parserOptions: {
33+
project: "tsconfig.eslint.json"
34+
},
35+
},
36+
plugins: {
37+
"@typescript-eslint": tsPlugin,
38+
prettier: prettierPlugin,
39+
react: reactPlugin,
40+
},
41+
rules: {
42+
"react/react-in-jsx-scope": "off",
43+
"no-console": "off",
44+
"prettier/prettier": "error",
45+
"@typescript-eslint/no-unused-vars": [
46+
"error",
47+
{ argsIgnorePattern: "^_" },
48+
],
49+
},
50+
settings: {
51+
react: {
52+
version: "18",
53+
},
54+
},
55+
},
56+
];

‎jest.config.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
module.exports = {
2-
testEnvironment: "jsdom",
3-
moduleNameMapper: {
4-
'^.+.(svg)$': 'jest-transform-stub',
5-
}
6-
};
1+
export const testEnvironment = "jsdom";
2+
export const moduleNameMapper = {
3+
"^.+.(svg)$": "jest-transform-stub",
4+
};

0 commit comments

Comments
 (0)