@ory/elements-react 1.0.0-next.25 → 1.0.0-next.28

package/.storybook/global.css

@@ -0,0 +1,7 @@
+/* Copyright © 2024 Ory Corp */
+/* SPDX-License-Identifier: Apache-2.0 */
+
+html {
+  --font-sans: "InterVariable", "Helvetica Neue", "Helvetica", "Arial",
+    sans-serif;
+}

package/.storybook/main.ts

@@ -0,0 +1,50 @@
+// 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) => {
+    return mergeConfig(config, {
+      plugins: [
+        vitePluginRequire(),
+        svgr({
+          include: "**/*.svg",
+          svgrOptions: {
+            svgProps: {
+              width: "{props?.width ? props.width : props?.size ?? 20}",
+              height: "{props?.height ? props.height : props?.size ?? 20}",
+            },
+          },
+        }),
+      ],
+      resolve: {
+        alias: [
+          {
+            find: "$snapshots",
+            replacement: path.resolve(__dirname, "../.stub-responses"),
+          },
+          {
+            find: "@ory/elements-react",
+            replacement: path.resolve(__dirname, "../src"),
+          },
+        ],
+      },
+    })
+  },
+}
+
+export default config

package/.storybook/preview-head.html

@@ -0,0 +1,15 @@
+<!-- Copyright © 2024 Ory Corp -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<link
+  rel="preload"
+  href="/InterVariable.woff2?v=4.1"
+  as="font"
+  type="font/woff2"
+  crossorigin="anonymous"
+/>
+<link rel="stylesheet" href="/inter.css" />
+
+<script>
+  window.oryPasskeyLoginAutocompleteInit = function () {}
+</script>

package/.storybook/preview.tsx

@@ -0,0 +1,68 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Decorator, Preview } from "@storybook/react"
+import { merge } from "lodash"
+import "./global.css"
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      default: "light",
+      values: [
+        { name: "light", value: "#f5f5f5" },
+        { name: "dark", value: "#333333" },
+      ],
+    },
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+const withI18next: Decorator = (Story, context) => {
+  const { locale } = context.globals
+
+  return (
+    <Story
+      args={merge(
+        {},
+        {
+          config: {
+            intl: {
+              locale: locale && typeof locale === "string" ? locale : "en",
+            },
+          },
+        },
+        context.args,
+      )}
+    />
+  )
+}
+
+// export decorators for storybook to wrap your stories in
+export const decorators = [withI18next]
+
+export const globalTypes = {
+  locale: {
+    name: "Locale",
+    description: "Internationalization locale",
+    toolbar: {
+      icon: "globe",
+      items: [
+        { value: "en", title: "English" },
+        { value: "de", title: "German" },
+        { value: "sv", title: "Swedish" },
+        { value: "fr", title: "French" },
+        { value: "es", title: "Spanish" },
+      ],
+      showName: true,
+    },
+  },
+}
+
+export default preview

package/.storybook/public/inter.css

@@ -0,0 +1,8 @@
+
+@font-face {
+  font-family: InterVariable;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('/InterVariable.woff2?v=4.1') format('woff2');
+}

package/.stub-responses/login/1fa/all-methods/initial-form.json

@@ -0,0 +1,247 @@
+{
+  "id": "9af3e83e-23c1-41bd-9149-be39ea7c8048",
+  "organization_id": null,
+  "type": "browser",
+  "expires_at": "2024-10-29T10:45:38.857268593Z",
+  "issued_at": "2024-10-29T09:45:38.857268593Z",
+  "request_url": "https://dreamy-wiles-28csoig0cg.projects.oryapis:8080/self-service/login/browser",
+  "ui": {
+    "action": "https://dreamy-wiles-28csoig0cg.projects.oryapis:8080/self-service/login?flow=9af3e83e-23c1-41bd-9149-be39ea7c8048",
+    "method": "POST",
+    "nodes": [
+      {
+        "type": "input",
+        "group": "oidc",
+        "attributes": {
+          "name": "provider",
+          "type": "submit",
+          "value": "github",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010002,
+            "text": "Sign in with GitHub",
+            "type": "info",
+            "context": {
+              "provider": "GitHub",
+              "provider_id": "github"
+            }
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "oidc",
+        "attributes": {
+          "name": "provider",
+          "type": "submit",
+          "value": "google",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010002,
+            "text": "Sign in with Google",
+            "type": "info",
+            "context": {
+              "provider": "Google",
+              "provider_id": "google"
+            }
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "csrf_token",
+          "type": "hidden",
+          "value": "UpTfUf6a4w2CEUtZR/XLbglQeIWvznS5QdPSKX9WzjJItMMhoXxVRWEfNZ+QxkWFZgm2D0UQCg4wWgROuBHqlQ==",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "identifier",
+          "type": "text",
+          "value": "",
+          "required": true,
+          "autocomplete": "username webauthn",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070002,
+            "text": "E-Mail",
+            "type": "info",
+            "context": {
+              "title": "E-Mail"
+            }
+          }
+        }
+      },
+      {
+        "type": "script",
+        "group": "webauthn",
+        "attributes": {
+          "src": "https://dreamy-wiles-28csoig0cg.projects.oryapis:8080/.well-known/ory/webauthn.js",
+          "async": true,
+          "referrerpolicy": "no-referrer",
+          "crossorigin": "anonymous",
+          "integrity": "sha512-MDzBlwh32rr+eus2Yf1BetIj94m+ULLbewYDulbZjczycs81klNed+qQWG2yi2N03KV5uZlRJJtWdV2x9JNHzQ==",
+          "type": "text/javascript",
+          "id": "webauthn_script",
+          "nonce": "37c7008f-98d4-402d-a319-cf4d0f60e10c",
+          "node_type": "script"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "webauthn",
+        "attributes": {
+          "name": "method",
+          "type": "submit",
+          "value": "webauthn",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010008,
+            "text": "Sign in with hardware key",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "passkey",
+        "attributes": {
+          "name": "passkey_login_trigger",
+          "type": "button",
+          "value": "",
+          "disabled": false,
+          "onclick": "window.oryPasskeyLogin()",
+          "onclickTrigger": "oryPasskeyLogin",
+          "onload": "window.oryPasskeyLoginAutocompleteInit()",
+          "onloadTrigger": "oryPasskeyLoginAutocompleteInit",
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010021,
+            "text": "Sign in with passkey",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "passkey",
+        "attributes": {
+          "name": "passkey_login",
+          "type": "hidden",
+          "disabled": false,
+          "onload": "window.oryPasskeyLoginAutocompleteInit()",
+          "onloadTrigger": "oryPasskeyLoginAutocompleteInit",
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "passkey",
+        "attributes": {
+          "name": "passkey_challenge",
+          "type": "hidden",
+          "value": "{\"publicKey\":{\"challenge\":\"j-AcTnYzHZCKq--PnEMGz72K0nh3BqH2emzwFOj-Dyw\",\"timeout\":300000,\"rpId\":\"dreamy-wiles-28csoig0cg.projects.oryapis\",\"userVerification\":\"preferred\"}}",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "code",
+        "attributes": {
+          "name": "method",
+          "type": "submit",
+          "value": "code",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010015,
+            "text": "Send sign in code",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "password",
+          "type": "password",
+          "required": true,
+          "autocomplete": "current-password",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070001,
+            "text": "Password",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "method",
+          "type": "submit",
+          "value": "password",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010022,
+            "text": "Sign in with password",
+            "type": "info"
+          }
+        }
+      }
+    ]
+  },
+  "created_at": "2024-10-29T09:45:38.863683Z",
+  "updated_at": "2024-10-29T09:45:38.863683Z",
+  "refresh": false,
+  "requested_aal": "aal1",
+  "state": "choose_method"
+}

package/.stub-responses/login/1fa/all-methods/missing-email.json

@@ -0,0 +1,265 @@
+{
+  "id": "9af3e83e-23c1-41bd-9149-be39ea7c8048",
+  "organization_id": null,
+  "type": "browser",
+  "expires_at": "2024-10-29T10:45:38.857268Z",
+  "issued_at": "2024-10-29T09:45:38.857268Z",
+  "request_url": "https://dreamy-wiles-28csoig0cg.projects.oryapis:8080/self-service/login/browser",
+  "ui": {
+    "action": "https://dreamy-wiles-28csoig0cg.projects.oryapis:8080/self-service/login?flow=9af3e83e-23c1-41bd-9149-be39ea7c8048",
+    "method": "POST",
+    "nodes": [
+      {
+        "type": "input",
+        "group": "oidc",
+        "attributes": {
+          "name": "provider",
+          "type": "submit",
+          "value": "github",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010002,
+            "text": "Sign in with GitHub",
+            "type": "info",
+            "context": {
+              "provider": "GitHub",
+              "provider_id": "github"
+            }
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "oidc",
+        "attributes": {
+          "name": "provider",
+          "type": "submit",
+          "value": "google",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010002,
+            "text": "Sign in with Google",
+            "type": "info",
+            "context": {
+              "provider": "Google",
+              "provider_id": "google"
+            }
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "csrf_token",
+          "type": "hidden",
+          "value": "+sHB0SRt37Hgp5uHUklnNED5kJykBbt0NxZ5OAUNlYDg4d2he4tp+QOp5UGFeunfL6BeFk7bxcNGn69fwkqxJw==",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "identifier",
+          "type": "text",
+          "value": "",
+          "required": true,
+          "autocomplete": "username webauthn",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [
+          {
+            "id": 4000002,
+            "text": "Property identifier is missing.",
+            "type": "error",
+            "context": {
+              "property": "identifier"
+            }
+          }
+        ],
+        "meta": {
+          "label": {
+            "id": 1070002,
+            "text": "E-Mail",
+            "type": "info",
+            "context": {
+              "title": "E-Mail"
+            }
+          }
+        }
+      },
+      {
+        "type": "script",
+        "group": "webauthn",
+        "attributes": {
+          "src": "https://dreamy-wiles-28csoig0cg.projects.oryapis:8080/.well-known/ory/webauthn.js",
+          "async": true,
+          "referrerpolicy": "no-referrer",
+          "crossorigin": "anonymous",
+          "integrity": "sha512-MDzBlwh32rr+eus2Yf1BetIj94m+ULLbewYDulbZjczycs81klNed+qQWG2yi2N03KV5uZlRJJtWdV2x9JNHzQ==",
+          "type": "text/javascript",
+          "id": "webauthn_script",
+          "nonce": "37c7008f-98d4-402d-a319-cf4d0f60e10c",
+          "node_type": "script"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "webauthn",
+        "attributes": {
+          "name": "method",
+          "type": "submit",
+          "value": "webauthn",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010008,
+            "text": "Sign in with hardware key",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "passkey",
+        "attributes": {
+          "name": "passkey_login_trigger",
+          "type": "button",
+          "value": "",
+          "disabled": false,
+          "onclick": "window.oryPasskeyLogin()",
+          "onclickTrigger": "oryPasskeyLogin",
+          "onload": "window.oryPasskeyLoginAutocompleteInit()",
+          "onloadTrigger": "oryPasskeyLoginAutocompleteInit",
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010021,
+            "text": "Sign in with passkey",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "passkey",
+        "attributes": {
+          "name": "passkey_login",
+          "type": "hidden",
+          "disabled": false,
+          "onload": "window.oryPasskeyLoginAutocompleteInit()",
+          "onloadTrigger": "oryPasskeyLoginAutocompleteInit",
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "passkey",
+        "attributes": {
+          "name": "passkey_challenge",
+          "type": "hidden",
+          "value": "{\"publicKey\":{\"challenge\":\"j-AcTnYzHZCKq--PnEMGz72K0nh3BqH2emzwFOj-Dyw\",\"timeout\":300000,\"rpId\":\"dreamy-wiles-28csoig0cg.projects.oryapis\",\"userVerification\":\"preferred\"}}",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "code",
+        "attributes": {
+          "name": "method",
+          "type": "submit",
+          "value": "code",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010015,
+            "text": "Send sign in code",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "password",
+          "type": "password",
+          "required": true,
+          "autocomplete": "current-password",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [
+          {
+            "id": 4000002,
+            "text": "Property password is missing.",
+            "type": "error",
+            "context": {
+              "property": "password"
+            }
+          }
+        ],
+        "meta": {
+          "label": {
+            "id": 1070001,
+            "text": "Password",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "method",
+          "type": "submit",
+          "value": "password",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010022,
+            "text": "Sign in with password",
+            "type": "info"
+          }
+        }
+      }
+    ]
+  },
+  "created_at": "2024-10-29T09:45:38.863683Z",
+  "updated_at": "2024-10-29T09:45:38.863683Z",
+  "refresh": false,
+  "requested_aal": "aal1",
+  "state": "choose_method"
+}