npm - tapquest-ui-yeulamvietnam - Versions diffs - 2.0.0 - Mend

tapquest-ui-yeulamvietnam 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (188) hide show

package/example/README.md ADDED Viewed

@@ -0,0 +1,50 @@
+# 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 tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

package/example/eslint.config.js ADDED Viewed

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/example/index.html ADDED Viewed

@@ -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>

package/example/package.json ADDED Viewed

@@ -0,0 +1,35 @@
+{
+  "name": "example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "canvg": "^4.0.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "vite": "^6.2.0"
+  },
+  "pnpm": {
+    "packageExtensions": {
+      "example": {
+        "standalone": true
+      }
+    }
+  }
+}

package/example/public/vite.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/example/src/App.css ADDED Viewed

@@ -0,0 +1,8 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}

package/example/src/App.tsx ADDED Viewed

@@ -0,0 +1,62 @@
+import './App.css'
+import { useState } from 'react'
+import CoreView from './View/CoreComponentView'
+import MapView from './View/MapView'
+import Button from '../../src/components/Button.styled'
+function App() {
+  const views = {
+    "core": <CoreView />,
+    "map": <MapView />
+  }
+  // Set default selected view to the first one
+  const [selectedView, setSelectedView] = useState<string>(Object.keys(views)[0])
+  const handleViewChange = (viewKey: string) => {
+    setSelectedView(viewKey)
+  }
+  return (
+    <div className="tab-container">
+      {/* Tab buttons */}
+      <div className="tab-buttons" style={{
+        display: "flex",
+        flexDirection: "row",
+        gap: "16px",
+        marginBottom: "20px",
+        borderBottom: "1px solid #e0e0e0",
+        padding: "10px 0"
+      }}>
+        {Object.keys(views).map((viewKey) => (
+          <Button
+            key={viewKey}
+            onClick={() => handleViewChange(viewKey)}
+            style={{
+              backgroundColor: selectedView === viewKey ? '#4a90e2' : '#f0f0f0',
+              color: selectedView === viewKey ? 'white' : 'black',
+              fontWeight: selectedView === viewKey ? 'bold' : 'normal',
+              borderRadius: '4px',
+              padding: '8px 16px',
+              cursor: 'pointer',
+              border: 'none',
+              transition: 'all 0.3s ease'
+            }}
+          >
+            {viewKey.charAt(0).toUpperCase() + viewKey.slice(1)}
+          </Button>
+        ))}
+      </div>
+      {/* Tab content */}
+      <div className="tab-content" style={{ padding: "10px" }}>
+        {/* Only render the selected view */}
+        {views[selectedView as keyof typeof views]}
+      </div>
+    </div>
+  )
+}
+export default App

package/example/src/Card/index.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+export default function Card({title, backgroundColor, children}: {title: string, backgroundColor?: string, children: React.ReactNode}) {
+    return (
+        <div style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: "16px",
+            backgroundColor: backgroundColor,
+            padding: "16px",
+        }}>
+            <h3>{title}</h3>
+            {children}
+        </div>
+    )
+}

package/example/src/Icons/CircleArrow.tsx ADDED Viewed

@@ -0,0 +1,8 @@
+export default function CircleArrow() {
+    return (
+        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="28" height="28" rx="14" fill="#A71A1A" />
+            <path d="M6 14H19.5M19.5 14L14.5 9M19.5 14L14.5 19" stroke="white" strokeWidth="1.5" />
+        </svg>
+    )
+}

