Skip to content

Commit 5f3d2fa

Browse files
hiriskihiriski
committed
☕🎨 Setup store & add custom mui theme.
1 parent 3ea1a2c commit 5f3d2fa

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+498
-115
lines changed

‎src/App.tsx

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
1-
import React, { FC } from 'react';
1+
import { FC } from 'react';
2+
3+
// Router.
24
import { BrowserRouter } from 'react-router-dom';
3-
import { ThemeProvider } from '@/providers';
4-
import RootRoutes from './root-routes';
5+
6+
// Context providers.
7+
import { ThemeProvider, ReduxProvider } from '@/providers';
8+
9+
// App route switch.
10+
import AppRoutes from '@/app-routes';
511

612
const App: FC = () => {
713
return (
814
<ThemeProvider>
9-
<BrowserRouter>
10-
<RootRoutes />
11-
</BrowserRouter>
15+
<ReduxProvider>
16+
<BrowserRouter>
17+
<AppRoutes />
18+
</BrowserRouter>
19+
</ReduxProvider>
1220
</ThemeProvider>
1321
);
1422
};

‎src/app-routes.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// React
2+
import { FC, Suspense } from 'react';
3+
4+
// Hooks router..
5+
import { useRoutes } from 'react-router-dom';
6+
7+
// Routes object.
8+
import routes from './routes';
9+
10+
const AppRoutes: FC = () => {
11+
return <Suspense fallback={null}>{useRoutes(routes())}</Suspense>;
12+
};
13+
14+
export default AppRoutes;

‎src/components/app-bar/app-bar.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { FC } from 'react';
2+
3+
// Mui components.
4+
import { AppBar as MuiAppBar, Container } from '@mui/material';
5+
6+
import { AppConfig } from '@/config';
7+
8+
const AppBar: FC = () => {
9+
return (
10+
<MuiAppBar elevation={0}>
11+
<Container>{AppConfig.appName}</Container>
12+
</MuiAppBar>
13+
);
14+
};
15+
16+
export default AppBar;

‎src/components/app-bar/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as AppBar } from './app-bar';

‎src/components/greeting/greeting.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { FC } from 'react';
1+
import { FC } from 'react';
22

33
interface Props {
44
name: string;

‎src/components/invoice-paper/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as InvoicePaper } from './invoice-paper';

‎src/components/invoice-paper/invoice-paper.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { FC, ReactNode } from 'react';
2+
3+
// Mui components.
4+
import { Paper, SxProps } from '@mui/material';
5+
6+
interface Props {
7+
children: ReactNode;
8+
sx?: SxProps;
9+
}
10+
11+
const ACTUALLY_PAPER_SIZE: Record<string, string> = {
12+
width: '210mm',
13+
height: '297mm',
14+
};
15+
16+
const InvoicePaper: FC<Props> = ({ children, sx }) => {
17+
return (
18+
<Paper
19+
sx={{
20+
width: { xs: '100%', md: ACTUALLY_PAPER_SIZE.width },
21+
height: { xs: 'unset', md: ACTUALLY_PAPER_SIZE.height },
22+
...sx,
23+
}}
24+
>
25+
{children}
26+
</Paper>
27+
);
28+
};
29+
30+
export default InvoicePaper;

‎src/components/invoice-settings/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as InvoiceSettings } from './invoice-settings';

‎src/components/invoice-settings/invoice-settings.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { FC } from 'react';
2+
3+
// Mui components.
4+
import { Paper } from '@mui/material';
5+
6+
const InvoiceSettings: FC = () => {
7+
return (
8+
<Paper
9+
sx={{
10+
flex: 1,
11+
width: '100%',
12+
minHeight: 300,
13+
display: 'flex',
14+
alignItems: 'center',
15+
justifyContent: 'center',
16+
}}
17+
>
18+
Invoice Settings
19+
</Paper>
20+
);
21+
};
22+
23+
export default InvoiceSettings;

‎src/components/layout/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Layout } from './layout';

‎src/components/layout/layout.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { FC, ReactNode } from 'react';
2+
3+
// Mui components.
4+
import { Box, Container } from '@mui/material';
5+
import { useMediaQuery, useTheme } from '@mui/material';
6+
7+
// App bar
8+
import { AppBar } from '@/components//app-bar';
9+
10+
interface Props {
11+
children: ReactNode;
12+
}
13+
14+
const Layout: FC<Props> = ({ children }) => {
15+
const theme = useTheme();
16+
17+
const isMatchMobileView = useMediaQuery(theme.breakpoints.down('sm'));
18+
19+
return (
20+
<Box>
21+
{/* App bar */}
22+
<AppBar />
23+
24+
{/* Background layout */}
25+
<Box
26+
sx={{
27+
width: '100%',
28+
position: 'fixed',
29+
backgroundColor: 'primary.main',
30+
height: isMatchMobileView ? 200 : 300,
31+
}}
32+
/>
33+
<Box sx={{ position: 'relative', pt: '120px', pb: 10 }}>
34+
<Container>{children}</Container>
35+
</Box>
36+
</Box>
37+
);
38+
};
39+
40+
export default Layout;

‎src/config/common/app-config.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import type { IAppConfig } from './interface';
2+
3+
export const AppConfig: IAppConfig = {
4+
appName: 'React Simple Invoice Generator',
5+
appDescription: 'Just a simple PDF invoice generator.',
6+
};

‎src/config/common/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './app-config';

‎src/config/common/interface.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export interface IAppConfig {
2+
appName: string;
3+
appDescription?: string;
4+
}

‎src/config/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './common';
2+
export * from './theme';

‎src/config/routes.tsx

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎src/config/theme/index.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Mui.
2+
import { createTheme } from '@mui/material/styles';
3+
4+
// Custom theme options.
5+
import palette from './palette';
6+
import typography from './typography';
7+
import shadows from './shadows';
8+
import shape from './shape';
9+
10+
// Theme config.
11+
export const theme = createTheme({
12+
palette,
13+
typography,
14+
shadows,
15+
shape,
16+
});

‎src/config/theme/palette.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Colors.
2+
import { blueGrey, common } from '@mui/material/colors';
3+
4+
// Interfaces.
5+
import { Palette } from '@mui/material/styles';
6+
7+
// Custom theme palette.
8+
const palette: Partial<Palette> = {
9+
background: {
10+
default: '#f7f7f7',
11+
paper: common.white,
12+
},
13+
primary: {
14+
light: '#DAEEFF',
15+
main: '#4790FF',
16+
dark: '#2352B7',
17+
contrastText: '#fbfbfb',
18+
},
19+
secondary: {
20+
light: '#FFE699',
21+
main: '#FFA600',
22+
dark: '#DB8600',
23+
contrastText: '#fbfbfb',
24+
},
25+
text: {
26+
primary: blueGrey[900],
27+
secondary: blueGrey[600],
28+
disabled: blueGrey[400],
29+
},
30+
};
31+
32+
export default palette;

‎src/config/theme/shadows.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// Interfaces.
2+
import { Shadows } from '@mui/material/styles/shadows';
3+
4+
// Custom shadows.
5+
const shadows: Shadows = [
6+
'none',
7+
'0 6px 10px 0 rgb(0 0 0 / 3%)',
8+
'0 8px 15px 0 rgb(0 0 0 / 5%)',
9+
'0 14px 22px 0 rgb(0 0 0 /6%)',
10+
'0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)',
11+
'0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)',
12+
'0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',
13+
'0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)',
14+
'0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)',
15+
'0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)',
16+
'0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)',
17+
'0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)',
18+
'0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)',
19+
'0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)',
20+
'0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)',
21+
'0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)',
22+
'0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)',
23+
'0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)',
24+
'0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)',
25+
'0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)',
26+
'0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)',
27+
'0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)',
28+
'0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)',
29+
'0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)',
30+
'0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)',
31+
];
32+
33+
export default shadows;

‎src/config/theme/shape.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Colors.
2+
import { blueGrey, common } from '@mui/material/colors';
3+
4+
// Interfaces.
5+
import { ShapeOptions } from '@mui/system';
6+
7+
// Custom shape.
8+
const shape: ShapeOptions = {
9+
borderRadius: 3,
10+
};
11+
12+
export default shape;

‎src/theme/typography.ts renamed to ‎src/config/theme/typography.ts

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,41 @@
1+
// Interfaces.
12
import { TypographyOptions } from '@mui/material/styles/createTypography';
23

4+
// Default font family
35
export const fontFamily = [
4-
'Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
5-
].join(',');
6+
'Be Vietnam Pro, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
7+
].join(', ');
68

9+
// Custom theme typography.
710
const typography: TypographyOptions = {
8-
fontFamily: [
9-
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
10-
].join(','),
11+
fontFamily,
1112
fontWeightLight: 300,
1213
fontWeightRegular: 400,
1314
fontWeightMedium: 500,
1415
fontWeightBold: 700,
1516
h1: {
1617
fontWeight: 700,
1718
fontSize: 34,
18-
fontFamily,
1919
},
2020
h2: {
2121
fontWeight: 700,
2222
fontSize: 30,
23-
fontFamily,
2423
},
2524
h3: {
2625
fontSize: 28,
2726
fontWeight: 700,
28-
fontFamily,
2927
},
3028
h4: {
3129
fontSize: 24,
3230
fontWeight: 700,
33-
fontFamily,
3431
},
3532
h5: {
3633
fontSize: 20,
3734
fontWeight: 700,
38-
fontFamily,
3935
},
4036
h6: {
4137
fontSize: 16,
4238
fontWeight: 700,
43-
fontFamily,
4439
},
4540
body1: {
4641
fontSize: '0.875rem',

‎src/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
<meta name="theme-color" content="#fbfbfb" />
77
<meta name="description" content="React Material-UI Admin Dashboard" />
8-
<title>Kujang UI - React Material-UI Admin Dashboard</title>
8+
<title>React Simple Invoice Generator</title>
99
<link rel="preconnect" href="https://fonts.googleapis.com" />
1010
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1111
<link
12-
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap"
12+
href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
1313
rel="stylesheet"
1414
/>
1515
</head>

‎src/index.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import React from 'react';
1+
// React DOM.
22
import { createRoot } from 'react-dom/client';
3-
import App from './App';
3+
4+
// Components.
5+
import App from '@/app';
46

57
const rootElement = document.getElementById('root');
68
const root = createRoot(rootElement as Element);

‎src/providers/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
export { default as ThemeProvider } from './theme-prodiver';
1+
export { default as ThemeProvider } from './theme-provider';
2+
export { default as ReduxProvider } from './redux-provider';

0 commit comments

Comments
 (0)