update doc packages

gsoft-inc · Oct 24, 2023 · cf1d79e · cf1d79e
1 parent ec03a3a
commit cf1d79e
Show file tree

Hide file tree

Showing 9 changed files with 2,394 additions and 3,131 deletions.
diff --git a/apps/docs/.storybook/global.css b/apps/docs/.storybook/global.css
@@ -1,4 +1,4 @@
-@import "../app/tokens.css";
+@import url("@/styles/tokens.css");
 
 .hd-container {
     width: 100vw;

diff --git a/apps/docs/.storybook/main.ts b/apps/docs/.storybook/main.ts
@@ -1,5 +1,5 @@
-import type { StorybookConfig } from "@storybook/nextjs"
-import path = require("path");
+import type { StorybookConfig } from "@storybook/nextjs";
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
 const config: StorybookConfig = {
     stories: ["../components/**/*.stories.@(ts|tsx)"],
@@ -16,11 +16,33 @@ const config: StorybookConfig = {
         autodocs: "tag",
     },
     webpackFinal: async (config) => {
-        config.resolve.alias = {
-            ...config.resolve.alias,
-            '@/components': path.resolve(__dirname, "../components"),
-            '@/configs': path.resolve(__dirname, "../configs"),
-        };
+        // Configure aliases
+        if(config.resolve) {
+            config.resolve.plugins = [
+                ...(config.resolve.plugins || []),
+                new TsconfigPathsPlugin({
+                    extensions: config.resolve.extensions,
+                }),
+            ];
+        }
+
+        // Configure SVGR
+        // taken from here: https://github.com/storybookjs/storybook/tree/next/code/frameworks/nextjs#custom-webpack-config
+        config.module = config.module || {};
+        config.module.rules = config.module.rules || [];
+
+        // This modifies the existing image rule to exclude .svg files
+        // since you want to handle those files with @svgr/webpack
+        const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg'));
+        if (imageRule) {
+            imageRule['exclude'] = /\.svg$/;
+        }
+
+        // Configure .svg files to be loaded with @svgr/webpack
+        config.module.rules.push({
+            test: /\.svg$/,
+            use: ['@svgr/webpack'],
+        });
 
         return config;
     },

diff --git a/apps/docs/.storybook/preview.tsx b/apps/docs/.storybook/preview.tsx
@@ -1,5 +1,5 @@
-import type { Preview } from "@storybook/react"
-
+import type { Preview } from "@storybook/react";
+import React from "react";
 import "../app/globals.css";
 
 // Storybook styles

diff --git a/apps/docs/components/ui/header/Header.tsx b/apps/docs/components/ui/header/Header.tsx
@@ -2,16 +2,16 @@
 
 import Link from "next/link";
 
-import { useState, useEffect } from "react";
-import { navigation } from "@/configs/navigation";
 import ThemeSwitch from "@/components/themeSwitch/ThemeSwitch";
 import IconButton from "@/components/ui/iconButton/IconButton";
 import MobileMenu from "@/components/ui/mobileMenu/MobileMenu";
 import MobileMenuTrigger from "@/components/ui/mobileMenu/MobileMenuTrigger";
 import Nav from "@/components/ui/nav/Nav";
+import { navigation } from "@/configs/navigation";
+import { useEffect, useState } from "react";
 
-import "./header.css";
 import HopperLogo from "./assets/hopper-logo.svg";
+import "./header.css";
 
 const Header = () => {
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

diff --git a/apps/docs/contentlayer.config.js b/apps/docs/contentlayer.config.js
@@ -99,9 +99,14 @@ const rehypeOptions = {
         }
     },
     onVisitHighlightedLine(node) {
-        // Each line node by default has `class="line"`.
-        node.properties.className.push("highlighted");
+        const nodeClass = node.properties.className;
+        if (nodeClass && nodeClass.length > 0) {
+            node.properties.className.push("highlighted");
+        } else {
+            node.properties.className = ["highlighted"];
+        }
     },
+
     onVisitHighlightedWord(node, id) {
         // Each word node has no className by default.
         node.properties.className = ["word"];

diff --git a/apps/docs/next.config.js b/apps/docs/next.config.js
@@ -5,9 +5,6 @@ const nextConfig = {
     reactStrictMode: true,
     swcMinify: true,
     pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
-    experimental: {
-        appDir: true
-    },
     transpilePackages: ["@hopper-ui"],
     images: {
         remotePatterns: [

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -14,33 +14,34 @@
         "build:storybook": "storybook build"
     },
     "dependencies": {
-        "contentlayer": "0.3.1",
-        "next": "13.4.10",
-        "next-contentlayer": "0.3.1",
+        "contentlayer": "0.3.4",
+        "next": "13.5.6",
+        "next-contentlayer": "0.3.4",
         "react": "18.2.0",
-        "react-aria-components": "1.0.0-alpha.4",
+        "react-aria-components": "1.0.0-beta.2",
         "react-dom": "18.2.0",
-        "react-toggle": "^4.1.3",
-        "rehype-pretty-code": "^0.9.6",
-        "unist-util-visit": "^4.1.2"
+        "react-toggle": "4.1.3",
+        "rehype-pretty-code": "0.10.1",
+        "unist-util-visit": "5.0.0"
     },
     "devDependencies": {
-        "@storybook/addon-essentials": "^7.0.2",
-        "@storybook/addon-interactions": "^7.0.2",
-        "@storybook/addon-links": "^7.0.2",
-        "@storybook/blocks": "^7.0.2",
-        "@storybook/nextjs": "^7.0.2",
-        "@storybook/react": "^7.0.2",
-        "@storybook/testing-library": "^0.0.14-next.2",
-        "@svgr/webpack": "^8.0.1",
-        "@types/node": "18.15.11",
-        "@types/react": "18.2.12",
-        "@types/react-dom": "18.0.11",
-        "classnames": "^2.3.2",
-        "eslint": "8.37.0",
-        "eslint-config-next": "13.3.0",
-        "eslint-plugin-storybook": "^0.6.11",
-        "storybook": "^7.0.2",
-        "typescript": "5.0.3"
+        "@storybook/addon-essentials": "7.5.1",
+        "@storybook/addon-interactions": "7.5.1",
+        "@storybook/addon-links": "7.5.1",
+        "@storybook/blocks": "7.5.1",
+        "@storybook/nextjs": "7.5.1",
+        "@storybook/react": "7.5.1",
+        "@storybook/testing-library": "0.2.2",
+        "@svgr/webpack": "8.1.0",
+        "@types/node": "20.8.8",
+        "@types/react": "18.2.31",
+        "@types/react-dom": "18.2.14",
+        "classnames": "2.3.2",
+        "eslint": "8.52.0",
+        "eslint-config-next": "13.5.6",
+        "eslint-plugin-storybook": "0.6.15",
+        "storybook": "7.5.1",
+        "tsconfig-paths-webpack-plugin":"4.1.0",
+        "typescript": "5.2.2"
     }
 }
diff --git a/package.json b/package.json
@@ -32,9 +32,9 @@
     },
     "dependencies": {
         "@changesets/cli": "^2.26.2",
-        "@netlify/plugin-nextjs": "4.36.0",
-        "@types/node": "18.15.11",
-        "storybook": "7.2.0"
+        "@netlify/plugin-nextjs": "4.41.1",
+        "@types/node": "20.8.8",
+        "storybook": "7.5.1"
     },
     "devDependencies": {
         "@hopper-ui/tokens": "workspace:*",