package/example/src/Icons/icon1.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+export default function Icon1() {
+    return (
+        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="40" height="40" rx="20" fill="#A71A1A" />
+            <rect width="24" height="24" transform="translate(8 8)" fill="white" fillOpacity="0.01" style={{ mixBlendMode: "multiply" }} />
+            <path d="M20.75 14H19.25V18.5H20.75V14Z" fill="white" />
+            <path d="M20.75 21.5H19.25V26H20.75V21.5Z" fill="white" />
+            <path d="M26 19.25H21.5V20.75H26V19.25Z" fill="white" />
+            <path d="M18.5 19.25H14V20.75H18.5V19.25Z" fill="white" />
+            <g opacity="0.5">
+                <path d="M11 15.5H9.5V11C9.50042 10.6023 9.65859 10.221 9.9398 9.9398C10.221 9.65859 10.6023 9.50042 11 9.5H15.5V11H11V15.5Z" fill="white" />
+                <path d="M15.5 30.5H11C10.6023 30.4996 10.221 30.3414 9.9398 30.0602C9.65859 29.779 9.50042 29.3977 9.5 29V24.5H11V29H15.5V30.5Z" fill="white" />
+                <path d="M29 30.5H24.5V29H29V24.5H30.5V29C30.4996 29.3977 30.3414 29.779 30.0602 30.0602C29.779 30.3414 29.3977 30.4996 29 30.5Z" fill="white" />
+                <path d="M30.5 15.5H29V11H24.5V9.5H29C29.3977 9.50042 29.779 9.65859 30.0602 9.9398C30.3414 10.221 30.4996 10.6023 30.5 11V15.5Z" fill="white" />
+            </g>
+        </svg>
+    )
+}

package/example/src/View/CoreComponentView/index.tsx ADDED Viewed

@@ -0,0 +1,255 @@
+import { Typography, Button, Loader, ProgressCircular, Tabs, Image, Modal, FormItem, Input, InputPassword, Avatar, InputSearch, Appbar, Header } from "../../../../../ui-yeulamvietnam"
+import Card from "../../Card"
+import { useState } from 'react'
+import Icon1 from "../../Icons/icon1"
+import CircleArrow from "../../Icons/CircleArrow"
+import { AppbarMenuItem } from "../../../../src/types/type"
+import { Home } from "../../../../src/components/Icons"
+import AppbarPrimaryButton from "../../../../src/components/AppbarPrimaryButton"
+// mock data
+const AppbarItems: AppbarMenuItem[] = [
+  {
+      title: "Trang chủ",
+      icon: <Home />,
+      path: "/",
+  },
+  {
+      title: "Chia sẻ",
+      icon: <Home />,
+      path: "/",
+  },
+  {
+      title: "Nhiệm vụ",
+      icon:
+          <AppbarPrimaryButton/>,
+      path: "/",
+  },
+  {
+      title: "Giải thưởng",
+      icon: <Home />,
+      path: "/",
+  },
+  {
+      title: "Hồ sơ",
+      icon: <Home />,
+      path: "/",
+  },
+]
+function CoreView() {
+  const [modal1, setModal1] = useState(false);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      <Card title="Typography">
+        <Typography $type="h1">h1</Typography>
+        <Typography $type="h2">h2</Typography>
+        <Typography $type="h3">h3</Typography>
+        <Typography $type="h4">h4</Typography>
+        <Typography $type="h5">h5</Typography>
+        <Typography $type="subheading-1">Subheading 1</Typography>
+        <Typography $type="subheading-2">Subheading 2</Typography>
+        <Typography $type="subheading-3-bold">Subheading 3 bold</Typography>
+        <Typography $type="subheading-3-semibold">Subheading 3 semibold</Typography>
+        <Typography $type="subheading-4">Subheading 4</Typography>
+        <Typography $type="title-text">Title text</Typography>
+        <Typography $type="body-text">Body text</Typography>
+      </Card>
+      <Card title="Button">
+        <Button
+          $size="small"
+          icon={<Icon1 />}
+          iconPosition="start"
+          type="text"
+          $textColor="#A71A1A"
+        >Khám phá bản đồ
+        </Button>
+        <Button
+          $size="small"
+          type="link"
+          $textColor="#A71A1A"
+        >Khám phá bản đồ
+        </Button>
+        <Button
+          type="primary"
+          $size="middle"
+          icon={<CircleArrow />}
+          iconPosition="end"
+          $backgroundColor="#FFF"
+          $textColor="#A71A1A"
+        >khám phá bản đồ</Button>
+      </Card>
+      <Card title="ProgressCircular">
+        <ProgressCircular
+          percent={50}
+          children={
+            <div style={{
+              display: "flex",
+              flexDirection: "column",
+            }}>
+              <Typography $type="subheading-1" $color="#0A0101">1+2=3</Typography>
+              <Typography $type="body-text" $color="#8F8F8F">point</Typography>
+            </div>
+          }
+        />
+      </Card>
+      <Card title="Loader">
+        <Loader />
+      </Card>
+      <Card title="Tabs">
+        <Tabs
+          items={[
+            {
+              key: "1",
+              label: "Tab 1",
+            },
+            {
+              key: "2",
+              label: "Tab 2",
+            },
+          ]}
+        />
+      </Card>
+      <Card title="Image">
+        <div
+          style={{
+            width: "100%",
+            height: "200px",
+            display: "flex",
+            gap: "16px",
+          }}
+        >
+          <Image src="https://placehold.co/300x400" />
+          <Image src="https://placehold.co/160x90" />
+          <Image src="https://placehold.co/100x100" />
+        </div>
+      </Card>
+      <Card title="Modal">
+        <>
+          <Button
+            type="primary"
+            $size="middle"
+            $backgroundColor="#FFF"
+            $textColor="#A71A1A"
+            onClick={() => {
+              setModal1(true)
+            }}
+          >
+            Open Modal
+          </Button>
+          <Modal
+            open={modal1}
+            onCancel={() => {
+              setModal1(false)
+            }}
+            onOk={() => {
+              setModal1(false)
+            }}
+            title={
+              <Typography $type="subheading-2">
+                Modal title
+              </Typography>
+            }
+            footer={
+              <div
+                style={{
+                  width: "100%",
+                  display: "flex",
+                  justifyContent: "center",
+                }}
+              >
+                <Button
+                  type="primary"
+                  $size="middle"
+                  $backgroundColor="#A71A1A"
+                  $textColor="#FFF"
+                >
+                  OK
+                </Button>
+              </div>
+            }
+          >
+            Modal title
+          </Modal>
+        </>
+      </Card>
+      <Card title="Form" backgroundColor="#FFF">
+        <FormItem
+          label="label"
+          layout="vertical"
+        >
+          <Input
+          />
+        </FormItem>
+        <FormItem
+          label="label"
+          layout="vertical"
+          help="I'm a mistake"
+          validateStatus='error'
+        >
+          <Input
+            status="error"
+          />
+        </FormItem>
+        <FormItem
+          label="label"
+          layout="vertical"
+        >
+          <Input
+            disabled
+            value="I'm disabled"
+          />
+        </FormItem>
+        <FormItem
+          label="label"
+          layout="vertical"
+        >
+          <InputPassword
+            visibilityToggle={true}
+          />
+        </FormItem>
+        <InputSearch />
+      </Card>
+      <Card title="Avatar">
+        <Avatar
+          src="https://placehold.co/300x400"
+          size={120}
+        />
+      </Card>
+      <Card title="Appbar">
+        <div
+          style={{
+            width: "100%",
+            maxWidth: "390px",
+          }}
+        >
+          <Appbar
+            items={AppbarItems}
+            currentItem={AppbarItems[0]}
+            onMenuItemClick={(item) => {
+              console.log("clicked", item.title)
+            }}
+          />
+        </div>
+      </Card>
+      <Card
+        title="Header"
+      >
+        <div
+          style={{
+            width: "100%",
+            maxWidth: "390px",
+            backgroundColor: "#FFF7E2",
+          }}
+        >
+          <Header />
+        </div>
+      </Card>
+    </div >
+  )
+}
+export default CoreView