From a7db4b58bc0289a19df87c0514b4b6cf1714ac32 Mon Sep 17 00:00:00 2001 From: Josh Scanlan Date: Tue, 9 Dec 2025 15:36:04 -0800 Subject: [PATCH 01/13] scaffolds magic widget component extension --- .../@magic-ext/magic-widget/.lintstagedrc.yml | 2 + .../@magic-ext/magic-widget/.prettierrc.js | 1 + packages/@magic-ext/magic-widget/LICENSE | 177 ++++++++++++++++++ .../@magic-ext/magic-widget/babel.config.json | 7 + .../@magic-ext/magic-widget/eslint.config.mjs | 21 +++ .../@magic-ext/magic-widget/jest.config.ts | 13 ++ packages/@magic-ext/magic-widget/package.json | 40 ++++ .../@magic-ext/magic-widget/pnpm-lock.yaml | 123 ++++++++++++ .../magic-widget/src/MagicWidget.tsx | 14 ++ .../@magic-ext/magic-widget/src/extension.ts | 11 ++ packages/@magic-ext/magic-widget/src/index.ts | 2 + .../@magic-ext/magic-widget/tsconfig.json | 4 + yarn.lock | 59 ++++++ 13 files changed, 474 insertions(+) create mode 100644 packages/@magic-ext/magic-widget/.lintstagedrc.yml create mode 100644 packages/@magic-ext/magic-widget/.prettierrc.js create mode 100644 packages/@magic-ext/magic-widget/LICENSE create mode 100644 packages/@magic-ext/magic-widget/babel.config.json create mode 100644 packages/@magic-ext/magic-widget/eslint.config.mjs create mode 100644 packages/@magic-ext/magic-widget/jest.config.ts create mode 100644 packages/@magic-ext/magic-widget/package.json create mode 100644 packages/@magic-ext/magic-widget/pnpm-lock.yaml create mode 100644 packages/@magic-ext/magic-widget/src/MagicWidget.tsx create mode 100644 packages/@magic-ext/magic-widget/src/extension.ts create mode 100644 packages/@magic-ext/magic-widget/src/index.ts create mode 100644 packages/@magic-ext/magic-widget/tsconfig.json diff --git a/packages/@magic-ext/magic-widget/.lintstagedrc.yml b/packages/@magic-ext/magic-widget/.lintstagedrc.yml new file mode 100644 index 000000000..1c250ad65 --- /dev/null +++ b/packages/@magic-ext/magic-widget/.lintstagedrc.yml @@ -0,0 +1,2 @@ +'*.{ts,tsx}': + - eslint --fix diff --git a/packages/@magic-ext/magic-widget/.prettierrc.js b/packages/@magic-ext/magic-widget/.prettierrc.js new file mode 100644 index 000000000..6177cac66 --- /dev/null +++ b/packages/@magic-ext/magic-widget/.prettierrc.js @@ -0,0 +1 @@ +module.exports = require('../../../.prettierrc.js'); diff --git a/packages/@magic-ext/magic-widget/LICENSE b/packages/@magic-ext/magic-widget/LICENSE new file mode 100644 index 000000000..7335bc897 --- /dev/null +++ b/packages/@magic-ext/magic-widget/LICENSE @@ -0,0 +1,177 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + diff --git a/packages/@magic-ext/magic-widget/babel.config.json b/packages/@magic-ext/magic-widget/babel.config.json new file mode 100644 index 000000000..7521eb073 --- /dev/null +++ b/packages/@magic-ext/magic-widget/babel.config.json @@ -0,0 +1,7 @@ +{ + "env": { + "test": { + "plugins": ["@babel/plugin-transform-modules-commonjs"] + } + } +} diff --git a/packages/@magic-ext/magic-widget/eslint.config.mjs b/packages/@magic-ext/magic-widget/eslint.config.mjs new file mode 100644 index 000000000..c68f8e69b --- /dev/null +++ b/packages/@magic-ext/magic-widget/eslint.config.mjs @@ -0,0 +1,21 @@ +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; +import rootEslintConfig from '../../../eslint.config.mjs'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +export default [ + ...rootEslintConfig, + { + ignores: ['node_modules', 'coverage', 'dist', 'eslint.config.mjs', 'jest.config.ts'], + }, + { + languageOptions: { + parserOptions: { + project: ['./tsconfig.json', './test/tsconfig.json'], + tsconfigRootDir: __dirname, + }, + }, + }, +]; diff --git a/packages/@magic-ext/magic-widget/jest.config.ts b/packages/@magic-ext/magic-widget/jest.config.ts new file mode 100644 index 000000000..433182c4b --- /dev/null +++ b/packages/@magic-ext/magic-widget/jest.config.ts @@ -0,0 +1,13 @@ +import baseJestConfig from '../../../jest.config'; +import type { Config } from '@jest/types'; + +const config: Config.InitialOptions = { + ...baseJestConfig, + transform: { + '^.+\\.(js|jsx)$': 'babel-jest', + '\\.(ts|tsx)$': 'ts-jest', + }, + coveragePathIgnorePatterns: ['index.cdn.ts', 'index.native.ts'], +}; + +export default config; diff --git a/packages/@magic-ext/magic-widget/package.json b/packages/@magic-ext/magic-widget/package.json new file mode 100644 index 000000000..a187fff04 --- /dev/null +++ b/packages/@magic-ext/magic-widget/package.json @@ -0,0 +1,40 @@ +{ + "name": "@magic-ext/magic-widget", + "version": "0.0.1", + "description": "Magic SDK Widget Extension with React components.", + "author": "Magic (https://magic.link/)", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/magiclabs/magic-js" + }, + "files": [ + "dist" + ], + "target": "browser", + "main": "./dist/cjs/index.js", + "module": "./dist/es/index.mjs", + "types": "./dist/types/index.d.ts", + "exports": { + "import": "./dist/es/index.mjs", + "types": "./dist/types/index.d.ts", + "require": "./dist/cjs/index.js" + }, + "externals": { + "include": [ + "@magic-sdk/provider", + "react", + "react-dom" + ] + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "devDependencies": { + "@magic-sdk/provider": "^31.0.0", + "@types/react": "^18.0.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } +} diff --git a/packages/@magic-ext/magic-widget/pnpm-lock.yaml b/packages/@magic-ext/magic-widget/pnpm-lock.yaml new file mode 100644 index 000000000..9abbee0dc --- /dev/null +++ b/packages/@magic-ext/magic-widget/pnpm-lock.yaml @@ -0,0 +1,123 @@ +lockfileVersion: '9.0' + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + +importers: + + .: + devDependencies: + '@magic-sdk/provider': + specifier: ^31.0.0 + version: 31.2.0(localforage@1.10.0) + '@types/react': + specifier: ^18.0.0 + version: 18.3.27 + react: + specifier: ^18.0.0 + version: 18.3.1 + react-dom: + specifier: ^18.0.0 + version: 18.3.1(react@18.3.1) + +packages: + + '@magic-sdk/provider@31.2.0': + resolution: {integrity: sha512-BiLnTn97HFnUWDT04m38t2z0IyoaVx1b9wb96T7YeYylDrIyOab/ma7L2P2gnLwAOmQq8N8Ky+gid1cVExbKWA==} + peerDependencies: + localforage: ^1.7.4 + + '@magic-sdk/types@25.2.0': + resolution: {integrity: sha512-/S78nj/jBND68Cp6L1JIDugpzIdAGRMsL+XsUHyVmyMhVcZvkZycEOOrmDH0SP0mjd29UvNLnPsJY1RT6A4NeA==} + + '@types/prop-types@15.7.15': + resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==} + + '@types/react@18.3.27': + resolution: {integrity: sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==} + + csstype@3.2.3: + resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==} + + eventemitter3@4.0.7: + resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==} + + immediate@3.0.6: + resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==} + + js-tokens@4.0.0: + resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} + + lie@3.1.1: + resolution: {integrity: sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==} + + localforage@1.10.0: + resolution: {integrity: sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==} + + loose-envify@1.4.0: + resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} + hasBin: true + + react-dom@18.3.1: + resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} + peerDependencies: + react: ^18.3.1 + + react@18.3.1: + resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} + engines: {node: '>=0.10.0'} + + scheduler@0.23.2: + resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==} + +snapshots: + + '@magic-sdk/provider@31.2.0(localforage@1.10.0)': + dependencies: + '@magic-sdk/types': 25.2.0 + eventemitter3: 4.0.7 + localforage: 1.10.0 + + '@magic-sdk/types@25.2.0': {} + + '@types/prop-types@15.7.15': {} + + '@types/react@18.3.27': + dependencies: + '@types/prop-types': 15.7.15 + csstype: 3.2.3 + + csstype@3.2.3: {} + + eventemitter3@4.0.7: {} + + immediate@3.0.6: {} + + js-tokens@4.0.0: {} + + lie@3.1.1: + dependencies: + immediate: 3.0.6 + + localforage@1.10.0: + dependencies: + lie: 3.1.1 + + loose-envify@1.4.0: + dependencies: + js-tokens: 4.0.0 + + react-dom@18.3.1(react@18.3.1): + dependencies: + loose-envify: 1.4.0 + react: 18.3.1 + scheduler: 0.23.2 + + react@18.3.1: + dependencies: + loose-envify: 1.4.0 + + scheduler@0.23.2: + dependencies: + loose-envify: 1.4.0 diff --git a/packages/@magic-ext/magic-widget/src/MagicWidget.tsx b/packages/@magic-ext/magic-widget/src/MagicWidget.tsx new file mode 100644 index 000000000..6b1233fab --- /dev/null +++ b/packages/@magic-ext/magic-widget/src/MagicWidget.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +export function MagicWidget() { + return ( +
+ Hello World +
+ ); +} diff --git a/packages/@magic-ext/magic-widget/src/extension.ts b/packages/@magic-ext/magic-widget/src/extension.ts new file mode 100644 index 000000000..7b623e02d --- /dev/null +++ b/packages/@magic-ext/magic-widget/src/extension.ts @@ -0,0 +1,11 @@ +import { Extension } from '@magic-sdk/provider'; + +export class MagicWidgetExtension extends Extension.Internal<'magicWidget'> { + name = 'magicWidget' as const; + config = {}; + + constructor() { + super(); + } +} + diff --git a/packages/@magic-ext/magic-widget/src/index.ts b/packages/@magic-ext/magic-widget/src/index.ts new file mode 100644 index 000000000..5d2e3214a --- /dev/null +++ b/packages/@magic-ext/magic-widget/src/index.ts @@ -0,0 +1,2 @@ +export * from './MagicWidget'; +export * from './extension'; diff --git a/packages/@magic-ext/magic-widget/tsconfig.json b/packages/@magic-ext/magic-widget/tsconfig.json new file mode 100644 index 000000000..0c9f52e80 --- /dev/null +++ b/packages/@magic-ext/magic-widget/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../tsconfig.settings.json" +} + diff --git a/yarn.lock b/yarn.lock index 4d799461b..8ca68572e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3173,6 +3173,20 @@ __metadata: languageName: unknown linkType: soft +"@magic-ext/magic-widget@workspace:packages/@magic-ext/magic-widget": + version: 0.0.0-use.local + resolution: "@magic-ext/magic-widget@workspace:packages/@magic-ext/magic-widget" + dependencies: + "@magic-sdk/provider": ^31.0.0 + "@types/react": ^18.0.0 + react: ^18.0.0 + react-dom: ^18.0.0 + peerDependencies: + react: ^18.0.0 + react-dom: ^18.0.0 + languageName: unknown + linkType: soft + "@magic-ext/near@workspace:packages/@magic-ext/near": version: 0.0.0-use.local resolution: "@magic-ext/near@workspace:packages/@magic-ext/near" @@ -5617,6 +5631,23 @@ __metadata: languageName: node linkType: hard +"@types/prop-types@npm:*": + version: 15.7.15 + resolution: "@types/prop-types@npm:15.7.15" + checksum: 31aa2f59b28f24da6fb4f1d70807dae2aedfce090ec63eaf9ea01727a9533ef6eaf017de5bff99fbccad7d1c9e644f52c6c2ba30869465dd22b1a7221c29f356 + languageName: node + linkType: hard + +"@types/react@npm:^18.0.0": + version: 18.3.27 + resolution: "@types/react@npm:18.3.27" + dependencies: + "@types/prop-types": "*" + csstype: ^3.2.2 + checksum: c74d0ab5155226998a52b568f6280536205f8fe4317f77bd5d5258bc131cc9134a2db68dc818cb8e8402a2f229843c4a5bde339faf7e64d441630e569a9e5421 + languageName: node + linkType: hard + "@types/react@npm:^19.1.0": version: 19.1.0 resolution: "@types/react@npm:19.1.0" @@ -8744,6 +8775,13 @@ __metadata: languageName: node linkType: hard +"csstype@npm:^3.2.2": + version: 3.2.3 + resolution: "csstype@npm:3.2.3" + checksum: cb882521b3398958a1ce6ca98c011aec0bde1c77ecaf8a1dd4db3b112a189939beae3b1308243b2fe50fc27eb3edeb0f73a5a4d91d928765dc6d5ecc7bda92ee + languageName: node + linkType: hard + "damerau-levenshtein@npm:^1.0.8": version: 1.0.8 resolution: "damerau-levenshtein@npm:1.0.8" @@ -17249,6 +17287,18 @@ __metadata: languageName: node linkType: hard +"react-dom@npm:^18.0.0": + version: 18.3.1 + resolution: "react-dom@npm:18.3.1" + dependencies: + loose-envify: ^1.1.0 + scheduler: ^0.23.2 + peerDependencies: + react: ^18.3.1 + checksum: 298954ecd8f78288dcaece05e88b570014d8f6dce5db6f66e6ee91448debeb59dcd31561dddb354eee47e6c1bb234669459060deb238ed0213497146e555a0b9 + languageName: node + linkType: hard + "react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.0.0, react-is@npm:^18.3.1": version: 18.3.1 resolution: "react-is@npm:18.3.1" @@ -17442,6 +17492,15 @@ __metadata: languageName: node linkType: hard +"react@npm:^18.0.0": + version: 18.3.1 + resolution: "react@npm:18.3.1" + dependencies: + loose-envify: ^1.1.0 + checksum: a27bcfa8ff7c15a1e50244ad0d0c1cb2ad4375eeffefd266a64889beea6f6b64c4966c9b37d14ee32d6c9fcd5aa6ba183b6988167ab4d127d13e7cb5b386a376 + languageName: node + linkType: hard + "react@npm:^19.1.0, react@npm:~19.1.0": version: 19.1.0 resolution: "react@npm:19.1.0" From 821cac0dfef7f84885e2e10f20fd841569a8c13c Mon Sep 17 00:00:00 2001 From: Josh Scanlan Date: Tue, 9 Dec 2025 17:00:16 -0800 Subject: [PATCH 02/13] add ui components WIP --- .npmrc | 3 + .yarnrc.yml | 5 + .../@magic-ext/magic-widget/eslint.config.mjs | 13 +- packages/@magic-ext/magic-widget/package.json | 26 +- .../@magic-ext/magic-widget/panda.config.ts | 53 + .../magic-widget/postcss.config.cjs | 6 + .../magic-widget/src/MagicWidget.tsx | 34 +- .../magic-widget/src/require-shim.js | 20 + .../styled-system/css/conditions.js | 34 + .../magic-widget/styled-system/css/css.d.ts | 9 + .../magic-widget/styled-system/css/css.js | 45 + .../magic-widget/styled-system/css/cva.d.ts | 6 + .../magic-widget/styled-system/css/cva.js | 85 + .../magic-widget/styled-system/css/cx.d.ts | 5 + .../magic-widget/styled-system/css/cx.js | 15 + .../magic-widget/styled-system/css/index.d.ts | 5 + .../magic-widget/styled-system/css/index.js | 4 + .../magic-widget/styled-system/css/sva.d.ts | 4 + .../magic-widget/styled-system/css/sva.js | 38 + .../magic-widget/styled-system/helpers.js | 326 + .../styled-system/jsx/aspect-ratio.d.ts | 10 + .../styled-system/jsx/aspect-ratio.js | 14 + .../magic-widget/styled-system/jsx/bleed.d.ts | 10 + .../magic-widget/styled-system/jsx/bleed.js | 14 + .../magic-widget/styled-system/jsx/box.d.ts | 10 + .../magic-widget/styled-system/jsx/box.js | 14 + .../styled-system/jsx/center.d.ts | 10 + .../magic-widget/styled-system/jsx/center.js | 14 + .../styled-system/jsx/circle.d.ts | 10 + .../magic-widget/styled-system/jsx/circle.js | 14 + .../styled-system/jsx/container.d.ts | 10 + .../styled-system/jsx/container.js | 14 + .../magic-widget/styled-system/jsx/cq.d.ts | 10 + .../magic-widget/styled-system/jsx/cq.js | 14 + .../styled-system/jsx/divider.d.ts | 10 + .../magic-widget/styled-system/jsx/divider.js | 14 + .../styled-system/jsx/factory-helper.js | 22 + .../styled-system/jsx/factory.d.ts | 3 + .../magic-widget/styled-system/jsx/factory.js | 80 + .../magic-widget/styled-system/jsx/flex.d.ts | 10 + .../magic-widget/styled-system/jsx/flex.js | 14 + .../magic-widget/styled-system/jsx/float.d.ts | 10 + .../magic-widget/styled-system/jsx/float.js | 14 + .../styled-system/jsx/grid-item.d.ts | 10 + .../styled-system/jsx/grid-item.js | 14 + .../magic-widget/styled-system/jsx/grid.d.ts | 10 + .../magic-widget/styled-system/jsx/grid.js | 14 + .../styled-system/jsx/hstack.d.ts | 10 + .../magic-widget/styled-system/jsx/hstack.js | 14 + .../magic-widget/styled-system/jsx/index.d.ts | 25 + .../magic-widget/styled-system/jsx/index.js | 23 + .../styled-system/jsx/is-valid-prop.d.ts | 11 + .../styled-system/jsx/is-valid-prop.js | 17 + .../styled-system/jsx/link-box.d.ts | 10 + .../styled-system/jsx/link-box.js | 14 + .../styled-system/jsx/link-overlay.d.ts | 10 + .../styled-system/jsx/link-overlay.js | 14 + .../styled-system/jsx/spacer.d.ts | 10 + .../magic-widget/styled-system/jsx/spacer.js | 14 + .../styled-system/jsx/square.d.ts | 10 + .../magic-widget/styled-system/jsx/square.js | 14 + .../magic-widget/styled-system/jsx/stack.d.ts | 10 + .../magic-widget/styled-system/jsx/stack.js | 14 + .../styled-system/jsx/visually-hidden.d.ts | 10 + .../styled-system/jsx/visually-hidden.js | 14 + .../styled-system/jsx/vstack.d.ts | 10 + .../magic-widget/styled-system/jsx/vstack.js | 14 + .../magic-widget/styled-system/jsx/wrap.d.ts | 10 + .../magic-widget/styled-system/jsx/wrap.js | 14 + .../styled-system/patterns/aspect-ratio.d.ts | 21 + .../styled-system/patterns/aspect-ratio.js | 38 + .../styled-system/patterns/bleed.d.ts | 22 + .../styled-system/patterns/bleed.js | 24 + .../styled-system/patterns/box.d.ts | 21 + .../styled-system/patterns/box.js | 15 + .../styled-system/patterns/center.d.ts | 21 + .../styled-system/patterns/center.js | 21 + .../styled-system/patterns/circle.d.ts | 21 + .../styled-system/patterns/circle.js | 25 + .../styled-system/patterns/container.d.ts | 21 + .../styled-system/patterns/container.js | 21 + .../styled-system/patterns/cq.d.ts | 22 + .../magic-widget/styled-system/patterns/cq.js | 21 + .../styled-system/patterns/divider.d.ts | 23 + .../styled-system/patterns/divider.js | 25 + .../styled-system/patterns/flex.d.ts | 27 + .../styled-system/patterns/flex.js | 26 + .../styled-system/patterns/float.d.ts | 24 + .../styled-system/patterns/float.js | 52 + .../styled-system/patterns/grid-item.d.ts | 26 + .../styled-system/patterns/grid-item.js | 25 + .../styled-system/patterns/grid.d.ts | 25 + .../styled-system/patterns/grid.js | 27 + .../styled-system/patterns/hstack.d.ts | 22 + .../styled-system/patterns/hstack.js | 24 + .../styled-system/patterns/index.d.ts | 22 + .../styled-system/patterns/index.js | 21 + .../styled-system/patterns/link-box.d.ts | 21 + .../styled-system/patterns/link-box.js | 22 + .../styled-system/patterns/link-overlay.d.ts | 21 + .../styled-system/patterns/link-overlay.js | 27 + .../styled-system/patterns/spacer.d.ts | 21 + .../styled-system/patterns/spacer.js | 21 + .../styled-system/patterns/square.d.ts | 21 + .../styled-system/patterns/square.js | 24 + .../styled-system/patterns/stack.d.ts | 24 + .../styled-system/patterns/stack.js | 24 + .../patterns/visually-hidden.d.ts | 21 + .../styled-system/patterns/visually-hidden.js | 18 + .../styled-system/patterns/vstack.d.ts | 22 + .../styled-system/patterns/vstack.js | 24 + .../styled-system/patterns/wrap.d.ts | 25 + .../styled-system/patterns/wrap.js | 25 + .../styled-system/tokens/index.d.ts | 9 + .../styled-system/tokens/index.js | 2400 ++ .../styled-system/tokens/tokens.d.ts | 69 + .../styled-system/types/composition.d.ts | 111 + .../styled-system/types/conditions.d.ts | 276 + .../styled-system/types/csstype.d.ts | 21298 ++++++++++++++++ .../styled-system/types/global.d.ts | 19 + .../styled-system/types/index.d.ts | 8 + .../magic-widget/styled-system/types/jsx.d.ts | 52 + .../styled-system/types/parts.d.ts | 8 + .../styled-system/types/pattern.d.ts | 74 + .../styled-system/types/prop-type.d.ts | 408 + .../styled-system/types/recipe.d.ts | 169 + .../styled-system/types/selectors.d.ts | 59 + .../styled-system/types/static-css.d.ts | 47 + .../styled-system/types/style-props.d.ts | 668 + .../styled-system/types/system-types.d.ts | 93 + .../@magic-ext/magic-widget/tsconfig.json | 10 +- scripts/bin/wsrun/build-package.ts | 11 +- scripts/utils/esbuild.ts | 75 +- yarn.lock | 3579 ++- 134 files changed, 31653 insertions(+), 255 deletions(-) create mode 100644 .npmrc create mode 100644 packages/@magic-ext/magic-widget/panda.config.ts create mode 100644 packages/@magic-ext/magic-widget/postcss.config.cjs create mode 100644 packages/@magic-ext/magic-widget/src/require-shim.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/css/conditions.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/css/css.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/css/css.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/css/cva.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/css/cva.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/css/cx.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/css/cx.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/css/index.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/css/index.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/css/sva.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/css/sva.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/helpers.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/aspect-ratio.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/aspect-ratio.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/bleed.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/bleed.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/box.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/box.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/center.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/center.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/circle.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/circle.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/container.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/container.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/cq.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/cq.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/divider.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/divider.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/factory-helper.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/factory.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/factory.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/flex.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/flex.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/float.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/float.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/grid-item.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/grid-item.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/grid.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/grid.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/hstack.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/hstack.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/index.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/index.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/is-valid-prop.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/is-valid-prop.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/link-box.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/link-box.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/link-overlay.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/link-overlay.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/spacer.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/spacer.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/square.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/square.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/stack.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/stack.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/visually-hidden.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/visually-hidden.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/vstack.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/vstack.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/wrap.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/jsx/wrap.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/aspect-ratio.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/aspect-ratio.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/bleed.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/bleed.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/box.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/box.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/center.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/center.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/circle.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/circle.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/container.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/container.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/cq.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/cq.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/divider.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/divider.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/flex.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/flex.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/float.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/float.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/grid-item.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/grid-item.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/grid.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/grid.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/hstack.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/hstack.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/index.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/index.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/link-box.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/link-box.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/link-overlay.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/link-overlay.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/spacer.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/spacer.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/square.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/square.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/stack.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/stack.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/visually-hidden.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/visually-hidden.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/vstack.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/vstack.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/wrap.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/patterns/wrap.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/tokens/index.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/tokens/index.js create mode 100644 packages/@magic-ext/magic-widget/styled-system/tokens/tokens.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/types/composition.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/types/conditions.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/types/csstype.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/types/global.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/types/index.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/types/jsx.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/types/parts.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/types/pattern.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/types/prop-type.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/types/recipe.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/types/selectors.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/types/static-css.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/types/style-props.d.ts create mode 100644 packages/@magic-ext/magic-widget/styled-system/types/system-types.d.ts diff --git a/.npmrc b/.npmrc new file mode 100644 index 000000000..e1d14e38b --- /dev/null +++ b/.npmrc @@ -0,0 +1,3 @@ +//registry.npmjs.org/:_authToken=${NPM_TOKEN} +auto-install-peers=true + diff --git a/.yarnrc.yml b/.yarnrc.yml index 5413a22d8..f2e97e603 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -2,6 +2,11 @@ nmHoistingLimits: workspaces nodeLinker: node-modules +npmScopes: + magiclabs: + npmRegistryServer: "https://registry.npmjs.org" + npmAuthToken: "${NPM_TOKEN}" + plugins: - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs spec: "@yarnpkg/plugin-workspace-tools" diff --git a/packages/@magic-ext/magic-widget/eslint.config.mjs b/packages/@magic-ext/magic-widget/eslint.config.mjs index c68f8e69b..adae3ceb4 100644 --- a/packages/@magic-ext/magic-widget/eslint.config.mjs +++ b/packages/@magic-ext/magic-widget/eslint.config.mjs @@ -8,12 +8,21 @@ const __dirname = path.dirname(__filename); export default [ ...rootEslintConfig, { - ignores: ['node_modules', 'coverage', 'dist', 'eslint.config.mjs', 'jest.config.ts'], + ignores: [ + 'node_modules', + 'coverage', + 'dist', + 'eslint.config.mjs', + 'jest.config.ts', + 'panda.config.ts', + 'postcss.config.cjs', + 'styled-system', + ], }, { languageOptions: { parserOptions: { - project: ['./tsconfig.json', './test/tsconfig.json'], + project: ['./tsconfig.json'], tsconfigRootDir: __dirname, }, }, diff --git a/packages/@magic-ext/magic-widget/package.json b/packages/@magic-ext/magic-widget/package.json index a187fff04..289892752 100644 --- a/packages/@magic-ext/magic-widget/package.json +++ b/packages/@magic-ext/magic-widget/package.json @@ -8,6 +8,10 @@ "type": "git", "url": "https://github.com/magiclabs/magic-js" }, + "scripts": { + "prepare": "panda codegen", + "build:css": "panda cssgen --outfile dist/styles.css" + }, "files": [ "dist" ], @@ -16,23 +20,39 @@ "module": "./dist/es/index.mjs", "types": "./dist/types/index.d.ts", "exports": { - "import": "./dist/es/index.mjs", - "types": "./dist/types/index.d.ts", - "require": "./dist/cjs/index.js" + ".": { + "import": "./dist/es/index.mjs", + "types": "./dist/types/index.d.ts", + "require": "./dist/cjs/index.js" + }, + "./styles.css": "./dist/styles.css" }, "externals": { "include": [ "@magic-sdk/provider", "react", "react-dom" + ], + "exclude": [ + "@magiclabs/ui-components" ] }, + "esbuildAliases": { + "@styled/css": "./styled-system/css", + "@styled/jsx": "./styled-system/jsx", + "@styled/tokens": "./styled-system/tokens", + "@styled/patterns": "./styled-system/patterns" + }, + "dependencies": { + "@magiclabs/ui-components": "^1.49.0" + }, "peerDependencies": { "react": "^18.0.0", "react-dom": "^18.0.0" }, "devDependencies": { "@magic-sdk/provider": "^31.0.0", + "@pandacss/dev": "^0.35.0", "@types/react": "^18.0.0", "react": "^18.0.0", "react-dom": "^18.0.0" diff --git a/packages/@magic-ext/magic-widget/panda.config.ts b/packages/@magic-ext/magic-widget/panda.config.ts new file mode 100644 index 000000000..e3d57d5a4 --- /dev/null +++ b/packages/@magic-ext/magic-widget/panda.config.ts @@ -0,0 +1,53 @@ +import { magicPreset } from '@magiclabs/ui-components/presets'; +import { defineConfig } from '@pandacss/dev'; + +export default defineConfig({ + // Whether to use css reset + preflight: true, + // Minify the generated css + minify: true, + // Hash all classnames + hash: true, + // Clean the output directory before generating the css + clean: true, + + importMap: '@styled', + + // Where to look for your css declarations + include: [ + './node_modules/@magiclabs/ui-components/dist/panda.buildinfo.json', + './src/**/*.{js,jsx,ts,tsx}', + ], + + // Files to exclude + exclude: [], + + // Styling conditions / modes + conditions: { + light: '[data-color-mode=light] &', + dark: '[data-color-mode=dark] &', + }, + + presets: ['@pandacss/dev/presets', magicPreset], + + // Useful for theme customization + theme: { + extend: {}, + }, + + // The output directory for your css system + outdir: 'styled-system', + + // Output extension impacting build + outExtension: 'js', + + // The JSX framework to use + jsxFramework: 'react', + + globalCss: { + html: { + '--primary': 'black', + }, + }, +}); + diff --git a/packages/@magic-ext/magic-widget/postcss.config.cjs b/packages/@magic-ext/magic-widget/postcss.config.cjs new file mode 100644 index 000000000..678b267b6 --- /dev/null +++ b/packages/@magic-ext/magic-widget/postcss.config.cjs @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + '@pandacss/dev/postcss': {}, + }, +}; + diff --git a/packages/@magic-ext/magic-widget/src/MagicWidget.tsx b/packages/@magic-ext/magic-widget/src/MagicWidget.tsx index 6b1233fab..0d2ad0694 100644 --- a/packages/@magic-ext/magic-widget/src/MagicWidget.tsx +++ b/packages/@magic-ext/magic-widget/src/MagicWidget.tsx @@ -1,14 +1,32 @@ +import { Button, Footer, Header, IcoDismiss, Modal, Page, Text } from '@magiclabs/ui-components'; +import { VStack } from '../styled-system/jsx'; +import { token } from '../styled-system/tokens'; import React from 'react'; export function MagicWidget() { return ( -
- Hello World -
+ + +
+ + + App Name + + + + + + + Header + +
+ This is a content message. +