@tapcart/mobile-components 0.1.2 → 0.1.3

package/components/ui/use-toast.ts

@@ -1,191 +0,0 @@
-"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

@@ -1,27 +0,0 @@
-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

@@ -1,14 +0,0 @@
-{
-  "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

@@ -1,28 +0,0 @@
-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

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

package/postcss.config.js

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

package/styles/globals.css

@@ -1,146 +0,0 @@
-@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

@@ -1,140 +0,0 @@
-/** @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)",
-        },
-        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

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