Merge remote-tracking branch 'origin/dev' into refactor/ContentHero-content-adjustments

Author: TylerAPfledderer

.all-contributorsrc

@@ -12006,6 +12006,15 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "ecabras",
+      "name": "ecabras",
+      "avatar_url": "https://avatars.githubusercontent.com/u/126670074?v=4",
+      "profile": "https://github.com/ecabras",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/workflows/stale.yml

@@ -19,3 +19,4 @@ jobs:
           stale-pr-message: "This issue is stale because it has been open 30 days with no activity."
           days-before-stale: 30
           days-before-close: -1
+          operations-per-run: 250

.storybook/ChakraDecorator.tsx

@@ -0,0 +1,63 @@
+import {
+  ChakraBaseProvider,
+  extendBaseTheme,
+  useColorMode,
+} from "@chakra-ui/react"
+import type { Decorator } from "@storybook/react"
+
+import theme from "../src/@chakra-ui/theme"
+import { useEffect, useMemo, useState } from "react"
+import i18n from "./i18next"
+
+type DecoratorProps = Parameters<Decorator>
+
+const ColorModeSync = ({ context }: { context: DecoratorProps[1] }) => {
+  const { setColorMode } = useColorMode()
+
+  useEffect(() => {
+    const isDarkMode = localStorage.getItem("chakra-ui-color-mode") === "dark"
+
+    context.globals.colorMode = isDarkMode ? "dark" : "light"
+  }, [])
+
+  useEffect(() => {
+    setColorMode(context.globals.colorMode)
+  }, [setColorMode, context])
+
+  return null
+}
+
+/**
+ * This is a custom local setup of the official Chakra UI Storybook addon.
+ *
+ * A local version was created in response to provide a better sync between
+ * updated local direction to the Chakra theme.
+ *
+ * (This would most likely not be updated in the addon due to ongoing creation of Chakra v3 at the time this
+ * setup was created.)
+ *
+ * Will be deprecated and removed when Chakra v3 is available for migration.
+ *
+ */
+export const ChakraDecorator: Decorator = (getStory, context) => {
+  const [dir, updateDir] = useState<"ltr" | "rtl">()
+
+  i18n.on("languageChanged", (locale) => {
+    const direction = i18n.dir(locale)
+    document.documentElement.dir = direction
+    updateDir(direction)
+  })
+
+  const themeWithDirectionOverride = useMemo(() => {
+    return extendBaseTheme({ direction: dir }, theme)
+  }, [dir])
+
+  return (
+    <ChakraBaseProvider theme={themeWithDirectionOverride}>
+      <>
+        <ColorModeSync context={context} />
+        {getStory(context)}
+      </>
+    </ChakraBaseProvider>
+  )
+}

.storybook/i18next.ts

@@ -6,6 +6,7 @@ export const baseLocales = {
   zh: { title: "中国人", left: "Zh" },
   ru: { title: "Русский", left: "Ru" },
   uk: { title: "українська", left: "Uk" },
+  fa: { title: "فارسی", left: "Fa" },
 }
 
 // Only i18n files named in this array are being exposed to Storybook. Add filenames as necessary.

.storybook/main.ts

@@ -21,7 +21,6 @@ const config: StorybookConfig = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@chakra-ui/storybook-addon",
     "storybook-react-i18next",
   ],
   staticDirs: ["../public"],

.storybook/preview.ts

@@ -1,15 +1,13 @@
-import { extendBaseTheme } from "@chakra-ui/react"
 import type { Preview } from "@storybook/react"
 
 import theme from "../src/@chakra-ui/theme"
 
+import { ChakraDecorator } from "./ChakraDecorator"
 import i18n, { baseLocales } from "./i18next"
 
 import "../src/styles/global.css"
 
-const extendedTheme = extendBaseTheme(theme)
-
-const chakraBreakpointArray = Object.entries(extendedTheme.breakpoints) as [
+const chakraBreakpointArray = Object.entries(theme.breakpoints) as [
   string,
   string
 ][]
@@ -19,6 +17,20 @@ const preview: Preview = {
     locale: "en",
     locales: baseLocales,
   },
+  globalTypes: {
+    colorMode: {
+      name: "Color Mode",
+      description: "Change the color mode",
+      toolbar: {
+        icon: "circlehollow",
+        items: [
+          { value: "light", icon: "circlehollow", title: "Light Mode" },
+          { value: "dark", icon: "circle", title: "Dark Mode" },
+        ],
+      },
+    },
+  },
+  decorators: [ChakraDecorator],
   parameters: {
     i18n,
     actions: { argTypesRegex: "^on[A-Z].*" },
@@ -36,9 +48,6 @@ const preview: Preview = {
         order: ["Atoms", "Molecules", "Organisms", "Templates", "Pages"],
       },
     },
-    chakra: {
-      theme: extendedTheme,
-    },
     layout: "centered",
     // Modify viewport selection to match Chakra breakpoints (or custom breakpoints)
     viewport: {

.storybook/types.ts

@@ -0,0 +1,81 @@
+import type { ArgTypes } from "@storybook/react"
+import type { ThemingProps } from "@chakra-ui/react"
+
+// Type declarations below pulled directly from `@chakra-ui/storybook-addon`
+// with some alteration
+// (Subject to deprecation and removal upon release of Chakra v3)
+
+/**
+ * `keyof` alternative which omits non-string keys
+ */
+type KeyOf<T> = [T] extends [never]
+  ? never
+  : T extends object
+  ? Extract<keyof T, string>
+  : never
+
+export type ThemingArgTypeKey = "variant" | "size"
+
+/**
+ * Create Storybook controls based on a Chakra UI theme component.
+ *
+ * @example
+ * export default {
+ *   title: "Components / Forms / Button",
+ *   argTypes: getThemingArgTypes(theme, "Button"),
+ * }
+ *
+ * @example full example
+ * import { Meta, StoryFn } from "@storybook/react"
+ * import { getThemingArgTypes } from "@chakra-ui/storybook-addon"
+ * import { theme } from "<your-theme>"
+ *
+ * export default {
+ *   title: "Components / Forms / Button",
+ *   argTypes: {
+ *     ...getThemingArgTypes(theme, "Button"),
+ *     children: "string"
+ *   },
+ *   args: { children: "Button" },
+ * } as Meta
+ *
+ * interface StoryProps extends ThemingProps<"Button"> {
+ *   children?: React.ReactNode
+ * }
+ *
+ * export const Basic: StoryFn<StoryProps> = (props) => <Button {...props} />
+ *
+ * @param theme same Chakra UI theme used in .storybook/preview.tsx
+ * @param componentName component name to create the ArgTypes for
+ */
+export function getThemingArgTypes<
+  Theme extends Record<string, any>,
+  ComponentName extends KeyOf<Theme["components"]>
+>(theme: Theme, componentName: ComponentName) {
+  const component = theme.components[componentName]
+  if (!component) {
+    return undefined
+  }
+
+  const argTypes: ArgTypes<
+    Partial<Pick<ThemingProps<ComponentName>, ThemingArgTypeKey>>
+  > = {}
+
+  const variantOptions = Object.keys(component.variants || {})
+  if (variantOptions.length) {
+    argTypes.variant = {
+      type: { name: "enum", value: variantOptions },
+      defaultValue: component.defaultProps?.variant,
+    }
+  }
+
+  const sizeOptions = Object.keys(component.sizes || {})
+  if (sizeOptions.length) {
+    argTypes.size = {
+      type: { name: "enum", value: sizeOptions },
+      defaultValue: component.defaultProps?.size,
+    }
+  }
+
+  return argTypes
+}

README.md

@@ -1838,6 +1838,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ZakGriffith"><img src="https://avatars.githubusercontent.com/u/12072395?v=4?s=100" width="100px;" alt="Zak G"/><br /><sub><b>Zak G</b></sub></a><br /><a href="#tutorial-ZakGriffith" title="Tutorials">✅</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://fanniebarskhian.com"><img src="https://avatars.githubusercontent.com/u/42990794?v=4?s=100" width="100px;" alt="Fannie Barskhian"/><br /><sub><b>Fannie Barskhian</b></sub></a><br /><a href="#maintenance-barskhianfannie" title="Maintenance">🚧</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ksdumont"><img src="https://avatars.githubusercontent.com/u/51958351?v=4?s=100" width="100px;" alt="Keith Dumont"/><br /><sub><b>Keith Dumont</b></sub></a><br /><a href="#content-ksdumont" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ecabras"><img src="https://avatars.githubusercontent.com/u/126670074?v=4?s=100" width="100px;" alt="ecabras"/><br /><sub><b>ecabras</b></sub></a><br /><a href="#content-ecabras" title="Content">🖋</a></td>
     </tr>
   </tbody>
 </table>

netlify.toml

@@ -39,9 +39,21 @@
     path = "en/developers/tutorials/creating-a-wagmi-ui-for-your-contract/"
 
 [functions]
-  included_files = [
-    "./src/intl/**/*",
-    "!./public/**/*",
-    "!./node_modules/@swc/core-linux-x64-musl/**/*",
-    "!./node_modules/@swc/core-linux-x64-gnu/**/*",
-  ]
+
+  [functions.___netlify-odb-handler]
+    included_files = [
+      "./src/intl/**/*",
+      "!./public/**/*",
+      "node_modules/next/dist/server/future/route-modules/pages/vendored/contexts/router-context*",
+      "node_modules/next/dist/server/future/route-modules/pages/vendored/contexts/amp-context*",
+      "node_modules/next/dist/server/future/route-modules/pages/vendored/contexts/head-manager-context*",
+    ]
+
+  [functions.___netlify-handler]
+    included_files = [
+      "./src/intl/**/*",
+      "!./public/**/*",
+      "node_modules/next/dist/server/future/route-modules/pages/vendored/contexts/router-context*",
+      "node_modules/next/dist/server/future/route-modules/pages/vendored/contexts/amp-context*",
+      "node_modules/next/dist/server/future/route-modules/pages/vendored/contexts/head-manager-context*",
+    ]

package.json

@@ -41,7 +41,7 @@
     "lodash.merge": "^4.6.2",
     "lodash.shuffle": "^4.2.0",
     "lodash.union": "^4.6.0",
-    "next": "13.4.8",
+    "next": "^14.2.3",
     "next-i18next": "^14.0.3",
     "next-mdx-remote": "^3.0.8",
     "next-sitemap": "^4.2.3",
@@ -61,7 +61,6 @@
   },
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
-    "@chakra-ui/storybook-addon": "5.1.0",
     "@netlify/plugin-nextjs": "^4.41.3",
     "@storybook/addon-essentials": "7.6.6",
     "@storybook/addon-interactions": "7.6.6",
@@ -73,12 +72,12 @@
     "@types/decompress": "^4.2.7",
     "@types/hast": "^3.0.0",
     "@types/node": "^20.4.2",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "18.2.57",
+    "@types/react-dom": "18.2.19",
     "chromatic": "^10.5.0",
     "decompress": "^4.2.1",
     "eslint": "^8.45.0",
-    "eslint-config-next": "^13.0.0",
+    "eslint-config-next": "^14.2.2",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-storybook": "^0.6.15",