Skip to content

Commit ee8a3fb

Browse files
colinrotherhamcolinrotherham
authored
Merge pull request #270 from NHSDigital/NCRS-4111/NCRS-4106/Upgrade-of-react-storybook-and-scss
2 parents 95ef36b + 7350569 commit ee8a3fb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+920
-805
lines changed

‎.storybook/main.ts‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,29 @@ import tsConfigPaths from 'vite-tsconfig-paths';
44

55
const config: StorybookConfig = {
66
stories: ['../stories/**/*.stories.@(ts|tsx)', '../stories/**/*.mdx'],
7-
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
7+
addons: ['@storybook/addon-links', '@storybook/addon-docs'],
88
framework: {
99
name: '@storybook/react-vite',
1010
options: {},
1111
},
12-
docs: {
13-
autodocs: true,
14-
},
12+
1513
typescript: {
1614
reactDocgen: 'react-docgen-typescript',
1715
},
16+
1817
viteFinal(config) {
1918
return mergeConfig(config, {
2019
plugins: [tsConfigPaths()],
20+
css: {
21+
preprocessorOptions: {
22+
scss: {
23+
quietDeps: true,
24+
loadPaths: ['node_modules'],
25+
},
26+
},
27+
},
2128
});
2229
},
2330
};
31+
2432
export default config;

‎.storybook/manager.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { addons } from '@storybook/manager-api';
1+
import { addons } from 'storybook/manager-api';
22
import nhsTheme from './theme';
33
import { startCase, upperFirst } from 'lodash';
44

‎.storybook/preview.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import './storybook.scss';
2-
import { type Preview } from '@storybook/react';
2+
import { type Preview } from '@storybook/react-vite';
33

44
const preview: Preview = {
55
parameters: {
@@ -18,6 +18,8 @@ const preview: Preview = {
1818
},
1919
},
2020
},
21+
22+
tags: ['autodocs'],
2123
};
2224

2325
export default preview;

‎.storybook/storybook.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
// Allow current nhsuk styles to override legacy
2-
@import 'nhsuk-frontend/dist/nhsuk';
1+
@forward 'nhsuk-frontend/dist/nhsuk';
32

