diff --git a/template/apps/web/package.json b/template/apps/web/package.json index 3056e11b..f37c4dc9 100644 --- a/template/apps/web/package.json +++ b/template/apps/web/package.json @@ -14,72 +14,68 @@ "build-storybook": "storybook build" }, "dependencies": { - "@hookform/resolvers": "2.9.11", - "@mantine/core": "7.1.3", - "@mantine/dates": "7.1.3", - "@mantine/dropzone": "7.1.3", - "@mantine/hooks": "7.1.3", - "@mantine/modals": "7.1.3", + "@hookform/resolvers": "3.3.4", + "@mantine/core": "7.5.2", + "@mantine/dates": "7.5.2", + "@mantine/dropzone": "7.5.2", + "@mantine/hooks": "7.5.2", + "@mantine/modals": "7.5.2", "@mantine/next": "6.0.21", - "@mantine/notifications": "7.1.3", - "@svgr/webpack": "6.5.1", - "@tabler/icons-react": "2.10.0", - "@tanstack/react-query": "5.13.4", - "@tanstack/react-table": "8.7.9", + "@mantine/notifications": "7.5.2", + "@svgr/webpack": "8.1.0", + "@tabler/icons-react": "2.47.0", + "@tanstack/react-query": "5.20.1", + "@tanstack/react-table": "8.11.8", "app-constants": "workspace:*", "app-types": "workspace:*", - "axios": "1.3.4", - "clsx": "2.0.0", - "dayjs": "1.11.7", - "dotenv-flow": "3.2.0", + "axios": "1.6.7", + "clsx": "2.1.0", + "dayjs": "1.11.10", + "dotenv-flow": "4.1.0", "lodash": "4.17.21", - "mixpanel-browser": "2.45.0", - "next": "13.2.4", + "mixpanel-browser": "2.49.0", + "next": "14.1.0", "react": "18.2.0", "react-dom": "18.2.0", - "react-hook-form": "7.43.5", + "react-hook-form": "7.50.1", "schemas": "workspace:*", - "socket.io-client": "4.6.1", + "socket.io-client": "4.7.4", "zod": "3.21.4" }, "devDependencies": { - "@babel/core": "7.21.0", - "@storybook/addon-essentials": "7.6.9", - "@storybook/addon-interactions": "7.6.9", - "@storybook/addon-links": "7.6.9", - "@storybook/addon-onboarding": "^1.0.10", + "@storybook/addon-essentials": "7.6.14", + "@storybook/addon-interactions": "7.6.14", + "@storybook/addon-links": "7.6.14", + "@storybook/addon-onboarding": "^1.0.11", "@storybook/addon-styling-webpack": "0.0.6", - "@storybook/blocks": "7.6.9", - "@storybook/builder-webpack5": "7.6.10", - "@storybook/nextjs": "7.6.9", - "@storybook/preview-api": "7.6.9", - "@storybook/react": "7.6.9", - "@storybook/test": "7.6.9", - "@tanstack/eslint-plugin-query": "5.12.1", - "@tanstack/react-query-devtools": "5.13.5", - "@types/mixpanel-browser": "2.38.1", - "@types/node": "18.15.1", - "@types/qs": "6.9.7", - "@types/react": "18.2.37", - "@types/react-dom": "18.0.11", - "@typescript-eslint/eslint-plugin": "5.54.1", - "@typescript-eslint/parser": "5.54.1", - "babel-loader": "9.1.2", - "css-loader": "6.7.3", - "eslint": "8.36.0", + "@storybook/blocks": "7.6.14", + "@storybook/builder-webpack5": "7.6.14", + "@storybook/nextjs": "7.6.14", + "@storybook/preview-api": "7.6.14", + "@storybook/react": "7.6.14", + "@storybook/test": "7.6.14", + "@tanstack/eslint-plugin-query": "5.20.1", + "@tanstack/react-query-devtools": "5.20.1", + "@types/lodash": "4.14.202", + "@types/mixpanel-browser": "2.49.0", + "@types/node": "18.18.14", + "@types/qs": "6.9.11", + "@types/react": "18.2.55", + "@types/react-dom": "18.2.19", + "@typescript-eslint/eslint-plugin": "6.21.0", + "@typescript-eslint/parser": "6.21.0", + "eslint": "8.56.0", "eslint-config-airbnb": "19.0.4", - "eslint-config-airbnb-typescript": "17.0.0", - "eslint-config-next": "13.2.4", + "eslint-config-airbnb-typescript": "17.1.0", + "eslint-config-next": "14.1.0", "eslint-plugin-storybook": "0.6.15", - "eslint-plugin-tsc": "2.0.0", - "lint-staged": "13.2.0", - "postcss": "8.4.19", - "postcss-preset-mantine": "1.9.0", + "lint-staged": "15.2.2", + "postcss": "8.4.35", + "postcss-preset-mantine": "1.13.0", "postcss-simple-vars": "7.0.1", - "storybook": "7.6.9", + "storybook": "7.6.14", "storybook-dark-mode": "3.0.3", - "style-loader": "3.3.1", - "typescript": "4.9.5" + "typescript": "5.3.3" }, "lint-staged": { "*.{ts,tsx}": [ diff --git a/template/apps/web/src/components/Link/Link.module.css b/template/apps/web/src/components/Link/Link.module.css deleted file mode 100644 index ebf7884c..00000000 --- a/template/apps/web/src/components/Link/Link.module.css +++ /dev/null @@ -1,26 +0,0 @@ -.link { - display: flex; - gap: 5px; - - color: var(--mantine-color-blue-5); - - pointer-events: initial; - - &:hover { - color: var(--mantine-color-blue-2); - } -} - -.disabled { - color: var(--mantine-color-gray-2); - - pointer-events: none; - - &:hover { - color: var(--mantine-color-gray-2); - } -} - -.nextLinkUnderlineNone { - text-decoration: none; -} diff --git a/template/apps/web/src/components/Link/Link.stories.tsx b/template/apps/web/src/components/Link/Link.stories.tsx deleted file mode 100644 index c8dda777..00000000 --- a/template/apps/web/src/components/Link/Link.stories.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { IconUserCircle } from '@tabler/icons-react'; -import { StoryFn, Meta } from '@storybook/react'; - -import Link from './index'; - -export default { - title: 'Components/Link', - component: Link, - tags: ['autodocs'], - argTypes: { - children: { name: 'Text', control: 'text', defaultValue: 'Text' }, - href: { name: 'Href', control: 'text', defaultValue: 'https://www.paralect.com' }, - disabled: { - name: 'Disabled', - options: [true, false], - control: { type: 'boolean' }, - defaultValue: false, - }, - underline: { - name: 'Underline', - options: [true, false], - control: { type: 'boolean' }, - defaultValue: false, - }, - inherit: { - name: 'Inherit', - options: [true, false], - control: { type: 'boolean' }, - defaultValue: false, - }, - icon: { - table: { - disable: true, - }, - }, - inNewTab: { - name: 'In new tab', - options: [true, false], - control: { type: 'boolean' }, - defaultValue: true, - }, - size: { - name: 'Size', - options: ['xs', 'sm', 'md', 'lg', 'xl'], - control: { - type: 'inline-radio', - labels: { - xs: 'Extra small', - sm: 'Small', - md: 'Medium', - lg: 'Large', - xl: 'Extra large', - }, - }, - defaultValue: 'md', - }, - }, -} as Meta; - -const Template: StoryFn = ({ ...args }) => ( - - {args.children} - -); - -export const Icon = Template.bind({}); - -Icon.args = { - icon: , -}; diff --git a/template/apps/web/src/components/Link/index.tsx b/template/apps/web/src/components/Link/index.tsx deleted file mode 100644 index b163341d..00000000 --- a/template/apps/web/src/components/Link/index.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { FC, memo, ReactNode } from 'react'; -import NextLink from 'next/link'; -import { Anchor } from '@mantine/core'; -import cx from 'clsx'; - -import classes from './Link.module.css'; - -interface LinkProps { - children: ReactNode; - type?: 'url' | 'router'; - href?: string; - size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; - align?: 'left' | 'center' | 'right' | 'justify'; - icon?: ReactNode; - inNewTab?: boolean; - underline?: boolean; - inherit?: boolean; - disabled?: boolean; -} - -const Link: FC = ({ - type = 'url', - children, - href = '#', - size = 'md', - disabled, - inNewTab, - underline = true, - icon, - inherit, - align = 'left', -}) => { - switch (type) { - case 'router': - return ( - - - {icon} - {children} - - - ); - - case 'url': - return ( - - {icon} - {children} - - ); - default: - return null; - } -}; - -export default memo(Link); diff --git a/template/apps/web/src/components/index.ts b/template/apps/web/src/components/index.ts index a81d04ee..56abcd12 100644 --- a/template/apps/web/src/components/index.ts +++ b/template/apps/web/src/components/index.ts @@ -1,2 +1 @@ -export { default as Link } from './Link'; export { default as Table } from './Table'; diff --git a/template/apps/web/src/pages/404/index.page.tsx b/template/apps/web/src/pages/404/index.page.tsx index 3a1e11f3..4fb1e91d 100644 --- a/template/apps/web/src/pages/404/index.page.tsx +++ b/template/apps/web/src/pages/404/index.page.tsx @@ -1,44 +1,34 @@ -import { useCallback } from 'react'; +import { NextPage } from 'next'; import Head from 'next/head'; import router from 'next/router'; -import { NextPage } from 'next'; import { Stack, Title, Text, Button } from '@mantine/core'; import { RoutePath } from 'routes'; -const NotFound: NextPage = () => { - const handleClick = useCallback(() => { - router.push(RoutePath.Home); - }, []); +const NotFound: NextPage = () => ( + <> + + Page not found + - return ( - <> - - Page not found - - - Oops! The page is not found. + + Oops! The page is not found. - - The page you are looking for may have been removed, - or the link you followed may be broken. - + + The page you are looking for may have been removed, + or the link you followed may be broken. + - - - - ); -}; + + + +); export default NotFound; diff --git a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Footer/index.module.css b/template/apps/web/src/pages/_app/PageConfig/MainLayout/Footer/index.module.css deleted file mode 100644 index 87be0ba4..00000000 --- a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Footer/index.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.footer { - border: none; - - flex: 0 1 auto; -} diff --git a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Footer/index.tsx b/template/apps/web/src/pages/_app/PageConfig/MainLayout/Footer/index.tsx deleted file mode 100644 index e56497b4..00000000 --- a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Footer/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { FC } from 'react'; -import { AppShellFooter as LayoutFooter } from '@mantine/core'; - -import classes from './index.module.css'; - -const Footer: FC = () => { - const year = new Date().getFullYear(); - - return ( - - {`Ship ${year} © All rights reserved`} - - ); -}; - -export default Footer; diff --git a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/MenuToggle/index.tsx b/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/MenuToggle/index.tsx index c02ac9b8..3b777453 100644 --- a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/MenuToggle/index.tsx +++ b/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/MenuToggle/index.tsx @@ -1,4 +1,4 @@ -import { forwardRef, memo } from 'react'; +import { forwardRef } from 'react'; import { Avatar, UnstyledButton, useMantineTheme } from '@mantine/core'; import { accountApi } from 'resources/account'; @@ -20,4 +20,4 @@ const MenuToggle = forwardRef((props, ref) => { ); }); -export default memo(MenuToggle); +export default MenuToggle; diff --git a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/ShadowLoginBanner/index.module.css b/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/ShadowLoginBanner/index.module.css deleted file mode 100644 index 21c5f080..00000000 --- a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/ShadowLoginBanner/index.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.banner { - border-radius: 0; - - justify-content: center; - align-items: center; -} diff --git a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/ShadowLoginBanner/index.tsx b/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/ShadowLoginBanner/index.tsx index bc23bff0..0023b3b8 100644 --- a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/ShadowLoginBanner/index.tsx +++ b/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/ShadowLoginBanner/index.tsx @@ -1,21 +1,18 @@ -import { Paper } from '@mantine/core'; +import { FC } from 'react'; +import { Center, Text } from '@mantine/core'; -import classes from './index.module.css'; +interface ShadowLoginBannerProps { + email: string; +} -const ShadowLoginBanner = ({ email }: { email: string }) => ( - - You currently under the shadow login as ' - {email} - ' - +const ShadowLoginBanner: FC = ({ email }) => ( +
+ + You currently under the shadow login as + {' '} + {email} + +
); export default ShadowLoginBanner; diff --git a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/UserMenu/index.module.css b/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/UserMenu/index.module.css deleted file mode 100644 index a70857cf..00000000 --- a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/UserMenu/index.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.dropdown { - left: unset !important; - right: 30px !important; - border: 1px solid var(--mantine-color-gray-4); - box-shadow: unset !important; -} diff --git a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/UserMenu/index.tsx b/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/UserMenu/index.tsx index 2d4590bc..384fe207 100644 --- a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/UserMenu/index.tsx +++ b/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/components/UserMenu/index.tsx @@ -1,5 +1,5 @@ +import { FC } from 'react'; import Link from 'next/link'; -import { memo, FC } from 'react'; import { Menu } from '@mantine/core'; import { IconUserCircle, IconLogout } from '@tabler/icons-react'; @@ -9,17 +9,16 @@ import { RoutePath } from 'routes'; import MenuToggle from '../MenuToggle'; -import classes from './index.module.css'; - const UserMenu: FC = () => { const { mutate: signOut } = accountApi.useSignOut(); return ( - + - + + { ); }; -export default memo(UserMenu); +export default UserMenu; diff --git a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/index.module.css b/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/index.module.css deleted file mode 100644 index 975b5aaf..00000000 --- a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/index.module.css +++ /dev/null @@ -1,8 +0,0 @@ -.header { - background-color: var(--mantine-white); - border-bottom: 1px solid var(--mantine-color-gray-4); - - flex: 1 1 auto; - align-items: center; - justify-content: space-between; -} diff --git a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/index.tsx b/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/index.tsx index 85c12298..d9312efc 100644 --- a/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/index.tsx +++ b/template/apps/web/src/pages/_app/PageConfig/MainLayout/Header/index.tsx @@ -1,9 +1,9 @@ import { memo, FC } from 'react'; -import { AppShellHeader as LayoutHeader, Container } from '@mantine/core'; +import { Anchor, AppShell, Group } from '@mantine/core'; +import Link from 'next/link'; import { accountApi } from 'resources/account'; -import { Link } from 'components'; import { RoutePath } from 'routes'; import { LogoImage } from 'public/images'; @@ -11,30 +11,26 @@ import { LogoImage } from 'public/images'; import UserMenu from './components/UserMenu'; import ShadowLoginBanner from './components/ShadowLoginBanner'; -import classes from './index.module.css'; - const Header: FC = () => { const { data: account } = accountApi.useGet(); if (!account) return null; return ( - + {account.isShadow && } - - + + + - + + - - + + ); }; diff --git a/template/apps/web/src/pages/_app/PageConfig/MainLayout/MainLayout.module.css b/template/apps/web/src/pages/_app/PageConfig/MainLayout/MainLayout.module.css deleted file mode 100644 index bf72f5f7..00000000 --- a/template/apps/web/src/pages/_app/PageConfig/MainLayout/MainLayout.module.css +++ /dev/null @@ -1,12 +0,0 @@ -.root { - min-height: 100vh; - background-color: var(--mantine-color-gray-0); - - display: flex; - flex-direction: column; -} - -.main { - padding: 32px; - padding-top: 104px; -} diff --git a/template/apps/web/src/pages/_app/PageConfig/MainLayout/index.tsx b/template/apps/web/src/pages/_app/PageConfig/MainLayout/index.tsx index f6fec0d5..4d36b574 100644 --- a/template/apps/web/src/pages/_app/PageConfig/MainLayout/index.tsx +++ b/template/apps/web/src/pages/_app/PageConfig/MainLayout/index.tsx @@ -1,32 +1,28 @@ import { FC, ReactElement } from 'react'; -import { AppShell } from '@mantine/core'; +import { AppShell, Stack } from '@mantine/core'; -import Header from './Header'; -import Footer from './Footer'; +import { accountApi } from 'resources/account'; -import classes from './MainLayout.module.css'; +import Header from './Header'; interface MainLayoutProps { children: ReactElement; } -const MainLayout: FC = ({ children }) => ( - -
- - - {children} - - -