cubetiq/cubetiq-muui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add muui package

Browse Source
This commit is contained in:
Sambo Chea 2022-05-17 08:17:39 +07:00
commit 6905847235
Signed by: sombochea
GPG Key ID: 3C7CF22A05D95490
22 changed files with 4483 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

13
index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CUBETIQ MUUI</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

1954
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

77
package.json Normal file
View File

@ -0,0 +1,77 @@
{
"name": "@cubetiq/muui",
"private": true,
"version": "0.0.1",
"author": {
"name": "Sambo Chea",
"email": "sombochea@cubetiqs.com"
},
"description": "MUUI a React UI library for building user interfaces",
"keywords": [
"muui",
"react",
"vite",
"mui"
],
"main": "./dist/muui-vite.umd.js",
"module": "./dist/muui-vite.es.js",
"exports": {
".": {
"import": "./dist/muui-vite.es.js",
"require": "./dist/muui-vite.umd.js"
}
},
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"test": "vitest run",
"watch": "vitest",
"coverage": "vitest run --coverage"
},
"peerDependencies": {},
"devDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0",
"@types/node": "^17.0.34",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@vitejs/plugin-react": "^1.3.0",
"eslint": "^8.15.0",
"eslint-plugin-react": "^7.29.4",
"typescript": "^4.6.3",
"vite": "^2.9.9",
"vitest": "^0.12.6",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.6.2",
"@mui/material": "^5.7.0"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"eslintConfig": {
"env": {
"browser": true,
"node": true,
"es2020": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"sourceType": "module"
}
},
"dependencies": {}
}

42
src/App.css Normal file
View File

@ -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);
}

22
src/App.tsx Normal file
View File

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

13
src/index.css Normal file
View File

@ -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;
}

10
src/lib/components/box/index.tsx Normal file
View File

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

10
src/lib/components/button/index.tsx Normal file
View File

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

5
src/lib/components/index.tsx Normal file
View File

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

86
src/lib/components/scanner/index.tsx Normal file
View File

@ -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>
</>
);
};

12
src/lib/components/skeleton/index.tsx Normal file
View File

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

9
src/lib/components/slide/index.tsx Normal file
View File

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

16
src/lib/components/snackbar/index.tsx Normal file
View File

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

1
src/lib/index.tsx Normal file
View File

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

10
src/main.tsx Normal file
View File

@ -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>
);

1
src/vite-env.d.ts vendored Normal file
View File

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

21
tsconfig.json Normal file
View File

@ -0,0 +1,21 @@
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["example", "src/vite-env.d.ts", "src/App.tsx", "src/main.tsx"],
"references": [{ "path": "./tsconfig.node.json" }]
}

8
tsconfig.node.json Normal file
View File

@ -0,0 +1,8 @@
{
"compilerOptions": {
"composite": true,
"module": "esnext",
"moduleResolution": "node"
},
"include": ["vite.config.ts"]
}

25
vite.config.ts Normal file
View File

@ -0,0 +1,25 @@
import * as path from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
build: {
lib: {
entry: path.resolve(__dirname, "src/lib/index.tsx"),
name: "CUBETIQ MUUI",
fileName: (format) => `muui-vite.${format}.js`,
},
rollupOptions: {
// externalize deps that shouldn't be bundled
external: ["react", "react-dom"],
output: {
// Provide global variables to use in the UMD build for externalized deps
globals: {
react: "React",
},
},
},
},
plugins: [react()],
});

8
vitest.config.js Normal file
View File

@ -0,0 +1,8 @@
import { defineConfig } from "vite";
export default defineConfig({
test: {
globals: false,
environment: "jsdom",
},
});

2116
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff