@ory/elements-react 1.0.0-next.2 → 1.0.0-next.4

package/README.md

@@ -6,18 +6,170 @@
 
 # @ory/elements-react
 
----
+<p align="center">
+<a aria-label="NPM Version" href="https://www.npmjs.com/package/@ory/elements-react">
+<img src="https://img.shields.io/npm/v/@ory/elements-react.svg?style=flat-square">
+</a>
+<a aria-label="License" href="https://github.com/ory/elements/blob/main/LICENSE">
+<img src="https://img.shields.io/github/license/ory/elements?style=flat-square">
+</a>
+<a aria-label="Join Ory Slack community!" href="https://slack.ory.sh/">
+<img src="https://img.shields.io/badge/Slack-Join%20the%20community!-4f46e5?style=flat-square&logo=slack&logoColor=eef2ff">
+</a>
+</p>
 
-Ory Elements is a collection of components and functions that help you get an
-authentication solution up, running and integrated into your application in no
-time.
+Ory Elements is a set of components and functions tailored for easy integration
+of Ory into your React application. It simplifies the process of adding
+authentication and other identity features to your application using the Ory
+Network.
 
-- Documentation: https://ory.sh/docs
+## Documentation
 
-## Usage
+Visit https://ory.sh/docs to see the full Ory documentation.
+
+## Getting started
+
+**Requirements**
+
+- React `>= 18`
+- Node.js `>= 18`
+- **`@ory/client-fetch`** - fetch based version of ory client
 
-Install the package:
+**Installation**
 
 ```sh
 npm install @ory/elements-react
 ```
