From 1716bfa19fb7aeb3250efa221a963ef61480238e Mon Sep 17 00:00:00 2001 From: gmolki Date: Wed, 3 Apr 2024 09:51:03 +0200 Subject: [PATCH 01/15] Move components to this new repo --- .npmrc | 2 + next.config.mjs | 38 +- package-lock.json | 1688 +++++++++++++++++++++++- package.json | 6 + src/builder-registry.ts | 278 +++- src/components/Container/Container.tsx | 11 + src/components/Container/styles.tsx | 12 + src/components/Container/types.ts | 5 + src/components/H1/H1.tsx | 8 + src/components/H1/styles.tsx | 11 + src/components/H1/types.ts | 8 + src/components/H2/H2.tsx | 8 + src/components/H2/styles.tsx | 11 + src/components/H2/types.ts | 8 + src/pages/_app.tsx | 9 +- src/pages/_dynamicPage.tsx | 34 +- 16 files changed, 2103 insertions(+), 34 deletions(-) create mode 100644 .npmrc create mode 100644 src/components/Container/Container.tsx create mode 100644 src/components/Container/styles.tsx create mode 100644 src/components/Container/types.ts create mode 100644 src/components/H1/H1.tsx create mode 100644 src/components/H1/styles.tsx create mode 100644 src/components/H1/types.ts create mode 100644 src/components/H2/H2.tsx create mode 100644 src/components/H2/styles.tsx create mode 100644 src/components/H2/types.ts diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..1e02380 --- /dev/null +++ b/.npmrc @@ -0,0 +1,2 @@ +@fortawesome:registry=https://npm.fontawesome.com/ +//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN} \ No newline at end of file diff --git a/next.config.mjs b/next.config.mjs index d48c43d..54cccb8 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,13 +1,49 @@ import BuilderDevTools from "@builder.io/dev-tools/next"; +import twin from "babel-plugin-twin"; +import macros from "babel-plugin-macros"; +import styledComponents from "babel-plugin-styled-components"; +import syntaxTypescript from "@babel/plugin-syntax-typescript"; /** @type {import('next').NextConfig} */ const nextConfig = BuilderDevTools()( BuilderDevTools()({ reactStrictMode: true, - output: 'export', + output: "export", images: { unoptimized: true, }, + webpack: (config, options) => { + config.module.rules.push({ + test: /\.(tsx|ts)$/, + use: [ + options.defaultLoaders.babel, + { + loader: "babel-loader", + options: { + plugins: [ + twin, + macros, + [styledComponents, { ssr: true, displayName: true }], + [syntaxTypescript, { isTSX: true }], + ], + }, + }, + ], + }); + + config.resolve.fallback = { + ...(config.resolve.fallback || {}), + fs: false, + module: false, + path: false, + os: false, + crypto: false, + perf_hooks: false, + v8: false, + }; + + return config; + }, }) ); diff --git a/package-lock.json b/package-lock.json index 04c4b82..62ab45c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,13 +16,19 @@ "react-dom": "^18" }, "devDependencies": { + "@aleph-front/core": "^1.15.70", + "@babel/plugin-syntax-typescript": "^7.24.1", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/styled-components": "^5.1.34", "autoprefixer": "^10.0.1", + "babel-loader": "^9.1.3", + "babel-plugin-twin": "^1.1.0", "eslint": "^8", "eslint-config-next": "14.1.4", "postcss": "^8", + "styled-components": "^5.3.11", "tailwindcss": "^3.3.0", "typescript": "^5" } @@ -36,6 +42,29 @@ "node": ">=0.10.0" } }, + "node_modules/@aleph-front/core": { + "version": "1.15.70", + "resolved": "https://registry.npmjs.org/@aleph-front/core/-/core-1.15.70.tgz", + "integrity": "sha512-EdIm0AArON8Ekukc/j43x35qvgK0LfSXi5pQJOPr+9aQ5pfuB8ZAqteCfHNwqbNgbnU+FVKG6c6KPLGb+ffy5w==", + "dev": true, + "dependencies": { + "@monaco-editor/react": "^4.4.6", + "react-infinite-scroll-hook": "^4.1.1", + "transition-hook": "^1.5.2" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "^6.x", + "@fortawesome/free-brands-svg-icons": "^6.x", + "@fortawesome/pro-regular-svg-icons": "^6.x", + "@fortawesome/react-fontawesome": "^0.1.x", + "@fortawesome/sharp-solid-svg-icons": "^6.x", + "lottie-react": "^2.x.x", + "react": "^18.x", + "react-dom": "^18.x", + "styled-components": "^5.x", + "twin.macro": "^3.x" + } + }, "node_modules/@alloc/quick-lru": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", @@ -48,6 +77,20 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@ampproject/remapping": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz", + "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==", + "dev": true, + "peer": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/@babel/code-frame": { "version": "7.24.2", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz", @@ -60,6 +103,182 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/compat-data": { + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.1.tgz", + "integrity": "sha512-Pc65opHDliVpRHuKfzI+gSA4zcgr65O4cl64fFJIWEEh8JoHIHh0Oez1Eo8Arz8zq/JhgKodQaxEwUPRtZylVA==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core": { + "version": "7.24.3", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.3.tgz", + "integrity": "sha512-5FcvN1JHw2sHJChotgx8Ek0lyuh4kCKelgMTTqhYJJtloNvUfpAFMeNQUtdlIaktwrSV9LtCdqwk48wL2wBacQ==", + "dev": true, + "peer": true, + "dependencies": { + "@ampproject/remapping": "^2.2.0", + "@babel/code-frame": "^7.24.2", + "@babel/generator": "^7.24.1", + "@babel/helper-compilation-targets": "^7.23.6", + "@babel/helper-module-transforms": "^7.23.3", + "@babel/helpers": "^7.24.1", + "@babel/parser": "^7.24.1", + "@babel/template": "^7.24.0", + "@babel/traverse": "^7.24.1", + "@babel/types": "^7.24.0", + "convert-source-map": "^2.0.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.3", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@babel/core/node_modules/convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "dev": true, + "peer": true + }, + "node_modules/@babel/core/node_modules/json5": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "dev": true, + "peer": true, + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@babel/core/node_modules/semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "dev": true, + "peer": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/@babel/generator": { + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.1.tgz", + "integrity": "sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==", + "dev": true, + "dependencies": { + "@babel/types": "^7.24.0", + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.25", + "jsesc": "^2.5.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-annotate-as-pure": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz", + "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==", + "dev": true, + "dependencies": { + "@babel/types": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets": { + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz", + "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/compat-data": "^7.23.5", + "@babel/helper-validator-option": "^7.23.5", + "browserslist": "^4.22.2", + "lru-cache": "^5.1.1", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "dev": true, + "peer": true, + "dependencies": { + "yallist": "^3.0.2" + } + }, + "node_modules/@babel/helper-compilation-targets/node_modules/semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "dev": true, + "peer": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/@babel/helper-compilation-targets/node_modules/yallist": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", + "dev": true, + "peer": true + }, + "node_modules/@babel/helper-environment-visitor": { + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz", + "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-function-name": { + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz", + "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==", + "dev": true, + "dependencies": { + "@babel/template": "^7.22.15", + "@babel/types": "^7.23.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-hoist-variables": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz", + "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==", + "dev": true, + "dependencies": { + "@babel/types": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/helper-module-imports": { "version": "7.24.3", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz", @@ -71,6 +290,60 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/helper-module-transforms": { + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz", + "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/helper-environment-visitor": "^7.22.20", + "@babel/helper-module-imports": "^7.22.15", + "@babel/helper-simple-access": "^7.22.5", + "@babel/helper-split-export-declaration": "^7.22.6", + "@babel/helper-validator-identifier": "^7.22.20" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-plugin-utils": { + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz", + "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-simple-access": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz", + "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/types": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-split-export-declaration": { + "version": "7.22.6", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz", + "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==", + "dev": true, + "dependencies": { + "@babel/types": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/helper-string-parser": { "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz", @@ -87,6 +360,31 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/helper-validator-option": { + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz", + "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helpers": { + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.1.tgz", + "integrity": "sha512-BpU09QqEe6ZCHuIHFphEFgvNSrubve1FtyMton26ekZ85gRGi6LrTF7zArARp2YvyFxloeiRmtSCq5sjh1WqIg==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/template": "^7.24.0", + "@babel/traverse": "^7.24.1", + "@babel/types": "^7.24.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/highlight": { "version": "7.24.2", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz", @@ -165,6 +463,48 @@ "node": ">=4" } }, + "node_modules/@babel/parser": { + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz", + "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==", + "dev": true, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/plugin-syntax-jsx": { + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.1.tgz", + "integrity": "sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.24.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-syntax-typescript": { + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.1.tgz", + "integrity": "sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.24.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/runtime": { "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz", @@ -176,6 +516,50 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/template": { + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz", + "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.23.5", + "@babel/parser": "^7.24.0", + "@babel/types": "^7.24.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.1.tgz", + "integrity": "sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.24.1", + "@babel/generator": "^7.24.1", + "@babel/helper-environment-visitor": "^7.22.20", + "@babel/helper-function-name": "^7.23.0", + "@babel/helper-hoist-variables": "^7.22.5", + "@babel/helper-split-export-declaration": "^7.22.6", + "@babel/parser": "^7.24.1", + "@babel/types": "^7.24.0", + "debug": "^4.3.1", + "globals": "^11.1.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse/node_modules/globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "dev": true, + "engines": { + "node": ">=4" + } + }, "node_modules/@babel/types": { "version": "7.24.0", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz", @@ -279,6 +663,21 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "dev": true, + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/is-prop-valid/node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==", + "dev": true + }, "node_modules/@emotion/memoize": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", @@ -382,6 +781,82 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.5.2", + "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/6.5.2/fontawesome-common-types-6.5.2.tgz", + "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.5.2", + "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/6.5.2/fontawesome-svg-core-6.5.2.tgz", + "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==", + "dev": true, + "peer": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.5.2", + "resolved": "https://npm.fontawesome.com/@fortawesome/free-brands-svg-icons/-/6.5.2/free-brands-svg-icons-6.5.2.tgz", + "integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==", + "dev": true, + "peer": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/pro-regular-svg-icons": { + "version": "6.5.2", + "resolved": "https://npm.fontawesome.com/@fortawesome/pro-regular-svg-icons/-/6.5.2/pro-regular-svg-icons-6.5.2.tgz", + "integrity": "sha512-S+XTfbq6CUmEVZzlBhyNEDqFg1wv7jJYoJZVqOpPOLHWjeN5pIpkVcZ3NVHVbhMuhGVtER1lt/h5NTZYsJWmYQ==", + "dev": true, + "peer": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.1.19", + "resolved": "https://npm.fontawesome.com/@fortawesome/react-fontawesome/-/0.1.19/react-fontawesome-0.1.19.tgz", + "integrity": "sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==", + "dev": true, + "peer": true, + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.x" + } + }, + "node_modules/@fortawesome/sharp-solid-svg-icons": { + "version": "6.5.2", + "resolved": "https://npm.fontawesome.com/@fortawesome/sharp-solid-svg-icons/-/6.5.2/sharp-solid-svg-icons-6.5.2.tgz", + "integrity": "sha512-MKa9pkyiTjNl7RNnvAEogZgSJKpxgkhQ//5r0qOV2vi9mZGiANV185I/ddAzpLq552YqW1YJWz+9GUHw2GW6pQ==", + "dev": true, + "peer": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.2" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -491,6 +966,17 @@ "node": ">=6.0.0" } }, + "node_modules/@jridgewell/source-map": { + "version": "0.3.6", + "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz", + "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==", + "dev": true, + "peer": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.25" + } + }, "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.15", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", @@ -507,6 +993,32 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@monaco-editor/loader": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz", + "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==", + "dev": true, + "dependencies": { + "state-local": "^1.0.6" + }, + "peerDependencies": { + "monaco-editor": ">= 0.21.0 < 1" + } + }, + "node_modules/@monaco-editor/react": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz", + "integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==", + "dev": true, + "dependencies": { + "@monaco-editor/loader": "^1.4.0" + }, + "peerDependencies": { + "monaco-editor": ">= 0.25.0 < 1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@next/env": { "version": "14.1.4", "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.4.tgz", @@ -715,6 +1227,51 @@ "tslib": "^2.4.0" } }, + "node_modules/@types/eslint": { + "version": "8.56.7", + "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.7.tgz", + "integrity": "sha512-SjDvI/x3zsZnOkYZ3lCt9lOZWZLB2jIlNKz+LBgCtDurK0JZcwucxYHn1w2BJkD34dgX9Tjnak0txtq4WTggEA==", + "dev": true, + "peer": true, + "dependencies": { + "@types/estree": "*", + "@types/json-schema": "*" + } + }, + "node_modules/@types/eslint-scope": { + "version": "3.7.7", + "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz", + "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==", + "dev": true, + "peer": true, + "dependencies": { + "@types/eslint": "*", + "@types/estree": "*" + } + }, + "node_modules/@types/estree": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", + "dev": true, + "peer": true + }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", + "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", + "dev": true, + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, + "node_modules/@types/json-schema": { + "version": "7.0.15", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", + "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", + "dev": true + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -767,6 +1324,17 @@ "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", "dev": true }, + "node_modules/@types/styled-components": { + "version": "5.1.34", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz", + "integrity": "sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==", + "dev": true, + "dependencies": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@typescript-eslint/parser": { "version": "6.21.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz", @@ -883,22 +1451,197 @@ "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.21.0", - "eslint-visitor-keys": "^3.4.1" - }, - "engines": { - "node": "^16.0.0 || >=18.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" + "@typescript-eslint/types": "6.21.0", + "eslint-visitor-keys": "^3.4.1" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@ungap/structured-clone": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", + "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", + "dev": true + }, + "node_modules/@webassemblyjs/ast": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz", + "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==", + "dev": true, + "peer": true, + "dependencies": { + "@webassemblyjs/helper-numbers": "1.11.6", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6" + } + }, + "node_modules/@webassemblyjs/floating-point-hex-parser": { + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz", + "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==", + "dev": true, + "peer": true + }, + "node_modules/@webassemblyjs/helper-api-error": { + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz", + "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==", + "dev": true, + "peer": true + }, + "node_modules/@webassemblyjs/helper-buffer": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz", + "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==", + "dev": true, + "peer": true + }, + "node_modules/@webassemblyjs/helper-numbers": { + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz", + "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==", + "dev": true, + "peer": true, + "dependencies": { + "@webassemblyjs/floating-point-hex-parser": "1.11.6", + "@webassemblyjs/helper-api-error": "1.11.6", + "@xtuc/long": "4.2.2" + } + }, + "node_modules/@webassemblyjs/helper-wasm-bytecode": { + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz", + "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==", + "dev": true, + "peer": true + }, + "node_modules/@webassemblyjs/helper-wasm-section": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz", + "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==", + "dev": true, + "peer": true, + "dependencies": { + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6", + "@webassemblyjs/wasm-gen": "1.12.1" + } + }, + "node_modules/@webassemblyjs/ieee754": { + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz", + "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==", + "dev": true, + "peer": true, + "dependencies": { + "@xtuc/ieee754": "^1.2.0" + } + }, + "node_modules/@webassemblyjs/leb128": { + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz", + "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==", + "dev": true, + "peer": true, + "dependencies": { + "@xtuc/long": "4.2.2" + } + }, + "node_modules/@webassemblyjs/utf8": { + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz", + "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==", + "dev": true, + "peer": true + }, + "node_modules/@webassemblyjs/wasm-edit": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz", + "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==", + "dev": true, + "peer": true, + "dependencies": { + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6", + "@webassemblyjs/helper-wasm-section": "1.12.1", + "@webassemblyjs/wasm-gen": "1.12.1", + "@webassemblyjs/wasm-opt": "1.12.1", + "@webassemblyjs/wasm-parser": "1.12.1", + "@webassemblyjs/wast-printer": "1.12.1" + } + }, + "node_modules/@webassemblyjs/wasm-gen": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz", + "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==", + "dev": true, + "peer": true, + "dependencies": { + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6", + "@webassemblyjs/ieee754": "1.11.6", + "@webassemblyjs/leb128": "1.11.6", + "@webassemblyjs/utf8": "1.11.6" + } + }, + "node_modules/@webassemblyjs/wasm-opt": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz", + "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==", + "dev": true, + "peer": true, + "dependencies": { + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", + "@webassemblyjs/wasm-gen": "1.12.1", + "@webassemblyjs/wasm-parser": "1.12.1" + } + }, + "node_modules/@webassemblyjs/wasm-parser": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz", + "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==", + "dev": true, + "peer": true, + "dependencies": { + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-api-error": "1.11.6", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6", + "@webassemblyjs/ieee754": "1.11.6", + "@webassemblyjs/leb128": "1.11.6", + "@webassemblyjs/utf8": "1.11.6" + } + }, + "node_modules/@webassemblyjs/wast-printer": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz", + "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==", + "dev": true, + "peer": true, + "dependencies": { + "@webassemblyjs/ast": "1.12.1", + "@xtuc/long": "4.2.2" } }, - "node_modules/@ungap/structured-clone": { + "node_modules/@xtuc/ieee754": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", - "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", - "dev": true + "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", + "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==", + "dev": true, + "peer": true + }, + "node_modules/@xtuc/long": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz", + "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==", + "dev": true, + "peer": true }, "node_modules/acorn": { "version": "8.11.3", @@ -912,6 +1655,16 @@ "node": ">=0.4.0" } }, + "node_modules/acorn-import-assertions": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", + "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==", + "dev": true, + "peer": true, + "peerDependencies": { + "acorn": "^8" + } + }, "node_modules/acorn-jsx": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", @@ -937,6 +1690,55 @@ "url": "https://github.com/sponsors/epoberezkin" } }, + "node_modules/ajv-formats": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", + "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==", + "dev": true, + "dependencies": { + "ajv": "^8.0.0" + }, + "peerDependencies": { + "ajv": "^8.0.0" + }, + "peerDependenciesMeta": { + "ajv": { + "optional": true + } + } + }, + "node_modules/ajv-formats/node_modules/ajv": { + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/ajv-formats/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true + }, + "node_modules/ajv-keywords": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "dev": true, + "peer": true, + "peerDependencies": { + "ajv": "^6.9.1" + } + }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", @@ -1245,6 +2047,23 @@ "dequal": "^2.0.3" } }, + "node_modules/babel-loader": { + "version": "9.1.3", + "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.3.tgz", + "integrity": "sha512-xG3ST4DglodGf8qSwv0MdeWLhrDsw/32QMdTO5T1ZIp9gQur0HkCyFs7Awskr10JKXFXwpAhiCuYX5oGXnRGbw==", + "dev": true, + "dependencies": { + "find-cache-dir": "^4.0.0", + "schema-utils": "^4.0.0" + }, + "engines": { + "node": ">= 14.15.0" + }, + "peerDependencies": { + "@babel/core": "^7.12.0", + "webpack": ">=5" + } + }, "node_modules/babel-plugin-emotion": { "version": "10.2.2", "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz", @@ -1280,11 +2099,36 @@ "resolve": "^1.12.0" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz", + "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==", + "dev": true, + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.22.5", + "@babel/helper-module-imports": "^7.22.5", + "@babel/plugin-syntax-jsx": "^7.22.5", + "lodash": "^4.17.21", + "picomatch": "^2.3.1" + }, + "peerDependencies": { + "styled-components": ">= 2" + } + }, "node_modules/babel-plugin-syntax-jsx": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" }, + "node_modules/babel-plugin-twin": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-twin/-/babel-plugin-twin-1.1.0.tgz", + "integrity": "sha512-x4AZ7JSh8MmC6uEN41nrU021jLA0B4E1UD7AI0KJOtAwvTH1wEMLugW5SyY4m/CWDtsqZc1fqT1lkDoO2rdmHg==", + "dev": true, + "dependencies": { + "@babel/template": "^7.12.13" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1409,6 +2253,13 @@ "ieee754": "^1.1.13" } }, + "node_modules/buffer-from": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", + "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", + "dev": true, + "peer": true + }, "node_modules/busboy": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", @@ -1456,6 +2307,15 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001600", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz", @@ -1532,6 +2392,16 @@ "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==" }, + "node_modules/chrome-trace-event": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz", + "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6.0" + } + }, "node_modules/client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", @@ -1564,6 +2434,12 @@ "node": ">= 6" } }, + "node_modules/common-path-prefix": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz", + "integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==", + "dev": true + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -1612,6 +2488,26 @@ "node": ">= 8" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dev": true, + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -1972,6 +2868,13 @@ "node": ">= 0.4" } }, + "node_modules/es-module-lexer": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.0.tgz", + "integrity": "sha512-pqrTKmwEIgafsYZAGw9kszYzmagcE/n4dbgwGWLEXg7J4QFJVQRBld8j3Q3GNez79jzxZshq0bcT962QHOghjw==", + "dev": true, + "peer": true + }, "node_modules/es-object-atoms": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz", @@ -2457,6 +3360,16 @@ "node": ">=0.10.0" } }, + "node_modules/events": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz", + "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==", + "dev": true, + "peer": true, + "engines": { + "node": ">=0.8.x" + } + }, "node_modules/expand-template": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz", @@ -2544,6 +3457,22 @@ "node": ">=8" } }, + "node_modules/find-cache-dir": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-4.0.0.tgz", + "integrity": "sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==", + "dev": true, + "dependencies": { + "common-path-prefix": "^3.0.0", + "pkg-dir": "^7.0.0" + }, + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/find-root": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", @@ -2683,6 +3612,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/gensync": { + "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", + "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/get-intrinsic": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", @@ -2770,6 +3709,13 @@ "node": ">=10.13.0" } }, + "node_modules/glob-to-regexp": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz", + "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==", + "dev": true, + "peer": true + }, "node_modules/glob/node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -2952,6 +3898,15 @@ "node": ">= 0.4" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dev": true, + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/ieee754": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", @@ -3464,6 +4419,37 @@ "@pkgjs/parseargs": "^0.11.0" } }, + "node_modules/jest-worker": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz", + "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==", + "dev": true, + "peer": true, + "dependencies": { + "@types/node": "*", + "merge-stream": "^2.0.0", + "supports-color": "^8.0.0" + }, + "engines": { + "node": ">= 10.13.0" + } + }, + "node_modules/jest-worker/node_modules/supports-color": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", + "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", + "dev": true, + "peer": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/supports-color?sponsor=1" + } + }, "node_modules/jiti": { "version": "1.21.0", "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz", @@ -3490,6 +4476,18 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/jsesc": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", + "dev": true, + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/json-buffer": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz", @@ -3603,6 +4601,16 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "node_modules/loader-runner": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", + "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6.11.5" + } + }, "node_modules/locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", @@ -3618,6 +4626,19 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "dev": true + }, + "node_modules/lodash.get": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", + "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==", + "dev": true, + "peer": true + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -3635,6 +4656,27 @@ "loose-envify": "cli.js" } }, + "node_modules/lottie-react": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.4.0.tgz", + "integrity": "sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==", + "dev": true, + "peer": true, + "dependencies": { + "lottie-web": "^5.10.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/lottie-web": { + "version": "5.12.2", + "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz", + "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==", + "dev": true, + "peer": true + }, "node_modules/lru-cache": { "version": "10.2.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz", @@ -3644,6 +4686,13 @@ "node": "14 || >=16.14" } }, + "node_modules/merge-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", + "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", + "dev": true, + "peer": true + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -3666,6 +4715,29 @@ "node": ">=8.6" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "dev": true, + "peer": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dev": true, + "peer": true, + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/mimic-response": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz", @@ -3711,6 +4783,13 @@ "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz", "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==" }, + "node_modules/monaco-editor": { + "version": "0.47.0", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.47.0.tgz", + "integrity": "sha512-VabVvHvQ9QmMwXu4du008ZDuyLnHs9j7ThVFsiJoXSOQk18+LF89N4ADzPbFenm0W4V2bGHnFBztIRQTgBfxzw==", + "dev": true, + "peer": true + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -3756,6 +4835,13 @@ "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true }, + "node_modules/neo-async": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", + "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", + "dev": true, + "peer": true + }, "node_modules/next": { "version": "14.1.4", "resolved": "https://registry.npmjs.org/next/-/next-14.1.4.tgz", @@ -4172,22 +5258,119 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, - "node_modules/pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "node_modules/pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/pirates": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz", + "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/pkg-dir": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-7.0.0.tgz", + "integrity": "sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==", + "dev": true, + "dependencies": { + "find-up": "^6.3.0" + }, + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/pkg-dir/node_modules/find-up": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-6.3.0.tgz", + "integrity": "sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==", + "dev": true, + "dependencies": { + "locate-path": "^7.1.0", + "path-exists": "^5.0.0" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/pkg-dir/node_modules/locate-path": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-7.2.0.tgz", + "integrity": "sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==", + "dev": true, + "dependencies": { + "p-locate": "^6.0.0" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/pkg-dir/node_modules/p-limit": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz", + "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==", + "dev": true, + "dependencies": { + "yocto-queue": "^1.0.0" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/pkg-dir/node_modules/p-locate": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-6.0.0.tgz", + "integrity": "sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==", + "dev": true, + "dependencies": { + "p-limit": "^4.0.0" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/pkg-dir/node_modules/path-exists": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-5.0.0.tgz", + "integrity": "sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==", "dev": true, "engines": { - "node": ">=0.10.0" + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" } }, - "node_modules/pirates": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz", - "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==", + "node_modules/pkg-dir/node_modules/yocto-queue": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz", + "integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==", "dev": true, "engines": { - "node": ">= 6" + "node": ">=12.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/possible-typed-array-names": { @@ -4454,6 +5637,16 @@ } ] }, + "node_modules/randombytes": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", + "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", + "dev": true, + "peer": true, + "dependencies": { + "safe-buffer": "^5.1.0" + } + }, "node_modules/rc": { "version": "1.2.8", "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", @@ -4499,6 +5692,30 @@ "react": "^18.2.0" } }, + "node_modules/react-infinite-scroll-hook": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-infinite-scroll-hook/-/react-infinite-scroll-hook-4.1.1.tgz", + "integrity": "sha512-1bu2572rF3DtjFMhIOzoasLMdYW0vMWxROtl99M5FYGSxm84Ro4aNBZW6ivgE45ofus4Ymo7jIS0Be3zcuLk8g==", + "dev": true, + "dependencies": { + "react-intersection-observer-hook": "^2.1.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/react-intersection-observer-hook": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/react-intersection-observer-hook/-/react-intersection-observer-hook-2.1.1.tgz", + "integrity": "sha512-MeFGpYtcfHB9v6oGqQuHAbSwaWBpd7yZ4wMIeVtboWRdGusAF4V+/8QQ0OKZ36Ez19grYnoDVhRUCjtwI2ZVaw==", + "dev": true, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -4583,6 +5800,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/require-from-string": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", + "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -4746,6 +5972,59 @@ "loose-envify": "^1.1.0" } }, + "node_modules/schema-utils": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz", + "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==", + "dev": true, + "dependencies": { + "@types/json-schema": "^7.0.9", + "ajv": "^8.9.0", + "ajv-formats": "^2.1.1", + "ajv-keywords": "^5.1.0" + }, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, + "node_modules/schema-utils/node_modules/ajv": { + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/schema-utils/node_modules/ajv-keywords": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz", + "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.3" + }, + "peerDependencies": { + "ajv": "^8.8.2" + } + }, + "node_modules/schema-utils/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true + }, "node_modules/semver": { "version": "7.6.0", "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz", @@ -4771,6 +6050,16 @@ "node": ">=10" } }, + "node_modules/serialize-javascript": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", + "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==", + "dev": true, + "peer": true, + "dependencies": { + "randombytes": "^2.1.0" + } + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -4803,6 +6092,12 @@ "node": ">= 0.4" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "dev": true + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -4930,6 +6225,33 @@ "node": ">=0.10.0" } }, + "node_modules/source-map-support": { + "version": "0.5.21", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", + "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", + "dev": true, + "peer": true, + "dependencies": { + "buffer-from": "^1.0.0", + "source-map": "^0.6.0" + } + }, + "node_modules/source-map-support/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/state-local": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz", + "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==", + "dev": true + }, "node_modules/streamsearch": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", @@ -5132,6 +6454,57 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/styled-components": { + "version": "5.3.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", + "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", + "dev": true, + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/styled-components/node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/styled-jsx": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz", @@ -5271,6 +6644,86 @@ "node": ">=6" } }, + "node_modules/terser": { + "version": "5.30.2", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.30.2.tgz", + "integrity": "sha512-vTDjRKYKip4dOFL5VizdoxHTYDfEXPdz5t+FbxCC5Rp2s+KbEO8w5wqMDPgj7CtFKZuzq7PXv28fZoXfqqBVuw==", + "dev": true, + "peer": true, + "dependencies": { + "@jridgewell/source-map": "^0.3.3", + "acorn": "^8.8.2", + "commander": "^2.20.0", + "source-map-support": "~0.5.20" + }, + "bin": { + "terser": "bin/terser" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/terser-webpack-plugin": { + "version": "5.3.10", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz", + "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==", + "dev": true, + "peer": true, + "dependencies": { + "@jridgewell/trace-mapping": "^0.3.20", + "jest-worker": "^27.4.5", + "schema-utils": "^3.1.1", + "serialize-javascript": "^6.0.1", + "terser": "^5.26.0" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.1.0" + }, + "peerDependenciesMeta": { + "@swc/core": { + "optional": true + }, + "esbuild": { + "optional": true + }, + "uglify-js": { + "optional": true + } + } + }, + "node_modules/terser-webpack-plugin/node_modules/schema-utils": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", + "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", + "dev": true, + "peer": true, + "dependencies": { + "@types/json-schema": "^7.0.8", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, + "node_modules/terser/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true, + "peer": true + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -5323,6 +6776,16 @@ "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" }, + "node_modules/transition-hook": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/transition-hook/-/transition-hook-1.5.2.tgz", + "integrity": "sha512-zVW5wP+hzOCk56jU5V5GAIsuaf+gZv43pzxyimXQ74JnD1yoprxTfzoPjr0yjC/Mrc9JyCh3Wb6UhXD+8dlO4w==", + "dev": true, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0" + } + }, "node_modules/ts-api-utils": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz", @@ -5369,6 +6832,70 @@ "node": "*" } }, + "node_modules/twin.macro": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/twin.macro/-/twin.macro-3.4.1.tgz", + "integrity": "sha512-bxGKTV4u/iGcQqHIugPaW5YSLJ5rIr56ay4Pjcr2Mbb037k341bQ+eWT8z3F7r8ZGTXjTD3uiuxos+qQRy4VjQ==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/template": "^7.22.15", + "babel-plugin-macros": "^3.1.0", + "chalk": "4.1.2", + "lodash.get": "^4.4.2", + "lodash.merge": "^4.6.2", + "postcss-selector-parser": "^6.0.13" + }, + "engines": { + "node": ">=16.14.0" + }, + "peerDependencies": { + "tailwindcss": ">=3.3.1" + } + }, + "node_modules/twin.macro/node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, + "node_modules/twin.macro/node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "dev": true, + "peer": true, + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/twin.macro/node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "dev": true, + "peer": true, + "engines": { + "node": ">= 6" + } + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -5543,11 +7070,126 @@ "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, + "node_modules/watchpack": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz", + "integrity": "sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==", + "dev": true, + "peer": true, + "dependencies": { + "glob-to-regexp": "^0.4.1", + "graceful-fs": "^4.1.2" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/webidl-conversions": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" }, + "node_modules/webpack": { + "version": "5.91.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz", + "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==", + "dev": true, + "peer": true, + "dependencies": { + "@types/eslint-scope": "^3.7.3", + "@types/estree": "^1.0.5", + "@webassemblyjs/ast": "^1.12.1", + "@webassemblyjs/wasm-edit": "^1.12.1", + "@webassemblyjs/wasm-parser": "^1.12.1", + "acorn": "^8.7.1", + "acorn-import-assertions": "^1.9.0", + "browserslist": "^4.21.10", + "chrome-trace-event": "^1.0.2", + "enhanced-resolve": "^5.16.0", + "es-module-lexer": "^1.2.1", + "eslint-scope": "5.1.1", + "events": "^3.2.0", + "glob-to-regexp": "^0.4.1", + "graceful-fs": "^4.2.11", + "json-parse-even-better-errors": "^2.3.1", + "loader-runner": "^4.2.0", + "mime-types": "^2.1.27", + "neo-async": "^2.6.2", + "schema-utils": "^3.2.0", + "tapable": "^2.1.1", + "terser-webpack-plugin": "^5.3.10", + "watchpack": "^2.4.1", + "webpack-sources": "^3.2.3" + }, + "bin": { + "webpack": "bin/webpack.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependenciesMeta": { + "webpack-cli": { + "optional": true + } + } + }, + "node_modules/webpack-sources": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz", + "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==", + "dev": true, + "peer": true, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/webpack/node_modules/eslint-scope": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", + "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", + "dev": true, + "peer": true, + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^4.1.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/webpack/node_modules/estraverse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", + "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", + "dev": true, + "peer": true, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/webpack/node_modules/schema-utils": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", + "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", + "dev": true, + "peer": true, + "dependencies": { + "@types/json-schema": "^7.0.8", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, "node_modules/whatwg-url": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", diff --git a/package.json b/package.json index e1193c8..c359e45 100644 --- a/package.json +++ b/package.json @@ -17,13 +17,19 @@ "react-dom": "^18" }, "devDependencies": { + "@aleph-front/core": "^1.15.70", + "@babel/plugin-syntax-typescript": "^7.24.1", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/styled-components": "^5.1.34", "autoprefixer": "^10.0.1", + "babel-loader": "^9.1.3", + "babel-plugin-twin": "^1.1.0", "eslint": "^8", "eslint-config-next": "14.1.4", "postcss": "^8", + "styled-components": "^5.3.11", "tailwindcss": "^3.3.0", "typescript": "^5" } diff --git a/src/builder-registry.ts b/src/builder-registry.ts index 7fe0cd2..ad65cae 100644 --- a/src/builder-registry.ts +++ b/src/builder-registry.ts @@ -1,5 +1,9 @@ -import { builder, Builder } from "@builder.io/react"; +import { Button, Col, Row, TextGradient } from "@aleph-front/core"; +import { builder, Builder, withChildren } from "@builder.io/react"; import dynamic from "next/dynamic"; +import Container from "./components/Container/Container"; +import H1 from "./components/H1/H1"; +import H2 from "./components/H2/H2"; builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!); @@ -15,3 +19,275 @@ Builder.registerComponent( ], } ); + +Builder.registerComponent(withChildren(TextGradient), { + name: "TextGradient", + canHaveChildren: true, + inputs: [ + { + name: "color", + type: "string", + defaultValue: "main0", + helperText: "Select the gradient color for the text.", + }, + { + name: "type", + type: "enum", + defaultValue: "header", + enum: ["h1"], + }, + { + name: "as", + type: "enum", + enum: ["h1"], + }, + { + name: "size", + type: "number", + defaultValue: 48, + helperText: "Set the font size.", + }, + ], + defaultChildren: [ + { + "@type": "@builder.io/sdk:Element", + component: { + name: "Text", + options: { + text: "Add desired text here...", + }, + }, + }, + ], +}); + +Builder.registerComponent(TextGradient, { + name: "TextGradient 2", + inputs: [ + { + name: "children", + type: "string", + }, + { + name: "color", + type: "string", + defaultValue: "main0", + helperText: "Select the gradient color for the text.", + }, + { + name: "type", + type: "enum", + defaultValue: "header", + enum: ["h1"], + }, + { + name: "as", + type: "enum", + enum: ["h1"], + }, + ], +}); + +Builder.registerComponent(withChildren(Container), { + name: "Container", + canHaveChildren: true, +}); + +Builder.registerComponent(withChildren(Col), { + name: "Column", + canHaveChildren: true, + inputs: [ + { + name: "span", + type: "number", + }, + { + name: "xs", + type: "number", + }, + { + name: "sm", + type: "number", + }, + { + name: "md", + type: "number", + }, + { + name: "lg", + type: "number", + }, + { + name: "xl", + type: "number", + }, + { + name: "2xl", + type: "number", + }, + { + name: "offset", + type: "number", + }, + { + name: "xsOffset", + type: "number", + }, + { + name: "smOffset", + type: "number", + }, + { + name: "mdOffset", + type: "number", + }, + { + name: "lgOffset", + type: "number", + }, + { + name: "xlOffset", + type: "number", + }, + { + name: "2xlOffset", + type: "number", + }, + ], +}); + +Builder.registerComponent(withChildren(Row), { + name: "Row", + canHaveChildren: true, + inputs: [ + { + name: "count", + type: "number", + }, + { + name: "xs", + type: "number", + }, + { + name: "sm", + type: "number", + }, + { + name: "md", + type: "number", + }, + { + name: "lg", + type: "number", + }, + { + name: "xl", + type: "number", + }, + { + name: "2xl", + type: "number", + }, + { + name: "gap", + type: "string", + }, + { + name: "xsGap", + type: "number", + }, + { + name: "smGap", + type: "number", + }, + { + name: "mdGap", + type: "number", + }, + { + name: "lgGap", + type: "number", + }, + { + name: "xlGap", + type: "number", + }, + { + name: "2xlGap", + type: "number", + }, + ], +}); + +Builder.registerComponent(withChildren(Button), { + name: "Button", + inputs: [ + { + name: "href", + // type: "reference", + type: "string", + }, + { + name: "kind", + type: "string", + }, + { + name: "variant", + type: "string", + }, + { + name: "size", + type: "string", + enum: ["sm", "md", "lg"], + }, + { + name: "color", + type: "string", + }, + { + name: "hover", + type: "boolean", + }, + { + name: "active", + type: "boolean", + }, + { + name: "focus", + type: "boolean", + }, + { + name: "disabled", + type: "boolean", + }, + { + name: "as", + type: "string", + enum: ["button", "a"], + }, + { + name: "className", + type: "string", + }, + ], +}); + +Builder.registerComponent(withChildren(H1), { + name: "H1", + inputs: [ + { + name: "color", + type: "string", + }, + ], +}); + +Builder.registerComponent(withChildren(H2), { + name: "H2", + inputs: [ + { + name: "color", + type: "string", + }, + ], +}); diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx new file mode 100644 index 0000000..3bf86e1 --- /dev/null +++ b/src/components/Container/Container.tsx @@ -0,0 +1,11 @@ +"use client"; + +import React from "react"; +import { StyledContainer } from "./styles"; +import { ContainerProps } from "./types"; + +export const Container = ({ children, ...rest }: ContainerProps) => { + return {children}; +}; + +export default Container; diff --git a/src/components/Container/styles.tsx b/src/components/Container/styles.tsx new file mode 100644 index 0000000..59d89fc --- /dev/null +++ b/src/components/Container/styles.tsx @@ -0,0 +1,12 @@ +import styled, { css } from 'styled-components' +import tw from 'twin.macro' + +export const StyledContainer = styled.div` + ${({ theme }) => css` + ${tw`px-6 md:px-16`} + box-sizing: border-box; + width: 100%; + margin: 0 auto; + max-width: 100rem; + `} +` diff --git a/src/components/Container/types.ts b/src/components/Container/types.ts new file mode 100644 index 0000000..e9c937e --- /dev/null +++ b/src/components/Container/types.ts @@ -0,0 +1,5 @@ +import { HTMLAttributes } from 'react' + +export type ContainerProps = HTMLAttributes & { + children: React.ReactNode +} diff --git a/src/components/H1/H1.tsx b/src/components/H1/H1.tsx new file mode 100644 index 0000000..ea6e318 --- /dev/null +++ b/src/components/H1/H1.tsx @@ -0,0 +1,8 @@ +import { StyledH1 } from "./styles"; +import { H1Props } from "./types"; + +export const H1 = ({ children, ...rest }: H1Props) => { + return {children}; +}; + +export default H1; diff --git a/src/components/H1/styles.tsx b/src/components/H1/styles.tsx new file mode 100644 index 0000000..b9e4921 --- /dev/null +++ b/src/components/H1/styles.tsx @@ -0,0 +1,11 @@ +import { TextGradient } from '@aleph-front/core' +import styled from 'styled-components' + +export const StyledH1 = styled(TextGradient).attrs((props) => { + return { + ...props, + forwardedAs: 'h1', + type: props.type || 'h5', + color: props.color || 'main1', + } +})`` diff --git a/src/components/H1/types.ts b/src/components/H1/types.ts new file mode 100644 index 0000000..05ebf1e --- /dev/null +++ b/src/components/H1/types.ts @@ -0,0 +1,8 @@ +import { TypoKind } from '@aleph-front/core' +import { HTMLAttributes, ReactNode } from 'react' + +export type H1Props = HTMLAttributes & { + color?: string + type?: TypoKind + children: ReactNode +} diff --git a/src/components/H2/H2.tsx b/src/components/H2/H2.tsx new file mode 100644 index 0000000..a7df7d5 --- /dev/null +++ b/src/components/H2/H2.tsx @@ -0,0 +1,8 @@ +import { StyledH2 } from "./styles"; +import { H2Props } from "./types"; + +export const H2 = ({ children, ...rest }: H2Props) => { + return {children}; +}; + +export default H2; diff --git a/src/components/H2/styles.tsx b/src/components/H2/styles.tsx new file mode 100644 index 0000000..8a815c5 --- /dev/null +++ b/src/components/H2/styles.tsx @@ -0,0 +1,11 @@ +import { TextGradient } from '@aleph-front/core' +import styled from 'styled-components' + +export const StyledH2 = styled(TextGradient).attrs((props) => { + return { + ...props, + forwardedAs: 'h2', + type: props.type || 'h5', + color: props.color || 'main0', + } +})`` diff --git a/src/components/H2/types.ts b/src/components/H2/types.ts new file mode 100644 index 0000000..52774e4 --- /dev/null +++ b/src/components/H2/types.ts @@ -0,0 +1,8 @@ +import { TypoKind } from '@aleph-front/core' +import { HTMLAttributes, ReactNode } from 'react' + +export type H2Props = HTMLAttributes & { + color?: string + type?: TypoKind + children: ReactNode +} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index ca746c2..9686073 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,9 +1,16 @@ import "@/styles/globals.css"; +import { ThemeProvider } from "styled-components"; import type { AppProps } from "next/app"; import { builder } from "@builder.io/react"; +import { GlobalStyles, themes } from "@aleph-front/core"; builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!); export default function App({ Component, pageProps }: AppProps) { - return ; + return ( + + + + + ); } diff --git a/src/pages/_dynamicPage.tsx b/src/pages/_dynamicPage.tsx index 908ea7a..4044093 100644 --- a/src/pages/_dynamicPage.tsx +++ b/src/pages/_dynamicPage.tsx @@ -14,14 +14,14 @@ export default function DynamicPage({ page }: { page: BuilderContent | null }) { useEffect(() => { async function fetch() { - const urlPath = window.location.pathname || '/' - console.log('PAGE', urlPath) + const urlPath = window.location.pathname || "/"; + console.log("PAGE", urlPath); try { - console.log('LOAD', urlPath) + console.log("LOAD", urlPath); const content = await builder - .get("page", { userAttributes: { urlPath }, }) + .get("page", { userAttributes: { urlPath } }) .toPromise(); if (content) { @@ -29,13 +29,12 @@ export default function DynamicPage({ page }: { page: BuilderContent | null }) { } setNotFound(!content); - } catch (e) { - console.log('something went wrong while fetching Builder Content: ', e); + console.log("something went wrong while fetching Builder Content: ", e); } } - fetch() + fetch(); }, []); // If the page content is not available @@ -50,9 +49,28 @@ export default function DynamicPage({ page }: { page: BuilderContent | null }) { <> {content?.data?.title} + + + + + + {/* Render the Builder page */} ); -} \ No newline at end of file +} From deb4279db2f3545325f47146f540288056e92f17 Mon Sep 17 00:00:00 2001 From: gmolki Date: Wed, 3 Apr 2024 16:40:41 +0200 Subject: [PATCH 02/15] improve components + add basic components --- src/builder-registry.ts | 205 ++++++++++++++++++----------- src/components/Section/Section.tsx | 12 ++ src/components/Section/types.ts | 6 + 3 files changed, 146 insertions(+), 77 deletions(-) create mode 100644 src/components/Section/Section.tsx create mode 100644 src/components/Section/types.ts diff --git a/src/builder-registry.ts b/src/builder-registry.ts index ad65cae..f32542d 100644 --- a/src/builder-registry.ts +++ b/src/builder-registry.ts @@ -4,93 +4,62 @@ import dynamic from "next/dynamic"; import Container from "./components/Container/Container"; import H1 from "./components/H1/H1"; import H2 from "./components/H2/H2"; +import Section from "./components/Section/Section"; builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!); -Builder.registerComponent( - dynamic(() => import("./components/Counter/Counter")), - { - name: "Counter", - inputs: [ - { - name: "initialCount", - type: "number", - }, - ], - } -); +const TYPO_KIND: string[] = [ + "h1", + "h2", + "h3", + "h4", + "h5", + "h6", + "h7", + "header", + "logo", + "nav", + "info", + "body", + "body1", + "body2", + "body3", + "code", + "code1", + "table", + "form", +]; -Builder.registerComponent(withChildren(TextGradient), { - name: "TextGradient", +// Builder.registerComponent( +// dynamic(() => import("./components/Counter/Counter")), +// { +// name: "Counter", +// inputs: [ +// { +// name: "initialCount", +// type: "number", +// }, +// ], +// } +// ); + +Builder.registerComponent(withChildren(Container), { + name: "Container", canHaveChildren: true, - inputs: [ - { - name: "color", - type: "string", - defaultValue: "main0", - helperText: "Select the gradient color for the text.", - }, - { - name: "type", - type: "enum", - defaultValue: "header", - enum: ["h1"], - }, - { - name: "as", - type: "enum", - enum: ["h1"], - }, - { - name: "size", - type: "number", - defaultValue: 48, - helperText: "Set the font size.", - }, - ], - defaultChildren: [ - { - "@type": "@builder.io/sdk:Element", - component: { - name: "Text", - options: { - text: "Add desired text here...", - }, - }, - }, - ], + defaultStyles: {}, }); -Builder.registerComponent(TextGradient, { - name: "TextGradient 2", +Builder.registerComponent(withChildren(Section), { + name: "Section", inputs: [ { - name: "children", + name: "effects", type: "string", - }, - { - name: "color", - type: "string", - defaultValue: "main0", - helperText: "Select the gradient color for the text.", - }, - { - name: "type", - type: "enum", - defaultValue: "header", - enum: ["h1"], - }, - { - name: "as", - type: "enum", - enum: ["h1"], + enum: ["-", "fx-grain-1"], }, ], -}); - -Builder.registerComponent(withChildren(Container), { - name: "Container", canHaveChildren: true, + defaultStyles: {}, }); Builder.registerComponent(withChildren(Col), { @@ -154,6 +123,7 @@ Builder.registerComponent(withChildren(Col), { type: "number", }, ], + defaultStyles: {}, }); Builder.registerComponent(withChildren(Row), { @@ -217,6 +187,7 @@ Builder.registerComponent(withChildren(Row), { type: "number", }, ], + defaultStyles: {}, }); Builder.registerComponent(withChildren(Button), { @@ -266,28 +237,108 @@ Builder.registerComponent(withChildren(Button), { enum: ["button", "a"], }, { - name: "className", + name: "target", type: "string", + defaultValue: "_blank", }, ], + defaultStyles: {}, }); -Builder.registerComponent(withChildren(H1), { +Builder.registerComponent(TextGradient, { + name: "TextGradient", + inputs: [ + { + name: "children", + type: "longText", + }, + { + name: "color", + type: "string", + enum: [ + "white", + "black", + "translucid", + "base0", + "base1", + "base2", + "main0", + "main1", + "info", + "success", + "warning", + "error", + "disabled", + "disabled2", + "background", + "contentBackground", + "foreground", + "text", + ], + defaultValue: "text", + helperText: "Select the gradient color for the text.", + }, + { + name: "type", + type: "string", + enum: ["h1"], + defaultValue: "h1", + }, + { + name: "as", + type: "string", + enum: ["h1"], + }, + { + name: "size", + type: "number", + }, + ], + defaultStyles: { + whiteSpace: "pre-wrap", + }, +}); + +Builder.registerComponent(H1, { name: "H1", inputs: [ + { + name: "children", + type: "longText", + }, { name: "color", type: "string", }, + { + name: "type", + type: "string", + enum: TYPO_KIND, + }, ], + defaultStyles: { + whiteSpace: "pre-wrap", + }, }); -Builder.registerComponent(withChildren(H2), { +Builder.registerComponent(H2, { name: "H2", inputs: [ + { + name: "children", + type: "longText", + }, { name: "color", type: "string", }, + { + name: "type", + type: "string", + enum: TYPO_KIND, + }, ], + defaultStyles: { + whiteSpace: "pre-wrap", + }, }); diff --git a/src/components/Section/Section.tsx b/src/components/Section/Section.tsx new file mode 100644 index 0000000..0d7ecca --- /dev/null +++ b/src/components/Section/Section.tsx @@ -0,0 +1,12 @@ +"use client"; + +import React from "react"; +import { SectionProps } from "./types"; + +export const Section = ({ children, effects }: SectionProps) => { + const calculatedClassName = `${effects || ""}`; + + return
{children}
; +}; + +export default Section; diff --git a/src/components/Section/types.ts b/src/components/Section/types.ts new file mode 100644 index 0000000..acd51a6 --- /dev/null +++ b/src/components/Section/types.ts @@ -0,0 +1,6 @@ +import { HTMLAttributes } from "react"; + +export type SectionProps = HTMLAttributes & { + children: React.ReactNode; + effects: string; +}; From 8a3d477488d2c77669f9176be0f999f7d7761d4b Mon Sep 17 00:00:00 2001 From: gmolki Date: Fri, 5 Apr 2024 11:30:24 +0200 Subject: [PATCH 03/15] refactor components + custom header --- src/builder-registry.ts | 135 +++++++++++++----- src/components/Box/cmp.tsx | 10 ++ src/components/Box/index.tsx | 1 + src/components/Box/types.ts | 5 + .../Container/{Container.tsx => cmp.tsx} | 0 src/components/Container/index.tsx | 1 + src/components/Counter/Counter.tsx | 33 ----- src/components/Counter/styles.module.css | 28 ---- src/components/H1/{H1.tsx => cmp.tsx} | 0 src/components/H1/index.tsx | 1 + src/components/H1/styles.tsx | 15 +- src/components/H1/types.ts | 12 +- src/components/H2/{H2.tsx => cmp.tsx} | 0 src/components/H2/index.tsx | 1 + src/components/H2/styles.tsx | 15 +- src/components/H2/types.ts | 12 +- src/components/Header/cmp.tsx | 32 +++++ src/components/Header/index.tsx | 1 + src/components/Header/styles.tsx | 34 +++++ src/components/Header/types.ts | 13 ++ .../Section/{Section.tsx => cmp.tsx} | 0 src/components/Section/index.tsx | 1 + src/components/Text/cmp.tsx | 12 ++ src/components/Text/index.tsx | 1 + src/components/Text/types.ts | 7 + src/components/index.tsx | 7 + src/pages/_app.tsx | 7 +- 27 files changed, 263 insertions(+), 121 deletions(-) create mode 100644 src/components/Box/cmp.tsx create mode 100644 src/components/Box/index.tsx create mode 100644 src/components/Box/types.ts rename src/components/Container/{Container.tsx => cmp.tsx} (100%) create mode 100644 src/components/Container/index.tsx delete mode 100644 src/components/Counter/Counter.tsx delete mode 100644 src/components/Counter/styles.module.css rename src/components/H1/{H1.tsx => cmp.tsx} (100%) create mode 100644 src/components/H1/index.tsx rename src/components/H2/{H2.tsx => cmp.tsx} (100%) create mode 100644 src/components/H2/index.tsx create mode 100644 src/components/Header/cmp.tsx create mode 100644 src/components/Header/index.tsx create mode 100644 src/components/Header/styles.tsx create mode 100644 src/components/Header/types.ts rename src/components/Section/{Section.tsx => cmp.tsx} (100%) create mode 100644 src/components/Section/index.tsx create mode 100644 src/components/Text/cmp.tsx create mode 100644 src/components/Text/index.tsx create mode 100644 src/components/Text/types.ts create mode 100644 src/components/index.tsx diff --git a/src/builder-registry.ts b/src/builder-registry.ts index f32542d..db096ad 100644 --- a/src/builder-registry.ts +++ b/src/builder-registry.ts @@ -1,13 +1,21 @@ import { Button, Col, Row, TextGradient } from "@aleph-front/core"; import { builder, Builder, withChildren } from "@builder.io/react"; -import dynamic from "next/dynamic"; -import Container from "./components/Container/Container"; -import H1 from "./components/H1/H1"; -import H2 from "./components/H2/H2"; -import Section from "./components/Section/Section"; +import { Container, H1, H2, Section, Text, Box, Header } from "./components"; builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!); +const DEFAULT_PROPS = { + inputs: [], + defaultStyles: {}, +}; + +const DEFAULT_TEXT_PROPS = { + ...DEFAULT_PROPS, + defaultStyles: { + whiteSpace: "pre-wrap", + }, +}; + const TYPO_KIND: string[] = [ "h1", "h2", @@ -30,27 +38,22 @@ const TYPO_KIND: string[] = [ "form", ]; -// Builder.registerComponent( -// dynamic(() => import("./components/Counter/Counter")), -// { -// name: "Counter", -// inputs: [ -// { -// name: "initialCount", -// type: "number", -// }, -// ], -// } -// ); +Builder.registerComponent(withChildren(Box), { + ...DEFAULT_PROPS, + name: "Custom Box", + canHaveChildren: true, +}); Builder.registerComponent(withChildren(Container), { + ...DEFAULT_PROPS, name: "Container", canHaveChildren: true, - defaultStyles: {}, }); Builder.registerComponent(withChildren(Section), { + ...DEFAULT_PROPS, name: "Section", + canHaveChildren: true, inputs: [ { name: "effects", @@ -58,11 +61,10 @@ Builder.registerComponent(withChildren(Section), { enum: ["-", "fx-grain-1"], }, ], - canHaveChildren: true, - defaultStyles: {}, }); Builder.registerComponent(withChildren(Col), { + ...DEFAULT_PROPS, name: "Column", canHaveChildren: true, inputs: [ @@ -123,10 +125,10 @@ Builder.registerComponent(withChildren(Col), { type: "number", }, ], - defaultStyles: {}, }); Builder.registerComponent(withChildren(Row), { + ...DEFAULT_PROPS, name: "Row", canHaveChildren: true, inputs: [ @@ -187,12 +189,17 @@ Builder.registerComponent(withChildren(Row), { type: "number", }, ], - defaultStyles: {}, }); Builder.registerComponent(withChildren(Button), { + ...DEFAULT_PROPS, name: "Button", + canHaveChildren: true, inputs: [ + { + name: "children", + type: "longText", + }, { name: "href", // type: "reference", @@ -242,10 +249,10 @@ Builder.registerComponent(withChildren(Button), { defaultValue: "_blank", }, ], - defaultStyles: {}, }); Builder.registerComponent(TextGradient, { + ...DEFAULT_TEXT_PROPS, name: "TextGradient", inputs: [ { @@ -294,12 +301,30 @@ Builder.registerComponent(TextGradient, { type: "number", }, ], - defaultStyles: { - whiteSpace: "pre-wrap", - }, +}); + +Builder.registerComponent(Text, { + ...DEFAULT_TEXT_PROPS, + name: "Custom Text", + inputs: [ + { + name: "children", + type: "longText", + }, + { + name: "textType", + type: "string", + }, + { + name: "tp", + type: "string", + enum: ["tp-info"], + }, + ], }); Builder.registerComponent(H1, { + ...DEFAULT_TEXT_PROPS, name: "H1", inputs: [ { @@ -316,12 +341,10 @@ Builder.registerComponent(H1, { enum: TYPO_KIND, }, ], - defaultStyles: { - whiteSpace: "pre-wrap", - }, }); Builder.registerComponent(H2, { + ...DEFAULT_TEXT_PROPS, name: "H2", inputs: [ { @@ -338,7 +361,55 @@ Builder.registerComponent(H2, { enum: TYPO_KIND, }, ], - defaultStyles: { - whiteSpace: "pre-wrap", - }, +}); + +Builder.registerComponent(withChildren(Header), { + ...DEFAULT_PROPS, + name: "Header", + canHaveChildren: true, + noWrap: true, + inputs: [ + { + name: "routes", + type: "list", + defaultValue: [ + { + name: "Developers", + href: "https://docs.aleph.im/", + target: "_blank", + external: true, + }, + { + name: "Solutions", + href: "/", + exact: true, + }, + ], + subFields: [ + { + name: "name", + type: "string", + }, + { + name: "href", + type: "string", + }, + { + name: "external", + type: "boolean", + defaultValue: false, + }, + { + name: "target", + type: "string", + enum: ["", "_blank"], + }, + { + name: "exact", + type: "boolean", + defaultValue: false, + }, + ], + }, + ], }); diff --git a/src/components/Box/cmp.tsx b/src/components/Box/cmp.tsx new file mode 100644 index 0000000..4bd941b --- /dev/null +++ b/src/components/Box/cmp.tsx @@ -0,0 +1,10 @@ +"use client"; + +import React from "react"; +import { BoxProps } from "./types"; + +export const Box = ({ children }: BoxProps) => { + return <>{children}; +}; + +export default Box; diff --git a/src/components/Box/index.tsx b/src/components/Box/index.tsx new file mode 100644 index 0000000..a05ebc5 --- /dev/null +++ b/src/components/Box/index.tsx @@ -0,0 +1 @@ +export { default } from "./cmp"; diff --git a/src/components/Box/types.ts b/src/components/Box/types.ts new file mode 100644 index 0000000..bd4b961 --- /dev/null +++ b/src/components/Box/types.ts @@ -0,0 +1,5 @@ +import { HTMLAttributes } from "react"; + +export type BoxProps = HTMLAttributes & { + children: React.ReactNode; +}; diff --git a/src/components/Container/Container.tsx b/src/components/Container/cmp.tsx similarity index 100% rename from src/components/Container/Container.tsx rename to src/components/Container/cmp.tsx diff --git a/src/components/Container/index.tsx b/src/components/Container/index.tsx new file mode 100644 index 0000000..a05ebc5 --- /dev/null +++ b/src/components/Container/index.tsx @@ -0,0 +1 @@ +export { default } from "./cmp"; diff --git a/src/components/Counter/Counter.tsx b/src/components/Counter/Counter.tsx deleted file mode 100644 index e778714..0000000 --- a/src/components/Counter/Counter.tsx +++ /dev/null @@ -1,33 +0,0 @@ -"use client"; -import React, { useState } from "react"; -import styles from "./styles.module.css"; - -interface CounterProps { - initialCount?: number; -} - -function Counter({ initialCount = 99 }: CounterProps) { - const [count, setCount] = useState(initialCount); - - const increment = () => { - setCount((prevCount) => prevCount + 1); - }; - - const decrement = () => { - setCount((prevCount) => prevCount - 1); - }; - - return ( -
- - {count} - -
- ); -} - -export default Counter; diff --git a/src/components/Counter/styles.module.css b/src/components/Counter/styles.module.css deleted file mode 100644 index 03482ca..0000000 --- a/src/components/Counter/styles.module.css +++ /dev/null @@ -1,28 +0,0 @@ -.counter { - margin: 32px auto; - display: flex; - width: 100%; - max-width: 190px; -} - -.btn { - width: 42px; - font-size: 32px; - font-weight: bold; - background-color: #1c6bd1; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - line-height: 1.4; -} - -.btn:hover { - opacity: 0.8; -} - -.count { - flex: 1; - font-size: 42px; - text-align: center; -} diff --git a/src/components/H1/H1.tsx b/src/components/H1/cmp.tsx similarity index 100% rename from src/components/H1/H1.tsx rename to src/components/H1/cmp.tsx diff --git a/src/components/H1/index.tsx b/src/components/H1/index.tsx new file mode 100644 index 0000000..a05ebc5 --- /dev/null +++ b/src/components/H1/index.tsx @@ -0,0 +1 @@ +export { default } from "./cmp"; diff --git a/src/components/H1/styles.tsx b/src/components/H1/styles.tsx index b9e4921..c298124 100644 --- a/src/components/H1/styles.tsx +++ b/src/components/H1/styles.tsx @@ -1,11 +1,12 @@ -import { TextGradient } from '@aleph-front/core' -import styled from 'styled-components' +import { TextGradient } from "@aleph-front/core"; +import styled from "styled-components"; export const StyledH1 = styled(TextGradient).attrs((props) => { return { ...props, - forwardedAs: 'h1', - type: props.type || 'h5', - color: props.color || 'main1', - } -})`` + forwardedAs: "h1", + type: props.type || "h5", + color: props.color || "main1", + whitespace: props.whitespace || "pre-wrap", + }; +})``; diff --git a/src/components/H1/types.ts b/src/components/H1/types.ts index 05ebf1e..0bf432c 100644 --- a/src/components/H1/types.ts +++ b/src/components/H1/types.ts @@ -1,8 +1,8 @@ -import { TypoKind } from '@aleph-front/core' -import { HTMLAttributes, ReactNode } from 'react' +import { TypoKind } from "@aleph-front/core"; +import { HTMLAttributes, ReactNode } from "react"; export type H1Props = HTMLAttributes & { - color?: string - type?: TypoKind - children: ReactNode -} + children: ReactNode; + color?: string; + type?: TypoKind; +}; diff --git a/src/components/H2/H2.tsx b/src/components/H2/cmp.tsx similarity index 100% rename from src/components/H2/H2.tsx rename to src/components/H2/cmp.tsx diff --git a/src/components/H2/index.tsx b/src/components/H2/index.tsx new file mode 100644 index 0000000..a05ebc5 --- /dev/null +++ b/src/components/H2/index.tsx @@ -0,0 +1 @@ +export { default } from "./cmp"; diff --git a/src/components/H2/styles.tsx b/src/components/H2/styles.tsx index 8a815c5..72a43df 100644 --- a/src/components/H2/styles.tsx +++ b/src/components/H2/styles.tsx @@ -1,11 +1,12 @@ -import { TextGradient } from '@aleph-front/core' -import styled from 'styled-components' +import { TextGradient } from "@aleph-front/core"; +import styled from "styled-components"; export const StyledH2 = styled(TextGradient).attrs((props) => { return { ...props, - forwardedAs: 'h2', - type: props.type || 'h5', - color: props.color || 'main0', - } -})`` + forwardedAs: "h2", + type: props.type || "h5", + color: props.color || "main0", + whitespace: props.whitespace || "pre-wrap", + }; +})``; diff --git a/src/components/H2/types.ts b/src/components/H2/types.ts index 52774e4..1ccdfc2 100644 --- a/src/components/H2/types.ts +++ b/src/components/H2/types.ts @@ -1,8 +1,8 @@ -import { TypoKind } from '@aleph-front/core' -import { HTMLAttributes, ReactNode } from 'react' +import { TypoKind } from "@aleph-front/core"; +import { HTMLAttributes, ReactNode } from "react"; export type H2Props = HTMLAttributes & { - color?: string - type?: TypoKind - children: ReactNode -} + children: ReactNode; + color?: string; + type?: TypoKind; +}; diff --git a/src/components/Header/cmp.tsx b/src/components/Header/cmp.tsx new file mode 100644 index 0000000..3132223 --- /dev/null +++ b/src/components/Header/cmp.tsx @@ -0,0 +1,32 @@ +import { Button, LinkComponent, RouterNavbar } from "@aleph-front/core"; + +import Link from "next/link"; + +import { StyledHeader } from "./styles"; +import { useCallback, useState } from "react"; +import { useRouter } from "next/router"; +import { HeaderProps } from "./types"; + +export const Header = ({ children, routes }: HeaderProps) => { + const [isOpen, setIsOpen] = useState(false); + const handleCloseMenu = useCallback((open: boolean) => setIsOpen(open), []); + + const router = useRouter(); + + return ( + + + {children} + + + ); +}; + +export default Header; diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx new file mode 100644 index 0000000..a05ebc5 --- /dev/null +++ b/src/components/Header/index.tsx @@ -0,0 +1 @@ +export { default } from "./cmp"; diff --git a/src/components/Header/styles.tsx b/src/components/Header/styles.tsx new file mode 100644 index 0000000..f226e15 --- /dev/null +++ b/src/components/Header/styles.tsx @@ -0,0 +1,34 @@ +import { Button, Navbar } from '@aleph-front/core' +import styled from 'styled-components' + +export const StyledHeader = styled.header` + font-size: inherit; + line-height: inherit; + box-sizing: border-box; + width: 100%; + margin: 0; + position: sticky; + top: 0; + z-index: 10; + /* background-color: #141327CC; */ +` + +export const StyledNavbar = styled(Navbar)` + position: relative; +` + +export const StyledButton = styled(Button).attrs((props) => { + return { + ...props, + color: 'main0', + kind: 'yellow', + size: 'lg', + variant: 'primary', + } +})` + display: block; + + &:last-child { + margin-bottom: 0; + } +` diff --git a/src/components/Header/types.ts b/src/components/Header/types.ts new file mode 100644 index 0000000..428a37d --- /dev/null +++ b/src/components/Header/types.ts @@ -0,0 +1,13 @@ +import { HTMLAttributes } from "react"; + +export type HeaderProps = HTMLAttributes & { + children: React.ReactNode; + routes: HeaderRoutes[]; +}; + +type HeaderRoutes = { + name: string; + href: string; + external?: boolean; + target?: string; +}; diff --git a/src/components/Section/Section.tsx b/src/components/Section/cmp.tsx similarity index 100% rename from src/components/Section/Section.tsx rename to src/components/Section/cmp.tsx diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx new file mode 100644 index 0000000..a05ebc5 --- /dev/null +++ b/src/components/Section/index.tsx @@ -0,0 +1 @@ +export { default } from "./cmp"; diff --git a/src/components/Text/cmp.tsx b/src/components/Text/cmp.tsx new file mode 100644 index 0000000..47bd3f5 --- /dev/null +++ b/src/components/Text/cmp.tsx @@ -0,0 +1,12 @@ +"use client"; + +import React from "react"; +import { TextProps } from "./types"; + +export const Text = ({ children, textType, tp }: TextProps) => { + const classNames = [`${textType || ""}`, `${tp || ""}`].join(" "); + + return

{children}

; +}; + +export default Text; diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx new file mode 100644 index 0000000..a05ebc5 --- /dev/null +++ b/src/components/Text/index.tsx @@ -0,0 +1 @@ +export { default } from "./cmp"; diff --git a/src/components/Text/types.ts b/src/components/Text/types.ts new file mode 100644 index 0000000..ced9039 --- /dev/null +++ b/src/components/Text/types.ts @@ -0,0 +1,7 @@ +import { HTMLAttributes } from "react"; + +export type TextProps = HTMLAttributes & { + children: React.ReactNode; + textType: string; + tp: string; +}; diff --git a/src/components/index.tsx b/src/components/index.tsx new file mode 100644 index 0000000..f1e338c --- /dev/null +++ b/src/components/index.tsx @@ -0,0 +1,7 @@ +export { default as Box } from "./Box"; +export { default as Container } from "./Container"; +export { default as H1 } from "./H1"; +export { default as H2 } from "./H2"; +export { default as Section } from "./Section"; +export { default as Text } from "./Text"; +export { default as Header } from "./Header"; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 9686073..0b3d886 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,5 +1,5 @@ import "@/styles/globals.css"; -import { ThemeProvider } from "styled-components"; +import { ThemeProps, ThemeProvider } from "styled-components"; import type { AppProps } from "next/app"; import { builder } from "@builder.io/react"; import { GlobalStyles, themes } from "@aleph-front/core"; @@ -7,8 +7,11 @@ import { GlobalStyles, themes } from "@aleph-front/core"; builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!); export default function App({ Component, pageProps }: AppProps) { + const themeKey: keyof typeof themes = + pageProps.page.data.theme || "twentysix"; + return ( - + From 7ba66355e97f1c5c093693136677b07e51f5bef5 Mon Sep 17 00:00:00 2001 From: gmolki Date: Mon, 8 Apr 2024 18:17:48 +0200 Subject: [PATCH 04/15] Fix SPA not refreshing content --- src/pages/_dynamicPage.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/pages/_dynamicPage.tsx b/src/pages/_dynamicPage.tsx index 4044093..51376d1 100644 --- a/src/pages/_dynamicPage.tsx +++ b/src/pages/_dynamicPage.tsx @@ -4,38 +4,40 @@ import Head from "next/head"; import { BuilderContent } from "@builder.io/sdk"; import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react"; import "../builder-registry"; +import { useRouter } from "next/router"; export default function DynamicPage({ page }: { page: BuilderContent | null }) { - // const router = useRouter(); + const router = useRouter(); const isPreviewing = useIsPreviewing(); const [content, setContent] = useState(page); const [notFound, setNotFound] = useState(!page); useEffect(() => { - async function fetch() { - const urlPath = window.location.pathname || "/"; + async function fetchContent() { + const urlPath = router.asPath || "/"; console.log("PAGE", urlPath); try { console.log("LOAD", urlPath); - const content = await builder + const fetchedContent = await builder .get("page", { userAttributes: { urlPath } }) .toPromise(); - if (content) { - setContent(content); + if (fetchedContent) { + setContent(fetchedContent); + } else { + setNotFound(true); } - - setNotFound(!content); } catch (e) { console.log("something went wrong while fetching Builder Content: ", e); + setNotFound(true); } } - fetch(); - }, []); + fetchContent(); + }, [router.asPath]); // Depend on router.asPath to refetch content on route changes // If the page content is not available // and not in preview mode, show a 404 error page From 52183698212f187b2fe1387d210e72bd651abd1a Mon Sep 17 00:00:00 2001 From: gmolki Date: Mon, 8 Apr 2024 18:18:41 +0200 Subject: [PATCH 05/15] refactor + add components --- src/builder-registry.ts | 303 ++++++++++++++++++++++++++- src/components/Breadcrumb/cmp.tsx | 32 +++ src/components/Breadcrumb/index.tsx | 1 + src/components/Breadcrumb/types.ts | 10 + src/components/Footer/cmp.tsx | 29 +++ src/components/Footer/index.ts | 1 + src/components/H1/styles.tsx | 1 - src/components/H2/styles.tsx | 1 - src/components/Header/cmp.tsx | 4 +- src/components/Header/types.ts | 2 + src/components/SignMeUpForm/cmp.tsx | 71 +++++++ src/components/SignMeUpForm/index.ts | 2 + src/components/SignMeUpForm/types.ts | 3 + src/components/Text/cmp.tsx | 6 +- src/components/Text/types.ts | 1 + src/components/index.tsx | 3 + src/pages/_app.tsx | 4 +- 17 files changed, 463 insertions(+), 11 deletions(-) create mode 100644 src/components/Breadcrumb/cmp.tsx create mode 100644 src/components/Breadcrumb/index.tsx create mode 100644 src/components/Breadcrumb/types.ts create mode 100644 src/components/Footer/cmp.tsx create mode 100644 src/components/Footer/index.ts create mode 100644 src/components/SignMeUpForm/cmp.tsx create mode 100644 src/components/SignMeUpForm/index.ts create mode 100644 src/components/SignMeUpForm/types.ts diff --git a/src/builder-registry.ts b/src/builder-registry.ts index db096ad..0e7de3d 100644 --- a/src/builder-registry.ts +++ b/src/builder-registry.ts @@ -1,6 +1,18 @@ -import { Button, Col, Row, TextGradient } from "@aleph-front/core"; +import { BulletList, Button, Col, Row, TextGradient } from "@aleph-front/core"; import { builder, Builder, withChildren } from "@builder.io/react"; -import { Container, H1, H2, Section, Text, Box, Header } from "./components"; +import { + Container, + H1, + H2, + Section, + Text, + Box, + Header, + Footer, + SignMeUpForm, + Breadcrumb, +} from "./components"; +import Image from "next/image"; builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!); @@ -58,7 +70,7 @@ Builder.registerComponent(withChildren(Section), { { name: "effects", type: "string", - enum: ["-", "fx-grain-1"], + enum: ["", "fx-grain-1", "fx-grain-2"], }, ], }); @@ -246,6 +258,7 @@ Builder.registerComponent(withChildren(Button), { { name: "target", type: "string", + enum: ["_self", "_blank"], defaultValue: "_blank", }, ], @@ -320,6 +333,11 @@ Builder.registerComponent(Text, { type: "string", enum: ["tp-info"], }, + { + name: "fs", + type: "string", + enum: ["fs-10", "fs-18", "fs-26", "fs-28"], + }, ], }); @@ -363,6 +381,44 @@ Builder.registerComponent(H2, { ], }); +Builder.registerComponent(BulletList, { + ...DEFAULT_PROPS, + name: "Bullet list", + inputs: [ + { + name: "size", + type: "string", + enum: ["regular", "big"], + }, + { + name: "items", + type: "list", + defaultValue: [ + { + kind: "info", + title: "Indexing", + text: "Open-source, multi-chain indexing blockchain data.", + }, + ], + subFields: [ + { + name: "title", + type: "string", + }, + { + name: "text", + type: "longText", + }, + { + name: "kind", + type: "string", + enum: ["info", "success", "warning", "error"], + }, + ], + }, + ], +}); + Builder.registerComponent(withChildren(Header), { ...DEFAULT_PROPS, name: "Header", @@ -402,7 +458,7 @@ Builder.registerComponent(withChildren(Header), { { name: "target", type: "string", - enum: ["", "_blank"], + enum: ["_self", "_blank"], }, { name: "exact", @@ -411,5 +467,244 @@ Builder.registerComponent(withChildren(Header), { }, ], }, + { + name: "breakpoint", + type: "string", + enum: ["xs", "sm", "md", "lg", "xl", "2xl"], + defaultValue: "md", + }, + ], +}); + +Builder.registerComponent(Footer, { + ...DEFAULT_PROPS, + name: "Footer", + inputs: [ + { + name: "buttons", + type: "list", + required: true, + defaultValue: [ + { + label: "Join the collective", + href: "/collective", + props: { + variant: "primary", + }, + }, + { + label: "Start a project", + href: "https://docs.aleph.im/computing/", + target: "_blank", + }, + ], + subFields: [ + { + name: "label", + type: "string", + }, + { + name: "href", + type: "string", + }, + { + name: "target", + type: "string", + enum: ["_self", "_blank"], + }, + { + name: "props", + type: "object", + defaultValue: {}, + subFields: [ + { + name: "variant", + type: "string", + + enum: ["primary", "secondary", "tertiary", "textOnly"], + }, + ], + }, + ], + }, + { + name: "media", + type: "list", + required: true, + defaultValue: [ + { + name: "x", + icon: "x", + label: "Follow us", + href: "https://twitter.com/TwentySixCloud", + target: "_blank", + small: true, + }, + ], + subFields: [ + { + name: "name", + type: "string", + }, + { + name: "icon", + type: "string", + enum: ["x", "telegram", "medium"], + }, + { + name: "label", + type: "string", + }, + { + name: "href", + type: "string", + }, + { + name: "target", + type: "string", + enum: ["_self", "_blank"], + }, + { + name: "small", + type: "boolean", + }, + ], + }, + { + name: "mainLinks", + type: "list", + required: true, + defaultValue: [ + { + label: "Documentation", + href: "https://docs.aleph.im", + target: "_blank", + }, + ], + subFields: [ + { + name: "label", + type: "string", + }, + { + name: "href", + type: "string", + }, + { + name: "target", + type: "string", + enum: ["_self", "_blank"], + }, + ], + }, + { + name: "links", + type: "list", + required: true, + defaultValue: [ + { + title: "Solutions", + links: [ + { + label: "Computing", + href: "https://console.twentysix.cloud/computing/function/new/", + target: "_blank", + }, + ], + }, + { + title: "Developers", + links: [ + { + label: "Documentation", + href: "https://docs.aleph.im", + target: "_blank", + }, + ], + }, + ], + subFields: [ + { + name: "title", + type: "string", + }, + { + name: "links", + type: "list", + subFields: [ + { + name: "label", + type: "string", + }, + { + name: "href", + type: "string", + }, + { + name: "target", + type: "string", + enum: ["_self", "_blank"], + }, + ], + }, + ], + }, + ], +}); + +Builder.registerComponent(SignMeUpForm, { + ...DEFAULT_PROPS, + name: "Sign Me Up Form", +}); + +Builder.registerComponent(Image, { + ...DEFAULT_PROPS, + name: "Custom Image", + inputs: [ + { + name: "src", + type: "file", + }, + { + name: "alt", + type: "string", + defaultValue: "img", + }, + { + name: "fill", + type: "boolean", + defaultValue: true, + }, + { + name: "width", + type: "number", + }, + { + name: "height", + type: "number", + }, + ], + defaultStyles: { + position: "relative", + }, +}); + +Builder.registerComponent(Breadcrumb, { + name: "Breadcrumb", + inputs: [ + { + name: "navLinks", + type: "list", + subFields: [ + { name: "href", type: "string" }, + { name: "label", type: "string" }, + ], + defaultValue: [ + { href: "/", label: "Home" }, + { href: "/use-cases", label: "Use cases" }, + ], + }, + { name: "selected", type: "number" }, + { name: "selectedColor", type: "string" }, ], }); diff --git a/src/components/Breadcrumb/cmp.tsx b/src/components/Breadcrumb/cmp.tsx new file mode 100644 index 0000000..ad961d0 --- /dev/null +++ b/src/components/Breadcrumb/cmp.tsx @@ -0,0 +1,32 @@ +import Link from "next/link"; +import { BreadcrumbProps, NavLink } from "./types"; +import { ReactNode } from "react"; +import { Breadcrumb as CoreBreadcrumb } from "@aleph-front/core"; + +export const Breadcrumb = ({ + navLinks, + selected, + selectedColor, +}: BreadcrumbProps) => { + if (!navLinks) { + return <>; + } + + const links: ReactNode[] = navLinks.map(({ href, label }: NavLink) => { + return ( + + {label} + + ); + }); + + return ( + + ); +}; + +export default Breadcrumb; diff --git a/src/components/Breadcrumb/index.tsx b/src/components/Breadcrumb/index.tsx new file mode 100644 index 0000000..a05ebc5 --- /dev/null +++ b/src/components/Breadcrumb/index.tsx @@ -0,0 +1 @@ +export { default } from "./cmp"; diff --git a/src/components/Breadcrumb/types.ts b/src/components/Breadcrumb/types.ts new file mode 100644 index 0000000..98a1e69 --- /dev/null +++ b/src/components/Breadcrumb/types.ts @@ -0,0 +1,10 @@ +export type NavLink = { + href: string; + label: string; +}; + +export type BreadcrumbProps = { + navLinks: NavLink[]; + selected: number; + selectedColor: string; +}; diff --git a/src/components/Footer/cmp.tsx b/src/components/Footer/cmp.tsx new file mode 100644 index 0000000..b284f18 --- /dev/null +++ b/src/components/Footer/cmp.tsx @@ -0,0 +1,29 @@ +import { + Footer as BaseFooter, + FooterProps, + LinkComponent, +} from "@aleph-front/core"; +import Link from "next/link"; + +export const Footer = ({ + small, + buttons, + media, + mainLinks, + links, +}: FooterProps) => { + return ( + + ); +}; + +export default Footer; diff --git a/src/components/Footer/index.ts b/src/components/Footer/index.ts new file mode 100644 index 0000000..7a9f83f --- /dev/null +++ b/src/components/Footer/index.ts @@ -0,0 +1 @@ +export { default } from './cmp' diff --git a/src/components/H1/styles.tsx b/src/components/H1/styles.tsx index c298124..ee32bb5 100644 --- a/src/components/H1/styles.tsx +++ b/src/components/H1/styles.tsx @@ -7,6 +7,5 @@ export const StyledH1 = styled(TextGradient).attrs((props) => { forwardedAs: "h1", type: props.type || "h5", color: props.color || "main1", - whitespace: props.whitespace || "pre-wrap", }; })``; diff --git a/src/components/H2/styles.tsx b/src/components/H2/styles.tsx index 72a43df..053f22a 100644 --- a/src/components/H2/styles.tsx +++ b/src/components/H2/styles.tsx @@ -7,6 +7,5 @@ export const StyledH2 = styled(TextGradient).attrs((props) => { forwardedAs: "h2", type: props.type || "h5", color: props.color || "main0", - whitespace: props.whitespace || "pre-wrap", }; })``; diff --git a/src/components/Header/cmp.tsx b/src/components/Header/cmp.tsx index 3132223..720e103 100644 --- a/src/components/Header/cmp.tsx +++ b/src/components/Header/cmp.tsx @@ -7,7 +7,7 @@ import { useCallback, useState } from "react"; import { useRouter } from "next/router"; import { HeaderProps } from "./types"; -export const Header = ({ children, routes }: HeaderProps) => { +export const Header = ({ children, routes, breakpoint }: HeaderProps) => { const [isOpen, setIsOpen] = useState(false); const handleCloseMenu = useCallback((open: boolean) => setIsOpen(open), []); @@ -17,7 +17,7 @@ export const Header = ({ children, routes }: HeaderProps) => { & { children: React.ReactNode; routes: HeaderRoutes[]; + breakpoint: BreakpointId; }; type HeaderRoutes = { diff --git a/src/components/SignMeUpForm/cmp.tsx b/src/components/SignMeUpForm/cmp.tsx new file mode 100644 index 0000000..90c20ae --- /dev/null +++ b/src/components/SignMeUpForm/cmp.tsx @@ -0,0 +1,71 @@ +import { Button, TextInput, useResponsiveMin } from '@aleph-front/core' + +const SignMeUpButton = () => ( + +) + +export const SignMeUpForm = () => { + const isDesktop = useResponsiveMin('md') + + return ( +
+
+ + {isDesktop ? ( + } + tw="w-[24rem] max-w-full" + /> + ) : ( + + )} +
+ {!isDesktop && } + + ) +} + +export default SignMeUpForm diff --git a/src/components/SignMeUpForm/index.ts b/src/components/SignMeUpForm/index.ts new file mode 100644 index 0000000..ba35c36 --- /dev/null +++ b/src/components/SignMeUpForm/index.ts @@ -0,0 +1,2 @@ +export { default } from './cmp' +export type { SignMeUpFormProps } from './types' diff --git a/src/components/SignMeUpForm/types.ts b/src/components/SignMeUpForm/types.ts new file mode 100644 index 0000000..e2e8a2e --- /dev/null +++ b/src/components/SignMeUpForm/types.ts @@ -0,0 +1,3 @@ +export type SignMeUpFormProps = { + // todo +} diff --git a/src/components/Text/cmp.tsx b/src/components/Text/cmp.tsx index 47bd3f5..2aaa0ec 100644 --- a/src/components/Text/cmp.tsx +++ b/src/components/Text/cmp.tsx @@ -3,8 +3,10 @@ import React from "react"; import { TextProps } from "./types"; -export const Text = ({ children, textType, tp }: TextProps) => { - const classNames = [`${textType || ""}`, `${tp || ""}`].join(" "); +export const Text = ({ children, textType, tp, fs }: TextProps) => { + const classNames = [`${textType || ""}`, `${tp || ""}`, `${fs || ""}`].join( + " " + ); return

{children}

; }; diff --git a/src/components/Text/types.ts b/src/components/Text/types.ts index ced9039..afaca22 100644 --- a/src/components/Text/types.ts +++ b/src/components/Text/types.ts @@ -4,4 +4,5 @@ export type TextProps = HTMLAttributes & { children: React.ReactNode; textType: string; tp: string; + fs: string; }; diff --git a/src/components/index.tsx b/src/components/index.tsx index f1e338c..678cd15 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -5,3 +5,6 @@ export { default as H2 } from "./H2"; export { default as Section } from "./Section"; export { default as Text } from "./Text"; export { default as Header } from "./Header"; +export { default as Footer } from "./Footer"; +export { default as SignMeUpForm } from "./SignMeUpForm"; +export { default as Breadcrumb } from "./Breadcrumb"; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 0b3d886..547a7cb 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -8,7 +8,9 @@ builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!); export default function App({ Component, pageProps }: AppProps) { const themeKey: keyof typeof themes = - pageProps.page.data.theme || "twentysix"; + pageProps.page?.data?.theme || "twentysix"; + + console.log(`=== Using theme: ${themeKey} ===`); return ( From cb11b7acd412796a857738b5d2a3ff212feb7c7d Mon Sep 17 00:00:00 2001 From: gmolki Date: Tue, 9 Apr 2024 09:26:56 +0200 Subject: [PATCH 06/15] Add edit-symbol page --- src/pages/_app.tsx | 2 +- src/pages/edit-symbol.tsx | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 src/pages/edit-symbol.tsx diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 547a7cb..88e0bb8 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,5 +1,5 @@ import "@/styles/globals.css"; -import { ThemeProps, ThemeProvider } from "styled-components"; +import { ThemeProvider } from "styled-components"; import type { AppProps } from "next/app"; import { builder } from "@builder.io/react"; import { GlobalStyles, themes } from "@aleph-front/core"; diff --git a/src/pages/edit-symbol.tsx b/src/pages/edit-symbol.tsx new file mode 100644 index 0000000..8247c15 --- /dev/null +++ b/src/pages/edit-symbol.tsx @@ -0,0 +1,18 @@ +import { BuilderComponent, builder } from "@builder.io/react"; +import { BuilderContent } from "@builder.io/sdk"; +import React from "react"; +import "../builder-registry"; +3; +builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!); + +export const getStaticProps = async (context) => { + // Dynamically fetch latest content from Builder.io API + const content = await builder.get("symbol", { url: context.resolvedUrl }); + console; + return { props: { content } }; +}; + +// View full integration and docs: https://builder.io/c/docs/developers +export default function Page(props: { content: BuilderContent | undefined }) { + return ; +} From ae46a0bc2a577136911bce61c93ce356e87b6d09 Mon Sep 17 00:00:00 2001 From: gmolki Date: Wed, 10 Apr 2024 08:35:13 +0200 Subject: [PATCH 07/15] WIP --- src/builder-registry.ts | 475 ++++++++++++++++++++++---- src/components/Box/cmp.tsx | 14 +- src/components/Box/styles.tsx | 42 +++ src/components/Box/types.ts | 15 +- src/components/Container/styles.tsx | 25 +- src/components/H1/cmp.tsx | 12 +- src/components/H1/types.ts | 11 +- src/components/H2/cmp.tsx | 12 +- src/components/H2/types.ts | 11 +- src/components/Header/cmp.tsx | 3 +- src/components/Text/cmp.tsx | 2 +- src/components/Text/types.ts | 8 - src/components/TextGradient/cmp.tsx | 25 ++ src/components/TextGradient/index.tsx | 1 + src/components/TextGradient/types.ts | 4 + src/components/index.tsx | 1 + src/pages/_document.tsx | 22 +- src/pages/_dynamicPage.tsx | 19 -- src/pages/_twentySixPage.tsx | 63 ++++ src/pages/edit-symbol.tsx | 4 +- src/types/TextProps.tsx | 6 + 21 files changed, 657 insertions(+), 118 deletions(-) create mode 100644 src/components/Box/styles.tsx delete mode 100644 src/components/Text/types.ts create mode 100644 src/components/TextGradient/cmp.tsx create mode 100644 src/components/TextGradient/index.tsx create mode 100644 src/components/TextGradient/types.ts create mode 100644 src/pages/_twentySixPage.tsx create mode 100644 src/types/TextProps.tsx diff --git a/src/builder-registry.ts b/src/builder-registry.ts index 0e7de3d..75ef39a 100644 --- a/src/builder-registry.ts +++ b/src/builder-registry.ts @@ -1,7 +1,21 @@ -import { BulletList, Button, Col, Row, TextGradient } from "@aleph-front/core"; -import { builder, Builder, withChildren } from "@builder.io/react"; +import { BulletList, Button, Col, Row } from "@aleph-front/core"; +import { + builder, + Builder, + Columns, + CustomCode, + Form, + FormInput, + FormSelect, + FormSubmitButton, + Image, + Label, + TextArea, + withChildren, +} from "@builder.io/react"; import { Container, + TextGradient, H1, H2, Section, @@ -12,10 +26,14 @@ import { SignMeUpForm, Breadcrumb, } from "./components"; -import Image from "next/image"; builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!); +const HIDDEN_FROM_EDITOR_PROPS = { + override: true, + hideFromInsertMenu: true, +}; + const DEFAULT_PROPS = { inputs: [], defaultStyles: {}, @@ -23,6 +41,30 @@ const DEFAULT_PROPS = { const DEFAULT_TEXT_PROPS = { ...DEFAULT_PROPS, + inputs: [ + ...DEFAULT_PROPS.inputs, + { + name: "children", + friendlyName: "Text content", + helperText: "Shift+Enter for line break", + type: "longText", + }, + { + name: "textType", + type: "string", + enum: ["", "text-main0", "text-base2"], + }, + { + name: "tp", + type: "string", + enum: ["", "tp-info", "tp-header", "tp-h2", "tp-h4", "tp-h7"], + }, + { + name: "fs", + type: "string", + enum: ["", "fs-10", "fs-18", "fs-26", "fs-28"], + }, + ], defaultStyles: { whiteSpace: "pre-wrap", }, @@ -54,6 +96,211 @@ Builder.registerComponent(withChildren(Box), { ...DEFAULT_PROPS, name: "Custom Box", canHaveChildren: true, + inputs: [ + { + name: "backgroundColor", + type: "string", + enum: ["bg-base0", "bg-base1"], + }, + { + name: "margin", + type: "string", + enum: [ + "0", + "0.25rem", + "0.5rem", + "0.75rem", + "1rem", + "1.25rem", + "1.5rem", + "1.75rem", + "2.00rem", + "2.25rem", + "2.50rem", + "2.75rem", + "3.00rem", + ], + }, + { + name: "marginTop", + type: "string", + advanced: true, + enum: [ + "0", + "0.25rem", + "0.5rem", + "0.75rem", + "1rem", + "1.25rem", + "1.5rem", + "1.75rem", + "2.00rem", + "2.25rem", + "2.50rem", + "2.75rem", + "3.00rem", + ], + }, + { + name: "marginBottom", + type: "string", + advanced: true, + enum: [ + "0", + "0.25rem", + "0.5rem", + "0.75rem", + "1rem", + "1.25rem", + "1.5rem", + "1.75rem", + "2.00rem", + "2.25rem", + "2.50rem", + "2.75rem", + "3.00rem", + ], + }, + { + name: "marginLeft", + type: "string", + advanced: true, + enum: [ + "0", + "0.25rem", + "0.5rem", + "0.75rem", + "1rem", + "1.25rem", + "1.5rem", + "1.75rem", + "2.00rem", + "2.25rem", + "2.50rem", + "2.75rem", + "3.00rem", + ], + }, + { + name: "marginRight", + type: "string", + advanced: true, + enum: [ + "0", + "0.25rem", + "0.5rem", + "0.75rem", + "1rem", + "1.25rem", + "1.5rem", + "1.75rem", + "2.00rem", + "2.25rem", + "2.50rem", + "2.75rem", + "3.00rem", + ], + }, + { + name: "padding", + type: "string", + enum: [ + "0", + "0.25rem", + "0.5rem", + "0.75rem", + "1rem", + "1.25rem", + "1.5rem", + "1.75rem", + "2.00rem", + "2.25rem", + "2.50rem", + "2.75rem", + "3.00rem", + ], + }, + { + name: "paddingTop", + type: "string", + advanced: true, + enum: [ + "0", + "0.25rem", + "0.5rem", + "0.75rem", + "1rem", + "1.25rem", + "1.5rem", + "1.75rem", + "2.00rem", + "2.25rem", + "2.50rem", + "2.75rem", + "3.00rem", + ], + }, + { + name: "paddingBottom", + type: "string", + advanced: true, + enum: [ + "0", + "0.25rem", + "0.5rem", + "0.75rem", + "1rem", + "1.25rem", + "1.5rem", + "1.75rem", + "2.00rem", + "2.25rem", + "2.50rem", + "2.75rem", + "3.00rem", + ], + }, + { + name: "paddingLeft", + type: "string", + advanced: true, + enum: [ + "0", + "0.25rem", + "0.5rem", + "0.75rem", + "1rem", + "1.25rem", + "1.5rem", + "1.75rem", + "2.00rem", + "2.25rem", + "2.50rem", + "2.75rem", + "3.00rem", + ], + }, + { + name: "paddingRight", + type: "string", + advanced: true, + enum: [ + "0", + "0.25rem", + "0.5rem", + "0.75rem", + "1rem", + "1.25rem", + "1.5rem", + "1.75rem", + "2.00rem", + "2.25rem", + "2.50rem", + "2.75rem", + "3.00rem", + ], + }, + ], }); Builder.registerComponent(withChildren(Container), { @@ -259,7 +506,7 @@ Builder.registerComponent(withChildren(Button), { name: "target", type: "string", enum: ["_self", "_blank"], - defaultValue: "_blank", + defaultValue: "_self", }, ], }); @@ -268,10 +515,7 @@ Builder.registerComponent(TextGradient, { ...DEFAULT_TEXT_PROPS, name: "TextGradient", inputs: [ - { - name: "children", - type: "longText", - }, + ...DEFAULT_TEXT_PROPS.inputs, { name: "color", type: "string", @@ -301,7 +545,7 @@ Builder.registerComponent(TextGradient, { { name: "type", type: "string", - enum: ["h1"], + enum: ["h1", "h2"], defaultValue: "h1", }, { @@ -319,36 +563,14 @@ Builder.registerComponent(TextGradient, { Builder.registerComponent(Text, { ...DEFAULT_TEXT_PROPS, name: "Custom Text", - inputs: [ - { - name: "children", - type: "longText", - }, - { - name: "textType", - type: "string", - }, - { - name: "tp", - type: "string", - enum: ["tp-info"], - }, - { - name: "fs", - type: "string", - enum: ["fs-10", "fs-18", "fs-26", "fs-28"], - }, - ], + inputs: [...DEFAULT_TEXT_PROPS.inputs], }); Builder.registerComponent(H1, { ...DEFAULT_TEXT_PROPS, name: "H1", inputs: [ - { - name: "children", - type: "longText", - }, + ...DEFAULT_TEXT_PROPS.inputs, { name: "color", type: "string", @@ -365,10 +587,7 @@ Builder.registerComponent(H2, { ...DEFAULT_TEXT_PROPS, name: "H2", inputs: [ - { - name: "children", - type: "longText", - }, + ...DEFAULT_TEXT_PROPS.inputs, { name: "color", type: "string", @@ -459,6 +678,7 @@ Builder.registerComponent(withChildren(Header), { name: "target", type: "string", enum: ["_self", "_blank"], + defaultValue: "_self", }, { name: "exact", @@ -511,6 +731,7 @@ Builder.registerComponent(Footer, { name: "target", type: "string", enum: ["_self", "_blank"], + defaultValue: "_self", }, { name: "props", @@ -563,6 +784,7 @@ Builder.registerComponent(Footer, { name: "target", type: "string", enum: ["_self", "_blank"], + defaultValue: "_self", }, { name: "small", @@ -594,6 +816,7 @@ Builder.registerComponent(Footer, { name: "target", type: "string", enum: ["_self", "_blank"], + defaultValue: "_self", }, ], }, @@ -644,6 +867,7 @@ Builder.registerComponent(Footer, { name: "target", type: "string", enum: ["_self", "_blank"], + defaultValue: "_self", }, ], }, @@ -657,31 +881,113 @@ Builder.registerComponent(SignMeUpForm, { name: "Sign Me Up Form", }); +Builder.registerComponent(Breadcrumb, { + name: "Breadcrumb", + inputs: [ + { + name: "navLinks", + type: "list", + subFields: [ + { name: "href", type: "string" }, + { name: "label", type: "string" }, + ], + defaultValue: [ + { href: "/", label: "Home" }, + { href: "/use-cases", label: "Use cases" }, + ], + }, + { name: "selected", type: "number" }, + { name: "selectedColor", type: "string" }, + ], +}); + +// Overrides default Builder.io image +// https://github.com/BuilderIO/builder/blob/4d38bc1e3d2366611230bf52d3f04884785ff587/packages/react/src/blocks/Image.tsx Builder.registerComponent(Image, { ...DEFAULT_PROPS, name: "Custom Image", + override: true, inputs: [ + ...DEFAULT_PROPS.inputs, { - name: "src", + name: "image", type: "file", + bubble: true, + allowedFileTypes: ["jpeg", "jpg", "png", "svg"], + required: true, + defaultValue: + "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a", }, { - name: "alt", + name: "backgroundSize", + type: "text", + defaultValue: "contain", + enum: [ + { + label: "contain", + value: "contain", + helperText: "The image should never get cropped", + }, + { + label: "cover", + value: "cover", + helperText: `The image should fill its box, cropping when needed`, + }, + ], + }, + { + name: "backgroundPosition", + type: "text", + defaultValue: "center", + enum: [ + "center", + "top", + "left", + "right", + "bottom", + "top left", + "top right", + "bottom left", + "bottom right", + ], + }, + { + name: "altText", type: "string", - defaultValue: "img", + helperText: "Text to display when the user has images off", }, { - name: "fill", - type: "boolean", - defaultValue: true, + name: "height", + type: "number", + hideFromUI: true, }, { name: "width", type: "number", + hideFromUI: true, }, { - name: "height", - type: "number", + name: "sizes", + type: "string", + hideFromUI: true, + }, + { + name: "srcset", + type: "string", + hideFromUI: true, + }, + { + name: "lazy", + type: "boolean", + defaultValue: true, + hideFromUI: true, + }, + { + name: "fitContent", + type: "boolean", + helperText: + "When child blocks are provided, fit to them instead of using the image's aspect ratio", + defaultValue: true, }, ], defaultStyles: { @@ -689,22 +995,77 @@ Builder.registerComponent(Image, { }, }); -Builder.registerComponent(Breadcrumb, { - name: "Breadcrumb", +Builder.registerComponent(Columns, { + ...DEFAULT_PROPS, + name: "Columns", + override: true, inputs: [ { - name: "navLinks", - type: "list", + name: "columns", + type: "array", + broadcast: true, subFields: [ - { name: "href", type: "string" }, - { name: "label", type: "string" }, - ], - defaultValue: [ - { href: "/", label: "Home" }, - { href: "/use-cases", label: "Use cases" }, + { + name: "blocks", + type: "array", + hideFromUI: true, + defaultValue: 2, + }, + { + name: "width", + type: "number", + hideFromUI: true, + helperText: "Width %, e.g. set to 50 to fill half of the space", + }, + { + name: "link", + type: "url", + helperText: + "Optionally set a url that clicking this column will link to", + }, ], + defaultValue: [{ blocks: 2 }, { blocks: 2 }], + }, + { + name: "space", + type: "number", + defaultValue: 14, + helperText: "Size of gap between columns", + advanced: true, + }, + { + name: "stackColumnsAt", + type: "string", + defaultValue: "tablet", + helperText: "Convert horizontal columns to vertical at what device size", + enum: ["tablet", "mobile", "never"], + advanced: true, + }, + { + name: "reverseColumnsWhenStacked", + type: "boolean", + defaultValue: false, + helperText: + "When stacking columns for mobile devices, reverse the ordering", + advanced: true, }, - { name: "selected", type: "number" }, - { name: "selectedColor", type: "string" }, ], }); + +[ + { component: Form, name: "Form:Form" }, + { component: FormInput, name: "Form:Input" }, + { component: FormSubmitButton, name: "Form:SubmitButton" }, + { component: Label, name: "Form:Label" }, + { component: FormSelect, name: "Form:Select" }, + { component: TextArea, name: "Form:TextArea" }, + { component: CustomCode, name: "Custom Code" }, + { component: CustomCode, name: "Slot" }, + { component: CustomCode, name: "Slot" }, + { component: CustomCode, name: "Slot" }, +].forEach(({ component, name }) => { + Builder.registerComponent(component, { + ...HIDDEN_FROM_EDITOR_PROPS, + name: name, + }); +}); diff --git a/src/components/Box/cmp.tsx b/src/components/Box/cmp.tsx index 4bd941b..afdae1c 100644 --- a/src/components/Box/cmp.tsx +++ b/src/components/Box/cmp.tsx @@ -2,9 +2,19 @@ import React from "react"; import { BoxProps } from "./types"; +import { StyledBox } from "./styles"; -export const Box = ({ children }: BoxProps) => { - return <>{children}; +const generateClassNames = ({ backgroundColor, padding }: any) => + [backgroundColor].filter(Boolean).join(" "); + +export const Box = ({ children, ...props }: BoxProps) => { + const classNames = generateClassNames(props); + + return ( + + {children} + + ); }; export default Box; diff --git a/src/components/Box/styles.tsx b/src/components/Box/styles.tsx new file mode 100644 index 0000000..9e46e68 --- /dev/null +++ b/src/components/Box/styles.tsx @@ -0,0 +1,42 @@ +import styled, { css } from "styled-components"; +import tw from "twin.macro"; +import { BoxProps } from "./types"; + +const generateTwClass = (propValue: string) => + propValue ? tw`${propValue}` : ""; + +export const StyledBox = styled.div` + ${({ + theme, + margin, + marginTop, + marginBottom, + marginRight, + marginLeft, + padding, + paddingTop, + paddingBottom, + paddingRight, + paddingLeft, + }) => { + console.log("Box Props Padding: ", padding); + + const calculatedCss = css` + margin: ${margin}; + margin-top: ${marginTop}; + margin-bottom: ${marginBottom}; + margin-right: ${marginRight}; + margin-left: ${marginLeft}; + padding: ${padding}; + padding-top: ${paddingTop}; + padding-bottom: ${paddingBottom}; + padding-right: ${paddingRight}; + padding-left: ${paddingLeft}; + position: relative; + `; + + console.log("Box Calculated CSS: ", calculatedCss); + + return calculatedCss; + }} +`; diff --git a/src/components/Box/types.ts b/src/components/Box/types.ts index bd4b961..ce32b0f 100644 --- a/src/components/Box/types.ts +++ b/src/components/Box/types.ts @@ -1,5 +1,14 @@ -import { HTMLAttributes } from "react"; - -export type BoxProps = HTMLAttributes & { +export type BoxProps = { children: React.ReactNode; + backgroundColor: string; + margin: string; + marginTop: string; + marginBottom: string; + marginRight: string; + marginLeft: string; + padding: string; + paddingTop: string; + paddingBottom: string; + paddingRight: string; + paddingLeft: string; }; diff --git a/src/components/Container/styles.tsx b/src/components/Container/styles.tsx index 59d89fc..c112aee 100644 --- a/src/components/Container/styles.tsx +++ b/src/components/Container/styles.tsx @@ -1,12 +1,17 @@ -import styled, { css } from 'styled-components' -import tw from 'twin.macro' +import styled, { css } from "styled-components"; +import tw from "twin.macro"; export const StyledContainer = styled.div` - ${({ theme }) => css` - ${tw`px-6 md:px-16`} - box-sizing: border-box; - width: 100%; - margin: 0 auto; - max-width: 100rem; - `} -` + ${({ theme }) => { + const a = css` + ${tw`px-6 md:px-16`} + box-sizing: border-box; + width: 100%; + margin: 0 auto; + max-width: 100rem; + `; + + console.log("css", a); + return a; + }} +`; diff --git a/src/components/H1/cmp.tsx b/src/components/H1/cmp.tsx index ea6e318..21eb79d 100644 --- a/src/components/H1/cmp.tsx +++ b/src/components/H1/cmp.tsx @@ -1,8 +1,16 @@ import { StyledH1 } from "./styles"; import { H1Props } from "./types"; -export const H1 = ({ children, ...rest }: H1Props) => { - return {children}; +export const H1 = ({ children, textType, tp, fs, ...rest }: H1Props) => { + const classNames = [`${textType || ""}`, `${tp || ""}`, `${fs || ""}`].join( + " " + ); + + return ( + + {children} + + ); }; export default H1; diff --git a/src/components/H1/types.ts b/src/components/H1/types.ts index 0bf432c..f699704 100644 --- a/src/components/H1/types.ts +++ b/src/components/H1/types.ts @@ -1,8 +1,9 @@ +import { TextProps } from "@/types/TextProps"; import { TypoKind } from "@aleph-front/core"; import { HTMLAttributes, ReactNode } from "react"; -export type H1Props = HTMLAttributes & { - children: ReactNode; - color?: string; - type?: TypoKind; -}; +export type H1Props = HTMLAttributes & + TextProps & { + color?: string; + type?: TypoKind; + }; diff --git a/src/components/H2/cmp.tsx b/src/components/H2/cmp.tsx index a7df7d5..bc93298 100644 --- a/src/components/H2/cmp.tsx +++ b/src/components/H2/cmp.tsx @@ -1,8 +1,16 @@ import { StyledH2 } from "./styles"; import { H2Props } from "./types"; -export const H2 = ({ children, ...rest }: H2Props) => { - return {children}; +export const H2 = ({ children, textType, tp, fs, ...rest }: H2Props) => { + const classNames = [`${textType || ""}`, `${tp || ""}`, `${fs || ""}`].join( + " " + ); + + return ( + + {children} + + ); }; export default H2; diff --git a/src/components/H2/types.ts b/src/components/H2/types.ts index 1ccdfc2..fbd2783 100644 --- a/src/components/H2/types.ts +++ b/src/components/H2/types.ts @@ -1,8 +1,9 @@ +import { TextProps } from "@/types/TextProps"; import { TypoKind } from "@aleph-front/core"; import { HTMLAttributes, ReactNode } from "react"; -export type H2Props = HTMLAttributes & { - children: ReactNode; - color?: string; - type?: TypoKind; -}; +export type H2Props = HTMLAttributes & + TextProps & { + color?: string; + type?: TypoKind; + }; diff --git a/src/components/Header/cmp.tsx b/src/components/Header/cmp.tsx index 720e103..25edc05 100644 --- a/src/components/Header/cmp.tsx +++ b/src/components/Header/cmp.tsx @@ -12,13 +12,14 @@ export const Header = ({ children, routes, breakpoint }: HeaderProps) => { const handleCloseMenu = useCallback((open: boolean) => setIsOpen(open), []); const router = useRouter(); + console.log(router.asPath); return ( { const classNames = [`${textType || ""}`, `${tp || ""}`, `${fs || ""}`].join( diff --git a/src/components/Text/types.ts b/src/components/Text/types.ts deleted file mode 100644 index afaca22..0000000 --- a/src/components/Text/types.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { HTMLAttributes } from "react"; - -export type TextProps = HTMLAttributes & { - children: React.ReactNode; - textType: string; - tp: string; - fs: string; -}; diff --git a/src/components/TextGradient/cmp.tsx b/src/components/TextGradient/cmp.tsx new file mode 100644 index 0000000..bf67dd8 --- /dev/null +++ b/src/components/TextGradient/cmp.tsx @@ -0,0 +1,25 @@ +"use client"; + +import React from "react"; +import { TextGradientProps } from "./types"; +import { TextGradient as CoreTextGradient } from "@aleph-front/core"; + +export const TextGradient = ({ + children, + textType, + tp, + fs, + ...rest +}: TextGradientProps) => { + const classNames = [`${textType || ""}`, `${tp || ""}`, `${fs || ""}`].join( + " " + ); + + return ( + + {children} + + ); +}; + +export default TextGradient; diff --git a/src/components/TextGradient/index.tsx b/src/components/TextGradient/index.tsx new file mode 100644 index 0000000..a05ebc5 --- /dev/null +++ b/src/components/TextGradient/index.tsx @@ -0,0 +1 @@ +export { default } from "./cmp"; diff --git a/src/components/TextGradient/types.ts b/src/components/TextGradient/types.ts new file mode 100644 index 0000000..7ba9765 --- /dev/null +++ b/src/components/TextGradient/types.ts @@ -0,0 +1,4 @@ +import { TextProps } from "@/types/TextProps"; +import { TextGradientProps as CoreTextGradientProps } from "@aleph-front/core"; + +export type TextGradientProps = CoreTextGradientProps & TextProps; diff --git a/src/components/index.tsx b/src/components/index.tsx index 678cd15..8c514b4 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -1,5 +1,6 @@ export { default as Box } from "./Box"; export { default as Container } from "./Container"; +export { default as TextGradient } from "./TextGradient"; export { default as H1 } from "./H1"; export { default as H2 } from "./H2"; export { default as Section } from "./Section"; diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index b2fff8b..8e1035d 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -3,7 +3,27 @@ import { Html, Head, Main, NextScript } from "next/document"; export default function Document() { return ( - + + + + + + + +
diff --git a/src/pages/_dynamicPage.tsx b/src/pages/_dynamicPage.tsx index 51376d1..8e4b6c8 100644 --- a/src/pages/_dynamicPage.tsx +++ b/src/pages/_dynamicPage.tsx @@ -51,25 +51,6 @@ export default function DynamicPage({ page }: { page: BuilderContent | null }) { <> {content?.data?.title} - - - - - - {/* Render the Builder page */} diff --git a/src/pages/_twentySixPage.tsx b/src/pages/_twentySixPage.tsx new file mode 100644 index 0000000..52c8c80 --- /dev/null +++ b/src/pages/_twentySixPage.tsx @@ -0,0 +1,63 @@ +import React, { useEffect, useState } from "react"; +import DefaultErrorPage from "next/error"; +import Head from "next/head"; +import { BuilderContent } from "@builder.io/sdk"; +import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react"; +import "../builder-registry"; +import { useRouter } from "next/router"; + +export default function DynamicPage({ page }: { page: BuilderContent | null }) { + const router = useRouter(); + const isPreviewing = useIsPreviewing(); + + const [content, setContent] = useState(page); + const [notFound, setNotFound] = useState(!page); + + useEffect(() => { + async function fetchContent() { + const urlPath = router.asPath || "/"; + console.log("PAGE", urlPath); + + try { + console.log("LOAD", urlPath); + + const fetchedContent = await builder + .get("page", { userAttributes: { urlPath } }) + .toPromise(); + + if (fetchedContent) { + setContent(fetchedContent); + } else { + setNotFound(true); + } + } catch (e) { + console.log("something went wrong while fetching Builder Content: ", e); + setNotFound(true); + } + } + + fetchContent(); + }, [router.asPath]); // Depend on router.asPath to refetch content on route changes + + // If the page content is not available + // and not in preview mode, show a 404 error page + if (notFound && !isPreviewing) { + return ; + } + + // If the page content is available, render + // the BuilderComponent with the page content + return ( + <> + + {content?.data?.title} + + {/* Render the Builder page */} + + + ); +} diff --git a/src/pages/edit-symbol.tsx b/src/pages/edit-symbol.tsx index 8247c15..1b02e29 100644 --- a/src/pages/edit-symbol.tsx +++ b/src/pages/edit-symbol.tsx @@ -2,10 +2,10 @@ import { BuilderComponent, builder } from "@builder.io/react"; import { BuilderContent } from "@builder.io/sdk"; import React from "react"; import "../builder-registry"; -3; + builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!); -export const getStaticProps = async (context) => { +export const getStaticProps = async (context: { resolvedUrl: string }) => { // Dynamically fetch latest content from Builder.io API const content = await builder.get("symbol", { url: context.resolvedUrl }); console; diff --git a/src/types/TextProps.tsx b/src/types/TextProps.tsx new file mode 100644 index 0000000..2bdad6a --- /dev/null +++ b/src/types/TextProps.tsx @@ -0,0 +1,6 @@ +export type TextProps = { + children: React.ReactNode; + textType: string; + tp: string; + fs: string; +}; From aad02acedd333a5170f8ea2a681528d39c04b267 Mon Sep 17 00:00:00 2001 From: gmolki Date: Thu, 11 Apr 2024 01:44:11 +0200 Subject: [PATCH 08/15] refactor + more components --- .env | 2 +- src/builder-registry.ts | 514 +++++++++------------ src/components/Box/styles.tsx | 12 +- src/components/Box/types.ts | 14 +- src/components/CardWithSideImage/cmp.tsx | 53 +++ src/components/CardWithSideImage/index.tsx | 1 + src/components/CardWithSideImage/types.ts | 7 + src/components/Container/styles.tsx | 33 +- src/components/Container/types.ts | 10 +- src/components/Counter/Counter.tsx | 33 ++ src/components/Counter/styles.module.css | 28 ++ src/components/Image/cmp.tsx | 11 + src/components/Image/index.tsx | 1 + src/components/Image/styles.tsx | 32 ++ src/components/Image/types.ts | 14 + src/components/index.tsx | 2 + src/pages/[[...page]].tsx | 18 +- src/pages/_dynamicPage.tsx | 21 +- src/types/CssEditableProps.tsx | 12 + 19 files changed, 481 insertions(+), 337 deletions(-) create mode 100644 src/components/CardWithSideImage/cmp.tsx create mode 100644 src/components/CardWithSideImage/index.tsx create mode 100644 src/components/CardWithSideImage/types.ts create mode 100644 src/components/Counter/Counter.tsx create mode 100644 src/components/Counter/styles.module.css create mode 100644 src/components/Image/cmp.tsx create mode 100644 src/components/Image/index.tsx create mode 100644 src/components/Image/styles.tsx create mode 100644 src/components/Image/types.ts create mode 100644 src/types/CssEditableProps.tsx diff --git a/.env b/.env index 9c1469f..77824ca 100644 --- a/.env +++ b/.env @@ -1,2 +1,2 @@ # https://www.builder.io/c/docs/using-your-api-key -# NEXT_PUBLIC_BUILDER_API_KEY=fd4e1a4bdbc240f0b17c0e77aee16d01 +NEXT_PUBLIC_BUILDER_API_KEY=5da369ee55b9465c91cf36605e655931 diff --git a/src/builder-registry.ts b/src/builder-registry.ts index 75ef39a..5159a78 100644 --- a/src/builder-registry.ts +++ b/src/builder-registry.ts @@ -1,18 +1,18 @@ -import { BulletList, Button, Col, Row } from "@aleph-front/core"; import { builder, Builder, Columns, CustomCode, + Embed, Form, FormInput, FormSelect, FormSubmitButton, - Image, Label, TextArea, withChildren, } from "@builder.io/react"; +import { BulletList, Button, Col, Row } from "@aleph-front/core"; import { Container, TextGradient, @@ -21,10 +21,12 @@ import { Section, Text, Box, + Image, Header, Footer, SignMeUpForm, Breadcrumb, + CardWithSideImage, } from "./components"; builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!); @@ -70,6 +72,97 @@ const DEFAULT_TEXT_PROPS = { }, }; +const remValues = [ + "auto", + "0", + "0.25rem", + "0.5rem", + "0.75rem", + "1rem", + "1.25rem", + "1.5rem", + "1.75rem", + "2.00rem", + "2.25rem", + "2.50rem", + "2.75rem", + "3.00rem", + "3.25rem", + "3.50rem", + "3.75rem", + "4.00rem", + "4.25rem", + "4.50rem", + "4.75rem", + "5.00rem", + "5.25rem", + "5.50rem", + "5.75rem", + "6.00rem", +]; + +const CSS_EDITABLE_INPUTS = [ + { + name: "margin", + type: "string", + defaultValue: "auto", + enum: [...remValues], + }, + { + name: "marginTop", + type: "string", + advanced: true, + enum: [...remValues], + }, + { + name: "marginBottom", + type: "string", + advanced: true, + enum: [...remValues], + }, + { + name: "marginLeft", + type: "string", + advanced: true, + enum: [...remValues], + }, + { + name: "marginRight", + type: "string", + advanced: true, + enum: [...remValues], + }, + { + name: "padding", + type: "string", + enum: [...remValues], + }, + { + name: "paddingTop", + type: "string", + advanced: true, + enum: [...remValues], + }, + { + name: "paddingBottom", + type: "string", + advanced: true, + enum: [...remValues], + }, + { + name: "paddingLeft", + type: "string", + advanced: true, + enum: [...remValues], + }, + { + name: "paddingRight", + type: "string", + advanced: true, + enum: [...remValues], + }, +]; + const TYPO_KIND: string[] = [ "h1", "h2", @@ -92,214 +185,37 @@ const TYPO_KIND: string[] = [ "form", ]; +[ + { component: Form, name: "Form:Form" }, + { component: FormInput, name: "Form:Input" }, + { component: FormSubmitButton, name: "Form:SubmitButton" }, + { component: Label, name: "Form:Label" }, + { component: FormSelect, name: "Form:Select" }, + { component: TextArea, name: "Form:TextArea" }, + { component: CustomCode, name: "Custom Code" }, + { component: CustomCode, name: "Slot" }, + { component: CustomCode, name: "Video" }, + { component: Embed, name: "Embed" }, +].forEach(({ component, name }) => { + Builder.registerComponent(component, { + ...HIDDEN_FROM_EDITOR_PROPS, + name: name, + }); +}); + Builder.registerComponent(withChildren(Box), { ...DEFAULT_PROPS, name: "Custom Box", + override: true, canHaveChildren: true, inputs: [ + ...DEFAULT_PROPS.inputs, + ...CSS_EDITABLE_INPUTS, { name: "backgroundColor", type: "string", enum: ["bg-base0", "bg-base1"], }, - { - name: "margin", - type: "string", - enum: [ - "0", - "0.25rem", - "0.5rem", - "0.75rem", - "1rem", - "1.25rem", - "1.5rem", - "1.75rem", - "2.00rem", - "2.25rem", - "2.50rem", - "2.75rem", - "3.00rem", - ], - }, - { - name: "marginTop", - type: "string", - advanced: true, - enum: [ - "0", - "0.25rem", - "0.5rem", - "0.75rem", - "1rem", - "1.25rem", - "1.5rem", - "1.75rem", - "2.00rem", - "2.25rem", - "2.50rem", - "2.75rem", - "3.00rem", - ], - }, - { - name: "marginBottom", - type: "string", - advanced: true, - enum: [ - "0", - "0.25rem", - "0.5rem", - "0.75rem", - "1rem", - "1.25rem", - "1.5rem", - "1.75rem", - "2.00rem", - "2.25rem", - "2.50rem", - "2.75rem", - "3.00rem", - ], - }, - { - name: "marginLeft", - type: "string", - advanced: true, - enum: [ - "0", - "0.25rem", - "0.5rem", - "0.75rem", - "1rem", - "1.25rem", - "1.5rem", - "1.75rem", - "2.00rem", - "2.25rem", - "2.50rem", - "2.75rem", - "3.00rem", - ], - }, - { - name: "marginRight", - type: "string", - advanced: true, - enum: [ - "0", - "0.25rem", - "0.5rem", - "0.75rem", - "1rem", - "1.25rem", - "1.5rem", - "1.75rem", - "2.00rem", - "2.25rem", - "2.50rem", - "2.75rem", - "3.00rem", - ], - }, - { - name: "padding", - type: "string", - enum: [ - "0", - "0.25rem", - "0.5rem", - "0.75rem", - "1rem", - "1.25rem", - "1.5rem", - "1.75rem", - "2.00rem", - "2.25rem", - "2.50rem", - "2.75rem", - "3.00rem", - ], - }, - { - name: "paddingTop", - type: "string", - advanced: true, - enum: [ - "0", - "0.25rem", - "0.5rem", - "0.75rem", - "1rem", - "1.25rem", - "1.5rem", - "1.75rem", - "2.00rem", - "2.25rem", - "2.50rem", - "2.75rem", - "3.00rem", - ], - }, - { - name: "paddingBottom", - type: "string", - advanced: true, - enum: [ - "0", - "0.25rem", - "0.5rem", - "0.75rem", - "1rem", - "1.25rem", - "1.5rem", - "1.75rem", - "2.00rem", - "2.25rem", - "2.50rem", - "2.75rem", - "3.00rem", - ], - }, - { - name: "paddingLeft", - type: "string", - advanced: true, - enum: [ - "0", - "0.25rem", - "0.5rem", - "0.75rem", - "1rem", - "1.25rem", - "1.5rem", - "1.75rem", - "2.00rem", - "2.25rem", - "2.50rem", - "2.75rem", - "3.00rem", - ], - }, - { - name: "paddingRight", - type: "string", - advanced: true, - enum: [ - "0", - "0.25rem", - "0.5rem", - "0.75rem", - "1rem", - "1.25rem", - "1.5rem", - "1.75rem", - "2.00rem", - "2.25rem", - "2.50rem", - "2.75rem", - "3.00rem", - ], - }, ], }); @@ -307,11 +223,13 @@ Builder.registerComponent(withChildren(Container), { ...DEFAULT_PROPS, name: "Container", canHaveChildren: true, + inputs: [...DEFAULT_PROPS.inputs, ...CSS_EDITABLE_INPUTS], }); Builder.registerComponent(withChildren(Section), { ...DEFAULT_PROPS, - name: "Section", + name: "Core:Section", + override: true, canHaveChildren: true, inputs: [ { @@ -511,6 +429,67 @@ Builder.registerComponent(withChildren(Button), { ], }); +Builder.registerComponent(withChildren(Button), { + ...DEFAULT_PROPS, + name: "Core:Button", + canHaveChildren: true, + inputs: [ + { + name: "children", + type: "longText", + }, + { + name: "href", + // type: "reference", + type: "string", + }, + { + name: "kind", + type: "string", + }, + { + name: "variant", + type: "string", + }, + { + name: "size", + type: "string", + enum: ["sm", "md", "lg"], + }, + { + name: "color", + type: "string", + }, + { + name: "hover", + type: "boolean", + }, + { + name: "active", + type: "boolean", + }, + { + name: "focus", + type: "boolean", + }, + { + name: "disabled", + type: "boolean", + }, + { + name: "as", + type: "string", + enum: ["button", "a"], + }, + { + name: "target", + type: "string", + enum: ["_self", "_blank"], + defaultValue: "_self", + }, + ], +}); + Builder.registerComponent(TextGradient, { ...DEFAULT_TEXT_PROPS, name: "TextGradient", @@ -741,7 +720,6 @@ Builder.registerComponent(Footer, { { name: "variant", type: "string", - enum: ["primary", "secondary", "tertiary", "textOnly"], }, ], @@ -900,17 +878,17 @@ Builder.registerComponent(Breadcrumb, { { name: "selectedColor", type: "string" }, ], }); - // Overrides default Builder.io image // https://github.com/BuilderIO/builder/blob/4d38bc1e3d2366611230bf52d3f04884785ff587/packages/react/src/blocks/Image.tsx + Builder.registerComponent(Image, { ...DEFAULT_PROPS, - name: "Custom Image", + name: "Image", override: true, + noWrap: true, inputs: [ - ...DEFAULT_PROPS.inputs, { - name: "image", + name: "src", type: "file", bubble: true, allowedFileTypes: ["jpeg", "jpg", "png", "svg"], @@ -919,80 +897,13 @@ Builder.registerComponent(Image, { "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a", }, { - name: "backgroundSize", - type: "text", - defaultValue: "contain", - enum: [ - { - label: "contain", - value: "contain", - helperText: "The image should never get cropped", - }, - { - label: "cover", - value: "cover", - helperText: `The image should fill its box, cropping when needed`, - }, - ], - }, - { - name: "backgroundPosition", - type: "text", - defaultValue: "center", - enum: [ - "center", - "top", - "left", - "right", - "bottom", - "top left", - "top right", - "bottom left", - "bottom right", - ], - }, - { - name: "altText", + name: "alt", type: "string", helperText: "Text to display when the user has images off", }, - { - name: "height", - type: "number", - hideFromUI: true, - }, - { - name: "width", - type: "number", - hideFromUI: true, - }, - { - name: "sizes", - type: "string", - hideFromUI: true, - }, - { - name: "srcset", - type: "string", - hideFromUI: true, - }, - { - name: "lazy", - type: "boolean", - defaultValue: true, - hideFromUI: true, - }, - { - name: "fitContent", - type: "boolean", - helperText: - "When child blocks are provided, fit to them instead of using the image's aspect ratio", - defaultValue: true, - }, + ...DEFAULT_PROPS.inputs, + ...CSS_EDITABLE_INPUTS, ], - defaultStyles: { - position: "relative", - }, }); Builder.registerComponent(Columns, { @@ -1052,20 +963,39 @@ Builder.registerComponent(Columns, { ], }); -[ - { component: Form, name: "Form:Form" }, - { component: FormInput, name: "Form:Input" }, - { component: FormSubmitButton, name: "Form:SubmitButton" }, - { component: Label, name: "Form:Label" }, - { component: FormSelect, name: "Form:Select" }, - { component: TextArea, name: "Form:TextArea" }, - { component: CustomCode, name: "Custom Code" }, - { component: CustomCode, name: "Slot" }, - { component: CustomCode, name: "Slot" }, - { component: CustomCode, name: "Slot" }, -].forEach(({ component, name }) => { - Builder.registerComponent(component, { - ...HIDDEN_FROM_EDITOR_PROPS, - name: name, - }); +Builder.registerComponent(withChildren(CardWithSideImage), { + ...DEFAULT_PROPS, + name: "CardWithSideImage", + canHaveChildren: true, + inputs: [ + ...DEFAULT_PROPS.inputs, + { + name: "imageSrc", + type: "file", + bubble: true, + allowedFileTypes: ["jpeg", "jpg", "png", "svg"], + required: true, + defaultValue: + "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a", + }, + { + name: "ImageAlt", + type: "string", + helperText: "Text to display when the user has images off", + }, + { + name: "imagePosition", + type: "string", + enum: ["left", "right"], + defaultValue: "left", + helperText: "", + }, + { + name: "reverseColumnsWhenStacked", + type: "boolean", + defaultValue: false, + helperText: + "When stacking columns for mobile devices, reverse the ordering", + }, + ], }); diff --git a/src/components/Box/styles.tsx b/src/components/Box/styles.tsx index 9e46e68..5d60aab 100644 --- a/src/components/Box/styles.tsx +++ b/src/components/Box/styles.tsx @@ -1,10 +1,6 @@ import styled, { css } from "styled-components"; -import tw from "twin.macro"; import { BoxProps } from "./types"; -const generateTwClass = (propValue: string) => - propValue ? tw`${propValue}` : ""; - export const StyledBox = styled.div` ${({ theme, @@ -19,9 +15,7 @@ export const StyledBox = styled.div` paddingRight, paddingLeft, }) => { - console.log("Box Props Padding: ", padding); - - const calculatedCss = css` + return css` margin: ${margin}; margin-top: ${marginTop}; margin-bottom: ${marginBottom}; @@ -34,9 +28,5 @@ export const StyledBox = styled.div` padding-left: ${paddingLeft}; position: relative; `; - - console.log("Box Calculated CSS: ", calculatedCss); - - return calculatedCss; }} `; diff --git a/src/components/Box/types.ts b/src/components/Box/types.ts index ce32b0f..9522405 100644 --- a/src/components/Box/types.ts +++ b/src/components/Box/types.ts @@ -1,14 +1,6 @@ -export type BoxProps = { +import { CssEditableProps } from "@/types/CssEditableProps"; + +export type BoxProps = CssEditableProps & { children: React.ReactNode; backgroundColor: string; - margin: string; - marginTop: string; - marginBottom: string; - marginRight: string; - marginLeft: string; - padding: string; - paddingTop: string; - paddingBottom: string; - paddingRight: string; - paddingLeft: string; }; diff --git a/src/components/CardWithSideImage/cmp.tsx b/src/components/CardWithSideImage/cmp.tsx new file mode 100644 index 0000000..77084b0 --- /dev/null +++ b/src/components/CardWithSideImage/cmp.tsx @@ -0,0 +1,53 @@ +"use client"; + +import React from "react"; +import { CardWithSideImageProps } from "./types"; +import { Col, Row } from "@aleph-front/core"; +import Image from "next/image"; + +export const CardWithSideImage = ({ + children, + imageSrc, + imageAlt, + imagePosition, + reverseColumnsWhenStacked, +}: CardWithSideImageProps) => { + const imageCmp = ( + {imageAlt} + ); + + const cardCmp = ( + +
+ {children} +
+ + ); + + return ( + <> + {imagePosition === "left" ? ( + + {reverseColumnsWhenStacked ? ( + {imageCmp} + ) : ( + {imageCmp} + )} + + {cardCmp} + + ) : ( + + {cardCmp} + {reverseColumnsWhenStacked ? ( + {imageCmp} + ) : ( + {imageCmp} + )} + + )} + + ); +}; + +export default CardWithSideImage; diff --git a/src/components/CardWithSideImage/index.tsx b/src/components/CardWithSideImage/index.tsx new file mode 100644 index 0000000..a05ebc5 --- /dev/null +++ b/src/components/CardWithSideImage/index.tsx @@ -0,0 +1 @@ +export { default } from "./cmp"; diff --git a/src/components/CardWithSideImage/types.ts b/src/components/CardWithSideImage/types.ts new file mode 100644 index 0000000..1fcaed7 --- /dev/null +++ b/src/components/CardWithSideImage/types.ts @@ -0,0 +1,7 @@ +export type CardWithSideImageProps = { + children: React.ReactNode; + imageSrc: string; + imageAlt: string; + imagePosition: string; + reverseColumnsWhenStacked: boolean; +}; diff --git a/src/components/Container/styles.tsx b/src/components/Container/styles.tsx index c112aee..1e68779 100644 --- a/src/components/Container/styles.tsx +++ b/src/components/Container/styles.tsx @@ -1,17 +1,36 @@ import styled, { css } from "styled-components"; import tw from "twin.macro"; +import { ContainerProps } from "./types"; -export const StyledContainer = styled.div` - ${({ theme }) => { - const a = css` +export const StyledContainer = styled.div` + ${({ + theme, + margin, + marginTop, + marginBottom, + marginRight, + marginLeft, + padding, + paddingTop, + paddingBottom, + paddingRight, + paddingLeft, + }) => { + return css` ${tw`px-6 md:px-16`} box-sizing: border-box; width: 100%; - margin: 0 auto; max-width: 100rem; + margin: ${margin}; + margin-top: ${marginTop}; + margin-bottom: ${marginBottom}; + margin-right: ${marginRight}; + margin-left: ${marginLeft}; + padding: ${padding}; + padding-top: ${paddingTop}; + padding-bottom: ${paddingBottom}; + padding-right: ${paddingRight}; + padding-left: ${paddingLeft}; `; - - console.log("css", a); - return a; }} `; diff --git a/src/components/Container/types.ts b/src/components/Container/types.ts index e9c937e..0d6c307 100644 --- a/src/components/Container/types.ts +++ b/src/components/Container/types.ts @@ -1,5 +1,7 @@ -import { HTMLAttributes } from 'react' +import { CssEditableProps } from "@/types/CssEditableProps"; +import { HTMLAttributes } from "react"; -export type ContainerProps = HTMLAttributes & { - children: React.ReactNode -} +export type ContainerProps = HTMLAttributes & + CssEditableProps & { + children: React.ReactNode; + }; diff --git a/src/components/Counter/Counter.tsx b/src/components/Counter/Counter.tsx new file mode 100644 index 0000000..e778714 --- /dev/null +++ b/src/components/Counter/Counter.tsx @@ -0,0 +1,33 @@ +"use client"; +import React, { useState } from "react"; +import styles from "./styles.module.css"; + +interface CounterProps { + initialCount?: number; +} + +function Counter({ initialCount = 99 }: CounterProps) { + const [count, setCount] = useState(initialCount); + + const increment = () => { + setCount((prevCount) => prevCount + 1); + }; + + const decrement = () => { + setCount((prevCount) => prevCount - 1); + }; + + return ( +
+ + {count} + +
+ ); +} + +export default Counter; diff --git a/src/components/Counter/styles.module.css b/src/components/Counter/styles.module.css new file mode 100644 index 0000000..03482ca --- /dev/null +++ b/src/components/Counter/styles.module.css @@ -0,0 +1,28 @@ +.counter { + margin: 32px auto; + display: flex; + width: 100%; + max-width: 190px; +} + +.btn { + width: 42px; + font-size: 32px; + font-weight: bold; + background-color: #1c6bd1; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + line-height: 1.4; +} + +.btn:hover { + opacity: 0.8; +} + +.count { + flex: 1; + font-size: 42px; + text-align: center; +} diff --git a/src/components/Image/cmp.tsx b/src/components/Image/cmp.tsx new file mode 100644 index 0000000..26e3155 --- /dev/null +++ b/src/components/Image/cmp.tsx @@ -0,0 +1,11 @@ +"use client"; + +import React from "react"; +import { ImageProps } from "./types"; +import { StyledImage } from "./styles"; + +export const Image = ({ src, alt, ...props }: ImageProps) => { + return ; +}; + +export default Image; diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx new file mode 100644 index 0000000..a05ebc5 --- /dev/null +++ b/src/components/Image/index.tsx @@ -0,0 +1 @@ +export { default } from "./cmp"; diff --git a/src/components/Image/styles.tsx b/src/components/Image/styles.tsx new file mode 100644 index 0000000..aa37292 --- /dev/null +++ b/src/components/Image/styles.tsx @@ -0,0 +1,32 @@ +import styled, { css } from "styled-components"; +import { ImageProps } from "./types"; + +export const StyledImage = styled.img` + ${({ + theme, + margin, + marginTop, + marginBottom, + marginRight, + marginLeft, + padding, + paddingTop, + paddingBottom, + paddingRight, + paddingLeft, + }) => { + return css` + margin: ${margin}; + margin-top: ${marginTop}; + margin-bottom: ${marginBottom}; + margin-right: ${marginRight}; + margin-left: ${marginLeft}; + padding: ${padding}; + padding-top: ${paddingTop}; + padding-bottom: ${paddingBottom}; + padding-right: ${paddingRight}; + padding-left: ${paddingLeft}; + position: relative; + `; + }} +`; diff --git a/src/components/Image/types.ts b/src/components/Image/types.ts new file mode 100644 index 0000000..6277b5c --- /dev/null +++ b/src/components/Image/types.ts @@ -0,0 +1,14 @@ +export type ImageProps = { + src: string; + alt: string; + margin: string; + marginTop: string; + marginBottom: string; + marginRight: string; + marginLeft: string; + padding: string; + paddingTop: string; + paddingBottom: string; + paddingRight: string; + paddingLeft: string; +}; diff --git a/src/components/index.tsx b/src/components/index.tsx index 8c514b4..56f7b83 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -1,4 +1,5 @@ export { default as Box } from "./Box"; +export { default as Image } from "./Image"; export { default as Container } from "./Container"; export { default as TextGradient } from "./TextGradient"; export { default as H1 } from "./H1"; @@ -9,3 +10,4 @@ export { default as Header } from "./Header"; export { default as Footer } from "./Footer"; export { default as SignMeUpForm } from "./SignMeUpForm"; export { default as Breadcrumb } from "./Breadcrumb"; +export { default as CardWithSideImage } from "./CardWithSideImage"; diff --git a/src/pages/[[...page]].tsx b/src/pages/[[...page]].tsx index 3bcfe00..57ff1f2 100644 --- a/src/pages/[[...page]].tsx +++ b/src/pages/[[...page]].tsx @@ -3,12 +3,14 @@ import { builder } from "@builder.io/react"; import { GetStaticProps } from "next"; import DynamicPage from "./_dynamicPage"; +const PAGE_MODEL = "page"; + // Define a function that fetches the Builder // content for a given page export const getStaticProps: GetStaticProps = async ({ params }) => { // Fetch the builder content for the given page const page = await builder - .get("page", { + .get(PAGE_MODEL, { userAttributes: { urlPath: "/" + ((params?.page as string[])?.join("/") || ""), }, @@ -31,18 +33,16 @@ export const getStaticProps: GetStaticProps = async ({ params }) => { // static paths for all pages in Builder export async function getStaticPaths() { // Get a list of all pages in Builder - const pages = await builder.getAll("page", { + const pages = await builder.getAll(PAGE_MODEL, { // We only need the URL field fields: "data.url", options: { noTargeting: true }, }); - console.log(pages - .map((page) => String(page.data?.url))) + console.log(pages.map((page) => String(page.data?.url))); // Generate the static paths for all pages in Builder return { - paths: pages - .map((page) => String(page.data?.url)), + paths: pages.map((page) => String(page.data?.url)), // .filter((url) => url !== "/"), // @note: Needed by output: "export" // fallback: "blocking", @@ -52,6 +52,6 @@ export async function getStaticPaths() { // Define the Page component export default function Page(props: any) { - console.log('SSG PAGE') - return -} \ No newline at end of file + console.log("SSG PAGE"); + return ; +} diff --git a/src/pages/_dynamicPage.tsx b/src/pages/_dynamicPage.tsx index 8e4b6c8..561b014 100644 --- a/src/pages/_dynamicPage.tsx +++ b/src/pages/_dynamicPage.tsx @@ -5,8 +5,15 @@ import { BuilderContent } from "@builder.io/sdk"; import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react"; import "../builder-registry"; import { useRouter } from "next/router"; +import { Header } from "@/components"; +import { Button } from "@aleph-front/core"; -export default function DynamicPage({ page }: { page: BuilderContent | null }) { +type DynamicPageProps = { + pageModel: string; + page: BuilderContent | null; +}; + +export default function DynamicPage({ pageModel, page }: DynamicPageProps) { const router = useRouter(); const isPreviewing = useIsPreviewing(); @@ -52,8 +59,18 @@ export default function DynamicPage({ page }: { page: BuilderContent | null }) { {content?.data?.title} + {content?.data?.header && ( + + )} {/* Render the Builder page */} - + + {content?.data?.footer && ( + + )} ); } diff --git a/src/types/CssEditableProps.tsx b/src/types/CssEditableProps.tsx new file mode 100644 index 0000000..c6a0712 --- /dev/null +++ b/src/types/CssEditableProps.tsx @@ -0,0 +1,12 @@ +export type CssEditableProps = { + margin: string; + marginTop: string; + marginBottom: string; + marginRight: string; + marginLeft: string; + padding: string; + paddingTop: string; + paddingBottom: string; + paddingRight: string; + paddingLeft: string; +}; From 0c34991b6dc0bee05ad2b8bc439bbc21172353bd Mon Sep 17 00:00:00 2001 From: gmolki Date: Thu, 11 Apr 2024 12:52:27 +0200 Subject: [PATCH 09/15] refactor builder component registration --- src/builder-registry.ts | 1019 +---------------- src/components/Box/cmp.builder.tsx | 18 + src/components/Breadcrumb/cmp.builder.tsx | 25 + src/components/BulletList/cmp.builder.tsx | 42 + src/components/Button/cmp.builder.tsx | 64 ++ .../CardWithSideImage/cmp.builder.tsx | 40 + src/components/Column/cmp.builder.tsx | 61 + src/components/Columns/cmp.builder.tsx | 68 ++ src/components/Container/cmp.builder.tsx | 11 + src/components/Counter/Counter.tsx | 33 - src/components/Counter/styles.module.css | 28 - src/components/Footer/cmp.builder.tsx | 183 +++ src/components/H1/cmp.builder.tsx | 21 + src/components/H2/cmp.builder.tsx | 21 + src/components/Header/cmp.builder.tsx | 63 + src/components/Image/cmp.builder.tsx | 28 + src/components/Row/cmp.builder.tsx | 68 ++ src/components/Section/cmp.builder.tsx | 18 + src/components/SignMeUpForm/cmp.builder.tsx | 8 + src/components/Text/cmp.builder.tsx | 9 + src/components/TextGradient/cmp.builder.tsx | 33 + src/components/hiddenFromEditor.builder.tsx | 32 + src/components/index.tsx | 13 - src/constants/builderInputs.tsx | 93 ++ src/constants/builderProps.tsx | 41 + src/constants/enums.tsx | 42 + src/pages/_dynamicPage.tsx | 4 +- 27 files changed, 1010 insertions(+), 1076 deletions(-) create mode 100644 src/components/Box/cmp.builder.tsx create mode 100644 src/components/Breadcrumb/cmp.builder.tsx create mode 100644 src/components/BulletList/cmp.builder.tsx create mode 100644 src/components/Button/cmp.builder.tsx create mode 100644 src/components/CardWithSideImage/cmp.builder.tsx create mode 100644 src/components/Column/cmp.builder.tsx create mode 100644 src/components/Columns/cmp.builder.tsx create mode 100644 src/components/Container/cmp.builder.tsx delete mode 100644 src/components/Counter/Counter.tsx delete mode 100644 src/components/Counter/styles.module.css create mode 100644 src/components/Footer/cmp.builder.tsx create mode 100644 src/components/H1/cmp.builder.tsx create mode 100644 src/components/H2/cmp.builder.tsx create mode 100644 src/components/Header/cmp.builder.tsx create mode 100644 src/components/Image/cmp.builder.tsx create mode 100644 src/components/Row/cmp.builder.tsx create mode 100644 src/components/Section/cmp.builder.tsx create mode 100644 src/components/SignMeUpForm/cmp.builder.tsx create mode 100644 src/components/Text/cmp.builder.tsx create mode 100644 src/components/TextGradient/cmp.builder.tsx create mode 100644 src/components/hiddenFromEditor.builder.tsx delete mode 100644 src/components/index.tsx create mode 100644 src/constants/builderInputs.tsx create mode 100644 src/constants/builderProps.tsx create mode 100644 src/constants/enums.tsx diff --git a/src/builder-registry.ts b/src/builder-registry.ts index 5159a78..c709f0c 100644 --- a/src/builder-registry.ts +++ b/src/builder-registry.ts @@ -1,1001 +1,22 @@ -import { - builder, - Builder, - Columns, - CustomCode, - Embed, - Form, - FormInput, - FormSelect, - FormSubmitButton, - Label, - TextArea, - withChildren, -} from "@builder.io/react"; -import { BulletList, Button, Col, Row } from "@aleph-front/core"; -import { - Container, - TextGradient, - H1, - H2, - Section, - Text, - Box, - Image, - Header, - Footer, - SignMeUpForm, - Breadcrumb, - CardWithSideImage, -} from "./components"; +import { builder } from "@builder.io/react"; + +import "./components/hiddenFromEditor.builder"; +import "./components/Box/cmp.builder"; +import "./components/Container/cmp.builder"; +import "./components/Section/cmp.builder"; +import "./components/Column/cmp.builder"; +import "./components/Row/cmp.builder"; +import "./components/Button/cmp.builder"; +import "./components/Text/cmp.builder"; +import "./components/H1/cmp.builder"; +import "./components/H2/cmp.builder"; +import "./components/BulletList/cmp.builder"; +import "./components/Header/cmp.builder"; +import "./components/Footer/cmp.builder"; +import "./components/SignMeUpForm/cmp.builder"; +import "./components/Breadcrumb/cmp.builder"; +import "./components/Image/cmp.builder"; +import "./components/Columns/cmp.builder"; +import "./components/CardWithSideImage/cmp.builder"; builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!); - -const HIDDEN_FROM_EDITOR_PROPS = { - override: true, - hideFromInsertMenu: true, -}; - -const DEFAULT_PROPS = { - inputs: [], - defaultStyles: {}, -}; - -const DEFAULT_TEXT_PROPS = { - ...DEFAULT_PROPS, - inputs: [ - ...DEFAULT_PROPS.inputs, - { - name: "children", - friendlyName: "Text content", - helperText: "Shift+Enter for line break", - type: "longText", - }, - { - name: "textType", - type: "string", - enum: ["", "text-main0", "text-base2"], - }, - { - name: "tp", - type: "string", - enum: ["", "tp-info", "tp-header", "tp-h2", "tp-h4", "tp-h7"], - }, - { - name: "fs", - type: "string", - enum: ["", "fs-10", "fs-18", "fs-26", "fs-28"], - }, - ], - defaultStyles: { - whiteSpace: "pre-wrap", - }, -}; - -const remValues = [ - "auto", - "0", - "0.25rem", - "0.5rem", - "0.75rem", - "1rem", - "1.25rem", - "1.5rem", - "1.75rem", - "2.00rem", - "2.25rem", - "2.50rem", - "2.75rem", - "3.00rem", - "3.25rem", - "3.50rem", - "3.75rem", - "4.00rem", - "4.25rem", - "4.50rem", - "4.75rem", - "5.00rem", - "5.25rem", - "5.50rem", - "5.75rem", - "6.00rem", -]; - -const CSS_EDITABLE_INPUTS = [ - { - name: "margin", - type: "string", - defaultValue: "auto", - enum: [...remValues], - }, - { - name: "marginTop", - type: "string", - advanced: true, - enum: [...remValues], - }, - { - name: "marginBottom", - type: "string", - advanced: true, - enum: [...remValues], - }, - { - name: "marginLeft", - type: "string", - advanced: true, - enum: [...remValues], - }, - { - name: "marginRight", - type: "string", - advanced: true, - enum: [...remValues], - }, - { - name: "padding", - type: "string", - enum: [...remValues], - }, - { - name: "paddingTop", - type: "string", - advanced: true, - enum: [...remValues], - }, - { - name: "paddingBottom", - type: "string", - advanced: true, - enum: [...remValues], - }, - { - name: "paddingLeft", - type: "string", - advanced: true, - enum: [...remValues], - }, - { - name: "paddingRight", - type: "string", - advanced: true, - enum: [...remValues], - }, -]; - -const TYPO_KIND: string[] = [ - "h1", - "h2", - "h3", - "h4", - "h5", - "h6", - "h7", - "header", - "logo", - "nav", - "info", - "body", - "body1", - "body2", - "body3", - "code", - "code1", - "table", - "form", -]; - -[ - { component: Form, name: "Form:Form" }, - { component: FormInput, name: "Form:Input" }, - { component: FormSubmitButton, name: "Form:SubmitButton" }, - { component: Label, name: "Form:Label" }, - { component: FormSelect, name: "Form:Select" }, - { component: TextArea, name: "Form:TextArea" }, - { component: CustomCode, name: "Custom Code" }, - { component: CustomCode, name: "Slot" }, - { component: CustomCode, name: "Video" }, - { component: Embed, name: "Embed" }, -].forEach(({ component, name }) => { - Builder.registerComponent(component, { - ...HIDDEN_FROM_EDITOR_PROPS, - name: name, - }); -}); - -Builder.registerComponent(withChildren(Box), { - ...DEFAULT_PROPS, - name: "Custom Box", - override: true, - canHaveChildren: true, - inputs: [ - ...DEFAULT_PROPS.inputs, - ...CSS_EDITABLE_INPUTS, - { - name: "backgroundColor", - type: "string", - enum: ["bg-base0", "bg-base1"], - }, - ], -}); - -Builder.registerComponent(withChildren(Container), { - ...DEFAULT_PROPS, - name: "Container", - canHaveChildren: true, - inputs: [...DEFAULT_PROPS.inputs, ...CSS_EDITABLE_INPUTS], -}); - -Builder.registerComponent(withChildren(Section), { - ...DEFAULT_PROPS, - name: "Core:Section", - override: true, - canHaveChildren: true, - inputs: [ - { - name: "effects", - type: "string", - enum: ["", "fx-grain-1", "fx-grain-2"], - }, - ], -}); - -Builder.registerComponent(withChildren(Col), { - ...DEFAULT_PROPS, - name: "Column", - canHaveChildren: true, - inputs: [ - { - name: "span", - type: "number", - }, - { - name: "xs", - type: "number", - }, - { - name: "sm", - type: "number", - }, - { - name: "md", - type: "number", - }, - { - name: "lg", - type: "number", - }, - { - name: "xl", - type: "number", - }, - { - name: "2xl", - type: "number", - }, - { - name: "offset", - type: "number", - }, - { - name: "xsOffset", - type: "number", - }, - { - name: "smOffset", - type: "number", - }, - { - name: "mdOffset", - type: "number", - }, - { - name: "lgOffset", - type: "number", - }, - { - name: "xlOffset", - type: "number", - }, - { - name: "2xlOffset", - type: "number", - }, - ], -}); - -Builder.registerComponent(withChildren(Row), { - ...DEFAULT_PROPS, - name: "Row", - canHaveChildren: true, - inputs: [ - { - name: "count", - type: "number", - }, - { - name: "xs", - type: "number", - }, - { - name: "sm", - type: "number", - }, - { - name: "md", - type: "number", - }, - { - name: "lg", - type: "number", - }, - { - name: "xl", - type: "number", - }, - { - name: "2xl", - type: "number", - }, - { - name: "gap", - type: "string", - }, - { - name: "xsGap", - type: "number", - }, - { - name: "smGap", - type: "number", - }, - { - name: "mdGap", - type: "number", - }, - { - name: "lgGap", - type: "number", - }, - { - name: "xlGap", - type: "number", - }, - { - name: "2xlGap", - type: "number", - }, - ], -}); - -Builder.registerComponent(withChildren(Button), { - ...DEFAULT_PROPS, - name: "Button", - canHaveChildren: true, - inputs: [ - { - name: "children", - type: "longText", - }, - { - name: "href", - // type: "reference", - type: "string", - }, - { - name: "kind", - type: "string", - }, - { - name: "variant", - type: "string", - }, - { - name: "size", - type: "string", - enum: ["sm", "md", "lg"], - }, - { - name: "color", - type: "string", - }, - { - name: "hover", - type: "boolean", - }, - { - name: "active", - type: "boolean", - }, - { - name: "focus", - type: "boolean", - }, - { - name: "disabled", - type: "boolean", - }, - { - name: "as", - type: "string", - enum: ["button", "a"], - }, - { - name: "target", - type: "string", - enum: ["_self", "_blank"], - defaultValue: "_self", - }, - ], -}); - -Builder.registerComponent(withChildren(Button), { - ...DEFAULT_PROPS, - name: "Core:Button", - canHaveChildren: true, - inputs: [ - { - name: "children", - type: "longText", - }, - { - name: "href", - // type: "reference", - type: "string", - }, - { - name: "kind", - type: "string", - }, - { - name: "variant", - type: "string", - }, - { - name: "size", - type: "string", - enum: ["sm", "md", "lg"], - }, - { - name: "color", - type: "string", - }, - { - name: "hover", - type: "boolean", - }, - { - name: "active", - type: "boolean", - }, - { - name: "focus", - type: "boolean", - }, - { - name: "disabled", - type: "boolean", - }, - { - name: "as", - type: "string", - enum: ["button", "a"], - }, - { - name: "target", - type: "string", - enum: ["_self", "_blank"], - defaultValue: "_self", - }, - ], -}); - -Builder.registerComponent(TextGradient, { - ...DEFAULT_TEXT_PROPS, - name: "TextGradient", - inputs: [ - ...DEFAULT_TEXT_PROPS.inputs, - { - name: "color", - type: "string", - enum: [ - "white", - "black", - "translucid", - "base0", - "base1", - "base2", - "main0", - "main1", - "info", - "success", - "warning", - "error", - "disabled", - "disabled2", - "background", - "contentBackground", - "foreground", - "text", - ], - defaultValue: "text", - helperText: "Select the gradient color for the text.", - }, - { - name: "type", - type: "string", - enum: ["h1", "h2"], - defaultValue: "h1", - }, - { - name: "as", - type: "string", - enum: ["h1"], - }, - { - name: "size", - type: "number", - }, - ], -}); - -Builder.registerComponent(Text, { - ...DEFAULT_TEXT_PROPS, - name: "Custom Text", - inputs: [...DEFAULT_TEXT_PROPS.inputs], -}); - -Builder.registerComponent(H1, { - ...DEFAULT_TEXT_PROPS, - name: "H1", - inputs: [ - ...DEFAULT_TEXT_PROPS.inputs, - { - name: "color", - type: "string", - }, - { - name: "type", - type: "string", - enum: TYPO_KIND, - }, - ], -}); - -Builder.registerComponent(H2, { - ...DEFAULT_TEXT_PROPS, - name: "H2", - inputs: [ - ...DEFAULT_TEXT_PROPS.inputs, - { - name: "color", - type: "string", - }, - { - name: "type", - type: "string", - enum: TYPO_KIND, - }, - ], -}); - -Builder.registerComponent(BulletList, { - ...DEFAULT_PROPS, - name: "Bullet list", - inputs: [ - { - name: "size", - type: "string", - enum: ["regular", "big"], - }, - { - name: "items", - type: "list", - defaultValue: [ - { - kind: "info", - title: "Indexing", - text: "Open-source, multi-chain indexing blockchain data.", - }, - ], - subFields: [ - { - name: "title", - type: "string", - }, - { - name: "text", - type: "longText", - }, - { - name: "kind", - type: "string", - enum: ["info", "success", "warning", "error"], - }, - ], - }, - ], -}); - -Builder.registerComponent(withChildren(Header), { - ...DEFAULT_PROPS, - name: "Header", - canHaveChildren: true, - noWrap: true, - inputs: [ - { - name: "routes", - type: "list", - defaultValue: [ - { - name: "Developers", - href: "https://docs.aleph.im/", - target: "_blank", - external: true, - }, - { - name: "Solutions", - href: "/", - exact: true, - }, - ], - subFields: [ - { - name: "name", - type: "string", - }, - { - name: "href", - type: "string", - }, - { - name: "external", - type: "boolean", - defaultValue: false, - }, - { - name: "target", - type: "string", - enum: ["_self", "_blank"], - defaultValue: "_self", - }, - { - name: "exact", - type: "boolean", - defaultValue: false, - }, - ], - }, - { - name: "breakpoint", - type: "string", - enum: ["xs", "sm", "md", "lg", "xl", "2xl"], - defaultValue: "md", - }, - ], -}); - -Builder.registerComponent(Footer, { - ...DEFAULT_PROPS, - name: "Footer", - inputs: [ - { - name: "buttons", - type: "list", - required: true, - defaultValue: [ - { - label: "Join the collective", - href: "/collective", - props: { - variant: "primary", - }, - }, - { - label: "Start a project", - href: "https://docs.aleph.im/computing/", - target: "_blank", - }, - ], - subFields: [ - { - name: "label", - type: "string", - }, - { - name: "href", - type: "string", - }, - { - name: "target", - type: "string", - enum: ["_self", "_blank"], - defaultValue: "_self", - }, - { - name: "props", - type: "object", - defaultValue: {}, - subFields: [ - { - name: "variant", - type: "string", - enum: ["primary", "secondary", "tertiary", "textOnly"], - }, - ], - }, - ], - }, - { - name: "media", - type: "list", - required: true, - defaultValue: [ - { - name: "x", - icon: "x", - label: "Follow us", - href: "https://twitter.com/TwentySixCloud", - target: "_blank", - small: true, - }, - ], - subFields: [ - { - name: "name", - type: "string", - }, - { - name: "icon", - type: "string", - enum: ["x", "telegram", "medium"], - }, - { - name: "label", - type: "string", - }, - { - name: "href", - type: "string", - }, - { - name: "target", - type: "string", - enum: ["_self", "_blank"], - defaultValue: "_self", - }, - { - name: "small", - type: "boolean", - }, - ], - }, - { - name: "mainLinks", - type: "list", - required: true, - defaultValue: [ - { - label: "Documentation", - href: "https://docs.aleph.im", - target: "_blank", - }, - ], - subFields: [ - { - name: "label", - type: "string", - }, - { - name: "href", - type: "string", - }, - { - name: "target", - type: "string", - enum: ["_self", "_blank"], - defaultValue: "_self", - }, - ], - }, - { - name: "links", - type: "list", - required: true, - defaultValue: [ - { - title: "Solutions", - links: [ - { - label: "Computing", - href: "https://console.twentysix.cloud/computing/function/new/", - target: "_blank", - }, - ], - }, - { - title: "Developers", - links: [ - { - label: "Documentation", - href: "https://docs.aleph.im", - target: "_blank", - }, - ], - }, - ], - subFields: [ - { - name: "title", - type: "string", - }, - { - name: "links", - type: "list", - subFields: [ - { - name: "label", - type: "string", - }, - { - name: "href", - type: "string", - }, - { - name: "target", - type: "string", - enum: ["_self", "_blank"], - defaultValue: "_self", - }, - ], - }, - ], - }, - ], -}); - -Builder.registerComponent(SignMeUpForm, { - ...DEFAULT_PROPS, - name: "Sign Me Up Form", -}); - -Builder.registerComponent(Breadcrumb, { - name: "Breadcrumb", - inputs: [ - { - name: "navLinks", - type: "list", - subFields: [ - { name: "href", type: "string" }, - { name: "label", type: "string" }, - ], - defaultValue: [ - { href: "/", label: "Home" }, - { href: "/use-cases", label: "Use cases" }, - ], - }, - { name: "selected", type: "number" }, - { name: "selectedColor", type: "string" }, - ], -}); -// Overrides default Builder.io image -// https://github.com/BuilderIO/builder/blob/4d38bc1e3d2366611230bf52d3f04884785ff587/packages/react/src/blocks/Image.tsx - -Builder.registerComponent(Image, { - ...DEFAULT_PROPS, - name: "Image", - override: true, - noWrap: true, - inputs: [ - { - name: "src", - type: "file", - bubble: true, - allowedFileTypes: ["jpeg", "jpg", "png", "svg"], - required: true, - defaultValue: - "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a", - }, - { - name: "alt", - type: "string", - helperText: "Text to display when the user has images off", - }, - ...DEFAULT_PROPS.inputs, - ...CSS_EDITABLE_INPUTS, - ], -}); - -Builder.registerComponent(Columns, { - ...DEFAULT_PROPS, - name: "Columns", - override: true, - inputs: [ - { - name: "columns", - type: "array", - broadcast: true, - subFields: [ - { - name: "blocks", - type: "array", - hideFromUI: true, - defaultValue: 2, - }, - { - name: "width", - type: "number", - hideFromUI: true, - helperText: "Width %, e.g. set to 50 to fill half of the space", - }, - { - name: "link", - type: "url", - helperText: - "Optionally set a url that clicking this column will link to", - }, - ], - defaultValue: [{ blocks: 2 }, { blocks: 2 }], - }, - { - name: "space", - type: "number", - defaultValue: 14, - helperText: "Size of gap between columns", - advanced: true, - }, - { - name: "stackColumnsAt", - type: "string", - defaultValue: "tablet", - helperText: "Convert horizontal columns to vertical at what device size", - enum: ["tablet", "mobile", "never"], - advanced: true, - }, - { - name: "reverseColumnsWhenStacked", - type: "boolean", - defaultValue: false, - helperText: - "When stacking columns for mobile devices, reverse the ordering", - advanced: true, - }, - ], -}); - -Builder.registerComponent(withChildren(CardWithSideImage), { - ...DEFAULT_PROPS, - name: "CardWithSideImage", - canHaveChildren: true, - inputs: [ - ...DEFAULT_PROPS.inputs, - { - name: "imageSrc", - type: "file", - bubble: true, - allowedFileTypes: ["jpeg", "jpg", "png", "svg"], - required: true, - defaultValue: - "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a", - }, - { - name: "ImageAlt", - type: "string", - helperText: "Text to display when the user has images off", - }, - { - name: "imagePosition", - type: "string", - enum: ["left", "right"], - defaultValue: "left", - helperText: "", - }, - { - name: "reverseColumnsWhenStacked", - type: "boolean", - defaultValue: false, - helperText: - "When stacking columns for mobile devices, reverse the ordering", - }, - ], -}); diff --git a/src/components/Box/cmp.builder.tsx b/src/components/Box/cmp.builder.tsx new file mode 100644 index 0000000..720ba0e --- /dev/null +++ b/src/components/Box/cmp.builder.tsx @@ -0,0 +1,18 @@ +import { Builder, withChildren } from "@builder.io/react"; +import { DEFAULT_PROPS } from "@/constants/builderProps"; +import { CSS_EDITABLE_INPUTS } from "@/constants/builderInputs"; +import Box from "."; + +Builder.registerComponent(withChildren(Box), { + ...DEFAULT_PROPS, + name: "Custom Box", + canHaveChildren: true, + inputs: [ + ...CSS_EDITABLE_INPUTS, + { + name: "backgroundColor", + type: "string", + enum: ["bg-base0", "bg-base1"], + }, + ], +}); diff --git a/src/components/Breadcrumb/cmp.builder.tsx b/src/components/Breadcrumb/cmp.builder.tsx new file mode 100644 index 0000000..ba3789b --- /dev/null +++ b/src/components/Breadcrumb/cmp.builder.tsx @@ -0,0 +1,25 @@ +import { Builder } from "@builder.io/react"; +import { DEFAULT_PROPS } from "@/constants/builderProps"; +import Breadcrumb from "."; + +Builder.registerComponent(Breadcrumb, { + ...DEFAULT_PROPS, + name: "Breadcrumb", + inputs: [ + ...DEFAULT_PROPS.inputs, + { + name: "navLinks", + type: "list", + subFields: [ + { name: "href", type: "string" }, + { name: "label", type: "string" }, + ], + defaultValue: [ + { href: "/", label: "Home" }, + { href: "/use-cases", label: "Use cases" }, + ], + }, + { name: "selected", type: "number" }, + { name: "selectedColor", type: "string" }, + ], +}); diff --git a/src/components/BulletList/cmp.builder.tsx b/src/components/BulletList/cmp.builder.tsx new file mode 100644 index 0000000..2483a8d --- /dev/null +++ b/src/components/BulletList/cmp.builder.tsx @@ -0,0 +1,42 @@ +import { Builder } from "@builder.io/react"; +import { DEFAULT_PROPS } from "@/constants/builderProps"; +import { BulletList } from "@aleph-front/core"; + +Builder.registerComponent(BulletList, { + ...DEFAULT_PROPS, + name: "Bullet list", + inputs: [ + ...DEFAULT_PROPS.inputs, + { + name: "size", + type: "string", + enum: ["regular", "big"], + }, + { + name: "items", + type: "list", + defaultValue: [ + { + kind: "info", + title: "Indexing", + text: "Open-source, multi-chain indexing blockchain data.", + }, + ], + subFields: [ + { + name: "title", + type: "string", + }, + { + name: "text", + type: "longText", + }, + { + name: "kind", + type: "string", + enum: ["info", "success", "warning", "error"], + }, + ], + }, + ], +}); diff --git a/src/components/Button/cmp.builder.tsx b/src/components/Button/cmp.builder.tsx new file mode 100644 index 0000000..27667a4 --- /dev/null +++ b/src/components/Button/cmp.builder.tsx @@ -0,0 +1,64 @@ +import { Builder, withChildren } from "@builder.io/react"; +import { DEFAULT_PROPS } from "@/constants/builderProps"; +import { Button } from "@aleph-front/core"; + +Builder.registerComponent(withChildren(Button), { + ...DEFAULT_PROPS, + name: "Button", + canHaveChildren: true, + inputs: [ + ...DEFAULT_PROPS.inputs, + { + name: "children", + type: "longText", + }, + { + name: "href", + type: "string", + }, + { + name: "kind", + type: "string", + }, + { + name: "variant", + type: "string", + }, + { + name: "size", + type: "string", + enum: ["sm", "md", "lg"], + }, + { + name: "color", + type: "string", + }, + { + name: "hover", + type: "boolean", + }, + { + name: "active", + type: "boolean", + }, + { + name: "focus", + type: "boolean", + }, + { + name: "disabled", + type: "boolean", + }, + { + name: "as", + type: "string", + enum: ["button", "a"], + }, + { + name: "target", + type: "string", + enum: ["_self", "_blank"], + defaultValue: "_self", + }, + ], +}); diff --git a/src/components/CardWithSideImage/cmp.builder.tsx b/src/components/CardWithSideImage/cmp.builder.tsx new file mode 100644 index 0000000..a750d2a --- /dev/null +++ b/src/components/CardWithSideImage/cmp.builder.tsx @@ -0,0 +1,40 @@ +import { Builder, withChildren } from "@builder.io/react"; +import { DEFAULT_PROPS } from "@/constants/builderProps"; +import CardWithSideImage from "."; + +Builder.registerComponent(withChildren(CardWithSideImage), { + ...DEFAULT_PROPS, + name: "CardWithSideImage", + canHaveChildren: true, + inputs: [ + ...DEFAULT_PROPS.inputs, + { + name: "imageSrc", + type: "file", + bubble: true, + allowedFileTypes: ["jpeg", "jpg", "png", "svg"], + required: true, + defaultValue: + "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a", + }, + { + name: "ImageAlt", + type: "string", + helperText: "Text to display when the user has images off", + }, + { + name: "imagePosition", + type: "string", + enum: ["left", "right"], + defaultValue: "left", + helperText: "", + }, + { + name: "reverseColumnsWhenStacked", + type: "boolean", + defaultValue: false, + helperText: + "When stacking columns for mobile devices, reverse the ordering", + }, + ], +}); diff --git a/src/components/Column/cmp.builder.tsx b/src/components/Column/cmp.builder.tsx new file mode 100644 index 0000000..8a405ff --- /dev/null +++ b/src/components/Column/cmp.builder.tsx @@ -0,0 +1,61 @@ +import { Builder, Columns } from "@builder.io/react"; +import { DEFAULT_PROPS } from "@/constants/builderProps"; + +Builder.registerComponent(Columns, { + ...DEFAULT_PROPS, + name: "Columns", + canHaveChildren: true, + override: true, + inputs: [ + ...DEFAULT_PROPS.inputs, + { + name: "columns", + type: "array", + broadcast: true, + subFields: [ + { + name: "blocks", + type: "array", + hideFromUI: true, + defaultValue: 2, + }, + { + name: "width", + type: "number", + hideFromUI: true, + helperText: "Width %, e.g. set to 50 to fill half of the space", + }, + { + name: "link", + type: "url", + helperText: + "Optionally set a url that clicking this column will link to", + }, + ], + defaultValue: [{ blocks: 2 }, { blocks: 2 }], + }, + { + name: "space", + type: "number", + defaultValue: 14, + helperText: "Size of gap between columns", + advanced: true, + }, + { + name: "stackColumnsAt", + type: "string", + defaultValue: "tablet", + helperText: "Convert horizontal columns to vertical at what device size", + enum: ["tablet", "mobile", "never"], + advanced: true, + }, + { + name: "reverseColumnsWhenStacked", + type: "boolean", + defaultValue: false, + helperText: + "When stacking columns for mobile devices, reverse the ordering", + advanced: true, + }, + ], +}); diff --git a/src/components/Columns/cmp.builder.tsx b/src/components/Columns/cmp.builder.tsx new file mode 100644 index 0000000..aa143c5 --- /dev/null +++ b/src/components/Columns/cmp.builder.tsx @@ -0,0 +1,68 @@ +import { Builder, withChildren } from "@builder.io/react"; +import { DEFAULT_PROPS } from "@/constants/builderProps"; +import { Col } from "@aleph-front/core"; + +Builder.registerComponent(withChildren(Col), { + ...DEFAULT_PROPS, + name: "Column", + canHaveChildren: true, + inputs: [ + ...DEFAULT_PROPS.inputs, + { + name: "span", + type: "number", + }, + { + name: "xs", + type: "number", + }, + { + name: "sm", + type: "number", + }, + { + name: "md", + type: "number", + }, + { + name: "lg", + type: "number", + }, + { + name: "xl", + type: "number", + }, + { + name: "2xl", + type: "number", + }, + { + name: "offset", + type: "number", + }, + { + name: "xsOffset", + type: "number", + }, + { + name: "smOffset", + type: "number", + }, + { + name: "mdOffset", + type: "number", + }, + { + name: "lgOffset", + type: "number", + }, + { + name: "xlOffset", + type: "number", + }, + { + name: "2xlOffset", + type: "number", + }, + ], +}); diff --git a/src/components/Container/cmp.builder.tsx b/src/components/Container/cmp.builder.tsx new file mode 100644 index 0000000..507ed83 --- /dev/null +++ b/src/components/Container/cmp.builder.tsx @@ -0,0 +1,11 @@ +import { Builder, withChildren } from "@builder.io/react"; +import { DEFAULT_PROPS } from "@/constants/builderProps"; +import { CSS_EDITABLE_INPUTS } from "@/constants/builderInputs"; +import Container from "."; + +Builder.registerComponent(withChildren(Container), { + ...DEFAULT_PROPS, + name: "Container", + canHaveChildren: true, + inputs: [...CSS_EDITABLE_INPUTS], +}); diff --git a/src/components/Counter/Counter.tsx b/src/components/Counter/Counter.tsx deleted file mode 100644 index e778714..0000000 --- a/src/components/Counter/Counter.tsx +++ /dev/null @@ -1,33 +0,0 @@ -"use client"; -import React, { useState } from "react"; -import styles from "./styles.module.css"; - -interface CounterProps { - initialCount?: number; -} - -function Counter({ initialCount = 99 }: CounterProps) { - const [count, setCount] = useState(initialCount); - - const increment = () => { - setCount((prevCount) => prevCount + 1); - }; - - const decrement = () => { - setCount((prevCount) => prevCount - 1); - }; - - return ( -
- - {count} - -
- ); -} - -export default Counter; diff --git a/src/components/Counter/styles.module.css b/src/components/Counter/styles.module.css deleted file mode 100644 index 03482ca..0000000 --- a/src/components/Counter/styles.module.css +++ /dev/null @@ -1,28 +0,0 @@ -.counter { - margin: 32px auto; - display: flex; - width: 100%; - max-width: 190px; -} - -.btn { - width: 42px; - font-size: 32px; - font-weight: bold; - background-color: #1c6bd1; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - line-height: 1.4; -} - -.btn:hover { - opacity: 0.8; -} - -.count { - flex: 1; - font-size: 42px; - text-align: center; -} diff --git a/src/components/Footer/cmp.builder.tsx b/src/components/Footer/cmp.builder.tsx new file mode 100644 index 0000000..47c7d06 --- /dev/null +++ b/src/components/Footer/cmp.builder.tsx @@ -0,0 +1,183 @@ +import { Builder } from "@builder.io/react"; +import { DEFAULT_PROPS } from "@/constants/builderProps"; +import Footer from "."; + +Builder.registerComponent(Footer, { + ...DEFAULT_PROPS, + name: "Footer", + inputs: [ + ...DEFAULT_PROPS.inputs, + { + name: "buttons", + type: "list", + required: true, + defaultValue: [ + { + label: "Join the collective", + href: "/collective", + props: { + variant: "primary", + }, + }, + { + label: "Start a project", + href: "https://docs.aleph.im/computing/", + target: "_blank", + }, + ], + subFields: [ + { + name: "label", + type: "string", + }, + { + name: "href", + type: "string", + }, + { + name: "target", + type: "string", + enum: ["_self", "_blank"], + defaultValue: "_self", + }, + { + name: "props", + type: "object", + defaultValue: {}, + subFields: [ + { + name: "variant", + type: "string", + enum: ["primary", "secondary", "tertiary", "textOnly"], + }, + ], + }, + ], + }, + { + name: "media", + type: "list", + required: true, + defaultValue: [ + { + name: "x", + icon: "x", + label: "Follow us", + href: "https://twitter.com/TwentySixCloud", + target: "_blank", + small: true, + }, + ], + subFields: [ + { + name: "name", + type: "string", + }, + { + name: "icon", + type: "string", + enum: ["x", "telegram", "medium"], + }, + { + name: "label", + type: "string", + }, + { + name: "href", + type: "string", + }, + { + name: "target", + type: "string", + enum: ["_self", "_blank"], + defaultValue: "_self", + }, + { + name: "small", + type: "boolean", + }, + ], + }, + { + name: "mainLinks", + type: "list", + required: true, + defaultValue: [ + { + label: "Documentation", + href: "https://docs.aleph.im", + target: "_blank", + }, + ], + subFields: [ + { + name: "label", + type: "string", + }, + { + name: "href", + type: "string", + }, + { + name: "target", + type: "string", + enum: ["_self", "_blank"], + defaultValue: "_self", + }, + ], + }, + { + name: "links", + type: "list", + required: true, + defaultValue: [ + { + title: "Solutions", + links: [ + { + label: "Computing", + href: "https://console.twentysix.cloud/computing/function/new/", + target: "_blank", + }, + ], + }, + { + title: "Developers", + links: [ + { + label: "Documentation", + href: "https://docs.aleph.im", + target: "_blank", + }, + ], + }, + ], + subFields: [ + { + name: "title", + type: "string", + }, + { + name: "links", + type: "list", + subFields: [ + { + name: "label", + type: "string", + }, + { + name: "href", + type: "string", + }, + { + name: "target", + type: "string", + enum: ["_self", "_blank"], + defaultValue: "_self", + }, + ], + }, + ], + }, + ], +}); diff --git a/src/components/H1/cmp.builder.tsx b/src/components/H1/cmp.builder.tsx new file mode 100644 index 0000000..76b5129 --- /dev/null +++ b/src/components/H1/cmp.builder.tsx @@ -0,0 +1,21 @@ +import { Builder } from "@builder.io/react"; +import { DEFAULT_TEXT_PROPS } from "@/constants/builderProps"; +import H1 from "."; +import { TYPO_KIND } from "@/constants/enums"; + +Builder.registerComponent(H1, { + ...DEFAULT_TEXT_PROPS, + name: "H1", + inputs: [ + ...DEFAULT_TEXT_PROPS.inputs, + { + name: "color", + type: "string", + }, + { + name: "type", + type: "string", + enum: TYPO_KIND, + }, + ], +}); diff --git a/src/components/H2/cmp.builder.tsx b/src/components/H2/cmp.builder.tsx new file mode 100644 index 0000000..9ac6c0f --- /dev/null +++ b/src/components/H2/cmp.builder.tsx @@ -0,0 +1,21 @@ +import { Builder } from "@builder.io/react"; +import { DEFAULT_TEXT_PROPS } from "@/constants/builderProps"; +import { TYPO_KIND } from "@/constants/enums"; +import H2 from "."; + +Builder.registerComponent(H2, { + ...DEFAULT_TEXT_PROPS, + name: "H2", + inputs: [ + ...DEFAULT_TEXT_PROPS.inputs, + { + name: "color", + type: "string", + }, + { + name: "type", + type: "string", + enum: TYPO_KIND, + }, + ], +}); diff --git a/src/components/Header/cmp.builder.tsx b/src/components/Header/cmp.builder.tsx new file mode 100644 index 0000000..f987718 --- /dev/null +++ b/src/components/Header/cmp.builder.tsx @@ -0,0 +1,63 @@ +import { Builder, withChildren } from "@builder.io/react"; +import { DEFAULT_PROPS } from "@/constants/builderProps"; +import TextGradient from "."; +import Header from "."; + +Builder.registerComponent(withChildren(Header), { + ...DEFAULT_PROPS, + name: "Header", + canHaveChildren: true, + noWrap: true, + inputs: [ + ...DEFAULT_PROPS.inputs, + { + name: "routes", + type: "list", + defaultValue: [ + { + name: "Developers", + href: "https://docs.aleph.im/", + target: "_blank", + external: true, + }, + { + name: "Solutions", + href: "/", + exact: true, + }, + ], + subFields: [ + { + name: "name", + type: "string", + }, + { + name: "href", + type: "string", + }, + { + name: "external", + type: "boolean", + defaultValue: false, + }, + { + name: "target", + type: "string", + enum: ["_self", "_blank"], + defaultValue: "_self", + }, + { + name: "exact", + type: "boolean", + defaultValue: false, + }, + ], + }, + { + name: "breakpoint", + type: "string", + enum: ["xs", "sm", "md", "lg", "xl", "2xl"], + defaultValue: "md", + }, + ], +}); diff --git a/src/components/Image/cmp.builder.tsx b/src/components/Image/cmp.builder.tsx new file mode 100644 index 0000000..309bbe6 --- /dev/null +++ b/src/components/Image/cmp.builder.tsx @@ -0,0 +1,28 @@ +import { Builder } from "@builder.io/react"; +import { DEFAULT_PROPS } from "@/constants/builderProps"; +import { CSS_EDITABLE_INPUTS } from "@/constants/builderInputs"; +import Image from "."; + +Builder.registerComponent(Image, { + ...DEFAULT_PROPS, + name: "Image", + override: true, + noWrap: true, + inputs: [ + { + name: "src", + type: "file", + bubble: true, + allowedFileTypes: ["jpeg", "jpg", "png", "svg"], + required: true, + defaultValue: + "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a", + }, + { + name: "alt", + type: "string", + helperText: "Text to display when the user has images off", + }, + ...CSS_EDITABLE_INPUTS, + ], +}); diff --git a/src/components/Row/cmp.builder.tsx b/src/components/Row/cmp.builder.tsx new file mode 100644 index 0000000..20274a4 --- /dev/null +++ b/src/components/Row/cmp.builder.tsx @@ -0,0 +1,68 @@ +import { Builder, withChildren } from "@builder.io/react"; +import { DEFAULT_PROPS } from "@/constants/builderProps"; +import { Row } from "@aleph-front/core"; + +Builder.registerComponent(withChildren(Row), { + ...DEFAULT_PROPS, + name: "Row", + canHaveChildren: true, + inputs: [ + ...DEFAULT_PROPS.inputs, + { + name: "count", + type: "number", + }, + { + name: "xs", + type: "number", + }, + { + name: "sm", + type: "number", + }, + { + name: "md", + type: "number", + }, + { + name: "lg", + type: "number", + }, + { + name: "xl", + type: "number", + }, + { + name: "2xl", + type: "number", + }, + { + name: "gap", + type: "string", + }, + { + name: "xsGap", + type: "number", + }, + { + name: "smGap", + type: "number", + }, + { + name: "mdGap", + type: "number", + }, + { + name: "lgGap", + type: "number", + }, + { + name: "xlGap", + type: "number", + }, + { + name: "2xlGap", + type: "number", + }, + ], +}); diff --git a/src/components/Section/cmp.builder.tsx b/src/components/Section/cmp.builder.tsx new file mode 100644 index 0000000..743c864 --- /dev/null +++ b/src/components/Section/cmp.builder.tsx @@ -0,0 +1,18 @@ +import { Builder, withChildren } from "@builder.io/react"; +import { DEFAULT_PROPS } from "@/constants/builderProps"; +import Section from "."; + +Builder.registerComponent(withChildren(Section), { + ...DEFAULT_PROPS, + name: "Core:Section", + override: true, + canHaveChildren: true, + inputs: [ + ...DEFAULT_PROPS.inputs, + { + name: "effects", + type: "string", + enum: ["", "fx-grain-1", "fx-grain-2"], + }, + ], +}); diff --git a/src/components/SignMeUpForm/cmp.builder.tsx b/src/components/SignMeUpForm/cmp.builder.tsx new file mode 100644 index 0000000..c7438ac --- /dev/null +++ b/src/components/SignMeUpForm/cmp.builder.tsx @@ -0,0 +1,8 @@ +import { Builder } from "@builder.io/react"; +import { DEFAULT_PROPS } from "@/constants/builderProps"; +import SignMeUpForm from "."; + +Builder.registerComponent(SignMeUpForm, { + ...DEFAULT_PROPS, + name: "Sign Me Up Form", +}); diff --git a/src/components/Text/cmp.builder.tsx b/src/components/Text/cmp.builder.tsx new file mode 100644 index 0000000..7a3a781 --- /dev/null +++ b/src/components/Text/cmp.builder.tsx @@ -0,0 +1,9 @@ +import { Builder } from "@builder.io/react"; +import { DEFAULT_TEXT_PROPS } from "@/constants/builderProps"; +import Text from "."; + +Builder.registerComponent(Text, { + ...DEFAULT_TEXT_PROPS, + name: "Custom Text", + inputs: [...DEFAULT_TEXT_PROPS.inputs], +}); diff --git a/src/components/TextGradient/cmp.builder.tsx b/src/components/TextGradient/cmp.builder.tsx new file mode 100644 index 0000000..d16a6dc --- /dev/null +++ b/src/components/TextGradient/cmp.builder.tsx @@ -0,0 +1,33 @@ +import { Builder, withChildren } from "@builder.io/react"; +import { DEFAULT_TEXT_PROPS } from "@/constants/builderProps"; +import TextGradient from "."; +import { COLORS } from "@/constants/enums"; + +Builder.registerComponent(TextGradient, { + ...DEFAULT_TEXT_PROPS, + name: "TextGradient", + inputs: [ + ...DEFAULT_TEXT_PROPS.inputs, + { + name: "color", + type: "string", + enum: COLORS, + defaultValue: "text", + }, + { + name: "type", + type: "string", + enum: ["h1", "h2"], + defaultValue: "h1", + }, + { + name: "as", + type: "string", + enum: ["h1"], + }, + { + name: "size", + type: "number", + }, + ], +}); diff --git a/src/components/hiddenFromEditor.builder.tsx b/src/components/hiddenFromEditor.builder.tsx new file mode 100644 index 0000000..9a132b2 --- /dev/null +++ b/src/components/hiddenFromEditor.builder.tsx @@ -0,0 +1,32 @@ +import { + Builder, + CustomCode, + Embed, + Form, + FormInput, + FormSelect, + FormSubmitButton, + Label, + TextArea, +} from "@builder.io/react"; +import { HIDDEN_FROM_EDITOR_PROPS } from "@/constants/builderProps"; + +const components = [ + { component: Form, name: "Form:Form" }, + { component: FormInput, name: "Form:Input" }, + { component: FormSubmitButton, name: "Form:SubmitButton" }, + { component: Label, name: "Form:Label" }, + { component: FormSelect, name: "Form:Select" }, + { component: TextArea, name: "Form:TextArea" }, + { component: CustomCode, name: "Custom Code" }, + { component: CustomCode, name: "Slot" }, + { component: CustomCode, name: "Video" }, + { component: Embed, name: "Embed" }, +]; + +components.forEach(({ component, name }) => { + Builder.registerComponent(component, { + ...HIDDEN_FROM_EDITOR_PROPS, + name: name, + }); +}); diff --git a/src/components/index.tsx b/src/components/index.tsx deleted file mode 100644 index 56f7b83..0000000 --- a/src/components/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -export { default as Box } from "./Box"; -export { default as Image } from "./Image"; -export { default as Container } from "./Container"; -export { default as TextGradient } from "./TextGradient"; -export { default as H1 } from "./H1"; -export { default as H2 } from "./H2"; -export { default as Section } from "./Section"; -export { default as Text } from "./Text"; -export { default as Header } from "./Header"; -export { default as Footer } from "./Footer"; -export { default as SignMeUpForm } from "./SignMeUpForm"; -export { default as Breadcrumb } from "./Breadcrumb"; -export { default as CardWithSideImage } from "./CardWithSideImage"; diff --git a/src/constants/builderInputs.tsx b/src/constants/builderInputs.tsx new file mode 100644 index 0000000..584268c --- /dev/null +++ b/src/constants/builderInputs.tsx @@ -0,0 +1,93 @@ +import { DEFAULT_PROPS } from "./builderProps"; + +const remValues = [ + "auto", + "0", + "0.25rem", + "0.5rem", + "0.75rem", + "1rem", + "1.25rem", + "1.5rem", + "1.75rem", + "2.00rem", + "2.25rem", + "2.50rem", + "2.75rem", + "3.00rem", + "3.25rem", + "3.50rem", + "3.75rem", + "4.00rem", + "4.25rem", + "4.50rem", + "4.75rem", + "5.00rem", + "5.25rem", + "5.50rem", + "5.75rem", + "6.00rem", +]; + +export const CSS_EDITABLE_INPUTS = [ + ...DEFAULT_PROPS.inputs, + { + name: "margin", + type: "string", + defaultValue: "auto", + enum: [...remValues], + }, + { + name: "marginTop", + type: "string", + advanced: true, + enum: [...remValues], + }, + { + name: "marginBottom", + type: "string", + advanced: true, + enum: [...remValues], + }, + { + name: "marginLeft", + type: "string", + advanced: true, + enum: [...remValues], + }, + { + name: "marginRight", + type: "string", + advanced: true, + enum: [...remValues], + }, + { + name: "padding", + type: "string", + enum: [...remValues], + }, + { + name: "paddingTop", + type: "string", + advanced: true, + enum: [...remValues], + }, + { + name: "paddingBottom", + type: "string", + advanced: true, + enum: [...remValues], + }, + { + name: "paddingLeft", + type: "string", + advanced: true, + enum: [...remValues], + }, + { + name: "paddingRight", + type: "string", + advanced: true, + enum: [...remValues], + }, +]; diff --git a/src/constants/builderProps.tsx b/src/constants/builderProps.tsx new file mode 100644 index 0000000..1bde7ab --- /dev/null +++ b/src/constants/builderProps.tsx @@ -0,0 +1,41 @@ +export const DEFAULT_PROPS = { + inputs: [], + defaultStyles: {}, +}; + +export const DEFAULT_TEXT_PROPS = { + ...DEFAULT_PROPS, + inputs: [ + ...DEFAULT_PROPS.inputs, + { + name: "children", + friendlyName: "Text content", + helperText: "Shift+Enter for line break", + type: "longText", + }, + { + name: "textType", + type: "string", + enum: ["", "text-main0", "text-base2"], + }, + { + name: "tp", + type: "string", + enum: ["", "tp-info", "tp-header", "tp-h2", "tp-h4", "tp-h7"], + }, + { + name: "fs", + type: "string", + enum: ["", "fs-10", "fs-18", "fs-26", "fs-28"], + }, + ], + defaultStyles: { + whiteSpace: "pre-wrap", + }, +}; + +export const HIDDEN_FROM_EDITOR_PROPS = { + ...DEFAULT_PROPS, + override: true, + hideFromInsertMenu: true, +}; diff --git a/src/constants/enums.tsx b/src/constants/enums.tsx new file mode 100644 index 0000000..524ac52 --- /dev/null +++ b/src/constants/enums.tsx @@ -0,0 +1,42 @@ +export const TYPO_KIND: string[] = [ + "h1", + "h2", + "h3", + "h4", + "h5", + "h6", + "h7", + "header", + "logo", + "nav", + "info", + "body", + "body1", + "body2", + "body3", + "code", + "code1", + "table", + "form", +]; + +export const COLORS: string[] = [ + "white", + "black", + "translucid", + "base0", + "base1", + "base2", + "main0", + "main1", + "info", + "success", + "warning", + "error", + "disabled", + "disabled2", + "background", + "contentBackground", + "foreground", + "text", +]; diff --git a/src/pages/_dynamicPage.tsx b/src/pages/_dynamicPage.tsx index 561b014..85034c2 100644 --- a/src/pages/_dynamicPage.tsx +++ b/src/pages/_dynamicPage.tsx @@ -3,10 +3,8 @@ import DefaultErrorPage from "next/error"; import Head from "next/head"; import { BuilderContent } from "@builder.io/sdk"; import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react"; -import "../builder-registry"; import { useRouter } from "next/router"; -import { Header } from "@/components"; -import { Button } from "@aleph-front/core"; +import "../builder-registry"; type DynamicPageProps = { pageModel: string; From bc306cb21534815e4f05e8b1e7767169641665ec Mon Sep 17 00:00:00 2001 From: gmolki Date: Mon, 15 Apr 2024 09:11:37 +0200 Subject: [PATCH 10/15] refactors + rem breakpoints --- src/builder-registry.ts | 2 + src/components/Box/cmp.builder.tsx | 5 +- src/components/Box/styles.tsx | 31 +--- src/components/Box/types.ts | 10 +- src/components/Button/cmp.builder.tsx | 32 ++-- .../CardWithSideImage/cmp.builder.tsx | 8 +- src/components/CardWithSideImage/cmp.tsx | 3 +- src/components/CardWithSideImage/types.ts | 1 + src/components/Container/styles.tsx | 26 +--- src/components/H1/cmp.builder.tsx | 2 +- src/components/H2/cmp.builder.tsx | 2 +- src/components/Header/cmp.tsx | 1 - src/components/ObjectImage/cmp.builder.tsx | 50 +++++++ src/components/Section/cmp.builder.tsx | 6 +- src/components/Section/cmp.tsx | 9 +- src/components/Section/styles.tsx | 9 ++ src/components/Section/types.ts | 6 +- src/components/TextGradient/cmp.builder.tsx | 2 +- src/constants/builderEnums.tsx | 104 +++++++++++++ src/constants/builderInputs.tsx | 138 ++++++++++++------ src/constants/builderProps.tsx | 4 +- src/constants/enums.tsx | 42 ------ src/hooks/calculateCssEditableProps.tsx | 89 +++++++++++ src/pages/_twentySixPage.tsx | 63 -------- src/types/CssEditableProps.tsx | 12 ++ 25 files changed, 428 insertions(+), 229 deletions(-) create mode 100644 src/components/ObjectImage/cmp.builder.tsx create mode 100644 src/components/Section/styles.tsx create mode 100644 src/constants/builderEnums.tsx delete mode 100644 src/constants/enums.tsx create mode 100644 src/hooks/calculateCssEditableProps.tsx delete mode 100644 src/pages/_twentySixPage.tsx diff --git a/src/builder-registry.ts b/src/builder-registry.ts index c709f0c..3cd10b7 100644 --- a/src/builder-registry.ts +++ b/src/builder-registry.ts @@ -8,6 +8,7 @@ import "./components/Column/cmp.builder"; import "./components/Row/cmp.builder"; import "./components/Button/cmp.builder"; import "./components/Text/cmp.builder"; +import "./components/TextGradient/cmp.builder"; import "./components/H1/cmp.builder"; import "./components/H2/cmp.builder"; import "./components/BulletList/cmp.builder"; @@ -18,5 +19,6 @@ import "./components/Breadcrumb/cmp.builder"; import "./components/Image/cmp.builder"; import "./components/Columns/cmp.builder"; import "./components/CardWithSideImage/cmp.builder"; +import "./components/ObjectImage/cmp.builder"; builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!); diff --git a/src/components/Box/cmp.builder.tsx b/src/components/Box/cmp.builder.tsx index 720ba0e..d43c0bf 100644 --- a/src/components/Box/cmp.builder.tsx +++ b/src/components/Box/cmp.builder.tsx @@ -1,6 +1,7 @@ import { Builder, withChildren } from "@builder.io/react"; import { DEFAULT_PROPS } from "@/constants/builderProps"; import { CSS_EDITABLE_INPUTS } from "@/constants/builderInputs"; +import { BACKGROUND_COLORS, REM_VALUES } from "@/constants/builderEnums"; import Box from "."; Builder.registerComponent(withChildren(Box), { @@ -8,11 +9,11 @@ Builder.registerComponent(withChildren(Box), { name: "Custom Box", canHaveChildren: true, inputs: [ - ...CSS_EDITABLE_INPUTS, { name: "backgroundColor", type: "string", - enum: ["bg-base0", "bg-base1"], + enum: BACKGROUND_COLORS, }, + ...CSS_EDITABLE_INPUTS, ], }); diff --git a/src/components/Box/styles.tsx b/src/components/Box/styles.tsx index 5d60aab..f91ab31 100644 --- a/src/components/Box/styles.tsx +++ b/src/components/Box/styles.tsx @@ -1,32 +1,9 @@ -import styled, { css } from "styled-components"; +import styled from "styled-components"; import { BoxProps } from "./types"; +import { calculateCssEditableProps } from "@/hooks/calculateCssEditableProps"; export const StyledBox = styled.div` - ${({ - theme, - margin, - marginTop, - marginBottom, - marginRight, - marginLeft, - padding, - paddingTop, - paddingBottom, - paddingRight, - paddingLeft, - }) => { - return css` - margin: ${margin}; - margin-top: ${marginTop}; - margin-bottom: ${marginBottom}; - margin-right: ${marginRight}; - margin-left: ${marginLeft}; - padding: ${padding}; - padding-top: ${paddingTop}; - padding-bottom: ${paddingBottom}; - padding-right: ${paddingRight}; - padding-left: ${paddingLeft}; - position: relative; - `; + ${({ theme, ...cssEditableProps }) => { + return calculateCssEditableProps(theme, cssEditableProps); }} `; diff --git a/src/components/Box/types.ts b/src/components/Box/types.ts index 9522405..b58a701 100644 --- a/src/components/Box/types.ts +++ b/src/components/Box/types.ts @@ -1,6 +1,8 @@ import { CssEditableProps } from "@/types/CssEditableProps"; +import { HTMLAttributes } from "react"; -export type BoxProps = CssEditableProps & { - children: React.ReactNode; - backgroundColor: string; -}; +export type BoxProps = HTMLAttributes & + CssEditableProps & { + children: React.ReactNode; + backgroundColor: string; + }; diff --git a/src/components/Button/cmp.builder.tsx b/src/components/Button/cmp.builder.tsx index 27667a4..71e2b24 100644 --- a/src/components/Button/cmp.builder.tsx +++ b/src/components/Button/cmp.builder.tsx @@ -1,37 +1,56 @@ import { Builder, withChildren } from "@builder.io/react"; import { DEFAULT_PROPS } from "@/constants/builderProps"; import { Button } from "@aleph-front/core"; +import { COLORS } from "@/constants/builderEnums"; Builder.registerComponent(withChildren(Button), { ...DEFAULT_PROPS, - name: "Button", + name: "Core:Button", canHaveChildren: true, + noWrap: true, inputs: [ ...DEFAULT_PROPS.inputs, { name: "children", + friendlyName: "Text content", + helperText: "Press Enter to add a line break", type: "longText", }, { name: "href", + friendlyName: "Link", type: "string", }, { name: "kind", type: "string", + enum: ["gradient", "yellow", "functional"], }, { name: "variant", type: "string", + enum: ["primary", "secondary", "tertiary"], }, { name: "size", type: "string", enum: ["sm", "md", "lg"], }, + { + name: "as", + type: "string", + enum: ["button", "a"], + }, + { + name: "target", + type: "string", + enum: ["_self", "_blank"], + defaultValue: "_self", + }, { name: "color", type: "string", + enum: COLORS, }, { name: "hover", @@ -49,16 +68,5 @@ Builder.registerComponent(withChildren(Button), { name: "disabled", type: "boolean", }, - { - name: "as", - type: "string", - enum: ["button", "a"], - }, - { - name: "target", - type: "string", - enum: ["_self", "_blank"], - defaultValue: "_self", - }, ], }); diff --git a/src/components/CardWithSideImage/cmp.builder.tsx b/src/components/CardWithSideImage/cmp.builder.tsx index a750d2a..b3db42b 100644 --- a/src/components/CardWithSideImage/cmp.builder.tsx +++ b/src/components/CardWithSideImage/cmp.builder.tsx @@ -1,6 +1,7 @@ import { Builder, withChildren } from "@builder.io/react"; import { DEFAULT_PROPS } from "@/constants/builderProps"; import CardWithSideImage from "."; +import { BACKGROUND_COLORS } from "@/constants/builderEnums"; Builder.registerComponent(withChildren(CardWithSideImage), { ...DEFAULT_PROPS, @@ -27,7 +28,12 @@ Builder.registerComponent(withChildren(CardWithSideImage), { type: "string", enum: ["left", "right"], defaultValue: "left", - helperText: "", + }, + { + name: "cardBackgroundColor", + type: "string", + enum: BACKGROUND_COLORS, + defaultValue: "bg-base0", }, { name: "reverseColumnsWhenStacked", diff --git a/src/components/CardWithSideImage/cmp.tsx b/src/components/CardWithSideImage/cmp.tsx index 77084b0..de01b0c 100644 --- a/src/components/CardWithSideImage/cmp.tsx +++ b/src/components/CardWithSideImage/cmp.tsx @@ -10,6 +10,7 @@ export const CardWithSideImage = ({ imageSrc, imageAlt, imagePosition, + cardBackgroundColor, reverseColumnsWhenStacked, }: CardWithSideImageProps) => { const imageCmp = ( @@ -18,7 +19,7 @@ export const CardWithSideImage = ({ const cardCmp = ( -
+
{children}
diff --git a/src/components/CardWithSideImage/types.ts b/src/components/CardWithSideImage/types.ts index 1fcaed7..7bf5bbc 100644 --- a/src/components/CardWithSideImage/types.ts +++ b/src/components/CardWithSideImage/types.ts @@ -3,5 +3,6 @@ export type CardWithSideImageProps = { imageSrc: string; imageAlt: string; imagePosition: string; + cardBackgroundColor: string; reverseColumnsWhenStacked: boolean; }; diff --git a/src/components/Container/styles.tsx b/src/components/Container/styles.tsx index 1e68779..8eda836 100644 --- a/src/components/Container/styles.tsx +++ b/src/components/Container/styles.tsx @@ -1,36 +1,16 @@ import styled, { css } from "styled-components"; import tw from "twin.macro"; import { ContainerProps } from "./types"; +import { calculateCssEditableProps } from "@/hooks/calculateCssEditableProps"; export const StyledContainer = styled.div` - ${({ - theme, - margin, - marginTop, - marginBottom, - marginRight, - marginLeft, - padding, - paddingTop, - paddingBottom, - paddingRight, - paddingLeft, - }) => { + ${({ theme, ...cssEditableProps }) => { return css` ${tw`px-6 md:px-16`} box-sizing: border-box; width: 100%; max-width: 100rem; - margin: ${margin}; - margin-top: ${marginTop}; - margin-bottom: ${marginBottom}; - margin-right: ${marginRight}; - margin-left: ${marginLeft}; - padding: ${padding}; - padding-top: ${paddingTop}; - padding-bottom: ${paddingBottom}; - padding-right: ${paddingRight}; - padding-left: ${paddingLeft}; + ${calculateCssEditableProps(theme, cssEditableProps)} `; }} `; diff --git a/src/components/H1/cmp.builder.tsx b/src/components/H1/cmp.builder.tsx index 76b5129..0f94baa 100644 --- a/src/components/H1/cmp.builder.tsx +++ b/src/components/H1/cmp.builder.tsx @@ -1,7 +1,7 @@ import { Builder } from "@builder.io/react"; import { DEFAULT_TEXT_PROPS } from "@/constants/builderProps"; import H1 from "."; -import { TYPO_KIND } from "@/constants/enums"; +import { TYPO_KIND } from "@/constants/builderEnums"; Builder.registerComponent(H1, { ...DEFAULT_TEXT_PROPS, diff --git a/src/components/H2/cmp.builder.tsx b/src/components/H2/cmp.builder.tsx index 9ac6c0f..9f7179d 100644 --- a/src/components/H2/cmp.builder.tsx +++ b/src/components/H2/cmp.builder.tsx @@ -1,6 +1,6 @@ import { Builder } from "@builder.io/react"; import { DEFAULT_TEXT_PROPS } from "@/constants/builderProps"; -import { TYPO_KIND } from "@/constants/enums"; +import { TYPO_KIND } from "@/constants/builderEnums"; import H2 from "."; Builder.registerComponent(H2, { diff --git a/src/components/Header/cmp.tsx b/src/components/Header/cmp.tsx index 25edc05..9b01ff6 100644 --- a/src/components/Header/cmp.tsx +++ b/src/components/Header/cmp.tsx @@ -12,7 +12,6 @@ export const Header = ({ children, routes, breakpoint }: HeaderProps) => { const handleCloseMenu = useCallback((open: boolean) => setIsOpen(open), []); const router = useRouter(); - console.log(router.asPath); return ( diff --git a/src/components/ObjectImage/cmp.builder.tsx b/src/components/ObjectImage/cmp.builder.tsx new file mode 100644 index 0000000..4c50bcc --- /dev/null +++ b/src/components/ObjectImage/cmp.builder.tsx @@ -0,0 +1,50 @@ +import { Builder } from "@builder.io/react"; +import { DEFAULT_PROPS } from "@/constants/builderProps"; +import { ObjectImg } from "@aleph-front/core"; + +Builder.registerComponent(ObjectImg, { + ...DEFAULT_PROPS, + name: "Object Image", + inputs: [ + ...DEFAULT_PROPS.inputs, + { + name: "id", + type: "string", + enum: [ + "Object1", + "Object2", + "Object3", + "Object4", + "Object5", + "Object6", + "Object7", + "Object8", + "Object9", + "Object10", + "Object11", + "Object12", + "Object13", + "Object14", + "Object15", + "Object16", + "Object17", + "Object18", + "Object19", + ], + defaultValue: "Object1", + }, + { + name: "size", + type: "number", + }, + { + name: "color", + type: "string", + defaultValue: "main0", + }, + { + name: "color2", + type: "string", + }, + ], +}); diff --git a/src/components/Section/cmp.builder.tsx b/src/components/Section/cmp.builder.tsx index 743c864..5b15360 100644 --- a/src/components/Section/cmp.builder.tsx +++ b/src/components/Section/cmp.builder.tsx @@ -1,6 +1,8 @@ import { Builder, withChildren } from "@builder.io/react"; import { DEFAULT_PROPS } from "@/constants/builderProps"; import Section from "."; +import { CSS_EDITABLE_INPUTS } from "@/constants/builderInputs"; +import { EFFECTS } from "@/constants/builderEnums"; Builder.registerComponent(withChildren(Section), { ...DEFAULT_PROPS, @@ -8,11 +10,11 @@ Builder.registerComponent(withChildren(Section), { override: true, canHaveChildren: true, inputs: [ - ...DEFAULT_PROPS.inputs, { name: "effects", type: "string", - enum: ["", "fx-grain-1", "fx-grain-2"], + enum: EFFECTS, }, + ...CSS_EDITABLE_INPUTS, ], }); diff --git a/src/components/Section/cmp.tsx b/src/components/Section/cmp.tsx index 0d7ecca..b049356 100644 --- a/src/components/Section/cmp.tsx +++ b/src/components/Section/cmp.tsx @@ -2,11 +2,16 @@ import React from "react"; import { SectionProps } from "./types"; +import { StyledSection } from "./styles"; -export const Section = ({ children, effects }: SectionProps) => { +export const Section = ({ children, effects, ...props }: SectionProps) => { const calculatedClassName = `${effects || ""}`; - return
{children}
; + return ( + + {children} + + ); }; export default Section; diff --git a/src/components/Section/styles.tsx b/src/components/Section/styles.tsx new file mode 100644 index 0000000..36a2f69 --- /dev/null +++ b/src/components/Section/styles.tsx @@ -0,0 +1,9 @@ +import styled, { css } from "styled-components"; +import { SectionProps } from "./types"; +import { calculateCssEditableProps } from "@/hooks/calculateCssEditableProps"; + +export const StyledSection = styled.div` + ${({ theme, ...cssEditableProps }) => { + return calculateCssEditableProps(theme, cssEditableProps); + }} +`; diff --git a/src/components/Section/types.ts b/src/components/Section/types.ts index acd51a6..cd0d7af 100644 --- a/src/components/Section/types.ts +++ b/src/components/Section/types.ts @@ -1,6 +1,6 @@ -import { HTMLAttributes } from "react"; +import { CssEditableProps } from "@/types/CssEditableProps"; -export type SectionProps = HTMLAttributes & { +export type SectionProps = CssEditableProps & { children: React.ReactNode; - effects: string; + effects?: string; }; diff --git a/src/components/TextGradient/cmp.builder.tsx b/src/components/TextGradient/cmp.builder.tsx index d16a6dc..a440840 100644 --- a/src/components/TextGradient/cmp.builder.tsx +++ b/src/components/TextGradient/cmp.builder.tsx @@ -1,7 +1,7 @@ import { Builder, withChildren } from "@builder.io/react"; import { DEFAULT_TEXT_PROPS } from "@/constants/builderProps"; import TextGradient from "."; -import { COLORS } from "@/constants/enums"; +import { COLORS } from "@/constants/builderEnums"; Builder.registerComponent(TextGradient, { ...DEFAULT_TEXT_PROPS, diff --git a/src/constants/builderEnums.tsx b/src/constants/builderEnums.tsx new file mode 100644 index 0000000..44aa406 --- /dev/null +++ b/src/constants/builderEnums.tsx @@ -0,0 +1,104 @@ +export const TYPO_KIND: string[] = [ + "h1", + "h2", + "h3", + "h4", + "h5", + "h6", + "h7", + "header", + "logo", + "nav", + "info", + "body", + "body1", + "body2", + "body3", + "code", + "code1", + "table", + "form", +]; + +export const COLORS: string[] = [ + "white", + "black", + "translucid", + "base0", + "base1", + "base2", + "main0", + "main1", + "info", + "success", + "warning", + "error", + "disabled", + "disabled2", + "background", + "contentBackground", + "foreground", + "text", +]; + +export const BACKGROUND_COLORS: string[] = [ + "bg-none", + "bg-white", + "bg-black", + "bg-base0", + "bg-base1", + "bg-base2", + "bg-main0", + "bg-main1", +]; + +export const EFFECTS: string[] = [ + "", + "fx-grain-1", + "fx-grain-2", + "fx-grain-3", + "fx-grain-4", + "fx-grain-5", +]; + +export const REM_VALUES = [ + "", + "auto", + "0", + "0.25rem", + "0.5rem", + "0.75rem", + "1rem", + "1.25rem", + "1.5rem", + "1.75rem", + "2.00rem", + "2.25rem", + "2.50rem", + "2.75rem", + "3.00rem", + "3.25rem", + "3.50rem", + "3.75rem", + "4.00rem", + "4.25rem", + "4.50rem", + "4.75rem", + "5.00rem", + "5.25rem", + "5.50rem", + "5.75rem", + "6.00rem", + "6.25rem", + "6.50rem", + "6.75rem", + "7.00rem", + "7.25rem", + "7.50rem", + "7.75rem", + "8.00rem", + "8.25rem", + "8.50rem", + "8.75rem", + "9.00rem", +]; diff --git a/src/constants/builderInputs.tsx b/src/constants/builderInputs.tsx index 584268c..8d54e46 100644 --- a/src/constants/builderInputs.tsx +++ b/src/constants/builderInputs.tsx @@ -1,93 +1,149 @@ +import { REM_VALUES } from "./builderEnums"; import { DEFAULT_PROPS } from "./builderProps"; -const remValues = [ - "auto", - "0", - "0.25rem", - "0.5rem", - "0.75rem", - "1rem", - "1.25rem", - "1.5rem", - "1.75rem", - "2.00rem", - "2.25rem", - "2.50rem", - "2.75rem", - "3.00rem", - "3.25rem", - "3.50rem", - "3.75rem", - "4.00rem", - "4.25rem", - "4.50rem", - "4.75rem", - "5.00rem", - "5.25rem", - "5.50rem", - "5.75rem", - "6.00rem", -]; - -export const CSS_EDITABLE_INPUTS = [ - ...DEFAULT_PROPS.inputs, +const EDITABLE_MARGIN_INPUTS = [ { name: "margin", type: "string", defaultValue: "auto", - enum: [...remValues], + enum: [...REM_VALUES], }, { name: "marginTop", type: "string", advanced: true, - enum: [...remValues], + enum: [...REM_VALUES], }, { name: "marginBottom", type: "string", advanced: true, - enum: [...remValues], + enum: [...REM_VALUES], }, { name: "marginLeft", type: "string", advanced: true, - enum: [...remValues], + enum: [...REM_VALUES], }, { name: "marginRight", type: "string", advanced: true, - enum: [...remValues], + enum: [...REM_VALUES], }, +]; + +const EDITABLE_PADDING_INPUTS = [ { name: "padding", type: "string", - enum: [...remValues], + defaultValue: "0", + enum: [...REM_VALUES], }, { name: "paddingTop", type: "string", advanced: true, - enum: [...remValues], + enum: [...REM_VALUES], }, { name: "paddingBottom", type: "string", advanced: true, - enum: [...remValues], + enum: [...REM_VALUES], }, { name: "paddingLeft", type: "string", advanced: true, - enum: [...remValues], + enum: [...REM_VALUES], }, { name: "paddingRight", type: "string", advanced: true, - enum: [...remValues], + enum: [...REM_VALUES], + }, +]; + +export const CSS_EDITABLE_INPUTS = [ + ...DEFAULT_PROPS.inputs, + { + name: "direction", + type: "string", + enum: ["", "inline", "row", "column"], + }, + { + name: "alignItems", + type: "string", + enum: ["", "start", "end", "center"], + }, + { + name: "wrap", + type: "string", + enum: ["", "nowrap", "wrap", "wrap-reverse"], + advanced: true, + }, + { + name: "gap", + type: "string", + enum: [...REM_VALUES], + advanced: true, + }, + { + name: "opacity", + type: "string", + enum: [ + "0", + "0.1", + "0.2", + "0.3", + "0.4", + "0.5", + "0.6", + "0.7", + "0.8", + "0.9", + "1", + ], + advanced: true, + }, + { + name: "remStyleBreakpoints", + type: "list", + advanced: true, + subFields: [ + { + name: "breakpoint", + type: "string", + enum: ["xs", "sm", "md", "lg", "xl", "2xl"], + }, + { + name: "style", + type: "string", + enum: [ + "margin", + "margin-top", + "margin-bottom", + "margin-right", + "margin-left", + "padding", + "padding-top", + "padding-bottom", + "padding-right", + "padding-left", + "gap", + "opacity", + ], + }, + { + name: "value", + type: "string", + enum: REM_VALUES, + }, + ], }, + ...EDITABLE_MARGIN_INPUTS, + ...EDITABLE_PADDING_INPUTS, ]; diff --git a/src/constants/builderProps.tsx b/src/constants/builderProps.tsx index 1bde7ab..6e81d04 100644 --- a/src/constants/builderProps.tsx +++ b/src/constants/builderProps.tsx @@ -10,7 +10,7 @@ export const DEFAULT_TEXT_PROPS = { { name: "children", friendlyName: "Text content", - helperText: "Shift+Enter for line break", + helperText: "Press Enter to add a line break", type: "longText", }, { @@ -21,7 +21,7 @@ export const DEFAULT_TEXT_PROPS = { { name: "tp", type: "string", - enum: ["", "tp-info", "tp-header", "tp-h2", "tp-h4", "tp-h7"], + enum: ["", "tp-info", "tp-header", "tp-h2", "tp-h3", "tp-h4", "tp-h7"], }, { name: "fs", diff --git a/src/constants/enums.tsx b/src/constants/enums.tsx deleted file mode 100644 index 524ac52..0000000 --- a/src/constants/enums.tsx +++ /dev/null @@ -1,42 +0,0 @@ -export const TYPO_KIND: string[] = [ - "h1", - "h2", - "h3", - "h4", - "h5", - "h6", - "h7", - "header", - "logo", - "nav", - "info", - "body", - "body1", - "body2", - "body3", - "code", - "code1", - "table", - "form", -]; - -export const COLORS: string[] = [ - "white", - "black", - "translucid", - "base0", - "base1", - "base2", - "main0", - "main1", - "info", - "success", - "warning", - "error", - "disabled", - "disabled2", - "background", - "contentBackground", - "foreground", - "text", -]; diff --git a/src/hooks/calculateCssEditableProps.tsx b/src/hooks/calculateCssEditableProps.tsx new file mode 100644 index 0000000..cfbbeb3 --- /dev/null +++ b/src/hooks/calculateCssEditableProps.tsx @@ -0,0 +1,89 @@ +import { DefaultTheme, css } from "styled-components"; +import tw from "twin.macro"; +import { Breakpoint, CssEditableProps } from "@/types/CssEditableProps"; +import { useResponsiveBreakpoint } from "@aleph-front/core"; + +const calculateDisplayCssProps = (direction: string) => { + switch (direction) { + case "row": + return tw`flex flex-row`; + case "column": + return tw`flex flex-col`; + case "inline": + return tw`inline`; + default: + return ""; + } +}; + +const calculateAlignItemsCssProps = (alignItems: string) => { + switch (alignItems) { + case "start": + return tw`flex items-start justify-start`; + case "end": + return tw`flex items-end justify-end`; + case "center": + return tw`flex items-center justify-center`; + default: + return ""; + } +}; + +const calculateRemBreakpoints = (theme: any, breakpoints: Breakpoint[]) => { + if (!breakpoints) return; + + return breakpoints.map(({ breakpoint, style, value }: Breakpoint) => { + if (breakpoint) { + return css` + @media (min-width: ${theme.breakpoint[breakpoint]}rem) { + ${style}: ${value}; + } + `; + } else { + return css` + ${style}: ${value}; + `; + } + }); +}; + +export const calculateCssEditableProps = ( + theme: DefaultTheme, + { + margin, + marginTop, + marginBottom, + marginRight, + marginLeft, + padding, + paddingTop, + paddingBottom, + paddingRight, + paddingLeft, + gap, + opacity, + direction, + alignItems, + wrap, + remStyleBreakpoints, + }: CssEditableProps +) => { + return css` + margin: ${margin}; + margin-top: ${marginTop}; + margin-bottom: ${marginBottom}; + margin-right: ${marginRight}; + margin-left: ${marginLeft}; + padding: ${padding}; + padding-top: ${paddingTop}; + padding-bottom: ${paddingBottom}; + padding-right: ${paddingRight}; + padding-left: ${paddingLeft}; + gap: ${gap}; + opacity: ${opacity}; + flex-wrap: ${wrap}; + ${calculateDisplayCssProps(direction)} + ${calculateAlignItemsCssProps(alignItems)}; + ${calculateRemBreakpoints(theme, remStyleBreakpoints)} + `; +}; diff --git a/src/pages/_twentySixPage.tsx b/src/pages/_twentySixPage.tsx deleted file mode 100644 index 52c8c80..0000000 --- a/src/pages/_twentySixPage.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React, { useEffect, useState } from "react"; -import DefaultErrorPage from "next/error"; -import Head from "next/head"; -import { BuilderContent } from "@builder.io/sdk"; -import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react"; -import "../builder-registry"; -import { useRouter } from "next/router"; - -export default function DynamicPage({ page }: { page: BuilderContent | null }) { - const router = useRouter(); - const isPreviewing = useIsPreviewing(); - - const [content, setContent] = useState(page); - const [notFound, setNotFound] = useState(!page); - - useEffect(() => { - async function fetchContent() { - const urlPath = router.asPath || "/"; - console.log("PAGE", urlPath); - - try { - console.log("LOAD", urlPath); - - const fetchedContent = await builder - .get("page", { userAttributes: { urlPath } }) - .toPromise(); - - if (fetchedContent) { - setContent(fetchedContent); - } else { - setNotFound(true); - } - } catch (e) { - console.log("something went wrong while fetching Builder Content: ", e); - setNotFound(true); - } - } - - fetchContent(); - }, [router.asPath]); // Depend on router.asPath to refetch content on route changes - - // If the page content is not available - // and not in preview mode, show a 404 error page - if (notFound && !isPreviewing) { - return ; - } - - // If the page content is available, render - // the BuilderComponent with the page content - return ( - <> - - {content?.data?.title} - - {/* Render the Builder page */} - - - ); -} diff --git a/src/types/CssEditableProps.tsx b/src/types/CssEditableProps.tsx index c6a0712..5b2f858 100644 --- a/src/types/CssEditableProps.tsx +++ b/src/types/CssEditableProps.tsx @@ -1,4 +1,11 @@ +export type Breakpoint = { + breakpoint: string; + style: string; + value: string; +}; + export type CssEditableProps = { + remStyleBreakpoints: Breakpoint[]; margin: string; marginTop: string; marginBottom: string; @@ -9,4 +16,9 @@ export type CssEditableProps = { paddingBottom: string; paddingRight: string; paddingLeft: string; + direction: string; + alignItems: string; + wrap: string; + gap: string; + opacity: string; }; From 242a92b093d6b6890d56519db592cc7ce6a008d3 Mon Sep 17 00:00:00 2001 From: gmolki Date: Mon, 15 Apr 2024 11:58:28 +0200 Subject: [PATCH 11/15] refactor responsive styles --- .env | 2 +- src/constants/builderInputs.tsx | 79 +------------------------ src/hooks/calculateCssEditableProps.tsx | 52 ++-------------- src/types/CssEditableProps.tsx | 6 +- 4 files changed, 13 insertions(+), 126 deletions(-) diff --git a/.env b/.env index 77824ca..0cd31e7 100644 --- a/.env +++ b/.env @@ -1,2 +1,2 @@ # https://www.builder.io/c/docs/using-your-api-key -NEXT_PUBLIC_BUILDER_API_KEY=5da369ee55b9465c91cf36605e655931 +# NEXT_PUBLIC_BUILDER_API_KEY=5da369ee55b9465c91cf36605e655931 diff --git a/src/constants/builderInputs.tsx b/src/constants/builderInputs.tsx index 8d54e46..16d2c13 100644 --- a/src/constants/builderInputs.tsx +++ b/src/constants/builderInputs.tsx @@ -1,72 +1,6 @@ import { REM_VALUES } from "./builderEnums"; import { DEFAULT_PROPS } from "./builderProps"; -const EDITABLE_MARGIN_INPUTS = [ - { - name: "margin", - type: "string", - defaultValue: "auto", - enum: [...REM_VALUES], - }, - { - name: "marginTop", - type: "string", - advanced: true, - enum: [...REM_VALUES], - }, - { - name: "marginBottom", - type: "string", - advanced: true, - enum: [...REM_VALUES], - }, - { - name: "marginLeft", - type: "string", - advanced: true, - enum: [...REM_VALUES], - }, - { - name: "marginRight", - type: "string", - advanced: true, - enum: [...REM_VALUES], - }, -]; - -const EDITABLE_PADDING_INPUTS = [ - { - name: "padding", - type: "string", - defaultValue: "0", - enum: [...REM_VALUES], - }, - { - name: "paddingTop", - type: "string", - advanced: true, - enum: [...REM_VALUES], - }, - { - name: "paddingBottom", - type: "string", - advanced: true, - enum: [...REM_VALUES], - }, - { - name: "paddingLeft", - type: "string", - advanced: true, - enum: [...REM_VALUES], - }, - { - name: "paddingRight", - type: "string", - advanced: true, - enum: [...REM_VALUES], - }, -]; - export const CSS_EDITABLE_INPUTS = [ ...DEFAULT_PROPS.inputs, { @@ -85,12 +19,6 @@ export const CSS_EDITABLE_INPUTS = [ enum: ["", "nowrap", "wrap", "wrap-reverse"], advanced: true, }, - { - name: "gap", - type: "string", - enum: [...REM_VALUES], - advanced: true, - }, { name: "opacity", type: "string", @@ -110,14 +38,14 @@ export const CSS_EDITABLE_INPUTS = [ advanced: true, }, { - name: "remStyleBreakpoints", + name: "responsiveStyles", type: "list", advanced: true, subFields: [ { name: "breakpoint", type: "string", - enum: ["xs", "sm", "md", "lg", "xl", "2xl"], + enum: ["", "xs", "sm", "md", "lg", "xl", "2xl"], }, { name: "style", @@ -134,7 +62,6 @@ export const CSS_EDITABLE_INPUTS = [ "padding-right", "padding-left", "gap", - "opacity", ], }, { @@ -144,6 +71,4 @@ export const CSS_EDITABLE_INPUTS = [ }, ], }, - ...EDITABLE_MARGIN_INPUTS, - ...EDITABLE_PADDING_INPUTS, ]; diff --git a/src/hooks/calculateCssEditableProps.tsx b/src/hooks/calculateCssEditableProps.tsx index cfbbeb3..76afe77 100644 --- a/src/hooks/calculateCssEditableProps.tsx +++ b/src/hooks/calculateCssEditableProps.tsx @@ -1,7 +1,7 @@ import { DefaultTheme, css } from "styled-components"; import tw from "twin.macro"; import { Breakpoint, CssEditableProps } from "@/types/CssEditableProps"; -import { useResponsiveBreakpoint } from "@aleph-front/core"; +import { getResponsiveCss } from "@aleph-front/core"; const calculateDisplayCssProps = (direction: string) => { switch (direction) { @@ -29,61 +29,21 @@ const calculateAlignItemsCssProps = (alignItems: string) => { } }; -const calculateRemBreakpoints = (theme: any, breakpoints: Breakpoint[]) => { - if (!breakpoints) return; - - return breakpoints.map(({ breakpoint, style, value }: Breakpoint) => { - if (breakpoint) { - return css` - @media (min-width: ${theme.breakpoint[breakpoint]}rem) { - ${style}: ${value}; - } - `; - } else { - return css` - ${style}: ${value}; - `; - } +const calculateResponsiveStyles = (theme: any, breakpoints?: Breakpoint[]) => { + return breakpoints?.map(({ breakpoint, style, value }: Breakpoint) => { + return getResponsiveCss(breakpoint, `${style}: ${value};`); }); }; export const calculateCssEditableProps = ( theme: DefaultTheme, - { - margin, - marginTop, - marginBottom, - marginRight, - marginLeft, - padding, - paddingTop, - paddingBottom, - paddingRight, - paddingLeft, - gap, - opacity, - direction, - alignItems, - wrap, - remStyleBreakpoints, - }: CssEditableProps + { opacity, direction, alignItems, wrap, responsiveStyles }: CssEditableProps ) => { return css` - margin: ${margin}; - margin-top: ${marginTop}; - margin-bottom: ${marginBottom}; - margin-right: ${marginRight}; - margin-left: ${marginLeft}; - padding: ${padding}; - padding-top: ${paddingTop}; - padding-bottom: ${paddingBottom}; - padding-right: ${paddingRight}; - padding-left: ${paddingLeft}; - gap: ${gap}; opacity: ${opacity}; flex-wrap: ${wrap}; ${calculateDisplayCssProps(direction)} ${calculateAlignItemsCssProps(alignItems)}; - ${calculateRemBreakpoints(theme, remStyleBreakpoints)} + ${calculateResponsiveStyles(theme, responsiveStyles)} `; }; diff --git a/src/types/CssEditableProps.tsx b/src/types/CssEditableProps.tsx index 5b2f858..247636c 100644 --- a/src/types/CssEditableProps.tsx +++ b/src/types/CssEditableProps.tsx @@ -1,11 +1,13 @@ +import { BreakpointId } from "@aleph-front/core"; + export type Breakpoint = { - breakpoint: string; + breakpoint: BreakpointId; style: string; value: string; }; export type CssEditableProps = { - remStyleBreakpoints: Breakpoint[]; + responsiveStyles: Breakpoint[]; margin: string; marginTop: string; marginBottom: string; From ae2ca169fef3a6572c9917cfd90831b73bc32719 Mon Sep 17 00:00:00 2001 From: gmolki Date: Mon, 15 Apr 2024 12:09:18 +0200 Subject: [PATCH 12/15] Edit Symbol guard clause when no content --- src/pages/edit-symbol.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/edit-symbol.tsx b/src/pages/edit-symbol.tsx index 1b02e29..b1f7805 100644 --- a/src/pages/edit-symbol.tsx +++ b/src/pages/edit-symbol.tsx @@ -8,11 +8,13 @@ builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!); export const getStaticProps = async (context: { resolvedUrl: string }) => { // Dynamically fetch latest content from Builder.io API const content = await builder.get("symbol", { url: context.resolvedUrl }); - console; + return { props: { content } }; }; // View full integration and docs: https://builder.io/c/docs/developers export default function Page(props: { content: BuilderContent | undefined }) { + if (!props.content) return; + return ; } From 4f2094b339675aeb388b3dbad81a10b1ba142597 Mon Sep 17 00:00:00 2001 From: gmolki Date: Mon, 15 Apr 2024 12:14:26 +0200 Subject: [PATCH 13/15] fix edit symbol guard clause return null --- src/pages/edit-symbol.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/edit-symbol.tsx b/src/pages/edit-symbol.tsx index b1f7805..9fbda6c 100644 --- a/src/pages/edit-symbol.tsx +++ b/src/pages/edit-symbol.tsx @@ -14,7 +14,7 @@ export const getStaticProps = async (context: { resolvedUrl: string }) => { // View full integration and docs: https://builder.io/c/docs/developers export default function Page(props: { content: BuilderContent | undefined }) { - if (!props.content) return; + if (!props.content) return null; return ; } From 3ff691863944029c7bfa6552b53e6f38ddb79fb4 Mon Sep 17 00:00:00 2001 From: gmolki Date: Mon, 15 Apr 2024 12:21:31 +0200 Subject: [PATCH 14/15] fix null content on getStaticProps --- src/pages/edit-symbol.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/edit-symbol.tsx b/src/pages/edit-symbol.tsx index 9fbda6c..336a185 100644 --- a/src/pages/edit-symbol.tsx +++ b/src/pages/edit-symbol.tsx @@ -9,12 +9,10 @@ export const getStaticProps = async (context: { resolvedUrl: string }) => { // Dynamically fetch latest content from Builder.io API const content = await builder.get("symbol", { url: context.resolvedUrl }); - return { props: { content } }; + return { props: { content: content || null } }; }; // View full integration and docs: https://builder.io/c/docs/developers export default function Page(props: { content: BuilderContent | undefined }) { - if (!props.content) return null; - return ; } From 34403133e9e01313727376294ea9b65a09068d6f Mon Sep 17 00:00:00 2001 From: gmolki Date: Mon, 15 Apr 2024 12:25:15 +0200 Subject: [PATCH 15/15] add default pageModel to DynamicPage --- src/pages/_dynamicPage.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/pages/_dynamicPage.tsx b/src/pages/_dynamicPage.tsx index 85034c2..ed797d4 100644 --- a/src/pages/_dynamicPage.tsx +++ b/src/pages/_dynamicPage.tsx @@ -7,11 +7,14 @@ import { useRouter } from "next/router"; import "../builder-registry"; type DynamicPageProps = { - pageModel: string; + pageModel?: string; page: BuilderContent | null; }; -export default function DynamicPage({ pageModel, page }: DynamicPageProps) { +export default function DynamicPage({ + pageModel = "page", + page, +}: DynamicPageProps) { const router = useRouter(); const isPreviewing = useIsPreviewing();