chore: move storybooks to package

.github/workflows/chromatic.yml

@@ -34,7 +34,6 @@ jobs:
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN_ELEMENTS_REACT }}
           exitOnceUploaded: true
-          workingDir: packages/elements-react-stories
+          workingDir: packages/elements-react
           storybookBuildDir: storybook-static
           onlyChanged: true
-          externals: packages/elements-react/**

eslint.config.mjs

@@ -15,7 +15,7 @@ const config = tseslint.config([
   {
     ignores: [
       "**/assets/*.js",
-      "!.storybook",
+      "**/.storybook/**",
       "**/dist/**",
       "**/storybook-static/**",
       "**/*.config.{js,mjs,cjs,ts}",
@@ -217,6 +217,12 @@ const config = tseslint.config([
       },
     },
   },
+  {
+    files: ["packages/elements-react/stories/**/*.{js,jsx,ts,tsx}"],
+    rules: {
+      "@typescript-eslint/no-require-imports": "off",
+    },
+  }
 ])
 
 export default config

package.json

@@ -113,6 +113,7 @@
     "vite-plugin-dts": "4.1.0",
     "vite-plugin-require": "1.2.14",
     "vite-plugin-static-copy": "1.0.6",
+    "vite-plugin-svgr": "4.3.0",
     "vite-tsconfig-paths": "5.0.1",
     "which-builtin-type": "1.1.4"
   },

packages/elements-react/.storybook/main.ts

@@ -0,0 +1,51 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import type { StorybookConfig } from "@storybook/react-vite"
+
+import path from "path"
+import { mergeConfig } from "vite"
+import vitePluginRequire from "vite-plugin-require"
+import svgr from "vite-plugin-svgr"
+
+const config: StorybookConfig = {
+  stories: ["../**/*.stories.@(ts|tsx)"],
+  addons: ["@storybook/addon-essentials", "@storybook/addon-interactions"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  staticDirs: ["./public"],
+
+  viteFinal: (config) => {
+    console.log(path.resolve(__dirname, "../src"))
+    return mergeConfig(config, {
+      plugins: [vitePluginRequire(), svgr({ include: "**/*.svg" })],
+      build: {
+        rollupOptions: {
+          onwarn(warning, warn) {
+            // Suppress "Module level directives cause errors when bundled" warnings
+            if (warning.code === "MODULE_LEVEL_DIRECTIVE") {
+              return
+            }
+            warn(warning)
+          },
+        },
+      },
+      resolve: {
+        alias: [
+          {
+            find: "$snapshots",
+            replacement: path.resolve(__dirname, "../.stub-responses"),
+          },
+          {
+            find: "@ory/elements-react",
+            replacement: path.resolve(__dirname, "../src"),
+          },
+        ],
+      },
+    })
+  },
+}
+
+export default config

packages/elements-react-stories/.storybook/preview.tsx → packages/elements-react/.storybook/preview.tsx

@@ -1,7 +1,6 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import "@ory/elements-react/theme/styles.css"
 import type { Decorator, Preview } from "@storybook/react"
 import { merge } from "lodash"
 import "./global.css"

packages/elements-react/src/components/card/card.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { PropsWithChildren } from "react"
-import { OryCardFooter } from "."
+import { OryCardFooter } from "./footer"
 import { useComponents } from "../../context"
 import { OryCardContent } from "./content"
 import { OryCardHeader } from "./header"

packages/elements-react/src/context/intl-context.tsx

@@ -3,7 +3,8 @@
 
 import { PropsWithChildren } from "react"
 import { IntlProvider as OriginalIntlProvider } from "react-intl"
-import { LocaleMap, locales } from "../locales"
+import { OryLocales } from ".."
+import { LocaleMap } from "../locales"
 
 // ISO 639-1 language codes
 // https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
@@ -146,7 +147,7 @@ export const LanguageCodes = [
   "zu",
 ] as const
 
-export type Locale = keyof typeof locales
+export type Locale = keyof typeof OryLocales
 
 export type IntlContextProps = {
   locale: Locale
@@ -155,9 +156,9 @@ export type IntlContextProps = {
 
 function mergeTranslations(customTranslations: Partial<LocaleMap>) {
   return Object.keys(customTranslations).reduce((acc, key) => {
-    acc[key] = { ...locales[key], ...customTranslations[key] }
+    acc[key] = { ...OryLocales[key], ...customTranslations[key] }
     return acc
-  }, locales)
+  }, OryLocales)
 }
 
 export const IntlProvider = ({

packages/elements-react/src/index.ts

@@ -5,4 +5,4 @@ export type * from "./types"
 export * from "./components"
 export * from "./context"
 export * from "./util"
-export { locales as OryLocales } from "./locales"
+export { OryLocales } from "./locales"

packages/elements-react/src/locales/index.ts

@@ -19,7 +19,7 @@ import { default as sv } from "./sv.json"
 // A potential workaround is to have some code generation tool, that runs after the message extraction and produces a dts file containing all known keys.
 export type LocaleMap = Record<string, Record<string, string>>
 
-export const locales: LocaleMap = {
+export const OryLocales: LocaleMap = {
   en,
   de,
   es,

packages/elements-react/src/util/ui/__test__/ui.spec.ts

@@ -1,7 +1,7 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import allMethodsInitialForm from "../../../../../elements-react-stories/src/elements-react/.stub-responses/login/1fa/all-methods/initial-form.json"
+import allMethodsInitialForm from "$stories/.stub-responses/login/1fa/all-methods/initial-form.json"
 
 import { useNodesGroups } from ".."
 import { UiNode } from "@ory/client-fetch"