yaml-admin-front 0.0.2 → 0.0.3

package/package.json

@@ -1,40 +1,30 @@
 {
   "name": "yaml-admin-front",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
-  "license": "MIT",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
+  "description": "React components for yaml-admin front (library)",
+  "main": "src/index.js",
+  "scripts": {},
   "dependencies": {
+    "@iconify/react": "^6.0.0",
+    "axios": "^1.11.0",
+    "js-yaml": "^4.1.0",
     "ra-data-json-server": "^5.10.1",
     "react": "^19.1.1",
     "react-admin": "^5.10.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "yaml": "^2.8.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.32.0",
     "@types/react": "^19.1.9",
-    "@types/react-dom": "^19.1.7",
-    "@vitejs/plugin-react": "^4.7.0",
-    "eslint": "^9.32.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.3.0",
-    "vite": "^7.1.0"
+    "@types/react-dom": "^19.1.7"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/muyoungko/yaml_admin.git"
   },
   "files": [
-    "dist",
     "src",
-    "index.html",
-    "vite.config.js",
     "README.md"
   ],
   "publishConfig": {

package/src/AdminContext.jsx

@@ -0,0 +1,14 @@
+import React, { createContext, useContext } from 'react';
+
+// Context to share parsed admin YAML JSON across the app
+export const AdminContext = createContext({ yml: null, setYml: () => {} });
+
+export const AdminProvider = ({ initialYml = null, children }) => {
+  return <AdminContext.Provider value={initialYml}>{children}</AdminContext.Provider>;
+};
+
+export const useAdminContext = () => {
+  return useContext(AdminContext);
+};
+
+

package/src/YMLAdmin.jsx

@@ -0,0 +1,55 @@
+import { Admin, Resource, ListGuesser } from "react-admin";
+import jsonServerProvider from "ra-data-json-server";
+import YAML from 'yaml';
+import LoginPage from './login/LoginPage';
+import MyLayout from './layout/MyLayout'
+import { useState, useEffect } from 'react';
+import { Icon } from '@iconify/react';
+import { AdminProvider } from './AdminContext';
+import authProvider from './login/authProvider';
+import { setApiHost} from './common/axios';
+
+const API_HOST = import.meta.env.VITE_HOST_API || 'http://localhost:6911'
+const dataProvider = jsonServerProvider(API_HOST);
+
+const YMLAdmin = ({ adminYaml }) => {
+  const [yml, setYml] = useState(null);
+  useEffect(() => {
+    const loadYamlFile = async () => {
+      try {
+        const json = YAML.parse(adminYaml);
+        setYml(json);
+        setApiHost(json['api-host'].uri);
+      } catch (error) {
+        console.error('YAML 파일을 읽는 중 오류가 발생했습니다:', error);
+      }
+    };
+
+    loadYamlFile();
+  }, []);
+
+  return (
+    <AdminProvider initialYml={yml} width="1250px">
+      <Admin
+        layout={MyLayout}
+        authProvider={authProvider}
+        dataProvider={dataProvider}>
+        {yml?.entity && Object.keys(yml.entity).map(name => {
+          const entity = yml.entity[name];
+          const IconComponent = entity?.icon
+            ? () => <Icon icon={entity.icon} width="1.25rem" height="1.25rem" />
+            : undefined;
+          return (
+            <Resource key={name} name={name}
+              options={{ label: entity.label }}
+              icon={IconComponent}
+              list={ListGuesser} />
+          )
+        })}
+
+      </Admin>
+    </AdminProvider>
+  )
+};
+
+export default YMLAdmin;

package/src/common/axios.jsx

@@ -0,0 +1,78 @@
+import axios from 'axios';
+
+// ----------------------------------------------------------------------
+
+const axiosInstance = axios.create({});
+
+export const setApiHost = (host) => {
+  let base = host ?? import.meta.env.VITE_HOST_API ?? 'http://localhost:6911';
+  if (base && !base.startsWith('http')) {
+    base = `http://${base}`;
+  }
+  axiosInstance.defaults.baseURL = base;
+};
+
+// initialize with defaults so it's usable before YAML is loaded
+setApiHost();
+
+axiosInstance.interceptors.response.use(
+  (res) => res,
+  (error) => Promise.reject((error.response && error.response.data) || 'Something went wrong')
+);
+
+export default axiosInstance;
+
+// ----------------------------------------------------------------------
+
+export const fetcher = async (args) => {
+  const [url, config] = Array.isArray(args) ? args : [args];
+
+  const res = await axiosInstance.get(url, { ...config });
+
+  return res.data;
+};
+
+export const postFetcher = async (url, config, param) => {
+  const res = await axiosInstance.post(url, param, { ...config });
+
+  return res.data;
+};
+
+export const putFetcher = async (url, config, param) => {
+  const res = await axiosInstance.put(url, param, { ...config });
+
+  return res.data;
+};
+
+export const uploadFile = (blob_path, file_name) => new Promise((resolve, reject) => {
+  if(blob_path){
+      const reader = new FileReader();
+      reader.readAsArrayBuffer(blob_path);
+      reader.onload = async () => {
+          const ext = file_name.substring(file_name.lastIndexOf('.')+1, file_name.length);
+          const res = await fetcher(`/api/media/url/put/${ext}`)
+          fetch(res.upload_url, { method: "PUT", 
+            headers: {
+              'Content-Type': res.contentType
+            },
+            body:reader.result })
+          .then(res2=>{
+              resolve(res.key)
+          });
+      };
+      reader.onerror = reject;
+  } else  {
+      resolve(null);
+  }
+});
+
+export const convertFileToBase64 = file => new Promise((resolve, reject) => {
+  if(file){
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = reject;
+  } else  {
+      reject(new Error('no file'))
+  }
+});

package/src/common/client.jsx

@@ -0,0 +1,78 @@
+import axios from 'axios';
+
+// ----------------------------------------------------------------------
+
+const axiosInstance = axios.create({});
+
+export const setUpApiHost = (host) => {
+  let base = host ?? import.meta.env.VITE_HOST_API ?? 'http://localhost:6911';
+  if (base && !base.startsWith('http')) {
+    base = `http://${base}`;
+  }
+  axiosInstance.defaults.baseURL = base;
+};
+
+// initialize with defaults so it's usable before YAML is loaded
+setUpApiHost();
+
+axiosInstance.interceptors.response.use(
+  (res) => res,
+  (error) => Promise.reject((error.response && error.response.data) || 'Something went wrong')
+);
+
+export default axiosInstance;
+
+// ----------------------------------------------------------------------
+
+export const fetcher = async (args) => {
+  const [url, config] = Array.isArray(args) ? args : [args];
+
+  const res = await axiosInstance.get(url, { ...config });
+
+  return res.data;
+};
+
+export const postFetcher = async (url, config, param) => {
+  const res = await axiosInstance.post(url, param, { ...config });
+
+  return res.data;
+};
+
+export const putFetcher = async (url, config, param) => {
+  const res = await axiosInstance.put(url, param, { ...config });
+
+  return res.data;
+};
+
+export const uploadFile = (blob_path, file_name) => new Promise((resolve, reject) => {
+  if(blob_path){
+      const reader = new FileReader();
+      reader.readAsArrayBuffer(blob_path);
+      reader.onload = async () => {
+          const ext = file_name.substring(file_name.lastIndexOf('.')+1, file_name.length);
+          const res = await fetcher(`/api/media/url/put/${ext}`)
+          fetch(res.upload_url, { method: "PUT", 
+            headers: {
+              'Content-Type': res.contentType
+            },
+            body:reader.result })
+          .then(res2=>{
+              resolve(res.key)
+          });
+      };
+      reader.onerror = reject;
+  } else  {
+      resolve(null);
+  }
+});
+
+export const convertFileToBase64 = file => new Promise((resolve, reject) => {
+  if(file){
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = reject;
+  } else  {
+      reject(new Error('no file'))
+  }
+});

package/src/index.js

@@ -0,0 +1 @@
+export { default as YMLAdmin } from './YMLAdmin.jsx';

package/src/layout/MyAppBar.jsx

@@ -0,0 +1,60 @@
+import React, { forwardRef, useState, useEffect } from 'react'
+import { AppBar, UserMenu, Logout, MenuItemLink, useRefresh, useUserMenu, LoadingIndicator } from 'react-admin';
+import Avatar from '@mui/material/Avatar';
+// import client from '../common/client'
+import { Badge, Typography, Toolbar, Tabs, Tab, Button, Box, List as CoreList, Chip, CircularProgress } from '@mui/material';
+
+
+const ProjectMenu = forwardRef((props, ref) => {
+    const { onClose } = useUserMenu();
+    const refresh = useRefresh();
+
+    useEffect(() => {
+    }, [])
+
+    return (
+        <MenuItemLink
+            ref={ref}
+            to="/screen"
+            primaryText={<Typography color={selected ? 'primary' : ''}>{props.project.name}</Typography>}
+            leftIcon={<MyCustomIcon url={props.project.img && props.project.img.src} />}
+            onClick={handleClick} // close the menu on click
+        />
+    )
+});
+
+const MyUserMenu = props => {
+    const [projectList, setProjectList] = useState([]);
+    const [url, setUrl] = useState({});
+
+    useEffect(() => {
+
+    }, [])
+
+    const handleChange = () => {
+        let selected_project = getSelectedProject()
+        projectList.map(m => {
+            if (selected_project == m.id)
+                if (m.img)
+                    setUrl(m.img.src)
+                else
+                    setUrl(null)
+        })
+    }
+    return (
+        <UserMenu {...props}>
+            {projectList.map(m => (
+                <ProjectMenu key={m.id} project={m} onChange={handleChange} />
+            ))}
+            <Logout />
+        </UserMenu>
+    )
+}
+
+
+const MyAppBar = props => <AppBar {...props} userMenu={<MyUserMenu />} >
+
+</AppBar>;
+
+
+export default MyAppBar;

package/src/layout/MyLayout.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Layout, AppBar } from 'react-admin';
+import MyAppBar from './MyAppBar'
+import MyMenu from './MyMenu'
+
+const MyLayout = (props) => <Layout {...props} appBar={MyAppBar} menu={MyMenu} />;
+
+export default MyLayout;

package/src/layout/MyMenu.jsx

@@ -0,0 +1,62 @@
+import { useState, useMemo } from 'react';
+import { Menu } from 'react-admin';
+import SubMenu from './SubMenu';
+import { Icon } from '@iconify/react';
+import { useAdminContext } from '../AdminContext';
+
+const MyMenu = () => {
+    const yml = useAdminContext();
+    const [state, setState] = useState({
+        
+    });
+    const handleToggle = (menu) => {
+        setState(state => ({ ...state, [menu]: !state[menu] }));
+    };
+
+    const categoryList = useMemo(() => {
+        const list = yml?.front?.category || []
+        list.forEach(m=>{
+            state[m.name] = true
+            m.menuList = yml?.entity && Object.keys(yml.entity).map(m=>{
+                let r = yml.entity[m]
+                r.name = m
+                return r
+            }).filter(f=>f.category == m.name)
+        })
+        return list
+    }, [yml]);
+
+    const noCartegoryList = useMemo(() => {
+        const list = yml?.entity && Object.keys(yml.entity).map(m=>{
+            let r = yml.entity[m]
+            r.name = m
+            return r
+        }).filter(f=>!f.category)
+        return list || [];
+    }, [yml]);
+
+    return (
+        <Menu>
+            <Menu.DashboardItem />
+
+            {/* <Menu.ResourceItem name='member' /> */}
+            {categoryList.map(c => {
+                return <SubMenu
+                    key={c.name}
+                    handleToggle={() => handleToggle(c.name)}
+                    isOpen={state[c.name]}
+                    name={c.name}
+                    icon={<Icon icon={c.icon} />}
+                    dense={true}
+                >
+                    {c.menuList.map(m => <Menu.ResourceItem key={m.name} name={m.name} />)}
+                </SubMenu>
+            })}
+
+            {noCartegoryList.map(m => <Menu.ResourceItem key={m.name} name={m.name} />)}
+
+        </Menu>
+    )
+};
+
+export default MyMenu;

package/src/layout/SubMenu.jsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { ReactElement, ReactNode } from 'react';
+import {
+    List,
+    MenuItem,
+    ListItemIcon,
+    Typography,
+    Collapse,
+    Tooltip,
+} from '@mui/material';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import { useTranslate, useSidebarState } from 'react-admin';
+
+
+const SubMenu = (props) => {
+    const { handleToggle, isOpen, name, icon, children, dense } = props;
+    const translate = useTranslate();
+
+    const [sidebarIsOpen] = useSidebarState();
+
+    const header = (
+        <MenuItem dense={dense} onClick={handleToggle}>
+            <ListItemIcon sx={{ minWidth: 5 }}>
+                {isOpen ? <ExpandMore /> : icon}
+            </ListItemIcon>
+            <Typography variant="inherit" color="textSecondary">
+                {translate(name)}
+            </Typography>
+        </MenuItem>
+    );
+
+    return (
+        <div>
+            {sidebarIsOpen || isOpen ? (
+                header
+            ) : (
+                <Tooltip title={translate(name)} placement="right">
+                    {header}
+                </Tooltip>
+            )}
+            <Collapse in={isOpen} timeout="auto" unmountOnExit>
+                <List
+                    dense={dense}
+                    component="div"
+                    disablePadding
+                    className="SubMenu"
+                    sx={{
+                        '& .MuiMenuItem-root': {
+                            transition:
+                                'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
+                            paddingLeft: theme =>
+                                sidebarIsOpen
+                                    ? theme.spacing(4)
+                                    : theme.spacing(2),
+                        },
+                    }}
+                >
+                    {children}
+                </List>
+            </Collapse>
+        </div>
+    );
+};
+
+export default SubMenu;

package/src/login/LoginPage.jsx

@@ -0,0 +1,155 @@
+import React, { useEffect, useRef } from 'react';
+import {
+	useLogin,
+	useNotify
+} from 'react-admin';
+
+import {
+	Box,
+	Typography
+} from '@mui/material';
+import client from '../common/axios.jsx';
+
+const LoginPage = ({ theme }) => {
+	const login = useLogin();
+	const divRef = useRef(null);
+
+	const [loading, setLoading] = React.useState(false)
+	const [email, setEmail] = React.useState('')
+	const [password, setPassword] = React.useState('')
+
+	useEffect(() => {
+
+	}, [])
+
+	useEffect(() => {
+		if (divRef.current && window.google) {
+			window.google.accounts.id.initialize({
+				client_id: '886217236574-52ccfmm2nj12dc63lcfb0ksms2akkimm.apps.googleusercontent.com',
+				context:'signin',
+				itp_support: true,
+				ux_mode: "redirect",
+				login_uri:`${api_host}/google/login/callback`,
+				callback: (res, error) => {
+					// This is the function that will be executed once the authentication with google is finished
+				},
+			});
+			window.google.accounts.id.renderButton(divRef.current, {
+				// theme: 'filled_blue',
+				// size: 'medium',
+				// type: 'standard',
+				// text: 'continue_with',
+			});
+		}
+	}, [divRef.current, window.google]);
+
+	const handleSubmit = e => {
+		e.preventDefault();
+	}
+
+	const handleLogin = (e) => {
+		setLoading(true)
+		client.request_post('/member/login', {
+			type: 'force',
+			email: email,
+			pass: password,
+		}).then((res) => {
+			setLoading(false)
+			if (res && res.r) {
+				localStorage.setItem('token', res.token);
+				window.location.href = '/'
+			} else if (res) {
+				alert(res.msg)
+			}
+		})
+	}
+
+	return (
+		<Box>
+			<form onSubmit={handleSubmit}>
+				<Box
+					display="flex"
+					justifyContent="center"
+					alignItems="center"
+					minHeight="100vh"
+				>
+					<Box>
+						<Box>
+							<img
+								width='200'
+								height='200'
+								alt='testA' />
+						</Box>
+						<Box mt={2}>
+							<Typography variant="h4" gutterBottom>
+								Devil App Builder
+							</Typography>
+						</Box>
+						<Box>
+							<Typography variant="subtitle1" gutterBottom>
+								Build your app by yourself
+							</Typography>
+						</Box>
+						{/* <Box mt={2}>
+							<TextField
+								fullWidth
+								variant="filled"
+								label="Google Email"
+								onChange={(e) => {setEmail(e.target.value)}}
+								defaultValue=""
+							/>
+						</Box>
+						<Box>
+							<TextField
+								fullWidth
+								variant="filled"
+								label="Password"
+								type="password"
+								onChange={(e) => {setPassword(e.target.value)}}
+								autoComplete="current-password"
+							/>
+						</Box>
+						<Box mt={1} sx={{ display: 'flex', justifyContent: 'flex-start' }}>
+							<Box>
+								<Button 
+									disabled={loading}
+									startIcon={loading && <CircularProgress color="success" size={24} />} 
+									onClick={handleLogin}
+									sx={{ width: '280px' }} variant="contained">Sign In</Button>
+							</Box>
+							<Box ml={1}>
+								<Button 
+									onClick={handleJoin}
+									variant="outlined">Sign Up</Button>
+							</Box>
+						</Box> */}
+						<Box>
+							<div ref={divRef} />
+							{/* <div id="g_id_onload"
+								
+								data-client_id="886217236574-52ccfmm2nj12dc63lcfb0ksms2akkimm.apps.googleusercontent.com"
+								data-context="signin"
+								data-ux_mode="redirect"
+								data-login_uri={`${api_host}/google/login/callback`}
+								data-itp_support="true">
+							</div>
+
+							<div class="g_id_signin"
+								data-type="standard"
+								data-shape="pill"
+								data-theme="filled_black"
+								data-text="signin_with"
+								data-size="large"
+								data-logo_alignment="left">
+							</div> */}
+						</Box>
+					</Box>
+
+				</Box>
+			</form>
+		</Box>
+	);
+
+};
+
+export default LoginPage;