feat(ory): init

Author: TorinAsakura

.pnp.cjs

@@ -0,0 +1,32 @@
+{
+  "name": "@atls/react-kratos",
+  "version": "0.0.0",
+  "license": "BSD-3-Clause",
+  "main": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn library build",
+    "prepack": "yarn run build",
+    "postpack": "rm -rf dist"
+  },
+  "dependencies": {
+    "@ory/client": "^1.4.7",
+    "axios": "^1.6.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.js",
+    "typings": "dist/index.d.ts"
+  }
+}

packages/react-kratos/package.json

@@ -0,0 +1,18 @@
+import type { FlowError }    from '@ory/client'
+import type { ReactElement } from 'react'
+
+import { useError }          from '../hooks'
+
+export interface ErrorNodeProps {
+  children: (node: FlowError) => ReactElement
+}
+
+export const ErrorNode = ({ children }: ErrorNodeProps): ReactElement | null => {
+  const { error } = useError()
+
+  if (error && typeof children === 'function') {
+    return children(error)
+  }
+
+  return null
+}

packages/react-kratos/src/components/error-node.component.tsx

@@ -0,0 +1,26 @@
+import type { UiNodeImageAttributes } from '@ory/client'
+import type { UiNode }                from '@ory/client'
+import type { ReactElement }          from 'react'
+
+import { UiNodeTypeEnum }             from '@ory/client'
+
+import { useFlowNode }                from '../hooks'
+
+export interface FlowUiImageNode extends Omit<UiNode, 'attributes'> {
+  attributes: UiNodeImageAttributes
+}
+
+export interface FlowImageNodeProps {
+  name: string
+  children: (node: FlowUiImageNode) => ReactElement
+}
+
+export const FlowImageNode = ({ name, children }: FlowImageNodeProps): ReactElement | null => {
+  const node = useFlowNode(name)
+
+  if (node && node.type === UiNodeTypeEnum.Img && typeof children === 'function') {
+    return children(node as FlowUiImageNode)
+  }
+
+  return null
+}

packages/react-kratos/src/components/flow-image-node.component.tsx

@@ -0,0 +1,50 @@
+import type { UiNodeInputAttributes } from '@ory/client'
+import type { UiNode }                from '@ory/client'
+import type { ReactElement }          from 'react'
+
+import { UiNodeTypeEnum }             from '@ory/client'
+import { useEffect }                  from 'react'
+import { useCallback }                from 'react'
+
+import { useFlowNode }                from '../hooks'
+import { useValue }                   from '../hooks'
+
+type OnChangeCallback = (event: Date | boolean | number | string) => void
+
+export interface FlowUiInputNode extends Omit<UiNode, 'attributes'> {
+  attributes: UiNodeInputAttributes
+}
+
+export interface FlowInputNodeProps {
+  name: string
+  defaultValue?: string
+  children: (node: FlowUiInputNode, value: string, callback: OnChangeCallback) => ReactElement
+}
+
+export const FlowInputNode = ({
+  name,
+  defaultValue,
+  children,
+}: FlowInputNodeProps): ReactElement | null => {
+  const node = useFlowNode(name)
+  const [value, setValue] = useValue(name)
+
+  useEffect(() => {
+    if (!value && defaultValue) {
+      setValue(defaultValue)
+    }
+  }, [defaultValue]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onChange = useCallback(
+    (event: Date | boolean | number | string) => {
+      setValue(event)
+    },
+    [setValue]
+  )
+
+  if (node && node.type === UiNodeTypeEnum.Input && typeof children === 'function') {
+    return children(node as FlowUiInputNode, value, onChange)
+  }
+
+  return null
+}

packages/react-kratos/src/components/flow-input-node.component.tsx

@@ -0,0 +1,21 @@
+import type { UiText }       from '@ory/client'
+import type { ReactElement } from 'react'
+
+import { useMemo }           from 'react'
+
+import { useFlow }           from '../hooks'
+
+export interface FlowMessagesProps {
+  children: (messages: Array<UiText>) => ReactElement
+}
+
+export const FlowMessages = ({ children }: FlowMessagesProps): ReactElement | null => {
+  const { flow } = useFlow()
+  const messages = useMemo(() => flow?.ui?.messages || [], [flow])
+
+  if (typeof children === 'function' && messages) {
+    return children(messages)
+  }
+
+  return null
+}

packages/react-kratos/src/components/flow-messages.component.tsx

@@ -0,0 +1,22 @@
+import type { UiText }       from '@ory/client'
+import type { ReactElement } from 'react'
+
+import { useFlowNode }       from '../hooks'
+
+export interface FlowNodeMessagesProps {
+  name: string
+  children: (messages: Array<UiText>) => ReactElement
+}
+
+export const FlowNodeMessages = ({
+  name,
+  children,
+}: FlowNodeMessagesProps): ReactElement | null => {
+  const node = useFlowNode(name)
+
+  if (typeof children === 'function' && node?.messages) {
+    return children(node.messages)
+  }
+
+  return null
+}

packages/react-kratos/src/components/flow-node-messages.component.tsx

@@ -0,0 +1,32 @@
+import type { UiNode }       from '@ory/client'
+import type { ReactElement } from 'react'
+
+import { useCallback }       from 'react'
+
+import { useFlowNode }       from '../hooks'
+import { useValue }          from '../hooks'
+
+type OnChangeCallback = (event: Date | boolean | number | string) => void
+
+export interface FlowNodeProps {
+  name: string
+  children: (node: UiNode, value: string, callback: OnChangeCallback) => ReactElement
+}
+
+export const FlowNode = ({ name, children }: FlowNodeProps): ReactElement | null => {
+  const node = useFlowNode(name)
+  const [value, setValue] = useValue(name)
+
+  const onChange = useCallback(
+    (event: Date | boolean | number | string) => {
+      setValue(event)
+    },
+    [setValue]
+  )
+
+  if (node && typeof children === 'function') {
+    return children(node, value, onChange)
+  }
+
+  return null
+}

packages/react-kratos/src/components/flow-node.component.tsx

@@ -0,0 +1,32 @@
+import type { UiNode }       from '@ory/client'
+import type { ReactElement } from 'react'
+
+import { useMemo }           from 'react'
+
+import { useFlow }           from '../hooks'
+
+export type FlowNodesFilterChildren = (node: Array<UiNode>) => ReactElement
+
+export interface FlowNodesFilterProps {
+  predicate: (node: UiNode) => boolean
+  children: FlowNodesFilterChildren | ReactElement
+}
+
+export const FlowNodesFilter = ({
+  predicate,
+  children,
+}: FlowNodesFilterProps): ReactElement | null => {
+  const { flow } = useFlow()
+
+  const nodes = useMemo(() => flow?.ui?.nodes?.filter(predicate), [flow, predicate])
+
+  if (!(nodes && nodes.length > 0)) {
+    return null
+  }
+
+  if (typeof children === 'function') {
+    return children(nodes)
+  }
+
+  return children
+}