Merge pull request Weaverse#120 from Weaverse/dev

Refactor, update Weaverse v3.1.9

.eslintrc.cjs

@@ -2,9 +2,7 @@
  * @type {import("@types/eslint").Linter.BaseConfig}
  */
 module.exports = {
-  extends: [
-    "@remix-run/eslint-config",
-  ],
+  extends: ["@remix-run/eslint-config"],
   rules: {
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/naming-convention": "off",
@@ -15,35 +13,7 @@ module.exports = {
     // TODO: Remove jest plugin from hydrogen/eslint-plugin
     "jest/no-deprecated-functions": "off",
     "react/display-name": "off",
-    "import/order": [
-      "warn",
-      {
-        /**
-         * @description
-         *
-         * This keeps imports separate from one another, ensuring that imports are separated
-         * by their relative groups. As you move through the groups, imports become closer
-         * to the current file.
-         *
-         * @example
-         * ```
-         * import fs from 'fs';
-         *
-         * import package from 'npm-package';
-         *
-         * import xyz from '~/project-file';
-         *
-         * import index from '../';
-         *
-         * import sibling from './foo';
-         * ```
-         */
-        groups: ["builtin", "external", "internal", "parent", "sibling"],
-        "newlines-between": "always",
-      },
-    ],
     "prefer-const": "off",
-    "jsx-a11y/click-events-have-key-events": "warn",
     "jsx-a11y/no-static-element-interactions": "warn",
     "jsx-a11y/label-has-associated-control": "warn",
   },

CHANGELOG.md

@@ -1,5 +1,18 @@
 # @weaverse/pilot
 
+## 2.6.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @weaverse/hydrogen@3.1.9
+
+## 2.6.7
+
+### Patch Changes
+
+- @weaverse/hydrogen@3.1.8
+
 ## 2.6.6
 
 ### Patch Changes

app/components/Button.tsx

@@ -1,61 +1,138 @@
+import type {
+  InspectorGroup,
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+} from "@weaverse/hydrogen";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Link } from "@remix-run/react";
-import clsx from "clsx";
+import { Link } from "~/modules";
 
-import { missingClass } from "~/lib/utils";
+export interface ButtonProps extends VariantProps<typeof variants> {
+  as?: keyof HTMLElementTagNameMap;
+  className?: string;
+  text: string;
+  link?: string;
+  openInNewTab?: boolean;
+}
 
-export const Button = forwardRef(
-  (
-    {
-      as = "button",
-      className = "",
-      variant = "primary",
-      width = "auto",
-      ...props
-    }: {
-      as?: React.ElementType;
-      className?: string;
-      variant?: "primary" | "secondary" | "inline" | "secondary-white";
-      width?: "auto" | "full";
-      [key: string]: any;
+let variants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap text-base font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "btn-primary border-2 px-5 py-3",
+        secondary: "btn-secondary border-2 px-5 py-3",
+        link: "btn-link bg-transparent py-2 border-b-2",
+      },
+      shape: {
+        square: "",
+        rounded: "rounded-md",
+        pill: "rounded-full",
+      },
+      weight: {
+        medium: "font-medium",
+        semibold: "font-semibold",
+        bold: "font-bold",
+      },
     },
-    ref,
-  ) => {
-    const Component = props?.to ? Link : as;
-
-    const baseButtonClasses =
-      "inline-block rounded font-medium text-center py-3 px-4 text-sm font-medium";
-
-    const disabledClasses =
-      "disabled:opacity-50 disabled:cursor-not-allowed disabled:select-none disabled:hover:bg-btn disabled:hover:text-btn-content";
-
-    const variants = {
-      primary: `${baseButtonClasses} border-2 border-btn hover:bg-inv-btn hover:text-inv-btn-content bg-btn text-btn-content`,
-      secondary: `${baseButtonClasses} border-2 border-btn text-btnTextInverse hover:bg-btn hover:text-btn-content`,
-      "secondary-white": `${baseButtonClasses} border-2 border-inv-btn text-btn hover:bg-inv-btn hover:text-inv-btn-content`,
-      inline: "border-b border-bar/10 leading-none pb-1",
-    };
-
-    const widths = {
-      auto: "w-auto",
-      full: "w-full",
-    };
-
-    const styles = clsx(
-      missingClass(className, "bg-") && variants[variant],
-      missingClass(className, "w-") && widths[width],
-      disabledClasses,
-      className,
-    );
+    defaultVariants: {
+      variant: "primary",
+      shape: "rounded",
+      weight: "medium",
+    },
+  },
+);
 
