extract some preference pages with register method to be managed externally

Author: softmarshmallow

editor-packages/editor-preferences/core/action.ts

@@ -1,12 +1,14 @@
+import React from "react";
 import type { PreferenceState } from "./state";
-import type { Subset } from "./types";
+import type { PreferencePageProps, Subset } from "./types";
 type Preference = PreferenceState["config"];
 
 export type Action =
   | PreferenceSetRouteAction
   | OpenPreferenceAction
   | ClosePreferenceAction
-  | ConfigurationAction;
+  | ConfigurationAction
+  | RegisterPreferenceAction;
 
 export type ActionType = PreferenceSetRouteAction["type"];
 
@@ -28,3 +30,11 @@ export type ConfigurationAction = {
   type: "configure";
   update: Subset<Preference>;
 };
+
+export type RegisterPreferenceAction = {
+  type: "register";
+  route: string;
+  name: string;
+  icon?: string;
+  renderer: React.FC<PreferencePageProps>;
+};

editor-packages/editor-preferences/core/state.ts

@@ -1,9 +1,12 @@
-import type { PreferenceRouteInfo } from "./types";
+import type { PreferencePageProps, PreferenceRouteInfo } from "./types";
 import type { FrameworkConfig } from "@grida/builder-config";
 export interface PreferenceState {
   open: boolean;
   route: string;
   routes: PreferenceRouteInfo[];
+  renderers: {
+    [key: string]: React.FC<PreferencePageProps>;
+  };
   config: {
     /**
      * @beta

editor-packages/editor-preferences/core/types.ts

@@ -7,7 +7,7 @@ export type Dispatcher = (action: Action) => void;
 export type PreferenceRouteInfo = {
   route: string;
   name: string;
-  hidden?: boolean;
+  icon?: string;
 };
 
 export interface PreferencePageProps {

editor-packages/editor-preferences/editor-preference.tsx

@@ -1,7 +1,7 @@
 import React, { useReducer, useMemo, useCallback } from "react";
 import styled from "@emotion/styled";
 import { EditorPreferenceTree } from "./editor-preference-tree";
-import routes from "./k/routes";
+import initial_routes from "./k/routes";
 import type { Action, Dispatcher, PreferenceState } from "./core";
 import { reducer } from "./reducers";
 import { Router } from "./router";
@@ -55,8 +55,9 @@ export function EditorPreference({ children }: React.PropsWithChildren<{}>) {
 
   const [state, dispatch] = useReducer(reducer, {
     open: false,
-    route: "general",
-    routes: routes,
+    route: "/editor",
+    routes: initial_routes,
+    renderers: {},
     config: pref,
   });
 
@@ -78,7 +79,7 @@ export function EditorPreference({ children }: React.PropsWithChildren<{}>) {
 
 function Preferences() {
   const state = usePreferences();
-  const { route } = state;
+  const { route, renderers } = state;
 
   const dispatch = useDispatch();
 
@@ -103,7 +104,7 @@ function Preferences() {
             textTransform={"capitalize"}
           />
         </ContentHeader>
-        <Router />
+        <Router customRenderers={renderers} />
       </Content>
     </Page>
   );

editor-packages/editor-preferences/index.ts

@@ -5,3 +5,6 @@ export {
   useOpenPreferences,
   useClosePreferences,
 } from "./editor-preference";
+export { TextField, HelpPanel } from "./components";
+export * from "./layouts";
+export type { PreferencePageProps } from "./core/types";

editor-packages/editor-preferences/k/routes.ts

@@ -1,6 +1,6 @@
 import type { PreferenceRouteInfo } from "../core";
 
-const routes: PreferenceRouteInfo[] = [
+const initial_routes: PreferenceRouteInfo[] = [
   // {
   //   route: "/general",
   //   name: "General",
@@ -17,14 +17,6 @@ const routes: PreferenceRouteInfo[] = [
     route: "/framework",
     name: "Framework Profile",
   },
-  {
-    route: "/figma",
-    name: "Figma",
-  },
-  {
-    route: "/figma/personal-access-token",
-    name: "Personal Access Tokens",
-  },
 ];
 
-export default routes;
+export default initial_routes;

editor-packages/editor-preferences/pages/editor.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "@emotion/styled";
 import { PageContentLayout } from "../layouts";
 import { CanvasModeSelectItem } from "../components";
-import { PreferencePageProps } from "core";
+import { PreferencePageProps } from "../core";
 
 export function EditorPreferencePage({ dispatch, state }: PreferencePageProps) {
   const { renderer } = state.config.canvas;

editor-packages/editor-preferences/pages/figma/index.tsx

@@ -0,0 +1,59 @@
+# `@code-editor/preferences`
+
+Preferences management for the editor.
+
+## Usage
+
+Setup Provider - Place the `EditorPreferences` on the top of the preference consumer tree.
+
+```tsx
+import React from "react";
+import { EditorPreferences  } from "@code-editor/preferences";
+
+export MyApp(){
+  return(
+    <EditorPreferences>
+      <Editor/>
+    </EditorPreferences>
+  );
+}
+```
+
+Registering a preference page (that does not actually contribute to the preferences)
+
+```tsx
+import React from "react";
+import Preferences, { PreferencesPageProps } from "@code-editor/preferences";
+import { useProfile } from "some-other-provider";
+
+const router = Preferences.router("/user");
+
+router.route(
+  "/my-profile",
+  (p) => {
+    return <MyProfilePageOnPreferences {...p} />;
+  },
+  {
+    title: "My Profile",
+    icon: "user",
+  }
+);
+
+function MyProfilePageOnPreferences(p: PreferencesPageProps) {
+  const profile = useProfile();
+  return <div>{profile.name}</div>;
+}
+```
+
+Registering a preference
+
+```ts
+import { addPreference } from "@code-editor/preferences";
+import schema from "custom-preference-schema.json";
+
+addPreference(schema);
+```
+
+```json
+// todo
+```

editor-packages/editor-preferences/readme.md

@@ -5,6 +5,7 @@ import type {
   PreferenceState,
   ConfigurationAction,
   Subset,
+  RegisterPreferenceAction,
 } from "../core";
 import { PreferencesStore } from "../store";
 
@@ -52,6 +53,22 @@ export function reducer(
         config,
       };
     }
+    case "register": {
+      const {
+        route,
+        name,
+        renderer: pageRenderer,
+        icon,
+      } = <RegisterPreferenceAction>action;
+      const { routes } = state;
+      const new_routes = [...routes, { route, name, icon }];
+      const new_renderers = { ...state.renderers, [route]: pageRenderer };
+      return {
+        ...state,
+        routes: new_routes,
+        renderers: new_renderers,
+      };
+    }
   }
   return state;
 }