diff --git a/.eslintrc.js b/.eslintrc.js index 520dc5137..d03623f8e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -2,23 +2,23 @@ module.exports = { env: { browser: true, es6: true, - node: true + node: true, }, extends: [ - 'eslint:recommended', - 'plugin:react/recommended', - 'plugin:@typescript-eslint/recommended' + "eslint:recommended", + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended", ], overrides: [], - parser: '@typescript-eslint/parser', + parser: "@typescript-eslint/parser", parserOptions: { - tsconfigRootDir: './', + tsconfigRootDir: "./", ecmaVersion: 2021, - sourceType: 'module', + sourceType: "module", ecmaFeatures: { - jsx: true - } + jsx: true, + }, }, - plugins: ['react', '@typescript-eslint'], - rules: {} -}; + plugins: ["react", "@typescript-eslint"], + rules: {}, +} diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml new file mode 100644 index 000000000..a7a720ebc --- /dev/null +++ b/.github/workflows/format.yml @@ -0,0 +1,17 @@ +name: Format + +on: + pull_request: + push: + +jobs: + format: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-go@v3 + with: + go-version: 1.19 + - run: make format + - name: Indicate formatting issues + run: git diff HEAD --exit-code --color diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index dd5198085..716c26ace 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -10,11 +10,14 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v1 with: - node-version: '14' + node-version: "14" - run: npm ci - - run: npm version --no-git-tag-version ${{ github.event.release.tag_name }} + - run: + npm version --no-git-tag-version ${{ github.event.release.tag_name }} - run: npm run build - - run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN_AENEASR }}" > ~/.npmrc + - run: + echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN_AENEASR + }}" > ~/.npmrc - run: npm publish --access public # env: # NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_AENEASR }} diff --git a/.prettierignore b/.prettierignore index 81c22889d..92ac9b311 100644 --- a/.prettierignore +++ b/.prettierignore @@ -4,4 +4,6 @@ node_modules .vscode playwright-report public -storybook-static \ No newline at end of file +storybook-static +.github/pull_request_template.md +CONTRIBUTING.md diff --git a/.storybook/main.js b/.storybook/main.js index a9fc0b800..7eddceef1 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,47 +1,47 @@ -const { vanillaExtractPlugin } = require('@vanilla-extract/vite-plugin'); -const { resolve } = require('path'); -const { mergeConfig } = require('vite'); +const { vanillaExtractPlugin } = require("@vanilla-extract/vite-plugin") +const { resolve } = require("path") +const { mergeConfig } = require("vite") module.exports = { - stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], addons: [ - '@storybook/addon-links', - '@storybook/addon-essentials', - '@storybook/addon-interactions' + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/addon-interactions", ], - framework: '@storybook/react', + framework: "@storybook/react", core: { - builder: '@storybook/builder-vite' + builder: "@storybook/builder-vite", }, typescript: { - reactDocgen: 'react-docgen' // 👈 react-docgen configured here. + reactDocgen: "react-docgen", // 👈 react-docgen configured here. }, async viteFinal(config) { return mergeConfig(config, { build: { - minify: 'esbuild', + minify: "esbuild", sourcemap: true, lib: { - entry: resolve(__dirname, 'src/react.ts'), - name: 'ory/elements', - fileName: (format) => `index.${format}.js` + entry: resolve(__dirname, "src/react.ts"), + name: "ory/elements", + fileName: (format) => `index.${format}.js`, }, rollupOptions: { - treeshake: 'recommended', - external: ['react', 'react-dom', 'storybook'], + treeshake: "recommended", + external: ["react", "react-dom", "storybook"], output: { globals: { - storybook: 'storybook', - react: 'React', - 'react-dom': 'ReactDOM' - } - } - } + storybook: "storybook", + react: "React", + "react-dom": "ReactDOM", + }, + }, + }, }, - plugins: [vanillaExtractPlugin()] - }); + plugins: [vanillaExtractPlugin()], + }) }, features: { - storyStoreV7: true - } -}; + storyStoreV7: true, + }, +} diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 05da1e9df..7100922b6 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,3 +1,3 @@ \ No newline at end of file + window.global = window + diff --git a/Makefile b/Makefile index 5733fe979..c24b354e5 100644 --- a/Makefile +++ b/Makefile @@ -15,4 +15,11 @@ install: .bin/ory: Makefile bash <(curl https://raw.githubusercontent.com/ory/meta/master/install.sh) -d -b .bin ory v0.1.38 - touch -a -m .bin/ory \ No newline at end of file + touch -a -m .bin/ory + +format: node_modules + npm exec -- prettier --write . + +node_modules: package-lock.json + npm ci + touch node_modules diff --git a/README.md b/README.md index 826551191..4b7a8c5b3 100644 --- a/README.md +++ b/README.md @@ -1,155 +1,167 @@ ## Elements -Ory component library for custom UI integration and development. A set of tools +Ory component library for custom UI integration and development. A set of tools -Here we are using [Vite](https://vitejs.dev/) as the bundler instead of only Rollup. This makes the bundling experience a bit easier and really fast! We can now support a variety of environments through a singular repository. For example, in this repository we already have React, Preact and HTML support. +Here we are using [Vite](https://vitejs.dev/) as the bundler instead of only +Rollup. This makes the bundling experience a bit easier and really fast! We can +now support a variety of environments through a singular repository. For +example, in this repository we already have React, Preact and HTML support. --- -[Vanilla-Extract](https://vanilla-extract.style/) is used to strongly type the CSS, a type of `CSS-in-JS` library which generates a static CSS file for us when the library is built. This means we can manage our CSS and reduce a lot of typing, since it can generate the CSS classes for us. +[Vanilla-Extract](https://vanilla-extract.style/) is used to strongly type the +CSS, a type of `CSS-in-JS` library which generates a static CSS file for us when +the library is built. This means we can manage our CSS and reduce a lot of +typing, since it can generate the CSS classes for us. Here is an example of vanilla-extract in action! ```ts export const dividerStyle = recipe({ base: { - display: 'block', - textAlign: 'center', - overflow: 'hidden', - boxSizing: 'border-box', + display: "block", + textAlign: "center", + overflow: "hidden", + boxSizing: "border-box", border: 0, borderTop: `${pxToRem(4)} solid`, borderColor: oryTheme.border.def, - width: pxToRem(64) + width: pxToRem(64), }, variants: { sizes: { fullWidth: { - width: '100%' - } - } - } -}); + width: "100%", + }, + }, + }, +}) ``` + Generated JS function. ```js -var dividerStyle = createRuntimeFn({ defaultClassName: "_3ldkmt0", variantClassNames: { sizes: { fullWidth: "_3ldkmt1" } }, defaultVariants: {}, compoundVariants: [] }); +var dividerStyle = createRuntimeFn({ + defaultClassName: "_3ldkmt0", + variantClassNames: { sizes: { fullWidth: "_3ldkmt1" } }, + defaultVariants: {}, + compoundVariants: [], +}) ``` And the generated CSS classes. ```css ._3ldkmt0 { - display:block; - text-align:center; - overflow:hidden; - box-sizing:border-box; - border:0; - border-top:.25rem solid; - border-color:var(--ory-theme-border-def); - width:4rem + display: block; + text-align: center; + overflow: hidden; + box-sizing: border-box; + border: 0; + border-top: 0.25rem solid; + border-color: var(--ory-theme-border-def); + width: 4rem; } ._3ldkmt1 { - width:100% + width: 100%; } ``` --- -Vanilla-Extract also provides us theme variables which we can give static names. This means we can overwrite them inside the project consuming the library! +Vanilla-Extract also provides us theme variables which we can give static names. +This means we can overwrite them inside the project consuming the library! ```css :root { - --ory-theme-font-family: Inter; - --ory-theme-font-style: normal; - --ory-theme-accent-def: #3D53F5; - --ory-theme-accent-muted: #6475F7; - --ory-theme-accent-emphasis: #3142C4; - --ory-theme-accent-disabled: #E0E0E0; - --ory-theme-accent-subtle: #eceefe; - --ory-theme-foreground-def: #171717; - --ory-theme-foreground-muted: #616161; - --ory-theme-foreground-subtle: #9E9E9E; - --ory-theme-foreground-disabled: #BDBDBD; - --ory-theme-foreground-on-dark: #FFFFFF; - --ory-theme-foreground-on-accent: #FFFFFF; - --ory-theme-foreground-on-disabled: #e0e0e0; - --ory-theme-background-surface: #FFFFFF; - --ory-theme-background-canvas: #FCFCFC; - --ory-theme-error-def: #9c0f2e; - --ory-theme-error-subtle: #fce8ec; - --ory-theme-error-muted: #e95c7b; - --ory-theme-error-emphasis: #DF1642; - --ory-theme-success-emphasis: #18A957; - --ory-theme-border-def: #E0E0E0; - --ory-theme-text-def: #FFFFFF; - --ory-theme-text-disabled: #757575; - --ory-theme-input-background: #FFFFFF; - --ory-theme-input-disabled: #E0E0E0; - --ory-theme-input-placeholder: #9E9E9E; - --ory-theme-input-text: #424242; + --ory-theme-font-family: Inter; + --ory-theme-font-style: normal; + --ory-theme-accent-def: #3d53f5; + --ory-theme-accent-muted: #6475f7; + --ory-theme-accent-emphasis: #3142c4; + --ory-theme-accent-disabled: #e0e0e0; + --ory-theme-accent-subtle: #eceefe; + --ory-theme-foreground-def: #171717; + --ory-theme-foreground-muted: #616161; + --ory-theme-foreground-subtle: #9e9e9e; + --ory-theme-foreground-disabled: #bdbdbd; + --ory-theme-foreground-on-dark: #ffffff; + --ory-theme-foreground-on-accent: #ffffff; + --ory-theme-foreground-on-disabled: #e0e0e0; + --ory-theme-background-surface: #ffffff; + --ory-theme-background-canvas: #fcfcfc; + --ory-theme-error-def: #9c0f2e; + --ory-theme-error-subtle: #fce8ec; + --ory-theme-error-muted: #e95c7b; + --ory-theme-error-emphasis: #df1642; + --ory-theme-success-emphasis: #18a957; + --ory-theme-border-def: #e0e0e0; + --ory-theme-text-def: #ffffff; + --ory-theme-text-disabled: #757575; + --ory-theme-input-background: #ffffff; + --ory-theme-input-disabled: #e0e0e0; + --ory-theme-input-placeholder: #9e9e9e; + --ory-theme-input-text: #424242; } ``` --- -For ExpressJS the library also exports a helper function which registers all of the CSS the library produces. +For ExpressJS the library also exports a helper function which registers all of +the CSS the library produces. ```ts -import express, { Application } from 'express'; -import { assignInlineVars } from '@vanilla-extract/dynamic'; -import { oryTheme, Theme } from '../theme'; +import express, { Application } from "express" +import { assignInlineVars } from "@vanilla-extract/dynamic" +import { oryTheme, Theme } from "../theme" export const RegisterOryElementsExpress = (app: Application, theme: Theme) => { - app.use('/theme.css', (req, res) => { - res.header('Content-Type', 'text/css'); + app.use("/theme.css", (req, res) => { + res.header("Content-Type", "text/css") res.send( `body {${assignInlineVars(oryTheme, { ...oryTheme, - ...theme - }).toString()}}` - ); - }); - app.use('/', express.static('node_modules/@ory/elements/dist')); -}; + ...theme, + }).toString()}}`, + ) + }) + app.use("/", express.static("node_modules/@ory/elements/dist")) +} ``` -Which exposes all of the relevant css files for us which we just import in our HTML page: +Which exposes all of the relevant css files for us which we just import in our +HTML page: ```html - // the default theme variables - // the overidden theme variables + // the default theme variables + // the overidden theme variables ``` -We can then reference a component through the handlebars helper functions that return pure HTML. +We can then reference a component through the handlebars helper functions that +return pure HTML. ```handlebars {{{card}}} -{{{typography - "Welcome!" - "headline37" - "foregroundDefault" - }}} +{{{typography "Welcome!" "headline37" "foregroundDefault"}}} ``` ```ts // Render the data using a view (e.g. Jade Template): -res.render('login', { - ...flow, +res.render("login", { + ...flow, typography: (text: string, size: any, color: any) => - Typography({ - children: text, - type: "regular", - size, - color, - }), - card: Card({ - title: "Login With Ory", - children: Message({message: "Woah there", severity: "info"}) - }) + Typography({ + children: text, + type: "regular", + size, + color, + }), + card: Card({ + title: "Login With Ory", + children: Message({ message: "Woah there", severity: "info" }), + }), }) ``` @@ -157,7 +169,8 @@ res.render('login', { ### Example Apps -Ory Elements also has example applications which we test the component library against. +Ory Elements also has example applications which we test the component library +against. Currently we have a `react` and `preact` SPA under the `tests/` directory. @@ -166,7 +179,6 @@ To run the example application you will need a couple things: 1. An [Ory Cloud (free) account](https://console.ory.sh/) 2. The [Ory CLI (tunnel)](https://www.ory.sh/docs/guides/cli/installation) - Clone this repository and setup the React example. ```shell @@ -185,7 +197,8 @@ Now run the Ory CLI tunnel. ory tunnel http://localhost:3000 --project --dev ``` -The tunnel will now _mirror_ the Ory APIs under `http://localhost:4000` which we have -explicity told our React app to use through the `VITE_ORY_SDK_URL` export. +The tunnel will now _mirror_ the Ory APIs under `http://localhost:4000` which we +have explicity told our React app to use through the `VITE_ORY_SDK_URL` export. -Open http://localhost:3000 in your browser and everything will work out of the box :) +Open http://localhost:3000 in your browser and everything will work out of the +box :) diff --git a/nx.json b/nx.json index 9b7074239..de18f9623 100644 --- a/nx.json +++ b/nx.json @@ -4,19 +4,13 @@ "default": { "runner": "nx/tasks-runners/default", "options": { - "cacheableOperations": [ - "build", - "dev", - "preview" - ] + "cacheableOperations": ["build", "dev", "preview"] } } }, "targetDefaults": { "build": { - "dependsOn": [ - "^build" - ] + "dependsOn": ["^build"] } }, "affected": { diff --git a/package-lock.json b/package-lock.json index 87e684641..3832a0ef0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,6 +46,7 @@ "lerna": "^5.4.3", "nx": "14.5.10", "ory-prettier-styles": "^1.3.0", + "prettier": "^2.7.1", "react": "^17.0.2", "react-dom": "^17.0.2", "require-from-string": "^2.0.2", diff --git a/package.json b/package.json index 15dd7b08b..0f88acb57 100644 --- a/package.json +++ b/package.json @@ -15,9 +15,7 @@ "build:markup": "lerna run build --stream --scope=@ory/elements-markup", "version": "lerna version --no-private", "test": "playwright test -c playwright-ct.config.ts", - "test-e2e": "playwright test -c playwright.config.ts", - "format": "prettier --write '{src/**/*,}.{tsx,ts,js,css}'", - "format:check": "prettier --check '{src/**/*,}.{tsx,ts,js,css}'" + "test-e2e": "playwright test -c playwright.config.ts" }, "repository": { "type": "git", @@ -36,6 +34,8 @@ "devDependencies": { "@babel/core": "^7.18.10", "@ory/client": "^0.2.0-alpha.16", + "@ory/elements": "*", + "@ory/elements-test": "*", "@ory/integrations": "^0.2.7", "@playwright/experimental-ct-react": "^1.25.0", "@playwright/test": "^1.25.1", @@ -67,15 +67,14 @@ "lerna": "^5.4.3", "nx": "14.5.10", "ory-prettier-styles": "^1.3.0", + "prettier": "^2.7.1", "react": "^17.0.2", "react-dom": "^17.0.2", "require-from-string": "^2.0.2", "typescript": "^4.7.4", "vite": "^3.0.9", "vite-plugin-dts": "^1.4.1", - "wait-on": "^6.0.1", - "@ory/elements-test": "*", - "@ory/elements": "*" + "wait-on": "^6.0.1" }, "files": [ "dist/*" @@ -88,4 +87,4 @@ "packages/*", "tests/*" ] -} \ No newline at end of file +} diff --git a/packages/markup/package.json b/packages/markup/package.json index dc346c4ac..91ab79dc9 100644 --- a/packages/markup/package.json +++ b/packages/markup/package.json @@ -44,4 +44,4 @@ "node": ">=16.16.0", "npm": ">=8.11.0" } -} \ No newline at end of file +} diff --git a/packages/preact/package.json b/packages/preact/package.json index de67d8128..624ef1099 100644 --- a/packages/preact/package.json +++ b/packages/preact/package.json @@ -50,4 +50,4 @@ "node": ">=16.16.0", "npm": ">=8.11.0" } -} \ No newline at end of file +} diff --git a/packages/react/package.json b/packages/react/package.json index 22d43dd2a..b63c5773d 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -43,4 +43,4 @@ "node": ">=16.16.0", "npm": ">=8.11.0" } -} \ No newline at end of file +} diff --git a/packages/test/package.json b/packages/test/package.json index 3155b9018..1843d2615 100644 --- a/packages/test/package.json +++ b/packages/test/package.json @@ -43,4 +43,4 @@ "node": ">=16.16.0", "npm": ">=8.11.0" } -} \ No newline at end of file +} diff --git a/playwright-ct.config.ts b/playwright-ct.config.ts index 66c51d7a4..eab5e9cfd 100644 --- a/playwright-ct.config.ts +++ b/playwright-ct.config.ts @@ -1,15 +1,15 @@ -import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react'; -import { devices } from '@playwright/experimental-ct-react'; -import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'; -import react from '@vitejs/plugin-react'; +import type { PlaywrightTestConfig } from "@playwright/experimental-ct-react" +import { devices } from "@playwright/experimental-ct-react" +import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin" +import react from "@vitejs/plugin-react" /** * See https://playwright.dev/docs/test-configuration. */ const config: PlaywrightTestConfig = { - testDir: './src/react-components', + testDir: "./src/react-components", /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */ - snapshotDir: './__snapshots__', + snapshotDir: "./__snapshots__", /* Maximum time one test can run for. */ timeout: 10 * 1000, /* Run tests in files in parallel */ @@ -21,40 +21,40 @@ const config: PlaywrightTestConfig = { /* Opt out of parallel tests on CI. */ workers: process.env.CI ? 1 : undefined, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ - reporter: 'html', + reporter: "html", /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ use: { /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ - trace: 'on-first-retry', + trace: "on-first-retry", /* Port to use for Playwright component endpoint. */ ctPort: 3100, ctViteConfig: { - plugins: [vanillaExtractPlugin(), react()] - } + plugins: [vanillaExtractPlugin(), react()], + }, }, /* Configure projects for major browsers */ projects: [ { - name: 'chromium', + name: "chromium", use: { - ...devices['Desktop Chrome'] - } + ...devices["Desktop Chrome"], + }, }, { - name: 'firefox', + name: "firefox", use: { - ...devices['Desktop Firefox'] - } + ...devices["Desktop Firefox"], + }, }, { - name: 'webkit', + name: "webkit", use: { - ...devices['Desktop Safari'] - } - } - ] -}; + ...devices["Desktop Safari"], + }, + }, + ], +} -export default config; +export default config diff --git a/playwright.config.ts b/playwright.config.ts index c4c4514b7..0b19ac7b0 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -1,5 +1,5 @@ -import type { PlaywrightTestConfig } from '@playwright/test'; -import { devices } from '@playwright/test'; +import type { PlaywrightTestConfig } from "@playwright/test" +import { devices } from "@playwright/test" /** * Read environment variables from file. @@ -11,7 +11,7 @@ import { devices } from '@playwright/test'; * See https://playwright.dev/docs/test-configuration. */ const config: PlaywrightTestConfig = { - testDir: './e2e', + testDir: "./e2e", /* Maximum time one test can run for. */ timeout: 30 * 1000, expect: { @@ -19,7 +19,7 @@ const config: PlaywrightTestConfig = { * Maximum time expect() should wait for the condition to be met. * For example in `await expect(locator).toHaveText();` */ - timeout: 5000 + timeout: 5000, }, /* Run tests in files in parallel */ fullyParallel: true, @@ -30,7 +30,7 @@ const config: PlaywrightTestConfig = { /* Opt out of parallel tests on CI. */ workers: process.env.CI ? 1 : undefined, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ - reporter: 'html', + reporter: "html", /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ use: { /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ @@ -39,29 +39,29 @@ const config: PlaywrightTestConfig = { // baseURL: 'http://localhost:3000', /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ - trace: 'on-first-retry', + trace: "on-first-retry", }, /* Configure projects for major browsers */ projects: [ { - name: 'chromium', + name: "chromium", use: { - ...devices['Desktop Chrome'], + ...devices["Desktop Chrome"], }, }, { - name: 'firefox', + name: "firefox", use: { - ...devices['Desktop Firefox'], + ...devices["Desktop Firefox"], }, }, { - name: 'webkit', + name: "webkit", use: { - ...devices['Desktop Safari'], + ...devices["Desktop Safari"], }, }, @@ -102,6 +102,6 @@ const config: PlaywrightTestConfig = { // command: 'npm run start', // port: 3000, // }, -}; +} -export default config; +export default config diff --git a/playwright/index.ts b/playwright/index.ts index 33a92ce7b..a642e0a65 100644 --- a/playwright/index.ts +++ b/playwright/index.ts @@ -1,3 +1,3 @@ // Import styles, initialize component theme here. // import '../src/common.css'; -import { ThemeProvider } from '../src/react-components/provider'; +import { ThemeProvider } from "../src/react-components/provider" diff --git a/src/stories/Introduction.stories.mdx b/src/stories/Introduction.stories.mdx index e6492d3b1..a68433905 100644 --- a/src/stories/Introduction.stories.mdx +++ b/src/stories/Introduction.stories.mdx @@ -1,12 +1,12 @@ -import { Meta } from '@storybook/addon-docs'; -import Code from './assets/code-brackets.svg'; -import Colors from './assets/colors.svg'; -import Comments from './assets/comments.svg'; -import Direction from './assets/direction.svg'; -import Flow from './assets/flow.svg'; -import Plugin from './assets/plugin.svg'; -import Repo from './assets/repo.svg'; -import StackAlt from './assets/stackalt.svg'; +import { Meta } from "@storybook/addon-docs" +import Code from "./assets/code-brackets.svg" +import Colors from "./assets/colors.svg" +import Comments from "./assets/comments.svg" +import Direction from "./assets/direction.svg" +import Flow from "./assets/flow.svg" +import Plugin from "./assets/plugin.svg" +import Repo from "./assets/repo.svg" +import StackAlt from "./assets/stackalt.svg" @@ -116,12 +116,15 @@ import StackAlt from './assets/stackalt.svg'; # Welcome to Storybook -Storybook helps you build UI components in isolation from your app's business logic, data, and context. -That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. +Storybook helps you build UI components in isolation from your app's business +logic, data, and context. That makes it easy to develop hard-to-reach states. +Save these UI states as **stories** to revisit during development, testing, or +QA. -Browse example stories now by navigating to them in the sidebar. -View their code in the `stories` directory to learn how they work. -We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. +Browse example stories now by navigating to them in the sidebar. View their code +in the `stories` directory to learn how they work. We recommend building UIs +with a [**component-driven**](https://componentdriven.org) process starting with +atomic components and ending with pages.
Configure
@@ -182,14 +185,22 @@ We recommend building UIs with a [**component-driven**](https://componentdriven. Configure, customize, and extend - + direction In-depth guides Best practices from leading teams - + code GitHub project @@ -206,6 +217,6 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
- TipEdit the Markdown in{' '} + TipEdit the Markdown in{" "} stories/Introduction.stories.mdx
diff --git a/src/stories/Ory/auth-error.json b/src/stories/Ory/auth-error.json index e1e34ec96..59eefdc38 100644 --- a/src/stories/Ory/auth-error.json +++ b/src/stories/Ory/auth-error.json @@ -1,12 +1,12 @@ { - "id": "993c948b-6ac1-411c-bcaf-029f56b44d5e", - "error": { - "code": 400, - "debug": "key ory_kratos_oidc_auth_code_session does not exist in cookie: ory_kratos_continuity\n", - "message": "no resumable session found", - "reason": "The browser does not contain the necessary cookie to resume the session. This is a security violation and was blocked. Please clear your browser's cookies and cache and try again!", - "status": "Bad Request" - }, - "created_at": "2022-08-11T14:08:09.054554Z", - "updated_at": "2022-08-11T14:08:09.054554Z" -} \ No newline at end of file + "id": "993c948b-6ac1-411c-bcaf-029f56b44d5e", + "error": { + "code": 400, + "debug": "key ory_kratos_oidc_auth_code_session does not exist in cookie: ory_kratos_continuity\n", + "message": "no resumable session found", + "reason": "The browser does not contain the necessary cookie to resume the session. This is a security violation and was blocked. Please clear your browser's cookies and cache and try again!", + "status": "Bad Request" + }, + "created_at": "2022-08-11T14:08:09.054554Z", + "updated_at": "2022-08-11T14:08:09.054554Z" +} diff --git a/src/stories/Ory/login-flow-2fa.json b/src/stories/Ory/login-flow-2fa.json index 315cb7bc3..d281a4c57 100644 --- a/src/stories/Ory/login-flow-2fa.json +++ b/src/stories/Ory/login-flow-2fa.json @@ -1,143 +1,143 @@ { - "id": "0e21a525-6aa7-40e2-8dbf-5fa51f292dc1", - "type": "browser", - "expires_at": "2022-08-22T22:32:15.614434Z", - "issued_at": "2022-08-22T22:02:15.614434Z", - "request_url": "http://project.console.ory.sh/self-service/login/browser?aal=aal2", - "ui": { - "action": "https://project.console.ory.sh/self-service/login?flow=0e21a525-6aa7-40e2-8dbf-5fa51f292dc1", - "method": "POST", - "nodes": [ - { - "type": "input", - "group": "default", - "attributes": { - "name": "csrf_token", - "type": "hidden", - "value": "daYqaGczESQOiLZ03a+YgBJC9eo/mHfVl52x4rFnS8gqrH/EoYRdnNT62zDsbHpeDdHvvNLmzxAPN+QBbmDpBw==", - "required": true, - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": {} - }, - { - "type": "input", - "group": "default", - "attributes": { - "name": "identifier", - "type": "hidden", - "value": "aecaf2bf-b33f-4271-9c4d-0c0eb722fcf8", - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": {} - }, - { - "type": "input", - "group": "webauthn", - "attributes": { - "name": "webauthn_login_trigger", - "type": "button", - "value": "", - "disabled": false, - "onclick": "window.__oryWebAuthnLogin({\"publicKey\":{\"challenge\":\"=\",\"timeout\":60000,\"rpId\":\"console.ory.sh\",\"allowCredentials\":[{\"type\":\"public-key\",\"id\":\"==\"}],\"userVerification\":\"discouraged\"}})", - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1010008, - "text": "Use security key", - "type": "info" - } - } - }, - { - "type": "input", - "group": "webauthn", - "attributes": { - "name": "webauthn_login", - "type": "hidden", - "value": "", - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": {} - }, - { - "type": "script", - "group": "webauthn", - "attributes": { - "src": "https://project.console.ory.sh/.well-known/ory/webauthn.js", - "async": true, - "referrerpolicy": "no-referrer", - "crossorigin": "anonymous", - "integrity": "sha512-E3ctShTQEYTkfWrjztRCbP77lN7L0jJC2IOd6j8vqUKslvqhX/Ho3QxlQJIeTI78krzAWUQlDXd9JQ0PZlKhzQ==", - "type": "text/javascript", - "id": "webauthn_script", - "nonce": "6d2cacc8-9abd-4f8f-b2b9-cd5250bfa677", - "node_type": "script" - }, - "messages": [], - "meta": {} - }, - { - "type": "input", - "group": "totp", - "attributes": { - "name": "totp_code", - "type": "text", - "value": "", - "required": true, - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1010006, - "text": "Authentication code", - "type": "info", - "context": {} - } - } - }, - { - "type": "input", - "group": "totp", - "attributes": { - "name": "method", - "type": "submit", - "value": "totp", - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1010009, - "text": "Use Authenticator", - "type": "info", - "context": {} - } - } - } - ], - "messages": [ - { - "id": 1010004, - "text": "Please complete the second authentication challenge.", - "type": "info", - "context": {} - } - ] - }, - "created_at": "2022-08-22T22:02:15.825471Z", - "updated_at": "2022-08-22T22:02:15.825471Z", - "refresh": false, - "requested_aal": "aal2" -} \ No newline at end of file + "id": "0e21a525-6aa7-40e2-8dbf-5fa51f292dc1", + "type": "browser", + "expires_at": "2022-08-22T22:32:15.614434Z", + "issued_at": "2022-08-22T22:02:15.614434Z", + "request_url": "http://project.console.ory.sh/self-service/login/browser?aal=aal2", + "ui": { + "action": "https://project.console.ory.sh/self-service/login?flow=0e21a525-6aa7-40e2-8dbf-5fa51f292dc1", + "method": "POST", + "nodes": [ + { + "type": "input", + "group": "default", + "attributes": { + "name": "csrf_token", + "type": "hidden", + "value": "daYqaGczESQOiLZ03a+YgBJC9eo/mHfVl52x4rFnS8gqrH/EoYRdnNT62zDsbHpeDdHvvNLmzxAPN+QBbmDpBw==", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "default", + "attributes": { + "name": "identifier", + "type": "hidden", + "value": "aecaf2bf-b33f-4271-9c4d-0c0eb722fcf8", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "webauthn", + "attributes": { + "name": "webauthn_login_trigger", + "type": "button", + "value": "", + "disabled": false, + "onclick": "window.__oryWebAuthnLogin({\"publicKey\":{\"challenge\":\"=\",\"timeout\":60000,\"rpId\":\"console.ory.sh\",\"allowCredentials\":[{\"type\":\"public-key\",\"id\":\"==\"}],\"userVerification\":\"discouraged\"}})", + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1010008, + "text": "Use security key", + "type": "info" + } + } + }, + { + "type": "input", + "group": "webauthn", + "attributes": { + "name": "webauthn_login", + "type": "hidden", + "value": "", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "script", + "group": "webauthn", + "attributes": { + "src": "https://project.console.ory.sh/.well-known/ory/webauthn.js", + "async": true, + "referrerpolicy": "no-referrer", + "crossorigin": "anonymous", + "integrity": "sha512-E3ctShTQEYTkfWrjztRCbP77lN7L0jJC2IOd6j8vqUKslvqhX/Ho3QxlQJIeTI78krzAWUQlDXd9JQ0PZlKhzQ==", + "type": "text/javascript", + "id": "webauthn_script", + "nonce": "6d2cacc8-9abd-4f8f-b2b9-cd5250bfa677", + "node_type": "script" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "totp", + "attributes": { + "name": "totp_code", + "type": "text", + "value": "", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1010006, + "text": "Authentication code", + "type": "info", + "context": {} + } + } + }, + { + "type": "input", + "group": "totp", + "attributes": { + "name": "method", + "type": "submit", + "value": "totp", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1010009, + "text": "Use Authenticator", + "type": "info", + "context": {} + } + } + } + ], + "messages": [ + { + "id": 1010004, + "text": "Please complete the second authentication challenge.", + "type": "info", + "context": {} + } + ] + }, + "created_at": "2022-08-22T22:02:15.825471Z", + "updated_at": "2022-08-22T22:02:15.825471Z", + "refresh": false, + "requested_aal": "aal2" +} diff --git a/src/stories/Ory/login-flow-error.json b/src/stories/Ory/login-flow-error.json index 49d504ac3..1b30aad5b 100644 --- a/src/stories/Ory/login-flow-error.json +++ b/src/stories/Ory/login-flow-error.json @@ -1,143 +1,143 @@ { - "id": "e565dc97-17cd-462c-b02a-575cae0073d7", - "type": "browser", - "expires_at": "2022-08-11T09:58:08.397197Z", - "issued_at": "2022-08-11T09:28:08.397197Z", - "request_url": "http://project.console.ory.sh/self-service/login/browser?refresh=false", - "ui": { - "action": "https://project.console.ory.sh/self-service/login?flow=e565dc97-17cd-462c-b02a-575cae0073d7", - "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" - } - } - } - }, - { - "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" - } - } - } - }, - { - "type": "input", - "group": "default", - "attributes": { - "name": "csrf_token", - "type": "hidden", - "value": "9MLkOckkbh9rK3kgR9qE2GJ5l86+NTRNXXsYwxe91gjhKXtl9aHG1TvNZiaOpwW2ioypjvKPt/KlrUFIRSnCUQ==", - "required": true, - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": {} - }, - { - "type": "input", - "group": "default", - "attributes": { - "name": "identifier", - "type": "text", - "value": "sd@fsd", - "required": true, - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1070004, - "text": "ID", - "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": 1010001, - "text": "Sign in", - "type": "info", - "context": {} - } - } + "id": "e565dc97-17cd-462c-b02a-575cae0073d7", + "type": "browser", + "expires_at": "2022-08-11T09:58:08.397197Z", + "issued_at": "2022-08-11T09:28:08.397197Z", + "request_url": "http://project.console.ory.sh/self-service/login/browser?refresh=false", + "ui": { + "action": "https://project.console.ory.sh/self-service/login?flow=e565dc97-17cd-462c-b02a-575cae0073d7", + "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" } - ], - "messages": [ - { - "id": 4000006, - "text": "The provided credentials are invalid, check for spelling mistakes in your password or username, email address, or phone number.", - "type": "error", - "context": {} + } + } + }, + { + "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" } - ] - }, - "created_at": "2022-08-11T09:28:08.405977Z", - "updated_at": "2022-08-11T09:28:08.405977Z", - "refresh": false, - "requested_aal": "aal1" -} \ No newline at end of file + } + } + }, + { + "type": "input", + "group": "default", + "attributes": { + "name": "csrf_token", + "type": "hidden", + "value": "9MLkOckkbh9rK3kgR9qE2GJ5l86+NTRNXXsYwxe91gjhKXtl9aHG1TvNZiaOpwW2ioypjvKPt/KlrUFIRSnCUQ==", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "default", + "attributes": { + "name": "identifier", + "type": "text", + "value": "sd@fsd", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070004, + "text": "ID", + "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": 1010001, + "text": "Sign in", + "type": "info", + "context": {} + } + } + } + ], + "messages": [ + { + "id": 4000006, + "text": "The provided credentials are invalid, check for spelling mistakes in your password or username, email address, or phone number.", + "type": "error", + "context": {} + } + ] + }, + "created_at": "2022-08-11T09:28:08.405977Z", + "updated_at": "2022-08-11T09:28:08.405977Z", + "refresh": false, + "requested_aal": "aal1" +} diff --git a/src/stories/Ory/login-flow.json b/src/stories/Ory/login-flow.json index 4e3e926bb..7d5c747e5 100644 --- a/src/stories/Ory/login-flow.json +++ b/src/stories/Ory/login-flow.json @@ -1,111 +1,111 @@ { - "id": "4a7c067f-ae1f-4015-b3e3-74e1de254b40", - "type": "browser", - "expires_at": "2022-08-23T18:50:56.82053129Z", - "issued_at": "2022-08-23T18:20:56.82053129Z", - "request_url": "http://test.com/self-service/login/browser", - "ui": { - "action": "http://test.com/self-service/login?flow=4a7c067f-ae1f-4015-b3e3-74e1de254b40", - "method": "POST", - "nodes": [ - { - "type": "input", - "group": "default", - "attributes": { - "name": "csrf_token", - "type": "hidden", - "value": "6Ov489/mtfsZ9cnFjqsSzxITOj4F6F1DaLTlrznzZtmFNHE9hssysNvRxD6vmbjhxexBYUcJ4HMC14wSREegkg==", - "required": true, - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": {} - }, - { - "type": "input", - "group": "default", - "attributes": { - "name": "identifier", - "type": "text", - "value": "", - "required": true, - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1070004, - "text": "ID", - "type": "info" - } - } - }, - { - "type": "input", - "group": "webauthn", - "attributes": { - "name": "method", - "type": "submit", - "value": "webauthn", - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1010001, - "text": "Sign in with security key", - "type": "info", - "context": {} - } - } - }, - { - "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": 1010001, - "text": "Sign in", - "type": "info", - "context": {} - } - } - } - ] - }, - "created_at": "2022-08-23T18:20:56.827165Z", - "updated_at": "2022-08-23T18:20:56.827165Z", - "refresh": false, - "requested_aal": "aal1" -} \ No newline at end of file + "id": "4a7c067f-ae1f-4015-b3e3-74e1de254b40", + "type": "browser", + "expires_at": "2022-08-23T18:50:56.82053129Z", + "issued_at": "2022-08-23T18:20:56.82053129Z", + "request_url": "http://test.com/self-service/login/browser", + "ui": { + "action": "http://test.com/self-service/login?flow=4a7c067f-ae1f-4015-b3e3-74e1de254b40", + "method": "POST", + "nodes": [ + { + "type": "input", + "group": "default", + "attributes": { + "name": "csrf_token", + "type": "hidden", + "value": "6Ov489/mtfsZ9cnFjqsSzxITOj4F6F1DaLTlrznzZtmFNHE9hssysNvRxD6vmbjhxexBYUcJ4HMC14wSREegkg==", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "default", + "attributes": { + "name": "identifier", + "type": "text", + "value": "", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070004, + "text": "ID", + "type": "info" + } + } + }, + { + "type": "input", + "group": "webauthn", + "attributes": { + "name": "method", + "type": "submit", + "value": "webauthn", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1010001, + "text": "Sign in with security key", + "type": "info", + "context": {} + } + } + }, + { + "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": 1010001, + "text": "Sign in", + "type": "info", + "context": {} + } + } + } + ] + }, + "created_at": "2022-08-23T18:20:56.827165Z", + "updated_at": "2022-08-23T18:20:56.827165Z", + "refresh": false, + "requested_aal": "aal1" +} diff --git a/src/stories/Ory/recovery-flow.json b/src/stories/Ory/recovery-flow.json index c1ceb15df..64414346d 100644 --- a/src/stories/Ory/recovery-flow.json +++ b/src/stories/Ory/recovery-flow.json @@ -1,66 +1,66 @@ { - "id": "d1aee690-fc92-456c-b4df-fcc536184d72", - "type": "browser", - "expires_at": "2022-08-10T16:22:14.721210778Z", - "issued_at": "2022-08-10T15:52:14.721210778Z", - "request_url": "http://project.console.ory.sh/self-service/recovery/browser", - "ui": { - "action": "https://project.console.ory.sh/self-service/recovery?flow=d1aee690-fc92-456c-b4df-fcc536184d72", - "method": "POST", - "nodes": [ - { - "type": "input", - "group": "default", - "attributes": { - "name": "csrf_token", - "type": "hidden", - "value": "908s8H/4VNyyLghv9crWHroZ/cu5el1IjQvOP3cQJS4ayNvETILNednFoWJ113AhcYrW8qNGJX2B1PAjRscNng==", - "required": true, - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": {} - }, - { - "type": "input", - "group": "link", - "attributes": { - "name": "email", - "type": "email", - "required": true, - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1070007, - "text": "Email", - "type": "info" - } - } - }, - { - "type": "input", - "group": "link", - "attributes": { - "name": "method", - "type": "submit", - "value": "link", - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1070005, - "text": "Submit", - "type": "info" - } - } - } - ] - }, - "state": "choose_method" -} \ No newline at end of file + "id": "d1aee690-fc92-456c-b4df-fcc536184d72", + "type": "browser", + "expires_at": "2022-08-10T16:22:14.721210778Z", + "issued_at": "2022-08-10T15:52:14.721210778Z", + "request_url": "http://project.console.ory.sh/self-service/recovery/browser", + "ui": { + "action": "https://project.console.ory.sh/self-service/recovery?flow=d1aee690-fc92-456c-b4df-fcc536184d72", + "method": "POST", + "nodes": [ + { + "type": "input", + "group": "default", + "attributes": { + "name": "csrf_token", + "type": "hidden", + "value": "908s8H/4VNyyLghv9crWHroZ/cu5el1IjQvOP3cQJS4ayNvETILNednFoWJ113AhcYrW8qNGJX2B1PAjRscNng==", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "link", + "attributes": { + "name": "email", + "type": "email", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070007, + "text": "Email", + "type": "info" + } + } + }, + { + "type": "input", + "group": "link", + "attributes": { + "name": "method", + "type": "submit", + "value": "link", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070005, + "text": "Submit", + "type": "info" + } + } + } + ] + }, + "state": "choose_method" +} diff --git a/src/stories/Ory/register-flow-webauthn.json b/src/stories/Ory/register-flow-webauthn.json index 3a62f77dc..2273a44e3 100644 --- a/src/stories/Ory/register-flow-webauthn.json +++ b/src/stories/Ory/register-flow-webauthn.json @@ -1,175 +1,175 @@ { - "id": "a4535906-1c4b-4b4a-b84e-8246b756dffe", - "type": "browser", - "expires_at": "2022-08-22T14:39:46.330928Z", - "issued_at": "2022-08-22T14:09:46.330928Z", - "request_url": "http://project.console.ory.sh/self-service/registration/browser?return_to=", - "ui": { - "action": "http://project.console.ory.sh/self-service/registration?flow=a4535906-1c4b-4b4a-b84e-8246b756dffe", - "method": "POST", - "nodes": [ - { - "type": "input", - "group": "default", - "attributes": { - "name": "traits.email", - "type": "email", - "required": true, - "autocomplete": "email", - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1070002, - "text": "E-Mail", - "type": "info" - } - } - }, - { - "type": "input", - "group": "default", - "attributes": { - "name": "traits.firstName", - "type": "text", - "required": true, - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1070002, - "text": "First Name", - "type": "info" - } - } - }, - { - "type": "input", - "group": "default", - "attributes": { - "name": "csrf_token", - "type": "hidden", - "value": "f5EgWzcuFMVn0hSuGmotWjJntG1VRIWHzRdpqOfNucu+JJempBB0+ivjTG6iR50mV1ScEpwoshFF0pe/nESywA==", - "required": true, - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": {} - }, - { - "type": "input", - "group": "webauthn", - "attributes": { - "name": "webauthn_register_displayname", - "type": "text", - "value": "", - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1050013, - "text": "Name of the security key", - "type": "info" - } - } - }, - { - "type": "input", - "group": "webauthn", - "attributes": { - "name": "webauthn_register", - "type": "hidden", - "value": "", - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": {} - }, - { - "type": "input", - "group": "webauthn", - "attributes": { - "name": "webauthn_register_trigger", - "type": "button", - "value": "", - "disabled": false, - "onclick": "window.__oryWebAuthnRegistration({\"publicKey\":{\"challenge\":\"s=\",\"rp\":{\"name\":\"Personal\",\"id\":\"some-slug.projects.oryapis.com\"},\"user\":{\"name\":\"placeholder\",\"icon\":\"https://via.placeholder.com/128\",\"displayName\":\"placeholder\",\"id\":\"==\"},\"pubKeyCredParams\":[{\"type\":\"public-key\",\"alg\":-7},{\"type\":\"public-key\",\"alg\":-35},{\"type\":\"public-key\",\"alg\":-36},{\"type\":\"public-key\",\"alg\":-257},{\"type\":\"public-key\",\"alg\":-258},{\"type\":\"public-key\",\"alg\":-259},{\"type\":\"public-key\",\"alg\":-37},{\"type\":\"public-key\",\"alg\":-38},{\"type\":\"public-key\",\"alg\":-39},{\"type\":\"public-key\",\"alg\":-8}],\"authenticatorSelection\":{\"userVerification\":\"discouraged\"},\"timeout\":60000}})", - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1040004, - "text": "Sign up with security key", - "type": "info" - } - } - }, - { - "type": "script", - "group": "webauthn", - "attributes": { - "src": "http://project.console.ory.sh/.well-known/ory/webauthn.js", - "async": true, - "referrerpolicy": "no-referrer", - "crossorigin": "anonymous", - "integrity": "sha512-E3ctShTQEYTkfWrjztRCbP77lN7L0jJC2IOd6j8vqUKslvqhX/Ho3QxlQJIeTI78krzAWUQlDXd9JQ0PZlKhzQ==", - "type": "text/javascript", - "id": "webauthn_script", - "nonce": "107c6218-7cc9-4533-917d-57ccc3cf90c6", - "node_type": "script" - }, - "messages": [], - "meta": {} - }, - { - "type": "input", - "group": "password", - "attributes": { - "name": "password", - "type": "password", - "required": true, - "autocomplete": "new-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": 1040001, - "text": "Sign up", - "type": "info", - "context": {} - } - } - } - ] - } -} \ No newline at end of file + "id": "a4535906-1c4b-4b4a-b84e-8246b756dffe", + "type": "browser", + "expires_at": "2022-08-22T14:39:46.330928Z", + "issued_at": "2022-08-22T14:09:46.330928Z", + "request_url": "http://project.console.ory.sh/self-service/registration/browser?return_to=", + "ui": { + "action": "http://project.console.ory.sh/self-service/registration?flow=a4535906-1c4b-4b4a-b84e-8246b756dffe", + "method": "POST", + "nodes": [ + { + "type": "input", + "group": "default", + "attributes": { + "name": "traits.email", + "type": "email", + "required": true, + "autocomplete": "email", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "E-Mail", + "type": "info" + } + } + }, + { + "type": "input", + "group": "default", + "attributes": { + "name": "traits.firstName", + "type": "text", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "First Name", + "type": "info" + } + } + }, + { + "type": "input", + "group": "default", + "attributes": { + "name": "csrf_token", + "type": "hidden", + "value": "f5EgWzcuFMVn0hSuGmotWjJntG1VRIWHzRdpqOfNucu+JJempBB0+ivjTG6iR50mV1ScEpwoshFF0pe/nESywA==", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "webauthn", + "attributes": { + "name": "webauthn_register_displayname", + "type": "text", + "value": "", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050013, + "text": "Name of the security key", + "type": "info" + } + } + }, + { + "type": "input", + "group": "webauthn", + "attributes": { + "name": "webauthn_register", + "type": "hidden", + "value": "", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "webauthn", + "attributes": { + "name": "webauthn_register_trigger", + "type": "button", + "value": "", + "disabled": false, + "onclick": "window.__oryWebAuthnRegistration({\"publicKey\":{\"challenge\":\"s=\",\"rp\":{\"name\":\"Personal\",\"id\":\"some-slug.projects.oryapis.com\"},\"user\":{\"name\":\"placeholder\",\"icon\":\"https://via.placeholder.com/128\",\"displayName\":\"placeholder\",\"id\":\"==\"},\"pubKeyCredParams\":[{\"type\":\"public-key\",\"alg\":-7},{\"type\":\"public-key\",\"alg\":-35},{\"type\":\"public-key\",\"alg\":-36},{\"type\":\"public-key\",\"alg\":-257},{\"type\":\"public-key\",\"alg\":-258},{\"type\":\"public-key\",\"alg\":-259},{\"type\":\"public-key\",\"alg\":-37},{\"type\":\"public-key\",\"alg\":-38},{\"type\":\"public-key\",\"alg\":-39},{\"type\":\"public-key\",\"alg\":-8}],\"authenticatorSelection\":{\"userVerification\":\"discouraged\"},\"timeout\":60000}})", + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1040004, + "text": "Sign up with security key", + "type": "info" + } + } + }, + { + "type": "script", + "group": "webauthn", + "attributes": { + "src": "http://project.console.ory.sh/.well-known/ory/webauthn.js", + "async": true, + "referrerpolicy": "no-referrer", + "crossorigin": "anonymous", + "integrity": "sha512-E3ctShTQEYTkfWrjztRCbP77lN7L0jJC2IOd6j8vqUKslvqhX/Ho3QxlQJIeTI78krzAWUQlDXd9JQ0PZlKhzQ==", + "type": "text/javascript", + "id": "webauthn_script", + "nonce": "107c6218-7cc9-4533-917d-57ccc3cf90c6", + "node_type": "script" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "password", + "attributes": { + "name": "password", + "type": "password", + "required": true, + "autocomplete": "new-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": 1040001, + "text": "Sign up", + "type": "info", + "context": {} + } + } + } + ] + } +} diff --git a/src/stories/Ory/register-flow.json b/src/stories/Ory/register-flow.json index 5118bfc50..5727c9b3b 100644 --- a/src/stories/Ory/register-flow.json +++ b/src/stories/Ory/register-flow.json @@ -1,187 +1,187 @@ { - "id": "c9dd6996-b5f9-4255-ba49-5ed0e13b1b9a", - "type": "browser", - "expires_at": "2022-08-05T11:13:15.502149013Z", - "issued_at": "2022-08-05T10:43:15.502149013Z", - "request_url": "http://project.console.ory.sh/self-service/registration/browser", - "ui": { - "action": "https://project.console.ory.sh/self-service/registration?flow=c9dd6996-b5f9-4255-ba49-5ed0e13b1b9a", - "method": "POST", - "nodes": [ - { - "type": "input", - "group": "default", - "attributes": { - "name": "csrf_token", - "type": "hidden", - "value": "tFdjiYdn6IgyeoiDfN7AGRgDX2AzcwhcJl4emCXMKo3ciO6e5FxI9MDvRov1yWUtA07pe6dYa/yejFY72+ktsQ==", - "required": true, - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": {} - }, - { - "type": "input", - "group": "oidc", - "attributes": { - "name": "provider", - "type": "submit", - "value": "github", - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1040002, - "text": "Sign up with github", - "type": "info", - "context": { - "provider": "github" - } - } - } - }, - { - "type": "input", - "group": "oidc", - "attributes": { - "name": "provider", - "type": "submit", - "value": "google", - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1040002, - "text": "Sign up with google", - "type": "info", - "context": { - "provider": "google" - } - } - } - }, - { - "type": "input", - "group": "password", - "attributes": { - "name": "traits.email", - "type": "email", - "required": true, - "autocomplete": "email", - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1070002, - "text": "Email address", - "type": "info" - } - } - }, - { - "type": "input", - "group": "password", - "attributes": { - "name": "password", - "type": "password", - "required": true, - "autocomplete": "new-password", - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1070001, - "text": "Password", - "type": "info" - } - } - }, - { - "type": "input", - "group": "password", - "attributes": { - "name": "traits.name", - "type": "text", - "required": true, - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1070002, - "text": "Name", - "type": "info" - } - } - }, - { - "type": "input", - "group": "password", - "attributes": { - "name": "traits.consent.newsletter", - "type": "checkbox", - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1070002, - "text": "Please inform me about platform and security updates", - "type": "info" - } - } - }, - { - "type": "input", - "group": "password", - "attributes": { - "name": "traits.consent.tos", - "type": "datetime-local", - "required": true, - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1070002, - "text": "I accept the Terms of Service https://www.ory.sh/ptos", - "type": "info" - } - } - }, - { - "type": "input", - "group": "password", - "attributes": { - "name": "method", - "type": "submit", - "value": "password", - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1040001, - "text": "Sign up", - "type": "info", - "context": {} - } - } + "id": "c9dd6996-b5f9-4255-ba49-5ed0e13b1b9a", + "type": "browser", + "expires_at": "2022-08-05T11:13:15.502149013Z", + "issued_at": "2022-08-05T10:43:15.502149013Z", + "request_url": "http://project.console.ory.sh/self-service/registration/browser", + "ui": { + "action": "https://project.console.ory.sh/self-service/registration?flow=c9dd6996-b5f9-4255-ba49-5ed0e13b1b9a", + "method": "POST", + "nodes": [ + { + "type": "input", + "group": "default", + "attributes": { + "name": "csrf_token", + "type": "hidden", + "value": "tFdjiYdn6IgyeoiDfN7AGRgDX2AzcwhcJl4emCXMKo3ciO6e5FxI9MDvRov1yWUtA07pe6dYa/yejFY72+ktsQ==", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "oidc", + "attributes": { + "name": "provider", + "type": "submit", + "value": "github", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1040002, + "text": "Sign up with github", + "type": "info", + "context": { + "provider": "github" } - ] - } -} \ No newline at end of file + } + } + }, + { + "type": "input", + "group": "oidc", + "attributes": { + "name": "provider", + "type": "submit", + "value": "google", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1040002, + "text": "Sign up with google", + "type": "info", + "context": { + "provider": "google" + } + } + } + }, + { + "type": "input", + "group": "password", + "attributes": { + "name": "traits.email", + "type": "email", + "required": true, + "autocomplete": "email", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Email address", + "type": "info" + } + } + }, + { + "type": "input", + "group": "password", + "attributes": { + "name": "password", + "type": "password", + "required": true, + "autocomplete": "new-password", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070001, + "text": "Password", + "type": "info" + } + } + }, + { + "type": "input", + "group": "password", + "attributes": { + "name": "traits.name", + "type": "text", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Name", + "type": "info" + } + } + }, + { + "type": "input", + "group": "password", + "attributes": { + "name": "traits.consent.newsletter", + "type": "checkbox", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Please inform me about platform and security updates", + "type": "info" + } + } + }, + { + "type": "input", + "group": "password", + "attributes": { + "name": "traits.consent.tos", + "type": "datetime-local", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "I accept the Terms of Service https://www.ory.sh/ptos", + "type": "info" + } + } + }, + { + "type": "input", + "group": "password", + "attributes": { + "name": "method", + "type": "submit", + "value": "password", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1040001, + "text": "Sign up", + "type": "info", + "context": {} + } + } + } + ] + } +} diff --git a/src/stories/Ory/verification-flow.json b/src/stories/Ory/verification-flow.json index 1b0c2b46e..add77e013 100644 --- a/src/stories/Ory/verification-flow.json +++ b/src/stories/Ory/verification-flow.json @@ -1,66 +1,66 @@ { - "id": "544adecc-d51f-443a-b5a0-8e57a639bcbf", - "type": "browser", - "expires_at": "2022-08-10T17:31:11.730178932Z", - "issued_at": "2022-08-10T16:31:11.730178932Z", - "request_url": "http://project.console.ory.sh/self-service/verification/browser", - "ui": { - "action": "https://project.console.ory.sh/self-service/verification?flow=544adecc-d51f-443a-b5a0-8e57a639bcbf", - "method": "POST", - "nodes": [ - { - "type": "input", - "group": "default", - "attributes": { - "name": "csrf_token", - "type": "hidden", - "value": "Tdt00Dex00zJt+wEPXedaEaBIfyfqyJEP3A1jUnribGgXIPkBMtK6aJcRQm9ajtXjRIKxYWXWnEzrwuReDyhAQ==", - "required": true, - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": {} - }, - { - "type": "input", - "group": "link", - "attributes": { - "name": "email", - "type": "email", - "required": true, - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1070007, - "text": "Email", - "type": "info" - } - } - }, - { - "type": "input", - "group": "link", - "attributes": { - "name": "method", - "type": "submit", - "value": "link", - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": { - "label": { - "id": 1070005, - "text": "Submit", - "type": "info" - } - } - } - ] - }, - "state": "choose_method" -} \ No newline at end of file + "id": "544adecc-d51f-443a-b5a0-8e57a639bcbf", + "type": "browser", + "expires_at": "2022-08-10T17:31:11.730178932Z", + "issued_at": "2022-08-10T16:31:11.730178932Z", + "request_url": "http://project.console.ory.sh/self-service/verification/browser", + "ui": { + "action": "https://project.console.ory.sh/self-service/verification?flow=544adecc-d51f-443a-b5a0-8e57a639bcbf", + "method": "POST", + "nodes": [ + { + "type": "input", + "group": "default", + "attributes": { + "name": "csrf_token", + "type": "hidden", + "value": "Tdt00Dex00zJt+wEPXedaEaBIfyfqyJEP3A1jUnribGgXIPkBMtK6aJcRQm9ajtXjRIKxYWXWnEzrwuReDyhAQ==", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "link", + "attributes": { + "name": "email", + "type": "email", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070007, + "text": "Email", + "type": "info" + } + } + }, + { + "type": "input", + "group": "link", + "attributes": { + "name": "method", + "type": "submit", + "value": "link", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070005, + "text": "Submit", + "type": "info" + } + } + } + ] + }, + "state": "choose_method" +} diff --git a/src/theme/nav.css.ts b/src/theme/nav.css.ts index 64bdf781a..fc27afc90 100644 --- a/src/theme/nav.css.ts +++ b/src/theme/nav.css.ts @@ -41,7 +41,7 @@ export const navSectionTitleStyle = style({ flexDirection: "row", justifyContent: "space-between", alignItems: "center", - + padding: pxToRem(0, 8, 6), }) diff --git a/tests/preact-spa/package.json b/tests/preact-spa/package.json index fc1307862..317ce3402 100644 --- a/tests/preact-spa/package.json +++ b/tests/preact-spa/package.json @@ -24,4 +24,4 @@ "eslintConfig": { "extends": "preact" } -} \ No newline at end of file +} diff --git a/tests/preact-spa/vite.config.ts b/tests/preact-spa/vite.config.ts index e3bdaffe8..c8a215738 100644 --- a/tests/preact-spa/vite.config.ts +++ b/tests/preact-spa/vite.config.ts @@ -1,7 +1,7 @@ -import { defineConfig } from 'vite' -import preact from '@preact/preset-vite' +import { defineConfig } from "vite" +import preact from "@preact/preset-vite" // https://vitejs.dev/config/ export default defineConfig({ - plugins: [preact()] + plugins: [preact()], }) diff --git a/tests/react-spa/package.json b/tests/react-spa/package.json index f26bf90cd..20f60247e 100644 --- a/tests/react-spa/package.json +++ b/tests/react-spa/package.json @@ -21,4 +21,4 @@ "typescript": "^4.6.4", "vite": "^3.0.7" } -} \ No newline at end of file +} diff --git a/tests/react-spa/vite.config.ts b/tests/react-spa/vite.config.ts index b1b5f91e5..16d719d61 100644 --- a/tests/react-spa/vite.config.ts +++ b/tests/react-spa/vite.config.ts @@ -1,7 +1,7 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' +import { defineConfig } from "vite" +import react from "@vitejs/plugin-react" // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()] + plugins: [react()], }) diff --git a/tsconfig.build.json b/tsconfig.build.json index 0e21a886d..6ce3f196a 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -1,13 +1,19 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "emitDeclarationOnly": false, - "declaration": true, - "declarationMap": true, - "declarationDir": "dist", - "rootDir": "./src", - "noEmit": false - }, - "include": ["./src"], - "exclude": ["**/*.spec.*", "**/*.test.*", "**/*.stories.*", "node_modules", "dist"] -} \ No newline at end of file + "extends": "./tsconfig.json", + "compilerOptions": { + "emitDeclarationOnly": false, + "declaration": true, + "declarationMap": true, + "declarationDir": "dist", + "rootDir": "./src", + "noEmit": false + }, + "include": ["./src"], + "exclude": [ + "**/*.spec.*", + "**/*.test.*", + "**/*.stories.*", + "node_modules", + "dist" + ] +} diff --git a/tsconfig.json b/tsconfig.json index d27f8ade9..8108760c9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,11 +2,7 @@ "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, - "lib": [ - "DOM", - "DOM.Iterable", - "ESNext" - ], + "lib": ["DOM", "DOM.Iterable", "ESNext"], "allowJs": false, "skipLibCheck": true, "esModuleInterop": true, diff --git a/tsconfig.node.json b/tsconfig.node.json index 0fdd25208..7fa507678 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -5,7 +5,7 @@ "moduleResolution": "Node", "allowSyntheticDefaultImports": true, "resolveJsonModule": true, - "esModuleInterop": true, + "esModuleInterop": true }, "include": ["vite.config.ts"] }