@tapcart/mobile-components 0.1.1

package/components/ui/use-toast.ts

@@ -0,0 +1,191 @@
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }

package/components/ui/video.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const videoVariants = cva("w-full", {
+  variants: {},
+})
+
+export interface VideoProps
+  extends React.HTMLAttributes<HTMLVideoElement>,
+    VariantProps<typeof videoVariants> {}
+
+function Video({ className, ...props }: VideoProps) {
+  return (
+    <video
+      className={cn(videoVariants({}), className)}
+      {...props}
+      autoPlay
+      playsInline
+      muted
+      loop
+    />
+  )
+}
+
+export { Video, videoVariants }

package/components.json

@@ -0,0 +1,14 @@
+{
+  "style": "default",
+  "rsc": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

package/index.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+
+// component exports
+export * from "@/components/ui/button"
+export * from "@/components/ui/input"
+export * from "@/components/ui/aspect-ratio"
+export * from "@/components/ui/accordion"
+export * from "@/components/ui/icon"
+export * from "@/components/ui/carousel"
+export * from "@/components/ui/container"
+export * from "@/components/ui/grid"
+export * from "@/components/ui/label"
+export * from "@/components/ui/separator"
+export * from "@/components/ui/badge"
+export * from "@/components/ui/video"
+export * from "@/components/ui/money"
+export * from "@/components/ui/skeleton"
+export * from "@/components/ui/text"
+export * from "@/components/ui/toggle"
+export * from "@/components/ui/toggle-group"
+export * from "@/components/ui/switch"
+export * from "@/components/ui/scroll-area"
+export * from "@/components/ui/toast"
+export * from "@/components/ui/toaster"
+export * from "@/components/ui/use-toast"
+export * from "@/components/ThemeToggle"
+export { ThemeProvider } from "@/components/ThemeProvider"
+export { cn } from "@/lib/utils"

package/lib/utils.ts

@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@tapcart/mobile-components",
+  "version": "0.1.1",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "author": "Tapcart Inc.",
+  "homepage": "https://tapcart.com",
+  "scripts": {
+    "lint": "eslint \"**/*.ts*\"",
+    "ui:add": "pnpm dlx shadcn-ui@latest add",
+    "build": "tsc -p tsconfig.json"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^7.32.0",
+    "eslint-config-custom": "workspace:*",
+    "postcss": "^8.4.24",
+    "react": "^17.0.2",
+    "tailwindcss": "^3.3.2",
+    "tsconfig": "workspace:*",
+    "typescript": "^4.5.2"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-aspect-ratio": "^1.0.3",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-toggle": "^1.0.3",
+    "@radix-ui/react-toggle-group": "^1.0.4",
+    "@tabler/icons-react": "^3.2.0",
+    "class-variance-authority": "^0.6.0",
+    "clsx": "^1.2.1",
+    "embla-carousel-react": "^8.0.2",
+    "lucide-react": "^0.248.0",
+    "next-themes": "^0.2.1",
+    "tailwind-merge": "^1.13.2",
+    "tailwindcss-animate": "^1.0.6"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/styles/globals.css

@@ -0,0 +1,146 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  *::-webkit-scrollbar {
+    display: none;
+  }
+  * {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 215 20.2% 65.1%;
+
+    --radius: 0.5rem;
+
+    --coreColors-pageColor: #ffffff;
+    --coreColors-shadow: #000000;
+    --coreColors-brandColorPrimary: #000000;
+    --coreColors-headerBackground: #ffffffff;
+    --coreColors-inputBackground: #ffffffff;
+    --coreColors-modalBackground: #ffffffff;
+    --coreColors-tabBar: #ffffffff;
+    --coreColors-dividingLines: #e3e3e3ff;
+    --coreColors-shadowsEnabled: "true";
+    --coreColors-primaryIcon: #121212ff;
+    --coreColors-secondaryIcon: #727272ff;
+    --coreColors-headerIcon: #121212ff;
+
+    --textColors-primaryColor: #121212ff;
+    --textColors-secondaryColor: #727272ff;
+    --textColors-pageTitle: #121212ff;
+    --textColors-legalText: #727272;
+    --textColors-productTitle: #727272;
+    --textColors-priceText: #121212ff;
+    --textColors-strikethroughPriceText: #727272ff;
+    --textColors-salePriceText: #d91e18ff;
+
+    --buttonColors-primaryText: #ffffff;
+    --buttonColors-primaryFill: #000000;
+    --buttonColors-primaryOutline: #000000;
+    --buttonColors-primaryShadow: #ffffff;
+    --buttonColors-disabled: #707070;
+    --buttonColors-secondaryText: #000000;
+    --buttonColors-secondaryFill: #ffffff;
+    --buttonColors-secondaryOutline: #000000;
+    --buttonColors-secondaryShadow: #ffffff;
+
+    --stateColors-disabled: #707070;
+    --stateColors-error: #d91e18ff;
+
+    --stateColors-subscriptions: #008000ff;
+    --stateColors-favorites: #d91e18ff;
+    --stateColors-reviews: #ffaf02ff;
+    --stateColors-success: #008000ff;
+    --stateColors-warning: #ffaf02ff;
+    --stateColors-skeleton: #e3e3e3ff;
+
+    --productImage-aspectRatio: "2:3";
+    --productImage-scaling: cover;
+    --productImage-isCustom: "false";
+  }
+  .productImages-scaling {
+    object-fit: var(--productImage-scaling);
+  }
+
+  /*.dark {*/
+  /*  --background: 222.2 84% 4.9%;*/
+  /*  --foreground: 210 40% 98%;*/
+  /*  --card: 222.2 84% 4.9%;*/
+  /*  --card-foreground: 210 40% 98%;*/
+  /*  --popover: 222.2 84% 4.9%;*/
+  /*  --popover-foreground: 210 40% 98%;*/
+  /*  --primary: 210 40% 98%;*/
+  /*  --primary-foreground: 222.2 47.4% 11.2%;*/
+  /*  --secondary: 217.2 32.6% 17.5%;*/
+  /*  --secondary-foreground: 210 40% 98%;*/
+  /*  --muted: 217.2 32.6% 17.5%;*/
+  /*  --muted-foreground: 215 20.2% 65.1%;*/
+  /*  --accent: 217.2 32.6% 17.5%;*/
+  /*  --accent-foreground: 210 40% 98%;*/
+  /*  --destructive: 0 62.8% 30.6%;*/
+  /*  --destructive-foreground: 210 40% 98%;*/
+  /*  --border: 217.2 32.6% 17.5%;*/
+  /*  --input: 217.2 32.6% 17.5%;*/
+  /*  --ring: 212.7 26.8% 83.9;*/
+  /*}*/
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar *::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar * {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+  .container {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+  *:hover {
+    text-decoration-line: unset !important;
+  }
+}

package/tailwind.config.js

@@ -0,0 +1,141 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+    "../../packages/tapcart-mobile-components/components/**/*.{ts,tsx}",
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+      fontSize: {
+        xs: ["10px", "1.3"], //label
+        sm: ["12px", "1.3"], //paragraph
+        base: ["15px", "1.6"], //Body
+        lg: ["20px", "28px"],
+        xl: ["18px", "1.3"], //H2
+        "2xl": ["23px", "1.3"], //H1
+      },
+    },
+    extend: {
+      colors: {
+        coreColors: {
+          brandColorPrimary: "var(--coreColors-brandColorPrimary)",
+          pageColor: "var(--coreColors-pageColor)",
+          headerBackground: "var(--coreColors-headerBackground)",
+          inputBackground: "var(--coreColors-inputBackground)",
+          modalBackground: "var(--coreColors-modalBackground)",
+          tabBar: "var(--coreColors-tabBar)",
+          dividingLines: "var(--coreColors-dividingLines)",
+          shadowsEnabled: "var(--coreColors-shadowsEnabled)",
+          primaryIcon: "var(--coreColors-primaryIcon)",
+          secondaryIcon: "var(--coreColors-secondaryIcon)",
+          headerIcon: "var(--coreColors-headerIcon)",
+          shadow: "var(--coreColors-shadow)", // TODO: add to themesV2 API
+        },
+        buttonColors: {
+          primaryFill: "var(--buttonColors-primaryFill)",
+          primaryText: "var(--buttonColors-primaryText)",
+          primaryOutlineEnabled: "var(--buttonColors-primaryOutlineEnabled)",
+          primaryOutlineColor: "var(--buttonColors-primaryOutlineColor)",
+          primaryShadowEnabled: "var(--buttonColors-primaryShadowEnabled)",
+          secondaryFill: "var(--buttonColors-secondaryFill)",
+          secondaryText: "var(--buttonColors-secondaryText)",
+          secondaryOutlineEnabled:
+            "var(--buttonColors-secondaryOutlineEnabled)",
+          secondaryOutlineColor: "var(--buttonColors-secondaryOutlineColor)",
+          secondaryShadowEnabled: "var(--buttonColors-secondaryShadowEnabled)",
+          primaryOutline: "var(--buttonColors-primaryOutline)", // TODO: add to themesV2 API
+          primaryShadow: "var(--buttonColors-primaryShadow)", // TODO: add to themesV2 API
+          disabled: "var(--buttonColors-disabled)", // TODO: add to themesV2 API
+          destructiveText: "var(--buttonColors-destructiveText)", // TODO: add to themesV2 API
+        },
+        textColors: {
+          primaryColor: "var(--textColors-primaryColor)",
+          secondaryColor: "var(--textColors-secondaryColor)",
+          pageTitle: "var(--textColors-pageTitle)",
+          legalText: "var(--textColors-legalText)",
+          productTitle: "var(--textColors-productTitle)",
+          priceText: "var(--textColors-priceText)",
+          strikethroughPriceText: "var(--textColors-strikethroughPriceText)",
+          salePriceText: "var(--textColors-salePriceText)",
+        },
+        stateColors: {
+          subscriptions: "var(--stateColors-subscriptions)",
+          favorites: "var(--stateColors-favorites)",
+          reviews: "var(--stateColors-reviews)",
+          success: "var(--stateColors-success)",
+          error: "var(--stateColors-error)",
+          warning: "var(--stateColors-warning)",
+          disabled: "var(--stateColors-disabled)",
+          skeleton: "var(--stateColors-skeleton)",
+          error: "var(--stateColors-error)", // TODO: add to themesV2 API
+        },
+        productImages: {
+          aspectRatio: "var(--productImages-aspectRatio)",
+          scaling: "var(--productImages-scaling)",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "include": [".", "components/ThemeProvider.tsx"],
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "outDir": "./dist",
+    "declaration": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}