From c1b6c32d2481f652d17cb714a1416aa64ca41ffa Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Sat, 7 May 2022 11:35:11 +0800
Subject: [PATCH] refactor(console): separate mdx usages from docs

---
 .gitignore                                    |   3 -
 packages/console/package.json                 |  11 +-
 .../docs/tutorial/integrate-sdk/android.mdx   | 273 ++++++++++++++++++
 .../docs/tutorial/integrate-sdk/react.mdx     | 190 ++++++++++++
 .../tutorial/integrate-sdk/react_zh-cn.mdx    | 190 ++++++++++++
 .../MultiTextInputField/index.tsx             |   0
 .../Step/index.module.scss                    |   0
 .../Step/index.tsx                            |   0
 .../components/GuideModal/index.tsx           |   2 +-
 packages/console/src/pages/Guide/index.tsx    |   7 +-
 pnpm-lock.yaml                                |   2 -
 11 files changed, 659 insertions(+), 19 deletions(-)
 create mode 100644 packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx
 create mode 100644 packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx
 create mode 100644 packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx
 rename packages/console/src/{pages/Guide/components => mdx-components}/MultiTextInputField/index.tsx (100%)
 rename packages/console/src/{pages/Guide/components => mdx-components}/Step/index.module.scss (100%)
 rename packages/console/src/{pages/Guide/components => mdx-components}/Step/index.tsx (100%)

diff --git a/.gitignore b/.gitignore
index 302bee1a0..9132715ca 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,9 +17,6 @@ node_modules
 /packages/*/lib
 /packages/*/dist
 
-# docs copied to admin console
-/packages/console/**/*.mdx
-
 # logs
 logs
 *.log*
diff --git a/packages/console/package.json b/packages/console/package.json
index 8836997b0..11ec09e30 100644
--- a/packages/console/package.json
+++ b/packages/console/package.json
@@ -8,11 +8,10 @@
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "precommit": "lint-staged",
-    "copyfiles": "copyfiles -u 2 \"../docs/**/*.mdx\" src/assets",
-    "start": "pnpm copyfiles && parcel src/index.html",
-    "dev": "pnpm copyfiles && PORT=5002 parcel src/index.html --public-url /console --no-cache --hmr-port 6002",
+    "start": "parcel src/index.html",
+    "dev": "PORT=5002 parcel src/index.html --public-url /console --no-cache --hmr-port 6002",
     "check": "tsc --noEmit",
-    "build": "pnpm check && rm -rf dist && pnpm copyfiles && parcel build src/index.html --no-autoinstall --no-cache --public-url /console",
+    "build": "pnpm check && rm -rf dist && parcel build src/index.html --no-autoinstall --no-cache --public-url /console",
     "lint": "eslint --ext .ts --ext .tsx src",
     "lint:report": "pnpm lint --format json --output-file report.json",
     "stylelint": "stylelint \"src/**/*.scss\""
@@ -39,7 +38,6 @@
     "@types/react-dom": "^17.0.9",
     "@types/react-modal": "^3.13.1",
     "classnames": "^2.3.1",
-    "copyfiles": "^2.4.1",
     "csstype": "^3.0.11",
     "dayjs": "^1.10.5",
     "dnd-core": "^16.0.0",
