From 5b92329b3f22e5871d351e9bfaf8bc6c6e8bc7c0 Mon Sep 17 00:00:00 2001 From: Lucian Hymer Date: Mon, 27 Jan 2025 11:37:33 -0700 Subject: [PATCH 1/6] feat: avoid using css root --- src/components/Button.module.css | 2 -- src/components/TextButton.module.css | 2 -- src/widgets/PassportScoreWidget.module.css | 2 -- src/{theme.css => widgets/Widget.module.css} | 2 +- src/widgets/Widget.tsx | 9 ++++++--- 5 files changed, 7 insertions(+), 10 deletions(-) rename src/{theme.css => widgets/Widget.module.css} (98%) diff --git a/src/components/Button.module.css b/src/components/Button.module.css index 6a05670..c47012d 100644 --- a/src/components/Button.module.css +++ b/src/components/Button.module.css @@ -1,5 +1,3 @@ -@import "../theme.css"; - .button { background-color: rgba(var(--color-primary-c6dbf459), 1); color: rgba(var(--color-background-c6dbf459), 1); diff --git a/src/components/TextButton.module.css b/src/components/TextButton.module.css index d43b970..a0c5e9d 100644 --- a/src/components/TextButton.module.css +++ b/src/components/TextButton.module.css @@ -1,5 +1,3 @@ -@import "../theme.css"; - .textButton { padding: 4px 8px; cursor: pointer; diff --git a/src/widgets/PassportScoreWidget.module.css b/src/widgets/PassportScoreWidget.module.css index 348b211..ca349e1 100644 --- a/src/widgets/PassportScoreWidget.module.css +++ b/src/widgets/PassportScoreWidget.module.css @@ -1,5 +1,3 @@ -@import "../theme.css"; - .container { /* Reset styles */ all: initial; diff --git a/src/theme.css b/src/widgets/Widget.module.css similarity index 98% rename from src/theme.css rename to src/widgets/Widget.module.css index 548835d..04e1190 100644 --- a/src/theme.css +++ b/src/widgets/Widget.module.css @@ -12,7 +12,7 @@ * variables to avoid conflicts */ -:root { +.widget { --color-primary-c6dbf459: 255, 255, 255; --color-secondary-c6dbf459: 109, 109, 109; --color-background-c6dbf459: 0, 0, 0; diff --git a/src/widgets/Widget.tsx b/src/widgets/Widget.tsx index e5fd9ae..8afdb06 100644 --- a/src/widgets/Widget.tsx +++ b/src/widgets/Widget.tsx @@ -1,3 +1,4 @@ +import styles from "./Widget.module.css"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { useEffect } from "react"; @@ -48,9 +49,11 @@ export const Widget = ({ children, theme }: GenericPassportWidgetProps) => { }, [theme]); return ( - - {children} - +
+ + {children} + +
); }; From bf85d671c0b5d786265ac8d8200b6c0c152f084e Mon Sep 17 00:00:00 2001 From: Lucian Hymer Date: Tue, 28 Jan 2025 07:11:43 -0700 Subject: [PATCH 2/6] feat: switched to building with webpack --- package.json | 23 +++- src/components/ScrollableDiv.module.css | 5 +- src/widgets/PassportScoreWidget.module.css | 17 --- src/widgets/Widget.module.css | 7 ++ webpack.config.js | 125 +++++++++++++++++++++ 5 files changed, 155 insertions(+), 22 deletions(-) create mode 100644 webpack.config.js diff --git a/package.json b/package.json index 50f3494..edbe481 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "module": "./dist/esm/index.js", "types": "./dist/index.d.ts", "private": false, + "sideEffects": false, "browserslist": [ ">0.2%", "not dead", @@ -32,9 +33,8 @@ "dist" ], "scripts": { - "build": "npm run build:esm && npm run build:cjs && npm run build:types", - "build:esm": "tsc --module ESNext --outDir dist/esm && postcss 'src/**/*.css' -d dist/esm/ --base src", - "build:cjs": "tsc --module CommonJS --outDir dist/cjs && postcss 'src/**/*.css' -d dist/cjs/ --base src", + "build": "npm run build:bundle && npm run build:types", + "build:bundle": "webpack", "build:types": "tsc --declaration --declarationDir dist --emitDeclarationOnly", "dev": "cd example && yarn dev", "watch:css": "postcss 'src/**/*.css' -d dist/esm/ --base src --watch", @@ -45,13 +45,28 @@ "react-dom": "^18.0.0" }, "devDependencies": { + "@babel/core": "^7.26.7", + "@babel/plugin-transform-runtime": "^7.25.9", + "@babel/preset-env": "^7.26.7", + "@babel/preset-react": "^7.26.3", + "@babel/preset-typescript": "^7.26.0", + "@babel/runtime": "^7.26.7", + "@babel/runtime-corejs3": "^7.26.7", "@testing-library/react": "^16.0.1", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "autoprefixer": "^10.4.20", + "babel-loader": "^9.2.1", + "core-js": "3", + "css-loader": "^7.1.2", "postcss": "^8.4.47", "postcss-cli": "^11.0.0", - "typescript": "^5.6.3" + "postcss-loader": "^8.1.1", + "style-loader": "^4.0.0", + "terser-webpack-plugin": "^5.3.11", + "typescript": "^5.6.3", + "webpack": "^5.97.1", + "webpack-cli": "^6.0.1" }, "dependencies": { "@tanstack/react-query": "^5.62.11", diff --git a/src/components/ScrollableDiv.module.css b/src/components/ScrollableDiv.module.css index 208ba90..d749fb4 100644 --- a/src/components/ScrollableDiv.module.css +++ b/src/components/ScrollableDiv.module.css @@ -1,6 +1,9 @@ .scrollableDiv { display: grid; - place-items: center; +} + +.scrollableDiv > * { + place-self: center; } .scrollableDiv:hover .scrollIndicator { diff --git a/src/widgets/PassportScoreWidget.module.css b/src/widgets/PassportScoreWidget.module.css index ca349e1..a6e784d 100644 --- a/src/widgets/PassportScoreWidget.module.css +++ b/src/widgets/PassportScoreWidget.module.css @@ -9,13 +9,6 @@ color: rgba(var(--color-primary-c6dbf459), 1); border-radius: var(--widget-radius-c6dbf459); - /* Will be 320 x 300 unless screen - * is too narrow, in which case it - * will get narrower (match screen - * width) and taller */ - width: 100%; - max-width: 320px; - position: relative; } @@ -48,13 +41,3 @@ .visible { transition: opacity var(--transition-speed-c6dbf459) ease; } - -.centerChildren { - display: grid; - place-items: center; -} - -.centerChildren > * { - grid-row: 1; - grid-column: 1; -} diff --git a/src/widgets/Widget.module.css b/src/widgets/Widget.module.css index 04e1190..3ab0199 100644 --- a/src/widgets/Widget.module.css +++ b/src/widgets/Widget.module.css @@ -27,4 +27,11 @@ --font-family-heading-c6dbf459: "Poppins", sans-serif; --font-family-alt-c6dbf459: "DM Mono", sans-serif; --position-overlay-z-index-c6dbf459: 10; + + /* Width will be 320 unless screen + * is too narrow, in which case it + * will get narrower (match screen + * width) and taller */ + width: 100%; + max-width: 320px; } diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..1209610 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,125 @@ +import path from "path"; +import { fileURLToPath } from "url"; +import TerserPlugin from "terser-webpack-plugin"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const createConfig = (target) => ({ + entry: "./src/index.tsx", + mode: "production", + target: ["web", "es2018"], + devtool: "source-map", + + output: { + path: path.resolve(__dirname, `dist/${target}`), + filename: "index.js", + library: { + type: target === "cjs" ? "commonjs2" : "module", + name: target === "cjs" ? "PassportEmbed" : undefined, // Add UMD name for better compatibility + }, + clean: true, + globalObject: "this", + }, + experiments: { + outputModule: target === "esm", + }, + externals: [/^react($|\/)/, "react-dom"], + resolve: { + extensions: [".ts", ".tsx", ".js", ".jsx", ".css"], + mainFields: ["module", "main"], // Prioritize ES modules when importing this + }, + module: { + rules: [ + { + test: /\.(ts|tsx)$/, + exclude: /node_modules/, + use: { + loader: "babel-loader", + options: { + presets: [ + [ + "@babel/preset-env", + { + targets: ">0.2%, not dead, last 2 versions, not IE 11", + modules: false, // Preserve ES modules + useBuiltIns: "usage", + corejs: 3, + }, + ], + [ + "@babel/preset-react", + { + runtime: "automatic", + }, + ], + "@babel/preset-typescript", + ], + plugins: [ + [ + "@babel/plugin-transform-runtime", + { + corejs: 3, + helpers: true, + regenerator: true, + }, + ], + ], + }, + }, + }, + { + test: /\.css$/, + use: [ + "style-loader", + { + loader: "css-loader", + options: { + importLoaders: 1, + modules: { + namedExport: false, + localIdentName: "[name]__[local]--[hash:base64:5]", + }, + sourceMap: true, // Enable CSS source maps + }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "autoprefixer", + { + grid: true, + }, + ], + ], + }, + sourceMap: true, // Enable PostCSS source maps + }, + }, + ], + }, + ], + }, + optimization: { + minimize: true, + minimizer: [ + new TerserPlugin({ + terserOptions: { + compress: { + drop_console: false, // Keep console logs + }, + format: { + comments: false, + }, + }, + extractComments: false, + parallel: true, + }), + ], + }, +}); + +export default [createConfig("esm"), createConfig("cjs")]; From 1cb3df6e3c02d942f12e547a56a4b17bfa6519d0 Mon Sep 17 00:00:00 2001 From: Lucian Hymer Date: Wed, 29 Jan 2025 10:58:37 -0700 Subject: [PATCH 3/6] feat: added optional className param --- src/widgets/Widget.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/widgets/Widget.tsx b/src/widgets/Widget.tsx index 8afdb06..b52c770 100644 --- a/src/widgets/Widget.tsx +++ b/src/widgets/Widget.tsx @@ -8,6 +8,7 @@ export type GenericPassportWidgetProps = { children?: React.ReactNode; theme?: PassportWidgetTheme; collapseMode?: CollapseMode; + className?: string; }; export type PassportWidgetTheme = { @@ -43,13 +44,17 @@ export type PassportWidgetTheme = { }; }; -export const Widget = ({ children, theme }: GenericPassportWidgetProps) => { +export const Widget = ({ + children, + theme, + className, +}: GenericPassportWidgetProps) => { useEffect(() => { setTheme(theme); }, [theme]); return ( -
+
{children} From ec398aadb33a38dfdc8167bfa5d764e29e969b73 Mon Sep 17 00:00:00 2001 From: Lucian Hymer Date: Wed, 29 Jan 2025 17:48:51 -0700 Subject: [PATCH 4/6] don't show pointer over header if not collapsible --- src/components/Header.module.css | 4 ++++ src/components/Header.tsx | 6 +++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/Header.module.css b/src/components/Header.module.css index 463f322..d84bc9a 100644 --- a/src/components/Header.module.css +++ b/src/components/Header.module.css @@ -36,6 +36,10 @@ cursor: pointer; } +.containerNoCollapseButton { + cursor: default; +} + .bodyExpanded { border-bottom-left-radius: 0; border-bottom-right-radius: 0; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 97e5aef..3057cde 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -67,7 +67,11 @@ export const Header = ({