fix(wedges): fix dependencies & styling issues (#38)

lmsqueezy · Dec 22, 2023 · 6f85539 · 6f85539
1 parent 5a5a45e
commit 6f85539
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 126 deletions.
diff --git a/.changeset/funny-goats-bow.md b/.changeset/funny-goats-bow.md
@@ -0,0 +1,5 @@
+---
+"@lemonsqueezy/wedges": patch
+---
+
+fix wrong padding for the Alert component
diff --git a/.changeset/spotty-apes-cross.md b/.changeset/spotty-apes-cross.md
@@ -0,0 +1,5 @@
+---
+"@lemonsqueezy/wedges": patch
+---
+
+fix missing dependencies in package.json
diff --git a/packages/wedges/package.json b/packages/wedges/package.json
@@ -42,14 +42,14 @@
     "README.md"
   ],
   "type": "module",
-  "main": "./dist/cjs/index.js",
+  "main": "./dist/cjs/index.cjs",
   "types": "./dist/cjs/index.d.cts",
   "module": "./dist/esm/index.js",
   "exports": {
     ".": {
       "require": {
         "types": "./dist/cjs/index.d.cts",
-        "default": "./dist/cjs/index.js"
+        "default": "./dist/cjs/index.cjs"
       },
       "import": {
         "types": "./dist/esm/index.d.ts",
@@ -75,17 +75,13 @@
     "@types/color": "^3.0.6",
     "@types/lodash.omit": "^4.5.9",
     "@wedges/eslint-config": "workspace:*",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
     "concurrently": "^8.2.2",
-    "lodash.omit": "^4.5.0",
     "prettier-plugin-tailwindcss": "^0.5.9",
-    "tailwind-merge": "^2.1.0",
     "tsup": "^8.0.1"
   },
   "dependencies": {
     "@iconicicons/react": "latest",
-    "@radix-ui/react-avatar": "latest",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
@@ -96,10 +92,14 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "class-variance-authority": "^0.7.0",
     "color": "^4.2.3",
     "color2k": "^2.0.3",
     "deepmerge": "^4.3.1",
-    "flat": "^6.0.1"
+    "tailwind-merge": "^2.2.0",
+    "clsx": "^2.0.0",
+    "flat": "^6.0.1",
+    "lodash.omit": "^4.5.0"
   },
   "peerDependencies": {
     "@types/react": "*",

diff --git a/packages/wedges/src/components/Alert/Alert.tsx b/packages/wedges/src/components/Alert/Alert.tsx
@@ -8,7 +8,7 @@ import { CloseIcon, InfoIcon } from "../icons";
 import { alertIconVariants, alertTitleVariants, alertVariants } from "./variants";
 
 const defaultRootClasses =
-  "wg-antialiased flex text-sm leading-6 gap-2 bg-surface dark:bg-surface dark:text-surface-500 p-3 items-start";
+  "wg-antialiased flex text-sm leading-6 bg-surface dark:bg-surface dark:text-surface-500 items-start";
 
 /* ---------------------------------- Types --------------------------------- */
 type ClosableProps = {
@@ -95,7 +95,6 @@ const AlertWedges = React.forwardRef<HTMLDivElement, AlertProps>(
     ref
   ) => {
     const [visible, setVisible] = React.useState(true);
-    const ExpandedWrapper = variant === "inline" ? React.Fragment : "div";
 
     /**
      * Handle the close event.
@@ -125,19 +124,28 @@ const AlertWedges = React.forwardRef<HTMLDivElement, AlertProps>(
         className={cn(alertVariants({ variant, color }), className)}
         {...otherProps}
       >
-        <AlertBefore color={color}>{before}</AlertBefore>
+        <AlertBefore className={cn(variant === "inline" && "pl-1")} color={color}>
+          {before}
+        </AlertBefore>
 
         <div
           className={cn(
             "flex grow flex-col items-start",
-            variant === "expanded" && "items-start gap-3",
-            variant === "inline" && "sm:flex-row sm:items-center sm:gap-2"
+            variant === "expanded" && "items-start gap-3 px-2",
+            variant === "inline" && "px-2 sm:flex-row sm:items-center sm:gap-2",
+            variant === "inline" && closable && "pr-1"
           )}
         >
-          <ExpandedWrapper>
+          <div
+            className={cn(
+              "flex grow flex-col items-start",
+              variant === "expanded" && "items-start",
+              variant === "inline" && "sm:flex-row sm:items-center sm:gap-2"
+            )}
+          >
             {title && <AlertTitle color={color}>{title}</AlertTitle>}
             {children && <AlertDescription>{children}</AlertDescription>}
-          </ExpandedWrapper>
+          </div>
 
           {after && (
             <div className={cn(variant === "inline" && "mt-3 sm:ml-auto sm:mt-0")}>
@@ -146,7 +154,9 @@ const AlertWedges = React.forwardRef<HTMLDivElement, AlertProps>(
           )}
         </div>
 
-        {closable && <AlertCloseButton onClick={handleClose} />}
+        {closable && (
+          <AlertCloseButton className={cn(variant === "inline" && "pr-1")} onClick={handleClose} />
+        )}
       </AlertRoot>
     );
   }

diff --git a/packages/wedges/src/components/Alert/variants.ts b/packages/wedges/src/components/Alert/variants.ts
@@ -3,8 +3,8 @@ import { cva } from "class-variance-authority";
 export const alertVariants = cva("", {
   variants: {
     variant: {
-      inline: "rounded-lg sm:items-center",
-      expanded: "items-start rounded-r-lg border-l-2 p-4 pl-14px",
+      inline: "rounded-lg px-2 py-3 sm:items-center",
+      expanded: "gap-1 rounded-r-lg border-l-2 p-4 pl-14px",
     },
     color: {
       gray: "border-surface-200 text-surface-500",

diff --git a/packages/wedges/tsconfig.lint.json b/packages/wedges/tsconfig.lint.json
@@ -3,6 +3,6 @@
   "compilerOptions": {
     "outDir": "./dist/esm"
   },
-  "include": ["src"],
+  "include": ["src", "tsup.config.ts"],
   "exclude": ["node_modules", "dist"]
 }
diff --git a/packages/wedges/tsup.config.ts b/packages/wedges/tsup.config.ts
@@ -1,21 +1,22 @@
 import { defineConfig } from "tsup";
 
-export default defineConfig((options) => ({
-  entry: ["src/index.ts"],
-  name: "🍋 wedges",
-  tsconfig: `tsconfig-${options.format ?? "esm"}.json`,
-  clean: true,
-  dts: true,
-  format: options.format ?? ["esm"],
-  minify: true,
-  silent: true,
-  sourcemap: true,
-  outDir: `dist/${options.format ?? "esm"}`,
-  banner: { js: '"use client";' },
-  outExtension() {
-    return {
-      js: ".js",
-      dts: ".d.ts",
-    };
-  },
-}));
+export default defineConfig((options) => {
+  // Convert format to string
+  const formatString = Array.isArray(options.format)
+    ? options.format.join("-")
+    : options.format ?? "esm";
+
+  return {
+    entry: ["src/index.ts"],
+    name: "🍋 wedges",
+    tsconfig: `tsconfig-${formatString ?? "esm"}.json`,
+    clean: true,
+    dts: true,
+    format: options.format ?? ["esm"],
+    minify: true,
+    silent: true,
+    sourcemap: true,
+    outDir: `dist/${formatString ?? "esm"}`,
+    banner: { js: '"use client";' },
+  };
+});