@tapcart/mobile-components 0.1.2 → 0.1.4

package/README.md

@@ -0,0 +1,241 @@
+<div align="center">
+  <a href="https://tapcart.com">
+    <img
+      src="https://storage.googleapis.com/tapcart-asset-uploads-prod/dx-github.png"
+      alt=""
+    />
+  </a>
+</div>
+
+# @tapcart/mobile-components
+
+> Build the next-gen shopper experience for Tapcart's core product, the mobile app.
+
+[![storybook](https://shields.io/badge/storybook-grey?logo=storybook&style=flat)](https://tapcart-consumer-web-storybook.vercel.app/) [![npm version](https://img.shields.io/npm/v/@tapcart/mobile-components.svg?label=@tapcart/mobile-components)](https://www.npmjs.com/package/@tapcart/mobile-components) 
+
+| Status | Owner            | Help            |
+| ------ | ---------------- |-----------------|
+| Active | @tapcart/mobile-components | dev@tapcart.com |
+
+## About this repo
+
+The tapcart/mobile-components repository is a component library made up of all the code components that drive our app experience.
+
+## Installation using NPM
+
+### Install into your React.js project
+
+```sh
+npm install @tapcart/mobile-components
+```
+
+
+
+
+## Usage
+**Easy. Cake. Done.**
+
+```jsx
+import {
+  Button,
+  Input,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  AspectRatio,
+  Switch,
+  Label,
+  Separator,
+  Badge,
+  Video,
+  ScrollArea,
+  Text,
+  Toast,
+  Toaster,
+  useToast,
+  Icon,
+  Container,
+  Grid,
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@tapcart/mobile-components";
+
+<Video>
+  <source src="https://assets.tapcart.com/image-block/video/FhEjfK4zD2_6614803b487c620032dc21c4.mp4" /> 
+</Video>
+
+<Separator />
+
+<Container variant="spaced">
+  <Input placeholder="Search for products" type="email"></Input>
+</Container>
+
+<Separator />
+
+<Accordion type="single" collapsible className="w-full">
+  <AccordionItem value="item-1">
+    <Container>
+      <AccordionTrigger>
+        <div className="flex">
+          <Icon>
+            <svg
+              width="15"
+              height="18"
+              viewBox="0 0 15 18"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7.3 8.14a4.08 4.08 0 0 1-4.07-4.07C3.23 1.83 5.05 0 7.3 0s4.07 1.83 4.07 4.07A4.08 4.08 0 0 1 7.3 8.14Zm0-6.64a2.57 2.57 0 1 0 0 5.14 2.57 2.57 0 1 0 0-5.14ZM12.88 17.69H1.72c-.95 0-1.72-.77-1.72-1.72 0-3.54 2.88-6.42 6.42-6.42h1.76c3.54 0 6.42 2.88 6.42 6.42 0 .95-.77 1.72-1.72 1.72Zm-6.46-6.64a4.93 4.93 0 0 0-4.92 4.92c0 .12.1.22.22.22h11.16c.12 0 .22-.1.22-.22a4.93 4.93 0 0 0-4.92-4.92H6.42Z"
+                fill="currentColor"
+              ></path>
+            </svg>
+          </Icon>
+          Product details
+        </div>
+      </AccordionTrigger>
+      <AccordionContent>
+        <img src="https://assets.tapcart.com/pdp/images/FhEjfK4zD2_6629470724b8221a7b750a97.png" />
+      </AccordionContent>
+    </Container>
+  </AccordionItem>
+  <AccordionItem value="item-2">
+    <Container>
+      <AccordionTrigger>
+        <div className="flex">
+          <Icon>
+            <svg
+              width="18"
+              height="17"
+              viewBox="0 0 18 17"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6.61 13.22c-1.77 0-3.43-.69-4.67-1.94A6.567 6.567 0 0 1 0 6.61c0-1.76.69-3.43 1.94-4.67A6.533 6.533 0 0 1 6.61 0c1.77 0 3.43.69 4.67 1.94a6.567 6.567 0 0 1 1.94 4.67c0 1.76-.69 3.43-1.94 4.67a6.567 6.567 0 0 1-4.67 1.94Zm0-11.72C5.24 1.5 3.96 2.03 3 3c-.97.97-1.5 2.25-1.5 3.61 0 1.36.53 2.65 1.5 3.61.96.97 2.25 1.5 3.61 1.5 1.36 0 2.65-.53 3.61-1.5.97-.97 1.5-2.25 1.5-3.61 0-1.36-.53-2.65-1.5-3.61-.96-.97-2.25-1.5-3.61-1.5ZM16.4 16.15c-.19 0-.38-.07-.53-.22l-3.18-3.18a.754.754 0 0 1 0-1.06c.29-.29.77-.29 1.06 0l3.18 3.18c.29.29.29.77 0 1.06-.15.15-.34.22-.53.22Z"
+                fill="currentColor"
+              ></path>
+            </svg>
+          </Icon>
+          Size Guide
+        </div>
+      </AccordionTrigger>
+      <AccordionContent>
+        Yes. It comes with default styles that matches the other
+        components&apos; aesthetic.
+      </AccordionContent>
+    </Container>
+  </AccordionItem>
+</Accordion>
+
+{/*Aspect Ratio+ scroll area Example*/}
+<Container>
+  <Text className="py-2 font-medium">New Drop Collection</Text>
+</Container>
+
+<ScrollArea>
+  {Products.map((product) => (
+    <ProductCard
+      className="w-[138px] mr-[7px]"
+      key={product.id}
+      product={product}
+      quickAdd={quickAdd}
+      openProduct={clickProduct}
+      switchVariant={switchVariant}
+      carousel={false}
+    ></ProductCard>
+  ))}
+</ScrollArea>
+
+<Separator className="my-[15px]" />
+
+<div className="container flex items-center space-x-2">
+  <ToggleGroup
+    onValueChange={(e) => changeGrid(e)}
+    type="single"
+    defaultValue="2">
+    <ToggleGroupItem value="1" aria-label="Toggle bold">
+      <Icon>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          className="lucide lucide-rows-2">
+          <rect width="18" height="18" x="3" y="3" rx="2" />
+          <path d="M3 12h18" />
+        </svg>
+      </Icon>
+    </ToggleGroupItem>
+    <ToggleGroupItem value="2" aria-label="Toggle italic">
+      <Icon>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          className="lucide lucide-columns-3"
+        >
+          <rect width="18" height="18" x="3" y="3" rx="2" />
+          <path d="M9 3v18" />
+          <path d="M15 3v18" />
+        </svg>
+      </Icon>
+    </ToggleGroupItem>
+    <ToggleGroupItem value="3" aria-label="Toggle underline">
+      <Icon>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          className="lucide lucide-columns-3">
+          <rect width="18" height="18" x="3" y="3" rx="2" />
+          <path d="M9 3v18" />
+          <path d="M15 3v18" />
+        </svg>
+      </Icon>
+    </ToggleGroupItem>
+  </ToggleGroup>
+</div>
+
+<Separator className="my-[15px]" />
+
+<Grid columns={grid} className="">
+  {Products.map((product) => (
+    <ProductCard
+      key={product.id}
+      className="w-full"
+      product={product}
+      quickAdd={quickAdd}
+      openProduct={clickProduct}
+      switchVariant={switchVariant}
+      carousel={true}
+    ></ProductCard>
+  ))}
+</Grid>
+
+```
+
+
+## Licenses
+
+Source code is under a [custom license](https://github.com/Shopify/polaris/blob/main/LICENSE.md) based on MIT. The license restricts Polaris usage to applications that integrate or interoperate with Shopify software or services, with additional restrictions for external, stand-alone applications.
+
+All icons and images are licensed under the [Polaris Design Guidelines License Agreement](https://polaris.shopify.com/legal/license)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",

package/.turbo/turbo-build.log

@@ -1,4 +0,0 @@
-
-> @tapcart/mobile-components@0.1.1 build /Users/ericnetsch/tapcart-consumer-web/packages/tapcart-mobile-components
-> tsc -p tsconfig.json
-

package/components/ThemeProvider.tsx

@@ -1,9 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { ThemeProviderProps } from "next-themes/dist/types"
-
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
-}

package/components/ThemeToggle.tsx

@@ -1,22 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { useTheme } from "next-themes"
-
-import { Button } from "@/components/ui/button"
-
-export function ThemeToggle() {
-  const { setTheme, theme } = useTheme()
-
-  return (
-    <Button
-      variant="ghost"
-      size="sm"
-      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-    >
-      <div className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-      <div className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-      <span className="sr-only">Toggle theme</span>
-    </Button>
-  )
-}

package/components/ui/accordion.tsx

@@ -1,58 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Accordion = AccordionPrimitive.Root
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
-))
-AccordionItem.displayName = "AccordionItem"
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-))
-
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/components/ui/alert-dialog.tsx

