(Draft) Design Library

CHANGELOG.md

@@ -28,6 +28,10 @@
 - [Flutter] Poligon Node support with XImage (svg)
 - [Lint] Primal naming & grouping linting for better code export quality. this is tracked sperately on [lint](https://github.com/bridgedxyz/lint)
 
+## [2022.4.1.0] - 2022-04-30
+
+- New feature: Design Library
+
 ## [2022.4.0.3] - 2022-04-29
 
 - New feature : Publish as website

app/lib/main/index.tsx

@@ -14,6 +14,7 @@ import { ButtonMakerScreen } from "@app/button-maker";
 import { LayoutViewScreen } from "../pages/layout-view";
 import { ComponentViewScreen } from "@app/component-manage";
 import { LintScreen } from "@app/design-lint";
+import { DesignLibraryScreen } from "@app/design-library";
 import { PreviewScreen } from "@app/design-preview";
 import { IconsScreen } from "@app/icons-loader";
 import { MetaEditorScreen, BatchMetaEditor } from "@app/meta-editor";
@@ -66,6 +67,8 @@ function Screen(props: { screen: WorkScreen }) {
       return <LayoutViewScreen />;
     case WorkScreen.preview:
       return <PreviewScreen />;
+    case WorkScreen.library:
+      return <DesignLibraryScreen />;
     case WorkScreen.icon:
       return <IconsScreen />;
     case WorkScreen.lint:

app/lib/routing/layout-preference.ts

@@ -20,6 +20,7 @@ export function getWorkmodeTabLayout(workspaceMode: WorkMode): TabLayout {
           WorkScreen.preview,
           WorkScreen.icon,
           WorkScreen.layout,
+          WorkScreen.library,
           WorkScreen.lint,
         ];
       case WorkMode.content:
@@ -57,6 +58,8 @@ export function workScreenToName(appMode: WorkScreen): string {
       return "live";
     case WorkScreen.layout:
       return "layout";
+    case WorkScreen.library:
+      return "library";
     case WorkScreen.preview:
       return "preview";
     case WorkScreen.tool_home:

app/lib/routing/pages.ts

@@ -52,6 +52,12 @@ const page_design_layout: PageConfig = {
   path: "/design/layout",
 };
 
+const page_design_library: PageConfig = {
+  id: WorkScreen.library,
+  title: "Library",
+  path: "/design/library",
+};
+
 const page_design_preview: PageConfig = {
   id: WorkScreen.preview,
   title: "Preview",
@@ -133,6 +139,7 @@ const all_pages: PageConfig[] = [
   page_design_lint,
   page_design_preview,
   page_design_layout,
+  page_design_library,
   page_design_icon,
   page_code_layout,
   page_code_preview,

app/lib/routing/release-visibility-preference.ts

@@ -12,6 +12,7 @@ const SCREEN_VISIBILITY_PREFERENCE: Map<WorkScreen, ReleaseChannel> = new Map([
   [WorkScreen.about, "release"],
   [WorkScreen.component, "beta"],
   [WorkScreen.layout, "beta"],
+  [WorkScreen.library, "beta"],
   [WorkScreen.icon, "release"],
   [WorkScreen.preview, "release"],
   [WorkScreen.live, "beta"],

app/lib/routing/work-screen.ts

@@ -9,6 +9,7 @@ export enum WorkScreen {
   component = "component",
   preview = "preview",
   layout = "layout",
+  library = "library",
   icon = "icon",
   live = "live",
   lint = "lint",

packages/app-design-library/components/smart-preview.tsx

@@ -0,0 +1,6 @@
+import { Preview } from "@ui/previewer";
+import React from "react";
+
+export function SmartPreview() {
+  return <Preview auto type="static" />;
+}

packages/app-design-library/config/index.tsx

@@ -0,0 +1,135 @@
+import React from "react";
+
+export type Categroy =
+  | "interface"
+  | "layout"
+  | "basics"
+  | "media"
+  | "seo"
+  | "utils";
+import { keys } from "@code-features/flags";
+// import type { CameraDisplayFlag } from "@code-features/flags";
+
+export interface LibraryItem {
+  id: string;
+  name: string;
+  description: string | React.ReactElement;
+  category: Categroy;
+  fields?: {
+    [key: string]: {
+      placeholder?: string;
+      required?: boolean;
+      initial?: string;
+      type: "string";
+    };
+  };
+}
+
+const config: { [key: string]: LibraryItem } = {
+  // basics
+  [keys.flag_key__as_button]: {
+    id: keys.flag_key__as_button,
+    name: "Button",
+    category: "basics",
+    description: "Specifies the button",
+  },
+  [keys.flag_key__as_checkbox]: {
+    id: keys.flag_key__as_checkbox,
+    name: "Check box",
+    category: "basics",
+    description: "checkbox",
+  },
+  [keys.flag_key__as_input]: {
+    id: keys.flag_key__as_input,
+    name: "Input",
+    category: "basics",
+    description: "text input",
+  },
+  [keys.flag_key__as_slider]: {
+    id: keys.flag_key__as_slider,
+    name: "Slider",
+    category: "basics",
+    description: "slider",
+  },
+  [keys.flag_key__as_progress]: {
+    id: keys.flag_key__as_progress,
+    name: "Linear Progress",
+    category: "basics",
+    description: "linear progress bar",
+  },
+  // media
+  [keys.flag_key__camera]: {
+    id: keys.flag_key__camera,
+    name: "Camera view",
+    category: "media",
+    description: (
+      <p>
+        Specifies the view to stream the primary camera stream.{" "}
+        <i>(Preview will not work in Assistant due to security reasons)</i>
+      </p>
+    ),
+    fields: {
+      camera: {
+        initial: undefined,
+        placeholder: "Front / Back",
+        type: "string",
+      },
+    },
+  },
+  [keys.flag_key__x_google_maps_view]: {
+    id: keys.flag_key__x_google_maps_view,
+    name: "Google Maps",
+    category: "media",
+    description: <p>google maps view</p>,
+    fields: {
+      location: {
+        required: true,
+        initial: "San Francisco",
+        placeholder: "San Francisco",
+        type: "string",
+      },
+    },
+  },
+  [keys.flag_key__x_youtube_view]: {
+    id: keys.flag_key__x_youtube_view,
+    name: "Youtube Video",
+    category: "media",
+    description: <p>Embed a youtube video</p>,
+    fields: {
+      video: {
+        required: true,
+        initial: "LOZuxwVk7TU",
+        placeholder: "youtube.com/watch?v=XXXXXXXXXX",
+        type: "string",
+      },
+    },
+  },
+  // utils
+  [keys.flag_key__autofocus]: {
+    id: keys.flag_key__autofocus,
+    name: "Auto focus",
+    category: "utils",
+    description: "Set autofocus property",
+  },
+  // seo
+  [keys.flag_key__as_h1]: {
+    id: keys.flag_key__as_h1,
+    name: "Heading 1",
+    category: "seo",
+    description: "Set heading 1 tag",
+  },
+  [keys.flag_key__as_h2]: {
+    id: keys.flag_key__as_h2,
+    name: "Heading 2",
+    category: "seo",
+    description: "Set heading 2 tag",
+  },
+  [keys.flag_key__as_h3]: {
+    id: keys.flag_key__as_h3,
+    name: "Heading 3",
+    category: "seo",
+    description: "Set heading 3 tag",
+  },
+};
+
+export default config;

packages/app-design-library/index.ts

@@ -0,0 +1 @@
+export { DesignLibraryScreen } from "./screen";

packages/app-design-library/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@app/design-library",
+  "description": "design library (load components, add properties)",
+  "authors": "Grida.co",
+  "version": "0.0.0",
+  "private": false,
+  "dependencies": {}
+}