Skip to content

Commit 9c1ecf0

Browse files
Merge pull request #128 from gridaco/staging
March Release #3 - Interactive components support (Input, Button, Slider)
2 parents 7c6ea0c + 673e923 commit 9c1ecf0

File tree

75 files changed

+2208
-258
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+2208
-258
lines changed

editor/components/app-runner/vanilla-app-runner.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export function VanillaRunner({
4343
if (ref.current && enableInspector) {
4444
ref.current.onload = () => {
4545
const matches = ref.current.contentDocument.querySelectorAll(
46-
"div, span, button, img, image, svg"
46+
"div, span, img, image, svg" // button, input - disabled due to interaction testing (for users)
4747
);
4848
matches.forEach((el) => {
4949
const tint = "rgba(20, 0, 255, 0.2)";
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from "react";
2+
import Head from "next/head";
3+
import { useEditorState } from "core/states";
4+
5+
export function EditorBrowserMetaHead({
6+
children,
7+
}: {
8+
children: React.ReactChild;
9+
}) {
10+
const [state] = useEditorState();
11+
12+
return (
13+
<>
14+
<Head>
15+
<title>
16+
{state?.design?.name ? `Grida | ${state?.design?.name}` : "Loading.."}
17+
</title>
18+
</Head>
19+
{children}
20+
</>
21+
);
22+
}

editor/components/editor/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * from "./editor-appbar";
2+
export * from "./editor-browser-meta-head";
23
export * from "./editor-layer-hierarchy";
34
export * from "./editor-sidebar";

editor/core/reducers/editor-reducer.ts

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,14 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
1616
console.info("cleard console by editorReducer#select-node");
1717

1818
// update router
19-
router.query.node = node ?? state.selectedPage;
20-
router.push(router);
19+
router.push(
20+
{
21+
pathname: router.pathname,
22+
query: { ...router.query, node: node ?? state.selectedPage },
23+
},
24+
undefined,
25+
{}
26+
);
2127

2228
return produce(state, (draft) => {
2329
const _canvas_state_store = new CanvasStateStore(
@@ -42,8 +48,14 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
4248
console.info("cleard console by editorReducer#select-page");
4349

4450
// update router
45-
router.query.node = page;
46-
router.push(router);
51+
router.push(
52+
{
53+
pathname: router.pathname,
54+
query: { ...router.query, node: page },
55+
},
56+
undefined,
57+
{}
58+
);
4759

4860
return produce(state, (draft) => {
4961
const _canvas_state_store = new CanvasStateStore(filekey, page);

editor/core/states/editor-state.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@ export interface EditorSnapshot {
2424
}
2525

2626
export interface FigmaReflectRepository {
27+
/**
28+
* name of the file
29+
*/
30+
name: string;
31+
2732
/**
2833
* fileid; filekey
2934
*/

editor/pages/files/[key]/index.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useDesignFile } from "hooks";
88

99
import { warmup } from "scaffolds/editor";
1010
import { FileResponse } from "@design-sdk/figma-remote-types";
11+
import { EditorBrowserMetaHead } from "components/editor";
1112

1213
export default function FileEntryEditor() {
1314
const router = useRouter();
@@ -64,6 +65,7 @@ export default function FileEntryEditor() {
6465
selectedPage: warmup.selectedPage(prevstate, pages, nodeid && [nodeid]),
6566
selectedLayersOnPreview: [],
6667
design: {
68+
name: file.name,
6769
input: null,
6870
components: components,
6971
// styles: null,
@@ -131,7 +133,9 @@ export default function FileEntryEditor() {
131133
<SigninToContinueBannerPrmoptProvider>
132134
<StateProvider state={safe_value} dispatch={handleDispatch}>
133135
<EditorDefaultProviders>
134-
<Editor loading={loading} />
136+
<EditorBrowserMetaHead>
137+
<Editor loading={loading} />
138+
</EditorBrowserMetaHead>
135139
</EditorDefaultProviders>
136140
</StateProvider>
137141
</SigninToContinueBannerPrmoptProvider>

editor/pages/files/index.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useEffect, useState } from "react";
2+
import Head from "next/head";
23
import { DefaultEditorWorkspaceLayout } from "layouts/default-editor-workspace-layout";
34
import {
45
Cards,
@@ -19,6 +20,9 @@ export default function FilesPage() {
1920

2021
return (
2122
<>
23+
<Head>
24+
<title>Grida | files</title>
25+
</Head>
2226
<DefaultEditorWorkspaceLayout
2327
backgroundColor={colors.color_editor_bg_on_dark}
2428
leftbar={<HomeSidebar />}

editor/pages/index.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,22 @@
1+
import React from "react";
2+
import Head from "next/head";
3+
14
import { HomeInput } from "scaffolds/home-input";
25
import { HomeDashboard } from "scaffolds/home-dashboard";
3-
import React from "react";
46
import { useAuthState } from "hooks/use-auth-state";
57

68
export default function Home() {
79
const authstate = useAuthState();
810

911
// region - dev injected
10-
return <HomeDashboard />;
12+
return (
13+
<>
14+
<Head>
15+
<title>Grida | Home</title>
16+
</Head>
17+
<HomeDashboard />
18+
</>
19+
);
1120
// endregion
1221

1322
switch (authstate) {

editor/scaffolds/editor/warmup.ts

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,11 @@ import {
77
import { createInitialWorkspaceState } from "core/states";
88
import { workspaceReducer } from "core/reducers";
99
import { PendingState } from "core/utility-types";
10-
import { DesignInput } from "@designto/config/input";
11-
import { TargetNodeConfig } from "query/target-node";
1210
import { WorkspaceAction } from "core/actions";
1311
import { FileResponse } from "@design-sdk/figma-remote-types";
1412
import { convert } from "@design-sdk/figma-node-conversion";
1513
import { mapper } from "@design-sdk/figma-remote";
16-
import { find, visit } from "tree-visit";
14+
import { visit } from "tree-visit";
1715

1816
const pending_workspace_state = createPendingWorkspaceState();
1917
//
@@ -98,24 +96,6 @@ export function componentsFrom(
9896
.reduce(tomap, {});
9997
}
10098

101-
export function initializeDesign(design: TargetNodeConfig): EditorSnapshot {
102-
return {
103-
selectedNodes: [design.node],
104-
selectedLayersOnPreview: [],
105-
selectedPage: null,
106-
design: {
107-
pages: [],
108-
components: null,
109-
// styles: null,
110-
key: design.file,
111-
input: DesignInput.fromApiResponse({
112-
...design,
113-
entry: design.reflect,
114-
}),
115-
},
116-
};
117-
}
118-
11999
export function safestate(initialState) {
120100
return initialState.type === "success"
121101
? initialState.value

0 commit comments

Comments
 (0)