43
.tag-wrapper {
54
display: flex;

‎.storybook/theme.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { create } from '@storybook/theming/create';
1+
import { create } from 'storybook/theming/create';
22
import packageJson from '../package.json' with { type: 'json' };
33

44
export default create({

‎.yarnrc.yml‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,10 @@ packageExtensions:
88
"@types/react": "*"
99
"@types/react-dom": "*"
1010

11-
"@storybook/addon-essentials@*":
12-
peerDependencies:
13-
"@types/react": "*"
14-
"@types/react-dom": "*"
15-
16-
"@storybook/core@*":
17-
peerDependencies:
18-
storybook: "*"
19-
2011
"@storybook/react-vite@*":
2112
peerDependencies:
2213
typescript: "*"
14+
15+
"storybook@*":
16+
peerDependencies:
17+
"@testing-library/dom": "*"

‎package.json‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
{
22
"name": "nhsuk-react-components",
33
"version": "6.0.0-beta.0",
4+
"license": "MIT",
45
"author": {
56
"name": "NHS England"
67
},
7-
"files": [
8-
"src",
9-
"dist"
10-
],
118
"sideEffects": false,
129
"type": "module",
1310
"imports": {
@@ -49,10 +46,15 @@
4946
"main": "dist/cjs/index.cjs",
5047
"module": "dist/esm/index.js",
5148
"types": "dist/esm/index.d.ts",
49+
"files": [
50+
"src",
51+
"dist"
52+
],
5253
"scripts": {
53-
"cleanup": "rm -rf dist/ > /dev/null && rm -rf lib/ > /dev/null",
54-
"storybook": "NODE_ENV=development storybook dev -p 6006",
54+
"cleanup": "rm -rf dist/ > /dev/null",
5555
"build": "yarn cleanup && rollup -c",
56+
"storybook": "NODE_ENV=development storybook dev -p 6006",
57+
"build-storybook": "storybook build",
5658
"test": "jest",
5759
"test:watch": "jest --watch",
5860
"lint": "yarn lint:types && yarn lint:js && yarn lint:prettier",
@@ -62,10 +64,8 @@
6264
"lint:js": "eslint . --max-warnings 0",
6365
"lint:js:fix": "yarn lint:js --fix",
6466
"lint:types": "tsc --build tsconfig.json --pretty",
65-
"build-storybook": "storybook build",
6667
"prepublishOnly": "yarn lint && yarn test && yarn storybook --smoke-test"
6768
},
68-
"license": "MIT",
6969
"devDependencies": {
7070
"@babel/core": "^7.28.4",
7171
"@babel/preset-env": "^7.28.3",
@@ -77,13 +77,9 @@
7777
"@rollup/plugin-commonjs": "^28.0.6",
7878
"@rollup/plugin-node-resolve": "^16.0.1",
7979
"@rollup/plugin-typescript": "^12.1.4",
80-
"@storybook/addon-essentials": "^8.6.14",
81-
"@storybook/addon-links": "^8.6.14",
82-
"@storybook/blocks": "^8.6.14",
83-
"@storybook/manager-api": "^8.6.14",
84-
"@storybook/react": "^8.6.14",
85-
"@storybook/react-vite": "^8.6.14",
86-
"@storybook/theming": "^8.6.14",
80+
"@storybook/addon-docs": "9.1.10",
81+
"@storybook/addon-links": "^9.1.10",
82+
"@storybook/react-vite": "^9.1.10",
8783
"@testing-library/dom": "^10.4.1",
8884
"@testing-library/jest-dom": "^6.9.1",
8985
"@testing-library/react": "^16.3.0",
@@ -97,7 +93,6 @@
9793
"babel-jest": "^30.2.0",
9894
"babel-plugin-module-resolver": "^5.0.2",
9995
"babel-plugin-replace-import-extension": "^1.1.5",
100-
"chromatic": "^6.17.3",
10196
"classnames": "^2.5.1",
10297
"eslint": "^9.37.0",
10398
"eslint-config-prettier": "^10.1.8",
@@ -118,13 +113,13 @@
118113
"react-dom": "^19.2.0",
119114
"rollup": "^4.52.4",
120115
"rollup-plugin-preserve-directives": "^0.4.0",
121-
"sass": "^1.53.0",
122-
"storybook": "^8.6.14",
116+
"sass-embedded": "^1.93.2",
117+
"storybook": "^9.1.10",
123118
"tslib": "^2.8.1",
124119
"typescript": "^5.9.3",
125120
"typescript-eslint": "^8.45.0",
126-
"vite": "^4.5.3",
127-
"vite-tsconfig-paths": "^4.3.2"
121+
"vite": "^7.1.9",
122+
"vite-tsconfig-paths": "^5.1.4"
128123
},
129124
"peerDependencies": {
130125
"classnames": ">=2.5.0",

‎stories/Content Presentation/Details.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { type Meta, type StoryObj } from '@storybook/react';
1+
import { type Meta, type StoryObj } from '@storybook/react-vite';
22
import { Details } from '#components';
33

44
/**

‎stories/Content Presentation/DoAndDontList.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { type Meta, type StoryObj } from '@storybook/react';
1+
import { type Meta, type StoryObj } from '@storybook/react-vite';
22
import { DoAndDontList } from '#components';
33

44
/**

‎stories/Content Presentation/Hero.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { type Meta, type StoryObj } from '@storybook/react';
1+
import { type Meta, type StoryObj } from '@storybook/react-vite';
22
import { Hero } from '#components';
33

44
const meta: Meta<typeof Hero> = {

0 commit comments

Comments
 (0)