From 567353f2fd0b1aa6f4dc65ab4945dc34b249c328 Mon Sep 17 00:00:00 2001 From: hta218 Date: Mon, 25 Nov 2024 11:24:15 +0700 Subject: [PATCH 01/14] Add new color options to theme schema and refactor color handling in GlobalStyle for improved visual updates --- app/weaverse/schema.server.ts | 62 +++++++++++++++++++---------------- app/weaverse/style.tsx | 53 +++++++++++------------------- 2 files changed, 54 insertions(+), 61 deletions(-) diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts index 2c0acaeb..ab52d529 100644 --- a/app/weaverse/schema.server.ts +++ b/app/weaverse/schema.server.ts @@ -262,6 +262,12 @@ export let themeSchema: HydrogenThemeSchema = { type: "heading", label: "General", }, + { + type: "color", + label: "Background", + name: "colorBackground", + defaultValue: "#ffffff", + }, { type: "color", label: "Text", @@ -270,15 +276,15 @@ export let themeSchema: HydrogenThemeSchema = { }, { type: "color", - label: "Background", - name: "colorBackground", - defaultValue: "#ffffff", + label: "Text (subtle)", + name: "colorTextSubtle", + defaultValue: "#88847F", }, { type: "color", - label: "Foreground", - name: "colorForeground", - defaultValue: "#e5e7eb", + label: "Text (inverse)", + name: "colorTextInverse", + defaultValue: "#fff", }, { type: "color", @@ -384,41 +390,31 @@ export let themeSchema: HydrogenThemeSchema = { }, { type: "heading", - label: "Drawers and popovers", + label: "Labels / badges / tags", }, { type: "color", - label: "Background color", - name: "drawersBg", - defaultValue: "#ffffff", - }, - { - type: "heading", - label: "Product", + label: "Discounts", + name: "discountBadge", + defaultValue: "#c6512c", }, { type: "color", - label: "Compare price text", - name: "comparePriceTextColor", - defaultValue: "#737373", - }, - { - type: "color", - label: "Sale tags", - name: "saleTagColor", - defaultValue: "#dc2626", + label: "New", + name: "newBadge", + defaultValue: "#67785d", }, { type: "color", - label: "New tags", - name: "newTagColor", - defaultValue: "#4d4d4d", + label: "Hot / Best seller", + name: "bestSellerBadge", + defaultValue: "#000000", }, { type: "color", label: "Other tags", - name: "otherTagColor", - defaultValue: "#1e293b", + name: "otherBadges", + defaultValue: "#000000", }, { type: "color", @@ -426,6 +422,16 @@ export let themeSchema: HydrogenThemeSchema = { name: "soldOutAndUnavailable", defaultValue: "#d4d4d4", }, + { + type: "heading", + label: "Others", + }, + { + type: "color", + label: "Compare price text", + name: "comparePriceTextColor", + defaultValue: "#84807B", + }, { type: "color", label: "Star rating", diff --git a/app/weaverse/style.tsx b/app/weaverse/style.tsx index 5bd8acdc..0a157cab 100644 --- a/app/weaverse/style.tsx +++ b/app/weaverse/style.tsx @@ -1,31 +1,14 @@ import { useThemeSettings } from "@weaverse/hydrogen"; - -function hexToPercent(hex: string) { - let num = Number.parseInt(hex, 16); - return Math.floor((num / 255) * 100); -} - -function hexToRgbString(hexColor = ""): string { - if (!hexColor) return ""; - let hex = hexColor.replace("#", ""); - if (hex.length === 3) { - hex = hex.replace(/(.)/g, "$1$1"); - } - let r = Number.parseInt(hex.substring(0, 2), 16) || 0; - let g = Number.parseInt(hex.substring(2, 4), 16) || 0; - let b = Number.parseInt(hex.substring(4, 6), 16) || 0; - let a = hexToPercent(hex.substring(6, 8)) || 0; - let val = `${r} ${g} ${b}`; - return `${val}${a ? ` / ${a}%` : ""}`.trim(); -} +import { colord } from "colord"; export function GlobalStyle() { let settings = useThemeSettings(); if (settings) { let { - colorText, colorBackground, - colorForeground, + colorText, + colorTextSubtle, + colorTextInverse, colorLine, topbarTextColor, topbarBgColor, @@ -39,11 +22,11 @@ export function GlobalStyle() { buttonSecondaryBg, buttonSecondaryColor, buttonOutlineTextAndBorder, - drawersBg, comparePriceTextColor, - saleTagColor, - newTagColor, - otherTagColor, + discountBadge, + newBadge, + bestSellerBadge, + otherBadges, soldOutAndUnavailable, starRating, bodyBaseSize, @@ -70,10 +53,14 @@ export function GlobalStyle() { --page-width: ${pageWidth}px; /* Colors (general) */ - --color-text: ${hexToRgbString(colorText)}; - --color-background: ${hexToRgbString(colorBackground)}; - --color-foreground: ${hexToRgbString(colorForeground)}; - --color-line: ${hexToRgbString(colorLine)}; + --color-background: ${colorBackground}; + --color-text: ${colorText}; + --color-text-subtle: ${colorTextSubtle}; + --color-text-inverse: ${colorTextInverse}; + --color-line: ${colorLine}; + --color-line-subtle: ${colord(colorLine).lighten(0.3).toHex()}; + + /* Colors (header & footer) */ --color-topbar-text: ${topbarTextColor}; --color-topbar-bg: ${topbarBgColor}; --color-header-bg: ${headerBgColor}; @@ -90,11 +77,11 @@ export function GlobalStyle() { --btn-outline-text: ${buttonOutlineTextAndBorder}; /* Colors (product) */ - --color-drawers-bg: ${drawersBg}; --color-compare-price-text: ${comparePriceTextColor}; - --color-sale-tag: ${saleTagColor}; - --color-new-tag: ${newTagColor}; - --color-other-tag: ${otherTagColor}; + --color-discount: ${discountBadge}; + --color-new-badge: ${newBadge}; + --color-best-seller: ${bestSellerBadge}; + --color-other-badges: ${otherBadges}; --color-sold-out-and-unavailable: ${soldOutAndUnavailable}; --color-star-rating: ${starRating}; From 27b0d809f5cd80e02400dd81acd5a65a4111f638 Mon Sep 17 00:00:00 2001 From: hta218 Date: Mon, 25 Nov 2024 11:24:43 +0700 Subject: [PATCH 02/14] Refactor color definitions in tailwind config for better clarity and introduce new subtle color variants --- tailwind.config.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index bd944f45..4616c283 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -71,10 +71,12 @@ export default { 6: "6px", }, colors: { - body: "rgb(var(--color-text) / )", - background: "rgb(var(--color-background) / )", - foreground: "rgb(var(--color-foreground) / )", - line: "rgb(var(--color-line) / )", + body: "var(--color-text)", + "body-subtle": "var(--color-text-subtle)", + "body-inverse": "var(--color-text-inverse)", + background: "var(--color-background)", + line: "var(--color-line)", + "line-subtle": "var(--color-line-subtle)", }, outlineOffset: { 3: "3px", From b7ccb59240c448b40b2874eb824353a44eea1adc Mon Sep 17 00:00:00 2001 From: hta218 Date: Mon, 25 Nov 2024 11:25:05 +0700 Subject: [PATCH 03/14] Update root style --- app/root.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/root.tsx b/app/root.tsx index 1f44637f..d71ae34e 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -181,7 +181,7 @@ function Layout({ children }: { children?: React.ReactNode }) { "--initial-topbar-height": `${topbarText ? topbarHeight : 0}px`, } as CSSProperties } - className="transition-opacity !opacity-100 duration-300" + className="transition-opacity !opacity-100 duration-300 antialiased bg-background text-body" > {data ? ( Date: Mon, 25 Nov 2024 11:25:30 +0700 Subject: [PATCH 04/14] Refactor color usage across components to use subtle variants, enhancing visual consistency throughout the application --- app/components/skeleton.tsx | 2 +- app/lib/utils.ts | 4 +- app/modules/account-address-book.tsx | 6 +- app/modules/account-details.tsx | 8 +- app/modules/button.tsx | 2 +- app/modules/cart.tsx | 12 +-- app/modules/country-selector.tsx | 4 +- app/modules/drawer-filter.tsx | 4 +- app/modules/drawer.tsx | 4 +- app/modules/footer.tsx | 2 +- app/modules/header/desktop-header.tsx | 2 +- app/modules/header/menu/desktop-menu.tsx | 2 +- app/modules/input.tsx | 6 +- app/modules/modal.tsx | 4 +- app/modules/order-card.tsx | 12 +-- .../predictive-search-result.tsx | 2 +- app/modules/predictive-search/result-item.tsx | 4 +- app/modules/product-card/index.tsx | 2 +- app/modules/product-form/options.tsx | 5 +- app/modules/product-form/placeholder.tsx | 4 +- app/modules/sort-filter.tsx | 4 +- app/modules/text.tsx | 12 +-- app/routes/($locale).account.orders.$id.tsx | 32 +++--- app/routes/($locale).account.tsx | 2 +- app/sections/all-products.tsx | 4 +- app/sections/blog-post.tsx | 2 +- .../collection-list/collection-card.tsx | 2 +- .../collection-list/collections-items.tsx | 100 ++++++++++++++++++ app/sections/collection-list/index.tsx | 4 +- app/sections/judgeme-reviews/review-form.tsx | 6 +- app/sections/newsletter/newsletter-form.tsx | 4 +- app/sections/product-information/index.tsx | 8 +- .../product-information/product-detail.tsx | 2 +- app/styles/app.css | 4 - package-lock.json | 7 ++ package.json | 1 + 36 files changed, 193 insertions(+), 92 deletions(-) create mode 100644 app/sections/collection-list/collections-items.tsx diff --git a/app/components/skeleton.tsx b/app/components/skeleton.tsx index fb18ced6..fec5bd57 100644 --- a/app/components/skeleton.tsx +++ b/app/components/skeleton.tsx @@ -21,7 +21,7 @@ export function Skeleton({ {...props} width={width} height={height} - className={clsx("rounded animate-pulse bg-body/10", className)} + className={clsx("rounded animate-pulse bg-gray-200", className)} /> ); } diff --git a/app/lib/utils.ts b/app/lib/utils.ts index 36f48ebc..86fa053d 100644 --- a/app/lib/utils.ts +++ b/app/lib/utils.ts @@ -223,11 +223,11 @@ export function parseMenu( } export const INPUT_STYLE_CLASSES = - "appearance-none rounded dark:bg-transparent border focus:border-line/50 focus:ring-0 w-full py-2 px-3 text-body/90 placeholder:text-body/50 leading-tight focus:shadow-outline"; + "appearance-none rounded dark:bg-transparent border focus:border-line focus:ring-0 w-full py-2 px-3 text-body placeholder:text-body leading-tight focus:shadow-outline"; export const getInputStyleClasses = (isError?: string | null) => { return `${INPUT_STYLE_CLASSES} ${ - isError ? "border-red-500" : "border-line/20" + isError ? "border-red-500" : "border-gray-200" }`; }; diff --git a/app/modules/account-address-book.tsx b/app/modules/account-address-book.tsx index 4547417a..d786df6f 100644 --- a/app/modules/account-address-book.tsx +++ b/app/modules/account-address-book.tsx @@ -53,7 +53,7 @@ function Address({
{defaultAddress && (
- + Default
@@ -74,14 +74,14 @@ function Address({
Edit
-
diff --git a/app/modules/account-details.tsx b/app/modules/account-details.tsx index 4610c2e6..73226a74 100644 --- a/app/modules/account-details.tsx +++ b/app/modules/account-details.tsx @@ -12,18 +12,18 @@ export function AccountDetails({
Account
-
Name
+
Name

{fullName || "N/A"}

-
Phone number
+
Phone number

{phoneNumber?.phoneNumber ?? "N/A"}

-
Email address
+
Email address

{emailAddress?.emailAddress ?? "N/A"}

Edit diff --git a/app/modules/button.tsx b/app/modules/button.tsx index daa044da..a3fe07d9 100644 --- a/app/modules/button.tsx +++ b/app/modules/button.tsx @@ -36,7 +36,7 @@ export const Button = forwardRef( 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-line/10 leading-none pb-1", + inline: "border-b border-gray-100 leading-none pb-1", }; const widths = { diff --git a/app/modules/cart.tsx b/app/modules/cart.tsx index ae23944c..0aabe2e7 100644 --- a/app/modules/cart.tsx +++ b/app/modules/cart.tsx @@ -161,7 +161,7 @@ function CartLines({ ref={scrollRef} aria-labelledby="cart-contents" className={clsx([ - y > 0 ? "border-t border-line/50" : "", + y > 0 ? "border-t border-line-subtle" : "", layout === "page" && "flex-grow md:translate-y-4 lg:col-span-2", layout === "drawer" && "px-5 pb-5 overflow-auto transition", ])} @@ -215,9 +215,9 @@ function CartSummary({

@@ -363,13 +363,13 @@ function CartLineQuantityAdjust({ line }: { line: CartLine }) { -
+
diff --git a/app/modules/input.tsx b/app/modules/input.tsx index 443e8cde..533d76ae 100644 --- a/app/modules/input.tsx +++ b/app/modules/input.tsx @@ -20,9 +20,9 @@ let variants = cva( variant: { default: "leading-tight", search: - "px-0 py-2 text-2xl w-full focus:ring-0 border-x-0 border-t-0 transition border-b-2 border-line/10 focus:border-line/50", + "px-0 py-2 text-2xl w-full focus:ring-0 border-x-0 border-t-0 transition border-b-2 border-line focus:border-line-subtle", minisearch: - "hidden md:inline-block text-left lg:text-right border-b transition border-transparent -mb-px border-x-0 border-t-0 appearance-none px-0 py-1 focus:ring-transparent placeholder:opacity-20 placeholder:text-inherit focus:border-line/50", + "hidden md:inline-block text-left lg:text-right border-b transition border-transparent -mb-px border-x-0 border-t-0 appearance-none px-0 py-1 focus:ring-transparent placeholder:opacity-20 placeholder:text-inherit focus:border-line-subtle", error: "border-red-500", }, }, @@ -53,7 +53,7 @@ export let Input = forwardRef( let [focused, setFocused] = useState(false); let commonClasses = clsx( "w-full border px-3 py-3", - focused ? "border-line/50" : "border-line/30", + // focused ? "border-line" : "border-line", className, ); diff --git a/app/modules/modal.tsx b/app/modules/modal.tsx index ab4364e0..6adb611c 100644 --- a/app/modules/modal.tsx +++ b/app/modules/modal.tsx @@ -32,7 +32,7 @@ export function Modal({ aria-modal="true" id="modal-bg" > -
+
diff --git a/app/modules/order-card.tsx b/app/modules/order-card.tsx index 2f7cd389..aeb2a1a2 100644 --- a/app/modules/order-card.tsx +++ b/app/modules/order-card.tsx @@ -15,7 +15,7 @@ export function OrderCard({ order }: { order: OrderCardFragment }) {
  • {lineItems[0].image && ( -
    +
    Order ID
    -

    Order No. {order.number}

    +

    Order No. {order.number}

    Order Date
    -

    +

    {new Date(order.processedAt).toDateString()}

    @@ -56,16 +56,14 @@ export function OrderCard({ order }: { order: OrderCardFragment }) { <>
    Fulfillment Status
    - + {statusMessage(fulfillmentStatus)}
    )} diff --git a/app/modules/predictive-search/predictive-search-result.tsx b/app/modules/predictive-search/predictive-search-result.tsx index 91c2367d..a2063839 100644 --- a/app/modules/predictive-search/predictive-search-result.tsx +++ b/app/modules/predictive-search/predictive-search-result.tsx @@ -21,7 +21,7 @@ export function PredictiveSearchResult({ return (
    )}
    - {vendor &&
    By {vendor}
    } + {vendor && ( +
    By {vendor}
    + )} {styledTitle ? (
    -
    +
    {image && ( onSelectOptionValue(value.value)} - role="listitem" > {value.value} diff --git a/app/modules/product-form/placeholder.tsx b/app/modules/product-form/placeholder.tsx index d6b2fd4b..0a897256 100644 --- a/app/modules/product-form/placeholder.tsx +++ b/app/modules/product-form/placeholder.tsx @@ -32,7 +32,7 @@ export function ProductPlaceholder(props: any) {
    OS @@ -57,7 +57,7 @@ export function ProductPlaceholder(props: any) {
    black diff --git a/app/modules/sort-filter.tsx b/app/modules/sort-filter.tsx index 58580268..4820c88c 100644 --- a/app/modules/sort-filter.tsx +++ b/app/modules/sort-filter.tsx @@ -54,9 +54,7 @@ export function SortFilter({
    diff --git a/app/modules/text.tsx b/app/modules/text.tsx index f04ee127..f7ebda0c 100644 --- a/app/modules/text.tsx +++ b/app/modules/text.tsx @@ -22,10 +22,10 @@ export function Text({ }) { const colors: Record = { default: "inherit", - primary: "text-body/90", - subtle: "text-body/50", + primary: "text-body", + subtle: "text-body", notice: "text-sale", - contrast: "text-body/90", + contrast: "text-body", }; const sizes: Record = { @@ -125,9 +125,9 @@ export function Section({ const dividers = { none: "border-none", - top: "border-t border-line/05", - bottom: "border-b border-line/05", - both: "border-y border-line/05", + top: "border-t border-line-subtle", + bottom: "border-b border-line-subtle", + both: "border-y border-line-subtle", }; const displays = { diff --git a/app/routes/($locale).account.orders.$id.tsx b/app/routes/($locale).account.orders.$id.tsx index 7f44d079..f081beaa 100644 --- a/app/routes/($locale).account.orders.$id.tsx +++ b/app/routes/($locale).account.orders.$id.tsx @@ -29,7 +29,7 @@ export async function loader({ request, context, params }: LoaderFunctionArgs) { const { data, errors } = await context.customerAccount.query( CUSTOMER_ORDER_QUERY, - { variables: { orderId } } + { variables: { orderId } }, ); if (errors?.length || !data?.order?.lineItems) { @@ -84,7 +84,7 @@ export default function OrderRoute() { (acc: number, curr) => { return (acc += Number.parseFloat(curr.allocatedAmount.amount)); }, - 0 + 0, ); totalDiscount += itemDiscount; }); @@ -104,7 +104,7 @@ export default function OrderRoute() {

    Order No. {order.name}

    - Placed on {new Date(order.processedAt!).toDateString()} + Placed on {new Date(order.processedAt).toDateString()}

    @@ -127,7 +127,7 @@ export default function OrderRoute() {
    Product
    {lineItem.title}
    -
    +
    {lineItem.variantTitle}
    @@ -144,14 +144,14 @@ export default function OrderRoute() { discountApp?.title || discountApp?.code; return (
    {discountTitle}
    (- - ) + )
    ); @@ -160,11 +160,11 @@ export default function OrderRoute() {
    Current Price
    {hasDiscount && ( - - + + )} - +
    @@ -175,26 +175,26 @@ export default function OrderRoute() {
    Subtotal - +
    Tax - +
    Shipping - +
    Total - +
    @@ -220,7 +220,7 @@ export default function OrderRoute() { {order?.shippingAddress?.formatted ? ( order.shippingAddress.formatted.map((line: string) => (
  • - {line} + {line}
    • )) ) : ( @@ -234,8 +234,8 @@ export default function OrderRoute() { {fulfillmentStatus && (
    {statusMessage(fulfillmentStatus!)} diff --git a/app/routes/($locale).account.tsx b/app/routes/($locale).account.tsx index 041fad08..9ba6cb58 100644 --- a/app/routes/($locale).account.tsx +++ b/app/routes/($locale).account.tsx @@ -106,7 +106,7 @@ function Account({ customer, heading, featuredDataPromise }: AccountType) {
    -
    +
    -
    +
    {collection?.image && ( ( + (props, ref) => { + let { collections } = useLoaderData(); + let { prevButtonText, nextButtonText, imageAspectRatio, ...rest } = props; + return ( +
    + + {({ nodes, isLoading, PreviousLink, NextLink }) => ( + <> +
    + +
    +
    + {nodes.map((collection, i) => ( + + ))} +
    +
    + +
    + + )} +     +
    + ); + }, +); + +export default CollectionsItems; + +export let schema: HydrogenComponentSchema = { + type: "collections-items", + title: "Collection items", + inspector: [ + { + group: "Collection items", + inputs: [ + { + type: "text", + name: "prevButtonText", + label: "Previous collections text", + defaultValue: "Previous collections", + placeholder: "Previous collections", + }, + { + type: "text", + name: "nextButtonText", + label: "Next collections text", + defaultValue: "Next collections", + placeholder: "Next collections", + }, + ], + }, + { + group: "Collection card", + inputs: [ + { + type: "select", + label: "Image aspect ratio", + name: "imageAspectRatio", + configs: { + options: [ + { value: "auto", label: "Adapt to image" }, + { value: "1/1", label: "1/1" }, + { value: "3/4", label: "3/4" }, + { value: "4/3", label: "4/3" }, + ], + }, + defaultValue: "auto", + }, + ], + }, + ], +}; diff --git a/app/sections/collection-list/index.tsx b/app/sections/collection-list/index.tsx index 7a7b82ab..15187ac7 100644 --- a/app/sections/collection-list/index.tsx +++ b/app/sections/collection-list/index.tsx @@ -52,7 +52,7 @@ let CollectionList = forwardRef(

    ); - } + }, ); export default CollectionList; @@ -61,6 +61,7 @@ export let schema: HydrogenComponentSchema = { type: "collection-list", title: "Collection list", limit: 1, + childTypes: ["subheading", "heading", "paragraph", "collections-items"], enabledOn: { pages: ["COLLECTION_LIST"], }, @@ -105,7 +106,6 @@ export let schema: HydrogenComponentSchema = { { value: "1/1", label: "1/1" }, { value: "3/4", label: "3/4" }, { value: "4/3", label: "4/3" }, - { value: "6/4", label: "6/4" }, ], }, defaultValue: "auto", diff --git a/app/sections/judgeme-reviews/review-form.tsx b/app/sections/judgeme-reviews/review-form.tsx index 2c889e62..7348fd5c 100644 --- a/app/sections/judgeme-reviews/review-form.tsx +++ b/app/sections/judgeme-reviews/review-form.tsx @@ -54,7 +54,7 @@ export function ReviewForm({ {judgemeReviews.reviews.length !== 0 || !isFormVisible ? (
    @@ -232,7 +232,7 @@ export function ReviewForm({ {isPopupVisible && (
    ( data-motion="fade-up" >
    - + ( {helpText && (
    diff --git a/app/sections/product-information/index.tsx b/app/sections/product-information/index.tsx index 77e79d3c..589b1533 100644 --- a/app/sections/product-information/index.tsx +++ b/app/sections/product-information/index.tsx @@ -115,7 +115,7 @@ let ProductInformation = forwardRef(
    Home @@ -139,19 +139,19 @@ let ProductInformation = forwardRef(
    {discountedAmount > 0 && discountedAmount < 1 && ( - + -{Math.round(discountedAmount * 100)}% )} {isNew && ( - + NEW ARRIVAL )}
    {showVendor && vendor && ( - {vendor} + {vendor} )}

    {title}

    diff --git a/app/sections/product-information/product-detail.tsx b/app/sections/product-information/product-detail.tsx index 367b0283..c2240db5 100644 --- a/app/sections/product-information/product-detail.tsx +++ b/app/sections/product-information/product-detail.tsx @@ -44,7 +44,7 @@ export function ProductDetail({ {learnMore && (
    Learn more diff --git a/app/styles/app.css b/app/styles/app.css index 78e3369f..8b7f1a7c 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -26,10 +26,6 @@ border-color: rgb(var(--color-border) / 0.15); } - body { - @apply bg-background text-body/90 antialiased; - } - html { @apply font-serif; scroll-padding-top: 10rem; diff --git a/package-lock.json b/package-lock.json index 7580b91b..85a40907 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "@weaverse/hydrogen": "4.0.0", "class-variance-authority": "0.7.0", "clsx": "2.1.1", + "colord": "^2.9.3", "cross-env": "7.0.3", "framer-motion": "^11.11.0", "graphql": "16.9.0", @@ -7391,6 +7392,12 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, + "node_modules/colord": { + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", + "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==", + "license": "MIT" + }, "node_modules/colorette": { "version": "2.0.20", "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz", diff --git a/package.json b/package.json index e0c3d5e9..e2798d6e 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "@weaverse/hydrogen": "4.0.0", "class-variance-authority": "0.7.0", "clsx": "2.1.1", + "colord": "^2.9.3", "cross-env": "7.0.3", "framer-motion": "^11.11.0", "graphql": "16.9.0", From 319a9ff409382f35b285af8cc76ca2b13584e4ca Mon Sep 17 00:00:00 2001 From: Paul Date: Mon, 25 Nov 2024 13:56:30 +0700 Subject: [PATCH 05/14] Fix goToSearchResult --- app/modules/predictive-search/predictive-search-results.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/modules/predictive-search/predictive-search-results.tsx b/app/modules/predictive-search/predictive-search-results.tsx index b9efde2e..e5de099b 100644 --- a/app/modules/predictive-search/predictive-search-results.tsx +++ b/app/modules/predictive-search/predictive-search-results.tsx @@ -11,6 +11,7 @@ export function PredictiveSearchResults() { let products = results?.find(({ type }) => type === "products"); function goToSearchResult(event: React.MouseEvent) { + event.preventDefault(); let type = event.currentTarget.dataset.type; if (!searchInputRef.current) return; if (type === "SearchQuerySuggestion") { From 94d7bc1b9fda7107c59721397cbebec5a7d69805 Mon Sep 17 00:00:00 2001 From: hta218 Date: Mon, 25 Nov 2024 16:27:53 +0700 Subject: [PATCH 06/14] Update marquee animation configs --- tailwind.config.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index 4616c283..25c160fd 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -33,8 +33,8 @@ export default { to: { opacity: "1", transform: "translateX(0)" }, }, marquee: { - from: { transform: "translateX(0)" }, - to: { transform: "translateX(-100%)" }, + from: { transform: "translateZ(0)" }, + to: { transform: "translate3d(-100%,0,0)" }, }, underline: { "0%": { @@ -55,7 +55,7 @@ export default { }, animation: { spin: "spin .5s linear infinite", - marquee: "marquee var(--animation-speed, 150ms) linear infinite", + marquee: "marquee var(--marquee-duration, 15s) linear infinite", underline: "underline 400ms linear", "fade-in": "fade-in 500ms ease-in forwards", "slide-down-and-fade": From b0e9491a46ac1c82aba04586eb8c2ffcc193f1ee Mon Sep 17 00:00:00 2001 From: hta218 Date: Mon, 25 Nov 2024 16:28:05 +0700 Subject: [PATCH 07/14] Replace AnnouncementBar with ScrollingAnnouncement --- app/modules/header/announcement-bar.tsx | 64 ---------- app/modules/header/index.tsx | 8 +- app/modules/header/marquee.tsx | 110 ------------------ app/modules/header/scrolling-announcement.tsx | 65 +++++++++++ app/weaverse/schema.server.ts | 22 ++-- 5 files changed, 76 insertions(+), 193 deletions(-) delete mode 100644 app/modules/header/announcement-bar.tsx delete mode 100644 app/modules/header/marquee.tsx create mode 100644 app/modules/header/scrolling-announcement.tsx diff --git a/app/modules/header/announcement-bar.tsx b/app/modules/header/announcement-bar.tsx deleted file mode 100644 index 9a7dd310..00000000 --- a/app/modules/header/announcement-bar.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { useThemeSettings } from "@weaverse/hydrogen"; -import { useEffect } from "react"; -import { Marquee } from "./marquee"; - -export function AnnouncementBar() { - let themeSettings = useThemeSettings(); - let { - topbarText, - topbarHeight, - topbarTextColor, - topbarBgColor, - enableScrolling, - scrollingGap, - scrollingSpeed, - } = themeSettings; - - function updateStyles() { - if (topbarText) { - document.body.style.setProperty( - "--topbar-height", - `${Math.max(topbarHeight - window.scrollY, 0)}px`, - ); - } else { - document.body.style.setProperty("--topbar-height", "0px"); - } - } - - // biome-ignore lint/correctness/useExhaustiveDependencies: - useEffect(() => { - updateStyles(); - window.addEventListener("scroll", updateStyles); - return () => window.removeEventListener("scroll", updateStyles); - }, [topbarText]); - - if (!topbarText) { - return null; - } - - return ( -
    - -
    -
    -
    - ); -} diff --git a/app/modules/header/index.tsx b/app/modules/header/index.tsx index 112ef03f..92b6bda3 100644 --- a/app/modules/header/index.tsx +++ b/app/modules/header/index.tsx @@ -3,14 +3,14 @@ import { CartForm, type CartReturn } from "@shopify/hydrogen"; import { Suspense, useEffect } from "react"; import { useCartFetchers } from "~/hooks/use-cart-fetchers"; import type { EnhancedMenu } from "~/lib/utils"; -import type { RootLoader } from "~/root"; import { Cart } from "~/modules/cart"; +import type { RootLoader } from "~/root"; import { CartLoading } from "../cart-loading"; import { Drawer, useDrawer } from "../drawer"; -import { AnnouncementBar } from "./announcement-bar"; import { DesktopHeader } from "./desktop-header"; -import { MobileHeader } from "./mobile-header"; import { MobileMenu } from "./menu/mobile-menu"; +import { MobileHeader } from "./mobile-header"; +import { ScrollingAnnouncement } from "./scrolling-announcement"; export function Header({ shopName, @@ -43,7 +43,7 @@ export function Header({ {menu && ( )} - + (null); - const [contentWidth, setContentWidth] = useState(0); - // biome-ignore lint/correctness/useExhaustiveDependencies: - useEffect(() => { - if (contentRef.current) { - const { width } = contentRef.current.getBoundingClientRect(); - if (rollAsNeeded) { - if (width < window.innerWidth) { - setContentWidth(0); - } else { - setContentWidth(width); - } - } else { - setContentWidth(width); - } - } - }, []); - const maxAnimationTime = 400000; // 100 seconds - slowest speed 0% - 0 speed - const minAnimationTime = 1000; // 1 second - fastest speed 100% - 100 speed - const animationTime = - ((100 - speed) * (maxAnimationTime - minAnimationTime)) / 100 + - minAnimationTime; - return ( -
    - {contentWidth === 0 ? ( -
    - {children} -
    - ) : ( - - {children} - - )} -
    - ); -} - -function OneView({ - children, - contentWidth, - gap, -}: { - children: React.ReactNode; - contentWidth: number; - gap: number; -}) { - const [contentRepeat, setContentRepeat] = useState(0); - - const calculateRepeat = useCallback(() => { - if (contentWidth < window.innerWidth) { - // if it is, set the contentRepeat to the number of times the text can fit on the screen - const repeat = Math.ceil(window.innerWidth / (contentWidth + gap)); - setContentRepeat(repeat); - } else { - // setContentRepeat(3); - } - }, [contentWidth, gap]); - // biome-ignore lint/correctness/useExhaustiveDependencies: - useEffect(() => { - calculateRepeat(); - window.addEventListener("resize", calculateRepeat); - return () => { - window.removeEventListener("resize", calculateRepeat); - }; - }, []); - let oneView = ( -
    - {Array.from({ length: contentRepeat || 1 }).map((_, index) => ( -
    - {children} -
    - ))} -
    - ); - return ( -
    -
    {oneView}
    -
    {oneView}
    -
    - ); -} diff --git a/app/modules/header/scrolling-announcement.tsx b/app/modules/header/scrolling-announcement.tsx new file mode 100644 index 00000000..ded3c690 --- /dev/null +++ b/app/modules/header/scrolling-announcement.tsx @@ -0,0 +1,65 @@ +import { useThemeSettings } from "@weaverse/hydrogen"; +import { useEffect } from "react"; + +const MAX_DURATION = 20; + +export function ScrollingAnnouncement() { + let themeSettings = useThemeSettings(); + let { + topbarText, + topbarHeight, + topbarTextColor, + topbarBgColor, + topbarScrollingGap, + topbarScrollingSpeed, + } = themeSettings; + + function updateStyles() { + if (topbarText) { + document.body.style.setProperty( + "--topbar-height", + `${Math.max(topbarHeight - window.scrollY, 0)}px`, + ); + } else { + document.body.style.setProperty("--topbar-height", "0px"); + } + } + + // biome-ignore lint/correctness/useExhaustiveDependencies: + useEffect(() => { + updateStyles(); + window.addEventListener("scroll", updateStyles); + return () => window.removeEventListener("scroll", updateStyles); + }, [topbarText]); + + if (!topbarText) { + return null; + } + + return ( +
    + {new Array(10).fill("").map((_, idx) => { + return ( +
    +
    +
    + ); + })} +
    + ); +} diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts index ab52d529..9b374675 100644 --- a/app/weaverse/schema.server.ts +++ b/app/weaverse/schema.server.ts @@ -139,7 +139,7 @@ export let themeSchema: HydrogenThemeSchema = { ], }, { - group: "Announcement bar", + group: "Scrolling announcements", inputs: [ { type: "richtext", @@ -150,7 +150,7 @@ export let themeSchema: HydrogenThemeSchema = { { type: "range", label: "Content gap", - name: "scrollingGap", + name: "topbarScrollingGap", configs: { min: 0, max: 100, @@ -171,25 +171,17 @@ export let themeSchema: HydrogenThemeSchema = { }, defaultValue: 36, }, - { - type: "switch", - label: "Enable scrolling", - name: "enableScrolling", - defaultValue: false, - helpText: - "Scrolling is automatically detected based on the content length.", - }, { type: "range", label: "Scrolling speed", - name: "scrollingSpeed", + name: "topbarScrollingSpeed", configs: { - min: 0, - max: 100, + min: 1, + max: 20, step: 1, - unit: "s", + unit: "x", }, - defaultValue: 10, + defaultValue: 5, }, ], }, From e1647437e08c7a934ff8651037532d41dff47451 Mon Sep 17 00:00:00 2001 From: hta218 Date: Mon, 25 Nov 2024 18:51:42 +0700 Subject: [PATCH 08/14] Rename 'underline-animation' class to 'reveal-underline' --- app/modules/cart.tsx | 2 +- app/modules/footer.tsx | 2 +- app/modules/header/menu/desktop-menu.tsx | 61 +++++++++---------- .../predictive-search-results.tsx | 2 +- app/modules/predictive-search/result-item.tsx | 4 +- app/styles/app.css | 4 +- 6 files changed, 37 insertions(+), 38 deletions(-) diff --git a/app/modules/cart.tsx b/app/modules/cart.tsx index 0aabe2e7..fc9c1b16 100644 --- a/app/modules/cart.tsx +++ b/app/modules/cart.tsx @@ -281,7 +281,7 @@ function CartLineItem({ line, layout }: { line: CartLine; layout: Layouts }) {
    {merchandise?.product?.handle ? ( - + {merchandise?.product?.title || ""} diff --git a/app/modules/footer.tsx b/app/modules/footer.tsx index 6cdeeec1..aced7097 100644 --- a/app/modules/footer.tsx +++ b/app/modules/footer.tsx @@ -198,7 +198,7 @@ function FooterMenu({
    {items.map((item, ind) => ( - {item.title} + {item.title} ))}
    diff --git a/app/modules/header/menu/desktop-menu.tsx b/app/modules/header/menu/desktop-menu.tsx index 6e60b7a9..dc6cefab 100644 --- a/app/modules/header/menu/desktop-menu.tsx +++ b/app/modules/header/menu/desktop-menu.tsx @@ -1,38 +1,39 @@ import { Image } from "@shopify/hydrogen"; -import clsx from "clsx"; import React from "react"; import { IconCaretDown } from "~/components/icons"; import { Link } from "~/components/link"; +import { cn } from "~/lib/cn"; import { getMaxDepth } from "~/lib/menu"; import type { SingleMenuItem } from "~/lib/type"; import type { EnhancedMenu } from "~/lib/utils"; export function DesktopMenu({ menu }: { menu: EnhancedMenu }) { let items = menu.items as unknown as SingleMenuItem[]; - if (!items) return null; - return ( - + ); + } + return null; } function MegaMenu({ title, items, to }: SingleMenuItem) { @@ -47,7 +48,7 @@ function MegaMenu({ title, items, to }: SingleMenuItem) { prefetch="intent" className="uppercase transition-none" > - {item.title} + {item.title}
      {item.items.map((subItem) => ( @@ -57,7 +58,7 @@ function MegaMenu({ title, items, to }: SingleMenuItem) { prefetch="intent" className="relative transition-none" > - {subItem.title} + {subItem.title} ))} @@ -115,7 +116,7 @@ function DropdownMenu(props: SingleMenuItem) { prefetch="intent" className="transition-none" > - {childItem.title} + {childItem.title} ))} @@ -168,15 +169,13 @@ function FirstLevelMenu(props: { let { children, className, title, to } = props; let hasChild = React.Children.count(children) > 0; return ( -
      +
      - - {title} - + {title} {hasChild && ( )} diff --git a/app/modules/predictive-search/predictive-search-results.tsx b/app/modules/predictive-search/predictive-search-results.tsx index e5de099b..e7142b6e 100644 --- a/app/modules/predictive-search/predictive-search-results.tsx +++ b/app/modules/predictive-search/predictive-search-results.tsx @@ -77,7 +77,7 @@ export function PredictiveSearchResults() { to={`/search?q=${searchTerm.current}`} className="flex items-center gap-2" > - View all products + View all products */}
      diff --git a/app/modules/predictive-search/result-item.tsx b/app/modules/predictive-search/result-item.tsx index 98157788..b7d1e4c0 100644 --- a/app/modules/predictive-search/result-item.tsx +++ b/app/modules/predictive-search/result-item.tsx @@ -48,7 +48,7 @@ export function SearchResultItem({ )} {styledTitle ? (
      ) : ( @@ -57,7 +57,7 @@ export function SearchResultItem({ __typename === "Product" ? "line-clamp-1" : "line-clamp-2", )} > - {title} + {title}
      )} {price && ( diff --git a/app/styles/app.css b/app/styles/app.css index 8b7f1a7c..68e4b82a 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -170,7 +170,7 @@ view-transition-name: product-image; } -.underline-animation { +.reveal-underline { background-image: linear-gradient( to right, var(--underline-color, rgb(15, 15, 15)), @@ -183,7 +183,7 @@ transition: background 200ms ease-in-out; background-position: left calc(1em + 4px); } -.underline-animation:hover { +.reveal-underline:hover { background-size: 100% 1px; } .dropdown-transition { From 3be32c4402acb812f5cd7044ebed60305b7a09f0 Mon Sep 17 00:00:00 2001 From: hta218 Date: Tue, 26 Nov 2024 18:36:55 +0700 Subject: [PATCH 09/14] Add menu options to theme schema for selecting menu interaction type (hover/click) --- app/weaverse/schema.server.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts index 9b374675..349648d4 100644 --- a/app/weaverse/schema.server.ts +++ b/app/weaverse/schema.server.ts @@ -245,6 +245,22 @@ export let themeSchema: HydrogenThemeSchema = { }, defaultValue: 150, }, + { + type: "heading", + label: "Menu", + }, + { + type: "select", + name: "openMenuBy", + label: "Open menu by", + configs: { + options: [ + { value: "hover", label: "Mouse hover" }, + { value: "click", label: "Mouse click" }, + ], + }, + defaultValue: "click", + }, ], }, { From c9bedcfa4eb821d839a59a32baef250a19a69d4d Mon Sep 17 00:00:00 2001 From: hta218 Date: Tue, 26 Nov 2024 18:37:10 +0700 Subject: [PATCH 10/14] Refactor animations configs in tailwind.config.js --- tailwind.config.js | 31 ++++++++----------------------- 1 file changed, 8 insertions(+), 23 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index 25c160fd..f962d2eb 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -13,24 +13,15 @@ export default { extend: { keyframes: { "fade-in": { - from: { opacity: "0" }, + from: { opacity: "0.5" }, to: { opacity: "1" }, }, - "slide-down-and-fade": { - from: { opacity: "0", transform: "translateY(-6px)" }, - to: { opacity: "1", transform: "translateY(0)" }, - }, "slide-left-and-fade": { - from: { opacity: "0", transform: "translateX(6px)" }, - to: { opacity: "1", transform: "translateX(0)" }, - }, - "slide-up-and-fade": { - from: { opacity: "0", transform: "translateY(6px)" }, - to: { opacity: "1", transform: "translateY(0)" }, - }, - "slide-right-and-fade": { - from: { opacity: "0", transform: "translateX(-6px)" }, - to: { opacity: "1", transform: "translateX(0)" }, + from: { + opacity: 0, + transform: "translateX(var(--left-distance, 6px))", + }, + to: { opacity: 1, transform: "translateX(0)" }, }, marquee: { from: { transform: "translateZ(0)" }, @@ -57,15 +48,9 @@ export default { spin: "spin .5s linear infinite", marquee: "marquee var(--marquee-duration, 15s) linear infinite", underline: "underline 400ms linear", - "fade-in": "fade-in 500ms ease-in forwards", - "slide-down-and-fade": - "slide-down-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards", + "fade-in": "fade-in var(--fade-in-duration, .5s) ease-in forwards", "slide-left-and-fade": - "slide-left-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards", - "slide-up-and-fade": - "slide-up-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards", - "slide-right-and-fade": - "slide-right-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards", + "slide-left-and-fade var(--slide-left-and-fade-duration, .5s) cubic-bezier(0.14, 0.8, 0.6, 1) forwards", }, borderWidth: { 6: "6px", From b70f7d73a4b3e57f0d981d7e5febb06f1ae017d1 Mon Sep 17 00:00:00 2001 From: hta218 Date: Tue, 26 Nov 2024 18:37:49 +0700 Subject: [PATCH 11/14] Prevent scrolling announcement bar from overflow --- app/modules/header/scrolling-announcement.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/modules/header/scrolling-announcement.tsx b/app/modules/header/scrolling-announcement.tsx index ded3c690..283de5ca 100644 --- a/app/modules/header/scrolling-announcement.tsx +++ b/app/modules/header/scrolling-announcement.tsx @@ -39,7 +39,7 @@ export function ScrollingAnnouncement() { return (
      Date: Tue, 26 Nov 2024 18:38:07 +0700 Subject: [PATCH 12/14] Update CSS variables in header components for consistency across different headers --- app/modules/header/cart-count.tsx | 6 +++--- app/modules/header/desktop-header.tsx | 4 ++-- app/modules/header/mobile-header.tsx | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/modules/header/cart-count.tsx b/app/modules/header/cart-count.tsx index adfe9a3f..34a715d6 100644 --- a/app/modules/header/cart-count.tsx +++ b/app/modules/header/cart-count.tsx @@ -67,10 +67,10 @@ function Badge({ "flex items-center justify-center min-w-4 rounded-full p-0.5", "absolute top-0 -right-1", "transition-colors duration-300", - "group-hover/header:bg-[var(--color-header-text)] group-hover/header:text-[var(--color-header-bg)]", + "group-hover/header:bg-[var(--color-header-text)] group-hover/header:text-[--color-header-bg]", isTransparent - ? "text-[var(--color-header-text)] bg-[var(--color-transparent-header-text)]" - : "bg-[var(--color-header-text)] text-[var(--color-header-bg)]", + ? "text-[--color-header-text] bg-[--color-transparent-header-text]" + : "bg-[--color-header-text] text-[--color-header-bg]", )} > {count} diff --git a/app/modules/header/desktop-header.tsx b/app/modules/header/desktop-header.tsx index 815cd2e3..2fbe4715 100644 --- a/app/modules/header/desktop-header.tsx +++ b/app/modules/header/desktop-header.tsx @@ -74,12 +74,12 @@ export function DesktopHeader({ >
      - {menu && } +
      Date: Tue, 26 Nov 2024 18:38:48 +0700 Subject: [PATCH 13/14] Update menu functionality --- app/modules/header/menu/desktop-menu.tsx | 306 +++++++++++------------ package-lock.json | 175 +++++++++++++ package.json | 1 + 3 files changed, 328 insertions(+), 154 deletions(-) diff --git a/app/modules/header/menu/desktop-menu.tsx b/app/modules/header/menu/desktop-menu.tsx index dc6cefab..3fb21a9d 100644 --- a/app/modules/header/menu/desktop-menu.tsx +++ b/app/modules/header/menu/desktop-menu.tsx @@ -1,186 +1,184 @@ +import { CaretDown } from "@phosphor-icons/react"; +import * as Menubar from "@radix-ui/react-menubar"; import { Image } from "@shopify/hydrogen"; -import React from "react"; -import { IconCaretDown } from "~/components/icons"; -import { Link } from "~/components/link"; +import { useThemeSettings } from "@weaverse/hydrogen"; +import clsx from "clsx"; +import { useState } from "react"; +import Link from "~/components/link"; import { cn } from "~/lib/cn"; import { getMaxDepth } from "~/lib/menu"; import type { SingleMenuItem } from "~/lib/type"; import type { EnhancedMenu } from "~/lib/utils"; export function DesktopMenu({ menu }: { menu: EnhancedMenu }) { - let items = menu.items as unknown as SingleMenuItem[]; - if (items.length) { + let { openMenuBy } = useThemeSettings(); + let [value, setValue] = useState(null); + if (menu?.items?.length) { + let items = menu.items as unknown as SingleMenuItem[]; return ( - + ); } return null; } -function MegaMenu({ title, items, to }: SingleMenuItem) { - let renderList = (item: SingleMenuItem, idx: number) => ( -
      - - {item.title} - -
        - {item.items.map((subItem) => ( -
      • - - {subItem.title} - -
        • - ))} -
      -
      - ); - - let renderImageItem = (item: SingleMenuItem, idx: number) => ( -
      - - - -
      - {item.title} -
      -
      - ); +function DropdownSubMenu({ items }: { items: SingleMenuItem[] }) { return ( - -
      -
      -
      - {items.map((item, id) => - item.resource && item.items.length === 0 - ? renderImageItem(item, id) - : renderList(item, id), - )} -
      -
      -
      -
      - +
        + {items.map(({ id, to, title }) => ( + + {title} + + ))} +
      ); } -function DropdownMenu(props: SingleMenuItem) { - let { title, items, to } = props; +function MegaMenu({ items }: { items: SingleMenuItem[] }) { return ( - -
      -
      -
        - {items.map((childItem) => ( -
      • +
        + {items.map(({ id, title, to, items: children, resource }, idx) => + resource?.image && children.length === 0 ? ( + + + + {title} + + + ) : ( + + + {title} + +
        + {children.map((cItem) => ( - {childItem.title} + {cItem.title} -
        • - ))} -
      -
      -
      -       - ); -} - -function ImagesMenu({ title, items, to }: SingleMenuItem) { - return ( - -
      -
      -
      - {items.map((item, id) => ( - -
      - -
      - {item.title} -
      -
      - - ))} -
      -
      -
      -       + ))} +
      + + ), + )} +
      ); } -function FirstLevelMenu(props: { +function SlideIn(props: { className?: string; - title: string; - to: string; - children?: React.ReactNode; + children: React.ReactNode; + style: React.CSSProperties; }) { - let { children, className, title, to } = props; - let hasChild = React.Children.count(children) > 0; + let { className, children, style } = props; return ( -
      -
      - - {title} - {hasChild && ( - - )} - -
      +
      {children}
      ); diff --git a/package-lock.json b/package-lock.json index 85a40907..0223fe1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@phosphor-icons/react": "2.1.7", "@radix-ui/react-checkbox": "1.1.2", "@radix-ui/react-dialog": "1.1.2", + "@radix-ui/react-menubar": "^1.1.2", "@radix-ui/react-tooltip": "1.1.4", "@remix-run/react": "2.14.0", "@remix-run/server-runtime": "2.14.0", @@ -4422,6 +4423,32 @@ } } }, + "node_modules/@radix-ui/react-collection": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz", + "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-compose-refs": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz", @@ -4499,6 +4526,21 @@ } } }, + "node_modules/@radix-ui/react-direction": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz", + "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-dismissable-layer": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz", @@ -4580,6 +4622,108 @@ } } }, + "node_modules/@radix-ui/react-menu": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.2.tgz", + "integrity": "sha512-lZ0R4qR2Al6fZ4yCCZzu/ReTFrylHFxIqy7OezIpWF4bL0o9biKo0pFIvkaew3TyZ9Fy5gYVrR5zCGZBVbO1zg==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-dismissable-layer": "1.1.1", + "@radix-ui/react-focus-guards": "1.1.1", + "@radix-ui/react-focus-scope": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-popper": "1.2.0", + "@radix-ui/react-portal": "1.1.2", + "@radix-ui/react-presence": "1.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-roving-focus": "1.1.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.6.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-context": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz", + "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-menubar": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.2.tgz", + "integrity": "sha512-cKmj5Gte7LVyuz+8gXinxZAZECQU+N7aq5pw7kUPpx3xjnDXDbsdzHtCCD2W72bwzy74AvrqdYnKYS42ueskUQ==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-menu": "2.1.2", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-roving-focus": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-context": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz", + "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-popper": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz", @@ -4680,6 +4824,37 @@ } } }, + "node_modules/@radix-ui/react-roving-focus": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz", + "integrity": "sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", diff --git a/package.json b/package.json index e2798d6e..6fdc5f3f 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@phosphor-icons/react": "2.1.7", "@radix-ui/react-checkbox": "1.1.2", "@radix-ui/react-dialog": "1.1.2", + "@radix-ui/react-menubar": "^1.1.2", "@radix-ui/react-tooltip": "1.1.4", "@remix-run/react": "2.14.0", "@remix-run/server-runtime": "2.14.0", From 365cc0bea806fe235b2caad0c273bc311970e48f Mon Sep 17 00:00:00 2001 From: hta218 Date: Tue, 26 Nov 2024 21:48:40 +0700 Subject: [PATCH 14/14] v3.1.0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0223fe1b..dd32a2ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@weaverse/pilot", - "version": "3.0.4", + "version": "3.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@weaverse/pilot", - "version": "3.0.4", + "version": "3.1.0", "dependencies": { "@fontsource/poppins": "5.1.0", "@graphql-codegen/cli": "5.0.3", diff --git a/package.json b/package.json index 6fdc5f3f..dea82ba4 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@weaverse/pilot", "private": true, "sideEffects": false, - "version": "3.0.4", + "version": "3.1.0", "type": "module", "author": "Weaverse", "scripts": {