mirror of
https://github.com/logto-io/logto.git
synced 2025-03-31 22:51:25 -05:00
refactor(console): hide navigation anchors from guide in compact view (#4347)
* refactor(console): hide navigation anchors from guide in compact view * refactor(console): check app guide drawer in app details page (#4348)
This commit is contained in:
Charles Zhao
GitHub
parent
49fb74ee31
commit
c40a7d3a7a
49 changed files with 524 additions and 693 deletions
|
|
@ -12,7 +12,6 @@ import spaReact from './spa-react/index';
|
|||
import spaVanilla from './spa-vanilla/index';
|
||||
import spaVue from './spa-vue/index';
|
||||
import { type Guide } from './types';
|
||||
import webChatgpt from './web-chatgpt/index';
|
||||
import webCsharp from './web-csharp/index';
|
||||
import webExpress from './web-express/index';
|
||||
import webGo from './web-go/index';
|
||||
|
|
@ -80,12 +79,6 @@ const guides: Readonly<Guide[]> = Object.freeze([
|
|||
Component: lazy(async () => import('./spa-vue/README.mdx')),
|
||||
metadata: spaVue,
|
||||
},
|
||||
{
|
||||
id: 'web-chatgpt',
|
||||
Logo: lazy(async () => import('./web-chatgpt/logo.svg')),
|
||||
Component: lazy(async () => import('./web-chatgpt/README.mdx')),
|
||||
metadata: webChatgpt,
|
||||
},
|
||||
{
|
||||
id: 'web-csharp',
|
||||
Logo: lazy(async () => import('./web-csharp/logo.svg')),
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
|
|||
import FormField from '@/ds-components/FormField';
|
||||
import Switch from '@/ds-components/Switch';
|
||||
import useApi from '@/hooks/use-api';
|
||||
import { GuideContext } from '@/pages/Applications/components/GuideV2';
|
||||
import { GuideContext } from '@/pages/Applications/components/Guide';
|
||||
|
||||
export default function EnableAdminAccess() {
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
## Replace this with actual guide
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { ApplicationType } from '@logto/schemas';
|
||||
|
||||
import { type GuideMetadata } from '../types';
|
||||
|
||||
const metadata: Readonly<GuideMetadata> = Object.freeze({
|
||||
name: 'ChatGPT plugin',
|
||||
description: 'Integrate ChatGPT Plugin OAuth with Logto.',
|
||||
target: ApplicationType.Traditional,
|
||||
isFeatured: true,
|
||||
});
|
||||
|
||||
export default metadata;
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_134_43590)">
|
||||
<path d="M7.01416 15.1736C7.01416 10.6671 10.6671 7.01416 15.1736 7.01416H32.8251C37.333 7.01416 40.9859 10.6671 40.9859 15.1736V32.45C40.9859 37.1721 37.1579 41 32.4359 41H15.1736C10.6671 41 7.01416 37.3471 7.01416 32.8406V15.1736Z" fill="#74AA9C"/>
|
||||
<path d="M22.6477 11.2269C19.8497 11.2269 17.364 13.0258 16.4978 15.6825C14.6989 16.0527 13.1458 17.1776 12.2358 18.7716C10.8325 21.1937 11.1533 24.239 13.0328 26.3149C12.452 28.0545 12.6512 29.9566 13.5782 31.5322C14.973 33.9628 17.7795 35.2092 20.5252 34.6298C21.7419 36.0005 23.49 36.782 25.3242 36.7749C28.1222 36.7749 30.6079 34.976 31.4756 32.3193C33.2773 31.9477 34.8275 30.8228 35.7291 29.2316C37.1408 26.8095 36.8201 23.7642 34.9406 21.6869V21.6784C35.5214 19.9388 35.3221 18.0354 34.3951 16.4526C33.0004 14.0305 30.1939 12.7841 27.4566 13.3635C26.2329 11.9956 24.482 11.2184 22.6477 11.2269ZM22.6477 12.8873L22.6393 12.8958C23.7655 12.8958 24.848 13.2844 25.7142 14.0037C25.6789 14.0206 25.6097 14.0644 25.5588 14.0899L20.4644 17.0236C20.2044 17.1705 20.049 17.4475 20.049 17.7499V24.6361L17.8572 23.3728V17.6807C17.8558 15.0367 19.9995 12.8915 22.6477 12.8873ZM28.7836 14.8925C30.5019 14.8897 32.0903 15.804 32.9481 17.292C33.502 18.2615 33.7098 19.3948 33.519 20.4928C33.4837 20.4674 33.4158 20.432 33.372 20.4066L28.2791 17.4644C28.0191 17.3175 27.6997 17.3175 27.4397 17.4644L21.4706 20.9083V18.3816L26.3982 15.5355C27.1231 15.1158 27.9456 14.894 28.7836 14.8925ZM16.1855 17.5068V23.5536C16.1855 23.8561 16.3409 24.1245 16.6009 24.28L22.5601 27.7139L20.3599 28.9857L15.4393 26.1482C13.1501 24.8226 12.3672 21.896 13.6899 19.6082C14.2509 18.6388 15.1327 17.8955 16.1855 17.5068ZM27.6022 19.0048L32.5312 21.8423C34.8275 23.1664 35.6062 26.0902 34.2807 28.3823L34.2891 28.3908C33.7267 29.3602 32.8421 30.1035 31.795 30.4851V24.4369C31.795 24.1344 31.6395 23.8575 31.3795 23.7105L25.4118 20.2667L27.6022 19.0048ZM23.9817 21.0891L26.4943 22.5418V25.4402L23.9817 26.8929L21.4692 25.4402V22.5418L23.9817 21.0891ZM27.9314 23.3728L30.1232 24.6361V30.3197C30.1232 32.9665 27.9753 35.1131 25.3327 35.1131V35.1046C24.2149 35.1046 23.124 34.7146 22.2662 33.9967C22.3015 33.9797 22.3792 33.9359 22.4216 33.9105L27.5146 30.9782C27.7746 30.8313 27.9385 30.5543 27.93 30.2519L27.9314 23.3728ZM26.5014 27.0935V29.6202L21.5723 32.4578C19.276 33.7734 16.3494 32.9948 15.0239 30.7098H15.0324C14.4699 29.7488 14.2693 28.607 14.46 27.509C14.4954 27.5344 14.5646 27.5698 14.607 27.5952L19.6999 30.5373C19.96 30.6843 20.2793 30.6843 20.5393 30.5373L26.5014 27.0935Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_134_43590">
|
||||
<rect width="34" height="34" fill="white" transform="translate(7 7)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB |
|
|
@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
|
|||
import FormField from '@/ds-components/FormField';
|
||||
import Switch from '@/ds-components/Switch';
|
||||
import useApi from '@/hooks/use-api';
|
||||
import { GuideContext } from '@/pages/Applications/components/GuideV2';
|
||||
import { GuideContext } from '@/pages/Applications/components/Guide';
|
||||
|
||||
export default function AlwaysIssueRefreshToken() {
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { useContext } from 'react';
|
|||
|
||||
import CopyToClipboard from '@/ds-components/CopyToClipboard';
|
||||
import FormField from '@/ds-components/FormField';
|
||||
import { GuideContext } from '@/pages/Applications/components/GuideV2';
|
||||
import { GuideContext } from '@/pages/Applications/components/Guide';
|
||||
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
|
|||
name: 'ChatGPT plugin',
|
||||
description: 'Use Logto as an OAuth identity provider for ChatGPT plugins.',
|
||||
target: ApplicationType.Traditional,
|
||||
isFeatured: true,
|
||||
});
|
||||
|
||||
export default metadata;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2406 2406">
|
||||
<path
|
||||
d="M1 578.4C1 259.5 259.5 1 578.4 1h1249.1c319 0 577.5 258.5 577.5 577.4V2406H578.4C259.5 2406 1 2147.5 1 1828.6V578.4z"
|
||||
fill="#74aa9c" />
|
||||
<path
|
||||
d="M1107.3 299.1c-198 0-373.9 127.3-435.2 315.3C544.8 640.6 434.9 720.2 370.5 833c-99.3 171.4-76.6 386.9 56.4 533.8-41.1 123.1-27 257.7 38.6 369.2 98.7 172 297.3 260.2 491.6 219.2 86.1 97 209.8 152.3 339.6 151.8 198 0 373.9-127.3 435.3-315.3 127.5-26.3 237.2-105.9 301-218.5 99.9-171.4 77.2-386.9-55.8-533.9v-.6c41.1-123.1 27-257.8-38.6-369.8-98.7-171.4-297.3-259.6-491-218.6-86.6-96.8-210.5-151.8-340.3-151.2zm0 117.5-.6.6c79.7 0 156.3 27.5 217.6 78.4-2.5 1.2-7.4 4.3-11 6.1L952.8 709.3c-18.4 10.4-29.4 30-29.4 51.4V1248l-155.1-89.4V755.8c-.1-187.1 151.6-338.9 339-339.2zm434.2 141.9c121.6-.2 234 64.5 294.7 169.8 39.2 68.6 53.9 148.8 40.4 226.5-2.5-1.8-7.3-4.3-10.4-6.1l-360.4-208.2c-18.4-10.4-41-10.4-59.4 0L1024 984.2V805.4L1372.7 604c51.3-29.7 109.5-45.4 168.8-45.5zM650 743.5v427.9c0 21.4 11 40.4 29.4 51.4l421.7 243-155.7 90L597.2 1355c-162-93.8-217.4-300.9-123.8-462.8C513.1 823.6 575.5 771 650 743.5zm807.9 106 348.8 200.8c162.5 93.7 217.6 300.6 123.8 462.8l.6.6c-39.8 68.6-102.4 121.2-176.5 148.2v-428c0-21.4-11-41-29.4-51.4l-422.3-243.7 155-89.3zM1201.7 997l177.8 102.8v205.1l-177.8 102.8-177.8-102.8v-205.1L1201.7 997zm279.5 161.6 155.1 89.4v402.2c0 187.3-152 339.2-339 339.2v-.6c-79.1 0-156.3-27.6-217-78.4 2.5-1.2 8-4.3 11-6.1l360.4-207.5c18.4-10.4 30-30 29.4-51.4l.1-486.8zM1380 1421.9v178.8l-348.8 200.8c-162.5 93.1-369.6 38-463.4-123.7h.6c-39.8-68-54-148.8-40.5-226.5 2.5 1.8 7.4 4.3 10.4 6.1l360.4 208.2c18.4 10.4 41 10.4 59.4 0l421.9-243.7z"
|
||||
fill="white" />
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_134_43590)">
|
||||
<path d="M7.01416 15.1736C7.01416 10.6671 10.6671 7.01416 15.1736 7.01416H32.8251C37.333 7.01416 40.9859 10.6671 40.9859 15.1736V32.45C40.9859 37.1721 37.1579 41 32.4359 41H15.1736C10.6671 41 7.01416 37.3471 7.01416 32.8406V15.1736Z" fill="#74AA9C"/>
|
||||
<path d="M22.6477 11.2269C19.8497 11.2269 17.364 13.0258 16.4978 15.6825C14.6989 16.0527 13.1458 17.1776 12.2358 18.7716C10.8325 21.1937 11.1533 24.239 13.0328 26.3149C12.452 28.0545 12.6512 29.9566 13.5782 31.5322C14.973 33.9628 17.7795 35.2092 20.5252 34.6298C21.7419 36.0005 23.49 36.782 25.3242 36.7749C28.1222 36.7749 30.6079 34.976 31.4756 32.3193C33.2773 31.9477 34.8275 30.8228 35.7291 29.2316C37.1408 26.8095 36.8201 23.7642 34.9406 21.6869V21.6784C35.5214 19.9388 35.3221 18.0354 34.3951 16.4526C33.0004 14.0305 30.1939 12.7841 27.4566 13.3635C26.2329 11.9956 24.482 11.2184 22.6477 11.2269ZM22.6477 12.8873L22.6393 12.8958C23.7655 12.8958 24.848 13.2844 25.7142 14.0037C25.6789 14.0206 25.6097 14.0644 25.5588 14.0899L20.4644 17.0236C20.2044 17.1705 20.049 17.4475 20.049 17.7499V24.6361L17.8572 23.3728V17.6807C17.8558 15.0367 19.9995 12.8915 22.6477 12.8873ZM28.7836 14.8925C30.5019 14.8897 32.0903 15.804 32.9481 17.292C33.502 18.2615 33.7098 19.3948 33.519 20.4928C33.4837 20.4674 33.4158 20.432 33.372 20.4066L28.2791 17.4644C28.0191 17.3175 27.6997 17.3175 27.4397 17.4644L21.4706 20.9083V18.3816L26.3982 15.5355C27.1231 15.1158 27.9456 14.894 28.7836 14.8925ZM16.1855 17.5068V23.5536C16.1855 23.8561 16.3409 24.1245 16.6009 24.28L22.5601 27.7139L20.3599 28.9857L15.4393 26.1482C13.1501 24.8226 12.3672 21.896 13.6899 19.6082C14.2509 18.6388 15.1327 17.8955 16.1855 17.5068ZM27.6022 19.0048L32.5312 21.8423C34.8275 23.1664 35.6062 26.0902 34.2807 28.3823L34.2891 28.3908C33.7267 29.3602 32.8421 30.1035 31.795 30.4851V24.4369C31.795 24.1344 31.6395 23.8575 31.3795 23.7105L25.4118 20.2667L27.6022 19.0048ZM23.9817 21.0891L26.4943 22.5418V25.4402L23.9817 26.8929L21.4692 25.4402V22.5418L23.9817 21.0891ZM27.9314 23.3728L30.1232 24.6361V30.3197C30.1232 32.9665 27.9753 35.1131 25.3327 35.1131V35.1046C24.2149 35.1046 23.124 34.7146 22.2662 33.9967C22.3015 33.9797 22.3792 33.9359 22.4216 33.9105L27.5146 30.9782C27.7746 30.8313 27.9385 30.5543 27.93 30.2519L27.9314 23.3728ZM26.5014 27.0935V29.6202L21.5723 32.4578C19.276 33.7734 16.3494 32.9948 15.0239 30.7098H15.0324C14.4699 29.7488 14.2693 28.607 14.46 27.509C14.4954 27.5344 14.5646 27.5698 14.607 27.5952L19.6999 30.5373C19.96 30.6843 20.2793 30.6843 20.5393 30.5373L26.5014 27.0935Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_134_43590">
|
||||
<rect width="34" height="34" fill="white" transform="translate(7 7)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
|
@ -5,7 +5,7 @@ import useSWR from 'swr';
|
|||
import { openIdProviderConfigPath } from '@/consts/oidc';
|
||||
import CopyToClipboard from '@/ds-components/CopyToClipboard';
|
||||
import { type RequestError } from '@/hooks/use-api';
|
||||
import { GuideContext } from '@/pages/Applications/components/GuideV2';
|
||||
import { GuideContext } from '@/pages/Applications/components/Guide';
|
||||
|
||||
export default function EnvironmentVariables() {
|
||||
const {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.2898 11.9999L14.8298 8.45995C15.0161 8.27259 15.1206 8.01913 15.1206 7.75495C15.1206 7.49076 15.0161 7.23731 14.8298 7.04995C14.7369 6.95622 14.6263 6.88183 14.5044 6.83106C14.3825 6.78029 14.2518 6.75415 14.1198 6.75415C13.9878 6.75415 13.8571 6.78029 13.7352 6.83106C13.6134 6.88183 13.5028 6.95622 13.4098 7.04995L9.16982 11.2899C9.07609 11.3829 9.0017 11.4935 8.95093 11.6154C8.90016 11.7372 8.87402 11.8679 8.87402 11.9999C8.87402 12.132 8.90016 12.2627 8.95093 12.3845C9.0017 12.5064 9.07609 12.617 9.16982 12.7099L13.4098 16.9999C13.5033 17.0926 13.6141 17.166 13.7359 17.2157C13.8578 17.2655 13.9882 17.2907 14.1198 17.2899C14.2514 17.2907 14.3819 17.2655 14.5037 17.2157C14.6256 17.166 14.7364 17.0926 14.8298 16.9999C15.0161 16.8126 15.1206 16.5591 15.1206 16.2949C15.1206 16.0308 15.0161 15.7773 14.8298 15.5899L11.2898 11.9999Z" fill="currentColor"/>
|
||||
<path id="Vector" d="M8.46026 11.29L14.1203 5.64004C14.2132 5.54631 14.3238 5.47191 14.4457 5.42115C14.5675 5.37038 14.6983 5.34424 14.8303 5.34424C14.9623 5.34424 15.093 5.37038 15.2148 5.42115C15.3367 5.47191 15.4473 5.54631 15.5403 5.64004C15.7265 5.8274 15.8311 6.08085 15.8311 6.34504C15.8311 6.60922 15.7265 6.86267 15.5403 7.05004L10.5903 12.05L15.5403 17C15.7265 17.1874 15.8311 17.4409 15.8311 17.705C15.8311 17.9692 15.7265 18.2227 15.5403 18.41C15.4476 18.5045 15.3372 18.5797 15.2153 18.6312C15.0935 18.6827 14.9626 18.7095 14.8303 18.71C14.698 18.7095 14.5671 18.6827 14.4452 18.6312C14.3233 18.5797 14.2129 18.5045 14.1203 18.41L8.46026 12.76C8.35876 12.6664 8.27775 12.5527 8.22234 12.4262C8.16693 12.2997 8.13833 12.1631 8.13833 12.025C8.13833 11.8869 8.16693 11.7503 8.22234 11.6238C8.27775 11.4973 8.35876 11.3837 8.46026 11.29Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 979 B After Width: | Height: | Size: 973 B |
|
|
@ -4,7 +4,7 @@ import { Trans, useTranslation } from 'react-i18next';
|
|||
import CopyToClipboard from '@/ds-components/CopyToClipboard';
|
||||
import FormField from '@/ds-components/FormField';
|
||||
import TextLink from '@/ds-components/TextLink';
|
||||
import { GuideContext } from '@/pages/Applications/components/GuideV2';
|
||||
import { GuideContext } from '@/pages/Applications/components/Guide';
|
||||
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { githubOrgLink } from '@/consts';
|
|||
import { LinkButton } from '@/ds-components/Button';
|
||||
import DangerousRaw from '@/ds-components/DangerousRaw';
|
||||
import Spacer from '@/ds-components/Spacer';
|
||||
import { GuideContext } from '@/pages/Applications/components/GuideV2';
|
||||
import { GuideContext } from '@/pages/Applications/components/Guide';
|
||||
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.fullWidth {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navigationAnchor {
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { type Nullable } from '@silverhand/essentials';
|
||||
import classNames from 'classnames';
|
||||
import React, { useRef, type ReactElement, useEffect, useState, useMemo } from 'react';
|
||||
import React, { useRef, type ReactElement, useEffect, useState, useMemo, useContext } from 'react';
|
||||
|
||||
import useScroll from '@/hooks/use-scroll';
|
||||
import { GuideContext } from '@/pages/Applications/components/Guide';
|
||||
|
||||
import Sample from '../Sample';
|
||||
import { type Props as StepProps } from '../Step';
|
||||
|
|
@ -46,6 +47,7 @@ export default function Steps({ children: reactChildren }: Props) {
|
|||
: [reactChildren, furtherReadings],
|
||||
[furtherReadings, reactChildren]
|
||||
);
|
||||
const { isCompact } = useContext(GuideContext);
|
||||
|
||||
useEffect(() => {
|
||||
// Make sure the step references length matches the number of children.
|
||||
|
|
@ -75,19 +77,21 @@ export default function Steps({ children: reactChildren }: Props) {
|
|||
}, [children.length, scrollTop]);
|
||||
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<div className={styles.navigationAnchor}>
|
||||
<nav className={styles.navigation}>
|
||||
{children.map((component, index) => (
|
||||
<div
|
||||
key={component.props.title}
|
||||
className={classNames(styles.stepper, index === activeIndex && styles.active)}
|
||||
>
|
||||
{index + 1}. {component.props.title}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
<div className={classNames(styles.wrapper, isCompact && styles.fullWidth)}>
|
||||
{!isCompact && (
|
||||
<div className={styles.navigationAnchor}>
|
||||
<nav className={styles.navigation}>
|
||||
{children.map((component, index) => (
|
||||
<div
|
||||
key={component.props.title}
|
||||
className={classNames(styles.stepper, index === activeIndex && styles.active)}
|
||||
>
|
||||
{index + 1}. {component.props.title}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
<div ref={contentRef} className={styles.content}>
|
||||
<Sample />
|
||||
{children.map((component, index) =>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import {
|
|||
import TextInput from '@/ds-components/TextInput';
|
||||
import type { RequestError } from '@/hooks/use-api';
|
||||
import useApi from '@/hooks/use-api';
|
||||
import { GuideContext } from '@/pages/Applications/components/GuideV2';
|
||||
import { GuideContext } from '@/pages/Applications/components/Guide';
|
||||
import type { GuideForm } from '@/types/guide';
|
||||
import { trySubmitSafe } from '@/utils/form';
|
||||
import { uriValidator } from '@/utils/validator';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.drawerContainer {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex: 0 0 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 _.unit(6);
|
||||
background-color: var(--color-layer-1);
|
||||
font: var(--font-title-2);
|
||||
color: var(--color-text);
|
||||
box-shadow: var(--shadow-1);
|
||||
z-index: 1;
|
||||
|
||||
.separator {
|
||||
border-left: 1px solid var(--color-border);
|
||||
height: 20px;
|
||||
width: 0;
|
||||
margin: 0 _.unit(5);
|
||||
}
|
||||
}
|
||||
|
||||
.cardGroup {
|
||||
flex: 1;
|
||||
padding: _.unit(6);
|
||||
}
|
||||
|
||||
.guide {
|
||||
flex: 1;
|
||||
height: unset;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
import { type ApplicationResponse } from '@logto/schemas';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import ArrowLeft from '@/assets/icons/arrow-left.svg';
|
||||
import Close from '@/assets/icons/close.svg';
|
||||
import IconButton from '@/ds-components/IconButton';
|
||||
import Spacer from '@/ds-components/Spacer';
|
||||
import Guide from '@/pages/Applications/components/Guide';
|
||||
import { type SelectedGuide } from '@/pages/Applications/components/GuideCard';
|
||||
import GuideGroup from '@/pages/Applications/components/GuideGroup';
|
||||
import useAppGuideMetadata from '@/pages/Applications/components/GuideLibrary/hook';
|
||||
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
type Props = {
|
||||
app: ApplicationResponse;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
function GuideDrawer({ app, onClose }: Props) {
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.applications.guide' });
|
||||
const [_, getStructuredMetadata] = useAppGuideMetadata();
|
||||
const [selectedGuide, setSelectedGuide] = useState<SelectedGuide>();
|
||||
|
||||
const structuredMetadata = useMemo(
|
||||
() => getStructuredMetadata({ categories: [app.type] }),
|
||||
[getStructuredMetadata, app.type]
|
||||
);
|
||||
|
||||
const hasSingleGuide = useMemo(() => {
|
||||
return structuredMetadata[app.type].length === 1;
|
||||
}, [app.type, structuredMetadata]);
|
||||
|
||||
useEffect(() => {
|
||||
if (hasSingleGuide) {
|
||||
const guide = structuredMetadata[app.type][0];
|
||||
if (guide) {
|
||||
const {
|
||||
id,
|
||||
metadata: { target, name },
|
||||
} = guide;
|
||||
setSelectedGuide({ id, target, name });
|
||||
}
|
||||
}
|
||||
}, [hasSingleGuide, app.type, structuredMetadata]);
|
||||
|
||||
return (
|
||||
<div className={styles.drawerContainer}>
|
||||
<div className={styles.header}>
|
||||
{selectedGuide && (
|
||||
<>
|
||||
{!hasSingleGuide && (
|
||||
<>
|
||||
<IconButton
|
||||
size="large"
|
||||
onClick={() => {
|
||||
setSelectedGuide(undefined);
|
||||
}}
|
||||
>
|
||||
<ArrowLeft />
|
||||
</IconButton>
|
||||
<div className={styles.separator} />
|
||||
</>
|
||||
)}
|
||||
<span>{t('checkout_tutorial', { name: selectedGuide.name })}</span>
|
||||
</>
|
||||
)}
|
||||
{!selectedGuide && t('select_a_framework')}
|
||||
<Spacer />
|
||||
<IconButton size="large" onClick={onClose}>
|
||||
<Close />
|
||||
</IconButton>
|
||||
</div>
|
||||
{!selectedGuide && (
|
||||
<GuideGroup
|
||||
isCompact
|
||||
className={styles.cardGroup}
|
||||
categoryName={t(`categories.${app.type}`)}
|
||||
guides={structuredMetadata[app.type]}
|
||||
onClickGuide={(guide) => {
|
||||
setSelectedGuide(guide);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{selectedGuide && (
|
||||
<Guide
|
||||
isCompact
|
||||
className={styles.guide}
|
||||
guideId={selectedGuide.id}
|
||||
app={app}
|
||||
onClose={() => {
|
||||
setSelectedGuide(undefined);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default GuideDrawer;
|
||||
|
|
@ -3,7 +3,6 @@ import {
|
|||
type Application,
|
||||
type ApplicationResponse,
|
||||
type SnakeCaseOidcConfig,
|
||||
ApplicationType,
|
||||
customClientMetadataDefault,
|
||||
} from '@logto/schemas';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
|
@ -36,10 +35,10 @@ import useTenantPathname from '@/hooks/use-tenant-pathname';
|
|||
import { applicationTypeI18nKey } from '@/types/applications';
|
||||
import { trySubmitSafe } from '@/utils/form';
|
||||
|
||||
import Guide from '../Applications/components/Guide';
|
||||
import GuideModal from '../Applications/components/Guide/GuideModal';
|
||||
|
||||
import AdvancedSettings from './components/AdvancedSettings';
|
||||
import GuideDrawer from './components/GuideDrawer';
|
||||
import Settings from './components/Settings';
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
|
|
@ -172,24 +171,15 @@ function ApplicationDetails() {
|
|||
</div>
|
||||
</div>
|
||||
<div className={styles.operations}>
|
||||
{/* TODO: @Charles figure out a better way to check guide availability */}
|
||||
<Button
|
||||
title="application_details.check_guide"
|
||||
size="large"
|
||||
onClick={() => {
|
||||
if (data.type === ApplicationType.MachineToMachine) {
|
||||
window.open(
|
||||
getDocumentationUrl('/docs/recipes/integrate-logto/machine-to-machine'),
|
||||
'_blank'
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
setIsReadmeOpen(true);
|
||||
}}
|
||||
/>
|
||||
<Drawer isOpen={isReadmeOpen} onClose={onCloseDrawer}>
|
||||
<Guide isCompact app={data} onClose={onCloseDrawer} />
|
||||
<GuideDrawer app={data} onClose={onCloseDrawer} />
|
||||
</Drawer>
|
||||
<ActionMenu
|
||||
buttonProps={{ icon: <More className={styles.moreIcon} />, size: 'large' }}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import Modal from 'react-modal';
|
|||
|
||||
import * as modalStyles from '@/scss/modal.module.scss';
|
||||
|
||||
import GuideV2 from '../GuideV2';
|
||||
import Guide from '.';
|
||||
|
||||
type Props = {
|
||||
guideId: string;
|
||||
|
|
@ -27,7 +27,7 @@ function GuideModal({ guideId, app, onClose }: Props) {
|
|||
className={modalStyles.fullScreen}
|
||||
onRequestClose={closeModal}
|
||||
>
|
||||
<GuideV2 guideId={guideId} app={app} onClose={closeModal} />
|
||||
<Guide guideId={guideId} app={app} onClose={closeModal} />
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,17 +12,41 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
padding: _.unit(6) _.unit(6) _.unit(20);
|
||||
padding: _.unit(6) _.unit(6) max(10vh, 120px);
|
||||
|
||||
> * {
|
||||
max-width: 858px;
|
||||
width: 100%;
|
||||
section p {
|
||||
font: var(--font-body-2);
|
||||
margin: _.unit(4) 0;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: _.unit(6);
|
||||
section ul > li,
|
||||
section ol > li {
|
||||
font: var(--font-body-2);
|
||||
margin-block: _.unit(2);
|
||||
padding-inline-start: _.unit(1);
|
||||
}
|
||||
|
||||
section table {
|
||||
border-spacing: 0;
|
||||
border: 1px solid var(--color-border);
|
||||
font: var(--font-body-2);
|
||||
|
||||
tr {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: _.unit(2) _.unit(4);
|
||||
}
|
||||
|
||||
thead {
|
||||
font: var(--font-title-3);
|
||||
}
|
||||
|
||||
tbody td {
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -30,3 +54,22 @@
|
|||
.markdownContent {
|
||||
margin-top: _.unit(6);
|
||||
}
|
||||
|
||||
.actionBar {
|
||||
position: absolute;
|
||||
inset: auto 0 0 0;
|
||||
padding: _.unit(4);
|
||||
background-color: var(--color-layer-1);
|
||||
box-shadow: var(--shadow-2-reversed);
|
||||
z-index: 1;
|
||||
|
||||
.layout {
|
||||
margin: 0 auto;
|
||||
max-width: 858px;
|
||||
|
||||
> button {
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,135 +1,146 @@
|
|||
import { DomainStatus, type Application } from '@logto/schemas';
|
||||
import { DomainStatus, type ApplicationResponse } from '@logto/schemas';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import { conditional, type Optional } from '@silverhand/essentials';
|
||||
import i18next from 'i18next';
|
||||
import type { MDXProps } from 'mdx/types';
|
||||
import type { LazyExoticComponent } from 'react';
|
||||
import { useEffect, useContext, cloneElement, lazy, Suspense, useState } from 'react';
|
||||
import { conditional } from '@silverhand/essentials';
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
useContext,
|
||||
Suspense,
|
||||
createContext,
|
||||
useMemo,
|
||||
type LazyExoticComponent,
|
||||
type ComponentType,
|
||||
} from 'react';
|
||||
|
||||
import guides from '@/assets/docs/guides';
|
||||
import { type GuideMetadata } from '@/assets/docs/guides/types';
|
||||
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 type { SupportedSdk } from '@/types/applications';
|
||||
import { applicationTypeAndSdkTypeMappings } from '@/types/applications';
|
||||
import { applyDomain } from '@/utils/domain';
|
||||
|
||||
import GuideHeader from '../GuideHeader';
|
||||
import SdkSelector from '../SdkSelector';
|
||||
import StepsSkeleton from '../StepsSkeleton';
|
||||
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
type GuideContextType = {
|
||||
metadata: Readonly<GuideMetadata>;
|
||||
Logo?: LazyExoticComponent<ComponentType>;
|
||||
app: ApplicationResponse;
|
||||
endpoint: string;
|
||||
alternativeEndpoint?: string;
|
||||
redirectUris: string[];
|
||||
postLogoutRedirectUris: string[];
|
||||
isCompact: boolean;
|
||||
sampleUrls: {
|
||||
origin: string;
|
||||
callback: string;
|
||||
};
|
||||
};
|
||||
|
||||
export const GuideContext = createContext<GuideContextType>({
|
||||
// The following `as` is for context initialization, they won't be used in production except for
|
||||
// HMR.
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions, no-restricted-syntax
|
||||
metadata: {} as GuideMetadata,
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions, no-restricted-syntax
|
||||
app: {} as ApplicationResponse,
|
||||
endpoint: '',
|
||||
redirectUris: [],
|
||||
postLogoutRedirectUris: [],
|
||||
isCompact: false,
|
||||
sampleUrls: { origin: '', callback: '' },
|
||||
});
|
||||
|
||||
type Props = {
|
||||
app?: Application;
|
||||
className?: string;
|
||||
guideId: string;
|
||||
app?: ApplicationResponse;
|
||||
isCompact?: boolean;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
/** @deprecated */
|
||||
const Guides: Record<string, LazyExoticComponent<(props: MDXProps) => JSX.Element>> = {
|
||||
ios: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/ios.mdx')),
|
||||
android: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/android.mdx')),
|
||||
react: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/react.mdx')),
|
||||
vue: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/vue.mdx')),
|
||||
vanilla: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/vanilla.mdx')),
|
||||
express: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/express.mdx')),
|
||||
next: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/next.mdx')),
|
||||
go: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/go.mdx')),
|
||||
'ios_zh-cn': lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx')),
|
||||
'android_zh-cn': lazy(
|
||||
async () => import('@/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx')
|
||||
),
|
||||
'react_zh-cn': lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx')),
|
||||
'vue_zh-cn': lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx')),
|
||||
'vanilla_zh-cn': lazy(
|
||||
async () => import('@/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx')
|
||||
),
|
||||
'express_zh-cn': lazy(
|
||||
async () => import('@/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx')
|
||||
),
|
||||
'next_zh-cn': lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/next_zh-cn.mdx')),
|
||||
'go_zh-cn': lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/go_zh-cn.mdx')),
|
||||
};
|
||||
|
||||
function Guide({ app, isCompact, onClose }: Props) {
|
||||
const sdks = app && applicationTypeAndSdkTypeMappings[app.type];
|
||||
const [selectedSdk, setSelectedSdk] = useState<Optional<SupportedSdk>>();
|
||||
const [activeStepIndex, setActiveStepIndex] = useState(-1);
|
||||
function Guide({ className, guideId, app, isCompact, onClose }: Props) {
|
||||
const { tenantEndpoint } = useContext(AppDataContext);
|
||||
const { data: customDomain } = useCustomDomain();
|
||||
const isCustomDomainActive = customDomain?.status === DomainStatus.Active;
|
||||
const guide = guides.find(({ id }) => id === guideId);
|
||||
|
||||
useEffect(() => {
|
||||
if (sdks?.length) {
|
||||
setSelectedSdk(sdks[0]);
|
||||
}
|
||||
}, [sdks]);
|
||||
|
||||
if (!app || !sdks || !selectedSdk) {
|
||||
return null;
|
||||
if (!app || !guide) {
|
||||
throw new Error('Invalid app or guide');
|
||||
}
|
||||
|
||||
const { id: appId, secret: appSecret, name: appName, oidcClientMetadata } = app;
|
||||
const locale = i18next.language;
|
||||
const guideI18nKey = `${selectedSdk}_${locale}`.toLowerCase();
|
||||
const GuideComponent = Guides[guideI18nKey] ?? Guides[selectedSdk.toLowerCase()];
|
||||
const GuideComponent = guide.Component;
|
||||
|
||||
const memorizedContext = useMemo(
|
||||
() =>
|
||||
({
|
||||
metadata: guide.metadata,
|
||||
Logo: guide.Logo,
|
||||
app,
|
||||
endpoint: tenantEndpoint?.toString() ?? '',
|
||||
alternativeEndpoint: conditional(isCustomDomainActive && tenantEndpoint?.toString()),
|
||||
redirectUris: app.oidcClientMetadata.redirectUris,
|
||||
postLogoutRedirectUris: app.oidcClientMetadata.postLogoutRedirectUris,
|
||||
isCompact: Boolean(isCompact),
|
||||
sampleUrls: {
|
||||
origin: 'http://localhost:3001/',
|
||||
callback: 'http://localhost:3001/callback',
|
||||
},
|
||||
}) satisfies GuideContextType,
|
||||
[guide, app, tenantEndpoint, isCustomDomainActive, isCompact]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<GuideHeader isCompact={isCompact} onClose={onClose} />
|
||||
<div className={classNames(styles.container, className)}>
|
||||
{!isCompact && <GuideHeader onClose={onClose} />}
|
||||
<div className={styles.content}>
|
||||
{cloneElement(<SdkSelector sdks={sdks} selectedSdk={selectedSdk} />, {
|
||||
className: styles.banner,
|
||||
isCompact,
|
||||
onChange: setSelectedSdk,
|
||||
onToggle: () => {
|
||||
setActiveStepIndex(0);
|
||||
},
|
||||
})}
|
||||
<MDXProvider
|
||||
components={{
|
||||
code: ({ className, children }) => {
|
||||
const [, language] = /language-(\w+)/.exec(String(className ?? '')) ?? [];
|
||||
<GuideContext.Provider value={memorizedContext}>
|
||||
<MDXProvider
|
||||
components={{
|
||||
code: ({ className, children }) => {
|
||||
const [, language] = /language-(\w+)/.exec(String(className ?? '')) ?? [];
|
||||
|
||||
return language ? (
|
||||
<CodeEditor isReadonly language={language} value={String(children).trimEnd()} />
|
||||
) : (
|
||||
<code>{String(children).trimEnd()}</code>
|
||||
);
|
||||
},
|
||||
a: ({ children, ...props }) => (
|
||||
<TextLink {...props} target="_blank" rel="noopener noreferrer">
|
||||
{children}
|
||||
</TextLink>
|
||||
),
|
||||
details: DetailsSummary,
|
||||
}}
|
||||
>
|
||||
<Suspense fallback={<StepsSkeleton />}>
|
||||
{GuideComponent && tenantEndpoint && (
|
||||
<GuideComponent
|
||||
appId={appId}
|
||||
appSecret={appSecret}
|
||||
endpoint={
|
||||
isCustomDomainActive
|
||||
? applyDomain(tenantEndpoint.toString(), customDomain.domain)
|
||||
: tenantEndpoint
|
||||
}
|
||||
alternativeEndpoint={conditional(isCustomDomainActive && tenantEndpoint)}
|
||||
redirectUris={oidcClientMetadata.redirectUris}
|
||||
postLogoutRedirectUris={oidcClientMetadata.postLogoutRedirectUris}
|
||||
activeStepIndex={activeStepIndex}
|
||||
isCompact={isCompact}
|
||||
onNext={(nextIndex: number) => {
|
||||
setActiveStepIndex(nextIndex);
|
||||
}}
|
||||
onComplete={onClose}
|
||||
return language ? (
|
||||
<CodeEditor
|
||||
isReadonly
|
||||
// We need to transform `ts` to `typescript` for prismjs, and
|
||||
// it's weird since it worked in the original Guide component.
|
||||
// To be investigated.
|
||||
language={language === 'ts' ? 'typescript' : language}
|
||||
value={String(children).trimEnd()}
|
||||
/>
|
||||
) : (
|
||||
<code>{String(children).trimEnd()}</code>
|
||||
);
|
||||
},
|
||||
a: ({ children, ...props }) => (
|
||||
<TextLink {...props} target="_blank" rel="noopener noreferrer">
|
||||
{children}
|
||||
</TextLink>
|
||||
),
|
||||
details: DetailsSummary,
|
||||
}}
|
||||
>
|
||||
<Suspense fallback={<StepsSkeleton />}>
|
||||
{tenantEndpoint && <GuideComponent {...memorizedContext} />}
|
||||
</Suspense>
|
||||
</MDXProvider>
|
||||
</GuideContext.Provider>
|
||||
{!isCompact && (
|
||||
<nav className={styles.actionBar}>
|
||||
<div className={styles.layout}>
|
||||
<Button
|
||||
size="large"
|
||||
title="applications.guide.finish_and_done"
|
||||
type="primary"
|
||||
onClick={onClose}
|
||||
/>
|
||||
)}
|
||||
</Suspense>
|
||||
</MDXProvider>
|
||||
</div>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -12,6 +12,10 @@
|
|||
max-width: 460px;
|
||||
justify-content: space-between;
|
||||
|
||||
&.compact {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.hasBorder {
|
||||
border-color: var(--color-divider);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,25 +10,28 @@ import { TenantsContext } from '@/contexts/TenantsProvider';
|
|||
import Button from '@/ds-components/Button';
|
||||
import useSubscriptionPlan from '@/hooks/use-subscription-plan';
|
||||
import useTenantPathname from '@/hooks/use-tenant-pathname';
|
||||
import { onKeyDownHandler } from '@/utils/a11y';
|
||||
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
export type SelectedGuide = {
|
||||
target: GuideMetadata['target'];
|
||||
id: Guide['id'];
|
||||
target: GuideMetadata['target'];
|
||||
name: GuideMetadata['name'];
|
||||
};
|
||||
|
||||
type Props = {
|
||||
data: Guide;
|
||||
onClick: (data: SelectedGuide) => void;
|
||||
hasBorder?: boolean;
|
||||
isCompact?: boolean;
|
||||
};
|
||||
|
||||
function LogoSkeleton() {
|
||||
return <div className={styles.logoSkeleton} />;
|
||||
}
|
||||
|
||||
function GuideCard({ data, onClick, hasBorder }: Props) {
|
||||
function GuideCard({ data, onClick, hasBorder, isCompact }: Props) {
|
||||
const { navigate } = useTenantPathname();
|
||||
const { currentTenantId } = useContext(TenantsContext);
|
||||
const { data: currentPlan } = useSubscriptionPlan(currentTenantId);
|
||||
|
|
@ -42,8 +45,28 @@ function GuideCard({ data, onClick, hasBorder }: Props) {
|
|||
metadata: { target, name, description },
|
||||
} = data;
|
||||
|
||||
const onClickCard = () => {
|
||||
if (!isCompact) {
|
||||
return;
|
||||
}
|
||||
|
||||
onClick({ id, target, name });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classNames(styles.card, hasBorder && styles.hasBorder)}>
|
||||
<div
|
||||
className={classNames(
|
||||
styles.card,
|
||||
hasBorder && styles.hasBorder,
|
||||
isCompact && styles.compact
|
||||
)}
|
||||
{...(isCompact && {
|
||||
tabIndex: 0,
|
||||
role: 'button',
|
||||
onKeyDown: onKeyDownHandler(onClickCard),
|
||||
onClick: onClickCard,
|
||||
})}
|
||||
>
|
||||
<div className={styles.header}>
|
||||
<Suspense fallback={<LogoSkeleton />}>
|
||||
<Logo className={styles.logo} />
|
||||
|
|
@ -63,7 +86,7 @@ function GuideCard({ data, onClick, hasBorder }: Props) {
|
|||
if (isSubscriptionRequired) {
|
||||
navigate(subscriptionPage);
|
||||
} else {
|
||||
onClick({ target, id });
|
||||
onClick({ id, target, name });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.guideGroup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
container-type: inline-size;
|
||||
|
||||
label {
|
||||
@include _.section-head-1;
|
||||
margin-bottom: _.unit(4);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: _.unit(4) _.unit(3);
|
||||
}
|
||||
|
||||
@container (max-width: 680px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: 681px) and (max-width: 1080px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: 1081px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import classNames from 'classnames';
|
||||
|
||||
import { type Guide } from '@/assets/docs/guides/types';
|
||||
|
||||
import GuideCard, { type SelectedGuide } from '../GuideCard';
|
||||
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
type GuideGroupProps = {
|
||||
className?: string;
|
||||
categoryName?: string;
|
||||
guides?: readonly Guide[];
|
||||
hasCardBorder?: boolean;
|
||||
isCompact?: boolean;
|
||||
onClickGuide: (data: SelectedGuide) => void;
|
||||
};
|
||||
|
||||
function GuideGroup({
|
||||
className,
|
||||
categoryName,
|
||||
guides,
|
||||
hasCardBorder,
|
||||
isCompact,
|
||||
onClickGuide,
|
||||
}: GuideGroupProps) {
|
||||
if (!guides?.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames(styles.guideGroup, className)}>
|
||||
{categoryName && <label>{categoryName}</label>}
|
||||
<div className={styles.grid}>
|
||||
{guides.map((guide) => (
|
||||
<GuideCard
|
||||
key={guide.id}
|
||||
isCompact={isCompact}
|
||||
hasBorder={hasCardBorder}
|
||||
data={guide}
|
||||
onClick={onClickGuide}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default GuideGroup;
|
||||
|
|
@ -54,37 +54,5 @@
|
|||
|
||||
.guideGroup {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: _.unit(8) _.unit(8) 0 0;
|
||||
max-width: 1876px;
|
||||
container-type: inline-size;
|
||||
|
||||
label {
|
||||
@include _.section-head-1;
|
||||
margin-bottom: _.unit(4);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: _.unit(4) _.unit(3);
|
||||
}
|
||||
|
||||
@container (max-width: 680px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: 681px) and (max-width: 1080px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: 1081px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import classNames from 'classnames';
|
|||
import { useCallback, useContext, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { type Guide } from '@/assets/docs/guides/types';
|
||||
import SearchIcon from '@/assets/icons/search.svg';
|
||||
import ProTag from '@/components/ProTag';
|
||||
import { isCloud } from '@/consts/env';
|
||||
|
|
@ -16,42 +15,18 @@ import useTenantPathname from '@/hooks/use-tenant-pathname';
|
|||
import { allAppGuideCategories, type AppGuideCategory } from '@/types/applications';
|
||||
|
||||
import CreateForm from '../CreateForm';
|
||||
import GuideCard, { type SelectedGuide } from '../GuideCard';
|
||||
import { type SelectedGuide } from '../GuideCard';
|
||||
import GuideGroup from '../GuideGroup';
|
||||
|
||||
import useAppGuideMetadata from './hook';
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
type Props = {
|
||||
className?: string;
|
||||
hasFilter?: boolean;
|
||||
hasCardBorder?: boolean;
|
||||
};
|
||||
|
||||
type GuideGroupProps = {
|
||||
categoryName?: string;
|
||||
guides?: readonly Guide[];
|
||||
hasCardBorder?: boolean;
|
||||
onClickGuide: (data: SelectedGuide) => void;
|
||||
};
|
||||
|
||||
function GuideGroup({ categoryName, guides, hasCardBorder, onClickGuide }: GuideGroupProps) {
|
||||
if (!guides?.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.guideGroup}>
|
||||
{categoryName && <label>{categoryName}</label>}
|
||||
<div className={styles.grid}>
|
||||
{guides.map((guide) => (
|
||||
<GuideCard key={guide.id} hasBorder={hasCardBorder} data={guide} onClick={onClickGuide} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function GuideLibrary({ className, hasFilter, hasCardBorder }: Props) {
|
||||
function GuideLibrary({ className, hasCardBorder }: Props) {
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.applications.guide' });
|
||||
const { navigate } = useTenantPathname();
|
||||
const [keyword, setKeyword] = useState<string>('');
|
||||
|
|
@ -93,39 +68,38 @@ function GuideLibrary({ className, hasFilter, hasCardBorder }: Props) {
|
|||
|
||||
return (
|
||||
<div className={classNames(styles.container, className)}>
|
||||
{hasFilter && (
|
||||
<div className={styles.filters}>
|
||||
<label>{t('filter.title')}</label>
|
||||
<TextInput
|
||||
className={styles.searchInput}
|
||||
icon={<SearchIcon />}
|
||||
placeholder={t('filter.placeholder')}
|
||||
value={keyword}
|
||||
onChange={(event) => {
|
||||
setKeyword(event.currentTarget.value);
|
||||
<div className={styles.filters}>
|
||||
<label>{t('filter.title')}</label>
|
||||
<TextInput
|
||||
className={styles.searchInput}
|
||||
icon={<SearchIcon />}
|
||||
placeholder={t('filter.placeholder')}
|
||||
value={keyword}
|
||||
onChange={(event) => {
|
||||
setKeyword(event.currentTarget.value);
|
||||
}}
|
||||
/>
|
||||
<div className={styles.checkboxGroupContainer}>
|
||||
<CheckboxGroup
|
||||
className={styles.checkboxGroup}
|
||||
options={allAppGuideCategories.map((category) => ({
|
||||
title: `applications.guide.categories.${category}`,
|
||||
value: category,
|
||||
}))}
|
||||
value={filterCategories}
|
||||
onChange={(value) => {
|
||||
const sortedValue = allAppGuideCategories.filter((category) =>
|
||||
value.includes(category)
|
||||
);
|
||||
setFilterCategories(sortedValue);
|
||||
}}
|
||||
/>
|
||||
<div className={styles.checkboxGroupContainer}>
|
||||
<CheckboxGroup
|
||||
className={styles.checkboxGroup}
|
||||
options={allAppGuideCategories.map((category) => ({
|
||||
title: `applications.guide.categories.${category}`,
|
||||
value: category,
|
||||
}))}
|
||||
value={filterCategories}
|
||||
onChange={(value) => {
|
||||
const sortedValue = allAppGuideCategories.filter((category) =>
|
||||
value.includes(category)
|
||||
);
|
||||
setFilterCategories(sortedValue);
|
||||
}}
|
||||
/>
|
||||
{isM2mDisabledForCurrentPlan && <ProTag className={styles.proTag} />}
|
||||
</div>
|
||||
{isM2mDisabledForCurrentPlan && <ProTag className={styles.proTag} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{keyword && (
|
||||
<GuideGroup
|
||||
className={styles.guideGroup}
|
||||
hasCardBorder={hasCardBorder}
|
||||
guides={filteredMetadata}
|
||||
onClickGuide={onClickGuide}
|
||||
|
|
@ -138,6 +112,7 @@ function GuideLibrary({ className, hasFilter, hasCardBorder }: Props) {
|
|||
structuredMetadata[category].length > 0 && (
|
||||
<GuideGroup
|
||||
key={category}
|
||||
className={styles.guideGroup}
|
||||
hasCardBorder={hasCardBorder}
|
||||
categoryName={t(`categories.${category}`)}
|
||||
guides={structuredMetadata[category]}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ function GuideLibraryModal({ isOpen, onClose }: Props) {
|
|||
>
|
||||
<div className={styles.container}>
|
||||
<GuideHeader onClose={onClose} />
|
||||
<GuideLibrary hasFilter className={styles.content} />
|
||||
<GuideLibrary className={styles.content} />
|
||||
<nav className={styles.actionBar}>
|
||||
<span className={styles.text}>{t('do_not_need_tutorial')}</span>
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -1,75 +0,0 @@
|
|||
@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);
|
||||
|
||||
section p {
|
||||
font: var(--font-body-2);
|
||||
margin: _.unit(4) 0;
|
||||
}
|
||||
|
||||
section ul > li,
|
||||
section ol > li {
|
||||
font: var(--font-body-2);
|
||||
margin-block: _.unit(2);
|
||||
padding-inline-start: _.unit(1);
|
||||
}
|
||||
|
||||
section table {
|
||||
border-spacing: 0;
|
||||
border: 1px solid var(--color-border);
|
||||
font: var(--font-body-2);
|
||||
|
||||
tr {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: _.unit(2) _.unit(4);
|
||||
}
|
||||
|
||||
thead {
|
||||
font: var(--font-title-3);
|
||||
}
|
||||
|
||||
tbody td {
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.markdownContent {
|
||||
margin-top: _.unit(6);
|
||||
}
|
||||
|
||||
.actionBar {
|
||||
position: absolute;
|
||||
inset: auto 0 0 0;
|
||||
padding: _.unit(4);
|
||||
background-color: var(--color-layer-1);
|
||||
box-shadow: var(--shadow-2-reversed);
|
||||
z-index: 1;
|
||||
|
||||
.layout {
|
||||
margin: 0 auto;
|
||||
max-width: 858px;
|
||||
|
||||
> button {
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
import { DomainStatus, type ApplicationResponse } from '@logto/schemas';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import { conditional } from '@silverhand/essentials';
|
||||
import {
|
||||
useContext,
|
||||
Suspense,
|
||||
createContext,
|
||||
useMemo,
|
||||
type LazyExoticComponent,
|
||||
type ComponentType,
|
||||
} from 'react';
|
||||
|
||||
import guides from '@/assets/docs/guides';
|
||||
import { type GuideMetadata } from '@/assets/docs/guides/types';
|
||||
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 GuideHeader from '../GuideHeader';
|
||||
import StepsSkeleton from '../StepsSkeleton';
|
||||
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
type GuideContextType = {
|
||||
metadata: Readonly<GuideMetadata>;
|
||||
Logo?: LazyExoticComponent<ComponentType>;
|
||||
app: ApplicationResponse;
|
||||
endpoint: string;
|
||||
alternativeEndpoint?: string;
|
||||
redirectUris: string[];
|
||||
postLogoutRedirectUris: string[];
|
||||
isCompact: boolean;
|
||||
sampleUrls: {
|
||||
origin: string;
|
||||
callback: string;
|
||||
};
|
||||
};
|
||||
|
||||
export const GuideContext = createContext<GuideContextType>({
|
||||
// The following `as` is for context initialization, they won't be used in production except for
|
||||
// HMR.
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions, no-restricted-syntax
|
||||
metadata: {} as GuideMetadata,
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions, no-restricted-syntax
|
||||
app: {} as ApplicationResponse,
|
||||
endpoint: '',
|
||||
redirectUris: [],
|
||||
postLogoutRedirectUris: [],
|
||||
isCompact: false,
|
||||
sampleUrls: { origin: '', callback: '' },
|
||||
});
|
||||
|
||||
type Props = {
|
||||
guideId: string;
|
||||
app?: ApplicationResponse;
|
||||
isCompact?: boolean;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
function GuideV2({ guideId, app, isCompact, onClose }: Props) {
|
||||
const { tenantEndpoint } = useContext(AppDataContext);
|
||||
const { data: customDomain } = useCustomDomain();
|
||||
const isCustomDomainActive = customDomain?.status === DomainStatus.Active;
|
||||
const guide = guides.find(({ id }) => id === guideId);
|
||||
|
||||
if (!app || !guide) {
|
||||
throw new Error('Invalid app or guide');
|
||||
}
|
||||
|
||||
const GuideComponent = guide.Component;
|
||||
|
||||
const memorizedContext = useMemo(
|
||||
() =>
|
||||
({
|
||||
metadata: guide.metadata,
|
||||
Logo: guide.Logo,
|
||||
app,
|
||||
endpoint: tenantEndpoint?.toString() ?? '',
|
||||
alternativeEndpoint: conditional(isCustomDomainActive && tenantEndpoint?.toString()),
|
||||
redirectUris: app.oidcClientMetadata.redirectUris,
|
||||
postLogoutRedirectUris: app.oidcClientMetadata.postLogoutRedirectUris,
|
||||
isCompact: Boolean(isCompact),
|
||||
sampleUrls: {
|
||||
origin: 'http://localhost:3001/',
|
||||
callback: 'http://localhost:3001/callback',
|
||||
},
|
||||
}) satisfies GuideContextType,
|
||||
[guide, app, tenantEndpoint, isCustomDomainActive, isCompact]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<GuideHeader isCompact={isCompact} onClose={onClose} />
|
||||
<div className={styles.content}>
|
||||
<GuideContext.Provider value={memorizedContext}>
|
||||
<MDXProvider
|
||||
components={{
|
||||
code: ({ className, children }) => {
|
||||
const [, language] = /language-(\w+)/.exec(String(className ?? '')) ?? [];
|
||||
|
||||
return language ? (
|
||||
<CodeEditor
|
||||
isReadonly
|
||||
// We need to transform `ts` to `typescript` for prismjs, and
|
||||
// it's weird since it worked in the original Guide component.
|
||||
// To be investigated.
|
||||
language={language === 'ts' ? 'typescript' : language}
|
||||
value={String(children).trimEnd()}
|
||||
/>
|
||||
) : (
|
||||
<code>{String(children).trimEnd()}</code>
|
||||
);
|
||||
},
|
||||
a: ({ children, ...props }) => (
|
||||
<TextLink {...props} target="_blank" rel="noopener noreferrer">
|
||||
{children}
|
||||
</TextLink>
|
||||
),
|
||||
details: DetailsSummary,
|
||||
}}
|
||||
>
|
||||
<Suspense fallback={<StepsSkeleton />}>
|
||||
{tenantEndpoint && <GuideComponent {...memorizedContext} />}
|
||||
</Suspense>
|
||||
</MDXProvider>
|
||||
</GuideContext.Provider>
|
||||
<nav className={styles.actionBar}>
|
||||
<div className={styles.layout}>
|
||||
<Button
|
||||
size="large"
|
||||
title="applications.guide.finish_and_done"
|
||||
type="primary"
|
||||
onClick={onClose}
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default GuideV2;
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.card {
|
||||
padding: _.unit(5) _.unit(6);
|
||||
display: block;
|
||||
flex-direction: column;
|
||||
scroll-margin: _.unit(5);
|
||||
|
||||
.congrats {
|
||||
display: block;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
margin: _.unit(1) auto _.unit(8);
|
||||
}
|
||||
|
||||
.congratsText {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font: var(--font-title-1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font: var(--font-body-2);
|
||||
color: var(--color-text);
|
||||
margin-top: _.unit(3);
|
||||
}
|
||||
|
||||
.radioGroup {
|
||||
width: 100%;
|
||||
margin-top: _.unit(6);
|
||||
margin-right: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: _.unit(5);
|
||||
}
|
||||
|
||||
.radio {
|
||||
border-radius: _.unit(2);
|
||||
padding: _.unit(5);
|
||||
width: 240px;
|
||||
max-width: unset;
|
||||
font: var(--font-label-2);
|
||||
}
|
||||
|
||||
.select {
|
||||
background: var(--color-guide-dropdown-background);
|
||||
border-color: var(--color-guide-dropdown-border);
|
||||
}
|
||||
|
||||
&.folded {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex: 0 0 56px;
|
||||
height: 56px;
|
||||
background: var(--color-neutral-variant-90);
|
||||
border-radius: _.unit(2);
|
||||
padding: 0 _.unit(4);
|
||||
font: var(--font-body-2);
|
||||
color: var(--color-text);
|
||||
|
||||
.tada {
|
||||
margin: 0 _.unit(4) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonWrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: _.unit(6);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
import { Theme } from '@logto/schemas';
|
||||
import classNames from 'classnames';
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import TadaDark from '@/assets/icons/tada-dark.svg';
|
||||
import Tada from '@/assets/icons/tada.svg';
|
||||
import CongratsDark from '@/assets/images/congrats-dark.svg';
|
||||
import Congrats from '@/assets/images/congrats.svg';
|
||||
import Button from '@/ds-components/Button';
|
||||
import Card from '@/ds-components/Card';
|
||||
import RadioGroup, { Radio } from '@/ds-components/RadioGroup';
|
||||
import Select from '@/ds-components/Select';
|
||||
import Spacer from '@/ds-components/Spacer';
|
||||
import useTheme from '@/hooks/use-theme';
|
||||
import type { SupportedSdk } from '@/types/applications';
|
||||
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
type Props = {
|
||||
className?: string;
|
||||
sdks: readonly SupportedSdk[];
|
||||
selectedSdk: SupportedSdk;
|
||||
isCompact?: boolean;
|
||||
onChange?: (value: string) => void;
|
||||
onToggle?: () => void;
|
||||
};
|
||||
|
||||
function SdkSelector({
|
||||
className,
|
||||
sdks,
|
||||
selectedSdk,
|
||||
isCompact = false,
|
||||
onChange,
|
||||
onToggle,
|
||||
}: Props) {
|
||||
const [isFolded, setIsFolded] = useState(isCompact);
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
const theme = useTheme();
|
||||
const isLightMode = theme === Theme.Light;
|
||||
const CongratsIcon = isLightMode ? Congrats : CongratsDark;
|
||||
const TadaIcon = isLightMode ? Tada : TadaDark;
|
||||
|
||||
if (isFolded) {
|
||||
return (
|
||||
<div className={classNames(styles.card, styles.folded, className)}>
|
||||
<TadaIcon className={styles.tada} />
|
||||
<span>{t('applications.guide.description_by_sdk', { sdk: selectedSdk })}</span>
|
||||
<Spacer />
|
||||
<Select
|
||||
className={styles.select}
|
||||
value={selectedSdk}
|
||||
size="medium"
|
||||
options={sdks.map((sdk) => ({ value: sdk, title: sdk }))}
|
||||
onChange={(value) => {
|
||||
onChange?.(value ?? selectedSdk);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className={classNames(styles.card, className)}>
|
||||
<CongratsIcon className={styles.congrats} />
|
||||
<div className={styles.congratsText}>
|
||||
<div className={styles.title}>{t('applications.guide.title')}</div>
|
||||
<div className={styles.subtitle}>{t('applications.guide.subtitle')}</div>
|
||||
</div>
|
||||
<RadioGroup
|
||||
className={styles.radioGroup}
|
||||
name="selectedSdk"
|
||||
value={selectedSdk}
|
||||
type="card"
|
||||
onChange={onChange}
|
||||
>
|
||||
{sdks.length > 1 &&
|
||||
sdks.map((sdk) => (
|
||||
<Radio key={sdk} className={styles.radio} value={sdk}>
|
||||
{sdk}
|
||||
</Radio>
|
||||
))}
|
||||
</RadioGroup>
|
||||
<div className={styles.buttonWrapper}>
|
||||
<Button
|
||||
type="outline"
|
||||
title="general.next"
|
||||
size="large"
|
||||
onClick={() => {
|
||||
setIsFolded(true);
|
||||
onToggle?.();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default SdkSelector;
|
||||
|
|
@ -2,7 +2,6 @@ import { ApplicationType } from '@logto/schemas';
|
|||
|
||||
import { type Guide } from '@/assets/docs/guides/types';
|
||||
|
||||
/** @deprecated */
|
||||
export const applicationTypeI18nKey = Object.freeze({
|
||||
[ApplicationType.Native]: 'applications.type.native',
|
||||
[ApplicationType.SPA]: 'applications.type.spa',
|
||||
|
|
@ -10,26 +9,6 @@ export const applicationTypeI18nKey = Object.freeze({
|
|||
[ApplicationType.MachineToMachine]: 'applications.type.machine_to_machine',
|
||||
} as const);
|
||||
|
||||
/** @deprecated */
|
||||
export enum SupportedSdk {
|
||||
iOS = 'iOS',
|
||||
Android = 'Android',
|
||||
React = 'React',
|
||||
Vue = 'Vue',
|
||||
Vanilla = 'Vanilla',
|
||||
Express = 'Express',
|
||||
Next = 'Next',
|
||||
Go = 'Go',
|
||||
}
|
||||
|
||||
/** @deprecated */
|
||||
export const applicationTypeAndSdkTypeMappings = Object.freeze({
|
||||
[ApplicationType.Native]: [SupportedSdk.iOS, SupportedSdk.Android],
|
||||
[ApplicationType.SPA]: [SupportedSdk.React, SupportedSdk.Vue, SupportedSdk.Vanilla],
|
||||
[ApplicationType.Traditional]: [SupportedSdk.Next, SupportedSdk.Express, SupportedSdk.Go],
|
||||
[ApplicationType.MachineToMachine]: [],
|
||||
} as const);
|
||||
|
||||
/**
|
||||
* All application guide categories, including all 4 existing application types,
|
||||
* plus the "featured" category.
|
||||
|
|
|
|||
|
|
@ -52,6 +52,8 @@ const applications = {
|
|||
title: 'Filter framework', // UNTRANSLATED
|
||||
placeholder: 'Search for framework', // UNTRANSLATED
|
||||
},
|
||||
select_a_framework: 'Select a framework', // UNTRANSLATED
|
||||
checkout_tutorial: 'Checkout {{name}} tutorial', // UNTRANSLATED
|
||||
get_sample_file: 'Zum Beispielprojekt',
|
||||
title: 'Die Anwendung wurde erfolgreich erstellt',
|
||||
subtitle:
|
||||
|
|
|
|||
|
|
@ -51,6 +51,8 @@ const applications = {
|
|||
title: 'Filter framework',
|
||||
placeholder: 'Search for framework',
|
||||
},
|
||||
select_a_framework: 'Select a framework',
|
||||
checkout_tutorial: 'Checkout {{name}} tutorial',
|
||||
get_sample_file: 'Get Sample',
|
||||
title: 'The application has been successfully created',
|
||||
subtitle:
|
||||
|
|
|
|||
|
|
@ -52,6 +52,8 @@ const applications = {
|
|||
title: 'Filter framework', // UNTRANSLATED
|
||||
placeholder: 'Search for framework', // UNTRANSLATED
|
||||
},
|
||||
select_a_framework: 'Select a framework', // UNTRANSLATED
|
||||
checkout_tutorial: 'Checkout {{name}} tutorial', // UNTRANSLATED
|
||||
get_sample_file: 'Obtener muestra',
|
||||
title: 'La aplicación se ha creado correctamente',
|
||||
subtitle:
|
||||
|
|
|
|||
|
|
@ -53,6 +53,8 @@ const applications = {
|
|||
title: 'Filter framework', // UNTRANSLATED
|
||||
placeholder: 'Search for framework', // UNTRANSLATED
|
||||
},
|
||||
select_a_framework: 'Select a framework', // UNTRANSLATED
|
||||
checkout_tutorial: 'Checkout {{name}} tutorial', // UNTRANSLATED
|
||||
get_sample_file: 'Obtenir un exemple',
|
||||
title: "L'application a été créée avec succès",
|
||||
subtitle:
|
||||
|
|
|
|||
|
|
@ -52,6 +52,8 @@ const applications = {
|
|||
title: 'Filter framework', // UNTRANSLATED
|
||||
placeholder: 'Search for framework', // UNTRANSLATED
|
||||
},
|
||||
select_a_framework: 'Select a framework', // UNTRANSLATED
|
||||
checkout_tutorial: 'Checkout {{name}} tutorial', // UNTRANSLATED
|
||||
get_sample_file: 'Scarica Esempio',
|
||||
title: "L'applicazione è stata creata con successo",
|
||||
subtitle:
|
||||
|
|
|
|||
|
|
@ -51,6 +51,8 @@ const applications = {
|
|||
title: 'Filter framework', // UNTRANSLATED
|
||||
placeholder: 'Search for framework', // UNTRANSLATED
|
||||
},
|
||||
select_a_framework: 'Select a framework', // UNTRANSLATED
|
||||
checkout_tutorial: 'Checkout {{name}} tutorial', // UNTRANSLATED
|
||||
get_sample_file: 'サンプルを取得する',
|
||||
title: 'アプリケーションが正常に作成されました',
|
||||
subtitle:
|
||||
|
|
|
|||
|
|
@ -51,6 +51,8 @@ const applications = {
|
|||
title: 'Filter framework', // UNTRANSLATED
|
||||
placeholder: 'Search for framework', // UNTRANSLATED
|
||||
},
|
||||
select_a_framework: 'Select a framework', // UNTRANSLATED
|
||||
checkout_tutorial: 'Checkout {{name}} tutorial', // UNTRANSLATED
|
||||
get_sample_file: '예제 찾기',
|
||||
title: '어플리케이션이 생성되었어요.',
|
||||
subtitle: '앱 설정을 마치기 위해 아래 단계를 따라주세요. SDK 종류를 선택해 주세요.',
|
||||
|
|
|
|||
|
|
@ -52,6 +52,8 @@ const applications = {
|
|||
title: 'Filter framework', // UNTRANSLATED
|
||||
placeholder: 'Search for framework', // UNTRANSLATED
|
||||
},
|
||||
select_a_framework: 'Select a framework', // UNTRANSLATED
|
||||
checkout_tutorial: 'Checkout {{name}} tutorial', // UNTRANSLATED
|
||||
get_sample_file: 'Pobierz przykład',
|
||||
title: 'Aplikacja została pomyślnie utworzona',
|
||||
subtitle:
|
||||
|
|
|
|||
|
|
@ -52,6 +52,8 @@ const applications = {
|
|||
title: 'Filter framework', // UNTRANSLATED
|
||||
placeholder: 'Search for framework', // UNTRANSLATED
|
||||
},
|
||||
select_a_framework: 'Select a framework', // UNTRANSLATED
|
||||
checkout_tutorial: 'Checkout {{name}} tutorial', // UNTRANSLATED
|
||||
get_sample_file: 'Obter amostra',
|
||||
title: 'O aplicativo foi criado com sucesso',
|
||||
subtitle:
|
||||
|
|
|
|||
|
|
@ -51,6 +51,8 @@ const applications = {
|
|||
title: 'Filter framework', // UNTRANSLATED
|
||||
placeholder: 'Search for framework', // UNTRANSLATED
|
||||
},
|
||||
select_a_framework: 'Select a framework', // UNTRANSLATED
|
||||
checkout_tutorial: 'Checkout {{name}} tutorial', // UNTRANSLATED
|
||||
get_sample_file: 'Obter amostra',
|
||||
title: 'A aplicação foi criada com sucesso',
|
||||
subtitle:
|
||||
|
|
|
|||
|
|
@ -51,6 +51,8 @@ const applications = {
|
|||
title: 'Filter framework', // UNTRANSLATED
|
||||
placeholder: 'Search for framework', // UNTRANSLATED
|
||||
},
|
||||
select_a_framework: 'Select a framework', // UNTRANSLATED
|
||||
checkout_tutorial: 'Checkout {{name}} tutorial', // UNTRANSLATED
|
||||
get_sample_file: 'Получить образец',
|
||||
title: 'Приложение успешно создано',
|
||||
subtitle:
|
||||
|
|
|
|||
|
|
@ -52,6 +52,8 @@ const applications = {
|
|||
title: 'Filter framework', // UNTRANSLATED
|
||||
placeholder: 'Search for framework', // UNTRANSLATED
|
||||
},
|
||||
select_a_framework: 'Select a framework', // UNTRANSLATED
|
||||
checkout_tutorial: 'Checkout {{name}} tutorial', // UNTRANSLATED
|
||||
get_sample_file: 'Örnek Gör',
|
||||
title: 'Uygulama başarıyla oluşturuldu',
|
||||
subtitle:
|
||||
|
|
|
|||
|
|
@ -49,6 +49,8 @@ const applications = {
|
|||
title: 'Filter framework', // UNTRANSLATED
|
||||
placeholder: 'Search for framework', // UNTRANSLATED
|
||||
},
|
||||
select_a_framework: 'Select a framework', // UNTRANSLATED
|
||||
checkout_tutorial: 'Checkout {{name}} tutorial', // UNTRANSLATED
|
||||
get_sample_file: '获取示例',
|
||||
title: '应用创建成功',
|
||||
subtitle: '参考以下步骤完成你的应用设置。首先，选择你要使用的 SDK 类型：',
|
||||
|
|
|
|||
|
|
@ -49,6 +49,8 @@ const applications = {
|
|||
title: 'Filter framework', // UNTRANSLATED
|
||||
placeholder: 'Search for framework', // UNTRANSLATED
|
||||
},
|
||||
select_a_framework: 'Select a framework', // UNTRANSLATED
|
||||
checkout_tutorial: 'Checkout {{name}} tutorial', // UNTRANSLATED
|
||||
get_sample_file: '獲取示例',
|
||||
title: '應用創建成功',
|
||||
subtitle: '參考以下步驟完成你的應用設置。首先，選擇你要使用的 SDK 類型：',
|
||||
|
|
|
|||
|
|
@ -49,6 +49,8 @@ const applications = {
|
|||
title: 'Filter framework', // UNTRANSLATED
|
||||
placeholder: 'Search for framework', // UNTRANSLATED
|
||||
},
|
||||
select_a_framework: 'Select a framework', // UNTRANSLATED
|
||||
checkout_tutorial: 'Checkout {{name}} tutorial', // UNTRANSLATED
|
||||
get_sample_file: '獲取示例',
|
||||
title: '應用創建成功',
|
||||
subtitle: '參考以下步驟完成你的應用設置。首先，選擇你要使用的 SDK 類型：',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue