feat: init project SelfChckout

package/components/atoms/Button.tsx

@@ -0,0 +1,45 @@
+"use client"
+import { Button as MUIButton } from "@mui/material"
+import React from "react"
+
+interface ButtonProps {
+  label: string
+  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info"
+  onClick?: () => void
+  disabled?: boolean
+  className?: string
+  startIcon?: React.ReactNode
+}
+
+const Button: React.FC<ButtonProps> = ({
+  label,
+  variant = "primary",
+  onClick,
+  disabled,
+  className = "",
+  startIcon,
+}) => {
+  const colorMap: Record<string, "primary" | "secondary" | "error" | "warning" | "info" | "success"> = {
+    primary: "primary",
+    secondary: "secondary",
+    success: "success",
+    danger: "error",
+    warning: "warning",
+    info: "info",
+  }
+
+  return (
+    <MUIButton
+      onClick={onClick}
+      disabled={disabled}
+      color={colorMap[variant ?? "primary"]}
+      className={className}
+      variant="contained"
+      startIcon={startIcon}
+    >
+      {label}
+    </MUIButton>
+  )
+}
+
+export default Button

package/components/atoms/Input.tsx

@@ -0,0 +1,27 @@
+"use client"
+import { TextField } from "@mui/material"
+import React from "react"
+
+interface InputProps {
+  type: string
+  placeholder?: string
+  value: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  autocomplete?: string
+}
+
+const Input: React.FC<InputProps> = ({ type, placeholder, value, onChange, autocomplete }) => {
+  return (
+    <TextField
+      type={type}
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+      autoComplete={autocomplete}
+      fullWidth
+      variant="outlined"
+    />
+  )
+}
+
+export default Input

package/components/atoms/Label.tsx

@@ -0,0 +1,18 @@
+"use client"
+import { Typography } from "@mui/material"
+import React from "react"
+
+interface LabelProps {
+  htmlFor: string
+  text: string
+}
+
+const Label: React.FC<LabelProps> = ({ htmlFor, text }) => {
+  return (
+    <Typography variant="subtitle1" component="label" htmlFor={htmlFor} className="mb-2 block">
+      {text}
+    </Typography>
+  )
+}
+
+export default Label

package/components/atoms/Title.tsx

@@ -0,0 +1,18 @@
+"use client"
+import { Typography } from "@mui/material"
+import React from "react"
+
+interface TitleProps {
+  text: string
+  size?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+}
+
+const Title: React.FC<TitleProps> = ({ text, size = "h1" }) => {
+  return (
+    <Typography variant={size} className="font-bold">
+      {text}
+    </Typography>
+  )
+}
+
+export default Title

package/components/atoms/Tooltip.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import * as RadixTooltip from "@radix-ui/react-tooltip"
+import { cva, VariantProps } from "class-variance-authority"
+import React from "react"
+import { twMerge } from "tailwind-merge"
+
+const tooltipContent = cva([], {
+  variants: {
+    intent: {
+      primary: ["rounded-0.5md", "bg-zinc-700", "font-open-sans", "text-white"],
+    },
+    size: {
+      md: ["px-4", "py-2.5", "text-2xs"],
+    },
+  },
+  defaultVariants: {
+    intent: "primary",
+    size: "md",
+  },
+})
+
+const tooltipArrow = cva([], {
+  variants: {
+    intent: {
+      primary: ["fill-zinc-700"],
+    },
+    size: {
+      md: ["w-4", "h-2"],
+    },
+  },
+  defaultVariants: {
+    intent: "primary",
+    size: "md",
+  },
+})
+
+export interface TooltipProps extends VariantProps<typeof tooltipContent>, RadixTooltip.TooltipProps {
+  explainer: React.ReactElement | string
+  children: React.ReactElement
+  className?: string
+  withArrow?: boolean
+  side?: "top" | "right" | "bottom" | "left"
+}
+
+export function Tooltip({
+  children,
+  explainer,
+  open,
+  defaultOpen,
+  onOpenChange,
+  intent,
+  size,
+  side = "top",
+  className,
+  withArrow,
+}: TooltipProps) {
+  return (
+    <RadixTooltip.Provider>
+      <RadixTooltip.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} delayDuration={200}>
+        <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
+        <RadixTooltip.Portal>
+          <RadixTooltip.Content
+            side={side}
+            sideOffset={5}
+            className={twMerge(tooltipContent({ intent, size, className }))}
+          >
+            {explainer}
+            {withArrow ? <RadixTooltip.Arrow className={twMerge(tooltipArrow({ intent, size, className }))} /> : null}
+          </RadixTooltip.Content>
+        </RadixTooltip.Portal>
+      </RadixTooltip.Root>
+    </RadixTooltip.Provider>
+  )
+}