Skip to content

Commit 9c1ecf0

Browse files
softmarshmallowsoftmarshmallow
authored
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)";

‎editor/components/editor/editor-browser-meta-head/index.tsx

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

‎externals/coli

‎externals/design-sdk

‎externals/reflect-core

‎packages/builder-css-styles/border/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ export function border(border: Border): CSSProperties {
3333
}
3434

3535
export function borderSide(borderSide: BorderSide): CSSProperty.Border {
36+
if (borderSide.style === "none") {
37+
return "none";
38+
}
39+
3640
return `${borderSide.style ?? "solid"} ${px(borderSide.width)} ${color(
3741
borderSide.color
3842
)}`;

‎packages/builder-css-styles/color/index.ts

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ export function color(input: CssColorInputLike | Color): string {
1919
} else if (input instanceof CssNamedColor) {
2020
return input.name;
2121
} else if (typeof input == "object") {
22-
// with alpha
23-
if ("r" in input && "a" in input) {
22+
// with alpha (if alpha is 1, use rgb format instead)
23+
if ("r" in input && "a" in input && input.a !== 1) {
2424
const a = safe_alpha_fallback(validAlphaValue(input.a));
2525
const rgba = input as ICssRGBA;
2626
const _r = validColorValue(rgba.r) ?? 0;
@@ -31,6 +31,11 @@ export function color(input: CssColorInputLike | Color): string {
3131
// no alpha
3232
else if ("r" in input && "a"! in input) {
3333
const rgb = input as RGB;
34+
const named = namedcolor(rgb);
35+
if (named) {
36+
return named;
37+
}
38+
3439
return `rgb(${validColorValue(rgb.r) ?? 0}, ${
3540
validColorValue(rgb.g) ?? 0
3641
}, ${validColorValue(rgb.b) ?? 0})`;
@@ -42,6 +47,29 @@ export function color(input: CssColorInputLike | Color): string {
4247
}
4348
}
4449

50+
/**
51+
* rgb value of white, black as named colors
52+
* @param rgb
53+
*/
54+
const namedcolor = (rgb: RGB) => {
55+
// black
56+
if (rgb.r === 0 && rgb.g === 0 && rgb.b === 0) {
57+
return "black";
58+
}
59+
// white
60+
if (rgb.r === 1 && rgb.g === 1 && rgb.b === 1) {
61+
return "white";
62+
}
63+
// blue
64+
if (rgb.r === 0 && rgb.g === 0 && rgb.b === 1) {
65+
return "blue";
66+
}
67+
// red
68+
if (rgb.r === 1 && rgb.g === 0 && rgb.b === 0) {
69+
return "red";
70+
}
71+
};
72+
4573
const validColorValue = (f: number) => {
4674
if (f === undefined) {
4775
return;

‎packages/builder-css-styles/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export * from "./font-weight";
99
export * from "./font-family";
1010
export * from "./text-decoration";
1111
export * from "./text-shadow";
12+
export * from "./text-transform";
1213
export * from "./gradient";
1314
export * from "./padding";
1415
export * from "./margin";

‎packages/builder-css-styles/padding/index.ts

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,13 @@ import { px } from "../dimensions";
88

99
type PaddingValue = number | "auto";
1010

11-
export function padding(p: EdgeInsets): CSSProperties {
12-
switch (edgeInsetsShorthandMode(p)) {
11+
export function padding(
12+
p: EdgeInsets,
13+
options?: {
14+
explicit?: boolean;
15+
}
16+
): CSSProperties {
17+
switch (edgeInsetsShorthandMode(p, options)) {
1318
case EdgeInsetsShorthandMode.empty: {
1419
return {};
1520
}
@@ -31,10 +36,10 @@ export function padding(p: EdgeInsets): CSSProperties {
3136
case EdgeInsetsShorthandMode.trbl:
3237
default: {
3338
return {
34-
"padding-bottom": _makeifRequired(p?.bottom),
35-
"padding-top": _makeifRequired(p?.top),
36-
"padding-left": _makeifRequired(p?.left),
37-
"padding-right": _makeifRequired(p?.right),
39+
"padding-bottom": _makeifRequired(p?.bottom, options?.explicit),
40+
"padding-top": _makeifRequired(p?.top, options?.explicit),
41+
"padding-left": _makeifRequired(p?.left, options?.explicit),
42+
"padding-right": _makeifRequired(p?.right, options?.explicit),
3843
};
3944
}
4045
}
@@ -55,8 +60,8 @@ function _pv(pv: PaddingValue) {
5560
return px(pv);
5661
}
5762

58-
function _makeifRequired(val: number): string | undefined {
59-
if (val && val > 0) {
63+
function _makeifRequired(val: number, explicit?: boolean): string | undefined {
64+
if (explicit || (val && val > 0)) {
6065
return px(val);
6166
}
6267
}

‎packages/builder-css-styles/text-shadow/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { color } from "../color";
33
import { px } from "../dimensions";
44

55
export function textShadow(ts: TextShadowManifest[]): string {
6-
if (ts.length === 0) {
6+
if (!ts || ts.length === 0) {
77
return;
88
}
99

‎packages/builder-css-styles/text-transform/index.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { TextTransform } from "@reflect-ui/core";
2+
3+
export function textTransform(tt: TextTransform) {
4+
switch (tt) {
5+
case TextTransform.capitalize:
6+
return "capitalize";
7+
case TextTransform.lowercase:
8+
return "lowercase";
9+
case TextTransform.uppercase:
10+
return "uppercase";
11+
case TextTransform.fullwidth:
12+
return "full-width";
13+
case TextTransform.fullsizekana:
14+
return "full-size-kana";
15+
case TextTransform.none:
16+
default:
17+
// for none, we don't explicitly set it - to make it shorter.
18+
return;
19+
}
20+
}

‎packages/builder-css-styles/tricks/trick-flex-sizing/index.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,16 @@ export function flexsizing({
3030
case MainAxisSize.max: {
3131
return {
3232
"align-self": "stretch",
33+
width: width && length(width),
34+
height: height && length(height),
3335
};
3436
}
3537
case MainAxisSize.min: {
3638
switch (direction) {
3739
case Axis.horizontal:
3840
case Axis.vertical:
3941
return {
40-
flex: "none",
42+
flex: flex > 0 ? flex : "none", // 1+
4143
width: width && length(width),
4244
height: height && length(height),
4345
};

‎packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
} from "@web-builder/react-core";
1212
import {
1313
buildJsx,
14-
getWidgetStylesConfigMap,
14+
StylesConfigMapBuilder,
1515
JSXWithoutStyleElementConfig,
1616
JSXWithStyleElementConfig,
1717
WidgetStyleConfigMap,
@@ -48,7 +48,8 @@ export class ReactNativeInlineStyleBuilder {
4848
private readonly widgetName: string;
4949
readonly config: reactnative_config.ReactNativeInlineStyleConfig;
5050
private readonly namer: ScopedVariableNamer;
51-
private readonly stylesConfigWidgetMap: WidgetStyleConfigMap;
51+
private readonly stylesMapper: StylesConfigMapBuilder;
52+
// private readonly stylesConfigWidgetMap: WidgetStyleConfigMap;
5253

5354
constructor({
5455
entry,
@@ -64,7 +65,8 @@ export class ReactNativeInlineStyleBuilder {
6465
entry.key.id,
6566
ReservedKeywordPlatformPresets.react
6667
);
67-
this.stylesConfigWidgetMap = getWidgetStylesConfigMap(entry, {
68+
69+
this.stylesMapper = new StylesConfigMapBuilder(entry, {
6870
namer: this.namer,
6971
rename_tag: false,
7072
});
@@ -73,7 +75,7 @@ export class ReactNativeInlineStyleBuilder {
7375
private stylesConfig(
7476
id: string
7577
): JSXWithStyleElementConfig | JSXWithoutStyleElementConfig {
76-
return this.stylesConfigWidgetMap.get(id);
78+
return this.stylesMapper.map.get(id);
7779
}
7880

7981
private jsxBuilder(widget: JsxWidget) {

0 commit comments

Comments
 (0)