-
- {t('applications.get_started.title')}
- {t('applications.get_started.subtitle')}
-
-
-
- 
-
- {t('applications.get_started.description_by_library', { library: libraryName })}
-
-
- ),
- [libraryName, t]
- );
-
- return (
-
-
- );
-};
-
-export default GetStarted;
diff --git a/packages/console/src/pages/Applications/components/LibrarySelector/index.module.scss b/packages/console/src/pages/Applications/components/LibrarySelector/index.module.scss
new file mode 100644
index 000000000..6e1e59dcd
--- /dev/null
+++ b/packages/console/src/pages/Applications/components/LibrarySelector/index.module.scss
@@ -0,0 +1,50 @@
+@use '@/scss/underscore' as _;
+
+.card {
+ padding: _.unit(5) _.unit(6);
+ display: block;
+ flex-direction: column;
+ scroll-margin: _.unit(5);
+
+ .title {
+ font: var(--font-title-large);
+ }
+
+ .subtitle {
+ font: var(--font-body-medium);
+ color: var(--color-component-text);
+ margin-top: _.unit(3);
+ }
+
+ .radioGroup {
+ margin-top: _.unit(6);
+ }
+
+ .radio {
+ border-radius: _.unit(2);
+ width: 240px;
+ max-width: unset;
+ }
+
+ &.folded {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex: 0 0 56px;
+ background: var(--color-neutral-variant-90);
+ border-radius: _.unit(2);
+ padding: 0 _.unit(4);
+ font: var(--font-body-medium);
+ color: var(--color-component-text);
+
+ img {
+ margin-right: _.unit(3);
+ }
+ }
+
+ .buttonWrapper {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: _.unit(6);
+ }
+}
diff --git a/packages/console/src/pages/Applications/components/LibrarySelector/index.tsx b/packages/console/src/pages/Applications/components/LibrarySelector/index.tsx
new file mode 100644
index 000000000..35a6ed6c1
--- /dev/null
+++ b/packages/console/src/pages/Applications/components/LibrarySelector/index.tsx
@@ -0,0 +1,78 @@
+import classNames from 'classnames';
+import React, { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import highFive from '@/assets/images/high-five.svg';
+import tada from '@/assets/images/tada.svg';
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import RadioGroup, { Radio } from '@/components/RadioGroup';
+import { SupportedJavascriptLibraries } from '@/types/applications';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+ className?: string;
+ libraryName?: SupportedJavascriptLibraries;
+ onChange?: (value: string) => void;
+ onToggle?: () => void;
+};
+
+const LibrarySelector = ({
+ className,
+ libraryName = SupportedJavascriptLibraries.React,
+ onChange,
+ onToggle,
+}: Props) => {
+ const [isFolded, setIsFolded] = useState(false);
+ const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+ const librarySelector = useMemo(
+ () => (
+
-
-
-
- {appName}}
- subtitle="applications.get_started.header_description"
- />
-
-
- {isLibrarySelectorFolded ? librarySelectorFolded : librarySelector}
- {steps?.map((step, index) => {
- const { title, subtitle, metadata } = step;
- const isExpanded = activeStepIndex === index;
- const isCompleted = activeStepIndex > index;
- const isLastStep = index === steps.length - 1;
-
- // Steps in get-started must have "title" declared in the Yaml header of the markdown source file
- if (!title) {
- return null;
- }
-
- // TODO: add more styles to markdown renderer
- // TODO: render form and input fields in steps
- return (
-
- {metadata}
-
- );
- })}
-
- {
- setIsLibrarySelectorFolded(true);
- setActiveStepIndex(index);
- }}
- >
- {title}}
- subtitle={{subtitle} }
- />
- {isExpanded ?
-
- {isExpanded && (
- <>
-
- {isCompleted ?
-
-
-
- )}
-
+
+ {t('applications.get_started.title')}
+ {t('applications.get_started.subtitle')}
+
+
+
+
+
+ {t('applications.get_started.description_by_library', { library: libraryName })}
+
+
+ ),
+ [className, libraryName, t]
+ );
+
+ return isFolded ? librarySelectorFolded : librarySelector;
+};
+
+export default LibrarySelector;
diff --git a/packages/console/src/pages/GetStarted/components/Step/index.module.scss b/packages/console/src/pages/GetStarted/components/Step/index.module.scss
new file mode 100644
index 000000000..78867a8ef
--- /dev/null
+++ b/packages/console/src/pages/GetStarted/components/Step/index.module.scss
@@ -0,0 +1,59 @@
+@use '@/scss/underscore' as _;
+
+.card {
+ padding: _.unit(5) _.unit(6);
+ display: flex;
+ flex-direction: column;
+ scroll-margin: _.unit(5);
+
+ .cardHeader {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ cursor: pointer;
+
+ > svg {
+ fill: var(--color-icon);
+ }
+
+ .index {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ color: var(--color-primary);
+ background: var(--color-surface-5);
+ font: var(--font-title-medium);
+ margin-right: _.unit(4);
+
+ &.active {
+ color: var(--color-on-primary);
+ background: var(--color-primary);
+ }
+
+ &.completed {
+ background: var(--color-primary);
+
+ > svg {
+ fill: var(--color-on-primary);
+ }
+ }
+ }
+ }
+
+ .buttonWrapper {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: _.unit(6);
+ }
+}
+
+.card + .card {
+ margin-top: _.unit(6);
+}
+
+.markdownContent {
+ margin-top: _.unit(6);
+}
diff --git a/packages/console/src/pages/GetStarted/components/Step/index.tsx b/packages/console/src/pages/GetStarted/components/Step/index.tsx
new file mode 100644
index 000000000..3d29aea64
--- /dev/null
+++ b/packages/console/src/pages/GetStarted/components/Step/index.tsx
@@ -0,0 +1,88 @@
+import classNames from 'classnames';
+import React, { forwardRef, Ref } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import CardTitle from '@/components/CardTitle';
+import DangerousRaw from '@/components/DangerousRaw';
+import IconButton from '@/components/IconButton';
+import Spacer from '@/components/Spacer';
+import { ArrowDown, ArrowUp } from '@/icons/Arrow';
+import Tick from '@/icons/Tick';
+
+import * as styles from './index.module.scss';
+
+export type StepMetadata = {
+ title?: string;
+ subtitle?: string;
+ metadata: string; // Markdown formatted string
+};
+
+type Props = {
+ data: StepMetadata;
+ index: number;
+ isCompleted: boolean;
+ isExpanded: boolean;
+ isFinalStep: boolean;
+ onComplete?: () => void;
+ onNext?: () => void;
+ onToggle?: () => void;
+};
+
+const Step = (
+ { data, index, isCompleted, isExpanded, isFinalStep, onComplete, onNext, onToggle }: Props,
+ ref?: Ref
+ {title}}
+ subtitle={{subtitle} }
+ />
+ {isExpanded ?
+
+ {isExpanded && (
+ <>
+
+ {isCompleted ?
+
+
+
+ )}
+ GetStarted
;
+import Button from '@/components/Button';
+import CardTitle from '@/components/CardTitle';
+import DangerousRaw from '@/components/DangerousRaw';
+import IconButton from '@/components/IconButton';
+import Spacer from '@/components/Spacer';
+import Close from '@/icons/Close';
+
+import Step from './components/Step';
+import { GetStartedType, useGetStartedSteps } from './hooks';
+import * as styles from './index.module.scss';
+
+type Props = PropsWithChildren<{
+ title: string;
+ subtitle?: AdminConsoleKey;
+ type: GetStartedType;
+ /** `subtype` can be an actual type of an application or connector.
+ * e.g. React, Angular, Vue, etc. for application. Or Github, WeChat, etc. for connector.
+ */
+ defaultSubtype?: string;
+ bannerComponent?: ReactNode;
+ onClose?: () => void;
+ onComplete?: () => void;
+ onToggleSteps?: () => void;
+}>;
+
+const onClickFetchSampleProject = (projectName: string) => {
+ const sampleUrl = `https://github.com/logto-io/js/tree/master/packages/${projectName}-sample`;
+ window.open(sampleUrl, '_blank');
+};
+
+const GetStarted = ({
+ title,
+ subtitle,
+ type,
+ defaultSubtype,
+ bannerComponent,
+ onClose,
+ onComplete,
+ onToggleSteps,
+}: Props) => {
+ const [subtype, setSubtype] = useState(defaultSubtype);
+ const [activeStepIndex, setActiveStepIndex] = useState
+
+ );
};
export default GetStarted;
+
+
+
+ {title}} subtitle={subtitle} />
+
+
+ {isValidElement(bannerComponent) &&
+ cloneElement(bannerComponent, {
+ className: styles.banner,
+ onChange: setSubtype,
+ onToggle: () => {
+ setActiveStepIndex(0);
+ },
+ })}
+ {steps.map((step, index) => {
+ const isFinalStep = index === steps.length - 1;
+
+ return (
+ {
+ // eslint-disable-next-line @silverhand/fp/no-mutation
+ stepReferences.current[index] = element;
+ }}
+ data={step}
+ index={index}
+ isCompleted={activeStepIndex > index}
+ isExpanded={activeStepIndex === index}
+ isFinalStep={isFinalStep}
+ onComplete={onComplete}
+ onNext={() => {
+ setActiveStepIndex(index + 1);
+ }}
+ onToggle={() => {
+ setActiveStepIndex(index);
+ onToggleSteps?.();
+ }}
+ />
+ );
+ })}
+
+