@tapcart/mobile-components

@tapcart/mobile-components

Build the next-gen shopper experience for Tapcart's core product, the mobile app.

Status	Owner	Help
Active	@tapcart/mobile-components	[e-mail]

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

npm install @tapcart/mobile-components

Usage

Easy. Cake. Done.

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 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