feat: weave buttons

spacemakerai · Nov 3, 2023 · 4509957 · 4509957
1 parent a75fd41
commit 4509957
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 90 deletions.
diff --git a/analyses/dynamo/index.html b/analyses/dynamo/index.html
@@ -1,6 +1,15 @@
 <!doctype html>
 <html lang="en" xmlns="http://www.w3.org/1999/html">
  <head>
+ <link
+ rel="stylesheet"
+ href="https://app.autodeskforma.eu/design-system/v2/forma/styles/base.css"
+ />
+ <link rel="stylesheet" href="./src/styles.css"/>
+ <script
+ type="module"
+ src="https://app.autodeskforma.eu/design-system/v2/weave/components/button/weave-button.js"
+ ></script>
  <title>Dynamo Player</title>
  </head>
  <body>

diff --git a/analyses/dynamo/src/floatingpanel/app.tsx b/analyses/dynamo/src/floatingpanel/app.tsx
@@ -56,7 +56,7 @@ function ScriptList({ setScript, dynamoHandler }: any) {
  });
  localStorage.setItem("dynamo-folder", folder);
  const localPrograms = Object.fromEntries(
- localFiles.map((file: any) => [file.name, file])
+ localFiles.map((file: any) => [file.name, file]),
  );
  setPrograms(localPrograms);
  } catch (e) {
@@ -84,24 +84,16 @@ function ScriptList({ setScript, dynamoHandler }: any) {
  }}
  />
  </div>
- <button
- style={{
- cursor: "pointer",
- boxShadow: "none",
- color: "white",
- padding: "5px",
- border: "1px solid gray",
- backgroundColor: "var(--text-active)",
- }}
- onClick={reload}
- >
+ <weave-button variant="solid" onClick={reload}>
  Load
