rotriw · smallfangqwq · Feb 22, 2024 · Feb 22, 2024
diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
@@ -33,8 +33,8 @@ jobs:
           TIPTAP_PRO_REGISTRY: ${{ secrets.TIPTAP_PRO_REGISTRY }}
 
       - name: Install dependencies
-        run: yarn
+        run: pnpm install
 
       - name: ESLint Check
-        run: yarn run lint --max-warnings 0
+        run: pnpm run lint --max-warnings 0
         continue-on-error: false
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
     "private": true,
     "version": "0.0.0",
     "scripts": {
-        "ui:dev": "yarn workspace rmjac-ui run dev",
+        "ui:dev": "cd packages/ui-new && pnpm run dev",
         "ui:build": "yarn workspace rmjac-ui run build",
         "ui:preview": "yarn workspace rmjac-ui run preview",
         "debug": "ts-node packages/entry/index.ts --debug",

diff --git a/packages/ui-new/README.md b/packages/ui-new/README.md
@@ -0,0 +1,34 @@
+# Mantine Vite template
+
+## Features
+
+This template comes with the following features:
+
+- [PostCSS](https://postcss.org/) with [mantine-postcss-preset](https://mantine.dev/styles/postcss-preset)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Storybook](https://storybook.js.org/)
+- [Vitest](https://vitest.dev/) setup with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
+- ESLint setup with [eslint-config-mantine](https://github.com/mantinedev/eslint-config-mantine)
+
+## npm scripts
+
+## Build and dev scripts
+
+- `dev` – start development server
+- `build` – build production version of the app
+- `preview` – locally preview production build
+
+### Testing scripts
+
+- `typecheck` – checks TypeScript types
+- `lint` – runs ESLint
+- `prettier:check` – checks files with Prettier
+- `vitest` – runs vitest tests
+- `vitest:watch` – starts vitest watch
+- `test` – runs `vitest`, `prettier:check`, `lint` and `typecheck` scripts
+
+### Other scripts
+
+- `storybook` – starts storybook dev server
+- `storybook:build` – build production storybook bundle to `storybook-static`
+- `prettier:write` – formats all files with Prettier
diff --git a/packages/ui-new/index.html b/packages/ui-new/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Rmj.ac</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous">
+        <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js" integrity="sha384-cpW21h6RZv/phavutF+AuVYrr+dA8xD9zs6FwLpaCct6O9ctzYFfFr4dgmgccOTx" crossorigin="anonymous"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
+            onload="renderMathInElement(document.body);"></script>
+        <script>
+            <!--RENDER-->
+        </script>
+        <!--DEVSERVER-->
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>
diff --git a/packages/ui-new/package.json b/packages/ui-new/package.json
@@ -0,0 +1,71 @@
+{
+  "name": "rmjac-ui-new",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "lint": "npm run lint:eslint && npm run lint:stylelint",
+    "lint:eslint": "eslint . --ext .ts,.tsx --cache",
+    "lint:stylelint": "stylelint '**/*.css' --cache",
+    "prettier": "prettier --check \"**/*.{ts,tsx}\"",
+    "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
+    "vitest": "vitest run",
+    "vitest:watch": "vitest",
+    "test": "npm run typecheck && npm run prettier && npm run lint && npm run vitest && npm run build",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
+  },
+  "dependencies": {
+    "@mantine/core": "7.5.1",
+    "@mantine/hooks": "7.5.1",
+    "@tabler/icons-react": "^2.47.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
+    "@storybook/blocks": "^7.6.6",
+    "@storybook/react": "^7.6.6",
+    "@storybook/react-vite": "^7.6.6",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/react": "^18.2.36",
+    "@types/react-dom": "^18.2.14",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.53.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-mantine": "3.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.7.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jsdom": "^23.0.1",
+    "postcss": "^8.4.32",
+    "postcss-preset-mantine": "1.13.0",
+    "postcss-simple-vars": "^7.0.1",
+    "prettier": "^3.1.1",
+    "prop-types": "^15.8.1",
+    "storybook": "^7.6.6",
+    "storybook-dark-mode": "^3.0.3",
+    "stylelint": "^16.0.2",
+    "stylelint-config-standard-scss": "^12.0.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vite-tsconfig-paths": "^4.2.2",
+    "vitest": "^1.1.0"
+  },
+  "packageManager": "yarn@4.0.2"
+}
diff --git a/packages/ui-new/postcss.config.cjs b/packages/ui-new/postcss.config.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+  },
+};
diff --git a/packages/ui-new/src/App.tsx b/packages/ui-new/src/App.tsx
@@ -0,0 +1,21 @@
+import '@mantine/core/styles.css';
+import { MantineProvider } from '@mantine/core';
+import { Router } from './Router';
+import { theme } from './theme';
+import React from 'react';
+
+declare global {
+    interface Window {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        web?: any;
+        nowPage: string;
+    }
+}
+
+export default function App() {
+    return (
+        <MantineProvider classNamesPrefix='rmjac' theme={theme}>
+            <Router />
+        </MantineProvider>
+    );
+}
diff --git a/packages/ui-new/src/Router.tsx b/packages/ui-new/src/Router.tsx
@@ -0,0 +1,26 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { HomePage } from './pages/Home.page';
+import React from 'react';
+import { Root } from './root/Root';
+
+const router = createBrowserRouter([
+    {
+        path: '/',
+        element: <Root type='route' />,
+        children: [
+            {
+                path: '/',
+                element: <HomePage />
+            },
+
+            {
+                path: '/login',
+                element: <HomePage />
+            }
+        ]
+    },
+]);
+
+export function Router() {
+    return <RouterProvider router={router} />;   
+}
diff --git a/packages/ui-new/src/components/ColorSchemeToggle/ColorSchemeToggle.tsx b/packages/ui-new/src/components/ColorSchemeToggle/ColorSchemeToggle.tsx
@@ -0,0 +1,14 @@
+import { Button, Group, useMantineColorScheme } from '@mantine/core';
+import React from 'react';
+
+export function ColorSchemeToggle() {
+    const { setColorScheme } = useMantineColorScheme();
+
+    return (
+        <Group justify="center" mt="xl">
+        <Button onClick={() => setColorScheme('light')}>Light</Button>
+        <Button onClick={() => setColorScheme('dark')}>Dark</Button>
+        <Button onClick={() => setColorScheme('auto')}>Auto</Button>
+        </Group>
+    );
+}
diff --git a/packages/ui-new/src/components/Navbar/Navbar.module.css b/packages/ui-new/src/components/Navbar/Navbar.module.css
@@ -0,0 +1,34 @@
+.header {
+    height: rem(56px);
+    /* margin-bottom: rem(120px); */
+    background-color: var(--mantine-color-body);
+    box-shadow: var(--mantine-shadow-xs);
+    border-bottom: none !important;
+}
+
+.inner {
+    height: rem(56px);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.link {
+    display: block;
+    line-height: 1;
+    padding: rem(8px) rem(12px);
+    border-radius: var(--mantine-radius-sm);
+    text-decoration: none;
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+    font-size: var(--mantine-font-size-sm);
+    font-weight: 500;
+
+    @mixin hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    }
+
+    [data-mantine-color-scheme] &[data-active] {
+    background-color: var(--mantine-color-blue-filled);
+    color: var(--mantine-color-white);
+    }
+}
diff --git a/packages/ui-new/src/components/Navbar/Navbar.tsx b/packages/ui-new/src/components/Navbar/Navbar.tsx
@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { Container, Group, Burger, Text } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+// import { MantineLogo } from '@mantinex/mantine-logo';
+import React from 'react';
+import classes from './Navbar.module.css';
+import { NavLink } from 'react-router-dom';
+
+
+interface HeadersProps {
+    links: { link: string; label: string }[];
+    title: string;
+    type: 'route' | 'direct';
+}
+
+export function NavBar({ links, title, type }: HeadersProps) {
+    const [opened, { toggle }] = useDisclosure(false);
+    const [linksOpened, { toggle: toggleLinks }] = useDisclosure(false);
+    const [active, setActive] = useState(links[0].link);
+
+    const items = links.map((link) => (
+        <NavLink
+            key={link.label}
+            to={link.link}
+            className={classes.link}
+            data-active={active === link.link || undefined}
+            onClick={(event) => {
+                event.preventDefault();
+                setActive(link.link);
+            }}
+        >
+        {link.label}
+        </NavLink>
+    ));
+
+
+    return (
+        <header className={classes.header}>
+            <Container size="md" className={classes.inner}>
+                <Text c='blue' fw={700} size='lg'>Rmj.ac</Text>
+                <Group gap={5} visibleFrom="xs">
+                {items}
+                </Group>
+
+                <Burger opened={opened} onClick={toggle} hiddenFrom="xs" size="sm" />
+            </Container>
+        </header>
+    );
+}
diff --git a/packages/ui-new/src/components/Welcome/Welcome.module.css b/packages/ui-new/src/components/Welcome/Welcome.module.css
@@ -0,0 +1,10 @@
+.title {
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+  font-size: rem(100px);
+  font-weight: 900;
+  letter-spacing: rem(-2px);
+
+  @media (max-width: $mantine-breakpoint-md) {
+    font-size: rem(50px);
+  }
+}
diff --git a/packages/ui-new/src/components/Welcome/Welcome.story.tsx b/packages/ui-new/src/components/Welcome/Welcome.story.tsx
@@ -0,0 +1,7 @@
+import { Welcome } from './Welcome';
+
+export default {
+  title: 'Welcome',
+};
+
+export const Usage = () => <Welcome />;
diff --git a/packages/ui-new/src/components/Welcome/Welcome.test.tsx b/packages/ui-new/src/components/Welcome/Welcome.test.tsx
@@ -0,0 +1,12 @@
+import { render, screen } from '@test-utils';
+import { Welcome } from './Welcome';
+
+describe('Welcome component', () => {
+  it('has correct Vite guide link', () => {
+    render(<Welcome />);
+    expect(screen.getByText('this guide')).toHaveAttribute(
+      'href',
+      'https://mantine.dev/guides/vite/'
+    );
+  });
+});
diff --git a/packages/ui-new/src/components/Welcome/Welcome.tsx b/packages/ui-new/src/components/Welcome/Welcome.tsx
@@ -0,0 +1,23 @@
+import { Title, Text, Anchor } from '@mantine/core';
+import classes from './Welcome.module.css';
+
+export function Welcome() {
+  return (
+    <>
+      <Title className={classes.title} ta="center" mt={100}>
+        Welcome to{' '}
+        <Text inherit variant="gradient" component="span" gradient={{ from: 'pink', to: 'yellow' }}>
+          Mantine
+        </Text>
+      </Title>
+      <Text c="dimmed" ta="center" size="lg" maw={580} mx="auto" mt="xl">
+        This starter Vite project includes a minimal setup, if you want to learn more on Mantine +
+        Vite integration follow{' '}
+        <Anchor href="https://mantine.dev/guides/vite/" size="lg">
+          this guide
+        </Anchor>
+        . To get started edit pages/Home.page.tsx file.
+      </Text>
+    </>
+  );
+}
diff --git a/packages/ui-new/src/main.css b/packages/ui-new/src/main.css
@@ -0,0 +1,7 @@
+#root {
+    background-color: light-dark('#f7f7f7', var(--mantine-color-dark-7));
+}
+
+html, body {
+    background-color: light-dark(white, '#2C2E33') !important;
+}
diff --git a/packages/ui-new/src/main.tsx b/packages/ui-new/src/main.tsx
@@ -0,0 +1,6 @@
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import React from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
diff --git a/packages/ui-new/src/pages/Home.page.tsx b/packages/ui-new/src/pages/Home.page.tsx
@@ -0,0 +1,12 @@
+import { Welcome } from '../components/Welcome/Welcome';
+import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeToggle';
+import React from 'react';
+
+export function HomePage() {
+  return (
+    <>
+      <Welcome />
+      <ColorSchemeToggle />
+    </>
+  );
+}