Skip to content

Commit

Permalink
chore: Setup storybook
Browse files Browse the repository at this point in the history
  • Loading branch information
ptbrowne committed Mar 15, 2024
1 parent 0cb6e7f commit 2099723
Show file tree
Hide file tree
Showing 7 changed files with 6,719 additions and 191 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,4 @@ __diff_output__
e2e-screenshots
playwright-report

app/public/storybook
39 changes: 39 additions & 0 deletions .storybook/decorators.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { I18nProvider } from "@lingui/react";
import { CssBaseline, ThemeProvider } from "@mui/material";
import Router from "next/router";
import React from "react";
import { i18n } from "../app/locales/locales";

import { SessionProvider } from "next-auth/react";
import { theme } from "../app/themes/federal";
import AsyncLocalizationProvider from "../app/utils/l10n-provider";

export const AppContextDecorator = (Story) => (
<SessionProvider>
<AsyncLocalizationProvider locale="en">
<I18nProvider i18n={i18n}>
<CssBaseline />
<ThemeProvider theme={theme}>
<Story />
</ThemeProvider>
</I18nProvider>
</AsyncLocalizationProvider>
</SessionProvider>
);

export const RouterDecorator = (Story: NextPageWithLayout) => {
const [isRouterReady, setIsRouterReady] = React.useState(false);
React.useEffect(() => {
Router.ready(() => {
setIsRouterReady(true);
});
}, []);

const getLayout = Story.getLayout ?? ((page) => page);

return (
<React.Fragment>
<Story />
</React.Fragment>
);
};
65 changes: 65 additions & 0 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import type { StorybookConfig } from "@storybook/nextjs";
import { dirname, join, resolve } from "path";

// @ts-ignore
import remarkGfm from "remark-gfm";

/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value: string): any {
return dirname(require.resolve(join(value, "package.json")));
}
const config: StorybookConfig = {
stories: ["../app/**/*.docs.mdx", "../app/**/*.stories.@(js|jsx|mjs|ts|tsx)"],

addons: [
getAbsolutePath("@storybook/addon-links"),
getAbsolutePath("@storybook/addon-essentials"),
getAbsolutePath("@storybook/addon-interactions"),
{
name: "@storybook/addon-docs",
options: {
mdxPluginOptions: {
mdxCompileOptions: {
// Necessary to support tables
remarkPlugins: [remarkGfm],
},
},
},
},
],
framework: {
name: getAbsolutePath("@storybook/nextjs"),
options: {},
},
docs: {
autodocs: "tag",
},
webpackFinal: async (config) => {
if (!config.resolve) {
config.resolve = {};
}
config.resolve.extensions = [
".mjs",
".js",
".mts",
".ts",
".jsx",
".tsx",
".json",

// Added .dev.ts
".dev.ts",
];
config.resolve.alias = {
...config.resolve.alias,
"@": resolve(__dirname, "../app"),
"mapbox-gl": "maplibre-gl",
};

return config;
},
};
export default config;
21 changes: 21 additions & 0 deletions .storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import type { Preview } from "@storybook/react";
import type { IndexEntry } from "@storybook/types";
import { AppContextDecorator, RouterDecorator } from "./decorators";

const preview: Preview = {
// @ts-ignore
nextjs: {
router: {
basePath: "/profile",
},
},
decorators: [AppContextDecorator, RouterDecorator],
options: {
storySort: (a: IndexEntry, b: IndexEntry) =>
a.id === b.id
? 0
: a.id.localeCompare(b.id, undefined, { numeric: true }),
},
};