+interface Props extends ButtonProps, Partial<HydrogenComponentProps> {}
+
+let Button = forwardRef<HTMLElement, Props>((props, ref) => {
+  let {
+    // as = "button",
+    variant,
+    // shape = "rounded",
+    // weight = "medium",
+    text,
+    link,
+    openInNewTab,
+    className,
+    ...rest
+  } = props;
+
+  if (link) {
     return (
-      <Component
-        // @todo: not supported until react-router makes it into Remix.
-        // preventScrollReset={true}
-        className={styles}
-        {...props}
-        ref={ref}
-      />
+      <Link
+        ref={ref as React.ForwardedRef<HTMLAnchorElement>}
+        {...rest}
+        className={clsx(variants({ variant: variant, className }))}
+        to={link || "/"}
+        target={openInNewTab ? "_blank" : "_self"}
+        rel="noreferrer"
+      >
+        {text}
+      </Link>
     );
+  }
+  return (
+    <button
+      ref={ref as React.ForwardedRef<HTMLButtonElement>}
+      {...rest}
+      type="button"
+      className={clsx(variants({ variant: variant, className }))}
+    >
+      {text}
+    </button>
+  );
+});
+
+export default Button;
+
+export let buttonInputs: InspectorGroup["inputs"] = [
+  {
+    type: "text",
+    name: "text",
+    label: "Text content",
+    defaultValue: "Shop now",
+    placeholder: "Shop now",
   },
-);
+  {
+    type: "url",
+    name: "link",
+    label: "Link to",
+    defaultValue: "/products",
+    placeholder: "/products",
+  },
+  {
+    type: "switch",
+    name: "openInNewTab",
+    label: "Open in new tab",
+    defaultValue: false,
+    condition: "buttonLink.ne.nil",
+  },
+  {
+    type: "select",
+    name: "variant",
+    label: "Variant",
+    configs: {
+      options: [
+        { label: "Primary", value: "primary" },
+        { label: "Secondary", value: "secondary" },
+        { label: "Link", value: "link" },
+      ],
+    },
+    defaultValue: "primary",
+  },
+];
+
+export let schema: HydrogenComponentSchema = {
+  type: "button",
+  title: "Button",
+  inspector: [
+    {
+      group: "Button",
+      inputs: buttonInputs,
+    },
+  ],
+  toolbar: ["general-settings", ["duplicate", "delete"]],
+};

app/components/index.ts

@@ -1,24 +1,13 @@
-export { Layout } from "./Layout";
-export { Drawer, useDrawer } from "./Drawer";
-export { Heading, Section, Text, PageHeader } from "./Text";
-export { Input } from "./Input";
-export { ProductGallery } from "./ProductGallery";
-export { ProductCard } from "./ProductCard";
-export { ProductSwimlane } from "./ProductSwimlane";
-export { Skeleton } from "./Skeleton";
-export { Button } from "./Button";
-export { CountrySelector } from "./CountrySelector";
-export { Cart } from "./Cart";
-export { CartLoading } from "./CartLoading";
-export { OrderCard } from "./OrderCard";
-export { AccountDetails } from "./AccountDetails";
-export { AccountAddressBook } from "./AccountAddressBook";
-export { Modal } from "./Modal";
-export { Link } from "./Link";
-export { FeaturedCollections } from "./FeaturedCollections";
-export { Hero } from "./Hero";
-export { SortFilter } from "./SortFilter";
-export { Grid } from "./Grid";
-export { FeaturedProducts } from "./FeaturedProducts";
-export { AddToCartButton } from "./AddToCartButton";
-export * from "./Icon";
+import type { HydrogenComponent } from "@weaverse/hydrogen";
+
+import * as Heading from "./Heading";
+import * as SubHeading from "./SubHeading";
+import * as Description from "./Description";
+import * as Button from "./Button";
+
+export let sharedComponents: HydrogenComponent[] = [
+  SubHeading,
+  Heading,
+  Description,
+  Button,
+];

