Merge pull request #28 from shaes-farm/add-chart-view-to-example

Add sample views to example app
shaes-farm · Aug 18, 2023 · b7db7e1 · b7db7e1
2 parents cb727a5 + 4f4afe8
commit b7db7e1
Show file tree

Hide file tree

Showing 16 changed files with 900 additions and 103 deletions.
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -24,6 +24,7 @@
     "next": "13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "recharts": "^2.7.3",
     "typescript": "5.0.4"
   }
 }
diff --git a/example/src/components/Chart.tsx b/example/src/components/Chart.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import {useTheme} from '@mui/material/styles';
+import {faker} from '@faker-js/faker';
+import {LineChart, Line, XAxis, YAxis, Label, ResponsiveContainer} from 'recharts';
+import {Title} from '@shaes-farm/mui-mas';
+
+// Generate Sales Data
+function createData(time: string, amount?: number) {
+  return { time, amount };
+}
+let amount = 0;
+
+const data = [
+  createData('00:00', amount),
+  createData('03:00', amount += faker.number.int(1000)),
+  createData('06:00', amount += faker.number.int(1000)),
+  createData('09:00', amount += faker.number.int(1000)),
+  createData('12:00', amount += faker.number.int(1000)),
+  createData('15:00', amount += faker.number.int(1000)),
+  createData('18:00', amount += faker.number.int(1000)),
+  createData('21:00', amount += faker.number.int(1000)),
+  createData('24:00', undefined),
+];
+
+export default function Chart() {
+  const theme = useTheme();
+
+  return (
+    <React.Fragment>
+      <Title>Today</Title>
+      <ResponsiveContainer>
+        <LineChart
+          data={data}
+          margin={{
+            top: 16,
+            right: 16,
+            bottom: 0,
+            left: 24,
+          }}
+        >
+          <XAxis
+            dataKey="time"
+            stroke={theme.palette.text.secondary}
+            style={theme.typography.body2}
+          />
+          <YAxis
+            stroke={theme.palette.text.secondary}
+            style={theme.typography.body2}
+          >
+            <Label
+              angle={270}
+              position="left"
+              style={{
+                textAnchor: 'middle',
+                fill: theme.palette.text.primary,
+                ...theme.typography.body1,
+              }}
+            >
+              Sales ($)
+            </Label>
+          </YAxis>
+          <Line
+            isAnimationActive={false}
+            type="monotone"
+            dataKey="amount"
+            stroke={theme.palette.primary.main}
+            dot={false}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </React.Fragment>
+  );
+}
diff --git a/example/src/components/Deposits.tsx b/example/src/components/Deposits.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import {faker} from '@faker-js/faker';
+import {Link, Title} from '@shaes-farm/mui-mas';
+
+function preventDefault(event: React.MouseEvent) {
+  event.preventDefault();
+}
+
+const amount = faker.finance.amount(1000, 10000, 2, '$');
+const date = faker.date.recent({days: 30});
+
+export const Deposits = () => (
+  <>
+    <Title>Recent Deposits</Title>
+    <Typography component="p" variant="h4">
+      {amount}
+    </Typography>
+    <Typography color="text.secondary" sx={{ flex: 1 }}>
+      on {date.toLocaleDateString()}
+    </Typography>
+    <div>
+      <Link color="primary" href="#" onClick={preventDefault}>
+        View balance
+      </Link>
+    </div>
+  </>
+);
+
+export default Deposits;
diff --git a/example/src/components/Orders.tsx b/example/src/components/Orders.tsx
@@ -0,0 +1,107 @@
+import * as React from 'react';
+import {faker} from '@faker-js/faker';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import {Link, Title} from '@shaes-farm/mui-mas';
+
+const getCardIssuer = () => faker.helpers.arrayElement([
+  'AMEX',
+  'VISA',
+  'MC',
+  'DISC',
+]);
+
+// Generate Order Data
+function createData(
+  id: number,
+  date: string,
+  name: string,
+  shipTo: string,
+  paymentMethod: string,
+  amount: number,
+) {
+  return { id, date, name, shipTo, paymentMethod, amount };
+}
+
+const rows = [
+  createData(
+    0,
+    faker.date.recent().toLocaleDateString(),
+    faker.person.fullName(),
+    `${faker.location.city()}, ${faker.location.state({abbreviated: true})}`,
+    `${getCardIssuer()} •••• ${faker.finance.accountNumber(4)}`,
+    faker.number.float({min: 100, max: 1000, precision: 0.01}),
+  ),
+  createData(
+    1,
+    faker.date.recent().toLocaleDateString(),
+    faker.person.fullName(),
+    `${faker.location.city()}, ${faker.location.state({abbreviated: true})}`,
+    `${getCardIssuer()} •••• ${faker.finance.accountNumber(4)}`,
+    faker.number.float({min: 100, max: 1000, precision: 0.01}),
+  ),
+  createData(
+    2,
+    faker.date.recent().toLocaleDateString(),
+    faker.person.fullName(),
+    `${faker.location.city()}, ${faker.location.state({abbreviated: true})}`,
+    `${getCardIssuer()} •••• ${faker.finance.accountNumber(4)}`,
+    faker.number.float({min: 100, max: 1000, precision: 0.01}),
+  ),
+  createData(
+    3,
+    faker.date.recent().toLocaleDateString(),
+    faker.person.fullName(),
+    `${faker.location.city()}, ${faker.location.state({abbreviated: true})}`,
+    `${getCardIssuer()} •••• ${faker.finance.accountNumber(4)}`,
+    faker.number.float({min: 100, max: 1000, precision: 0.01}),
+  ),
+  createData(
+    4,
+    faker.date.recent().toLocaleDateString(),
+    faker.person.fullName(),
+    `${faker.location.city()}, ${faker.location.state({abbreviated: true})}`,
+    `${getCardIssuer()} •••• ${faker.finance.accountNumber(4)}`,
+    faker.number.float({min: 100, max: 1000, precision: 0.01}),
+  ),
+];
+
+function preventDefault(event: React.MouseEvent) {
+  event.preventDefault();
+}
+
+export default function Orders() {
+  return (
+    <React.Fragment>
+      <Title>Recent Orders</Title>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell>Date</TableCell>
+            <TableCell>Name</TableCell>
+            <TableCell>Ship To</TableCell>
+            <TableCell>Payment Method</TableCell>
+            <TableCell align="right">Sale Amount</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.id}>
+              <TableCell>{row.date}</TableCell>
+              <TableCell>{row.name}</TableCell>
+              <TableCell>{row.shipTo}</TableCell>
+              <TableCell>{row.paymentMethod}</TableCell>
+              <TableCell align="right">{`$${row.amount}`}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <Link color="primary" href="#" onClick={preventDefault} sx={{ mt: 3 }}>
+        See more orders
+      </Link>
+    </React.Fragment>
+  );
+}
diff --git a/example/src/config/app-config.ts b/example/src/config/app-config.ts
@@ -0,0 +1,29 @@
+import {faker} from '@faker-js/faker';
+import type {AppConfig} from '@shaes-farm/mui-mas';
+
+export interface Config {
+  app: AppConfig;
+}
+
+export const defaultConfig: Config = {
+  app: {
+    title: 'Mui Mas!',
+    description: 'An example of the MUI Mas package used in Next.js',
+    icon: faker.image.url({height: 128, width: 128}),
+    logo: {
+      main: faker.image.url({height: 48, width: 48}),
+      contrast: faker.image.url({height: 48, width: 48}),
+    },
+    copyright: {
+      holder: faker.company.name(),
+      year: faker.date.past({years: 10}).getFullYear(),
+      url: faker.internet.url(),
+    },
+    pages: {
+      home: '/dashboard',
+      signin: '/signin',
+      signup: '/signup',
+      recovery: '/recover',
+    },
+  }
+};
diff --git a/example/src/utils/routes.tsx → example/src/config/routes.tsx b/example/src/utils/routes.tsx → example/src/config/routes.tsx
@@ -21,7 +21,7 @@ import {
   NavRoutes,
   NavRoute,
   Notifications,
-} from '@shaes/mui-mas';
+} from '@shaes-farm/mui-mas';
 
 export const mainRoutes: NavRoutes = {
   primary: [{

diff --git a/example/src/config/theme.ts b/example/src/config/theme.ts
@@ -0,0 +1,36 @@
+import { Roboto } from 'next/font/google';
+import { ThemeOptions } from '@mui/material'
+
+export const font = Roboto({
+  weight: ['300', '400', '500', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+  fallback: ['Helvetica', 'Arial', 'sans-serif'],
+});
+
+export const themeOptions: ThemeOptions = {
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#324764',
+    },
+    secondary: {
+      main: '#ba9b6b',
+    },
+    info: {
+      main: '#143461',
+    },
+    success: {
+      main: '#84B296',
+    },
+    warning: {
+      main: '#F7EFC8',
+    },
+    error: {
+      main: '#f44336'
+    },
+  },
+  typography: {
+    fontFamily: font.style.fontFamily,
+  },
+};
diff --git a/example/src/config/user-profile.ts b/example/src/config/user-profile.ts
@@ -0,0 +1,12 @@
+import {faker} from '@faker-js/faker';
+import type {Profile} from '@shaes-farm/mui-mas';
+
+export const userProfile: Profile = {
+  id: faker.string.uuid(),
+  firstName: faker.person.firstName(),
+  lastName: faker.person.lastName(),
+  bio: faker.person.bio(),
+  avatarUrl: faker.image.url({height: 48, width: 48}),
+  website: faker.internet.url(),
+  loading: false,
+};
diff --git a/example/src/pages/_app.tsx b/example/src/pages/_app.tsx
@@ -1,44 +1,9 @@
 import React from 'react';
 import '@/styles/globals.css'
 import type { AppProps } from 'next/app'
-import { ThemeOptions } from '@mui/material'
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import { Roboto } from 'next/font/google';
-
-export const font = Roboto({
-  weight: ['300', '400', '500', '700'],
-  subsets: ['latin'],
-  display: 'swap',
-  fallback: ['Helvetica', 'Arial', 'sans-serif'],
-});
-
-export const themeOptions: ThemeOptions = {
-  palette: {
-    mode: 'light',
-    primary: {
-      main: '#324764',
-    },
-    secondary: {
-      main: '#ba9b6b',
-    },
-    info: {
-      main: '#143461',
-    },
-    success: {
-      main: '#84B296',
-    },
-    warning: {
-      main: '#F7EFC8',
-    },
-    error: {
-      main: '#f44336'
-    },
-  },
-  typography: {
-    fontFamily: font.style.fontFamily,
-  },
-};
+import {themeOptions} from '@/config/theme';
 
 export default function App(props: AppProps) {
   const {Component, pageProps} = props;