Skip to content

feat: page builder #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from
Draft

feat: page builder #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f288e33
feat: GridLayout and basic layout of builder page
zhengjitf May 2, 2023
d2ba8bf
feat: GridLayout support columnGap and rowGap and rewrite computation
zhengjitf May 13, 2023
b2ca3a1
feat: page builder MVP1
zhengjitf May 13, 2023
777e6f7
feat: refine page builder UI
Cyronlee Mar 29, 2024
7bc4bb5
feat: refine code
Cyronlee Mar 29, 2024
697b118
feat: refine code
Cyronlee Mar 29, 2024
cb87b93
feat: hide preview
Cyronlee Apr 1, 2024
4170d9f
feat: widgets arch
Cyronlee Apr 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions builder.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"version": null}
91 changes: 90 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"@types/react": "18.0.35",
"@types/react-dom": "18.0.11",
"@vercel/analytics": "^1.0.1",
"ahooks": "^3.7.10",
"axios": "^1.6.5",
"eslint": "8.38.0",
"eslint-config-next": "13.3.0",
Expand All @@ -28,7 +29,8 @@
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"typescript": "5.0.4",
"universal-cookie": "^4.0.4"
"universal-cookie": "^4.0.4",
"zustand": "^4.5.2"
},
"devDependencies": {
"@faker-js/faker": "^7.6.0",
Expand Down
62 changes: 36 additions & 26 deletions src/components/CollapseNavbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,14 @@ import {
import { siteConfig } from '@/../../config/site.config';
import ThemeToggle from '@/components/ThemeToggle';
import { ChevronDownIcon, MinusIcon } from '@chakra-ui/icons';
import { MdDashboard } from 'react-icons/md';

import Link from 'next/link';
import { useRouter } from 'next/router';

const CollapseNavbar = () => {
const router = useRouter();

const [isOpen, setIsOpen] = useState(true);

const borderColor = useColorModeValue('gray.300', 'gray.400');
Expand Down Expand Up @@ -47,34 +52,39 @@ const CollapseNavbar = () => {
</Heading>
</Link>
<HStack>
<Menu>
<MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
Pages
</MenuButton>
<MenuList>
<Link href="/">
<MenuItem>Dashboard</MenuItem>
</Link>
<Link href="/example/build-status-overview">
<MenuItem>Build Status</MenuItem>
</Link>
<Link href="/example/ticket-status-overview">
<MenuItem>Ticket Status</MenuItem>
</Link>
<Link href="/example/project-timeline">
<MenuItem>Project Timeline</MenuItem>
</Link>
<Link href="/example/owner-rotation-overview">
<MenuItem>Owner Rotation</MenuItem>
</Link>
</MenuList>
</Menu>
<ThemeToggle />
{/*<Menu>*/}
{/* <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>*/}
{/* Pages*/}
{/* </MenuButton>*/}
{/* <MenuList>*/}
{/* <Link href="/">*/}
{/* <MenuItem>Dashboard</MenuItem>*/}
{/* </Link>*/}
{/* <Link href="/example/build-status-overview">*/}
{/* <MenuItem>Build Status</MenuItem>*/}
{/* </Link>*/}
{/* <Link href="/example/ticket-status-overview">*/}
{/* <MenuItem>Ticket Status</MenuItem>*/}
{/* </Link>*/}
{/* <Link href="/example/project-timeline">*/}
{/* <MenuItem>Project Timeline</MenuItem>*/}
{/* </Link>*/}
{/* <Link href="/example/owner-rotation-overview">*/}
{/* <MenuItem>Owner Rotation</MenuItem>*/}
{/* </Link>*/}
{/* </MenuList>*/}
{/*</Menu>*/}
<IconButton
aria-label="Hide Navbar"
icon={<MinusIcon />}
onClick={() => setIsOpen(false)}
aria-label="Customize homepage"
icon={<MdDashboard />}
onClick={() => router.push('/builder')}
/>
<ThemeToggle />
{/*<IconButton*/}
{/* aria-label="Hide Navbar"*/}
{/* icon={<MinusIcon />}*/}
{/* onClick={() => setIsOpen(false)}*/}
{/*/>*/}
</HStack>
</Flex>
</Collapse>
Expand Down
45 changes: 45 additions & 0 deletions src/components/DashboardPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { FC, ComponentProps, useEffect, useState } from 'react';
import styled from '@emotion/styled';
import { GridLayout } from '@/components/GridLayout';
import { usePageConfigStore } from '@/stores/pageConfig';
import { zBoardWidgets } from '@/widgets';
import { Box } from '@chakra-ui/react';
import GrayBox from '@/components/ui/GrayBox';

const Container = styled.div`
width: 100vw;
height: 100%;
`;

const DashboardPreview: FC = () => {
const {
pageConfig: { rows, cols, rowGap, columnGap, layouts, padding },
} = usePageConfigStore();

useEffect(() => {
usePageConfigStore.persist.rehydrate();
}, []);

return (
// <Container>
<GridLayout
rows={rows}
cols={cols}
rowGap={rowGap}
columnGap={columnGap}
padding={padding}
layouts={layouts}
itemRender={({ component }) => {
const widget = zBoardWidgets.find(({ name }) => name === component);
return widget ? (
<widget.Component w="100%" h="100%" />
) : (
<GrayBox>{component} Widget Not found</GrayBox>
);
}}
/>
// </Container>
);
};

export default DashboardPreview;
Loading