@@ -1,141 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
-
-const AlertDialog = AlertDialogPrimitive.Root
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
-    {...props}
-  />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}

package/components/ui/aspect-ratio.tsx

@@ -1,7 +0,0 @@
-"use client"
-
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
-
-const AspectRatio = AspectRatioPrimitive.Root
-
-export { AspectRatio }

package/components/ui/badge.tsx

@@ -1,36 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
-}
-
-export { Badge, badgeVariants }

package/components/ui/button.tsx

@@ -1,69 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import { IconLoader2 } from "@tabler/icons-react"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "flex rounded items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:bg-stateColors-disabled disabled:pointer-events-none ring-offset-background overflow-elipse whitespace-nowrap truncate",
-  {
-    variants: {
-      size: {
-        default: "h-10 py-3 px-4",
-        sm: "h-9 px-3 rounded-md",
-        lg: "h-11 px-8 rounded-md",
-        icon: "h-10 w-10",
-        content: "h-10 py-3 px-4 w-auto",
-      },
-      variant: {
-        default:
-          "bg-buttonColors-primaryFill text-buttonColors-primaryText active:opacity-70",
-        destructive:
-          "bg-stateColors-error text-coreColors-pageColor active:opacity-70 disabled:bg-stateColors-disabled",
-        outline:
-          "border border-input hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "border bg-buttonColors-secondaryFill text-buttonColors-secondaryText border-buttonColors-secondaryOutline active:opacity-70 disabled:bg-buttonColors-secondaryFill disabled:text-stateColors-disabled disabled:border-stateColors-disabled",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "underline-offset-4 hover:underline text-primary",
-        quickadd:
-          "bg-buttonColors-primaryFill text-buttonColors-primaryText active:opacity-70 w-full rounded-none rounded-b-lg h-8 text-xs",
-        applePay: "bg-white text-black border border-black",
-        shopPay: "bg-[#612EFF]",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-  loading?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, loading, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }), {
-          "pointer-events-none": loading,
-        })}
-        ref={ref}
-        {...props}
-      >
-        {!loading && props.children}
-        {loading && <IconLoader2 className="h-4 w-4 animate-spin" />}
-      </Comp>
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }