next-ui setup

siddg97 · Feb 8, 2024 · eea9c80 · eea9c80
1 parent 68ba841
commit eea9c80
Show file tree

Hide file tree

Showing 18 changed files with 4,452 additions and 0 deletions.
diff --git a/react/.eslintrc.cjs b/react/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/react/.gitignore b/react/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/react/README.md b/react/README.md
@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
diff --git a/react/index.html b/react/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <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>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/react/package.json b/react/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "react",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@nextui-org/react": "^2.2.9",
+    "clsx": "^2.1.0",
+    "framer-motion": "^11.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.2.1",
+    "usehooks-ts": "^2.13.0"
+  },
+  "devDependencies": {
+    "@iconify/react": "^4.1.1",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  }
+}
diff --git a/react/postcss.config.js b/react/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/react/public/vite.svg b/react/public/vite.svg
diff --git a/react/src/App.tsx b/react/src/App.tsx
@@ -0,0 +1,14 @@
+import Navigation from "./components/Navigation.tsx";
+
+function App() {
+    return (
+        <div className="w-full">
+            <Navigation/>
+            <main className="mt-6 flex w-full flex-col items-center">
+                Hello
+            </main>
+        </div>
+    )
+}
+
+export default App
diff --git a/react/src/components/Navigation.tsx b/react/src/components/Navigation.tsx
@@ -0,0 +1,163 @@
+import { Icon } from "@iconify/react";
+import {
+    Avatar,
+    Badge,
+    Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger,
+    Link,
+    Navbar,
+    NavbarBrand,
+    NavbarContent,
+    NavbarItem, NavbarMenu, NavbarMenuItem,
+    NavbarMenuToggle,
+} from "@nextui-org/react";
+
+export default function Navigation() {
+    return (
+        <Navbar
+            classNames={{
+                base: "lg:bg-transparent lg:backdrop-filter-none",
+                item: "data-[active=true]:text-primary",
+                wrapper: "px-4 sm:px-6",
+            }}
+            height="60px"
+        >
+            <NavbarBrand>
+                <NavbarMenuToggle className="mr-2 h-6 sm:hidden"/>
+                {/*<AcmeIcon/>*/}
+                <p className="font-bold text-inherit">ACME</p>
+            </NavbarBrand>
+            <NavbarContent
+                className="ml-4 hidden h-12 w-full max-w-fit gap-4 rounded-full bg-content2 px-4 dark:bg-content1 sm:flex"
+                justify="start"
+            >
+                <NavbarItem>
+                    <Link className="flex gap-2 text-inherit" href="#">
+                        Dashboard
+                    </Link>
+                </NavbarItem>
+                <NavbarItem isActive>
+                    <Link aria-current="page" className="flex gap-2 text-inherit" href="#">
+                        Deployments
+                    </Link>
+                </NavbarItem>
+                <NavbarItem>
+                    <Link className="flex gap-2 text-inherit" href="#">
+                        Analytics
+                    </Link>
+                </NavbarItem>
+                <NavbarItem>
+                    <Link className="flex gap-2 text-inherit" href="#">
+                        Team
+                    </Link>
+                </NavbarItem>
+                <NavbarItem>
+                    <Link className="flex gap-2 text-inherit" href="#">
+                        Settings
+                    </Link>
+                </NavbarItem>
+            </NavbarContent>
+            <NavbarContent
+                className="ml-auto flex h-12 max-w-fit items-center gap-0 rounded-full p-0 lg:bg-content2 lg:px-1 lg:dark:bg-content1"
+                justify="end"
+            >
+                <NavbarItem className="hidden sm:flex">
+                    <Button isIconOnly radius="full" variant="light">
+                        <Icon className="text-default-500" icon="solar:magnifer-linear" width={22}/>
+                    </Button>
+                </NavbarItem>
+                <NavbarItem className="hidden sm:flex">
+                    <Button isIconOnly radius="full" variant="light">
+                        <Icon className="text-default-500" icon="solar:sun-linear" width={24}/>
+                    </Button>
+                </NavbarItem>
+                <NavbarItem className="hidden sm:flex">
+                    <Button isIconOnly radius="full" variant="light">
+                        <Icon className="text-default-500" icon="solar:settings-linear" width={24}/>
+                    </Button>
+                </NavbarItem>
+                {/*<NavbarItem className="flex">*/}
+                {/*    <Popover offset={12} placement="bottom-end">*/}
+                {/*        <PopoverTrigger>*/}
+                {/*            <Button*/}
+                {/*                disableRipple*/}
+                {/*                isIconOnly*/}
+                {/*                className="overflow-visible"*/}
+                {/*                radius="full"*/}
+                {/*                variant="light"*/}
+                {/*            >*/}
+                {/*                <Badge color="danger" content="5" showOutline={false} size="md">*/}
+                {/*                    <Icon className="text-default-500" icon="solar:bell-linear" width={22}/>*/}
+                {/*                </Badge>*/}
+                {/*            </Button>*/}
+                {/*        </PopoverTrigger>*/}
+                {/*        <PopoverContent className="max-w-[90vw] p-0 sm:max-w-[380px]">*/}
+                {/*            <NotificationsCard className="w-full shadow-none"/>*/}
+                {/*        </PopoverContent>*/}
+                {/*    </Popover>*/}
+                {/*</NavbarItem>*/}
+                <NavbarItem className="px-2">
+                    <Dropdown placement="bottom-end">
+                        <DropdownTrigger>
+                            <button className="mt-1 h-8 w-8 outline-none transition-transform">
+                                <Badge
+                                    className="border-transparent"
+                                    color="success"
+                                    content=""
+                                    placement="bottom-right"
+                                    shape="circle"
+                                    size="sm"
+                                >
+                                    <Avatar size="sm" src="https://i.pravatar.cc/150?u=a04258114e29526708c"/>
+                                </Badge>
+                            </button>
+                        </DropdownTrigger>
+                        <DropdownMenu aria-label="Profile Actions" variant="flat">
+                            <DropdownItem key="profile" className="h-14 gap-2">
+                                <p className="font-semibold">Signed in as</p>
+                                <p className="font-semibold">johndoe@example.com</p>
+                            </DropdownItem>
+                            <DropdownItem key="settings">My Settings</DropdownItem>
+                            <DropdownItem key="team_settings">Team Settings</DropdownItem>
+                            <DropdownItem key="analytics">Analytics</DropdownItem>
+                            <DropdownItem key="system">System</DropdownItem>
+                            <DropdownItem key="configurations">Configurations</DropdownItem>
+                            <DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
+                            <DropdownItem key="logout" color="danger">
+                                Log Out
+                            </DropdownItem>
+                        </DropdownMenu>
+                    </Dropdown>
+                </NavbarItem>
+            </NavbarContent>
+
+            {/* Mobile Menu */}
+            <NavbarMenu>
+                <NavbarMenuItem>
+                    <Link className="w-full" color="foreground" href="#">
+                        Dashboard
+                    </Link>
+                </NavbarMenuItem>
+                <NavbarMenuItem isActive>
+                    <Link aria-current="page" className="w-full" color="primary" href="#">
+                        Deployments
+                    </Link>
+                </NavbarMenuItem>
+                <NavbarMenuItem>
+                    <Link className="w-full" color="foreground" href="#">
+                        Analytics
+                    </Link>
+                </NavbarMenuItem>
+                <NavbarMenuItem>
+                    <Link className="w-full" color="foreground" href="#">
+                        Team
+                    </Link>
+                </NavbarMenuItem>
+                <NavbarMenuItem>
+                    <Link className="w-full" color="foreground" href="#">
+                        Settings
+                    </Link>
+                </NavbarMenuItem>
+            </NavbarMenu>
+        </Navbar>
+    );
+}
diff --git a/react/src/index.css b/react/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/react/src/main.tsx b/react/src/main.tsx
@@ -0,0 +1,13 @@
+import { NextUIProvider } from "@nextui-org/react";
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <NextUIProvider>
+            <App/>
+        </NextUIProvider>
+    </React.StrictMode>,
+)
diff --git a/react/src/utils/cn.ts b/react/src/utils/cn.ts
@@ -0,0 +1,8 @@
+import type { ClassValue } from "clsx";
+
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
diff --git a/react/src/vite-env.d.ts b/react/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/react/tailwind.config.js b/react/tailwind.config.js
@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+
+const { nextui } = require("@nextui-org/react");
+
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+        "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {},
+    },
+    darkMode: "class",
+    plugins: [nextui({
+        defaultTheme: 'dark',
+        defaultExtendTheme: 'dark'
+    })],
+}
diff --git a/react/tsconfig.json b/react/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}