Seek and Destroy: storybook

next.config.js

@@ -1,14 +1,25 @@
-// @ts-check
+const withMDX = require('@next/mdx')({
+  extension: /\.mdx?$/,
+  options: {
+    // If you use remark-gfm, you'll need to use next.config.mjs
+    // as the package is ESM only
+    // https://github.com/remarkjs/remark-gfm#install
+    remarkPlugins: [],
+    rehypePlugins: [],
+    // If you use `MDXProvider`, uncomment the following line.
+    // providerImportSource: "@mdx-js/react",
+  },
+});
 
 /**
  * @type {import('next').NextConfig}
  */
-
 const nextConfig = {
+  // Configure pageExtensions to include md and mdx
+  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
   // ? https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files
   output: 'standalone',
   poweredByHeader: false,
-  // ? types `config` parameter
   /** @param {import('webpack').Configuration} config */
   webpack(config) {
     config?.module?.rules?.push({
@@ -40,4 +51,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = withMDX(nextConfig);

package.json

@@ -9,8 +9,6 @@
     "start": "next start",
     "check-types": "tsc",
     "test": "start-server-and-test 'yarn dev' 3000 'yarn cypress:run'",
-    "storybook:dev": "start-storybook -p 6006 -c .storybook",
-    "storybook:build": "build-storybook -c .storybook",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
     "postinstall": "husky install"
@@ -21,9 +19,12 @@
   "packageManager": "[email protected]",
   "dependencies": {
     "@artsy/fresnel": "6.1.0",
-    "@storybook/react": "6.5.15",
+    "@mdx-js/loader": "2.3.0",
+    "@mdx-js/react": "2.3.0",
+    "@next/mdx": "13.2.4",
     "@tailwindcss/forms": "0.5.3",
     "@tailwindcss/line-clamp": "0.4.2",
+    "@tailwindcss/typography": "0.5.9",
     "@tanstack/react-query": "4.26.1",
     "axios": "1.3.4",
     "clsx": "1.2.1",
@@ -35,17 +36,13 @@
     "tailwindcss": "3.2.7"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "6.5.10",
-    "@storybook/addon-essentials": "6.5.10",
-    "@storybook/addon-links": "6.5.10",
-    "@storybook/addon-postcss": "2.0.0",
-    "@storybook/builder-webpack5": "6.5.10",
-    "@storybook/manager-webpack5": "6.5.10",
     "@types/google.analytics": "0.0.42",
+    "@types/node": "18.15.0",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@typescript-eslint/eslint-plugin": "5.48.2",
     "assert": "2.0.0",
+    "autoprefixer": "10.4.14",
     "eslint": "8.32.0",
     "eslint-config-next": "13.2.3",
     "eslint-config-prettier": "8.6.0",
@@ -54,7 +51,6 @@
     "prettier": "2.8.3",
     "prettier-plugin-tailwindcss": "0.2.1",
     "start-server-and-test": "1.12.1",
-    "storybook-addon-swc": "1.1.8",
     "svg-sprite-loader": "6.0.11",
     "svgo": "3.0.2",
     "svgo-loader": "3.0.3",

src/components/icon/component.tsx

@@ -1,10 +1,8 @@
-import { FC } from 'react';
-
 import cx from 'clsx';
 
 import type { IconProps } from './types';
 
-export const Icon: FC<IconProps> = ({ icon, className = 'w-5 h-5', style }: IconProps) => (
+export const Icon = ({ icon, className = 'w-5 h-5', style }: IconProps) => (
   <svg
     className={cx({
       'fill-current': true,

src/layouts/docs/index.tsx

@@ -0,0 +1,23 @@
+// import Footer from 'containers/footer';
+// import Header from 'containers/header/app';
+
+type LayoutProps = {
+  children: React.ReactNode;
+};
+
+const Layout: React.FC<LayoutProps> = (props: LayoutProps) => {
+  const { children } = props;
+
+  return (
+    <main className={`flex flex-col font-sans antialiased lg:min-h-screen`}>
+      <div className="prose relative grow">
+        {/* Content */}
+        {children}
+      </div>
+
+      {/* <Footer /> */}
+    </main>
+  );
+};
+
+export default Layout;

src/pages/_app.tsx

@@ -11,7 +11,11 @@ import { MediaContextProvider } from 'components/media-query';
 
 import 'styles/globals.css';
 
-const MyApp: React.FC<AppProps> = ({ Component, pageProps }: AppProps) => {
+type PageProps = {
+  dehydratedState: unknown;
+};
+
+const MyApp = ({ Component, pageProps }: AppProps<PageProps>) => {
   const router = useRouter();
 
   // Never ever instantiate the client outside a component, hook or callback as it can leak data