app/components/AccountAddressBook.tsx → app/modules/AccountAddressBook.tsx

@@ -2,7 +2,7 @@ import { Form } from "@remix-run/react";
 import type { CustomerAddress } from "@shopify/hydrogen/customer-account-api-types";
 
 import type { CustomerDetailsFragment } from "customer-accountapi.generated";
-import { Button, Link, Text } from "~/components";
+import { Button, Link, Text } from "~/modules";
 
 export function AccountAddressBook({
   customer,

app/components/AccountDetails.tsx → app/modules/AccountDetails.tsx

@@ -1,5 +1,5 @@
 import type { CustomerDetailsFragment } from "customer-accountapi.generated";
-import { Link } from "~/components";
+import { Link } from "~/modules";
 
 export function AccountDetails({
   customer,

app/components/AddToCartButton.tsx → app/modules/AddToCartButton.tsx

@@ -9,7 +9,7 @@ import {
 import type { FetcherWithComponents } from "@remix-run/react";
 import { useEffect } from "react";
 
-import { Button } from "~/components";
+import { Button } from "~/modules";
 import { usePageAnalytics } from "~/hooks/usePageAnalytics";
 
 export function AddToCartButton({

app/modules/Button.tsx

@@ -0,0 +1,61 @@
+import { forwardRef } from "react";
+import { Link } from "@remix-run/react";
+import clsx from "clsx";
+
+import { missingClass } from "~/lib/utils";
+
+export const Button = forwardRef(
+  (
+    {
+      as = "button",
+      className = "",
+      variant = "primary",
+      width = "auto",
+      ...props
+    }: {
+      as?: React.ElementType;
+      className?: string;
+      variant?: "primary" | "secondary" | "inline" | "secondary-white";
+      width?: "auto" | "full";
+      [key: string]: any;
+    },
+    ref,
+  ) => {
+    const Component = props?.to ? Link : as;
+
+    const baseButtonClasses =
+      "inline-block rounded font-medium text-center py-3 px-4 text-sm font-medium";
+
+    const disabledClasses =
+      "disabled:opacity-50 disabled:cursor-not-allowed disabled:select-none disabled:hover:bg-btn disabled:hover:text-btn-content";
+
+    const variants = {
+      primary: `${baseButtonClasses} border-2 border-btn hover:bg-inv-btn hover:text-inv-btn-content bg-btn text-btn-content`,
+      secondary: `${baseButtonClasses} border-2 border-btn text-btnTextInverse hover:bg-btn hover:text-btn-content`,
+      "secondary-white": `${baseButtonClasses} border-2 border-inv-btn text-btn hover:bg-inv-btn hover:text-inv-btn-content`,
+      inline: "border-b border-bar/10 leading-none pb-1",
+    };
+
+    const widths = {
+      auto: "w-auto",
+      full: "w-full",
+    };
+
+    const styles = clsx(
+      missingClass(className, "bg-") && variants[variant],
+      missingClass(className, "w-") && widths[width],
+      disabledClasses,
+      className,
+    );
+
+    return (
+      <Component
+        // @todo: not supported until react-router makes it into Remix.
+        // preventScrollReset={true}
+        className={styles}
+        {...props}
+        ref={ref}
+      />
+    );
+  },
+);

app/components/Cart.tsx → app/modules/Cart.tsx

@@ -24,7 +24,7 @@ import {
   Text,
   Link,
   FeaturedProducts,
-} from "~/components";
+} from "~/modules";
 import { getInputStyleClasses } from "~/lib/utils";
 
 type Layouts = "page" | "drawer";