Skip to content

Commit

Permalink
Merge pull request #766 from danskernesdigitalebibliotek/DDFNEXT-220-…
Browse files Browse the repository at this point in the history
…upgrade-storybook2

DDFNEXT-220: Upgrade Storybook and Prettier
  • Loading branch information
JacobArrow authored Nov 7, 2024
2 parents a7dcd3c + ea77af3 commit 940cc0a
Show file tree
Hide file tree
Showing 194 changed files with 6,981 additions and 10,906 deletions.
12 changes: 10 additions & 2 deletions .storybook/main.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
staticDirs: ["../public"],

addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/preset-create-react-app",
"@whitespace/storybook-addon-html",
"storybook-addon-designs",
"@storybook/addon-designs",
"@storybook/addon-a11y",
],

typescript: {
check: true,
checkOptions: {},
Expand All @@ -18,4 +21,9 @@ module.exports = {
prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
},
},

framework: {
name: "@storybook/react-webpack5",
options: {},
},
};
9 changes: 9 additions & 0 deletions .storybook/modes.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
// Set the viewport widths that Chromatic tests with globally.
export const allModes = {
xs: {
viewport: "xs",
},
xl: {
viewport: "xl",
},
};
22 changes: 18 additions & 4 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import "../src/styles/css/base.css";
import { allModes } from "../.storybook/modes";

export const parameters = {
layout: "fullscreen",
actions: { argTypesRegex: "^on[A-Z].*" },
Expand All @@ -7,13 +10,24 @@ export const parameters = {
date: /Date$/,
},
},
viewport: {
viewports: {
xs: { name: "XSmall", styles: { width: "400px", height: "900px" } },
sm: { name: "Small", styles: { width: "640px", height: "900px" } },
md: { name: "Medium", styles: { width: "768px", height: "900px" } },
lg: { name: "Large", styles: { width: "1024px", height: "900px" } },
xl: { name: "XL", styles: { width: "1200px", height: "900px" } },
"2xl": { name: "2XL", styles: { width: "1536px", height: "900px" } },
},
},
chromatic: {
// Notifies Chromatic to pause the animations when they finish at a global level
// This is because Chromatic doesn't show the cover image when the animation starts with opacity 0
pauseAnimationAtEnd: true,
// Set the viewport widths that Chromatic tests with globally.
// 400 lies between our screen-xs & screen-s variables.
// 1200 is the chromatic viewport we were using as default before adding an extra one for phones.
viewports: [400, 1200],
// Instructs Chromatic to test all stories at the specified viewport
modes: {
"400px": allModes["xs"],
"1200px": allModes["xl"],
},
},
};
44 changes: 23 additions & 21 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
"version": "0.1.0",
"repository": "https://github.com/danskernesdigitalebibliotek/dpl-design-system",
"scripts": {
"storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006 -s public",
"storybook:axe": "NODE_OPTIONS=--openssl-legacy-provider build-storybook && axe-storybook",
"build-storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook -s public",
"storybook": "storybook dev -p 6006",
"storybook:axe": "storybook build && axe-storybook",
"build-storybook": "storybook build",
"js:eslint": "eslint 'src/**/*.{js,ts,tsx}' --max-warnings=0",
"js:prettier": "prettier 'src/**/*.{js,ts,tsx}'",
"js:lint": "concurrently 'yarn:js:eslint' 'yarn:js:prettier -- --check' --raw",
Expand Down Expand Up @@ -40,14 +40,16 @@
]
},
"devDependencies": {
"@chanzuckerberg/axe-storybook-testing": "^6.0.1",
"@storybook/addon-a11y": "^6.5.9",
"@storybook/addon-actions": "^6.5.9",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/addon-links": "^6.5.9",
"@storybook/node-logger": "^6.3.7",
"@storybook/preset-create-react-app": "^3.2.0",
"@storybook/react": "^6.5.9",
"@chanzuckerberg/axe-storybook-testing": "^8.2.1",
"@storybook/addon-a11y": "^8.3.6",
"@storybook/addon-actions": "^8.3.6",
"@storybook/addon-designs": "^8.0.3",
"@storybook/addon-essentials": "^8.3.6",
"@storybook/addon-links": "^8.3.6",
"@storybook/node-logger": "^8.3.6",
"@storybook/preset-create-react-app": "^8.3.6",
"@storybook/react": "^8.3.6",
"@storybook/react-webpack5": "^8.3.6",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^12.1.5",
"@testing-library/user-event": "^14.5.2",
Expand All @@ -58,7 +60,7 @@
"@types/react-helmet": "^6.1.11",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"@whitespace/storybook-addon-html": "^5.0.0",
"@whitespace/storybook-addon-html": "^6.1.1",
"chokidar-cli": "^3.0.0",
"clsx": "^2.1.1",
"concurrently": "^8.2.2",
Expand All @@ -69,28 +71,28 @@
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-jsx-a11y": "^6.10.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-webpack-plugin": "^4.2.0",
"flatpickr": "^4.6.13",
"json": "^11.0.0",
"markdownlint-cli2": "^0.4.0",
"postcss": "^8.4.47",
"prettier": "^2.7.1",
"prettier": "^3.3.3",
"react": "^17.0.2",
"react-docgen-typescript": "^2.1.0",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-scripts": "^4.0.3",
"react-scripts": "^5.0.0",
"react-syntax-highlighter": "^15.6.1",
"sass": "1.78.0",
"skeleton-screen-css": "^1.1.0",
"storybook-addon-designs": "^6.2.1",
"stylelint": "^14.16.1",
"stylelint-config-prettier": "^9.0.5",
"stylelint-config-recommended-scss": "^8.0.0",
"stylelint-prettier": "^3.0.0",
"stylelint-scss": "^5.3.2",
"storybook": "^8.3.6",
"stylelint": "^16.0.0",
"stylelint-config-recommended-scss": "^14.0.0",
"stylelint-prettier": "^5.0.2",
"stylelint-scss": "^6.7.0",
"typescript": "^4.7.4",
"web-vitals": "^4.2.4"
},
Expand Down
2 changes: 1 addition & 1 deletion src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@ ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
document.getElementById("root"),
);
21 changes: 11 additions & 10 deletions src/stories/Blocks/advanced-search/AdvancedSearch.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ComponentStory } from "@storybook/react";
import { withDesign } from "storybook-addon-designs";
import { StoryFn } from "@storybook/react";