export default preview;
6 changes: 5 additions & 1 deletion app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
"@mdx-js/react": "^1.6.22",
"@mui/lab": "^5.0.0-alpha.74",
"@mui/material": "^5.5.2",
"@mui/styles": "^5.5.0",
"@mui/styles": "5.5.1",
"@mui/utils": "^5.4.4",
"@next/bundle-analyzer": "^11.0.1",
"@next/mdx": "^11.0.1",
Expand All @@ -44,6 +44,8 @@
"@rdfjs/namespace": "^2.0.1",
"@reach/auto-id": "^0.15.0",
"@sentry/nextjs": "^7.7.0",
"@storybook/nextjs": "^7.6.17",
"@storybook/react-vite": "^7.6.17",
"@testing-library/react-hooks": "^8.0.1",
"@tpluscode/rdf-ns-builders": "2.0.1",
"@tpluscode/rdf-string": "^0.2.26",
Expand Down Expand Up @@ -124,6 +126,7 @@
"use-debounce": "^7.0.0",
"use-immer": "^0.5.1",
"use-sync-external-store": "^1.2.0",
"vite": "^5.1.5",
"wellknown": "^0.5.0",
"zustand": "^4.1.1"
},
Expand All @@ -146,6 +149,7 @@
"@graphql-codegen/typescript-urql": "^2.0.9",
"@lingui/cli": "^3.17.2",
"@lingui/macro": "^3.17.2",
"@lingui/vite-plugin": "^4.7.1",
"@mdx-js/loader": "^1.6.22",
"@percy/cli": "^1.26.1",
"@percy/playwright": "^1.0.4",
Expand Down
16 changes: 14 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"dev:rollup": "rollup -c rollup.config.js --watch",
"db:migrate:dev": "DATABASE_URL=postgres:https://postgres:password@localhost:5432/visualization_tool prisma db push",
"db:migrate": "[ -z \"$DATABASE_URL\" ] && echo 'Bypassing database migration, DATABASE_URL not set' || prisma db push",
"build": "yarn graphql:codegen && lingui compile && rollup -c rollup.config.js && next build ./app",
"build": "yarn graphql:codegen && lingui compile && rollup -c rollup.config.js && yarn storybook:build && next build ./app",
"build:npm": "yarn graphql:codegen && lingui compile && BABEL_ENV=NPM_PACKAGE preconstruct build",
"start": "yarn db:migrate && GLOBAL_AGENT_ENVIRONMENT_VARIABLE_NAMESPACE='' NO_PROXY='localhost,127.0.0.1' next start ./app -p $PORT",
"typecheck": "lingui compile && tsc --noEmit -p ./app && tsc --noEmit -p ./embed",
Expand All @@ -32,7 +32,9 @@
"e2e": "percy exec -- playwright test",
"cube": "NODE_ENV=development ts-node app/scripts/cube.ts",
"dev:circular-deps": "madge --warning --extensions js,jsx,ts,tsx -b ./app -c ./app/pages/ --ts-config ./app/tsconfig.json | bun scripts/circular-deps-analysis.ts -",
"github:codegen": "node k6/performance-tests/generate-github-actions.mjs"
"github:codegen": "node k6/performance-tests/generate-github-actions.mjs",
"storybook": "storybook dev -p 6006",
"storybook:build": "storybook build -o app/public/storybook"
},
"dependencies": {
"@babel/runtime": "^7.11.2",
Expand All @@ -49,6 +51,14 @@
"@rollup/plugin-node-resolve": "^13.0.0",
"@rollup/plugin-replace": "^2.3.3",
"@rollup/pluginutils": "^4.0.0",
"@storybook/addon-essentials": "^7.6.17",
"@storybook/addon-interactions": "^7.6.17",
"@storybook/addon-links": "^7.6.17",
"@storybook/addon-onboarding": "^1.0.11",
"@storybook/blocks": "^7.6.17",
"@storybook/nextjs": "^7.6.17",
"@storybook/react": "^7.6.17",
"@storybook/test": "^7.6.17",
"@types/argparse": "^2.0.10",
"@types/eslint": "^8.4.6",
"@types/fs-extra": "^9.0.4",
Expand All @@ -60,6 +70,7 @@
"babel-plugin-macros": "^3.0.0",
"eslint": "^7.29.0",
"eslint-config-next": "^12.0.0",
"eslint-plugin-storybook": "^0.8.0",
"eslint-plugin-visualize-admin": "link:./eslint/visualize-admin",
"fs-extra": "^10.0.0",
"import-move-codemod": "^0.0.3",
Expand All @@ -72,6 +83,7 @@
"rollup-plugin-node-builtins": "^2.1.2",
"rollup-plugin-terser": "^7.0.2",
"start-server-and-test": "^1.11.4",
"storybook": "^7.6.17",
"typescript": "^4.9.3"
},
"workspaces": [
Expand Down
Loading

0 comments on commit 2099723

Please sign in to comment.