@@ -74,8 +72,7 @@
   },
   "alias": {
     "@/*": "./src/$1",
-    "@theme/*": "./src/mdx-components/$1",
-    "@components/*": "./src/pages/Guide/components/$1"
+    "@mdx/components/*": "./src/mdx-components/$1"
   },
   "eslintConfig": {
     "extends": "@silverhand/react"
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx
new file mode 100644
index 000000000..88c6d82aa
--- /dev/null
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx
@@ -0,0 +1,273 @@
+import Step from '@mdx/components/Step';
+import Tabs from '@mdx/components/Tabs';
+import TabItem from '@mdx/components/TabItem';
+
+<Step
+  title="Install SDK"
+  subtitle="Install Logto Android SDK with Gradle"
+  index={0}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(1)}
+>
+
+### Prerequisite
+* Minimal Android SDK: Level 24 (TBD)
+
+<Tabs>
+
+<TabItem value="kotlin" label="Kotlin">
+
+```kotlin
+dependencies {
+    implementation("io.logto.sdk:android:1.0.0")
+}
+```
+
+</TabItem>
+
+<TabItem value="groovy" label="Groovy">
+
+```groovy
+dependencies {
+    implementation 'io.logto.sdk:android:1.0.0'
+}
+```
+
+</TabItem>
+
+</Tabs>
+
+</Step>
+
+<Step
+  title="Configure"
+  subtitle="Configure your application and LogtoClient"
+  index={1}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(2)}
+>
+
+### Configure Redirect URI
+
+The `Redirect URI` indicates the endpoint that the application used to receive authorization results, which is implemented by the Logto Android SDK internally.
+
+### Configure Redirect URI in Admin Console
+
+Add the following value to Redirect URIs on the application settings page.
+
+```bash
+$(LOGTO_REDIRECT_SCHEME)://$(YOUR_APP_PACKAGE)/callback
+```
+
+Notes: 
+- `LOGTO_REDIRECT_SCHEME` should be a custom scheme in the reverse domain format.
+- Replace `$(LOGTO_REDIRECT_SCHEME)` with your own settings.
+
+e.g. `io.logto.android://io.logto.sample/callback`
+
+### Configure Logto Android SDK
+
+<Tabs>
+
+<TabItem value="kotlin" label="Kotlin">
+
+```kotlin
+import io.logto.sdk.android.LogtoClient
+import io.logto.sdk.android.type.LogtoConfig
+
+class MainActivity : AppCompatActivity() {
+    val logtoConfig = LogtoConfig(
+        endpoint = "<your-logto-endpoint>",
+        appId = "<your-app-id>",
+        scopes = null,
+        resources = null,
+        usingPersistStorage = true,
+    )
+
+    val logtoClient = LogtoClient(logtoConfig, application)
+}
+```
+
+</TabItem>
+
+<TabItem value="java" label="Java">
+
+```java
+import io.logto.sdk.android.LogtoClient;
+import io.logto.sdk.android.type.LogtoConfig;
+
+public class MainActivity extends AppCompatActivity {
+    private LogtoClient logtoClient;
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_main);
+
+        LogtoConfig logtoConfig = new LogtoConfig(
+            "<your-logto-endpoint>",
+            "<your-app-id>",
+            null,
+            null,
+            true
+        );
+
+        logtoClient = new LogtoClient(logtoConfig, getApplication());
+    }
+}
+```
+
+</TabItem>
+
+</Tabs>
+
+Notes: 
+
+- `<your-logto-endpoint>` is the logto service running in your machine. If you start logto service in `http://localhost:300` then `<your-logto-endpoint` will be `http://localhost:300`
+- `<your-app-id>` is the Application ID of your application, which is created in the Admin Console.
+
+</Step>
+
+<Step
+  title="Sign In"
+  subtitle="Sin In to your application by Logto and do some extra works"
+  index={2}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(3)}
+>
+
+### Perform a signing-in action
+
+<Tabs>
+
+<TabItem value="kotlin" label="Kotlin">
+
+```kotlin
+logtoClient.signInWithBrowser(
+    this,
+    "io.logto.android://io.logto.sample/callback",
+) { logtoException: LogtoException? ->
+    // custom logic
+}
+```
+
+</TabItem>
+
+<TabItem value="java" label="Java">
+
+```java
+logtoClient.signInWithBrowser(
+    this,
+    "io.logto.android://io.logto.sample/callback",
+    logtoException -> {
+        // custom logic
+    }
+);
+```
+
+</TabItem>
+
+</Tabs>
+
+### Implement your business logic after signing-in.
+
+<Tabs>
+
+<TabItem value="kotlin" label="Kotlin">
+
+```kotlin
+logtoClient.getAccessToken { logtoException: LogtoException?, result: AccessToken? ->
+    // custom logic
+}
+
+logtoClient.getIdTokenClaims { logtoException: LogtoException?, result: IdTokenCliams? ->
+    // custom logic
+}
+
+logtoClient.fetchUserInfo { logtoException: LogtoException?, userInfoResponse: UserInfoResponse? ->
+    // custom logic
+}
+```
+
+</TabItem>
+
+<TabItem value="java" label="Java">
+
+```java
+logtoClient.getAccessToken((logtoException, accessToken) -> {
+    // custom logic
+});
+
+logtoClient.getIdTokenClaims((logtoException, idTokenClaims) -> {
+    // custom logic
+});
+
+logtoClient.fetchUserInfo((logtoException, userInfoResponse) -> {
+    // custom logic
+});
+```
+
+</TabItem>
+
+</Tabs>
+
+</Step>
+
+<Step
+  title="Sign Out"
+  index={3}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(4)}
+>
+
+### Perform a signing-out action
+
+<Tabs>
+
+<TabItem value="kotlin" label="Kotlin">
+
+```kotlin
+logtoClient.signOut { logtoException: LogtoException? ->
+    // custom logic
+}
+```
+
+</TabItem>
+
+<TabItem value="java" label="Java">
+
+```java
+logtoClient.signOut(logtoException -> {
+    // custom logic
+});
+```
+
+</TabItem>
+
+</Tabs>
+
+Notes:
+
+- `signOut` will always clear local credentials even if errors occurred.
+
+</Step>
+
+<Step
+  title="Further Readings"
+  subtitle="3 steps"
+  index={4}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  buttonText="general.done"
+  buttonHtmlType="submit"
+>
+
+- Fetch User Info
+- Configure Social Sign-In
+- Access Protected API Resources
+
+</Step>
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx
new file mode 100644
index 000000000..24807d7f4
--- /dev/null
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx
@@ -0,0 +1,190 @@
+import MultiTextInputField from '@mdx/components/MultiTextInputField';
+import Step from '@mdx/components/Step';
+import Tabs from '@mdx/components/Tabs';
+import TabItem from '@mdx/components/TabItem';
+
+<Step
+  title="Install SDK"
+  subtitle="Please select your favorite package manager"
+  index={0}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(1)}
+>
+<Tabs>
+<TabItem value="npm" label="npm">
+
+```bash
+npm i @logto/react
+```
+
+</TabItem>
+<TabItem value="yarn" label="Yarn">
+
+```bash
+yarn add @logto/react
+```
+
+</TabItem>
+<TabItem value="pnpm" label="pnpm">
+
+```bash
+pnpm add @logto/react
+```
+
+</TabItem>
+<TabItem value="script" label="script">
+
+```html
+<script src="https://logto.io/js/logto-sdk-react/0.1.0/logto-sdk-react.production.js" />
+```
+
+</TabItem>
+<TabItem value="git" label="Git">
+
+```bash
+git clone https://github.com/logto-io/js.git
+pnpm build
+```
+
+</TabItem>
+</Tabs>
+</Step>
+<Step
+  title="Initiate LogtoClient"
+  subtitle="1 step"
+  index={1}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(2)}
+>
+
+Add the following code to your main html file. You may need client ID and authorization domain.
+
+```typescript
+import { LogtoProvider, LogtoConfig } from '@logto/react';
+import React from 'react';
+
+//...
+
+const App = () => {
+  const config: LogtoConfig = { clientId: 'foo', endpoint: 'https://your-endpoint-domain.com' };
+
+  return (
+    <BrowserRouter>
+      <LogtoProvider config={config}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/callback" element={<Callback />} />
+          <Route
+            path="/protected-resource"
+            element={
+              <RequireAuth>
+                <ProtectedResource />
+              </RequireAuth>
+            }
+          />
+        </Routes>
+      </LogtoProvider>
+    </BrowserRouter>
+  );
+};
+```
+
+</Step>
+<Step
+  title="Sign In"
+  subtitle="2 steps"
+  index={2}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(3)}
+>
+
+### Setup your login
+
+The Logto React SDK provides you tools and hooks to quickly implement your own authorization flow. First, let’s enter your redirect URI
+
+<MultiTextInputField name="redirectUris" title="Redirect URI" onError={() => props.onError(2)} />
+
+Add the following code to your web app
+
+```typescript
+import React from 'react';
+import { useLogto } from '@logto/react';
+
+const SignInButton = () => {
+  const { signIn } = useLogto();
+  const redirectUrl = window.location.origin + '/callback';
+
+  return <button onClick={() => signIn(redirectUrl)}>Sign In</button>;
+};
+
+export default SignInButton;
+```
+
+### Retrieve Auth Status
+
+```typescript
+import React from "react";
+import { useLogto } from '@logto/react';
+
+const App = () => {
+  const { isAuthenticated, signIn } = useLogto();
+
+  if !(isAuthenticated) {
+    return <SignInButton />
+  }
+
+  return <>
+    <AppContent />
+    <SignOutButton />
+  </>
+};
+```
+
+</Step>
+<Step
+  title="Sign Out"
+  subtitle="1 step"
+  index={3}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(4)}
+>
+
+Execute signOut() methods will redirect users to the Logto sign out page. After a success sign out, all use session data and auth status will be cleared.
+
+<MultiTextInputField name="postLogoutRedirectUris" title="Post sign out redirect URI" onError={() => props.onError(3)} />
+
+Add the following code to your web app
+
+```typescript
+import React from 'react';
+import { useLogto } from '@logto/react';
+
+const SignOutButton = () => {
+  const { signOut } = useLogto();
+
+  return <button onClick={() => signOut(window.location.origin)}>Sign out</button>;
+};
+
+export default SignOutButton;
+```
+
+</Step>
+<Step
+  title="Further Readings"
+  subtitle="3 steps"
+  index={4}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  buttonText="general.done"
+  buttonHtmlType="submit"
+>
+
+- [SDK Documentation](https://link-url-here.org)
+- [OIDC Documentation](https://link-url-here.org)
+- [Calling API to fetch accessToken](https://link-url-here.org)
+
+</Step>
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx
new file mode 100644
index 000000000..c1fdf17eb
--- /dev/null
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx
@@ -0,0 +1,190 @@
+import MultiTextInputField from '@mdx/components/MultiTextInputField';
+import Step from '@mdx/components/Step';
+import Tabs from '@mdx/components/Tabs';
+import TabItem from '@mdx/components/TabItem';
+
+<Step
+  title="安装 SDK"
+  subtitle="选择您熟悉的安装方式"
+  index={0}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(1)}
+>
+<Tabs>
+<TabItem value="npm" label="npm">
+
+```bash
+npm i @logto/react
+```
+
+</TabItem>
+<TabItem value="yarn" label="Yarn">
+
+```bash
+yarn add @logto/react
+```
+
+</TabItem>
+<TabItem value="pnpm" label="pnpm">
+
+```bash
+pnpm add @logto/react
+```
+
+</TabItem>
+<TabItem value="script" label="script">
+
+```html
+<script src="https://logto.io/js/logto-sdk-react/0.1.0/logto-sdk-react.production.js" />
+```
+
+</TabItem>
+<TabItem value="git" label="Git">
+
+```bash
+git clone https://github.com/logto-io/js.git
+pnpm build
+```
+
+</TabItem>
+</Tabs>
+</Step>
+<Step
+  title="Initiate LogtoClient"
+  subtitle="1 step"
+  index={1}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(2)}
+>
+
+在项目的 html 文件中，加入如下代码（需提前准备好 client ID 以及 authorization domain）
+Add the following code to your main html file. You may need client ID and authorization domain.
+
+```typescript
+import { LogtoProvider, LogtoConfig } from '@logto/react';
+import React from 'react';
+
+//...
+
+const App = () => {
+  const config: LogtoConfig = { clientId: 'foo', endpoint: 'https://your-endpoint-domain.com' };
+
+  return (
+    <BrowserRouter>
+      <LogtoProvider config={config}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/callback" element={<Callback />} />
+          <Route
+            path="/protected-resource"
+            element={
+              <RequireAuth>
+                <ProtectedResource />
+              </RequireAuth>
+            }
+          />
+        </Routes>
+      </LogtoProvider>
+    </BrowserRouter>
+  );
+};
+```
+
+</Step>
+<Step
+  title="Sign In"
+  subtitle="2 steps"
+  index={2}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(3)}
+>
+
+### Setup your login
+
+The Logto React SDK provides you tools and hooks to quickly implement your own authorization flow. First, let’s enter your redirect URI
+
+<MultiTextInputField name="redirectUris" title="Redirect URI" onError={() => props.onError(2)} />
+
+Add the following code to your web app
+
+```typescript
+import React from 'react';
+import { useLogto } from '@logto/react';
+
+const SignInButton = () => {
+  const { signIn } = useLogto();
+  const redirectUrl = window.location.origin + '/callback';
+
+  return <button onClick={() => signIn(redirectUrl)}>Sign In</button>;
+};
+
+export default SignInButton;
+```
+
+### Retrieve Auth Status
+
+```typescript
+import React from "react";
+import { useLogto } from '@logto/react';
+
+const App = () => {
+  const { isAuthenticated, signIn } = useLogto();
+
+  if !(isAuthenticated) {
+    return <SignInButton />
+  }
+
+  return <>
+    <AppContent />
+    <SignOutButton />
+  </>
+};
+```
+
+</Step>
+<Step
+  title="Sign Out"
+  subtitle="1 step"
+  index={3}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(4)}
+>
+
+Execute signOut() methods will redirect users to the Logto sign out page. After a success sign out, all use session data and auth status will be cleared.
+
+<MultiTextInputField name="postLogoutRedirectUris" title="Post sign out redirect URI" onError={() => props.onError(3)} />
+
+Add the following code to your web app
+
+```typescript
+import React from 'react';
+import { useLogto } from '@logto/react';
+
+const SignOutButton = () => {
+  const { signOut } = useLogto();
+
+  return <button onClick={() => signOut(window.location.origin)}>Sign out</button>;
+};
+
+export default SignOutButton;
+```
+
+</Step>
+<Step
+  title="Further Readings"
+  subtitle="3 steps"
+  index={4}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  buttonHtmlType="submit"
+>
+
+- [SDK Documentation](https://link-url-here.org)
+- [OIDC Documentation](https://link-url-here.org)
+- [Calling API to fetch accessToken](https://link-url-here.org)
+
+</Step>
diff --git a/packages/console/src/pages/Guide/components/MultiTextInputField/index.tsx b/packages/console/src/mdx-components/MultiTextInputField/index.tsx
similarity index 100%
rename from packages/console/src/pages/Guide/components/MultiTextInputField/index.tsx
rename to packages/console/src/mdx-components/MultiTextInputField/index.tsx
diff --git a/packages/console/src/pages/Guide/components/Step/index.module.scss b/packages/console/src/mdx-components/Step/index.module.scss
similarity index 100%
rename from packages/console/src/pages/Guide/components/Step/index.module.scss
rename to packages/console/src/mdx-components/Step/index.module.scss
diff --git a/packages/console/src/pages/Guide/components/Step/index.tsx b/packages/console/src/mdx-components/Step/index.tsx
similarity index 100%
rename from packages/console/src/pages/Guide/components/Step/index.tsx
rename to packages/console/src/mdx-components/Step/index.tsx
diff --git a/packages/console/src/pages/Connectors/components/GuideModal/index.tsx b/packages/console/src/pages/Connectors/components/GuideModal/index.tsx
index 89430e1f4..16a4346d4 100644
--- a/packages/console/src/pages/Connectors/components/GuideModal/index.tsx
+++ b/packages/console/src/pages/Connectors/components/GuideModal/index.tsx
@@ -15,8 +15,8 @@ import IconButton from '@/components/IconButton';
 import Spacer from '@/components/Spacer';
 import useApi from '@/hooks/use-api';
 import Close from '@/icons/Close';
+import Step from '@/mdx-components/Step';
 import SenderTester from '@/pages/ConnectorDetails/components/SenderTester';
-import Step from '@/pages/Guide/components/Step';
 import * as modalStyles from '@/scss/modal.module.scss';
 import { GuideForm } from '@/types/guide';
 
diff --git a/packages/console/src/pages/Guide/index.tsx b/packages/console/src/pages/Guide/index.tsx
index 67a7746be..0066812f5 100644
--- a/packages/console/src/pages/Guide/index.tsx
+++ b/packages/console/src/pages/Guide/index.tsx
@@ -27,12 +27,7 @@ import * as styles from './index.module.scss';
 
 const Guides: Record<string, LazyExoticComponent<(props: MDXProps) => JSX.Element>> = {
   react: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/react.mdx')),
-  'react_zh-cn': lazy(
-    async () =>
-      import(
-        '@/assets/i18n/zh-cn/docusaurus-plugin-content-docs/current/tutorial/integrate-sdk/react.mdx'
-      )
-  ),
+  'react_zh-cn': lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx')),
 };
 
 type Props = PropsWithChildren<{
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index abf47cf0f..178b62e5b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -456,7 +456,6 @@ importers:
       '@types/react-dom': ^17.0.9
       '@types/react-modal': ^3.13.1
       classnames: ^2.3.1
-      copyfiles: ^2.4.1
       csstype: ^3.0.11
       dayjs: ^1.10.5
       dnd-core: ^16.0.0
@@ -510,7 +509,6 @@ importers:
       '@types/react-dom': 17.0.11
       '@types/react-modal': 3.13.1
       classnames: 2.3.1
-      copyfiles: 2.4.1
       csstype: 3.0.11
       dayjs: 1.10.7
       dnd-core: 16.0.0