+
+## Usage
+
+Ory Elements provides components that can aggregate flow objects and display
+user authentication flows based on the data.
+
+To feed Ory Elements with flow data you need to use Ory client.
+
+```ts
+import { frontendClient } from "@ory/client-fetch"
+
+export function serverClientFrontend() {
+  // For testing purposes we're using Ory tunnel
+  return frontendClient("http://localhost:4000", {
+    headers: {
+      Accept: "application/json",
+    },
+  })
+}
+```
+
+### Ory Network project setup
+
+The Ory Identities APIs come with the ability to specify custom UI URLs. To make
+sure, Ory knows about your custom UI, specify the URLs of your application on
+https://console.ory.sh/projects/current/ui.
+
+### Initializing a new flow
+
+Initializing a new flow is done by navigating the user's page to the initialize
+flow URL. After creating a new flow object, Ory will return a redirect to the
+flow UI URL and, in some cases, return anti-CSRF cookies.
+
+```ts
+export function init(params: QueryParams, flowType: FlowType) {
+  // Take advantage of the fact, that Ory handles the flow creation for us and redirects the user to the default return to automatically if they're logged in already.
+  return redirect(
+    "http://localhost:4000" +
+      "/self-service/" +
+      flowType.toString() +
+      "/browser?" +
+      new URLSearchParams(params).toString(),
+    RedirectType.replace,
+  )
+}
+```
+
+**FlowType** can be: `login`, `registration`, `recovery`, `verification`,
+`settings` or `error`
+
+To access & render the flow, on your flow page, you can use the `flow` query
+parameter, that is included in the redirect. Use it to call the
+[`getLoginFlow()`](https://www.ory.sh/docs/reference/api#tag/frontend/operation/getLoginFlow)
+API.
+
+**Full Example**:
+
+````ts
+export async function getOrCreateRegistrationFlow(
+  params: QueryParams
+): Promise<RegistrationFlow> {
+  const onRestartFlow = () => init(params, FlowType.Registration);
+
+  // If flow ID doesn't exist in params simply trigget the init function.
+  if (!params.flow) {
+    return onRestartFlow();
+  }
+
+  return await serverClientFrontend()
+    // Passing the flow ID
+    .getRegistrationFlowRaw({ id: flow })
+    .then(res => res.value())
+    .catch(
+      // Ory Elements predefines the handleFlowError function to simplify error handling.
+      // You can define what should happen in each of these callbacks
+      handleFlowError({
+        onValidationError,
+        onRestartFlow,
+        onRedirect,
+      })
+    );
+    ```
+````
+
+As soon as we have our flow data we can render the `<Registration/>` component
+from `@ory/elements-react` package.
+
+```tsx
+export default async function RegistrationPage({ searchParams }: PageProps) {
+  const flow = await getOrCreateRegistrationFlow(searchParams)
+
+  if (!flow) {
+    return <div>Flow not found</div>
+  }
+
+  return (
+    <Registration
+      flow={flow}
+      config={oryConfiguration}
+      components={ComponentOverrides}
+    />
+  )
+}
+```
+
+### Styling
+
+To include the default styles, add the following import to your app. Make sure
+it's included on all pages, that use Ory Elements.
+
+```ts
+import "@ory/elements-react/theme/styles.css"
+```
+
+### Theming
+
+Most styling can be overwritten, by providing your own custom CSS variables:
+
+```css
+:root {
+  /* To override the text color of the primary buttons */
+  --button-primary-fg-default: #fffeee;
+}
+```
+
+## Package development
+
+To develop and use the package `npm link` is recommended. To run the package in
+watch mode use
+
+```
+npx nx run @ory/elements-react:dev
+```

package/dist/index.d.mts

@@ -121,7 +121,7 @@ type HeadlessFormProps = ComponentPropsWithoutRef<"form"> & {
 type HeadlessInputProps = {
     attributes: UiNodeInputAttributes;
     node: UiNode;
-    onClick: MouseEventHandler;
+    onClick?: MouseEventHandler;
 };
 type OryFlowComponents = OryFormComponents & OryCardComponents;
 

package/dist/index.d.ts

@@ -121,7 +121,7 @@ type HeadlessFormProps = ComponentPropsWithoutRef<"form"> & {
 type HeadlessInputProps = {
     attributes: UiNodeInputAttributes;
     node: UiNode;
-    onClick: MouseEventHandler;
+    onClick?: MouseEventHandler;
 };
 type OryFlowComponents = OryFormComponents & OryCardComponents;
 

package/dist/index.js

@@ -234,7 +234,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment5 = REACT_FRAGMENT_TYPE;
+        var Fragment6 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -293,7 +293,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment5;
+        exports.Fragment = Fragment6;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -573,9 +573,11 @@ function parseDateTimeSkeleton(skeleton) {
   skeleton.replace(DATE_TIME_REGEX, function(match) {
     var len = match.length;
     switch (match[0]) {
+      // Era
       case "G":
         result.era = len === 4 ? "long" : len === 5 ? "narrow" : "short";
         break;
+      // Year
       case "y":
         result.year = len === 2 ? "2-digit" : "numeric";
         break;
@@ -584,13 +586,16 @@ function parseDateTimeSkeleton(skeleton) {
       case "U":
       case "r":
         throw new RangeError("`Y/u/U/r` (year) patterns are not supported, use `y` instead");
+      // Quarter
       case "q":
       case "Q":
         throw new RangeError("`q/Q` (quarter) patterns are not supported");
+      // Month
       case "M":
       case "L":
         result.month = ["numeric", "2-digit", "short", "long", "narrow"][len - 1];
         break;
+      // Week
       case "w":
       case "W":
         throw new RangeError("`w/W` (week) patterns are not supported");
@@ -601,6 +606,7 @@ function parseDateTimeSkeleton(skeleton) {
       case "F":
       case "g":
         throw new RangeError("`D/F/g` (day) patterns are not supported, use `d` instead");
+      // Weekday
       case "E":
         result.weekday = len === 4 ? "short" : len === 5 ? "narrow" : "short";
         break;
@@ -616,12 +622,15 @@ function parseDateTimeSkeleton(skeleton) {
         }
         result.weekday = ["short", "long", "narrow", "short"][len - 4];
         break;
+      // Period
       case "a":
         result.hour12 = true;
         break;
       case "b":
+      // am, pm, noon, midnight
       case "B":
         throw new RangeError("`b/B` (period) patterns are not supported, use `a` instead");
+      // Hour
       case "h":
         result.hourCycle = "h12";
         result.hour = ["numeric", "2-digit"][len - 1];
@@ -642,23 +651,31 @@ function parseDateTimeSkeleton(skeleton) {
       case "J":
       case "C":
         throw new RangeError("`j/J/C` (hour) patterns are not supported, use `h/H/K/k` instead");
+      // Minute
       case "m":
         result.minute = ["numeric", "2-digit"][len - 1];
         break;
+      // Second
       case "s":
         result.second = ["numeric", "2-digit"][len - 1];
         break;
       case "S":
       case "A":
         throw new RangeError("`S/A` (second) patterns are not supported, use `s` instead");
+      // Zone
       case "z":
         result.timeZoneName = len < 4 ? "short" : "long";
         break;
       case "Z":
+      // 1..3, 4, 5: The ISO8601 varios formats
       case "O":
+      // 1, 4: miliseconds in day short, long
       case "v":
+      // 1, 4: generic non-location format
       case "V":
+      // 1, 2, 3, 4: time zone ID or city
       case "X":
+      // 1, 2, 3, 4: The ISO8601 varios formats
       case "x":
         throw new RangeError("`Z/O/v/V/X/x` (timeZone) patterns are not supported, use `z` instead");
     }
@@ -856,6 +873,7 @@ function parseNumberSkeleton(tokens) {
       case "notation-simple":
         result.notation = "standard";
         continue;
+      // https://github.com/unicode-org/icu/blob/master/icu4c/source/i18n/unicode/unumberformatter.h
       case "unit-width-narrow":
         result.currencyDisplay = "narrowSymbol";
         result.unitDisplay = "narrow";
@@ -874,6 +892,7 @@ function parseNumberSkeleton(tokens) {
       case "scale":
         result.scale = parseFloat(token.options[0]);
         continue;
+      // https://unicode-org.github.io/icu/userguide/format_parse/numbers/skeletons.html#integer-width
       case "integer-width":
         if (token.options.length > 1) {
           throw new RangeError("integer-width stems only accept a single optional option");
@@ -2636,6 +2655,7 @@ var Parser = (
           this.bump();
           this.bump();
           return "'";
+        // '{', '<', '>', '}'
         case 123:
         case 60:
         case 62:
@@ -2701,6 +2721,7 @@ var Parser = (
         return this.error(ErrorKind.EXPECT_ARGUMENT_CLOSING_BRACE, createLocation(openingBracePosition, this.clonePosition()));
       }
       switch (this.char()) {
+        // Simple argument: `{name}`
         case 125: {
           this.bump();
           return {
@@ -2713,6 +2734,7 @@ var Parser = (
             err: null
           };
         }
+        // Argument with options: `{name, format, ...}`
         case 44: {
           this.bump();
           this.bumpSpace();
@@ -4803,17 +4825,23 @@ var NodeInput = ({
         }
       );
     case clientFetch.UiNodeInputAttributesTypeEnum.Hidden:
-      if (isCurrentIdentifier) {
-        return /* @__PURE__ */ jsxRuntime.jsx(Components.CurrentIdentifierButton, { attributes: attrs, node });
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Components.Input,
-        {
-          attributes: attrs,
-          node,
-          onClick: handleClick
-        }
-      );
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        isCurrentIdentifier && /* @__PURE__ */ jsxRuntime.jsx(
+          Components.CurrentIdentifierButton,
+          {
+            attributes: attrs,
+            node
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Components.Input,
+          {
+            attributes: attrs,
+            node,
+            onClick: handleClick
+          }
+        )
+      ] });
     default:
       if (isPinCodeInput) {
         return /* @__PURE__ */ jsxRuntime.jsx(Components.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsxRuntime.jsx(