From 466933a490ef2f8eb63999895bfb4a36af2f0ecf Mon Sep 17 00:00:00 2001 From: Gao Sun Date: Mon, 14 Aug 2023 15:05:41 +0800 Subject: [PATCH 1/2] feat(console): guide modal v2 --- packages/console/package.json | 2 + .../console/src/assets/docs/guides/README.md | 49 +++++ .../assets/docs/guides/generate-metadata.js | 59 ++++++ .../console/src/assets/docs/guides/index.ts | 17 ++ .../assets/docs/guides/spa-react/README.mdx | 189 ++++++++++++++++++ .../src/assets/docs/guides/spa-react/index.ts | 12 ++ .../src/assets/docs/guides/spa-react/logo.svg | 9 + .../console/src/assets/docs/guides/types.ts | 42 ++++ packages/console/src/consts/env.ts | 1 + packages/console/src/hooks/use-scroll.ts | 2 +- .../console/src/mdx-components-v2/README.md | 5 + .../mdx-components-v2/Step/index.module.scss | 15 ++ .../src/mdx-components-v2/Step/index.tsx | 32 +++ .../mdx-components-v2/Steps/index.module.scss | 44 ++++ .../src/mdx-components-v2/Steps/index.tsx | 92 +++++++++ .../components/Guide/GuideModal.tsx | 10 +- .../GuideHeaderV2/index.module.scss | 37 ++++ .../components/GuideHeaderV2/index.tsx | 55 +++++ .../components/GuideV2/index.module.scss | 44 ++++ .../Applications/components/GuideV2/index.tsx | 90 +++++++++ .../core-kit/scss/_console-themes.scss | 31 +++ 21 files changed, 835 insertions(+), 2 deletions(-) create mode 100644 packages/console/src/assets/docs/guides/README.md create mode 100644 packages/console/src/assets/docs/guides/generate-metadata.js create mode 100644 packages/console/src/assets/docs/guides/index.ts create mode 100644 packages/console/src/assets/docs/guides/spa-react/README.mdx create mode 100644 packages/console/src/assets/docs/guides/spa-react/index.ts create mode 100644 packages/console/src/assets/docs/guides/spa-react/logo.svg create mode 100644 packages/console/src/assets/docs/guides/types.ts create mode 100644 packages/console/src/mdx-components-v2/README.md create mode 100644 packages/console/src/mdx-components-v2/Step/index.module.scss create mode 100644 packages/console/src/mdx-components-v2/Step/index.tsx create mode 100644 packages/console/src/mdx-components-v2/Steps/index.module.scss create mode 100644 packages/console/src/mdx-components-v2/Steps/index.tsx create mode 100644 packages/console/src/pages/Applications/components/GuideHeaderV2/index.module.scss create mode 100644 packages/console/src/pages/Applications/components/GuideHeaderV2/index.tsx create mode 100644 packages/console/src/pages/Applications/components/GuideV2/index.module.scss create mode 100644 packages/console/src/pages/Applications/components/GuideV2/index.tsx diff --git a/packages/console/package.json b/packages/console/package.json index 9c63a4cf5..bcc1338bf 100644 --- a/packages/console/package.json +++ b/packages/console/package.json @@ -156,6 +156,8 @@ { "files": [ "*.d.ts", + "**/assets/docs/guides/types.ts", + "**/assets/docs/guides/**/index.ts", "**/mdx-components/*/index.tsx" ], "rules": { diff --git a/packages/console/src/assets/docs/guides/README.md b/packages/console/src/assets/docs/guides/README.md new file mode 100644 index 000000000..26b90c8e4 --- /dev/null +++ b/packages/console/src/assets/docs/guides/README.md @@ -0,0 +1,49 @@ +# Guides + +> This directory is a part of the guide v2 project. The sibling directory `tutorial` will be removed once the guide v2 project is complete. + +This directory serves as the home for all guides related to the console. Every guide should have a directory with the following structure: + +``` +[target]-name +├── assets +│ └── image-name.png +├── index.ts +├── logo.svg +└── README.mdx +``` + +The `README.mdx` file contains the actual guide content. The `assets` directory contains all images used in the guide. The `index.ts` file exports the guide's metadata, which is used to display, sort and filter the guides in the console. + +## Write a guide + +### Create the guide directory + +The guide directory should be named `[target]-name`, where `[target]` is the target of the guide in kebab-case (see `types.ts` for a list of all targets) and `name` is the name of the guide. The name should be kebab-cased and should not contain any special characters. + +For example, a guide for the `MachineToMachine` target with the name `General` should be placed in the directory `machine-to-machine-general`; a guide for the `SPA` target with the name `React` should be placed in the directory `spa-react`. + +> **Note** +> The directory name will be the unique identifier of the guide. + +### Create the guide metadata + +The guide metadata should be the default export of the `index.ts` file. It should be an object with the `GuideMetadata` type in `types.ts` as its type. + +### Write the guide content + +The guide content is written in [MDX](https://mdxjs.com/), which is a combination of Markdown and JSX. This allows us to use React components in the guide content. + +### Add the logo + +The logo should be placed in the guide directory and named `logo.svg`. It will be displayed in the guide list and other places where the guide is referenced. + +### Add images and other assets + +Images and other assets (if any) should be placed in the `assets` directory of the guide. They can then be referenced in the guide content. + +### Update metadata + +Since Parcel doesn't support dynamic import (see [#112](https://github.com/parcel-bundler/parcel/issues/112) [#125](https://github.com/parcel-bundler/parcel/issues/125)), we need to run `node generate-metadata.js` to update the metadata in `index.ts`, thus we can use it in the guide components with React lazy loading. + +This may be fixed by replacing Parcel with something else. diff --git a/packages/console/src/assets/docs/guides/generate-metadata.js b/packages/console/src/assets/docs/guides/generate-metadata.js new file mode 100644 index 000000000..7f6370f7f --- /dev/null +++ b/packages/console/src/assets/docs/guides/generate-metadata.js @@ -0,0 +1,59 @@ +import { existsSync } from 'node:fs'; +import fs from 'node:fs/promises'; + +const entries = await fs.readdir('.'); +const directories = entries.filter((entry) => !entry.includes('.')); + +const metadata = directories + .map((directory) => { + if (!existsSync(`${directory}/README.mdx`)) { + console.warn(`No README.mdx file found in ${directory} directory, skipping.`); + return; + } + + if (!existsSync(`${directory}/index.ts`)) { + console.warn(`No index.ts file found in ${directory} directory, skipping.`); + return; + } + + // Add `.png` later + const logo = ['logo.svg'].find((logo) => existsSync(`${directory}/${logo}`)); + + return { + name: directory, + logo, + }; + }) + .filter(Boolean); + +const camelCase = (value) => value.replaceAll(/-./g, (x) => x[1].toUpperCase()); +const filename = 'index.ts'; + +await fs.writeFile( + filename, + "// This is a generated file, don't update manually.\n\nimport { lazy } from 'react';\n\nimport { type Guide } from './types';\n" +); + +for (const { name } of metadata) { + // eslint-disable-next-line no-await-in-loop + await fs.appendFile(filename, `import ${camelCase(name)} from './${name}/index';\n`); +} + +await fs.appendFile(filename, '\n'); +await fs.appendFile(filename, 'const guides: Readonly = Object.freeze(['); + +for (const { name, logo } of metadata) { + fs.appendFile( + filename, + ` + { + id: '${name}', + logo: ${logo ? `lazy(async () => import('./${name}/${logo}'))` : 'undefined'}, + Component: lazy(async () => import('./${name}/README.mdx')), + metadata: ${camelCase(name)}, + }, +` + ); +} + +await fs.appendFile(filename, ']);\n\nexport default guides;\n'); diff --git a/packages/console/src/assets/docs/guides/index.ts b/packages/console/src/assets/docs/guides/index.ts new file mode 100644 index 000000000..e36c3ee22 --- /dev/null +++ b/packages/console/src/assets/docs/guides/index.ts @@ -0,0 +1,17 @@ +// This is a generated file, don't update manually. + +import { lazy } from 'react'; + +import spaReact from './spa-react/index'; +import { type Guide } from './types'; + +const guides: Readonly = Object.freeze([ + { + id: 'spa-react', + logo: lazy(async () => import('./spa-react/logo.svg')), + Component: lazy(async () => import('./spa-react/README.mdx')), + metadata: spaReact, + }, +]); + +export default guides; diff --git a/packages/console/src/assets/docs/guides/spa-react/README.mdx b/packages/console/src/assets/docs/guides/spa-react/README.mdx new file mode 100644 index 000000000..fb6c4df0a --- /dev/null +++ b/packages/console/src/assets/docs/guides/spa-react/README.mdx @@ -0,0 +1,189 @@ +import UriInputField from '@mdx/components/UriInputField'; +import Tabs from '@mdx/components/Tabs'; +import TabItem from '@mdx/components/TabItem'; +import InlineNotification from '@/ds-components/InlineNotification'; +import Steps from '@/mdx-components-v2/Steps'; +import Step from '@/mdx-components-v2/Step'; + + + + + + + +```bash +npm i @logto/react +``` + + + + +```bash +yarn add @logto/react +``` + + + + +```bash +pnpm add @logto/react +``` + + + + + + + +Import and use `LogtoProvider` to provide a Logto context: + +
+  
+    {`import { LogtoProvider, LogtoConfig } from '@logto/react';
+
+const config: LogtoConfig = {
+  endpoint: '${props.endpoint}',${props.alternativeEndpoint ? ` // or "${props.alternativeEndpoint}"` : ''}
+  appId: '${props.appId}',
+};
+
+const App = () => (
+  
+    
+  
+);`}
+  
+
+ + + + + + + In the following steps, we assume your app is running on http://localhost:3000. + + +### Configure Redirect URI + +First, let’s enter your redirect URI. E.g. `http://localhost:3000/callback`. + + + +### Implement a sign-in button + +We provide two hooks `useHandleSignInCallback()` and `useLogto()` which can help you easily manage the authentication flow. + +Go back to your IDE/editor, use the following code to implement the sign-in button: + +
+  
+    {`import { useLogto } from '@logto/react';
+
+const SignIn = () => {
+  const { signIn, isAuthenticated } = useLogto();
+
+  if (isAuthenticated) {
+    return 
Signed in
;
+  }
+
+  return (
+    
+  );
+};`}
+  
+
+ +### Handle redirect + +We're almost there! In the last step, we use `http://localhost:3000/callback` as the Redirect URI, and now we need to handle it properly. + +First let's create a callback component: + +```tsx +import { useHandleSignInCallback } from '@logto/react'; + +const Callback = () => { + const { isLoading } = useHandleSignInCallback(() => { + // Navigate to root path when finished + }); + + // When it's working in progress + if (isLoading) { + return
Redirecting...
; + } +}; +``` + +Finally insert the code below to create a `/callback` route which does NOT require authentication: + +```tsx +// Assuming react-router +} /> +``` + + + + + +Calling `.signOut()` will clear all the Logto data in memory and localStorage if they exist. + +After signing out, it'll be great to redirect user back to your website. Let's add `http://localhost:3000` as the Post Sign-out URI below, and use it as the parameter when calling `.signOut()`. + + + +### Implement a sign-out button + +
+  
+    {`const SignOut = () => {
+  const { signOut } = useLogto();
+
+  return (
+    
+  );
+};`}
+  
+
+ + + + + +- [Customize sign-in experience](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience) +- [Enable SMS or email passcode sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-sms-or-email-passwordless-sign-in) +- [Enable social sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-social-sign-in) +- [Protect your API](https://docs.logto.io/docs/recipes/protect-your-api) + + + + diff --git a/packages/console/src/assets/docs/guides/spa-react/index.ts b/packages/console/src/assets/docs/guides/spa-react/index.ts new file mode 100644 index 000000000..559a162d4 --- /dev/null +++ b/packages/console/src/assets/docs/guides/spa-react/index.ts @@ -0,0 +1,12 @@ +import { ApplicationType } from '@logto/schemas'; + +import { type GuideMetadata } from '../types'; + +const metadata: Readonly = Object.freeze({ + name: 'React', + description: 'React is a JavaScript library for building user interfaces.', + target: ApplicationType.SPA, + language: 'javascript', +}); + +export default metadata; diff --git a/packages/console/src/assets/docs/guides/spa-react/logo.svg b/packages/console/src/assets/docs/guides/spa-react/logo.svg new file mode 100644 index 000000000..ea77a618d --- /dev/null +++ b/packages/console/src/assets/docs/guides/spa-react/logo.svg @@ -0,0 +1,9 @@ + + React Logo + + + + + + + diff --git a/packages/console/src/assets/docs/guides/types.ts b/packages/console/src/assets/docs/guides/types.ts new file mode 100644 index 000000000..fc466b4b5 --- /dev/null +++ b/packages/console/src/assets/docs/guides/types.ts @@ -0,0 +1,42 @@ +import { type ApplicationType } from '@logto/schemas'; +import { type MDXProps } from 'mdx/types'; +import { type LazyExoticComponent, type FunctionComponent } from 'react'; + +type ProgrammingLanguage = + | 'javascript' + | 'typescript' + | 'go' + | 'java' + | 'swift' + | 'kotlin' + | 'php' + | 'python' + | 'agnostic'; + +/** + * The guide metadata type. The directory name that the metadata is in will be the + * unique identifier of the guide. + */ +export type GuideMetadata = { + /** The name of the target (framework, language, or platform) that the guide is for. */ + name: string; + /** The short description of the guide, should be less than 100 characters. */ + description?: string; + /** + * The target resource of the guide. + * + * For example, if the guide is for application creation, the target should be `ApplicationType`, + * and an application of the target type should be created. + */ + target: ApplicationType | 'API'; + /** The programming language of the guide. If it doesn't apply, set it to `agnostic`. */ + language: ProgrammingLanguage; +}; + +/** The guide instance to build in the console. */ +export type Guide = { + id: string; + logo?: LazyExoticComponent; + Component: LazyExoticComponent>; + metadata: Readonly; +}; diff --git a/packages/console/src/consts/env.ts b/packages/console/src/consts/env.ts index 39c14a317..147fa6d25 100644 --- a/packages/console/src/consts/env.ts +++ b/packages/console/src/consts/env.ts @@ -1,4 +1,5 @@ import { yes } from '@silverhand/essentials'; +export const isProduction = process.env.NODE_ENV === 'production'; export const isCloud = yes(process.env.IS_CLOUD); export const adminEndpoint = process.env.ADMIN_ENDPOINT; diff --git a/packages/console/src/hooks/use-scroll.ts b/packages/console/src/hooks/use-scroll.ts index 21cab2f0d..a3bc1ad5b 100644 --- a/packages/console/src/hooks/use-scroll.ts +++ b/packages/console/src/hooks/use-scroll.ts @@ -1,7 +1,7 @@ import type { Nullable } from '@silverhand/essentials'; import { useState, useEffect, useCallback } from 'react'; -const useScroll = (contentRef: Nullable) => { +const useScroll = (contentRef: Nullable) => { const [scrollTop, setScrollTop] = useState(0); const [scrollLeft, setScrollLeft] = useState(0); diff --git a/packages/console/src/mdx-components-v2/README.md b/packages/console/src/mdx-components-v2/README.md new file mode 100644 index 000000000..25b562d05 --- /dev/null +++ b/packages/console/src/mdx-components-v2/README.md @@ -0,0 +1,5 @@ +# MDX components v2 + +This directory contains the source code for the new app creation guide MDX components. We'll progressively adopt the new design and delete `mdx-components` once we're done. + +The core component is `` which renders the guide content. diff --git a/packages/console/src/mdx-components-v2/Step/index.module.scss b/packages/console/src/mdx-components-v2/Step/index.module.scss new file mode 100644 index 000000000..2278718e3 --- /dev/null +++ b/packages/console/src/mdx-components-v2/Step/index.module.scss @@ -0,0 +1,15 @@ +@use '@/scss/underscore' as _; + +.wrapper { + border-radius: 16px; + background: var(--color-layer-1); + padding: _.unit(5) _.unit(6); + width: 100%; + + header { + display: flex; + align-items: center; + gap: _.unit(4); + margin-bottom: _.unit(6); + } +} diff --git a/packages/console/src/mdx-components-v2/Step/index.tsx b/packages/console/src/mdx-components-v2/Step/index.tsx new file mode 100644 index 000000000..9d63d0b10 --- /dev/null +++ b/packages/console/src/mdx-components-v2/Step/index.tsx @@ -0,0 +1,32 @@ +import { type ReactNode, forwardRef, type Ref } from 'react'; + +import Index from '@/components/Index'; +import CardTitle from '@/ds-components/CardTitle'; +import DangerousRaw from '@/ds-components/DangerousRaw'; + +import * as styles from './index.module.scss'; + +export type Props = { + index: number; + title: string; + subtitle?: string; + children: ReactNode; +}; + +function Step({ title, subtitle, index, children }: Props, ref?: Ref) { + return ( +
+
+ + {title}} + subtitle={{subtitle}} + /> +
+
{children}
+
+ ); +} + +export default forwardRef(Step); diff --git a/packages/console/src/mdx-components-v2/Steps/index.module.scss b/packages/console/src/mdx-components-v2/Steps/index.module.scss new file mode 100644 index 000000000..b7efe84e9 --- /dev/null +++ b/packages/console/src/mdx-components-v2/Steps/index.module.scss @@ -0,0 +1,44 @@ +@use '@/scss/underscore' as _; + +.wrapper { + position: relative; +} + +.navigationAnchor { + position: absolute; + inset: 0 auto 0 0; + transform: translateX(-100%); +} + +.navigation { + position: sticky; + top: 0; + flex-shrink: 0; + margin-right: _.unit(4); + width: 220px; + + > :not(:last-child) { + margin-bottom: _.unit(6); + } +} + +.content { + max-width: 858px; + flex-grow: 1; + + > :not(:last-child) { + margin-bottom: _.unit(6); + } +} + +.stepper { + font: var(--font-title-2); + color: var(--color-text); + border-radius: 12px; + border: 1px solid var(--color-surface-5); + padding: _.unit(3) _.unit(4); + + &.active { + background: var(--color-surface-1); + } +} diff --git a/packages/console/src/mdx-components-v2/Steps/index.tsx b/packages/console/src/mdx-components-v2/Steps/index.tsx new file mode 100644 index 000000000..f261ae33c --- /dev/null +++ b/packages/console/src/mdx-components-v2/Steps/index.tsx @@ -0,0 +1,92 @@ +import { type Nullable } from '@silverhand/essentials'; +import classNames from 'classnames'; +import React, { useRef, type ReactElement, useEffect, useState } from 'react'; + +import useScroll from '@/hooks/use-scroll'; + +import { type Props as StepProps } from '../Step'; +import type Step from '../Step'; + +import * as styles from './index.module.scss'; + +type Props = { + children: Array>; +}; + +/** Find the first scrollable element in the parent chain. */ +const findScrollableElement = (element: Nullable): Nullable => { + if (!element) { + return null; + } + + const { overflowY } = window.getComputedStyle(element); + + if (overflowY === 'auto' || overflowY === 'scroll') { + return element; + } + + return findScrollableElement(element.parentElement); +}; + +export default function Steps({ children }: Props) { + const contentRef = useRef(null); + const stepReferences = useRef>>([]); + const { scrollTop } = useScroll(findScrollableElement(contentRef.current)); + const [activeIndex, setActiveIndex] = useState(-1); + + useEffect(() => { + // Make sure the step references length matches the number of children. + // eslint-disable-next-line @silverhand/fp/no-mutation + stepReferences.current = stepReferences.current.slice(0, children.length); + }, [children]); + + useEffect(() => { + // Get the active index by comparing the scroll position of the content + // with the top of each step in reverse order because the last satisfied + // step is the active one. + // eslint-disable-next-line @silverhand/fp/no-mutating-methods + const reversedActiveIndex = stepReferences.current + .slice() + .reverse() + .findIndex((stepRef) => { + if (!stepRef) { + return false; + } + + const elementScrollTop = stepRef.getBoundingClientRect().top; + // Don't try to understand it, feel it. + return elementScrollTop <= 280; + }); + + setActiveIndex(reversedActiveIndex === -1 ? -1 : children.length - reversedActiveIndex - 1); + }, [children.length, scrollTop]); + + return ( +
+
+ +
+
+ {children.map((component, index) => + React.cloneElement(component, { + key: component.props.title, + index, + ref: (element: HTMLDivElement) => { + // eslint-disable-next-line @silverhand/fp/no-mutation + stepReferences.current[index] = element; + }, + }) + )} +
+
+ ); +} diff --git a/packages/console/src/pages/Applications/components/Guide/GuideModal.tsx b/packages/console/src/pages/Applications/components/Guide/GuideModal.tsx index 8bc86164f..62057855e 100644 --- a/packages/console/src/pages/Applications/components/Guide/GuideModal.tsx +++ b/packages/console/src/pages/Applications/components/Guide/GuideModal.tsx @@ -1,8 +1,11 @@ import type { Application } from '@logto/schemas'; import Modal from 'react-modal'; +import { isProduction } from '@/consts/env'; import * as modalStyles from '@/scss/modal.module.scss'; +import GuideV2 from '../GuideV2'; + import Guide from '.'; type Props = { @@ -26,7 +29,12 @@ function GuideModal({ app, onClose }: Props) { className={modalStyles.fullScreen} onRequestClose={closeModal} > - + {/* Switch to v2 once migration is complete. */} + {isProduction ? ( + + ) : ( + + )} ); } diff --git a/packages/console/src/pages/Applications/components/GuideHeaderV2/index.module.scss b/packages/console/src/pages/Applications/components/GuideHeaderV2/index.module.scss new file mode 100644 index 000000000..03dfc812f --- /dev/null +++ b/packages/console/src/pages/Applications/components/GuideHeaderV2/index.module.scss @@ -0,0 +1,37 @@ +@use '@/scss/underscore' as _; + +.header { + display: flex; + align-items: center; + background-color: var(--color-layer-1); + height: 64px; + padding: 0 _.unit(6); + + .separator { + @include _.vertical-bar; + height: 20px; + margin: 0 _.unit(5) 0 _.unit(4); + } + + .closeIcon { + color: var(--color-text-secondary); + } + + .githubToolTipAnchor { + margin-right: _.unit(4); + } + + .githubIcon { + div { + display: flex; + } + + svg { + color: var(--color-text); + } + } + + .requestSdkButton { + margin-right: _.unit(15); + } +} diff --git a/packages/console/src/pages/Applications/components/GuideHeaderV2/index.tsx b/packages/console/src/pages/Applications/components/GuideHeaderV2/index.tsx new file mode 100644 index 000000000..1a28a67b9 --- /dev/null +++ b/packages/console/src/pages/Applications/components/GuideHeaderV2/index.tsx @@ -0,0 +1,55 @@ +import Close from '@/assets/icons/close.svg'; +import Button from '@/ds-components/Button'; +import CardTitle from '@/ds-components/CardTitle'; +import DangerousRaw from '@/ds-components/DangerousRaw'; +import IconButton from '@/ds-components/IconButton'; +import Spacer from '@/ds-components/Spacer'; + +import * as styles from './index.module.scss'; + +type Props = { + appName: string; + isCompact?: boolean; + onClose: () => void; +}; + +function GuideHeaderV2({ appName, isCompact = false, onClose }: Props) { + return ( +
+ {isCompact && ( + <> + {appName}} + subtitle="applications.guide.header_description" + /> + + + + + + )} + {!isCompact && ( + <> + + + +
+ {appName}} + subtitle="applications.guide.header_description" + /> + +
+ ); +} + +export default GuideHeaderV2; diff --git a/packages/console/src/pages/Applications/components/GuideV2/index.module.scss b/packages/console/src/pages/Applications/components/GuideV2/index.module.scss new file mode 100644 index 000000000..33046c1b9 --- /dev/null +++ b/packages/console/src/pages/Applications/components/GuideV2/index.module.scss @@ -0,0 +1,44 @@ +@use '@/scss/underscore' as _; + +.container { + display: flex; + flex-direction: column; + background-color: var(--color-base); + height: 100vh; + + .content { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + overflow-y: auto; + padding: _.unit(6) _.unit(6) max(10vh, 120px); + + .banner { + display: flex; + align-items: center; + margin-bottom: _.unit(6); + } + } +} + +.markdownContent { + margin-top: _.unit(6); +} + +.actionBar { + position: absolute; + inset: auto 0 0 0; + padding: _.unit(4); + background-color: var(--color-bg-float); + + .layout { + margin: 0 auto; + max-width: 858px; + + > button { + margin-right: 0; + margin-left: auto; + } + } +} diff --git a/packages/console/src/pages/Applications/components/GuideV2/index.tsx b/packages/console/src/pages/Applications/components/GuideV2/index.tsx new file mode 100644 index 000000000..cc29c7280 --- /dev/null +++ b/packages/console/src/pages/Applications/components/GuideV2/index.tsx @@ -0,0 +1,90 @@ +import { DomainStatus, type Application } from '@logto/schemas'; +import { MDXProvider } from '@mdx-js/react'; +import { conditional } from '@silverhand/essentials'; +import { useContext, Suspense } from 'react'; + +import guides from '@/assets/docs/guides'; +import { AppDataContext } from '@/contexts/AppDataProvider'; +import Button from '@/ds-components/Button'; +import CodeEditor from '@/ds-components/CodeEditor'; +import TextLink from '@/ds-components/TextLink'; +import useCustomDomain from '@/hooks/use-custom-domain'; +import DetailsSummary from '@/mdx-components/DetailsSummary'; +import { applyDomain } from '@/utils/domain'; + +import GuideHeaderV2 from '../GuideHeaderV2'; +import StepsSkeleton from '../StepsSkeleton'; + +import * as styles from './index.module.scss'; + +type Props = { + app?: Application; + isCompact?: boolean; + onClose: () => void; +}; + +function GuideV2({ app, isCompact, onClose }: Props) { + const { tenantEndpoint } = useContext(AppDataContext); + const { data: customDomain } = useCustomDomain(); + const isCustomDomainActive = customDomain?.status === DomainStatus.Active; + const guide = guides.find(({ id }) => id === 'spa-react'); + + if (!app || !guide) { + throw new Error('Invalid app or guide'); + } + + const GuideComponent = guide.Component; + const { id: appId, secret: appSecret, name: appName, oidcClientMetadata } = app; + + return ( +
+ +
+ { + const [, language] = /language-(\w+)/.exec(String(className ?? '')) ?? []; + + return language ? ( + + ) : ( + {String(children).trimEnd()} + ); + }, + a: ({ children, ...props }) => ( + + {children} + + ), + details: DetailsSummary, + }} + > + }> + {tenantEndpoint && ( + + )} + + + +
+
+ ); +} + +export default GuideV2; diff --git a/packages/toolkit/core-kit/scss/_console-themes.scss b/packages/toolkit/core-kit/scss/_console-themes.scss index db83f7bba..058e7a945 100644 --- a/packages/toolkit/core-kit/scss/_console-themes.scss +++ b/packages/toolkit/core-kit/scss/_console-themes.scss @@ -178,6 +178,20 @@ --color-guide-dropdown-border: var(--color-border); --color-skeleton-shimmer-rgb: 255, 255, 255; // rgb of Layer-1 --color-specific-tag-upsell: var(--color-primary-50); + + // Background + --color-bg-body-base: var(--color-neutral-95); + --color-bg-body: var(--color-neutral-100); + --color-bg-layer-1: var(--color-static-white); + --color-bg-layer-2: var(--color-neutral-95); + --color-bg-body-overlay: var(--color-neutral-100); + --color-bg-float-base: var(--color-neutral-variant-90); + --color-bg-float: var(--color-neutral-100); + --color-bg-float-overlay: var(--color-neutral-100); + --color-bg-mask: rgba(0, 0, 0, 40%); // 4% --color-neutral-0 + --color-bg-toast: var(--color-neutral-20); + --color-bg-state-unselected: var(--color-neutral-90); + --color-bg-state-disabled: rgba(25, 28, 29, 8%); // 8% --color-neutral-10 } @mixin dark { @@ -360,4 +374,21 @@ --color-guide-dropdown-border: var(--color-neutral-variant-70); --color-skeleton-shimmer-rgb: 42, 44, 50; // rgb of Layer-1 --color-specific-tag-upsell: var(--color-primary-70); + + // Background + --color-bg-body-base: var(--color-neutral-100); + --color-bg-body: var(--color-surface); + --color-bg-body-overlay: var(--color-surface-2); + --color-bg-layer-1: + linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)), + linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), + #191c1d; + --color-bg-layer-2: var(--color-surface-4); + --color-bg-float-base: var(--color-neutral-100); + --color-bg-float: var(--color-surface-3); + --color-bg-float-overlay: var(--color-surface-4); + --color-bg-mask: rgba(0, 0, 0, 60%); // 60% --color-neutral-100; + --color-bg-toast: var(--color-neutral-80); + --color-bg-state-unselected: var(--color-neutral-90); + --color-bg-state-disabled: rgba(247, 248, 248, 8%); // 8% --color-neutral-10 } From 9509db3d6f0546fde17701b43a939ac1e95df45b Mon Sep 17 00:00:00 2001 From: Gao Sun Date: Mon, 14 Aug 2023 15:45:36 +0800 Subject: [PATCH 2/2] chore(phrases): update translation --- packages/console/package.json | 2 +- .../assets/docs/guides/generate-metadata.js | 4 ++ .../components/GuideHeaderV2/index.tsx | 4 +- .../translation/admin-console/applications.ts | 2 + .../translation/admin-console/applications.ts | 2 + .../translation/admin-console/applications.ts | 2 + .../translation/admin-console/applications.ts | 2 + .../translation/admin-console/applications.ts | 2 + .../translation/admin-console/applications.ts | 2 + .../translation/admin-console/applications.ts | 2 + .../translation/admin-console/applications.ts | 65 ++++++++++--------- .../translation/admin-console/applications.ts | 2 + .../translation/admin-console/applications.ts | 2 + .../translation/admin-console/applications.ts | 2 + .../translation/admin-console/applications.ts | 2 + .../translation/admin-console/applications.ts | 4 +- .../translation/admin-console/applications.ts | 2 + .../translation/admin-console/applications.ts | 2 + 18 files changed, 71 insertions(+), 34 deletions(-) diff --git a/packages/console/package.json b/packages/console/package.json index bcc1338bf..94c212d3f 100644 --- a/packages/console/package.json +++ b/packages/console/package.json @@ -158,7 +158,7 @@ "*.d.ts", "**/assets/docs/guides/types.ts", "**/assets/docs/guides/**/index.ts", - "**/mdx-components/*/index.tsx" + "**/mdx-components*/*/index.tsx" ], "rules": { "import/no-unused-modules": "off" diff --git a/packages/console/src/assets/docs/guides/generate-metadata.js b/packages/console/src/assets/docs/guides/generate-metadata.js index 7f6370f7f..12d11d0f3 100644 --- a/packages/console/src/assets/docs/guides/generate-metadata.js +++ b/packages/console/src/assets/docs/guides/generate-metadata.js @@ -1,3 +1,7 @@ +// This script generates the `index.ts` file for all the guides. +// It should be run from the `packages/console/src/assets/docs/guides` (current) directory. +// For conventions and specifications, see the `README.md` file in this directory. + import { existsSync } from 'node:fs'; import fs from 'node:fs/promises'; diff --git a/packages/console/src/pages/Applications/components/GuideHeaderV2/index.tsx b/packages/console/src/pages/Applications/components/GuideHeaderV2/index.tsx index 1a28a67b9..3315be401 100644 --- a/packages/console/src/pages/Applications/components/GuideHeaderV2/index.tsx +++ b/packages/console/src/pages/Applications/components/GuideHeaderV2/index.tsx @@ -1,3 +1,4 @@ +import Box from '@/assets/icons/box.svg'; import Close from '@/assets/icons/close.svg'; import Button from '@/ds-components/Button'; import CardTitle from '@/ds-components/CardTitle'; @@ -44,7 +45,8 @@ function GuideHeaderV2({ appName, isCompact = false, onClose }: Props) {