diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7deecba2..52aaea1e 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx
index 25d6b043..a0ad60d6 100644
--- a/app/lib/main/index.tsx
+++ b/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 ;
case WorkScreen.preview:
return ;
+ case WorkScreen.library:
+ return ;
case WorkScreen.icon:
return ;
case WorkScreen.lint:
diff --git a/app/lib/routing/layout-preference.ts b/app/lib/routing/layout-preference.ts
index 19d13929..5f357f3f 100644
--- a/app/lib/routing/layout-preference.ts
+++ b/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:
diff --git a/app/lib/routing/pages.ts b/app/lib/routing/pages.ts
index d0eebd52..291aee76 100644
--- a/app/lib/routing/pages.ts
+++ b/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,
diff --git a/app/lib/routing/release-visibility-preference.ts b/app/lib/routing/release-visibility-preference.ts
index 821e084a..ef9030b3 100644
--- a/app/lib/routing/release-visibility-preference.ts
+++ b/app/lib/routing/release-visibility-preference.ts
@@ -12,6 +12,7 @@ const SCREEN_VISIBILITY_PREFERENCE: Map = new Map([
[WorkScreen.about, "release"],
[WorkScreen.component, "beta"],
[WorkScreen.layout, "beta"],
+ [WorkScreen.library, "beta"],
[WorkScreen.icon, "release"],
[WorkScreen.preview, "release"],
[WorkScreen.live, "beta"],
diff --git a/app/lib/routing/work-screen.ts b/app/lib/routing/work-screen.ts
index 85ed16ca..a9a2be34 100644
--- a/app/lib/routing/work-screen.ts
+++ b/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",
diff --git a/packages/app-design-library/components/index.ts b/packages/app-design-library/components/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/app-design-library/components/smart-preview.tsx b/packages/app-design-library/components/smart-preview.tsx
new file mode 100644
index 00000000..8e3bc88c
--- /dev/null
+++ b/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 ;
+}
diff --git a/packages/app-design-library/config/index.tsx b/packages/app-design-library/config/index.tsx
new file mode 100644
index 00000000..5566c4a4
--- /dev/null
+++ b/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: (
+
+ Specifies the view to stream the primary camera stream.{" "}
+ (Preview will not work in Assistant due to security reasons)
+
+ ),
+ 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: google maps view
,
+ 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: Embed a youtube video
,
+ 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;
diff --git a/packages/app-design-library/core/index.ts b/packages/app-design-library/core/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/app-design-library/index.ts b/packages/app-design-library/index.ts
new file mode 100644
index 00000000..8a11d8c9
--- /dev/null
+++ b/packages/app-design-library/index.ts
@@ -0,0 +1 @@
+export { DesignLibraryScreen } from "./screen";
diff --git a/packages/app-design-library/package.json b/packages/app-design-library/package.json
new file mode 100644
index 00000000..3dd545f8
--- /dev/null
+++ b/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": {}
+}
\ No newline at end of file
diff --git a/packages/app-design-library/screen.tsx b/packages/app-design-library/screen.tsx
new file mode 100644
index 00000000..a42accf5
--- /dev/null
+++ b/packages/app-design-library/screen.tsx
@@ -0,0 +1,248 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { SmartPreview } from "./components/smart-preview";
+import AddIcon from "@material-ui/icons/Add";
+import RemoveIcon from "@material-ui/icons/Remove";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import { useSingleSelection } from "plugin-app";
+import { parseFromName } from "@design-sdk/flags";
+import config from "./config";
+import { PluginSdk } from "@plugin-sdk/app";
+
+export function DesignLibraryScreen() {
+ const selection = useSingleSelection();
+ const usedFlags = selection ? parseFromName(selection.node.name) : {};
+ const currentId = "x-youtube-view";
+ const current = config[currentId];
+ const value = usedFlags[currentId];
+
+ return (
+ <>
+
+ {
+ const name = await PluginSdk.getNodeName(selection.id);
+ const newname = name + "++";
+ PluginSdk.renameNode(selection.id, newname);
+ PluginSdk.notify("✅ applied");
+ }}
+ onRemove={() => {}}
+ onChange={() => {
+ // const name = await PluginSdk.getNodeName(selection.id);
+ // const newname = name + "++";
+ // PluginSdk.renameNode(selection.id, newname);
+ }}
+ fields={current.fields}
+ />
+
+ );
+}
+
+export function Container({
+ name,
+ description,
+ fields = {},
+ onAdd,
+ onChange,
+ onRemove,
+ disabled,
+ mode,
+ errorMessage,
+}: {
+ name: string;
+ description: string | React.ReactElement;
+ mode: "add" | "edit";
+ disabled?: boolean;
+ onAdd?: () => void;
+ onRemove?: () => void;
+ onChange?: (key: string, value: string) => void;
+ fields?: {
+ [key: string]: {
+ placeholder?: string;
+ initial?: string;
+ type: "string";
+ };
+ };
+ errorMessage?: string;
+}) {
+ const _icon_style = {
+ fontSize: 24,
+ };
+
+ return (
+
+
+
+ {errorMessage ? {errorMessage} : <>}
+
+ {name}
+ {mode === "add" ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+ {description}
+
+ {Object.keys(fields).map((key) => {
+ const field = fields[key];
+ return (
+ {
+ onChange?.(key, e.target.value);
+ }}
+ />
+ );
+ })}
+
+
+ );
+}
+
+const ErrorMessage = styled.span`
+ color: rgba(255, 0, 0, 0.8);
+ text-overflow: ellipsis;
+ font-size: 12px;
+ font-family: "Helvetica Neue", sans-serif;
+ font-weight: 400;
+ text-align: left;
+`;
+
+const IconButton = styled.button`
+ cursor: pointer;
+ border: none;
+ background: none;
+
+ &:hover {
+ background: rgba(221, 221, 221, 0.2);
+ }
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+`;
+
+const RootWrapperContainer = styled.div`
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ align-items: flex-start;
+ flex: 1;
+ align-self: stretch;
+ background-color: white;
+ box-sizing: border-box;
+ padding: 24px 16px;
+ flex-shrink: 0;
+`;
+
+const Contents = styled.div`
+ display: flex;
+ justify-content: flex-start;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 24px;
+ align-self: stretch;
+ box-sizing: border-box;
+ flex-shrink: 0;
+`;
+
+const NameAndDescriptions = styled.div`
+ display: flex;
+ justify-content: flex-start;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ align-self: stretch;
+ box-sizing: border-box;
+ flex-shrink: 0;
+`;
+
+const NameAndControl = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ align-self: stretch;
+ box-sizing: border-box;
+ flex-shrink: 0;
+`;
+
+const Name = styled.span`
+ color: black;
+ flex: 1;
+ text-overflow: ellipsis;
+ font-size: 21px;
+ font-family: "Helvetica Neue", sans-serif;
+ font-weight: 700;
+ text-align: left;
+`;
+
+const Description = styled.span`
+ color: rgb(155, 155, 155);
+ text-overflow: ellipsis;
+ font-size: 14px;
+ font-family: "Helvetica Neue", sans-serif;
+ font-weight: 400;
+ text-align: left;
+ align-self: stretch;
+ flex-shrink: 0;
+`;
+
+const TextFieldOneLine = styled.input`
+ outline: none;
+ border: 1px solid transparent;
+ position: relative;
+ align-self: stretch;
+ flex-shrink: 0;
+ background-color: rgb(251, 251, 251);
+ border-radius: 4px;
+ padding: 14px 18px;
+
+ text-overflow: ellipsis;
+ font-size: 13px;
+ font-family: Roboto, sans-serif;
+ font-weight: 400;
+ text-align: left;
+ color: black;
+
+ ::placeholder {
+ color: rgb(163, 163, 163);
+ }
+
+ &:hover {
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ }
+
+ &:focus {
+ border: 1px solid rgba(0, 0, 0, 0.5);
+ }
+`;
+
+// const Text = styled.span`
+// color: rgb(19, 19, 19);
+// text-overflow: ellipsis;
+// font-size: 16px;
+// font-family: "Helvetica Neue", sans-serif;
+// font-weight: 500;
+// text-align: center;
+// `;
diff --git a/packages/app-live-session/pages/main.tsx b/packages/app-live-session/pages/main.tsx
index 752e9b61..c58b4a74 100644
--- a/packages/app-live-session/pages/main.tsx
+++ b/packages/app-live-session/pages/main.tsx
@@ -74,7 +74,7 @@ export function LiveSessionPage() {
useEffect(() => {
if (session && session.entered && selection) {
switch (selection.type) {
- case SelectionType.single: {
+ case "single": {
session.emmitSelect({
event: "select",
selectionType: selection.type,
diff --git a/packages/design-sdk b/packages/design-sdk
index 0ecc068f..843ff445 160000
--- a/packages/design-sdk
+++ b/packages/design-sdk
@@ -1 +1 @@
-Subproject commit 0ecc068f7399d31ccb99d98fbfc0e56e72717385
+Subproject commit 843ff44554f37de8122a83aecad11d3c08a389a8
diff --git a/packages/plugin-app/plugin-hooks/use-selection.ts b/packages/plugin-app/plugin-hooks/use-selection.ts
index 2efee302..9f9fb068 100644
--- a/packages/plugin-app/plugin-hooks/use-selection.ts
+++ b/packages/plugin-app/plugin-hooks/use-selection.ts
@@ -5,26 +5,21 @@ import {
} from "@design-sdk/figma-node";
import { detectIf } from "@reflect-ui/detection";
-export enum SelectionType {
- "single", // updated with single selection
- "multi", // updated with multi selection
- "none", // nothing was selected - but not recognized as cancel (when it was none before)
- "cancel", // Deselection
-}
+export type SelectionType = SelectionData["type"];
interface SingleSelectionData {
- type: SelectionType.single;
+ type: "single";
node: IReflectNodeReference;
id: string;
}
interface MultiSelectionData {
- type: SelectionType.multi;
+ type: "multi";
nodes: IReflectNodeReference[];
}
interface NoneSelectionData {
- type: SelectionType.none;
+ type: "none";
}
type SelectionData =
@@ -56,7 +51,7 @@ export function useSelection(): SelectionData | undefined {
function handleSelectionChange(node) {
if (Array.isArray(node)) {
setselectednode({
- type: SelectionType.multi,
+ type: "multi",
nodes: node,
});
} else {
@@ -65,19 +60,19 @@ export function useSelection(): SelectionData | undefined {
// do not trigger selection change when same node is selected.
// to trigger selection change on same node, user should unselect and select again.
selectednode &&
- selectednode.type == SelectionType.single &&
+ selectednode.type == "single" &&
node.id == selectednode.id
) {
return;
}
setselectednode({
- type: SelectionType.single,
+ type: "single",
node: node,
id: node.id,
});
} else {
setselectednode({
- type: SelectionType.none,
+ type: "none",
});
}
}
@@ -111,7 +106,7 @@ export function useSingleSelection(): SingleSelectionData | undefined {
const selection = useSelection();
useEffect(() => {
if (selection) {
- if (selection.type == SelectionType.single) {
+ if (selection.type == "single") {
setSingle(selection);
}
}
@@ -125,7 +120,7 @@ export function usePairSelection(): _PairSelectionEvent {
const selection = useSelection();
useEffect(() => {
if (selection) {
- if (selection.type == SelectionType.multi) {
+ if (selection.type == "multi") {
if (selection.nodes.length == 2) {
setPair({
first: selection.nodes[0],
@@ -147,13 +142,12 @@ export function usePairSelection(): _PairSelectionEvent {
* @returns
*/
export function useRangeSelection(min: number, max: number) {
- const [rangedSelections, setRangedSelections] = useState(
- null
- );
+ const [rangedSelections, setRangedSelections] =
+ useState(null);
const selection = useSelection();
useEffect(() => {
if (selection) {
- if (selection.type == SelectionType.multi) {
+ if (selection.type == "multi") {
if (selection.nodes.length >= min && selection.nodes.length < max) {
setRangedSelections(selection);
}
@@ -177,7 +171,7 @@ interface SelectionNodeMeta {
meta: {
type: ScaffoldMetaNodeType;
};
- type: SelectionType.single;
+ type: "single";
node: IReflectNodeReference;
id: string;
}
@@ -187,9 +181,8 @@ export function useSingleSelectionWithMeta() {
const selection = useSingleSelection();
const { node } = selection;
- let type_in_meta: ScaffoldMetaNodeType = _reflect_scene_node_type__to__scaffold_meta_node_type(
- node
- );
+ let type_in_meta: ScaffoldMetaNodeType =
+ _reflect_scene_node_type__to__scaffold_meta_node_type(node);
return {
meta: { type: type_in_meta },
@@ -218,8 +211,9 @@ function _reflect_scene_node_type__to__scaffold_meta_node_type(
case ReflectSceneNodeType.instance:
return "component-like";
case ReflectSceneNodeType.frame:
- const _detection_result_if_screen = detectIf.screen(node as any)
- .result; /** TODO: remove `as any` */
+ const _detection_result_if_screen = detectIf.screen(
+ node as any
+ ).result; /** TODO: remove `as any` */
if (_detection_result_if_screen) {
return "screen";
diff --git a/packages/plugin-sdk-app/node-api.ts b/packages/plugin-sdk-app/node-api.ts
index 6667f818..69cfd350 100644
--- a/packages/plugin-sdk-app/node-api.ts
+++ b/packages/plugin-sdk-app/node-api.ts
@@ -2,6 +2,9 @@ import { PluginSdk } from "./plugin-sdk";
import {
PLUGIN_SDK_NS_GET_NODE,
PLUGIN_SDK_EK_REQUEST_GET_NODE_BY_ID,
+ PLUGIN_SDK_EK_REQUEST_RENAME,
+ PLUGIN_SDK_NS_NODE,
+ PLUGIN_SDK_EK_REQUEST_NAME,
} from "@plugin-sdk/core";
export class NodeApi {
constructor(private readonly id: string) {}
@@ -22,6 +25,24 @@ export class NodeApi {
});
}
+ async getName() {
+ return (
+ await PluginSdk.request<{ name: string }>({
+ namespace: PLUGIN_SDK_NS_NODE,
+ key: PLUGIN_SDK_EK_REQUEST_NAME,
+ data: { id: this.id, name: name },
+ })
+ ).name;
+ }
+
+ async rename(name: string) {
+ return await PluginSdk.request({
+ namespace: PLUGIN_SDK_NS_NODE,
+ key: PLUGIN_SDK_EK_REQUEST_RENAME,
+ data: { id: this.id, name: name },
+ });
+ }
+
async resize(p: {
width: number;
height: number;
diff --git a/packages/plugin-sdk-app/plugin-sdk.ts b/packages/plugin-sdk-app/plugin-sdk.ts
index 1c136bf5..9f790880 100644
--- a/packages/plugin-sdk-app/plugin-sdk.ts
+++ b/packages/plugin-sdk-app/plugin-sdk.ts
@@ -38,6 +38,7 @@ import {
target_platform,
TargetPlatform,
UIControlRequest,
+ RenameNodeRequest,
} from "@plugin-sdk/core";
import type { ReflectSceneNode } from "@design-sdk/figma-node";
import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant";
@@ -120,10 +121,18 @@ export class PluginSdk {
return new NodeApi(id).get();
}
+ static async getNodeName(id: string) {
+ return await new NodeApi(id).getName();
+ }
+
static node(id: string): NodeApi {
return new NodeApi(id);
}
+ static renameNode(id: string, name: string) {
+ return new NodeApi(id).rename(name);
+ }
+
static async getNodeImage(
req: ImageExportRequest
): Promise {
diff --git a/packages/plugin-sdk-core/events.ts b/packages/plugin-sdk-core/events.ts
index e501def2..d5eabbef 100644
--- a/packages/plugin-sdk-core/events.ts
+++ b/packages/plugin-sdk-core/events.ts
@@ -47,6 +47,11 @@ export const PLUGIN_SDK_EK_REQUEST_RESIZE_NODE_BY_ID =
"assistant/node/resize/by-id";
export const PLUGIN_SDK_EK_REQUEST_REMOVE_NODE_BY_ID =
"assistant/node/remove/by-id";
+export const PLUGIN_SDK_EK_REQUEST_RENAME = "assistant/node/rename";
+/**
+ * get name request
+ */
+export const PLUGIN_SDK_EK_REQUEST_NAME = "assistant/node/name";
// endregion node access
// region storage
diff --git a/packages/plugin-sdk-core/interfaces/index.ts b/packages/plugin-sdk-core/interfaces/index.ts
index 36d3ba21..c57183c5 100644
--- a/packages/plugin-sdk-core/interfaces/index.ts
+++ b/packages/plugin-sdk-core/interfaces/index.ts
@@ -6,3 +6,7 @@ export * from "./remote-api";
export * from "./storage";
export * from "./focus";
export * from "./uicontrol";
+export * from "./rename";
+
+import type { RenameNodeRequest } from "./rename";
+export type NodeEditRequest = RenameNodeRequest;
diff --git a/packages/plugin-sdk-core/interfaces/rename/index.ts b/packages/plugin-sdk-core/interfaces/rename/index.ts
new file mode 100644
index 00000000..b92cfea3
--- /dev/null
+++ b/packages/plugin-sdk-core/interfaces/rename/index.ts
@@ -0,0 +1 @@
+export * from "./rename.requests";
diff --git a/packages/plugin-sdk-core/interfaces/rename/rename.requests.ts b/packages/plugin-sdk-core/interfaces/rename/rename.requests.ts
new file mode 100644
index 00000000..46243296
--- /dev/null
+++ b/packages/plugin-sdk-core/interfaces/rename/rename.requests.ts
@@ -0,0 +1,4 @@
+export interface RenameNodeRequest {
+ id: string;
+ name: string;
+}
diff --git a/packages/plugin-sdk-service/index.ts b/packages/plugin-sdk-service/index.ts
index 8d09670a..bf60025b 100644
--- a/packages/plugin-sdk-service/index.ts
+++ b/packages/plugin-sdk-service/index.ts
@@ -15,6 +15,8 @@ import {
__PLUGIN_SDK_NAMESPACE_BASE_TOKEN,
PLUGIN_SDK_NS_APP_REQUEST_CUSTOM_ALL,
PLUGIN_SDK_NS_DRAG_AND_DROP,
+ PLUGIN_SDK_NS_NODE,
+ PLUGIN_SDK_EK_REQUEST_RENAME,
PLUGIN_SDK_NS_META_API,
PLUGIN_SDK_NS_NOTIFY_API,
PLUGIN_SDK_NS_REMOTE_API,
@@ -47,6 +49,8 @@ import {
MetaRequest,
makeExportSetting,
UIControlRequest,
+ NodeEditRequest,
+ PLUGIN_SDK_EK_REQUEST_NAME,
} from "@plugin-sdk/core";
import {
@@ -164,6 +168,11 @@ export class PluginSdkService {
handleGetNodeEvent(handerProps);
}
+ // node
+ else if (event.namespace == PLUGIN_SDK_NS_NODE) {
+ handleNodeEditEvent(handerProps);
+ }
+
// storage
else if (event.namespace == PLUGIN_SDK_NS_STORAGE) {
handleStorageEvent(handerProps);
@@ -382,6 +391,24 @@ function handleGetNodeEvent(props: HanderProps<{ id: string }>) {
}
}
+function handleNodeEditEvent(props: HanderProps) {
+ switch (props.key) {
+ case PLUGIN_SDK_EK_REQUEST_RENAME: {
+ const node = figma.getNodeById(props.data.id);
+ node.name = props.data.name;
+ return response(props.id, {
+ name: node.name,
+ });
+ }
+ case PLUGIN_SDK_EK_REQUEST_NAME: {
+ const node = figma.getNodeById(props.data.id);
+ return response(props.id, {
+ name: node.name,
+ });
+ }
+ }
+}
+
function handleFocus(props: HanderProps) {
if (props.key == PLUGIN_SDK_EK_SIMPLE_FOCUS) {
switch (target_platform.get()) {
@@ -411,9 +438,9 @@ async function handleExportEvent(event: HanderProps) {
return undefined;
}
case TargetPlatform.figma: {
- const r = await (figma.getNodeById(
- event.data.id
- ) as SceneNode).exportAsync({
+ const r = await (
+ figma.getNodeById(event.data.id) as SceneNode
+ ).exportAsync({
...makeExportSetting(event.data.opt),
});
@@ -460,14 +487,8 @@ async function handleBrowserApiEvent(props: TransportPluginEvent) {
function handleDragDropped(props: HanderProps) {
console.log("handling drop event", props.data);
- const {
- dropPosition,
- windowSize,
- offset,
- itemSize,
- eventKey,
- customData,
- } = props.data;
+ const { dropPosition, windowSize, offset, itemSize, eventKey, customData } =
+ props.data;
// Getting the position and size of the visible area of the canvas.
const bounds = figma.viewport.bounds;
diff --git a/packages/ui-core/button-style/index.ts b/packages/ui-core/button-style/index.ts
index 6eb12446..51379634 100644
--- a/packages/ui-core/button-style/index.ts
+++ b/packages/ui-core/button-style/index.ts
@@ -6,7 +6,7 @@ export const ButtonStyle = css`
/* margin-left: 5px !important; */
height: 48px;
font-size: 16px;
- font-weight: bold;
+ font-weight: 500;
border-radius: 4px;
box-sizing: border-box;
padding-top: 14px;
@@ -41,7 +41,7 @@ export const BlackButtonStyle = css`
export const TextButtonBase = css`
${ButtonStyle}
- border: 0;
+ border: none;
color: #151617;
background: transparent;
&:hover {
diff --git a/packages/ui-previewer/preview-static-snapshot/index.tsx b/packages/ui-previewer/preview-static-snapshot/index.tsx
index 7c7e4111..2a1c34f6 100644
--- a/packages/ui-previewer/preview-static-snapshot/index.tsx
+++ b/packages/ui-previewer/preview-static-snapshot/index.tsx
@@ -72,8 +72,8 @@ export function StaticPreview(props: StaticPreviewProps) {
return (