add dev

2026-09-01 19:00:12 +03:30 · 2026-09-01 19:00:12 +03:30 · 10c6006112
commit 10c6006112
parent fbc2fa75ef
5 changed files with 102 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="fa" dir="rtl">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>UI Kit Header Preview</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/dev/main.jsx"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -36,6 +36,8 @@
    "dist"
  ],
  "scripts": {
+    "dev": "vite",
+    "dev:header": "vite",
    "build": "yarn build:lib && yarn build:remote && yarn copy-types",
    "build:lib": "vite build",
    "build:remote": "vite build --mode remote",
--- a/src/dev/HeaderPreview.jsx
+++ b/src/dev/HeaderPreview.jsx
@ -0,0 +1,74 @@
+import {
+  Box,
+  ChakraProvider,
+  Code,
+  Container,
+  Divider,
+  Heading,
+  Stack,
+  Text,
+} from "@chakra-ui/react";
+import { Header } from "../layout/Header.jsx";
+import demoLogo from "./demo-logo.svg";
+
+function ActualHeader() {
+  return (
+    <Header>
+      <Header.BrandSection>
+        <Header.Logo src={demoLogo} />
+
+        <Header.Brand>
+          <Header.Title>سامانه نمونه هوش تجاری</Header.Title>
+          {/* <Header.Description>
+            پیش‌نمایش مستقیم کامپوننت Header از سورس UI Kit
+          </Header.Description>*/}
+        </Header.Brand>
+      </Header.BrandSection>
+
+      <Header.Bi />
+    </Header>
+  );
+}
+
+export default function HeaderPreview() {
+  return (
+    <ChakraProvider>
+      <Box minH="100vh" bg="gray.50" dir="rtl">
+        <ActualHeader />
+
+        <Box borderTop="3px solid" borderColor="red.400" />
+
+        <Container maxW="7xl" py={{ base: 5, lg: 8 }}>
+          <Stack spacing={5}>
+            <Box>
+              <Heading size="md">Header Preview</Heading>
+              <Text mt={2} color="gray.600">
+                این صفحه خود کامپوننت واقعی <Code>src/layout/Header.jsx</Code> را
+                render می‌کند. فایل Header را تغییر بده؛ Vite با HMR نتیجه را
+                همان لحظه در مرورگر نمایش می‌دهد.
+              </Text>
+            </Box>
+
+            <Divider />
+
+            <Box p={5} bg="white" borderWidth="1px" borderRadius="lg">
+              <Text fontWeight="bold">شروع محتوای صفحه</Text>
+              <Text mt={2} color="gray.600">
+                خط قرمز بالای این باکس دقیقاً انتهای Header است. اگر Header در
+                flow طبیعی صفحه باشد، محتوا نباید زیر آن قرار بگیرد.
+              </Text>
+            </Box>
+
+            <Box p={5} bg="white" borderWidth="1px" borderRadius="lg">
+              <Text fontWeight="bold">تست Responsive</Text>
+              <Text mt={2} color="gray.600">
+                عرض مرورگر را کم و زیاد کن تا حالت‌های موبایل و دسکتاپ خود Header
+                را ببینی.
+              </Text>
+            </Box>
+          </Stack>
+        </Container>
+      </Box>
+    </ChakraProvider>
+  );
+}
--- a/src/dev/demo-logo.svg
+++ b/src/dev/demo-logo.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
+  <rect width="96" height="96" rx="22" fill="#ffffff"/>
+  <path d="M24 29h48v10H24zm0 18h34v10H24zm0 18h44v10H24z" fill="#4299E1"/>
+  <circle cx="72" cy="52" r="10" fill="#90CDF4"/>
+</svg>
--- a/src/dev/main.jsx
+++ b/src/dev/main.jsx
@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import HeaderPreview from "./HeaderPreview.jsx";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <HeaderPreview />
+  </React.StrictMode>,
+);