From 41a3eb34daaaeffd76bd9f45c8e74bd6a90450ef Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Wed, 9 Oct 2024 13:28:36 -0700 Subject: [PATCH 01/19] [uma-bridge] Consolidate IconWithCircleBackground (#12761) GitOrigin-RevId: 425054ef5a5f13e550134ebf0c159e2747dd47dc --- apps/examples/nodejs-scripts/CHANGELOG.md | 9 ----- apps/examples/nodejs-scripts/package.json | 6 +-- apps/examples/oauth-app/CHANGELOG.md | 10 ----- apps/examples/oauth-app/package.json | 6 +-- .../remote-signing-server/CHANGELOG.md | 9 ----- .../remote-signing-server/package.json | 6 +-- .../streaming-wallet-extension/CHANGELOG.md | 11 ------ .../streaming-wallet-extension/package.json | 8 ++-- apps/examples/ui-test-app/CHANGELOG.md | 10 ----- apps/examples/ui-test-app/package.json | 6 +-- apps/examples/uma-vasp-cli/CHANGELOG.md | 9 ----- apps/examples/uma-vasp-cli/package.json | 6 +-- apps/examples/uma-vasp/CHANGELOG.md | 9 ----- apps/examples/uma-vasp/package.json | 6 +-- packages/core/CHANGELOG.md | 7 ---- packages/core/package.json | 2 +- packages/crypto-wasm/CHANGELOG.md | 8 ---- packages/crypto-wasm/package.json | 4 +- packages/lightspark-cli/CHANGELOG.md | 10 ----- packages/lightspark-cli/package.json | 8 ++-- packages/lightspark-sdk/CHANGELOG.md | 10 ----- packages/lightspark-sdk/package.json | 6 +-- packages/oauth/CHANGELOG.md | 9 ----- packages/oauth/package.json | 4 +- packages/ui/CHANGELOG.md | 11 ------ packages/ui/package.json | 4 +- .../components/IconWithCircleBackground.tsx | 38 +++++++++++++++++-- 27 files changed, 71 insertions(+), 161 deletions(-) diff --git a/apps/examples/nodejs-scripts/CHANGELOG.md b/apps/examples/nodejs-scripts/CHANGELOG.md index 8487643a..b80e6a17 100644 --- a/apps/examples/nodejs-scripts/CHANGELOG.md +++ b/apps/examples/nodejs-scripts/CHANGELOG.md @@ -1,14 +1,5 @@ # @lightsparkdev/nodejs-scripts -## 0.0.17 - -### Patch Changes - -- Updated dependencies [1a063b6] -- Updated dependencies [1a063b6] - - @lightsparkdev/core@1.2.4 - - @lightsparkdev/lightspark-sdk@1.8.6 - ## 0.0.16 ### Patch Changes diff --git a/apps/examples/nodejs-scripts/package.json b/apps/examples/nodejs-scripts/package.json index 895d4d07..32d3b813 100644 --- a/apps/examples/nodejs-scripts/package.json +++ b/apps/examples/nodejs-scripts/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/nodejs-scripts", - "version": "0.0.17", + "version": "0.0.16", "private": true, "description": "Example NodeJS scripts for Lightspark JS SDKs", "main": "index.js", @@ -33,8 +33,8 @@ "typescript": "^5.6.2" }, "dependencies": { - "@lightsparkdev/core": "1.2.4", - "@lightsparkdev/lightspark-sdk": "1.8.6", + "@lightsparkdev/core": "1.2.3", + "@lightsparkdev/lightspark-sdk": "1.8.5", "commander": "^11.0.0", "dayjs": "^1.11.7", "lodash-es": "^4.17.21" diff --git a/apps/examples/oauth-app/CHANGELOG.md b/apps/examples/oauth-app/CHANGELOG.md index 32cdc1d8..360c02cc 100644 --- a/apps/examples/oauth-app/CHANGELOG.md +++ b/apps/examples/oauth-app/CHANGELOG.md @@ -1,15 +1,5 @@ # @lightsparkdev/oauth-app -## 0.0.42 - -### Patch Changes - -- Updated dependencies [1a063b6] -- Updated dependencies [1a063b6] - - @lightsparkdev/ui@1.0.11 - - @lightsparkdev/lightspark-sdk@1.8.6 - - @lightsparkdev/oauth@0.1.49 - ## 0.0.41 ### Patch Changes diff --git a/apps/examples/oauth-app/package.json b/apps/examples/oauth-app/package.json index 56b76362..40c84f9f 100644 --- a/apps/examples/oauth-app/package.json +++ b/apps/examples/oauth-app/package.json @@ -1,14 +1,14 @@ { "name": "@lightsparkdev/oauth-app", - "version": "0.0.42", + "version": "0.0.41", "private": true, "dependencies": { "@emotion/css": "^11.11.0", "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", - "@lightsparkdev/lightspark-sdk": "1.8.6", + "@lightsparkdev/lightspark-sdk": "1.8.5", "@lightsparkdev/oauth": "*", - "@lightsparkdev/ui": "1.0.11", + "@lightsparkdev/ui": "1.0.10", "react": "^18.2.0", "react-dom": "^18.1.0", "react-router-dom": "6.11.2", diff --git a/apps/examples/remote-signing-server/CHANGELOG.md b/apps/examples/remote-signing-server/CHANGELOG.md index 0cf92912..544f6c3c 100644 --- a/apps/examples/remote-signing-server/CHANGELOG.md +++ b/apps/examples/remote-signing-server/CHANGELOG.md @@ -1,14 +1,5 @@ # @lightsparkdev/remote-signing-server -## 0.0.41 - -### Patch Changes - -- Updated dependencies [1a063b6] -- Updated dependencies [1a063b6] - - @lightsparkdev/core@1.2.4 - - @lightsparkdev/lightspark-sdk@1.8.6 - ## 0.0.40 ### Patch Changes diff --git a/apps/examples/remote-signing-server/package.json b/apps/examples/remote-signing-server/package.json index f10f22f4..9cc07b66 100644 --- a/apps/examples/remote-signing-server/package.json +++ b/apps/examples/remote-signing-server/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/remote-signing-server", - "version": "0.0.41", + "version": "0.0.40", "private": true, "type": "module", "scripts": { @@ -17,8 +17,8 @@ "types": "tsc" }, "dependencies": { - "@lightsparkdev/core": "1.2.4", - "@lightsparkdev/lightspark-sdk": "1.8.6", + "@lightsparkdev/core": "1.2.3", + "@lightsparkdev/lightspark-sdk": "1.8.5", "express": "^4.18.2" }, "devDependencies": { diff --git a/apps/examples/streaming-wallet-extension/CHANGELOG.md b/apps/examples/streaming-wallet-extension/CHANGELOG.md index 8d480f08..963ec2b7 100644 --- a/apps/examples/streaming-wallet-extension/CHANGELOG.md +++ b/apps/examples/streaming-wallet-extension/CHANGELOG.md @@ -1,16 +1,5 @@ # @lightsparkdev/streaming-wallet-extension -## 1.0.71 - -### Patch Changes - -- Updated dependencies [1a063b6] -- Updated dependencies [1a063b6] -- Updated dependencies [1a063b6] - - @lightsparkdev/ui@1.0.11 - - @lightsparkdev/core@1.2.4 - - @lightsparkdev/lightspark-sdk@1.8.6 - ## 1.0.70 ### Patch Changes diff --git a/apps/examples/streaming-wallet-extension/package.json b/apps/examples/streaming-wallet-extension/package.json index fc4d91f0..d809f90a 100644 --- a/apps/examples/streaming-wallet-extension/package.json +++ b/apps/examples/streaming-wallet-extension/package.json @@ -1,13 +1,13 @@ { "name": "@lightsparkdev/streaming-wallet-extension", - "version": "1.0.71", + "version": "1.0.70", "private": true, "dependencies": { "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", - "@lightsparkdev/core": "1.2.4", - "@lightsparkdev/lightspark-sdk": "1.8.6", - "@lightsparkdev/ui": "1.0.11", + "@lightsparkdev/core": "1.2.3", + "@lightsparkdev/lightspark-sdk": "1.8.5", + "@lightsparkdev/ui": "1.0.10", "eslint": "^8.3.0", "react": "^18.2.0", "react-dom": "^18.1.0", diff --git a/apps/examples/ui-test-app/CHANGELOG.md b/apps/examples/ui-test-app/CHANGELOG.md index 5e8a0088..7eeff7e0 100644 --- a/apps/examples/ui-test-app/CHANGELOG.md +++ b/apps/examples/ui-test-app/CHANGELOG.md @@ -1,15 +1,5 @@ # @lightsparkdev/ui-test-app -## 0.0.12 - -### Patch Changes - -- Updated dependencies [1a063b6] -- Updated dependencies [1a063b6] -- Updated dependencies [1a063b6] - - @lightsparkdev/ui@1.0.11 - - @lightsparkdev/core@1.2.4 - ## 0.0.11 ### Patch Changes diff --git a/apps/examples/ui-test-app/package.json b/apps/examples/ui-test-app/package.json index c92941fb..77150d9f 100644 --- a/apps/examples/ui-test-app/package.json +++ b/apps/examples/ui-test-app/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/ui-test-app", - "version": "0.0.12", + "version": "0.0.11", "description": "Lightspark UI components", "author": "Lightspark Inc.", "main": "./dist/index.js", @@ -30,8 +30,8 @@ "@emotion/css": "^11.11.0", "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", - "@lightsparkdev/core": "1.2.4", - "@lightsparkdev/ui": "1.0.11", + "@lightsparkdev/core": "1.2.3", + "@lightsparkdev/ui": "1.0.10", "react": "^18.2.0", "react-dom": "^18.1.0", "react-router-dom": "6.11.2" diff --git a/apps/examples/uma-vasp-cli/CHANGELOG.md b/apps/examples/uma-vasp-cli/CHANGELOG.md index 53f9c2f3..1d5a1efc 100644 --- a/apps/examples/uma-vasp-cli/CHANGELOG.md +++ b/apps/examples/uma-vasp-cli/CHANGELOG.md @@ -1,14 +1,5 @@ # @lightsparkdev/uma-vasp-cli -## 0.0.22 - -### Patch Changes - -- Updated dependencies [1a063b6] -- Updated dependencies [1a063b6] - - @lightsparkdev/core@1.2.4 - - @lightsparkdev/lightspark-sdk@1.8.6 - ## 0.0.21 ### Patch Changes diff --git a/apps/examples/uma-vasp-cli/package.json b/apps/examples/uma-vasp-cli/package.json index 538995ad..17525255 100644 --- a/apps/examples/uma-vasp-cli/package.json +++ b/apps/examples/uma-vasp-cli/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/uma-vasp-cli", - "version": "0.0.22", + "version": "0.0.21", "private": true, "description": "CLI for the Demo UMA VASP in ../apps/examples/uma-vasp", "main": "./dist/index.js", @@ -43,8 +43,8 @@ }, "dependencies": { "@inquirer/prompts": "^1.1.3", - "@lightsparkdev/core": "1.2.4", - "@lightsparkdev/lightspark-sdk": "1.8.6", + "@lightsparkdev/core": "1.2.3", + "@lightsparkdev/lightspark-sdk": "1.8.5", "@uma-sdk/core": "^1.2.0", "chalk": "^5.3.0", "commander": "^11.0.0" diff --git a/apps/examples/uma-vasp/CHANGELOG.md b/apps/examples/uma-vasp/CHANGELOG.md index 615e87df..6ac4068c 100644 --- a/apps/examples/uma-vasp/CHANGELOG.md +++ b/apps/examples/uma-vasp/CHANGELOG.md @@ -1,14 +1,5 @@ # @lightsparkdev/uma-vasp -## 0.0.42 - -### Patch Changes - -- Updated dependencies [1a063b6] -- Updated dependencies [1a063b6] - - @lightsparkdev/core@1.2.4 - - @lightsparkdev/lightspark-sdk@1.8.6 - ## 0.0.41 ### Patch Changes diff --git a/apps/examples/uma-vasp/package.json b/apps/examples/uma-vasp/package.json index 657f2ccc..3d2342b4 100644 --- a/apps/examples/uma-vasp/package.json +++ b/apps/examples/uma-vasp/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/uma-vasp", - "version": "0.0.42", + "version": "0.0.41", "private": true, "type": "module", "scripts": { @@ -13,8 +13,8 @@ }, "main": "dist/index.js", "dependencies": { - "@lightsparkdev/core": "1.2.4", - "@lightsparkdev/lightspark-sdk": "1.8.6", + "@lightsparkdev/core": "1.2.3", + "@lightsparkdev/lightspark-sdk": "1.8.5", "@uma-sdk/core": "^1.2.0", "express": "^4.18.2", "uuid": "^9.0.0", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 0bc2eabf..0b3219e7 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,12 +1,5 @@ # @lightsparkdev/core -## 1.2.4 - -### Patch Changes - -- 1a063b6: - Add MXN to currency conversion util -- 1a063b6: - Remove text-encoding dependency previously needed for React Native support - ## 1.2.3 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index b160dff1..b8cac263 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/core", - "version": "1.2.4", + "version": "1.2.3", "description": "Lightspark JS SDK", "author": "Lightspark Inc.", "keywords": [ diff --git a/packages/crypto-wasm/CHANGELOG.md b/packages/crypto-wasm/CHANGELOG.md index c9f036b9..4d257749 100644 --- a/packages/crypto-wasm/CHANGELOG.md +++ b/packages/crypto-wasm/CHANGELOG.md @@ -1,13 +1,5 @@ # @lightsparkdev/crypto-wasm -## 0.1.7 - -### Patch Changes - -- Updated dependencies [1a063b6] -- Updated dependencies [1a063b6] - - @lightsparkdev/core@1.2.4 - ## 0.1.6 ### Patch Changes diff --git a/packages/crypto-wasm/package.json b/packages/crypto-wasm/package.json index b59cc908..bf9f5618 100644 --- a/packages/crypto-wasm/package.json +++ b/packages/crypto-wasm/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/crypto-wasm", - "version": "0.1.7", + "version": "0.1.6", "type": "module", "files": [ "crypto_bg.wasm", @@ -12,7 +12,7 @@ "test": "node --experimental-vm-modules $(yarn bin jest) --no-cache --runInBand --bail" }, "dependencies": { - "@lightsparkdev/core": "1.2.4" + "@lightsparkdev/core": "1.2.3" }, "devDependencies": { "jest": "^29.6.2", diff --git a/packages/lightspark-cli/CHANGELOG.md b/packages/lightspark-cli/CHANGELOG.md index 785cfb1c..b6ec2074 100644 --- a/packages/lightspark-cli/CHANGELOG.md +++ b/packages/lightspark-cli/CHANGELOG.md @@ -1,15 +1,5 @@ # @lightsparkdev/lightspark-cli -## 0.0.60 - -### Patch Changes - -- Updated dependencies [1a063b6] -- Updated dependencies [1a063b6] - - @lightsparkdev/core@1.2.4 - - @lightsparkdev/lightspark-sdk@1.8.6 - - @lightsparkdev/crypto-wasm@0.1.7 - ## 0.0.59 ### Patch Changes diff --git a/packages/lightspark-cli/package.json b/packages/lightspark-cli/package.json index 8f62a844..29c045fe 100644 --- a/packages/lightspark-cli/package.json +++ b/packages/lightspark-cli/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/lightspark-cli", - "version": "0.0.60", + "version": "0.0.59", "description": "CLI for the Lightspark JS sdk", "main": "./dist/index.js", "bin": { @@ -44,9 +44,9 @@ }, "dependencies": { "@inquirer/prompts": "^1.1.3", - "@lightsparkdev/core": "1.2.4", - "@lightsparkdev/crypto-wasm": "0.1.7", - "@lightsparkdev/lightspark-sdk": "1.8.6", + "@lightsparkdev/core": "1.2.3", + "@lightsparkdev/crypto-wasm": "0.1.6", + "@lightsparkdev/lightspark-sdk": "1.8.5", "commander": "^11.0.0", "dayjs": "^1.11.7", "dotenv": "^16.3.1", diff --git a/packages/lightspark-sdk/CHANGELOG.md b/packages/lightspark-sdk/CHANGELOG.md index 00d73055..bee102bd 100644 --- a/packages/lightspark-sdk/CHANGELOG.md +++ b/packages/lightspark-sdk/CHANGELOG.md @@ -1,15 +1,5 @@ # @lightsparkdev/lightspark-sdk -## 1.8.6 - -### Patch Changes - -- 1a063b6: - Remove text-encoding dependency previously needed for React Native support -- Updated dependencies [1a063b6] -- Updated dependencies [1a063b6] - - @lightsparkdev/core@1.2.4 - - @lightsparkdev/crypto-wasm@0.1.7 - ## 1.8.5 ### Patch Changes diff --git a/packages/lightspark-sdk/package.json b/packages/lightspark-sdk/package.json index e917f90a..3ec60632 100644 --- a/packages/lightspark-sdk/package.json +++ b/packages/lightspark-sdk/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/lightspark-sdk", - "version": "1.8.6", + "version": "1.8.5", "description": "Lightspark JS SDK", "author": "Lightspark Inc.", "keywords": [ @@ -82,8 +82,8 @@ }, "license": "Apache-2.0", "dependencies": { - "@lightsparkdev/core": "1.2.4", - "@lightsparkdev/crypto-wasm": "0.1.7", + "@lightsparkdev/core": "1.2.3", + "@lightsparkdev/crypto-wasm": "0.1.6", "crypto-browserify": "^3.12.0", "dayjs": "^1.11.7", "dotenv": "^16.3.1", diff --git a/packages/oauth/CHANGELOG.md b/packages/oauth/CHANGELOG.md index 925fd908..866891fd 100644 --- a/packages/oauth/CHANGELOG.md +++ b/packages/oauth/CHANGELOG.md @@ -1,14 +1,5 @@ # @lightsparkdev/oauth -## 0.1.49 - -### Patch Changes - -- 1a063b6: - Remove text-encoding dependency previously needed for React Native support -- Updated dependencies [1a063b6] -- Updated dependencies [1a063b6] - - @lightsparkdev/core@1.2.4 - ## 0.1.48 ### Patch Changes diff --git a/packages/oauth/package.json b/packages/oauth/package.json index 6367d87d..51d6ec02 100644 --- a/packages/oauth/package.json +++ b/packages/oauth/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/oauth", - "version": "0.1.49", + "version": "0.1.48", "private": true, "description": "Lightspark JS Oauth SDK", "author": "Lightspark Inc.", @@ -48,7 +48,7 @@ }, "license": "Apache-2.0", "dependencies": { - "@lightsparkdev/core": "1.2.4", + "@lightsparkdev/core": "1.2.3", "@openid/appauth": "^1.3.1", "auto-bind": "^5.0.1", "dayjs": "^1.11.7" diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index e1627999..23d89445 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,16 +1,5 @@ # @lightsparkdev/ui -## 1.0.11 - -### Patch Changes - -- 1a063b6: - PendingValue improvements - - Fix circular dep issue with typography and toReactNodes utils - - Add theming for CardForm -- Updated dependencies [1a063b6] -- Updated dependencies [1a063b6] - - @lightsparkdev/core@1.2.4 - ## 1.0.10 ### Patch Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index a4f22890..742b55e2 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/ui", - "version": "1.0.11", + "version": "1.0.10", "main": "./dist/index.js", "module": "./dist/index.js", "types": "./dist/index.d.ts", @@ -58,7 +58,7 @@ "@emotion/css": "^11.11.0", "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", - "@lightsparkdev/core": "1.2.4", + "@lightsparkdev/core": "1.2.3", "@rollup/plugin-url": "^8.0.2", "@simbathesailor/use-what-changed": "^2.0.0", "@svgr/core": "^8.1.0", diff --git a/packages/ui/src/components/IconWithCircleBackground.tsx b/packages/ui/src/components/IconWithCircleBackground.tsx index ebcdf83c..7f089c3b 100644 --- a/packages/ui/src/components/IconWithCircleBackground.tsx +++ b/packages/ui/src/components/IconWithCircleBackground.tsx @@ -12,6 +12,8 @@ type IconWithCircleBackgroundProps = { iconName?: IconName; iconWidth?: IconWidth | undefined; to?: NewRoutesType | undefined; + darkBg?: boolean; + shouldRotate?: boolean; onClick?: () => void; }; @@ -20,11 +22,21 @@ export function IconWithCircleBackground({ iconWidth = 40, to, onClick, + darkBg = false, + shouldRotate = false, }: IconWithCircleBackgroundProps) { const content = ( - - + + ); @@ -33,10 +45,15 @@ export function IconWithCircleBackground({ type StyledIconWithCircleBackgroundProps = { size: IconWidth; + darkBg: boolean; + shouldRotate: boolean; }; const StyledIconWithCircleBackground = styled.div` - background-color: ${({ theme }) => getColor(theme, "grayBlue94")}; + background: ${({ theme, darkBg }) => + darkBg + ? `linear-gradient(291.4deg, #1C243F 0%, #21283A 100%)` + : getColor(theme, "grayBlue94")}; border-radius: 50%; padding: ${({ size }) => getPadding(size)}px; display: flex; @@ -45,6 +62,21 @@ const StyledIconWithCircleBackground = styled.div + shouldRotate && + `animation: IconWithCircleBackgroundRotate 10s ease infinite;`} `; function getPadding(size: IconWidth) { From 72de9cc84b7fbb8b8133777f7efb60d389dfe2a9 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Wed, 9 Oct 2024 16:10:23 -0700 Subject: [PATCH 02/19] [uma-bridge] Add UmaCard and variants. Add ClipboardTextFieldNode (#12762) GitOrigin-RevId: cfec8d3c73ca0efa67292031f437e373ab385830 --- .../ui/src/components/ClipboardTextField.tsx | 120 ++++++++++++------ packages/ui/src/components/PendingValue.tsx | 2 + packages/ui/src/icons/Copy.tsx | 8 +- packages/ui/src/styles/common.tsx | 2 +- packages/ui/src/utils/toReactNodes/nodes.tsx | 14 ++ .../toReactNodes/setReactNodesTypography.tsx | 12 ++ .../src/utils/toReactNodes/toReactNodes.tsx | 11 ++ 7 files changed, 124 insertions(+), 45 deletions(-) diff --git a/packages/ui/src/components/ClipboardTextField.tsx b/packages/ui/src/components/ClipboardTextField.tsx index 5eead575..5c367cfb 100644 --- a/packages/ui/src/components/ClipboardTextField.tsx +++ b/packages/ui/src/components/ClipboardTextField.tsx @@ -2,15 +2,17 @@ import styled from "@emotion/styled"; import type { MouseEvent } from "react"; import { useCallback } from "react"; import { useClipboard } from "../hooks/useClipboard.js"; -import { extend, lineClamp as lineClampCSS } from "../styles/utils.js"; +import { type ThemeOrColorKey } from "../styles/themes.js"; +import { applyTypography } from "../styles/typography.js"; +import { lineClamp as lineClampCSS } from "../styles/utils.js"; import { elide, type ElideArgs } from "../utils/strings.js"; import { Icon } from "./Icon/Icon.js"; -import { renderTypography } from "./typography/renderTypography.js"; import { type PartialSimpleTypographyProps } from "./typography/types.js"; type ClipboardTextFieldProps = { value: string; icon?: boolean; + id?: string; stopPropagation?: boolean; /* Note maxLines forces box layout: */ maxLines?: number | undefined; @@ -18,6 +20,7 @@ type ClipboardTextFieldProps = { wordBreakAll?: boolean; tag?: "span" | "pre"; iconSide?: "left" | "right"; + iconColor?: ThemeOrColorKey; typography?: PartialSimpleTypographyProps | undefined; clipboardCallbacks?: Parameters[0]; }; @@ -25,39 +28,32 @@ type ClipboardTextFieldProps = { export function ClipboardTextField({ value, icon, + id, stopPropagation, maxLines, elide: elideArgs, wordBreakAll = false, tag = "span", iconSide = "left", + iconColor: iconColorProp, typography, clipboardCallbacks, }: ClipboardTextFieldProps) { const { canWriteToClipboard, writeTextToClipboard } = useClipboard(clipboardCallbacks); - const addLineClamp = maxLines && maxLines > 1; + const addLineClamp = Boolean(maxLines && maxLines > 1); const displayValue = elideArgs ? elide(value, elideArgs) : value; - const nodes = renderTypography(typography?.type || "Body", { - children: displayValue, - size: typography?.size || "ExtraSmall", - color: typography?.color || "inherit", - }); - - const baseValueCSS = { - flex: 1, - overflow: "hidden", - textAlign: "left" as const, - textOverflow: "ellipsis", - wordBreak: wordBreakAll ? ("break-all" as const) : ("normal" as const), - verticalAlign: "middle", - }; - const valueCSS = addLineClamp - ? extend(baseValueCSS, lineClampCSS(maxLines), { alignSelf: "baseline" }) - : baseValueCSS; - - const valueNode = {nodes}; + const valueNode = ( + + {displayValue} + + ); const onClick = useCallback( (event: MouseEvent) => { @@ -78,43 +74,85 @@ export function ClipboardTextField({ } } - const baseContainerCSS = { - maxWidth: "100%", - overflow: "hidden", - textOverflow: "ellipsis", - alignItems: "center", - boxSizing: "content-box" as const, - cursor: "pointer", + const commonProps = { + as: tag, + id, + addLineClamp, + maxLines, }; - const containerCSS = addLineClamp - ? /* keep the icon on the same line when addLineClamp: */ - extend(baseContainerCSS, { display: "inline-flex" }) - : maxLines === 1 - ? extend(baseContainerCSS, { whiteSpace: "nowrap", display: "inline-flex" }) - : baseContainerCSS; + const iconColor = iconColorProp || typography?.color || "inherit"; return canWriteToClipboard && value ? ( {icon && iconSide === "left" ? ( - + ) : null} {valueNode} {icon && iconSide === "right" ? ( - + ) : null} ) : ( - + {valueNode} ); } -const StyledClipboardTextField = styled.span``; +type StyledClipboardTextFieldProps = { + addLineClamp: boolean; + maxLines?: number | undefined; +}; + +const StyledClipboardTextField = styled.span` + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + align-items: center; + box-sizing: content-box; + cursor: pointer; + + ${({ addLineClamp, maxLines }) => + /* keep the icon on the same line when addLineClamp: */ + addLineClamp || maxLines === 1 ? "display: inline-flex;" : ""} + + ${({ maxLines }) => (maxLines === 1 ? "white-space: nowrap;" : "")} +`; + +type ClipboardTextFieldValueProps = { + wordBreakAll: boolean; + addLineClamp: boolean; + maxLines?: number | undefined; + typography?: PartialSimpleTypographyProps | undefined; +}; + +const ClipboardTextFieldValue = styled.span` + flex: 1; + overflow: hidden; + text-align: left; + text-overflow: ellipsis; + word-break: ${({ wordBreakAll }) => (wordBreakAll ? "break-all" : "normal")}; + vertical-align: middle; + + ${({ addLineClamp, maxLines }) => + addLineClamp && maxLines + ? ` + ${lineClampCSS(maxLines).styles} + align-self: baseline; + ` + : ""} + + ${({ theme, typography }) => + applyTypography( + theme, + typography?.type || "Body", + typography?.size || "ExtraSmall", + typography?.color || "inherit", + )} +`; diff --git a/packages/ui/src/components/PendingValue.tsx b/packages/ui/src/components/PendingValue.tsx index fa39a058..ddc5202d 100644 --- a/packages/ui/src/components/PendingValue.tsx +++ b/packages/ui/src/components/PendingValue.tsx @@ -56,6 +56,8 @@ export function PendingValue({ link: defaultTypography, text: defaultTypography, nextLink: defaultTypography, + currencyAmount: defaultTypography, + clipboardTextField: defaultTypography, }; const nodesWithTypography = setDefaultReactNodesTypography( diff --git a/packages/ui/src/icons/Copy.tsx b/packages/ui/src/icons/Copy.tsx index 75abae53..cd17dbb9 100644 --- a/packages/ui/src/icons/Copy.tsx +++ b/packages/ui/src/icons/Copy.tsx @@ -4,14 +4,16 @@ export function Copy() { return ( ); diff --git a/packages/ui/src/styles/common.tsx b/packages/ui/src/styles/common.tsx index 725d5ddd..a4160ab9 100644 --- a/packages/ui/src/styles/common.tsx +++ b/packages/ui/src/styles/common.tsx @@ -55,7 +55,7 @@ function buildStandardContentInset( export const standardContentInset = buildStandardContentInset(16, 24, 32); -const standardBorderRadiusPx = [0, 4, 8, 12, 16, 18] as const; +const standardBorderRadiusPx = [0, 4, 8, 12, 16, 18, 32] as const; type StandardBorderRadius = (typeof standardBorderRadiusPx)[number]; export const cardBorderRadiusPx = 16; diff --git a/packages/ui/src/utils/toReactNodes/nodes.tsx b/packages/ui/src/utils/toReactNodes/nodes.tsx index 8e99a57d..00e864b2 100644 --- a/packages/ui/src/utils/toReactNodes/nodes.tsx +++ b/packages/ui/src/utils/toReactNodes/nodes.tsx @@ -1,5 +1,6 @@ import { isObject } from "lodash-es"; import type { ComponentProps } from "react"; +import { type ClipboardTextField } from "../../components/ClipboardTextField.js"; import type { CurrencyAmount } from "../../components/CurrencyAmount.js"; import type { Icon } from "../../components/Icon/Icon.js"; import { type TypographyPropsWithoutChildren } from "../../components/typography/renderTypography.js"; @@ -32,6 +33,10 @@ export type CurrencyAmountNode = { currencyAmount: ComponentProps; }; +export type ClipboardTextFieldNode = { + clipboardTextField: ComponentProps; +}; + export function isLinkNode(node: unknown): node is LinkNode { return Boolean(node && isObject(node) && "link" in node); } @@ -50,6 +55,12 @@ export function isCurrencyAmountNode( return Boolean(node && isObject(node) && "currencyAmount" in node); } +export function isClipboardTextFieldNode( + node: unknown, +): node is ClipboardTextFieldNode { + return Boolean(node && isObject(node) && "clipboardTextField" in node); +} + export function isTextNode(node: unknown): node is TextNode { const allowedKeys = ["text", "onClick", "typography"]; return Boolean( @@ -74,3 +85,6 @@ export const currencyAmount = ( ): CurrencyAmountNode => ({ currencyAmount }); export const icon = (icon: IconNode["icon"]): IconNode => ({ icon }); +export const clipboardTextField = ( + clipboardTextField: ComponentProps, +): ClipboardTextFieldNode => ({ clipboardTextField }); diff --git a/packages/ui/src/utils/toReactNodes/setReactNodesTypography.tsx b/packages/ui/src/utils/toReactNodes/setReactNodesTypography.tsx index da23285c..0b79831d 100644 --- a/packages/ui/src/utils/toReactNodes/setReactNodesTypography.tsx +++ b/packages/ui/src/utils/toReactNodes/setReactNodesTypography.tsx @@ -2,6 +2,7 @@ import { ensureArray } from "@lightsparkdev/core"; import { type TypographyPropsWithoutChildren } from "../../components/typography/renderTypography.js"; import { isString } from "../strings.js"; import { + isClipboardTextFieldNode, isCurrencyAmountNode, isIconNode, isLinkNode, @@ -17,6 +18,7 @@ const setReactNodesTypographyMapTypes = [ "text", "nextLink", "currencyAmount", + "clipboardTextField", ] as const; export function isNonTypographicReactNode( @@ -67,6 +69,16 @@ export function setReactNodesTypography( typography: typography.currencyAmount, }, }; + } else if ( + isClipboardTextFieldNode(node) && + typography.clipboardTextField + ) { + return { + clipboardTextField: { + ...node.clipboardTextField, + typography: typography.clipboardTextField, + }, + }; } else if ((isTextNode(node) || isString(node)) && typography.text) { return setTextNodeTypography( node, diff --git a/packages/ui/src/utils/toReactNodes/toReactNodes.tsx b/packages/ui/src/utils/toReactNodes/toReactNodes.tsx index 65aa2915..02587912 100644 --- a/packages/ui/src/utils/toReactNodes/toReactNodes.tsx +++ b/packages/ui/src/utils/toReactNodes/toReactNodes.tsx @@ -5,11 +5,13 @@ import { Icon } from "../../components/Icon/Icon.js"; import { Link } from "../../router.js"; import { NextLink } from "../NextLink.js"; import { + isClipboardTextFieldNode, isCurrencyAmountNode, isIconNode, isLinkNode, isNextLinkNode, isTextNode, + type ClipboardTextFieldNode, type CurrencyAmountNode, type IconNode, type LinkNode, @@ -18,6 +20,7 @@ import { } from "./nodes.js"; import { Fragment, type ReactNode } from "react"; +import { ClipboardTextField } from "../../components/ClipboardTextField.js"; import { renderTypography } from "../../components/typography/renderTypography.js"; import { stringToNodes } from "./stringToNodes.js"; @@ -28,6 +31,7 @@ export type ToReactNodesArg = | NextLinkNode | IconNode | CurrencyAmountNode + | ClipboardTextFieldNode | null | undefined; @@ -93,6 +97,13 @@ export function toReactNodes(toReactNodesArg: ToReactNodesArgs) { {...node.currencyAmount} /> ); + } else if (isClipboardTextFieldNode(node)) { + return ( + + ); } return null; From a43ca7a6b6d0d6daef212b44ae3e5c00f36e5fb3 Mon Sep 17 00:00:00 2001 From: Lightspark Eng Date: Wed, 9 Oct 2024 23:20:36 +0000 Subject: [PATCH 03/19] CI update lock file for PR --- yarn.lock | 54 +++++++++++++++++++++++++++--------------------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/yarn.lock b/yarn.lock index d970a1f4..803c02c3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2072,7 +2072,7 @@ __metadata: languageName: node linkType: hard -"@lightsparkdev/core@npm:1.2.4, @lightsparkdev/core@workspace:packages/core": +"@lightsparkdev/core@npm:1.2.3, @lightsparkdev/core@workspace:packages/core": version: 0.0.0-use.local resolution: "@lightsparkdev/core@workspace:packages/core" dependencies: @@ -2104,11 +2104,11 @@ __metadata: languageName: unknown linkType: soft -"@lightsparkdev/crypto-wasm@npm:0.1.7, @lightsparkdev/crypto-wasm@workspace:packages/crypto-wasm": +"@lightsparkdev/crypto-wasm@npm:0.1.6, @lightsparkdev/crypto-wasm@workspace:packages/crypto-wasm": version: 0.0.0-use.local resolution: "@lightsparkdev/crypto-wasm@workspace:packages/crypto-wasm" dependencies: - "@lightsparkdev/core": "npm:1.2.4" + "@lightsparkdev/core": "npm:1.2.3" jest: "npm:^29.6.2" ts-jest: "npm:^29.1.1" typescript: "npm:^5.6.2" @@ -2145,10 +2145,10 @@ __metadata: resolution: "@lightsparkdev/lightspark-cli@workspace:packages/lightspark-cli" dependencies: "@inquirer/prompts": "npm:^1.1.3" - "@lightsparkdev/core": "npm:1.2.4" - "@lightsparkdev/crypto-wasm": "npm:0.1.7" + "@lightsparkdev/core": "npm:1.2.3" + "@lightsparkdev/crypto-wasm": "npm:0.1.6" "@lightsparkdev/eslint-config": "npm:*" - "@lightsparkdev/lightspark-sdk": "npm:1.8.6" + "@lightsparkdev/lightspark-sdk": "npm:1.8.5" "@lightsparkdev/tsconfig": "npm:0.0.1" "@types/jsonwebtoken": "npm:^9.0.2" "@types/node": "npm:^20.2.5" @@ -2174,12 +2174,12 @@ __metadata: languageName: unknown linkType: soft -"@lightsparkdev/lightspark-sdk@npm:1.8.6, @lightsparkdev/lightspark-sdk@workspace:packages/lightspark-sdk": +"@lightsparkdev/lightspark-sdk@npm:1.8.5, @lightsparkdev/lightspark-sdk@workspace:packages/lightspark-sdk": version: 0.0.0-use.local resolution: "@lightsparkdev/lightspark-sdk@workspace:packages/lightspark-sdk" dependencies: - "@lightsparkdev/core": "npm:1.2.4" - "@lightsparkdev/crypto-wasm": "npm:0.1.7" + "@lightsparkdev/core": "npm:1.2.3" + "@lightsparkdev/crypto-wasm": "npm:0.1.6" "@lightsparkdev/eslint-config": "npm:*" "@lightsparkdev/tsconfig": "npm:0.0.1" "@types/crypto-js": "npm:^4.1.1" @@ -2211,9 +2211,9 @@ __metadata: version: 0.0.0-use.local resolution: "@lightsparkdev/nodejs-scripts@workspace:apps/examples/nodejs-scripts" dependencies: - "@lightsparkdev/core": "npm:1.2.4" + "@lightsparkdev/core": "npm:1.2.3" "@lightsparkdev/eslint-config": "npm:*" - "@lightsparkdev/lightspark-sdk": "npm:1.8.6" + "@lightsparkdev/lightspark-sdk": "npm:1.8.5" "@types/jest": "npm:^29.5.3" "@types/node": "npm:^20.2.5" commander: "npm:^11.0.0" @@ -2239,10 +2239,10 @@ __metadata: "@emotion/react": "npm:^11.11.0" "@emotion/styled": "npm:^11.11.0" "@lightsparkdev/eslint-config": "npm:*" - "@lightsparkdev/lightspark-sdk": "npm:1.8.6" + "@lightsparkdev/lightspark-sdk": "npm:1.8.5" "@lightsparkdev/oauth": "npm:*" "@lightsparkdev/tsconfig": "npm:*" - "@lightsparkdev/ui": "npm:1.0.11" + "@lightsparkdev/ui": "npm:1.0.10" "@types/jest": "npm:^29.5.3" "@types/node": "npm:^20.2.5" "@types/react": "npm:^18.2.12" @@ -2264,7 +2264,7 @@ __metadata: version: 0.0.0-use.local resolution: "@lightsparkdev/oauth@workspace:packages/oauth" dependencies: - "@lightsparkdev/core": "npm:1.2.4" + "@lightsparkdev/core": "npm:1.2.3" "@lightsparkdev/eslint-config": "npm:*" "@lightsparkdev/tsconfig": "npm:0.0.1" "@openid/appauth": "npm:^1.3.1" @@ -2286,8 +2286,8 @@ __metadata: version: 0.0.0-use.local resolution: "@lightsparkdev/remote-signing-server@workspace:apps/examples/remote-signing-server" dependencies: - "@lightsparkdev/core": "npm:1.2.4" - "@lightsparkdev/lightspark-sdk": "npm:1.8.6" + "@lightsparkdev/core": "npm:1.2.3" + "@lightsparkdev/lightspark-sdk": "npm:1.8.5" "@lightsparkdev/tsconfig": "npm:*" "@types/jest": "npm:^29.5.3" "@types/node": "npm:^20.2.5" @@ -2318,10 +2318,10 @@ __metadata: dependencies: "@emotion/react": "npm:^11.11.0" "@emotion/styled": "npm:^11.11.0" - "@lightsparkdev/core": "npm:1.2.4" - "@lightsparkdev/lightspark-sdk": "npm:1.8.6" + "@lightsparkdev/core": "npm:1.2.3" + "@lightsparkdev/lightspark-sdk": "npm:1.8.5" "@lightsparkdev/tsconfig": "npm:*" - "@lightsparkdev/ui": "npm:1.0.11" + "@lightsparkdev/ui": "npm:1.0.10" "@lightsparkdev/vite": "npm:*" "@types/chrome": "npm:^0.0.254" "@types/jest": "npm:^29.5.3" @@ -2359,10 +2359,10 @@ __metadata: "@emotion/jest": "npm:^11.13.0" "@emotion/react": "npm:^11.11.0" "@emotion/styled": "npm:^11.11.0" - "@lightsparkdev/core": "npm:1.2.4" + "@lightsparkdev/core": "npm:1.2.3" "@lightsparkdev/eslint-config": "npm:*" "@lightsparkdev/tsconfig": "npm:*" - "@lightsparkdev/ui": "npm:1.0.11" + "@lightsparkdev/ui": "npm:1.0.10" "@lightsparkdev/vite": "npm:*" "@testing-library/jest-dom": "npm:^6.1.2" "@types/jest": "npm:^29.5.3" @@ -2387,7 +2387,7 @@ __metadata: languageName: unknown linkType: soft -"@lightsparkdev/ui@npm:1.0.11, @lightsparkdev/ui@workspace:packages/ui": +"@lightsparkdev/ui@npm:1.0.10, @lightsparkdev/ui@workspace:packages/ui": version: 0.0.0-use.local resolution: "@lightsparkdev/ui@workspace:packages/ui" dependencies: @@ -2395,7 +2395,7 @@ __metadata: "@emotion/css": "npm:^11.11.0" "@emotion/react": "npm:^11.11.0" "@emotion/styled": "npm:^11.11.0" - "@lightsparkdev/core": "npm:1.2.4" + "@lightsparkdev/core": "npm:1.2.3" "@lightsparkdev/eslint-config": "npm:*" "@lightsparkdev/tsconfig": "npm:0.0.1" "@microsoft/api-extractor": "npm:^7.47.9" @@ -2455,9 +2455,9 @@ __metadata: resolution: "@lightsparkdev/uma-vasp-cli@workspace:apps/examples/uma-vasp-cli" dependencies: "@inquirer/prompts": "npm:^1.1.3" - "@lightsparkdev/core": "npm:1.2.4" + "@lightsparkdev/core": "npm:1.2.3" "@lightsparkdev/eslint-config": "npm:*" - "@lightsparkdev/lightspark-sdk": "npm:1.8.6" + "@lightsparkdev/lightspark-sdk": "npm:1.8.5" "@lightsparkdev/tsconfig": "npm:0.0.1" "@types/chalk": "npm:^2.2.0" "@types/node": "npm:^20.2.5" @@ -2481,8 +2481,8 @@ __metadata: version: 0.0.0-use.local resolution: "@lightsparkdev/uma-vasp@workspace:apps/examples/uma-vasp" dependencies: - "@lightsparkdev/core": "npm:1.2.4" - "@lightsparkdev/lightspark-sdk": "npm:1.8.6" + "@lightsparkdev/core": "npm:1.2.3" + "@lightsparkdev/lightspark-sdk": "npm:1.8.5" "@lightsparkdev/tsconfig": "npm:*" "@types/body-parser": "npm:^1.19.5" "@types/express": "npm:^4.17.21" From 06b9903fe5c3bb14535ddad4e1bc04fba4cbfa86 Mon Sep 17 00:00:00 2001 From: "lightspark-ci-js-sdk[bot]" <134011073+lightspark-ci-js-sdk[bot]@users.noreply.github.com> Date: Wed, 9 Oct 2024 22:46:31 -0700 Subject: [PATCH 04/19] Update from public js-sdk main branch (#12656) Update public `js` sources with the latest code from the [public repository](https://github.com/lightsparkdev/js-sdk) main branch. This typically happens when new versions of the SDK are released and version updates need to be synced. The PR should be merged as soon as possible to avoid updates to webdev overwriting the changes in the js-sdk develop branch. --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] Co-authored-by: Lightspark Eng Co-authored-by: Corey Martin GitOrigin-RevId: cd01e8a9400fe6815070c4bf2daab36ba21486f8 --- apps/examples/nodejs-scripts/CHANGELOG.md | 9 +++++++++ apps/examples/nodejs-scripts/package.json | 6 +++--- apps/examples/oauth-app/CHANGELOG.md | 10 ++++++++++ apps/examples/oauth-app/package.json | 6 +++--- apps/examples/remote-signing-server/CHANGELOG.md | 9 +++++++++ apps/examples/remote-signing-server/package.json | 6 +++--- apps/examples/streaming-wallet-extension/CHANGELOG.md | 11 +++++++++++ apps/examples/streaming-wallet-extension/package.json | 8 ++++---- apps/examples/ui-test-app/CHANGELOG.md | 10 ++++++++++ apps/examples/ui-test-app/package.json | 6 +++--- apps/examples/uma-vasp-cli/CHANGELOG.md | 9 +++++++++ apps/examples/uma-vasp-cli/package.json | 6 +++--- apps/examples/uma-vasp/CHANGELOG.md | 9 +++++++++ apps/examples/uma-vasp/package.json | 6 +++--- packages/core/CHANGELOG.md | 7 +++++++ packages/core/package.json | 2 +- packages/crypto-wasm/CHANGELOG.md | 8 ++++++++ packages/crypto-wasm/package.json | 4 ++-- packages/lightspark-cli/CHANGELOG.md | 10 ++++++++++ packages/lightspark-cli/package.json | 8 ++++---- packages/lightspark-sdk/CHANGELOG.md | 10 ++++++++++ packages/lightspark-sdk/package.json | 6 +++--- packages/oauth/CHANGELOG.md | 9 +++++++++ packages/oauth/package.json | 4 ++-- packages/ui/CHANGELOG.md | 11 +++++++++++ packages/ui/package.json | 4 ++-- 26 files changed, 158 insertions(+), 36 deletions(-) diff --git a/apps/examples/nodejs-scripts/CHANGELOG.md b/apps/examples/nodejs-scripts/CHANGELOG.md index b80e6a17..8487643a 100644 --- a/apps/examples/nodejs-scripts/CHANGELOG.md +++ b/apps/examples/nodejs-scripts/CHANGELOG.md @@ -1,5 +1,14 @@ # @lightsparkdev/nodejs-scripts +## 0.0.17 + +### Patch Changes + +- Updated dependencies [1a063b6] +- Updated dependencies [1a063b6] + - @lightsparkdev/core@1.2.4 + - @lightsparkdev/lightspark-sdk@1.8.6 + ## 0.0.16 ### Patch Changes diff --git a/apps/examples/nodejs-scripts/package.json b/apps/examples/nodejs-scripts/package.json index 32d3b813..895d4d07 100644 --- a/apps/examples/nodejs-scripts/package.json +++ b/apps/examples/nodejs-scripts/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/nodejs-scripts", - "version": "0.0.16", + "version": "0.0.17", "private": true, "description": "Example NodeJS scripts for Lightspark JS SDKs", "main": "index.js", @@ -33,8 +33,8 @@ "typescript": "^5.6.2" }, "dependencies": { - "@lightsparkdev/core": "1.2.3", - "@lightsparkdev/lightspark-sdk": "1.8.5", + "@lightsparkdev/core": "1.2.4", + "@lightsparkdev/lightspark-sdk": "1.8.6", "commander": "^11.0.0", "dayjs": "^1.11.7", "lodash-es": "^4.17.21" diff --git a/apps/examples/oauth-app/CHANGELOG.md b/apps/examples/oauth-app/CHANGELOG.md index 360c02cc..32cdc1d8 100644 --- a/apps/examples/oauth-app/CHANGELOG.md +++ b/apps/examples/oauth-app/CHANGELOG.md @@ -1,5 +1,15 @@ # @lightsparkdev/oauth-app +## 0.0.42 + +### Patch Changes + +- Updated dependencies [1a063b6] +- Updated dependencies [1a063b6] + - @lightsparkdev/ui@1.0.11 + - @lightsparkdev/lightspark-sdk@1.8.6 + - @lightsparkdev/oauth@0.1.49 + ## 0.0.41 ### Patch Changes diff --git a/apps/examples/oauth-app/package.json b/apps/examples/oauth-app/package.json index 40c84f9f..56b76362 100644 --- a/apps/examples/oauth-app/package.json +++ b/apps/examples/oauth-app/package.json @@ -1,14 +1,14 @@ { "name": "@lightsparkdev/oauth-app", - "version": "0.0.41", + "version": "0.0.42", "private": true, "dependencies": { "@emotion/css": "^11.11.0", "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", - "@lightsparkdev/lightspark-sdk": "1.8.5", + "@lightsparkdev/lightspark-sdk": "1.8.6", "@lightsparkdev/oauth": "*", - "@lightsparkdev/ui": "1.0.10", + "@lightsparkdev/ui": "1.0.11", "react": "^18.2.0", "react-dom": "^18.1.0", "react-router-dom": "6.11.2", diff --git a/apps/examples/remote-signing-server/CHANGELOG.md b/apps/examples/remote-signing-server/CHANGELOG.md index 544f6c3c..0cf92912 100644 --- a/apps/examples/remote-signing-server/CHANGELOG.md +++ b/apps/examples/remote-signing-server/CHANGELOG.md @@ -1,5 +1,14 @@ # @lightsparkdev/remote-signing-server +## 0.0.41 + +### Patch Changes + +- Updated dependencies [1a063b6] +- Updated dependencies [1a063b6] + - @lightsparkdev/core@1.2.4 + - @lightsparkdev/lightspark-sdk@1.8.6 + ## 0.0.40 ### Patch Changes diff --git a/apps/examples/remote-signing-server/package.json b/apps/examples/remote-signing-server/package.json index 9cc07b66..f10f22f4 100644 --- a/apps/examples/remote-signing-server/package.json +++ b/apps/examples/remote-signing-server/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/remote-signing-server", - "version": "0.0.40", + "version": "0.0.41", "private": true, "type": "module", "scripts": { @@ -17,8 +17,8 @@ "types": "tsc" }, "dependencies": { - "@lightsparkdev/core": "1.2.3", - "@lightsparkdev/lightspark-sdk": "1.8.5", + "@lightsparkdev/core": "1.2.4", + "@lightsparkdev/lightspark-sdk": "1.8.6", "express": "^4.18.2" }, "devDependencies": { diff --git a/apps/examples/streaming-wallet-extension/CHANGELOG.md b/apps/examples/streaming-wallet-extension/CHANGELOG.md index 963ec2b7..8d480f08 100644 --- a/apps/examples/streaming-wallet-extension/CHANGELOG.md +++ b/apps/examples/streaming-wallet-extension/CHANGELOG.md @@ -1,5 +1,16 @@ # @lightsparkdev/streaming-wallet-extension +## 1.0.71 + +### Patch Changes + +- Updated dependencies [1a063b6] +- Updated dependencies [1a063b6] +- Updated dependencies [1a063b6] + - @lightsparkdev/ui@1.0.11 + - @lightsparkdev/core@1.2.4 + - @lightsparkdev/lightspark-sdk@1.8.6 + ## 1.0.70 ### Patch Changes diff --git a/apps/examples/streaming-wallet-extension/package.json b/apps/examples/streaming-wallet-extension/package.json index d809f90a..fc4d91f0 100644 --- a/apps/examples/streaming-wallet-extension/package.json +++ b/apps/examples/streaming-wallet-extension/package.json @@ -1,13 +1,13 @@ { "name": "@lightsparkdev/streaming-wallet-extension", - "version": "1.0.70", + "version": "1.0.71", "private": true, "dependencies": { "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", - "@lightsparkdev/core": "1.2.3", - "@lightsparkdev/lightspark-sdk": "1.8.5", - "@lightsparkdev/ui": "1.0.10", + "@lightsparkdev/core": "1.2.4", + "@lightsparkdev/lightspark-sdk": "1.8.6", + "@lightsparkdev/ui": "1.0.11", "eslint": "^8.3.0", "react": "^18.2.0", "react-dom": "^18.1.0", diff --git a/apps/examples/ui-test-app/CHANGELOG.md b/apps/examples/ui-test-app/CHANGELOG.md index 7eeff7e0..5e8a0088 100644 --- a/apps/examples/ui-test-app/CHANGELOG.md +++ b/apps/examples/ui-test-app/CHANGELOG.md @@ -1,5 +1,15 @@ # @lightsparkdev/ui-test-app +## 0.0.12 + +### Patch Changes + +- Updated dependencies [1a063b6] +- Updated dependencies [1a063b6] +- Updated dependencies [1a063b6] + - @lightsparkdev/ui@1.0.11 + - @lightsparkdev/core@1.2.4 + ## 0.0.11 ### Patch Changes diff --git a/apps/examples/ui-test-app/package.json b/apps/examples/ui-test-app/package.json index 77150d9f..c92941fb 100644 --- a/apps/examples/ui-test-app/package.json +++ b/apps/examples/ui-test-app/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/ui-test-app", - "version": "0.0.11", + "version": "0.0.12", "description": "Lightspark UI components", "author": "Lightspark Inc.", "main": "./dist/index.js", @@ -30,8 +30,8 @@ "@emotion/css": "^11.11.0", "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", - "@lightsparkdev/core": "1.2.3", - "@lightsparkdev/ui": "1.0.10", + "@lightsparkdev/core": "1.2.4", + "@lightsparkdev/ui": "1.0.11", "react": "^18.2.0", "react-dom": "^18.1.0", "react-router-dom": "6.11.2" diff --git a/apps/examples/uma-vasp-cli/CHANGELOG.md b/apps/examples/uma-vasp-cli/CHANGELOG.md index 1d5a1efc..53f9c2f3 100644 --- a/apps/examples/uma-vasp-cli/CHANGELOG.md +++ b/apps/examples/uma-vasp-cli/CHANGELOG.md @@ -1,5 +1,14 @@ # @lightsparkdev/uma-vasp-cli +## 0.0.22 + +### Patch Changes + +- Updated dependencies [1a063b6] +- Updated dependencies [1a063b6] + - @lightsparkdev/core@1.2.4 + - @lightsparkdev/lightspark-sdk@1.8.6 + ## 0.0.21 ### Patch Changes diff --git a/apps/examples/uma-vasp-cli/package.json b/apps/examples/uma-vasp-cli/package.json index 17525255..538995ad 100644 --- a/apps/examples/uma-vasp-cli/package.json +++ b/apps/examples/uma-vasp-cli/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/uma-vasp-cli", - "version": "0.0.21", + "version": "0.0.22", "private": true, "description": "CLI for the Demo UMA VASP in ../apps/examples/uma-vasp", "main": "./dist/index.js", @@ -43,8 +43,8 @@ }, "dependencies": { "@inquirer/prompts": "^1.1.3", - "@lightsparkdev/core": "1.2.3", - "@lightsparkdev/lightspark-sdk": "1.8.5", + "@lightsparkdev/core": "1.2.4", + "@lightsparkdev/lightspark-sdk": "1.8.6", "@uma-sdk/core": "^1.2.0", "chalk": "^5.3.0", "commander": "^11.0.0" diff --git a/apps/examples/uma-vasp/CHANGELOG.md b/apps/examples/uma-vasp/CHANGELOG.md index 6ac4068c..615e87df 100644 --- a/apps/examples/uma-vasp/CHANGELOG.md +++ b/apps/examples/uma-vasp/CHANGELOG.md @@ -1,5 +1,14 @@ # @lightsparkdev/uma-vasp +## 0.0.42 + +### Patch Changes + +- Updated dependencies [1a063b6] +- Updated dependencies [1a063b6] + - @lightsparkdev/core@1.2.4 + - @lightsparkdev/lightspark-sdk@1.8.6 + ## 0.0.41 ### Patch Changes diff --git a/apps/examples/uma-vasp/package.json b/apps/examples/uma-vasp/package.json index 3d2342b4..657f2ccc 100644 --- a/apps/examples/uma-vasp/package.json +++ b/apps/examples/uma-vasp/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/uma-vasp", - "version": "0.0.41", + "version": "0.0.42", "private": true, "type": "module", "scripts": { @@ -13,8 +13,8 @@ }, "main": "dist/index.js", "dependencies": { - "@lightsparkdev/core": "1.2.3", - "@lightsparkdev/lightspark-sdk": "1.8.5", + "@lightsparkdev/core": "1.2.4", + "@lightsparkdev/lightspark-sdk": "1.8.6", "@uma-sdk/core": "^1.2.0", "express": "^4.18.2", "uuid": "^9.0.0", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 0b3219e7..0bc2eabf 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,12 @@ # @lightsparkdev/core +## 1.2.4 + +### Patch Changes + +- 1a063b6: - Add MXN to currency conversion util +- 1a063b6: - Remove text-encoding dependency previously needed for React Native support + ## 1.2.3 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index b8cac263..b160dff1 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/core", - "version": "1.2.3", + "version": "1.2.4", "description": "Lightspark JS SDK", "author": "Lightspark Inc.", "keywords": [ diff --git a/packages/crypto-wasm/CHANGELOG.md b/packages/crypto-wasm/CHANGELOG.md index 4d257749..c9f036b9 100644 --- a/packages/crypto-wasm/CHANGELOG.md +++ b/packages/crypto-wasm/CHANGELOG.md @@ -1,5 +1,13 @@ # @lightsparkdev/crypto-wasm +## 0.1.7 + +### Patch Changes + +- Updated dependencies [1a063b6] +- Updated dependencies [1a063b6] + - @lightsparkdev/core@1.2.4 + ## 0.1.6 ### Patch Changes diff --git a/packages/crypto-wasm/package.json b/packages/crypto-wasm/package.json index bf9f5618..b59cc908 100644 --- a/packages/crypto-wasm/package.json +++ b/packages/crypto-wasm/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/crypto-wasm", - "version": "0.1.6", + "version": "0.1.7", "type": "module", "files": [ "crypto_bg.wasm", @@ -12,7 +12,7 @@ "test": "node --experimental-vm-modules $(yarn bin jest) --no-cache --runInBand --bail" }, "dependencies": { - "@lightsparkdev/core": "1.2.3" + "@lightsparkdev/core": "1.2.4" }, "devDependencies": { "jest": "^29.6.2", diff --git a/packages/lightspark-cli/CHANGELOG.md b/packages/lightspark-cli/CHANGELOG.md index b6ec2074..785cfb1c 100644 --- a/packages/lightspark-cli/CHANGELOG.md +++ b/packages/lightspark-cli/CHANGELOG.md @@ -1,5 +1,15 @@ # @lightsparkdev/lightspark-cli +## 0.0.60 + +### Patch Changes + +- Updated dependencies [1a063b6] +- Updated dependencies [1a063b6] + - @lightsparkdev/core@1.2.4 + - @lightsparkdev/lightspark-sdk@1.8.6 + - @lightsparkdev/crypto-wasm@0.1.7 + ## 0.0.59 ### Patch Changes diff --git a/packages/lightspark-cli/package.json b/packages/lightspark-cli/package.json index 29c045fe..8f62a844 100644 --- a/packages/lightspark-cli/package.json +++ b/packages/lightspark-cli/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/lightspark-cli", - "version": "0.0.59", + "version": "0.0.60", "description": "CLI for the Lightspark JS sdk", "main": "./dist/index.js", "bin": { @@ -44,9 +44,9 @@ }, "dependencies": { "@inquirer/prompts": "^1.1.3", - "@lightsparkdev/core": "1.2.3", - "@lightsparkdev/crypto-wasm": "0.1.6", - "@lightsparkdev/lightspark-sdk": "1.8.5", + "@lightsparkdev/core": "1.2.4", + "@lightsparkdev/crypto-wasm": "0.1.7", + "@lightsparkdev/lightspark-sdk": "1.8.6", "commander": "^11.0.0", "dayjs": "^1.11.7", "dotenv": "^16.3.1", diff --git a/packages/lightspark-sdk/CHANGELOG.md b/packages/lightspark-sdk/CHANGELOG.md index bee102bd..00d73055 100644 --- a/packages/lightspark-sdk/CHANGELOG.md +++ b/packages/lightspark-sdk/CHANGELOG.md @@ -1,5 +1,15 @@ # @lightsparkdev/lightspark-sdk +## 1.8.6 + +### Patch Changes + +- 1a063b6: - Remove text-encoding dependency previously needed for React Native support +- Updated dependencies [1a063b6] +- Updated dependencies [1a063b6] + - @lightsparkdev/core@1.2.4 + - @lightsparkdev/crypto-wasm@0.1.7 + ## 1.8.5 ### Patch Changes diff --git a/packages/lightspark-sdk/package.json b/packages/lightspark-sdk/package.json index 3ec60632..e917f90a 100644 --- a/packages/lightspark-sdk/package.json +++ b/packages/lightspark-sdk/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/lightspark-sdk", - "version": "1.8.5", + "version": "1.8.6", "description": "Lightspark JS SDK", "author": "Lightspark Inc.", "keywords": [ @@ -82,8 +82,8 @@ }, "license": "Apache-2.0", "dependencies": { - "@lightsparkdev/core": "1.2.3", - "@lightsparkdev/crypto-wasm": "0.1.6", + "@lightsparkdev/core": "1.2.4", + "@lightsparkdev/crypto-wasm": "0.1.7", "crypto-browserify": "^3.12.0", "dayjs": "^1.11.7", "dotenv": "^16.3.1", diff --git a/packages/oauth/CHANGELOG.md b/packages/oauth/CHANGELOG.md index 866891fd..925fd908 100644 --- a/packages/oauth/CHANGELOG.md +++ b/packages/oauth/CHANGELOG.md @@ -1,5 +1,14 @@ # @lightsparkdev/oauth +## 0.1.49 + +### Patch Changes + +- 1a063b6: - Remove text-encoding dependency previously needed for React Native support +- Updated dependencies [1a063b6] +- Updated dependencies [1a063b6] + - @lightsparkdev/core@1.2.4 + ## 0.1.48 ### Patch Changes diff --git a/packages/oauth/package.json b/packages/oauth/package.json index 51d6ec02..6367d87d 100644 --- a/packages/oauth/package.json +++ b/packages/oauth/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/oauth", - "version": "0.1.48", + "version": "0.1.49", "private": true, "description": "Lightspark JS Oauth SDK", "author": "Lightspark Inc.", @@ -48,7 +48,7 @@ }, "license": "Apache-2.0", "dependencies": { - "@lightsparkdev/core": "1.2.3", + "@lightsparkdev/core": "1.2.4", "@openid/appauth": "^1.3.1", "auto-bind": "^5.0.1", "dayjs": "^1.11.7" diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 23d89445..e1627999 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,16 @@ # @lightsparkdev/ui +## 1.0.11 + +### Patch Changes + +- 1a063b6: - PendingValue improvements + - Fix circular dep issue with typography and toReactNodes utils + - Add theming for CardForm +- Updated dependencies [1a063b6] +- Updated dependencies [1a063b6] + - @lightsparkdev/core@1.2.4 + ## 1.0.10 ### Patch Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index 742b55e2..a4f22890 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@lightsparkdev/ui", - "version": "1.0.10", + "version": "1.0.11", "main": "./dist/index.js", "module": "./dist/index.js", "types": "./dist/index.d.ts", @@ -58,7 +58,7 @@ "@emotion/css": "^11.11.0", "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", - "@lightsparkdev/core": "1.2.3", + "@lightsparkdev/core": "1.2.4", "@rollup/plugin-url": "^8.0.2", "@simbathesailor/use-what-changed": "^2.0.0", "@svgr/core": "^8.1.0", From efa23843b1d5f20d85b849104f237f4a1abe80c1 Mon Sep 17 00:00:00 2001 From: Lightspark Eng Date: Thu, 10 Oct 2024 05:58:54 +0000 Subject: [PATCH 05/19] CI update lock file for PR --- yarn.lock | 54 +++++++++++++++++++++++++++--------------------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/yarn.lock b/yarn.lock index 803c02c3..d970a1f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2072,7 +2072,7 @@ __metadata: languageName: node linkType: hard -"@lightsparkdev/core@npm:1.2.3, @lightsparkdev/core@workspace:packages/core": +"@lightsparkdev/core@npm:1.2.4, @lightsparkdev/core@workspace:packages/core": version: 0.0.0-use.local resolution: "@lightsparkdev/core@workspace:packages/core" dependencies: @@ -2104,11 +2104,11 @@ __metadata: languageName: unknown linkType: soft -"@lightsparkdev/crypto-wasm@npm:0.1.6, @lightsparkdev/crypto-wasm@workspace:packages/crypto-wasm": +"@lightsparkdev/crypto-wasm@npm:0.1.7, @lightsparkdev/crypto-wasm@workspace:packages/crypto-wasm": version: 0.0.0-use.local resolution: "@lightsparkdev/crypto-wasm@workspace:packages/crypto-wasm" dependencies: - "@lightsparkdev/core": "npm:1.2.3" + "@lightsparkdev/core": "npm:1.2.4" jest: "npm:^29.6.2" ts-jest: "npm:^29.1.1" typescript: "npm:^5.6.2" @@ -2145,10 +2145,10 @@ __metadata: resolution: "@lightsparkdev/lightspark-cli@workspace:packages/lightspark-cli" dependencies: "@inquirer/prompts": "npm:^1.1.3" - "@lightsparkdev/core": "npm:1.2.3" - "@lightsparkdev/crypto-wasm": "npm:0.1.6" + "@lightsparkdev/core": "npm:1.2.4" + "@lightsparkdev/crypto-wasm": "npm:0.1.7" "@lightsparkdev/eslint-config": "npm:*" - "@lightsparkdev/lightspark-sdk": "npm:1.8.5" + "@lightsparkdev/lightspark-sdk": "npm:1.8.6" "@lightsparkdev/tsconfig": "npm:0.0.1" "@types/jsonwebtoken": "npm:^9.0.2" "@types/node": "npm:^20.2.5" @@ -2174,12 +2174,12 @@ __metadata: languageName: unknown linkType: soft -"@lightsparkdev/lightspark-sdk@npm:1.8.5, @lightsparkdev/lightspark-sdk@workspace:packages/lightspark-sdk": +"@lightsparkdev/lightspark-sdk@npm:1.8.6, @lightsparkdev/lightspark-sdk@workspace:packages/lightspark-sdk": version: 0.0.0-use.local resolution: "@lightsparkdev/lightspark-sdk@workspace:packages/lightspark-sdk" dependencies: - "@lightsparkdev/core": "npm:1.2.3" - "@lightsparkdev/crypto-wasm": "npm:0.1.6" + "@lightsparkdev/core": "npm:1.2.4" + "@lightsparkdev/crypto-wasm": "npm:0.1.7" "@lightsparkdev/eslint-config": "npm:*" "@lightsparkdev/tsconfig": "npm:0.0.1" "@types/crypto-js": "npm:^4.1.1" @@ -2211,9 +2211,9 @@ __metadata: version: 0.0.0-use.local resolution: "@lightsparkdev/nodejs-scripts@workspace:apps/examples/nodejs-scripts" dependencies: - "@lightsparkdev/core": "npm:1.2.3" + "@lightsparkdev/core": "npm:1.2.4" "@lightsparkdev/eslint-config": "npm:*" - "@lightsparkdev/lightspark-sdk": "npm:1.8.5" + "@lightsparkdev/lightspark-sdk": "npm:1.8.6" "@types/jest": "npm:^29.5.3" "@types/node": "npm:^20.2.5" commander: "npm:^11.0.0" @@ -2239,10 +2239,10 @@ __metadata: "@emotion/react": "npm:^11.11.0" "@emotion/styled": "npm:^11.11.0" "@lightsparkdev/eslint-config": "npm:*" - "@lightsparkdev/lightspark-sdk": "npm:1.8.5" + "@lightsparkdev/lightspark-sdk": "npm:1.8.6" "@lightsparkdev/oauth": "npm:*" "@lightsparkdev/tsconfig": "npm:*" - "@lightsparkdev/ui": "npm:1.0.10" + "@lightsparkdev/ui": "npm:1.0.11" "@types/jest": "npm:^29.5.3" "@types/node": "npm:^20.2.5" "@types/react": "npm:^18.2.12" @@ -2264,7 +2264,7 @@ __metadata: version: 0.0.0-use.local resolution: "@lightsparkdev/oauth@workspace:packages/oauth" dependencies: - "@lightsparkdev/core": "npm:1.2.3" + "@lightsparkdev/core": "npm:1.2.4" "@lightsparkdev/eslint-config": "npm:*" "@lightsparkdev/tsconfig": "npm:0.0.1" "@openid/appauth": "npm:^1.3.1" @@ -2286,8 +2286,8 @@ __metadata: version: 0.0.0-use.local resolution: "@lightsparkdev/remote-signing-server@workspace:apps/examples/remote-signing-server" dependencies: - "@lightsparkdev/core": "npm:1.2.3" - "@lightsparkdev/lightspark-sdk": "npm:1.8.5" + "@lightsparkdev/core": "npm:1.2.4" + "@lightsparkdev/lightspark-sdk": "npm:1.8.6" "@lightsparkdev/tsconfig": "npm:*" "@types/jest": "npm:^29.5.3" "@types/node": "npm:^20.2.5" @@ -2318,10 +2318,10 @@ __metadata: dependencies: "@emotion/react": "npm:^11.11.0" "@emotion/styled": "npm:^11.11.0" - "@lightsparkdev/core": "npm:1.2.3" - "@lightsparkdev/lightspark-sdk": "npm:1.8.5" + "@lightsparkdev/core": "npm:1.2.4" + "@lightsparkdev/lightspark-sdk": "npm:1.8.6" "@lightsparkdev/tsconfig": "npm:*" - "@lightsparkdev/ui": "npm:1.0.10" + "@lightsparkdev/ui": "npm:1.0.11" "@lightsparkdev/vite": "npm:*" "@types/chrome": "npm:^0.0.254" "@types/jest": "npm:^29.5.3" @@ -2359,10 +2359,10 @@ __metadata: "@emotion/jest": "npm:^11.13.0" "@emotion/react": "npm:^11.11.0" "@emotion/styled": "npm:^11.11.0" - "@lightsparkdev/core": "npm:1.2.3" + "@lightsparkdev/core": "npm:1.2.4" "@lightsparkdev/eslint-config": "npm:*" "@lightsparkdev/tsconfig": "npm:*" - "@lightsparkdev/ui": "npm:1.0.10" + "@lightsparkdev/ui": "npm:1.0.11" "@lightsparkdev/vite": "npm:*" "@testing-library/jest-dom": "npm:^6.1.2" "@types/jest": "npm:^29.5.3" @@ -2387,7 +2387,7 @@ __metadata: languageName: unknown linkType: soft -"@lightsparkdev/ui@npm:1.0.10, @lightsparkdev/ui@workspace:packages/ui": +"@lightsparkdev/ui@npm:1.0.11, @lightsparkdev/ui@workspace:packages/ui": version: 0.0.0-use.local resolution: "@lightsparkdev/ui@workspace:packages/ui" dependencies: @@ -2395,7 +2395,7 @@ __metadata: "@emotion/css": "npm:^11.11.0" "@emotion/react": "npm:^11.11.0" "@emotion/styled": "npm:^11.11.0" - "@lightsparkdev/core": "npm:1.2.3" + "@lightsparkdev/core": "npm:1.2.4" "@lightsparkdev/eslint-config": "npm:*" "@lightsparkdev/tsconfig": "npm:0.0.1" "@microsoft/api-extractor": "npm:^7.47.9" @@ -2455,9 +2455,9 @@ __metadata: resolution: "@lightsparkdev/uma-vasp-cli@workspace:apps/examples/uma-vasp-cli" dependencies: "@inquirer/prompts": "npm:^1.1.3" - "@lightsparkdev/core": "npm:1.2.3" + "@lightsparkdev/core": "npm:1.2.4" "@lightsparkdev/eslint-config": "npm:*" - "@lightsparkdev/lightspark-sdk": "npm:1.8.5" + "@lightsparkdev/lightspark-sdk": "npm:1.8.6" "@lightsparkdev/tsconfig": "npm:0.0.1" "@types/chalk": "npm:^2.2.0" "@types/node": "npm:^20.2.5" @@ -2481,8 +2481,8 @@ __metadata: version: 0.0.0-use.local resolution: "@lightsparkdev/uma-vasp@workspace:apps/examples/uma-vasp" dependencies: - "@lightsparkdev/core": "npm:1.2.3" - "@lightsparkdev/lightspark-sdk": "npm:1.8.5" + "@lightsparkdev/core": "npm:1.2.4" + "@lightsparkdev/lightspark-sdk": "npm:1.8.6" "@lightsparkdev/tsconfig": "npm:*" "@types/body-parser": "npm:^1.19.5" "@types/express": "npm:^4.17.21" From d9465315ec4afa91b6993617273d484c592e3314 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Thu, 10 Oct 2024 12:06:41 -0700 Subject: [PATCH 06/19] [site] Fix typography for WalletActionPreview (#12836) GitOrigin-RevId: 4108ea67a25f24bad5ee7374d0e324073bf0d9b7 --- .../ui/src/components/ClipboardTextField.tsx | 26 +++++++++++++++++-- packages/ui/src/components/PendingValue.tsx | 2 -- packages/ui/src/styles/tokens/typography.ts | 9 +++++++ 3 files changed, 33 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/components/ClipboardTextField.tsx b/packages/ui/src/components/ClipboardTextField.tsx index 5c367cfb..c330aedf 100644 --- a/packages/ui/src/components/ClipboardTextField.tsx +++ b/packages/ui/src/components/ClipboardTextField.tsx @@ -1,8 +1,10 @@ +import { useTheme } from "@emotion/react"; import styled from "@emotion/styled"; import type { MouseEvent } from "react"; import { useCallback } from "react"; import { useClipboard } from "../hooks/useClipboard.js"; import { type ThemeOrColorKey } from "../styles/themes.js"; +import { getLineHeightNumberForTypographyType } from "../styles/tokens/typography.js"; import { applyTypography } from "../styles/typography.js"; import { lineClamp as lineClampCSS } from "../styles/utils.js"; import { elide, type ElideArgs } from "../utils/strings.js"; @@ -39,6 +41,7 @@ export function ClipboardTextField({ typography, clipboardCallbacks, }: ClipboardTextFieldProps) { + const theme = useTheme(); const { canWriteToClipboard, writeTextToClipboard } = useClipboard(clipboardCallbacks); const addLineClamp = Boolean(maxLines && maxLines > 1); @@ -81,6 +84,15 @@ export function ClipboardTextField({ maxLines, }; + const typographyType = typography?.type || "Body"; + const typographySize = typography?.size || "ExtraSmall"; + + const lineHeight = getLineHeightNumberForTypographyType( + typographyType, + typographySize, + theme, + ); + const iconColor = iconColorProp || typography?.color || "inherit"; return canWriteToClipboard && value ? ( {icon && iconSide === "left" ? ( - + ) : null} {valueNode} {icon && iconSide === "right" ? ( - + ) : null} ) : ( diff --git a/packages/ui/src/components/PendingValue.tsx b/packages/ui/src/components/PendingValue.tsx index ddc5202d..ce59dae4 100644 --- a/packages/ui/src/components/PendingValue.tsx +++ b/packages/ui/src/components/PendingValue.tsx @@ -4,7 +4,6 @@ import { Fragment } from "react"; import { themeOrWithKey, themes, type Themes } from "../styles/themes.js"; import { getLineHeightForTypographyType, - type LineHeightKey, type TokenSizeKey, type TypographyTypeKey, } from "../styles/tokens/typography.js"; @@ -27,7 +26,6 @@ const bgPosition = keyframes` type PendingValueProps = { animate?: boolean; content?: ToReactNodesArgs | undefined; - height?: LineHeightKey | undefined; typography?: PartialSimpleTypographyProps; width?: number | undefined; forceTheme?: Themes | undefined; diff --git a/packages/ui/src/styles/tokens/typography.ts b/packages/ui/src/styles/tokens/typography.ts index eaefa78c..a4e2932f 100644 --- a/packages/ui/src/styles/tokens/typography.ts +++ b/packages/ui/src/styles/tokens/typography.ts @@ -4451,3 +4451,12 @@ export function getLineHeightForTypographyType( return desktopTokens.lineHeight; } + +export function getLineHeightNumberForTypographyType( + type: TypographyTypeKey, + size: TokenSizeKey, + theme: Theme, +) { + const lineHeight = getLineHeightForTypographyType(type, size, theme); + return parseFloat(lineHeight); +} From a56288895590ea6614f539706213790c3ed99d94 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Thu, 10 Oct 2024 12:42:48 -0700 Subject: [PATCH 07/19] [uma-bridge] Move transactions activity to home page (#12763) GitOrigin-RevId: d5ef8f893a7440183de3ff9d303bc374bbabc31a --- .../ui/src/components/CardForm/CardForm.tsx | 18 ++++++++++++++++-- .../documentation/DocsBodyParagraph.tsx | 4 +++- .../documentation/DocsBodyStrongParagraph.tsx | 4 +++- .../components/documentation/DocsHeadline.tsx | 15 +++++++-------- .../typography/base/getPropDefaults.tsx | 1 + packages/ui/src/components/typography/types.ts | 7 +++++-- .../components/typography/typographyStyles.tsx | 2 ++ 7 files changed, 37 insertions(+), 14 deletions(-) diff --git a/packages/ui/src/components/CardForm/CardForm.tsx b/packages/ui/src/components/CardForm/CardForm.tsx index f2809de0..95eb2aed 100644 --- a/packages/ui/src/components/CardForm/CardForm.tsx +++ b/packages/ui/src/components/CardForm/CardForm.tsx @@ -89,6 +89,8 @@ const descriptionTypography = { }, } as const; +type BelowCardFormContentGap = 0 | 16; + type CardFormProps = { children?: ReactNode; disabled?: boolean; @@ -105,6 +107,7 @@ type CardFormProps = { textAlign?: CardFormTextAlign; shadow?: CardFormShadow; belowFormContent?: ToReactNodesArgs | undefined; + belowFormContentGap?: BelowCardFormContentGap | undefined; }; type ResolvePropsArgs = { @@ -192,6 +195,7 @@ export function CardForm({ shadow: shadowProp, textAlign: textAlignProp, belowFormContent, + belowFormContentGap = 0, }: CardFormProps) { const theme = useTheme(); const { @@ -277,7 +281,9 @@ export function CardForm({ {content} )} - {belowFormContentNodes} + + {belowFormContentNodes} + ); } @@ -297,9 +303,17 @@ const CardFormContent = styled.div` align-self: center; `; -const BelowCardFormContent = styled.div` +type BelowCardFormContentProps = { + gap: BelowCardFormContentGap; +}; + +const BelowCardFormContent = styled.div` text-align: center; margin-top: 32px; + display: flex; + align-items: center; + justify-content: center; + gap: ${({ gap }) => gap}px; ${bp.sm(` margin-bottom: 32px; diff --git a/packages/ui/src/components/documentation/DocsBodyParagraph.tsx b/packages/ui/src/components/documentation/DocsBodyParagraph.tsx index 5f2e0587..b1636374 100644 --- a/packages/ui/src/components/documentation/DocsBodyParagraph.tsx +++ b/packages/ui/src/components/documentation/DocsBodyParagraph.tsx @@ -10,7 +10,7 @@ import { StyledBody } from "../typography/base/Body.js"; type DocsBodyParagraphProps = PartialBy< ComponentProps, - "size" | "block" | "colorProp" | "displayProp" | "hideOverflow" + "size" | "block" | "colorProp" | "displayProp" | "hideOverflow" | "textAlign" >; export function DocsBodyParagraph({ @@ -18,6 +18,7 @@ export function DocsBodyParagraph({ displayProp, hideOverflow = false, size = "Medium", + textAlign, ...rest }: DocsBodyParagraphProps) { return ( @@ -28,6 +29,7 @@ export function DocsBodyParagraph({ colorProp={colorProp} displayProp={displayProp} hideOverflow={hideOverflow} + textAlign={textAlign} size={size} /> ); diff --git a/packages/ui/src/components/documentation/DocsBodyStrongParagraph.tsx b/packages/ui/src/components/documentation/DocsBodyStrongParagraph.tsx index 99aa189b..db334d32 100644 --- a/packages/ui/src/components/documentation/DocsBodyStrongParagraph.tsx +++ b/packages/ui/src/components/documentation/DocsBodyStrongParagraph.tsx @@ -11,7 +11,7 @@ import { StyledBodyStrong } from "../typography/base/BodyStrong.js"; type DocsBodyStrongParagraphProps = PartialBy< ComponentProps, - "size" | "block" | "colorProp" | "displayProp" | "hideOverflow" + "size" | "block" | "colorProp" | "displayProp" | "hideOverflow" | "textAlign" >; export function DocsBodyStrongParagraph({ @@ -20,6 +20,7 @@ export function DocsBodyStrongParagraph({ displayProp, hideOverflow = false, size = "Medium", + textAlign, ...rest }: DocsBodyStrongParagraphProps) { return ( @@ -31,6 +32,7 @@ export function DocsBodyStrongParagraph({ displayProp={displayProp} hideOverflow={hideOverflow} size={size} + textAlign={textAlign} /> ); diff --git a/packages/ui/src/components/documentation/DocsHeadline.tsx b/packages/ui/src/components/documentation/DocsHeadline.tsx index b6b11ee6..6ef423bb 100644 --- a/packages/ui/src/components/documentation/DocsHeadline.tsx +++ b/packages/ui/src/components/documentation/DocsHeadline.tsx @@ -1,11 +1,11 @@ "use client"; import React from "react"; -import { type FontColorKey } from "../../styles/themes.js"; -import { type TokenSizeKey } from "../../styles/tokens/typography.js"; import { isReactNodeWithChildren } from "../../utils/isReactNodeWithChildren.js"; -import { StyledHeadline } from "../typography/base//Headline.js"; -import { type Heading } from "../typography/base/Headline.js"; +import { + type HeadlineProps, + StyledHeadline, +} from "../typography/base/Headline.js"; /* NOTE: Should only be used for documentation sites where we can't currently control the MDX to ReactNode rendering. Instead we allow these components to render any @@ -70,16 +70,14 @@ const toKebabCase = (str: string) => { type DocsHeadlineProps = { children: React.ReactNode; - size?: TokenSizeKey; - heading?: Heading; - color?: FontColorKey | undefined; -}; +} & Partial>; export const DocsHeadline = ({ children, color, size = "Medium", heading = "h1", + textAlign, }: DocsHeadlineProps) => { const id = toKebabCase(getHeaderId(children as React.ReactElement)); return ( @@ -90,6 +88,7 @@ export const DocsHeadline = ({ colorProp={color} displayProp="block" hideOverflow={false} + textAlign={textAlign} block > {children} diff --git a/packages/ui/src/components/typography/base/getPropDefaults.tsx b/packages/ui/src/components/typography/base/getPropDefaults.tsx index 41a9d787..ae220a71 100644 --- a/packages/ui/src/components/typography/base/getPropDefaults.tsx +++ b/packages/ui/src/components/typography/base/getPropDefaults.tsx @@ -13,6 +13,7 @@ export function getPropDefaultsBase< id: props.id, display: props.display, size: props.size || "Medium", + textAlign: props.textAlign, children: props.children ? stringToNodes(props.children) : null, ...extra, }; diff --git a/packages/ui/src/components/typography/types.ts b/packages/ui/src/components/typography/types.ts index 6b3e6b35..4cc88d8a 100644 --- a/packages/ui/src/components/typography/types.ts +++ b/packages/ui/src/components/typography/types.ts @@ -7,6 +7,7 @@ import type { } from "../../styles/tokens/typography.js"; export type AllowedDisplay = "flex" | "block" | "inline-flex"; +export type TextAlign = "left" | "right" | "center"; export type CommonTypographyProps = { /* children must be a string. use content prop for more complex content */ @@ -17,16 +18,18 @@ export type CommonTypographyProps = { hideOverflow?: boolean | undefined; id?: string | undefined; display?: AllowedDisplay | undefined; + textAlign?: TextAlign | undefined; }; export type CommonStyledTypographyProps = { children: ReactNode; size: TokenSizeKey; - /* color is an inherent html prop so we need to use colorProp instead */ - colorProp: FontColorKey | undefined; block: boolean; hideOverflow: boolean; + textAlign: TextAlign | undefined; + /* these are an inherent html props so we need to change the name, append prop: */ displayProp: AllowedDisplay | undefined; + colorProp: FontColorKey | undefined; }; /* Common types for external component use of typography args */ diff --git a/packages/ui/src/components/typography/typographyStyles.tsx b/packages/ui/src/components/typography/typographyStyles.tsx index 22191177..4af39c8c 100644 --- a/packages/ui/src/components/typography/typographyStyles.tsx +++ b/packages/ui/src/components/typography/typographyStyles.tsx @@ -6,6 +6,7 @@ export const typographyStyles = ({ block: blockProp, hideOverflow, displayProp, + textAlign, }: { theme: Theme } & CommonStyledTypographyProps) => { const displayValue = blockProp || hideOverflow ? "block" : displayProp || null; @@ -13,6 +14,7 @@ export const typographyStyles = ({ /* Margins should always be set in parent style contexts eg Article: */ margin: 0; + ${textAlign ? `text-align: ${textAlign};` : ""} ${displayValue ? `display: ${displayValue};` : ""} ${hideOverflow ? "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" From 3b8de74dfd2beda204bc46f7584b80eb9a824f71 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Fri, 11 Oct 2024 11:39:09 -0700 Subject: [PATCH 08/19] [ui] Enable single defaultTypography argument for setDefaultTypography and add to Modal (#12768) GitOrigin-RevId: 48e85847d63b719518f1c4ef4a2057332d6e830e --- .../src/tests/toReactNodes.test.tsx | 5 +-- packages/ui/src/components/Badge.tsx | 13 ++---- packages/ui/src/components/Checkbox.tsx | 13 ++---- packages/ui/src/components/Modal.tsx | 20 ++++----- .../ui/src/components/TextIconAligner.tsx | 14 ++----- .../toReactNodes/setReactNodesTypography.tsx | 41 ++++++++++++------- 6 files changed, 48 insertions(+), 58 deletions(-) diff --git a/apps/examples/ui-test-app/src/tests/toReactNodes.test.tsx b/apps/examples/ui-test-app/src/tests/toReactNodes.test.tsx index 171a0451..87896295 100644 --- a/apps/examples/ui-test-app/src/tests/toReactNodes.test.tsx +++ b/apps/examples/ui-test-app/src/tests/toReactNodes.test.tsx @@ -484,10 +484,7 @@ describe("toReactNodes", () => { } as const; const nodes = setDefaultReactNodesTypography( [stringNode, linkNode, textNode], - { - link: defaultTypography, - text: defaultTypography, - }, + { default: defaultTypography }, ); expect(nodes).toEqual([ diff --git a/packages/ui/src/components/Badge.tsx b/packages/ui/src/components/Badge.tsx index f1289a2b..91237bf0 100644 --- a/packages/ui/src/components/Badge.tsx +++ b/packages/ui/src/components/Badge.tsx @@ -44,16 +44,9 @@ export function Badge({ color: typographyProp?.color || (kind === "danger" ? "danger" : "text"), } as const; - const defaultTypographyMap = { - link: defaultTypography, - text: defaultTypography, - nextLink: defaultTypography, - }; - - const nodesWithTypography = setDefaultReactNodesTypography( - contentProp, - defaultTypographyMap, - ); + const nodesWithTypography = setDefaultReactNodesTypography(contentProp, { + default: defaultTypography, + }); const content = toReactNodes(nodesWithTypography); diff --git a/packages/ui/src/components/Checkbox.tsx b/packages/ui/src/components/Checkbox.tsx index c012dc84..3d09264a 100644 --- a/packages/ui/src/components/Checkbox.tsx +++ b/packages/ui/src/components/Checkbox.tsx @@ -34,16 +34,9 @@ export function Checkbox({ color: typographyProp?.color || "text", } as const; - const defaultTypographyMap = { - link: defaultTypography, - text: defaultTypography, - nextLink: defaultTypography, - }; - - const nodesWithTypography = setDefaultReactNodesTypography( - label, - defaultTypographyMap, - ); + const nodesWithTypography = setDefaultReactNodesTypography(label, { + default: defaultTypography, + }); const content = toReactNodes(nodesWithTypography); diff --git a/packages/ui/src/components/Modal.tsx b/packages/ui/src/components/Modal.tsx index 7fe04f09..ef01b7b9 100644 --- a/packages/ui/src/components/Modal.tsx +++ b/packages/ui/src/components/Modal.tsx @@ -18,6 +18,7 @@ import { overflowAutoWithoutScrollbars } from "../styles/utils.js"; import { z } from "../styles/z-index.js"; import { type NewRoutesType } from "../types/index.js"; import { select } from "../utils/emotion.js"; +import { setDefaultReactNodesTypography } from "../utils/toReactNodes/setReactNodesTypography.js"; import { toReactNodes, type ToReactNodesArgs, @@ -30,7 +31,6 @@ import { type LoadingKind } from "./Loading.js"; import { ProgressBar, type ProgressBarProps } from "./ProgressBar.js"; import { UnstyledButton } from "./UnstyledButton.js"; import { Body } from "./typography/Body.js"; -import { Headline } from "./typography/Headline.js"; import { headlineSelector } from "./typography/base/Headline.js"; type ExtraAction = ComponentProps & { @@ -288,15 +288,15 @@ export function Modal({ let titleContent: React.ReactNode | null = null; if (title) { - if (typeof title === "string") { - titleContent = ( - - {title} - - ); - } else { - titleContent = toReactNodes(title); - } + const defaultTypography = { + type: "Headline", + heading: "h4", + size: TokenSize.Small, + } as const; + const titleNodesWithTypography = setDefaultReactNodesTypography(title, { + default: defaultTypography, + }); + titleContent = toReactNodes(titleNodesWithTypography); } let descriptionContent: React.ReactNode | null = null; diff --git a/packages/ui/src/components/TextIconAligner.tsx b/packages/ui/src/components/TextIconAligner.tsx index fb199cfd..d0303048 100644 --- a/packages/ui/src/components/TextIconAligner.tsx +++ b/packages/ui/src/components/TextIconAligner.tsx @@ -54,16 +54,10 @@ export function TextIconAligner({ color: typographyProp?.color || "text", } as const; - const defaultTypographyMap = { - link: defaultTypography, - text: defaultTypography, - nextLink: defaultTypography, - }; - - const nodesWithTypography = setDefaultReactNodesTypography( - contentProp, - defaultTypographyMap, - ); + const nodesWithTypography = setDefaultReactNodesTypography(contentProp, { + default: defaultTypography, + link: { ...defaultTypography, color: "link" }, + }); const content = toReactNodes(nodesWithTypography); diff --git a/packages/ui/src/utils/toReactNodes/setReactNodesTypography.tsx b/packages/ui/src/utils/toReactNodes/setReactNodesTypography.tsx index 0b79831d..496ee12f 100644 --- a/packages/ui/src/utils/toReactNodes/setReactNodesTypography.tsx +++ b/packages/ui/src/utils/toReactNodes/setReactNodesTypography.tsx @@ -14,6 +14,7 @@ import { import { toReactNodes, type ToReactNodesArgs } from "./toReactNodes.js"; const setReactNodesTypographyMapTypes = [ + "default", "link", "text", "nextLink", @@ -41,48 +42,56 @@ export function setReactNodesTypography( ) { const nodes = ensureArray(nodesArg); + const typographyMap = { + link: typography.link || typography.default, + text: typography.text || typography.default, + nextLink: typography.nextLink || typography.default, + currencyAmount: typography.currencyAmount || typography.default, + clipboardTextField: typography.clipboardTextField || typography.default, + }; + const nodesWithTypography = nodes.map((node) => { if (isNonTypographicReactNode(node)) { return node; - } else if (isLinkNode(node) && typography.link) { + } else if (isLinkNode(node) && typographyMap.link) { return { link: { ...node.link, typography: replaceExistingTypography - ? typography.link - : node.link.typography || typography.link, + ? typographyMap.link + : node.link.typography || typographyMap.link, }, }; - } else if (isNextLinkNode(node) && typography.nextLink) { + } else if (isNextLinkNode(node) && typographyMap.nextLink) { return { nextLink: { ...node.nextLink, typography: replaceExistingTypography - ? typography.nextLink - : node.nextLink.typography || typography.nextLink, + ? typographyMap.nextLink + : node.nextLink.typography || typographyMap.nextLink, }, }; - } else if (isCurrencyAmountNode(node) && typography.currencyAmount) { + } else if (isCurrencyAmountNode(node) && typographyMap.currencyAmount) { return { currencyAmount: { ...node.currencyAmount, - typography: typography.currencyAmount, + typography: typographyMap.currencyAmount, }, }; } else if ( isClipboardTextFieldNode(node) && - typography.clipboardTextField + typographyMap.clipboardTextField ) { return { clipboardTextField: { ...node.clipboardTextField, - typography: typography.clipboardTextField, + typography: typographyMap.clipboardTextField, }, }; - } else if ((isTextNode(node) || isString(node)) && typography.text) { + } else if ((isTextNode(node) || isString(node)) && typographyMap.text) { return setTextNodeTypography( node, - typography.text, + typographyMap.text, replaceExistingTypography, ); } @@ -136,7 +145,11 @@ export function toReactNodesWithTypographyMap( several components while still allowing downstream instances to override as needed. */ export function setDefaultReactNodesTypography( nodesArg: ToReactNodesArgs, - nodesTypographyMap: SetReactNodesTypographyMap, + setDefaultReactNodesTypographyArg: SetReactNodesTypographyMap, ) { - return setReactNodesTypography(nodesArg, nodesTypographyMap, false); + return setReactNodesTypography( + nodesArg, + setDefaultReactNodesTypographyArg, + false, + ); } From eadb3e00cf986f35215cf1b2fbd9948230ea96c5 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Fri, 11 Oct 2024 12:47:21 -0700 Subject: [PATCH 09/19] [ui] Move CardForm description typography to theme (#12857) GitOrigin-RevId: 06d26aedacc52a66c32e270830fc8526aef07382 --- .../ui/src/components/CardForm/CardForm.tsx | 52 +++++-------------- .../ui/src/styles/themeDefaults/cardForm.tsx | 15 ++++++ packages/ui/src/styles/themes.tsx | 12 +++++ 3 files changed, 39 insertions(+), 40 deletions(-) diff --git a/packages/ui/src/components/CardForm/CardForm.tsx b/packages/ui/src/components/CardForm/CardForm.tsx index 95eb2aed..59c4e453 100644 --- a/packages/ui/src/components/CardForm/CardForm.tsx +++ b/packages/ui/src/components/CardForm/CardForm.tsx @@ -50,45 +50,6 @@ import { TextInputHalfRow } from "../TextInput.js"; import { ToggleContainer } from "../Toggle.js"; import { Headline } from "../typography/Headline.js"; -const descriptionTypography = { - primary: { - text: { - type: "Body Strong", - size: "Small", - color: "mcNeutral", - }, - link: { - type: "Body Strong", - size: "Small", - color: "text", - }, - }, - secondary: { - text: { - type: "Body Strong", - size: "Small", - color: "mcNeutral", - }, - link: { - type: "Body Strong", - size: "Small", - color: "text", - }, - }, - tertiary: { - text: { - type: "Body", - size: "Large", - color: "mcNeutral", - }, - link: { - type: "Body", - size: "Large", - color: "text", - }, - }, -} as const; - type BelowCardFormContentGap = 0 | 16; type CardFormProps = { @@ -162,6 +123,12 @@ function resolveProps(args: ResolvePropsArgs, theme: Theme) { "smBorderWidth", theme, ); + const defaultDescriptionTypographyMap = resolveCardFormProp( + undefined, + args.kind, + "defaultDescriptionTypographyMap", + theme, + ); const props = { paddingY, @@ -174,6 +141,7 @@ function resolveProps(args: ResolvePropsArgs, theme: Theme) { backgroundColor, smBackgroundColor, smBorderWidth, + defaultDescriptionTypographyMap, }; return props; @@ -209,6 +177,7 @@ export function CardForm({ backgroundColor, smBackgroundColor, smBorderWidth, + defaultDescriptionTypographyMap, } = resolveProps( { kind, textAlign: textAlignProp, shadow: shadowProp }, theme, @@ -228,7 +197,10 @@ export function CardForm({ ); const formattedDescription = description - ? toReactNodesWithTypographyMap(description, descriptionTypography[kind]) + ? toReactNodesWithTypographyMap( + description, + defaultDescriptionTypographyMap, + ) : null; const belowFormContentNodes = belowFormContent diff --git a/packages/ui/src/styles/themeDefaults/cardForm.tsx b/packages/ui/src/styles/themeDefaults/cardForm.tsx index f06699b5..d6c9c7fa 100644 --- a/packages/ui/src/styles/themeDefaults/cardForm.tsx +++ b/packages/ui/src/styles/themeDefaults/cardForm.tsx @@ -1,3 +1,6 @@ +import type { ThemeOrColorKey } from "../themes.js"; +import type { TokenSizeKey, TypographyTypeKey } from "../tokens/typography.js"; + export type CardFormPaddingY = 40 | 56; export type CardFormPaddingX = 40 | 56; export type CardFormBorderWidth = 0 | 1; @@ -18,6 +21,18 @@ const cardFormThemeBaseProps = { backgroundColor: "bg" as CardFormBackgroundColor, smBackgroundColor: "bg" as CardFormBackgroundColor, smBorderWidth: 0 as CardFormBorderWidth, + defaultDescriptionTypographyMap: { + default: { + type: "Body Strong" as TypographyTypeKey, + size: "Small" as TokenSizeKey, + color: "mcNeutral" as ThemeOrColorKey, + }, + link: { + type: "Body Strong" as TypographyTypeKey, + size: "Small" as TokenSizeKey, + color: "text" as ThemeOrColorKey, + }, + }, } as const; export const cardFormThemeBase = { diff --git a/packages/ui/src/styles/themes.tsx b/packages/ui/src/styles/themes.tsx index e269c8d1..21bad56f 100644 --- a/packages/ui/src/styles/themes.tsx +++ b/packages/ui/src/styles/themes.tsx @@ -417,6 +417,18 @@ const bridgeBaseSettings = { cardForm: merge(cardFormThemeBase, { backgroundColor: "white", smBackgroundColor: "bg", + defaultDescriptionTypographyMap: { + default: { + type: "Body", + size: "Large", + color: "secondary", + }, + link: { + type: "Body", + size: "Large", + color: "text", + }, + }, kinds: { primary: { paddingY: 56, From 9b4f0649a43f6f024a9284ccd6bfe4cbd1139257 Mon Sep 17 00:00:00 2001 From: Corey Martin Date: Mon, 14 Oct 2024 14:06:31 -0700 Subject: [PATCH 10/19] [ui] Add typed iconProps to Icon (#12880) GitOrigin-RevId: 2d5f5a9cf990db54f8654b5312a3e0ce8927e084 --- packages/core/src/utils/types.ts | 10 ++++++++++ packages/ui/src/components/Icon/Icon.tsx | 24 +++++++++++++++-------- packages/ui/src/components/Icon/types.tsx | 8 ++++++-- packages/ui/src/icons/AI.tsx | 24 +++++++++++++++++++---- packages/ui/src/icons/Copy.tsx | 24 +++++++++++++++++++---- packages/ui/src/icons/Uma.tsx | 3 +-- packages/ui/src/icons/types.tsx | 5 +++++ 7 files changed, 78 insertions(+), 20 deletions(-) create mode 100644 packages/ui/src/icons/types.tsx diff --git a/packages/core/src/utils/types.ts b/packages/core/src/utils/types.ts index 758a4bef..670dd0e8 100644 --- a/packages/core/src/utils/types.ts +++ b/packages/core/src/utils/types.ts @@ -45,3 +45,13 @@ export type PartialBy = Omit & Partial>; /* Opposite of Partial - make all keys required with NonNullable values */ export type Complete = { [P in keyof T]-?: NonNullable }; + +/** + * RequiredKeys utility extracts all the keys of T that are required. + * For each key K in T, it checks if Pick extends {} (an empty object). If it does, that + * means K is optional; otherwise, it's required. + * The resulting type is a union of all required keys in T. + */ +export type RequiredKeys = { + [K in keyof T]-?: Record extends Pick ? never : K; +}[keyof T]; diff --git a/packages/ui/src/components/Icon/Icon.tsx b/packages/ui/src/components/Icon/Icon.tsx index 09be3935..2d846a1d 100644 --- a/packages/ui/src/components/Icon/Icon.tsx +++ b/packages/ui/src/components/Icon/Icon.tsx @@ -1,16 +1,18 @@ "use client"; import styled from "@emotion/styled"; +import { type RequiredKeys } from "@lightsparkdev/core"; +import React, { type ComponentPropsWithoutRef, type ElementType } from "react"; import { invertFillColor, invertStrokeColor } from "../../icons/constants.js"; -import * as icons from "../../icons/index.js"; import { rootFontSizePx } from "../../styles/common.js"; import { getFontColor, type FontColorKey } from "../../styles/themes.js"; import { isString } from "../../utils/strings.js"; import type { IconName } from "./types.js"; +import { iconMap } from "./types.js"; -type IconProps = { +type IconProps = { className?: string | undefined; - name: IconName; + name: I; width: number; mr?: number | "auto" | undefined; ml?: number | "auto" | undefined; @@ -18,9 +20,12 @@ type IconProps = { color?: FontColorKey | undefined; tutorialStep?: number; id?: string; -}; + /* Require iconProps if icon takes a props object and at least one of its props is required: */ +} & (RequiredKeys> extends never + ? { iconProps?: ComponentPropsWithoutRef<(typeof iconMap)[I]> } + : { iconProps: ComponentPropsWithoutRef<(typeof iconMap)[I]> }); -export function Icon({ +export function Icon({ className, name, width, @@ -30,8 +35,9 @@ export function Icon({ ml: mlProp = 0, color = undefined, verticalAlign = "middle", -}: IconProps) { - const IconComponent = icons[name] || null; + iconProps, +}: IconProps) { + const IconComponent = iconMap[name] as ElementType; /** Assume width is px relative to the root font size but specify * in ems to preserve scale for larger font sizes */ @@ -49,6 +55,8 @@ export function Icon({ ? verticalAlign : parseFloat((verticalAlign / rootFontSizePx).toFixed(2)); + const icon = React.createElement(IconComponent, iconProps, null); + return ( - {IconComponent ? : null} + {icon} ); } diff --git a/packages/ui/src/components/Icon/types.tsx b/packages/ui/src/components/Icon/types.tsx index a3e94fd9..94b23a1c 100644 --- a/packages/ui/src/components/Icon/types.tsx +++ b/packages/ui/src/components/Icon/types.tsx @@ -1,3 +1,7 @@ -import type * as icons from "../../icons/index.js"; +import * as icons from "../../icons/index.js"; -export type IconName = keyof typeof icons; +export const iconMap = { + ...icons, +} as const; + +export type IconName = keyof typeof iconMap; diff --git a/packages/ui/src/icons/AI.tsx b/packages/ui/src/icons/AI.tsx index 3dcca386..98ebae0d 100644 --- a/packages/ui/src/icons/AI.tsx +++ b/packages/ui/src/icons/AI.tsx @@ -1,6 +1,22 @@ // Copyright ©, 2023, Lightspark Group, Inc. - All Rights Reserved -export function AI() { +import { + type PathLinecap, + type PathLinejoin, + type PathStrokeWidth, +} from "./types.js"; + +type AIProps = { + strokeWidth?: PathStrokeWidth; + strokeLinecap?: PathLinecap; + strokeLinejoin?: PathLinejoin; +}; + +export function AI({ + strokeWidth = "2", + strokeLinecap = "round", + strokeLinejoin = "round", +}: AIProps) { return ( ); diff --git a/packages/ui/src/icons/Copy.tsx b/packages/ui/src/icons/Copy.tsx index cd17dbb9..094381d1 100644 --- a/packages/ui/src/icons/Copy.tsx +++ b/packages/ui/src/icons/Copy.tsx @@ -1,6 +1,22 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Copy() { +import { + type PathLinecap, + type PathLinejoin, + type PathStrokeWidth, +} from "./types.js"; + +type CopyProps = { + strokeWidth?: PathStrokeWidth; + strokeLinecap?: PathLinecap; + strokeLinejoin?: PathLinejoin; +}; + +export function Copy({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: CopyProps) { return ( ); diff --git a/packages/ui/src/icons/Uma.tsx b/packages/ui/src/icons/Uma.tsx index 463628a5..c7f219a7 100644 --- a/packages/ui/src/icons/Uma.tsx +++ b/packages/ui/src/icons/Uma.tsx @@ -2,8 +2,7 @@ export function Uma() { return ( diff --git a/packages/ui/src/icons/types.tsx b/packages/ui/src/icons/types.tsx new file mode 100644 index 00000000..5b2fdf12 --- /dev/null +++ b/packages/ui/src/icons/types.tsx @@ -0,0 +1,5 @@ +export type PathStrokeWidth = undefined | string; +/* "butt" is default when undefined https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap */ +export type PathLinecap = undefined | "butt" | "round" | "square"; +/* "miter" is default when undefined https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin */ +export type PathLinejoin = undefined | "miter" | "round"; From 69f8fecae2bd8df84a05bc65987aa3514a8a1e3e Mon Sep 17 00:00:00 2001 From: Brian Siao Tick Chong Date: Mon, 14 Oct 2024 16:38:01 -0700 Subject: [PATCH 11/19] [ui] add padding and outline props to TextInput (#12851) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ![Screenshot 2024-10-10 at 4.37.06 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/5cd8e7c1-c5a5-4e59-b5b8-044cdceb499d.png) - outline is offset 2px outside the bounds of the input - activeOutlineColor change the outline color and the caret-color - adds padding props - fixes Body Large font weight GitOrigin-RevId: 4175506cb3348408a18d2a701bf1ed38b481a786 --- packages/ui/src/components/TextInput.tsx | 48 ++++++++++++--- packages/ui/src/styles/fields.tsx | 68 ++++++++++++++++++--- packages/ui/src/styles/tokens/typography.ts | 2 +- 3 files changed, 99 insertions(+), 19 deletions(-) diff --git a/packages/ui/src/components/TextInput.tsx b/packages/ui/src/components/TextInput.tsx index 628c633e..56dff571 100644 --- a/packages/ui/src/components/TextInput.tsx +++ b/packages/ui/src/components/TextInput.tsx @@ -18,7 +18,11 @@ import { textInputStyle, type TextInputBorderRadius, } from "../styles/fields.js"; -import { getFontColor, type FontColorKey } from "../styles/themes.js"; +import { + getFontColor, + type FontColorKey, + type ThemeOrColorKey, +} from "../styles/themes.js"; import { applyTypography } from "../styles/typography.js"; import { z } from "../styles/z-index.js"; import { CheckboxContainer } from "./Checkbox.js"; @@ -100,6 +104,11 @@ export type TextInputProps = { | undefined; borderRadius?: TextInputBorderRadius | undefined; width?: "full" | "short" | undefined; + paddingX?: number; + paddingY?: number; + // Outline that appears outside/offset when the input is focused + activeOutline?: boolean; + activeOutlineColor?: ThemeOrColorKey; }; function withDefaults(textInputProps: TextInputProps) { @@ -144,12 +153,29 @@ export function TextInput(textInputProps: TextInputProps) { const textInputWidth = props.width === "short" ? "250px" : "100%"; let paddingLeftPx: number | undefined; - if (props.icon && !isIconRight) { + if (typeof props.paddingX === "number") { + if (isIconRight) { + paddingLeftPx = props.paddingX; + } else { + paddingLeftPx = props.paddingX + iconWidth + iconTextOffset; + } + } else if (props.icon && !isIconRight) { paddingLeftPx = iconOffset + iconWidth + iconTextOffset; } else if (props.select) { paddingLeftPx = selectLeftOffset + props.select.width + 5; } + let paddingRightPx: number | undefined; + if (typeof props.paddingX === "number") { + if (isIconRight) { + paddingRightPx = iconTextOffset + iconWidth + props.paddingX; + } else { + paddingRightPx = props.paddingX; + } + } else if (isIconRight) { + paddingRightPx = 28; + } + let input = ( ); diff --git a/packages/ui/src/icons/ArrowCircle.tsx b/packages/ui/src/icons/ArrowCircle.tsx index c7a771f1..dd219ac1 100644 --- a/packages/ui/src/icons/ArrowCircle.tsx +++ b/packages/ui/src/icons/ArrowCircle.tsx @@ -1,8 +1,13 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved import { invertStrokeColor } from "./constants.js"; +import { type PathProps } from "./types.js"; -export function ArrowCircle() { +export function ArrowCircle({ + strokeWidth = "2", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/ArrowCornerDownRight.tsx b/packages/ui/src/icons/ArrowCornerDownRight.tsx index f5fd9c13..bb64dc6f 100644 --- a/packages/ui/src/icons/ArrowCornerDownRight.tsx +++ b/packages/ui/src/icons/ArrowCornerDownRight.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2023, Lightspark Group, Inc. - All Rights Reserved -export function ArrowCornerDownRight() { +import { type PathProps } from "./types.js"; + +export function ArrowCornerDownRight({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/ArrowDown.tsx b/packages/ui/src/icons/ArrowDown.tsx index 5182f255..8401d53a 100644 --- a/packages/ui/src/icons/ArrowDown.tsx +++ b/packages/ui/src/icons/ArrowDown.tsx @@ -1,4 +1,10 @@ -export function ArrowDown() { +import { type PathProps } from "./types.js"; + +export function ArrowDown({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/ArrowLeft.tsx b/packages/ui/src/icons/ArrowLeft.tsx index e63dc23c..b38dc86f 100644 --- a/packages/ui/src/icons/ArrowLeft.tsx +++ b/packages/ui/src/icons/ArrowLeft.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function ArrowLeft() { +import { type PathProps } from "./types.js"; + +export function ArrowLeft({ + strokeWidth = "2", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/ArrowRight.tsx b/packages/ui/src/icons/ArrowRight.tsx index 20b4b0ec..ecb1d856 100644 --- a/packages/ui/src/icons/ArrowRight.tsx +++ b/packages/ui/src/icons/ArrowRight.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function ArrowRight() { +import { type PathProps } from "./types.js"; + +export function ArrowRight({ + strokeWidth = "1.33333", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/ArrowUp.tsx b/packages/ui/src/icons/ArrowUp.tsx index 8340dccb..db5f3f09 100644 --- a/packages/ui/src/icons/ArrowUp.tsx +++ b/packages/ui/src/icons/ArrowUp.tsx @@ -1,4 +1,10 @@ -export function ArrowUp() { +import { type PathProps } from "./types.js"; + +export function ArrowUp({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/ArrowUpRight.tsx b/packages/ui/src/icons/ArrowUpRight.tsx index 866375c3..dfcd3ed8 100644 --- a/packages/ui/src/icons/ArrowUpRight.tsx +++ b/packages/ui/src/icons/ArrowUpRight.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function ArrowUpRight() { +import { type PathProps } from "./types.js"; + +export function ArrowUpRight({ + strokeWidth = "2.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/ArrowsDown.tsx b/packages/ui/src/icons/ArrowsDown.tsx index e04cd5b0..250ee410 100644 --- a/packages/ui/src/icons/ArrowsDown.tsx +++ b/packages/ui/src/icons/ArrowsDown.tsx @@ -1,4 +1,10 @@ -export function ArrowsDown() { +import { type PathProps } from "./types.js"; + +export function ArrowsDown({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/ArrowsHorizontal.tsx b/packages/ui/src/icons/ArrowsHorizontal.tsx index c03d2f67..10b5ae6b 100644 --- a/packages/ui/src/icons/ArrowsHorizontal.tsx +++ b/packages/ui/src/icons/ArrowsHorizontal.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function ArrowsHorizontal() { +import { type PathProps } from "./types.js"; + +export function ArrowsHorizontal({ + strokeWidth = "2", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/ArrowsUp.tsx b/packages/ui/src/icons/ArrowsUp.tsx index c40508ae..327de743 100644 --- a/packages/ui/src/icons/ArrowsUp.tsx +++ b/packages/ui/src/icons/ArrowsUp.tsx @@ -1,4 +1,10 @@ -export function ArrowsUp() { +import { type PathProps } from "./types.js"; + +export function ArrowsUp({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Bank.tsx b/packages/ui/src/icons/Bank.tsx index 865b30d0..00853999 100644 --- a/packages/ui/src/icons/Bank.tsx +++ b/packages/ui/src/icons/Bank.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Bank() { +import { type PathProps } from "./types.js"; + +export function Bank({ + strokeWidth = "1.5", + strokeLinecap = "square", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/BitcoinB.tsx b/packages/ui/src/icons/BitcoinB.tsx index bc43fef8..42a14062 100644 --- a/packages/ui/src/icons/BitcoinB.tsx +++ b/packages/ui/src/icons/BitcoinB.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function BitcoinB() { +import { type PathProps } from "./types.js"; + +export function BitcoinB({ + strokeWidth = "1.125", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/CaretRight.tsx b/packages/ui/src/icons/CaretRight.tsx index 7b65aa8c..7995296f 100644 --- a/packages/ui/src/icons/CaretRight.tsx +++ b/packages/ui/src/icons/CaretRight.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function CaretRight() { +import { type PathProps } from "./types.js"; + +export function CaretRight({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/CentralArrowShareRight.tsx b/packages/ui/src/icons/CentralArrowShareRight.tsx index 33d2c636..53c6b16d 100644 --- a/packages/ui/src/icons/CentralArrowShareRight.tsx +++ b/packages/ui/src/icons/CentralArrowShareRight.tsx @@ -1,4 +1,10 @@ -export function CentralArrowShareRight() { +import { type PathProps } from "./types.js"; + +export function CentralArrowShareRight({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps = {}) { return ( ); diff --git a/packages/ui/src/icons/Checkmark.tsx b/packages/ui/src/icons/Checkmark.tsx index f2f8aa9b..dddd6420 100644 --- a/packages/ui/src/icons/Checkmark.tsx +++ b/packages/ui/src/icons/Checkmark.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Checkmark() { +import { type PathProps } from "./types.js"; + +export function Checkmark({ + strokeWidth = "2", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/CheckmarkCircle.tsx b/packages/ui/src/icons/CheckmarkCircle.tsx index eb5cdc37..7df7c241 100644 --- a/packages/ui/src/icons/CheckmarkCircle.tsx +++ b/packages/ui/src/icons/CheckmarkCircle.tsx @@ -1,6 +1,13 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function CheckmarkCircle() { +import { invertStrokeColor } from "./constants.js"; +import { type PathProps } from "./types.js"; + +export function CheckmarkCircle({ + strokeWidth = "2", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Chevron.tsx b/packages/ui/src/icons/Chevron.tsx index a4eb44d4..94ff2bff 100644 --- a/packages/ui/src/icons/Chevron.tsx +++ b/packages/ui/src/icons/Chevron.tsx @@ -1,4 +1,10 @@ -export function Chevron() { +import { type PathProps } from "./types.js"; + +export function Chevron({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/ChevronLeft.tsx b/packages/ui/src/icons/ChevronLeft.tsx index 9aa1423e..852ec513 100644 --- a/packages/ui/src/icons/ChevronLeft.tsx +++ b/packages/ui/src/icons/ChevronLeft.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2024, Lightspark Group, Inc. - All Rights Reserved -export const ChevronLeft = () => ( +import { type PathProps } from "./types.js"; + +export const ChevronLeft = ({ + strokeWidth = "2", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) => ( ( ); diff --git a/packages/ui/src/icons/CircleCheck.tsx b/packages/ui/src/icons/CircleCheck.tsx index a647962f..15074978 100644 --- a/packages/ui/src/icons/CircleCheck.tsx +++ b/packages/ui/src/icons/CircleCheck.tsx @@ -1,4 +1,11 @@ -export function CircleCheck() { +import { invertStrokeColor } from "./constants.js"; +import { type PathProps } from "./types.js"; + +export function CircleCheck({ + strokeWidth = "1.14286", + strokeLinecap = "butt", + strokeLinejoin = "miter", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/CircleCheckOutline.tsx b/packages/ui/src/icons/CircleCheckOutline.tsx index 95879dcc..5d46c832 100644 --- a/packages/ui/src/icons/CircleCheckOutline.tsx +++ b/packages/ui/src/icons/CircleCheckOutline.tsx @@ -1,4 +1,10 @@ -export function CircleCheckOutline() { +import { type PathProps } from "./types.js"; + +export function CircleCheckOutline({ + strokeWidth = "2", + strokeLinecap = "butt", + strokeLinejoin = "miter", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/CirclePlus.tsx b/packages/ui/src/icons/CirclePlus.tsx index 61cb19d9..7778577e 100644 --- a/packages/ui/src/icons/CirclePlus.tsx +++ b/packages/ui/src/icons/CirclePlus.tsx @@ -1,11 +1,22 @@ -export function CirclePlus() { +import { invertStrokeColor } from "./constants.js"; +import { type PathProps } from "./types.js"; + +export function CirclePlus({ + strokeWidth = "1.5", + strokeLinecap = "butt", + strokeLinejoin = "miter", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Clock.tsx b/packages/ui/src/icons/Clock.tsx index b95c9154..5d73a8be 100644 --- a/packages/ui/src/icons/Clock.tsx +++ b/packages/ui/src/icons/Clock.tsx @@ -1,4 +1,10 @@ -export function Clock() { +import { type PathProps } from "./types.js"; + +export function Clock({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Close.tsx b/packages/ui/src/icons/Close.tsx index 99e16835..09ab8940 100644 --- a/packages/ui/src/icons/Close.tsx +++ b/packages/ui/src/icons/Close.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Close() { +import { type PathProps } from "./types.js"; + +export function Close({ + strokeWidth = "1", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Code.tsx b/packages/ui/src/icons/Code.tsx index ecfffde1..192ce0f0 100644 --- a/packages/ui/src/icons/Code.tsx +++ b/packages/ui/src/icons/Code.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Code() { +import { type PathProps } from "./types.js"; + +export function Code({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/CreditCard.tsx b/packages/ui/src/icons/CreditCard.tsx index aea7048d..522d4c6d 100644 --- a/packages/ui/src/icons/CreditCard.tsx +++ b/packages/ui/src/icons/CreditCard.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function CreditCard() { +import { type PathProps } from "./types.js"; + +export function CreditCard({ + strokeWidth = "1.125", + strokeLinecap = "butt", + strokeLinejoin = "miter", +}: PathProps) { return ( diff --git a/packages/ui/src/icons/DeleteIcon.tsx b/packages/ui/src/icons/DeleteIcon.tsx index 16009ca0..3af26f19 100644 --- a/packages/ui/src/icons/DeleteIcon.tsx +++ b/packages/ui/src/icons/DeleteIcon.tsx @@ -1,7 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved import { useTheme } from "@emotion/react"; +import { type PathProps } from "./types.js"; -export function DeleteIcon() { +export function DeleteIcon({ + strokeWidth = "1.33333", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { const theme = useTheme(); return ( ); diff --git a/packages/ui/src/icons/Dollar.tsx b/packages/ui/src/icons/Dollar.tsx index f8bf585a..cd53996e 100644 --- a/packages/ui/src/icons/Dollar.tsx +++ b/packages/ui/src/icons/Dollar.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Dollar() { +import { type PathProps } from "./types.js"; + +export function Dollar({ + strokeWidth = "1.125", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/DollarManrope.tsx b/packages/ui/src/icons/DollarManrope.tsx index b5e3524e..d57bfc01 100644 --- a/packages/ui/src/icons/DollarManrope.tsx +++ b/packages/ui/src/icons/DollarManrope.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function DollarManrope() { +import { type PathProps } from "./types.js"; + +export function DollarManrope({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/DollarManropeSmall.tsx b/packages/ui/src/icons/DollarManropeSmall.tsx index 05a3b460..862c1264 100644 --- a/packages/ui/src/icons/DollarManropeSmall.tsx +++ b/packages/ui/src/icons/DollarManropeSmall.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function DollarManropeSmall() { +import { type PathProps } from "./types.js"; + +export function DollarManropeSmall({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Download.tsx b/packages/ui/src/icons/Download.tsx index 9bb2cb66..0a790bf3 100644 --- a/packages/ui/src/icons/Download.tsx +++ b/packages/ui/src/icons/Download.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Download() { +import { type PathProps } from "./types.js"; + +export function Download({ + strokeWidth = "1", + strokeLinecap = "butt", + strokeLinejoin = "miter", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Envelope.tsx b/packages/ui/src/icons/Envelope.tsx index dd7c9b4a..911a9820 100644 --- a/packages/ui/src/icons/Envelope.tsx +++ b/packages/ui/src/icons/Envelope.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Envelope() { +import { type PathProps } from "./types.js"; + +export function Envelope({ + strokeWidth = "3", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/ExclamationPoint.tsx b/packages/ui/src/icons/ExclamationPoint.tsx index 9f4e2110..0140f7f7 100644 --- a/packages/ui/src/icons/ExclamationPoint.tsx +++ b/packages/ui/src/icons/ExclamationPoint.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function ExclamationPoint() { +import { type PathProps } from "./types.js"; + +export function ExclamationPoint({ + strokeWidth = "1.25", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Eye.tsx b/packages/ui/src/icons/Eye.tsx index e1e8e1d4..949ff859 100644 --- a/packages/ui/src/icons/Eye.tsx +++ b/packages/ui/src/icons/Eye.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Eye() { +import { type PathProps } from "./types.js"; + +export function Eye({ + strokeWidth = "1.5", + strokeLinecap = "butt", + strokeLinejoin = "miter", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/FramedLetterI.tsx b/packages/ui/src/icons/FramedLetterI.tsx index eae6c0b0..aee5b77c 100644 --- a/packages/ui/src/icons/FramedLetterI.tsx +++ b/packages/ui/src/icons/FramedLetterI.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function FramedLetterI() { +import { type PathProps } from "./types.js"; + +export function FramedLetterI({ + strokeWidth = "1", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Gear.tsx b/packages/ui/src/icons/Gear.tsx index 06c8c5d3..944e1d5f 100644 --- a/packages/ui/src/icons/Gear.tsx +++ b/packages/ui/src/icons/Gear.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Gear() { +import { type PathProps } from "./types.js"; + +export function Gear({ + strokeWidth = "1", + strokeLinecap = "butt", + strokeLinejoin = "miter", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/HeartOutline.tsx b/packages/ui/src/icons/HeartOutline.tsx index 37a741ca..fee45ead 100644 --- a/packages/ui/src/icons/HeartOutline.tsx +++ b/packages/ui/src/icons/HeartOutline.tsx @@ -1,6 +1,11 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function HeartOutline() { +import { type PathProps } from "./types.js"; + +export function HeartOutline({ + strokeWidth = "1.5", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Home.tsx b/packages/ui/src/icons/Home.tsx index 1f48896f..794bc2a2 100644 --- a/packages/ui/src/icons/Home.tsx +++ b/packages/ui/src/icons/Home.tsx @@ -1,4 +1,9 @@ -export function Home() { +import { type PathProps } from "./types.js"; + +export function Home({ + strokeWidth = "1.5", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Info.tsx b/packages/ui/src/icons/Info.tsx index c1cc477c..97342ae0 100644 --- a/packages/ui/src/icons/Info.tsx +++ b/packages/ui/src/icons/Info.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Info() { +import { type PathProps } from "./types.js"; + +export function Info({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Lock.tsx b/packages/ui/src/icons/Lock.tsx index d4c6c986..b94be8a0 100644 --- a/packages/ui/src/icons/Lock.tsx +++ b/packages/ui/src/icons/Lock.tsx @@ -1,6 +1,8 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Lock() { +import { type PathProps } from "./types.js"; + +export function Lock({ strokeWidth = "2" }: PathProps) { return ( ); diff --git a/packages/ui/src/icons/MagicWand.tsx b/packages/ui/src/icons/MagicWand.tsx index 506aa193..5a3571fe 100644 --- a/packages/ui/src/icons/MagicWand.tsx +++ b/packages/ui/src/icons/MagicWand.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function MagicWand() { +import { type PathProps } from "./types.js"; + +export function MagicWand({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Minus.tsx b/packages/ui/src/icons/Minus.tsx index 419f33ea..55fdfc28 100644 --- a/packages/ui/src/icons/Minus.tsx +++ b/packages/ui/src/icons/Minus.tsx @@ -1,6 +1,11 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Minus() { +import { type PathProps } from "./types.js"; + +export function Minus({ + strokeWidth = "1.5", + strokeLinecap = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Monitor.tsx b/packages/ui/src/icons/Monitor.tsx index 9f6cd54e..037b63b6 100644 --- a/packages/ui/src/icons/Monitor.tsx +++ b/packages/ui/src/icons/Monitor.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Monitor() { +import { type PathProps } from "./types.js"; + +export function Monitor({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/NodeAdd.tsx b/packages/ui/src/icons/NodeAdd.tsx index 7298c71d..d0d2674d 100644 --- a/packages/ui/src/icons/NodeAdd.tsx +++ b/packages/ui/src/icons/NodeAdd.tsx @@ -1,6 +1,11 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function NodeAdd() { +import { type PathProps } from "./types.js"; + +export function NodeAdd({ + strokeWidth = "1", + strokeLinecap = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Notebook.tsx b/packages/ui/src/icons/Notebook.tsx index 7ad0723c..3cbac584 100644 --- a/packages/ui/src/icons/Notebook.tsx +++ b/packages/ui/src/icons/Notebook.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2024 Lightspark Group, Inc. - All Rights Reserved -export function Notebook() { +import { type PathProps } from "./types.js"; + +export function Notebook({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/PaperPlane.tsx b/packages/ui/src/icons/PaperPlane.tsx index b85fbed3..3f826ac6 100644 --- a/packages/ui/src/icons/PaperPlane.tsx +++ b/packages/ui/src/icons/PaperPlane.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function PaperPlane() { +import { type PathProps } from "./types.js"; + +export function PaperPlane({ + strokeWidth = "1", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Pencil.tsx b/packages/ui/src/icons/Pencil.tsx index 7acaf755..ec851b0e 100644 --- a/packages/ui/src/icons/Pencil.tsx +++ b/packages/ui/src/icons/Pencil.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Pencil() { +import { type PathProps } from "./types.js"; + +export function Pencil({ + strokeWidth = "1", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Person.tsx b/packages/ui/src/icons/Person.tsx index 362795bb..77ffdb19 100644 --- a/packages/ui/src/icons/Person.tsx +++ b/packages/ui/src/icons/Person.tsx @@ -1,6 +1,11 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Person() { +import { type PathProps } from "./types.js"; + +export function Person({ + strokeWidth = "1.5", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/PiggyBank.tsx b/packages/ui/src/icons/PiggyBank.tsx index 9d4da2a9..7274e4b5 100644 --- a/packages/ui/src/icons/PiggyBank.tsx +++ b/packages/ui/src/icons/PiggyBank.tsx @@ -1,4 +1,10 @@ -export function PiggyBank() { +import { type PathProps } from "./types.js"; + +export function PiggyBank({ + strokeWidth = "1.5", + strokeLinecap = "butt", + strokeLinejoin = "miter", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/QuestionCircle.tsx b/packages/ui/src/icons/QuestionCircle.tsx index 93508adb..af2aaa95 100644 --- a/packages/ui/src/icons/QuestionCircle.tsx +++ b/packages/ui/src/icons/QuestionCircle.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function QuestionCircle() { +import { type PathProps } from "./types.js"; + +export function QuestionCircle({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/QuestionCircleStrong.tsx b/packages/ui/src/icons/QuestionCircleStrong.tsx index 8574bb81..0a84f074 100644 --- a/packages/ui/src/icons/QuestionCircleStrong.tsx +++ b/packages/ui/src/icons/QuestionCircleStrong.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function QuestionCircleStrong() { +import { type PathProps } from "./types.js"; + +export function QuestionCircleStrong({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/ReceiptBill.tsx b/packages/ui/src/icons/ReceiptBill.tsx index 7d799542..0dd63133 100644 --- a/packages/ui/src/icons/ReceiptBill.tsx +++ b/packages/ui/src/icons/ReceiptBill.tsx @@ -1,4 +1,10 @@ -export function ReceiptBill() { +import { type PathProps } from "./types.js"; + +export function ReceiptBill({ + strokeWidth = "2.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Recycling.tsx b/packages/ui/src/icons/Recycling.tsx index 76a94200..584013bf 100644 --- a/packages/ui/src/icons/Recycling.tsx +++ b/packages/ui/src/icons/Recycling.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Recycling() { +import { type PathProps } from "./types.js"; + +export function Recycling({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Remove.tsx b/packages/ui/src/icons/Remove.tsx index 90dfedba..52d7bcc7 100644 --- a/packages/ui/src/icons/Remove.tsx +++ b/packages/ui/src/icons/Remove.tsx @@ -1,6 +1,11 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Remove() { +import { type PathProps } from "./types.js"; + +export function Remove({ + strokeWidth = "1.5", + strokeLinecap = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Restart.tsx b/packages/ui/src/icons/Restart.tsx index 12021b8b..4f09444e 100644 --- a/packages/ui/src/icons/Restart.tsx +++ b/packages/ui/src/icons/Restart.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Restart() { +import { type PathProps } from "./types.js"; + +export function Restart({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Roadmap.tsx b/packages/ui/src/icons/Roadmap.tsx index 7fdbea94..2f5f7d2f 100644 --- a/packages/ui/src/icons/Roadmap.tsx +++ b/packages/ui/src/icons/Roadmap.tsx @@ -1,4 +1,10 @@ -export function Roadmap() { +import { type PathProps } from "./types.js"; + +export function Roadmap({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Satoshi.tsx b/packages/ui/src/icons/Satoshi.tsx index a41ad840..4af568e5 100644 --- a/packages/ui/src/icons/Satoshi.tsx +++ b/packages/ui/src/icons/Satoshi.tsx @@ -1,6 +1,11 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Satoshi() { +import { type PathProps } from "./types.js"; + +export function Satoshi({ + strokeWidth = "3.71429", + strokeLinecap = "butt", +}: PathProps) { return ( - + + + - - ); } diff --git a/packages/ui/src/icons/SatoshiRounded.tsx b/packages/ui/src/icons/SatoshiRounded.tsx index a708b7ca..295c2a3f 100644 --- a/packages/ui/src/icons/SatoshiRounded.tsx +++ b/packages/ui/src/icons/SatoshiRounded.tsx @@ -1,6 +1,11 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function SatoshiRounded() { +import { type PathProps } from "./types.js"; + +export function SatoshiRounded({ + strokeWidth = "1.5", + strokeLinecap = "round", +}: PathProps) { return ( diff --git a/packages/ui/src/icons/Search.tsx b/packages/ui/src/icons/Search.tsx index f2fcc840..91ac2767 100644 --- a/packages/ui/src/icons/Search.tsx +++ b/packages/ui/src/icons/Search.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Search() { +import { type PathProps } from "./types.js"; + +export function Search({ + strokeWidth = "2", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/SecurityKey.tsx b/packages/ui/src/icons/SecurityKey.tsx index 5d1c5a61..f93539ba 100644 --- a/packages/ui/src/icons/SecurityKey.tsx +++ b/packages/ui/src/icons/SecurityKey.tsx @@ -1,6 +1,8 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function SecurityKey() { +import { type PathProps } from "./types.js"; + +export function SecurityKey({ strokeWidth = "1.125" }: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Share.tsx b/packages/ui/src/icons/Share.tsx index 03c76d2d..9417cc88 100644 --- a/packages/ui/src/icons/Share.tsx +++ b/packages/ui/src/icons/Share.tsx @@ -1,6 +1,8 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Share() { +import { type PathProps } from "./types.js"; + +export function Share({ strokeWidth = "1.5" }: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Sidebar.tsx b/packages/ui/src/icons/Sidebar.tsx index f60de18b..2ff4d5f5 100644 --- a/packages/ui/src/icons/Sidebar.tsx +++ b/packages/ui/src/icons/Sidebar.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Sidebar() { +import { type PathProps } from "./types.js"; + +export function Sidebar({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Sort.tsx b/packages/ui/src/icons/Sort.tsx index feaf2564..8f28414f 100644 --- a/packages/ui/src/icons/Sort.tsx +++ b/packages/ui/src/icons/Sort.tsx @@ -1,6 +1,11 @@ // Copyright ©, 2023, Lightspark Group, Inc. - All Rights Reserved -export function Sort() { +import { type PathProps } from "./types.js"; + +export function Sort({ + strokeWidth = "1.5", + strokeLinecap = "square", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/StackedLines.tsx b/packages/ui/src/icons/StackedLines.tsx index 4f614667..092e31a9 100644 --- a/packages/ui/src/icons/StackedLines.tsx +++ b/packages/ui/src/icons/StackedLines.tsx @@ -1,4 +1,9 @@ -export function StackedLines() { +import { type PathProps } from "./types.js"; + +export function StackedLines({ + strokeWidth = "1.5", + strokeLinecap = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/TapSingle.tsx b/packages/ui/src/icons/TapSingle.tsx index cd43e68c..ebff526f 100644 --- a/packages/ui/src/icons/TapSingle.tsx +++ b/packages/ui/src/icons/TapSingle.tsx @@ -11,7 +11,7 @@ export function TapSingle() { > ); diff --git a/packages/ui/src/icons/Team.tsx b/packages/ui/src/icons/Team.tsx index aba96f40..f4ab9884 100644 --- a/packages/ui/src/icons/Team.tsx +++ b/packages/ui/src/icons/Team.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Team() { +import { type PathProps } from "./types.js"; + +export function Team({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Terminal.tsx b/packages/ui/src/icons/Terminal.tsx index 7886a636..db2d203b 100644 --- a/packages/ui/src/icons/Terminal.tsx +++ b/packages/ui/src/icons/Terminal.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2023, Lightspark Group, Inc. - All Rights Reserved -export function Terminal() { +import { type PathProps } from "./types.js"; + +export function Terminal({ + strokeWidth = "2.28571", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/Trash.tsx b/packages/ui/src/icons/Trash.tsx index c28d6e4a..54000dd8 100644 --- a/packages/ui/src/icons/Trash.tsx +++ b/packages/ui/src/icons/Trash.tsx @@ -1,6 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function Trash() { +import { type PathProps } from "./types.js"; + +export function Trash({ + strokeWidth = "1", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( + + - - ); } diff --git a/packages/ui/src/icons/UmaBridgeLoading.tsx b/packages/ui/src/icons/UmaBridgeLoading.tsx index e9583044..479adaa3 100644 --- a/packages/ui/src/icons/UmaBridgeLoading.tsx +++ b/packages/ui/src/icons/UmaBridgeLoading.tsx @@ -1,4 +1,9 @@ -export function UmaBridgeLoading() { +import { type PathProps } from "./types.js"; + +export function UmaBridgeLoading({ + strokeWidth = "1.5", + strokeLinecap = "round", +}: PathProps) { return ( - + ); diff --git a/packages/ui/src/icons/UmaBridgeLoadingTransparent.tsx b/packages/ui/src/icons/UmaBridgeLoadingTransparent.tsx index 2be0ac15..4ad4f5a2 100644 --- a/packages/ui/src/icons/UmaBridgeLoadingTransparent.tsx +++ b/packages/ui/src/icons/UmaBridgeLoadingTransparent.tsx @@ -1,4 +1,9 @@ -export function UmaBridgeLoadingTransparent() { +import { type PathProps } from "./types.js"; + +export function UmaBridgeLoadingTransparent({ + strokeWidth = "2.09994", + strokeLinecap = "round", +}: PathProps) { return ( ); diff --git a/packages/ui/src/icons/WarningSign.tsx b/packages/ui/src/icons/WarningSign.tsx index ec8bbc43..f17a21bf 100644 --- a/packages/ui/src/icons/WarningSign.tsx +++ b/packages/ui/src/icons/WarningSign.tsx @@ -1,30 +1,27 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function WarningSign() { +import { type PathProps } from "./types.js"; + +export function WarningSign({ + strokeWidth = "2", + strokeLinecap = "round", +}: PathProps) { return ( - - + - - - - - ); } diff --git a/packages/ui/src/icons/types.tsx b/packages/ui/src/icons/types.tsx index 5b2fdf12..dd7d11fb 100644 --- a/packages/ui/src/icons/types.tsx +++ b/packages/ui/src/icons/types.tsx @@ -3,3 +3,9 @@ export type PathStrokeWidth = undefined | string; export type PathLinecap = undefined | "butt" | "round" | "square"; /* "miter" is default when undefined https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin */ export type PathLinejoin = undefined | "miter" | "round"; + +export type PathProps = { + strokeWidth?: PathStrokeWidth; + strokeLinecap?: PathLinecap; + strokeLinejoin?: PathLinejoin; +}; From f80b616304de2603a32fde4ae9a6bf454e23848f Mon Sep 17 00:00:00 2001 From: Brian Siao Tick Chong Date: Wed, 16 Oct 2024 12:01:28 -0700 Subject: [PATCH 16/19] [ui] add new icons (#12936) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ![Screenshot 2024-10-15 at 5.48.25 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/94248b20-f0ef-4b7d-a88c-41bd583867d5.png) ![Screenshot 2024-10-15 at 5.48.27 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/4ec805c5-90c2-4b2f-a17c-04a93ae5e7c7.png) ![Screenshot 2024-10-15 at 5.48.43 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/3c4f401b-bcd0-4b3a-bb7d-f8682f2b9de6.png) ![Screenshot 2024-10-15 at 5.48.50 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/05bce4eb-02ed-407b-afd6-81ffe6df2d4e.png) ![Screenshot 2024-10-15 at 5.48.53 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/aee9c17b-c0a9-4c29-82a0-a77860ec7fa3.png) ![Screenshot 2024-10-15 at 5.49.07 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/2fcb053b-002e-45b6-91ef-805d4d99b5d3.png) ![Screenshot 2024-10-15 at 5.49.13 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/ea782d2f-9d30-40d3-8909-5fcf031d5250.png) GitOrigin-RevId: abca1f76fbab57e47ee938fdcd37a1b3639475ba --- packages/ui/src/icons/BrokenChainLink.tsx | 23 ++++++++++++ packages/ui/src/icons/CalendarClock.tsx | 26 ++++++++++++++ packages/ui/src/icons/Copy.tsx | 14 ++------ packages/ui/src/icons/Globus.tsx | 24 +++++++++++++ packages/ui/src/icons/Limit.tsx | 26 ++++++++++++++ packages/ui/src/icons/LinkIcon.tsx | 44 ++++++++++++----------- packages/ui/src/icons/SparklesSoft.tsx | 30 ++++++++++++++++ packages/ui/src/icons/Zap.tsx | 17 +++++++++ packages/ui/src/icons/index.tsx | 6 ++++ 9 files changed, 177 insertions(+), 33 deletions(-) create mode 100644 packages/ui/src/icons/BrokenChainLink.tsx create mode 100644 packages/ui/src/icons/CalendarClock.tsx create mode 100644 packages/ui/src/icons/Globus.tsx create mode 100644 packages/ui/src/icons/Limit.tsx create mode 100644 packages/ui/src/icons/SparklesSoft.tsx create mode 100644 packages/ui/src/icons/Zap.tsx diff --git a/packages/ui/src/icons/BrokenChainLink.tsx b/packages/ui/src/icons/BrokenChainLink.tsx new file mode 100644 index 00000000..711e0956 --- /dev/null +++ b/packages/ui/src/icons/BrokenChainLink.tsx @@ -0,0 +1,23 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +import { type PathProps } from "./types.js"; + +export function BrokenChainLink({ strokeWidth = "1" }: PathProps) { + return ( + + + + ); +} diff --git a/packages/ui/src/icons/CalendarClock.tsx b/packages/ui/src/icons/CalendarClock.tsx new file mode 100644 index 00000000..3ca80c61 --- /dev/null +++ b/packages/ui/src/icons/CalendarClock.tsx @@ -0,0 +1,26 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +import { type PathProps } from "./types.js"; + +export function CalendarClock({ + strokeWidth = "2", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { + return ( + + + + ); +} diff --git a/packages/ui/src/icons/Copy.tsx b/packages/ui/src/icons/Copy.tsx index 094381d1..a1f1078c 100644 --- a/packages/ui/src/icons/Copy.tsx +++ b/packages/ui/src/icons/Copy.tsx @@ -1,22 +1,12 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -import { - type PathLinecap, - type PathLinejoin, - type PathStrokeWidth, -} from "./types.js"; - -type CopyProps = { - strokeWidth?: PathStrokeWidth; - strokeLinecap?: PathLinecap; - strokeLinejoin?: PathLinejoin; -}; +import { type PathProps } from "./types.js"; export function Copy({ strokeWidth = "1.5", strokeLinecap = "round", strokeLinejoin = "round", -}: CopyProps) { +}: PathProps) { return ( + + + ); +} diff --git a/packages/ui/src/icons/Limit.tsx b/packages/ui/src/icons/Limit.tsx new file mode 100644 index 00000000..44fb6e61 --- /dev/null +++ b/packages/ui/src/icons/Limit.tsx @@ -0,0 +1,26 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +import { type PathProps } from "./types.js"; + +export function Limit({ + strokeWidth = "2", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { + return ( + + + + ); +} diff --git a/packages/ui/src/icons/LinkIcon.tsx b/packages/ui/src/icons/LinkIcon.tsx index 70e871e5..b8b4da53 100644 --- a/packages/ui/src/icons/LinkIcon.tsx +++ b/packages/ui/src/icons/LinkIcon.tsx @@ -1,31 +1,33 @@ // Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved -export function LinkIcon() { +import { type PathProps } from "./types.js"; + +export function LinkIcon({ + strokeWidth = "1.5", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { return ( - - - - - - - - - + + ); } diff --git a/packages/ui/src/icons/SparklesSoft.tsx b/packages/ui/src/icons/SparklesSoft.tsx new file mode 100644 index 00000000..ac89a0bf --- /dev/null +++ b/packages/ui/src/icons/SparklesSoft.tsx @@ -0,0 +1,30 @@ +// Copyright ©, 2023, Lightspark Group, Inc. - All Rights Reserved + +import { type PathProps } from "./types.js"; + +export function SparklesSoft({ + strokeWidth = "2", + strokeLinecap = "round", + strokeLinejoin = "round", +}: PathProps) { + return ( + + + + + ); +} diff --git a/packages/ui/src/icons/Zap.tsx b/packages/ui/src/icons/Zap.tsx new file mode 100644 index 00000000..dc9780ad --- /dev/null +++ b/packages/ui/src/icons/Zap.tsx @@ -0,0 +1,17 @@ +// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved + +export function Zap() { + return ( + + + + ); +} diff --git a/packages/ui/src/icons/index.tsx b/packages/ui/src/icons/index.tsx index aa203506..1c7feadb 100644 --- a/packages/ui/src/icons/index.tsx +++ b/packages/ui/src/icons/index.tsx @@ -19,6 +19,8 @@ export { ArrowUpRightCircleFill } from "./ArrowUpRightCircleFill.js"; export { Bank } from "./Bank.js"; export { BitcoinB } from "./BitcoinB.js"; export { BitcoinBOnRoundedSquare } from "./BitcoinBOnRoundedSquare.js"; +export { BrokenChainLink } from "./BrokenChainLink.js"; +export { CalendarClock } from "./CalendarClock.js"; export { CameraCapture } from "./CameraCapture.js"; export { CaretRight } from "./CaretRight.js"; export { CentralArrowShareRight } from "./CentralArrowShareRight.js"; @@ -53,6 +55,7 @@ export { FlutterTwoTone } from "./FlutterTwoTone.js"; export { FramedLetterI } from "./FramedLetterI.js"; export { Gear } from "./Gear.js"; export { Github } from "./Github.js"; +export { Globus } from "./Globus.js"; export { GoTwoTone } from "./GoTwoTone.js"; export { GraphQLTwoTone } from "./GraphQLTwoTone.js"; export { HeartOutline } from "./HeartOutline.js"; @@ -62,6 +65,7 @@ export { JavaScriptTwoTone } from "./JavaScriptTwoTone.js"; export { JavaTwoTone } from "./JavaTwoTone.js"; export { KotlinTwoTone } from "./KotlinTwoTone.js"; export { LightningOnRoundedSquare } from "./LightningOnRoundedSquare.js"; +export { Limit } from "./Limit.js"; export { LinkIcon } from "./LinkIcon.js"; export { LoadingCircleLines } from "./LoadingCircleLines.js"; export { LoadingSpinner } from "./LoadingSpinner.js"; @@ -103,6 +107,7 @@ export { Share } from "./Share.js"; export { ShieldCheck } from "./ShieldCheck.js"; export { Sidebar } from "./Sidebar.js"; export { Sort } from "./Sort.js"; +export { SparklesSoft } from "./SparklesSoft.js"; export { StackedLines } from "./StackedLines.js"; export { SwiftTwoTone } from "./SwiftTwoTone.js"; export { TapSingle } from "./TapSingle.js"; @@ -115,3 +120,4 @@ export { UmaBridgeLoadingTransparent } from "./UmaBridgeLoadingTransparent.js"; export { Upload } from "./Upload.js"; export { WalletSDKIcon } from "./WalletSDKIcon.js"; export { WarningSign } from "./WarningSign.js"; +export { Zap } from "./Zap.js"; From a8746c4b84e74253201d894ce094cc1cb27b02c2 Mon Sep 17 00:00:00 2001 From: Brian Siao Tick Chong Date: Thu, 17 Oct 2024 13:43:47 -0700 Subject: [PATCH 17/19] [ui] add icon object prop instead of icon name to Button (#12956) GitOrigin-RevId: 5b752c7abf8fe72794530501de6515e10e4b4cbc --- packages/ui/src/components/Button.tsx | 7 ++++--- .../src/components/DataManagerTable/DataManagerTable.tsx | 2 +- packages/ui/src/components/DataManagerTable/EnumFilter.tsx | 2 +- packages/ui/src/components/DataManagerTable/IdFilter.tsx | 2 +- .../ui/src/components/DataManagerTable/StringFilter.tsx | 2 +- packages/ui/src/components/Drawer.tsx | 2 +- 6 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx index cc10c22c..2dd616f7 100644 --- a/packages/ui/src/components/Button.tsx +++ b/packages/ui/src/components/Button.tsx @@ -23,7 +23,6 @@ import { applyTypography } from "../styles/typography.js"; import { type NewRoutesType } from "../types/index.js"; import { select } from "../utils/emotion.js"; import { Icon } from "./Icon/Icon.js"; -import { type IconName } from "./Icon/types.js"; import { Loading, type LoadingKind } from "./Loading.js"; import { Tooltip } from "./Tooltip.js"; import { UnstyledButton } from "./UnstyledButton.js"; @@ -60,7 +59,9 @@ export type ButtonProps = { externalLink?: string | undefined; filename?: string | undefined; toParams?: RouteParams | undefined; - icon?: IconName | undefined; + icon?: + | Pick, "name" | "color" | "iconProps"> + | undefined; iconSide?: IconSide; loading?: boolean | undefined; loadingKind?: LoadingKind | undefined; @@ -294,7 +295,7 @@ export function Button(props: ButtonProps) { typography={typography} kind={kind} > - + ); } diff --git a/packages/ui/src/components/DataManagerTable/DataManagerTable.tsx b/packages/ui/src/components/DataManagerTable/DataManagerTable.tsx index b92fa3b4..10afc633 100644 --- a/packages/ui/src/components/DataManagerTable/DataManagerTable.tsx +++ b/packages/ui/src/components/DataManagerTable/DataManagerTable.tsx @@ -565,7 +565,7 @@ export function DataManagerTable< numFiltersApplied > 0 ? ` | ${numFiltersApplied}` : "" }`} paddingY="short" - icon="Sort" + icon={{ name: "Sort" }} typography={{ color: "c6Neutral" }} onClick={() => setShowFilterPopover(!showFilterPopover)} /> diff --git a/packages/ui/src/components/DataManagerTable/EnumFilter.tsx b/packages/ui/src/components/DataManagerTable/EnumFilter.tsx index 21468d5b..7751555b 100644 --- a/packages/ui/src/components/DataManagerTable/EnumFilter.tsx +++ b/packages/ui/src/components/DataManagerTable/EnumFilter.tsx @@ -50,7 +50,7 @@ export const EnumFilter = ({ kind="primary" size="ExtraSmall" text={value} - icon="Close" + icon={{ name: "Close" }} iconSide="right" onClick={() => { updateFilterState({ diff --git a/packages/ui/src/components/DataManagerTable/IdFilter.tsx b/packages/ui/src/components/DataManagerTable/IdFilter.tsx index 19605638..ffd45f31 100644 --- a/packages/ui/src/components/DataManagerTable/IdFilter.tsx +++ b/packages/ui/src/components/DataManagerTable/IdFilter.tsx @@ -118,7 +118,7 @@ export const IdFilter = ({ kind="primary" size="ExtraSmall" text={value} - icon="Close" + icon={{ name: "Close" }} iconSide="right" onClick={() => { updateFilterState({ diff --git a/packages/ui/src/components/DataManagerTable/StringFilter.tsx b/packages/ui/src/components/DataManagerTable/StringFilter.tsx index f98dd2b3..79a9d842 100644 --- a/packages/ui/src/components/DataManagerTable/StringFilter.tsx +++ b/packages/ui/src/components/DataManagerTable/StringFilter.tsx @@ -53,7 +53,7 @@ export const StringFilter = ({ kind="primary" size="ExtraSmall" text={value} - icon="Close" + icon={{ name: "Close" }} iconSide="right" onClick={() => { updateFilterState({ diff --git a/packages/ui/src/components/Drawer.tsx b/packages/ui/src/components/Drawer.tsx index c3bbe991..d46f0205 100644 --- a/packages/ui/src/components/Drawer.tsx +++ b/packages/ui/src/components/Drawer.tsx @@ -117,7 +117,7 @@ export const Drawer = (props: Props) => {