- </button>
+ </weave-button>
  </div>
  {error && (
  <div style={{ color: "red" }}>
  {error}
- <button onClick={reload}>Retry</button>
+ <weave-button variant="outlined" onClick={reload}>
+ Retry
+ </weave-button>
  </div>
  )}
  {folder && (
@@ -125,7 +117,7 @@ export function App() {
  const [script, setScript] = useState(undefined);
  if (dynamoState === "CONNECTED") {
  return (
- <>
+ <div style={{ padding: "0 2px" }}>
  {!script && (
  <ScriptList dynamoHandler={dynamoHandler} setScript={setScript} />
  )}
@@ -136,7 +128,7 @@ export function App() {
  setScript={setScript}
  />
  )}
- </>
+ </div>
  );
  }
  return <StatusBlock dynamoState={dynamoState} />;

diff --git a/analyses/dynamo/src/floatingpanel/pages/LocalScript.tsx b/analyses/dynamo/src/floatingpanel/pages/LocalScript.tsx
@@ -290,23 +290,14 @@ export function LocalScript({ script, setScript, dynamoHandler }: any) {
  activeSelectionNode={activeSelectionNode}
  setActiveSelectionNode={setActiveSelectionNode}
  />
- <button
- style={{
- width: "100%",
- backgroundColor: "#0696D7",
- border: "none",
- borderRadius: "2px",
- height: "24px",
- color: "white",
- padding: "4px, 12px, 4px, 12px",
- cursor: "pointer",
- }}
+ <weave-button
+ style={{ width: "100%", margin: "10px 0" }}
+ variant="solid"
  disabled={output.type === "running"}
  onClick={onRun}
  >
  Run
- </button>
-
+ </weave-button>
  <DynamoOutput output={output} />
  </div>
  )}

diff --git a/analyses/dynamo/src/floatingpanel/pages/components/DynamoInput.tsx b/analyses/dynamo/src/floatingpanel/pages/components/DynamoInput.tsx
@@ -1,6 +1,5 @@
 import { isSelect } from "../../utils/node";
 
-
 function DynamoInputComponent({
  input,
  value,
@@ -16,15 +15,28 @@ function DynamoInputComponent({
  return (
  <div>
  {value}
- <button onClick={() => setValue(input.id, "selected")}>select</button>
+ <weave-button
+ variant="outlined"
+ onClick={() => setValue(input.id, "selected")}
+ >
+ Select
+ </weave-button>
  </div>
  );
  } else if (isSelect(input)) {
  return (
- <div>
- {value && <span>{value.length} Selected</span>}
- <button onClick={() => setActiveSelectionNode({id: input.id, name: input.name})}>Select</button>
- </div>
+ <div>
+ {value && <span>{value.length} Selected</span>}
+ <weave-button
+ style={{ marginLeft: "5px" }}
+ variant="outlined"
+ onClick={() =>
+ setActiveSelectionNode({ id: input.id, name: input.name })
+ }
+ >
+ Select
+ </weave-button>
+ </div>
  );
  } else if (input.type === "StringInput") {
  return (
@@ -132,7 +144,12 @@ type Input = {
  };
 };
 
-export function DynamoInput({ code, state, setValue, setActiveSelectionNode }: any) {
+export function DynamoInput({
+ code,
+ state,
+ setValue,
+ setActiveSelectionNode,
+}: any) {
  return (code?.inputs || []).map((input: Input) => (
  <div
  style={{

diff --git a/analyses/dynamo/src/floatingpanel/pages/components/DynamoOutput.tsx b/analyses/dynamo/src/floatingpanel/pages/components/DynamoOutput.tsx
@@ -60,21 +60,9 @@ function DynamoOutputWatch3D({ output }: { output: Output }) {
  }}
  >
  <span>{output.name}</span>
-
- <button
- style={{
- height: "24px",
- borderRadius: "2px",
- border: "1px solid " + (shouldShow ? "black" : "gray"),
- backgroundColor: "white",
- padding: "4px 12px",
- cursor: "pointer",
- }}
- disabled={!shouldShow}
- onClick={add}
- >
+ <weave-button variant="outlined" disabled={!shouldShow} onClick={add}>
  Add
- </button>
+ </weave-button>
  <Visibility
  onClick={() => setShouldShow(!shouldShow)}
  isVisible={shouldShow}
@@ -111,10 +99,10 @@ export function DynamoOutput({ output }: any) {
  const outputs = (output.data?.info?.outputs || []) as Output[];
 
  return (
- <div>
+ <>
  {outputs.map((output) => (
  <DynamoOutputComponent output={output} />
  ))}
- </div>
+ </>
  );
 }
diff --git a/analyses/dynamo/src/floatingpanel/pages/components/NotTrustedGraph.tsx b/analyses/dynamo/src/floatingpanel/pages/components/NotTrustedGraph.tsx
@@ -14,7 +14,9 @@ export function NotTrustedGraph({ script, reload, dynamoHandler }: any) {
  return (
  <div>
  Location of script is not trusted.
- <button onClick={trust}>Trust location</button>
+ <weave-button variant="solid" onClick={trust}>
+ Trust location
+ </weave-button>
  </div>
  );
 }
diff --git a/analyses/dynamo/src/floatingpanel/pages/components/SelectMode.tsx b/analyses/dynamo/src/floatingpanel/pages/components/SelectMode.tsx
@@ -22,10 +22,6 @@ export function SelectMode({
  setValue,
 }: any) {
  const selection = useCurrentSelection();
-
- const [hoverConfirm, setHoverConfirm] = useState(false);
- const [hoverCancel, setHoverCancel] = useState(false);
-
  const onClickConfirm = async () => {
  setValue(activeSelectionNode.id, selection);
  setActiveSelectionNode(undefined);
@@ -52,42 +48,17 @@ export function SelectMode({
  </div>
 
  <div style={{ display: "flex", justifyContent: "end", padding: "6px" }}>
- <button
- onMouseEnter={() => setHoverCancel(true)}
- onMouseLeave={() => setHoverCancel(false)}
- style={{
- lineHeight: "16px",
- backgroundColor: "white",
- padding: "4px 12px",
- cursor: "pointer",
- color: "#006EAF",
- borderRadius: "2px",
- border: `1px solid ${hoverCancel ? "black" : "white"}`,
- marginRight: "8px",
- fontWeight: "600",
- fontSize: "12px",
- }}
- onClick={onClickCancel}
- >
+ <weave-button variant="flat" onClick={onClickCancel}>
  Cancel
- </button>
- <button
- onMouseEnter={() => setHoverConfirm(true)}
- onMouseLeave={() => setHoverConfirm(false)}
- style={{
- lineHeight: "16px",
- borderRadius: "2px",
- border: `1px solid ${hoverConfirm ? "black" : "#BFBFBF"}`,
- backgroundColor: "white",
- padding: "4px 12px",
- cursor: "pointer",
- fontWeight: "600",
- fontSize: "12px",
- }}
+ </weave-button>
+ <weave-button
+ style={{ marginLeft: "10px" }}
+ variant="outlined"
+ density="high"
  onClick={onClickConfirm}
  >
  Confirm selection
- </button>
+ </weave-button>
  </div>
  </div>
  );

diff --git a/analyses/dynamo/src/lib/preact.d.ts b/analyses/dynamo/src/lib/preact.d.ts
@@ -0,0 +1 @@
+import JSX = preact.JSX;
diff --git a/analyses/dynamo/src/lib/weave.d.ts b/analyses/dynamo/src/lib/weave.d.ts
@@ -0,0 +1,12 @@
+export declare module "preact/src/jsx" {
+ namespace JSXInternal {
+ interface IntrinsicElements {
+ "weave-button": JSX.HTMLAttributes<HTMLElement> & {
+ type?: "button" | "submit" | "reset";
+ variant?: "outlined" | "flat" | "solid";
+ density?: "high" | "medium";
+ iconposition?: "left" | "right";
+ };
+ }
+ }
+}
diff --git a/analyses/dynamo/tsconfig.json b/analyses/dynamo/tsconfig.json
@@ -7,7 +7,7 @@
  "skipLibCheck": true,
 
  /* Bundler mode */
- "moduleResolution": "bundler",
+ "moduleResolution": "node",
  "allowImportingTsExtensions": true,
  "resolveJsonModule": true,
  "isolatedModules": true,