import {
AdvancedSearch as AdvancedSearchComp,
AdvancedSearchProps,
Expand All @@ -8,30 +8,31 @@ import {
export default {
title: "Blocks / Advanced Search",
component: AdvancedSearchComp,
decorators: [withDesign],
argTypes: {
inputPlaceholder: {
name: "Input placeholder",
defaultValue: "Søgeterm",
control: { type: "text" },
},
inputAmount: {
name: "Amount of input rows",
defaultValue: 2,
control: { type: "number" },
},
cqlPreviewText: {
name: "CQL preview text",
defaultValue:
"title = harry potter AND subtitle = and the philosophers stone",
control: { type: "text" },
},
isCqlSearch: {
name: "Is CQL search?",
defaultValue: false,
control: { type: "boolean" },
},
},
args: {
inputPlaceholder: "Søgeterm",
inputAmount: 2,
cqlPreviewText:
"title = harry potter AND subtitle = and the philosophers stone",
isCqlSearch: false,
},
parameters: {
design: {
type: "figma",
Expand All @@ -40,8 +41,8 @@ export default {
},
};

const Template: ComponentStory<typeof AdvancedSearchComp> = (
args: AdvancedSearchProps
const Template: StoryFn<typeof AdvancedSearchComp> = (
args: AdvancedSearchProps,
) => <AdvancedSearchComp {...args} />;

export const AdvancedSearch = Template.bind({});
Expand Down
52 changes: 19 additions & 33 deletions src/stories/Blocks/article/Article.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,49 +1,35 @@
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { withDesign } from "storybook-addon-designs";
import { StoryFn, Meta } from "@storybook/react";

import Article from "./Article";

export default {
title: "Blocks / Article page",
component: Article,
decorators: [withDesign],
argTypes: {
title: {
defaultValue: "Jesper Stein vinder Læsernes Bogpris for Rampen’",
},
subtitle: {
defaultValue:
"Jesper Stein har begået en hudløst ærlig og tankevækkende skildring af en skilsmisseramt familie. En selvbiografisk roman, som har ramt læserne i hjertet.",
},
category: {
defaultValue: "Netmedier",
},
author: {
defaultValue: "Lene Kuhlmann Frandsen",
},
date: {
defaultValue: "08. April 21",
},
tags: {
defaultValue: [
"dans",
"contemporary",
"modern",
"scenekunst",
"digt",
"3-8 årige",
],
},
title: { control: "text" },
subtitle: { control: "text" },
category: { control: "text" },
author: { control: "text" },
date: { control: "text" },
tags: { control: "object" },
},
args: {
title: "Jesper Stein vinder Læsernes Bogpris for Rampen'",
subtitle:
"Jesper Stein har begået en hudløst ærlig og tankevækkende skildring af en skilsmisseramt familie. En selvbiografisk roman, som har ramt læserne i hjertet.",
category: "Netmedier",
author: "Lene Kuhlmann Frandsen",
date: "08. April 21",
tags: ["dans", "contemporary", "modern", "scenekunst", "digt", "3-8 årige"],
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7477%3A39048&mode=dev",
},
},
} as ComponentMeta<typeof Article>;
} as Meta<typeof Article>;

const Template: ComponentStory<typeof Article> = (args) => (
<Article {...args} />
);
const Template: StoryFn<typeof Article> = (args) => <Article {...args} />;

export const Default = Template.bind({});
42 changes: 18 additions & 24 deletions src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ComponentStory } from "@storybook/react";
import { withDesign } from "storybook-addon-designs";
import { StoryFn } from "@storybook/react";

import clsx from "clsx";
import { Autosuggest, AutosuggestProps } from "./Autosuggest";
import AutosuggestMaterialStories from "../../Library/autosuggest-material/AutosuggestMaterial.stories";
Expand All @@ -9,11 +9,14 @@ import { autosuggestMaterialSuggestions } from "../../Library/autosuggest-materi
export default {
title: "Blocks / Autosuggest",
component: Autosuggest,
decorators: [withDesign],
argTypes: {
...AutosuggestMaterialStories.argTypes,
...AutosuggestTextStories.argTypes,
},
args: {
...AutosuggestMaterialStories.args,
...AutosuggestTextStories.args,
},
parameters: {
design: {
type: "figma",
Expand All @@ -22,9 +25,7 @@ export default {
},
};

const Template: ComponentStory<typeof Autosuggest> = (
args: AutosuggestProps
) => (
const Template: StoryFn<typeof Autosuggest> = (args: AutosuggestProps) => (
// Inline styling should be avoided, but this is not really a part of the
// component - rather, a fix, to make sure the autosuggests look correct,
// even when they're not in the menu structure.
Expand All @@ -35,25 +36,18 @@ const Template: ComponentStory<typeof Autosuggest> = (

export const Default = Template.bind({});

const getStoryArguments = (suggestions: number) => {
return {
...AutosuggestTextStories.argTypes,
materialSuggestions: {
...{ ...AutosuggestMaterialStories.argTypes?.materialSuggestions },
defaultValue: autosuggestMaterialSuggestions.slice(0, suggestions),
},
classes: {
...{ ...AutosuggestMaterialStories.argTypes?.classes },
defaultValue: clsx({
"autosuggest__material-item--two": suggestions === 2,
"autosuggest__material-item--one": suggestions === 1,
}),
},
};
};
const getStoryArguments = (suggestions: number) => ({
args: {
materialSuggestions: autosuggestMaterialSuggestions.slice(0, suggestions),
classes: clsx({
"autosuggest__material-item--two": suggestions === 2,
"autosuggest__material-item--one": suggestions === 1,
}),
},
});

export const TwoMaterials = Template.bind({});
TwoMaterials.argTypes = getStoryArguments(2);
TwoMaterials.args = getStoryArguments(2).args;

export const OneMaterial = Template.bind({});
OneMaterial.argTypes = getStoryArguments(1);
OneMaterial.args = getStoryArguments(1).args;
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { StoryFn, Meta } from "@storybook/react";
import ContentListPage from "./ContentListPage";

export default {
Expand All @@ -11,10 +11,8 @@ export default {
},
layout: "fullscreen",
},
} as ComponentMeta<typeof ContentListPage>;
} as Meta<typeof ContentListPage>;

const Template: ComponentStory<typeof ContentListPage> = () => (
<ContentListPage />
);
const Template: StoryFn<typeof ContentListPage> = () => <ContentListPage />;

export const Default = Template.bind({});
Loading

0 comments on commit 940cc0a

Please sign in to comment.