refactor: improve responsive design (#49)

* refactor: import * as React * refactor: fix svg on mobile * fix: generate correct example code * fix: add width and height to svg elements
lmsqueezy · Jan 15, 2024 · fc57c93 · fc57c93
1 parent 2c1d949
commit fc57c93
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 27 deletions.
diff --git a/.changeset/rude-phones-share.md b/.changeset/rude-phones-share.md
@@ -0,0 +1,5 @@
+---
+"@lemonsqueezy/wedges": patch
+---
+
+fix Loading component not showing on mobile devices
diff --git a/apps/docs/src/examples/index.ts b/apps/docs/src/examples/index.ts
@@ -1621,23 +1621,27 @@ export function Example() {
     component: lazy(() => import("@/examples/kbd/example-1.tsx")),
     code: `import { Kbd } from "@lemonsqueezy/wedges";
 
-<div className="inline-flex items-center gap-4">
-  <Kbd keys={["option", "command"]} size="xs">
-    W
-  </Kbd>
-
-  <Kbd keys={["option", "command"]} size="sm">
-    D
-  </Kbd>
-
-  <Kbd keys={["option", "command"]} size="md">
-    G
-  </Kbd>
-
-  <Kbd keys={["option", "command"]} size="lg">
-    S
-  </Kbd>
-</div>;
+export function Example() {
+  return (
+    <div className="inline-flex items-center gap-4">
+      <Kbd keys={["option", "command"]} size="xs">
+        W
+      </Kbd>
+
+      <Kbd keys={["option", "command"]} size="sm">
+        D
+      </Kbd>
+
+      <Kbd keys={["option", "command"]} size="md">
+        G
+      </Kbd>
+
+      <Kbd keys={["option", "command"]} size="lg">
+        S
+      </Kbd>
+    </div>
+  );
+}
 `,
   },
   "kbd/preview": {

diff --git a/packages/wedges/src/components/Avatar/Avatar.test.tsx b/packages/wedges/src/components/Avatar/Avatar.test.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import React from "react";
+import * as React from "react";
 import { render, type RenderResult } from "@testing-library/react";
 
 import Avatar from "./Avatar";

diff --git a/packages/wedges/src/components/AvatarGroup/AvatarGroup.test.tsx b/packages/wedges/src/components/AvatarGroup/AvatarGroup.test.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { render } from "@testing-library/react";
 
 import { AvatarGroup } from ".";

diff --git a/packages/wedges/src/components/Badge/Badge.test.tsx b/packages/wedges/src/components/Badge/Badge.test.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { render } from "@testing-library/react";
 
 import { Badge } from ".";

diff --git a/packages/wedges/src/components/Label/Label.tsx b/packages/wedges/src/components/Label/Label.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 

diff --git a/packages/wedges/src/components/Loading/Loading.tsx b/packages/wedges/src/components/Loading/Loading.tsx
@@ -56,21 +56,24 @@ const Loading = React.forwardRef<LoadingElement, LoadingProps>((props, ref) => {
 
   switch (type) {
     case "line":
-      element = <Line className="animate-spin will-change-transform" size={size} />;
+      element = <Line className="h-full w-full animate-spin will-change-transform" size={size} />;
       break;
 
     case "spinner":
       element = (
         <Spinner
-          className="animate-[spin_.6s_ease-in-out_infinite] will-change-transform"
+          className="h-full w-full animate-[spin_.6s_ease-in-out_infinite] will-change-transform"
           size={size}
         />
       );
       break;
 
     case "dots":
       element = (
-        <Dots className="animate-[spin_1.25s_linear_infinite] will-change-transform" size={size} />
+        <Dots
+          className="h-full w-full animate-[spin_1.25s_linear_infinite] will-change-transform"
+          size={size}
+        />
       );
       break;
   }

diff --git a/packages/wedges/src/components/Tag/Tag.test.tsx b/packages/wedges/src/components/Tag/Tag.test.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { jest } from "@jest/globals";
 import { fireEvent, render } from "@testing-library/react";
 

diff --git a/packages/wedges/src/components/icons/types.ts b/packages/wedges/src/components/icons/types.ts
@@ -1,7 +1,8 @@
-import { type SVGProps } from "react";
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+import * as React from "react";
 
 export type IconProps = {
   color?: string;
   size?: number;
   title?: string;
-} & SVGProps<SVGSVGElement>;
+} & React.SVGProps<SVGSVGElement>;