Add muui package

src/App.css

@@ -0,0 +1,42 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+button {
+  font-size: calc(10px + 2vmin);
+}

src/App.tsx

@@ -0,0 +1,22 @@
+import { useState } from "react";
+import "./App.css";
+import { Button } from "./lib";
+
+function App() {
+  const [count, setCount] = useState<number>(0);
+
+  const onCount = (e: any) => {
+    setCount(count + 1);
+  };
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>Count: {count}</h1>
+        <Button onClick={onCount}>Click me</Button>
+      </header>
+    </div>
+  );
+}
+
+export default App;

src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/lib/components/box/index.tsx

@@ -0,0 +1,10 @@
+import MuiBox, { BoxProps as MuiBoxProps } from "@mui/material/Box";
+import React from "react";
+
+export interface BoxProps extends MuiBoxProps {}
+
+const Box: React.FC<BoxProps> = (props) => {
+  return <MuiBox {...props} />;
+};
+
+export default Box;

src/lib/components/button/index.tsx

@@ -0,0 +1,10 @@
+import MuiButton, { ButtonProps as MuiButtonProps } from "@mui/material/Button";
+import React from "react";
+
+export interface ButtonProps extends MuiButtonProps {}
+
+const Button: React.FC<ButtonProps> = (props) => {
+  return <MuiButton {...props} />;
+};
+
+export default Button;

src/lib/components/index.tsx

@@ -0,0 +1,5 @@
+import Button from "./button";
+import Box from "./box";
+import Skeleton from "./skeleton";
+
+export { Skeleton, Box, Button };

src/lib/components/scanner/index.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useState } from "react";
+import { QrReader } from "react-qr-reader";
+import { useSnackbar, useTimeout } from "../../hooks";
+import Button from "../button";
+import Snackbar from "../snackbar";
+
+export const Scanner = (props: any) => {
+  const [data, setData] = useState("No data");
+  const { handleClose, open, setOpen, message, setMessage } = useSnackbar();
+  const [loading, setLoading] = useState(true);
+  const timeout = useTimeout(() => {
+    setLoading(false);
+  }, 1000);
+
+  useEffect(() => {
+    timeout;
+  }, []);
+
+  const _onChangeFacingMode = () => {
+    let mode = getFacingMode() === "environment" ? "user" : "environment";
+    localStorage.setItem("facingMode", mode);
+    window.location.reload();
+  };
+
+  const getFacingMode = () => {
+    return localStorage.getItem("facingMode") || "environment";
+  };
+
+  return (
+    <>
+      <Snackbar message={message} open={open} onClose={handleClose} />
+      <Button onClick={() => _onChangeFacingMode()}>
+        {getFacingMode() !== "environment" ? "Back Camera" : "Front Camera"}
+      </Button>
+      <QrReader
+        ViewFinder={(props: any) => {
+          return (
+            <>
+              {loading ? (
+                <>Loading...</>
+              ) : (
+                <video id="qr-video" width={"250px"} />
+              )}
+            </>
+          );
+        }}
+        onResult={(result: any, error: any) => {
+          if (!!result) {
+            setData(result?.text);
+          }
+
+          if (!!error) {
+            let _error = error?.toString() || "";
+            let message = "Something error!";
+            if (
+              _error.includes("DOMException") ||
+              _error.includes("NotAllowedError")
+            ) {
+              message = "Camera access denied!";
+            } else if (_error.includes("e2")) {
+              message = "QR code not found!";
+            }
+
+            setMessage(message);
+            setOpen(true);
+            console.info("QR Code Error", error, _error);
+          }
+        }}
+        constraints={{
+          facingMode: getFacingMode(),
+        }}
+        scanDelay={1000}
+        // videoId={"video"}
+        // videoContainerStyle={{
+        //   width: "100%",
+        //   height: "100%",
+        // }}
+        // videoStyle={{
+        //   width: "100%",
+        //   height: "100%",
+        // }}
+      />
+      <p>{data}</p>
+    </>
+  );
+};

src/lib/components/skeleton/index.tsx

@@ -0,0 +1,12 @@
+import MuiSkeleton, {
+  SkeletonProps as MuiSkeletonProps,
+} from "@mui/material/Skeleton";
+import React from "react";
+
+export interface SkeletonProps extends MuiSkeletonProps {}
+
+const Skeleton: React.FC<SkeletonProps> = (props) => {
+  return <MuiSkeleton {...props} />;
+};
+
+export default Skeleton;

src/lib/components/slide/index.tsx

@@ -0,0 +1,9 @@
+import MuiSlide, { SlideProps as MuiSlideProps } from "@mui/material/Slide";
+
+export interface SlideProps extends MuiSlideProps {}
+
+const Slide: React.FC<SlideProps> = (props) => {
+  return <MuiSlide {...props} />;
+};
+
+export default Slide;

src/lib/components/snackbar/index.tsx

@@ -0,0 +1,16 @@
+import MuiSnackbar, {
+  SnackbarProps as MuiSnackbarProps,
+} from "@mui/material/Snackbar";
+import Slide from "../slide";
+
+export interface SnackbarProps extends MuiSnackbarProps {}
+
+const TransitionLeft = (props: any) => {
+  return <Slide {...props} direction="left" />;
+};
+
+const Snackbar: React.FC<SnackbarProps> = (props) => {
+  return <MuiSnackbar TransitionComponent={TransitionLeft} {...props} />;
+};
+
+export default Snackbar;

src/lib/index.tsx

@@ -0,0 +1 @@
+export * from "./components";

src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />