Home Explore Help
Register Sign In
khysnik
/
template-lib
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

12 commits late

Khysnik 1 month ago
parent
457352aa41
commit
be7bd3c88b
20 changed files with 248 additions and 75 deletions
Split View Show Diff Stats
  1. 14 13
      app/globals.css
  2. 20 20
      app/layout.tsx
  3. 0 24
      app/lib/src/components/Header/Header.tsx
  4. 18 9
      app/page.tsx
  5. 1 1
      package.json
  6. 10 0
      packages/react-sol/.idea/.gitignore
  7. 6 0
      packages/react-sol/.idea/copilot.data.migration.ask2agent.xml
  8. 8 0
      packages/react-sol/.idea/lib.iml
  9. 8 0
      packages/react-sol/.idea/modules.xml
  10. 6 0
      packages/react-sol/.idea/vcs.xml
  11. 26 0
      packages/react-sol/package-lock.json
  12. 13 3
      packages/react-sol/package.json
  13. 6 4
      packages/react-sol/rollup.config.js
  14. 1 1
      packages/react-sol/src/components/Body/Body.tsx
  15. 1 0
      packages/react-sol/src/components/Footer/Footer.tsx
  16. 110 0
      packages/react-sol/src/components/Header/Header.tsx
  17. 0 0
      packages/react-sol/src/global.d.ts
  18. 0 0
      packages/react-sol/src/index.ts
  19. 0 0
      packages/react-sol/src/styles.css
  20. 0 0
      packages/react-sol/tsconfig.json

+ 14 - 13
app/globals.css
View File 

@@ -1,30 +1,31 @@
 
 @import "tailwindcss";
 
+@import "tailwindcss/utilities";
 
 
 :root {
 
-  --background: #ffffff;
 
-  --foreground: #171717;
 
+    --background: #ffffff;
 
+    --foreground: #171717;
 
 }
 
 
 @theme inline {
 
-  --color-background: var(--background);
 
-  --color-foreground: var(--foreground);
 
+    --color-background: var(--background);
 
+    --color-foreground: var(--foreground);
 
 }
 
 
 @media (prefers-color-scheme: dark) {
 
-  :root {
 
-    --background: #0a0a0a;
 
-    --foreground: #ededed;
 
-  }
 
+    :root {
 
+        --background: #0a0a0a;
 
+        --foreground: #ededed;
 
+    }
 
 }
 
 
 html,
 
 body {
 
-  height: 100%;
 
-  margin: 0;
 
+    height: 100%;
 
+    margin: 0;
 
 }
 
 
 body {
 
-  background: var(--background);
 
-  color: var(--foreground);
 
-  font-family: Arial, Helvetica, sans-serif;
 
+    background: var(--background);
 
+    color: var(--foreground);
 
+    font-family: Arial, Helvetica, sans-serif;
 
 }

+ 20 - 20
app/layout.tsx
View File 

@@ -1,36 +1,36 @@
 
-import type { Metadata } from "next";
 
-import { Geist, Geist_Mono } from "next/font/google";
 
-import './lib/dist/index.css'
 
+import type {Metadata} from "next";
 
+import {Geist, Geist_Mono} from "next/font/google";
 
+import "../packages/react-sol/dist/index.css";
 
 import "./globals.css";
 
 
 
 const geistSans = Geist({
 
-  variable: "--font-geist-sans",
 
-  subsets: ["latin"],
 
+    variable: "--font-geist-sans",
 
+    subsets: ["latin"],
 
 });
 
 
 const geistMono = Geist_Mono({
 
-  variable: "--font-geist-mono",
 
-  subsets: ["latin"],
 
+    variable: "--font-geist-mono",
 
+    subsets: ["latin"],
 
 });
 
 
 export const metadata: Metadata = {
 
-  title: "Create Next App",
 
-  description: "Generated by create next app",
 
+    title: "Create Next App",
 
+    description: "Generated by create next app",
 
 };
 
 
 export default function RootLayout({
 
-  children,
 
-}: Readonly<{
 
-  children: React.ReactNode;
 
+                                       children,
 
+                                   }: Readonly<{
 
+    children: React.ReactNode;
 
 }>) {
 
-  return (
 
-    <html lang="en">
 
-      <body
 
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
 
-      >
 
+    return (
 
+        <html lang="en">
 
+        <body
 
+            className={`${geistSans.variable} ${geistMono.variable} antialiased`}
 
+        >
 
         {children}
 
-      </body>
 
-    </html>
 
-  );
 
+        </body>
 
+        </html>
 
+    );
 
 }

+ 0 - 24
app/lib/src/components/Header/Header.tsx
View File 

@@ -1,24 +0,0 @@
 
-import React, {ReactNode} from "react";
 
-
 
-interface HeaderProps {
 
-    children?: ReactNode;
 
-    renderFn?: () => ReactNode;
 
-    height?: number;
 
-    className?: string;
 
-}
 
-
 
-export const Header: React.FC<HeaderProps> = ({
 
-                                                  children,
 
-                                                  renderFn,
 
-                                                  height,
 
-                                                  className = "",
 
-                                              }) => {
 
-    return (
 
-        <header
 
-            className={`px-6 ${className}`}
 
-            style={{height: height ? `${height}vh` : undefined}}
 
-        >
 
-            {renderFn ? renderFn() : children}
 
-        </header>
 
-    );
 
-};

+ 18 - 9
app/page.tsx
View File 

@@ -1,21 +1,30 @@
 
-import {Body, Footer, Header, Ratio} from "./lib"
 
+"use client";
 
+import {Body, Header, Ratio} from "../packages/react-sol/dist/index.esm.js"
 
 import "./page.css"
 
 
+const menu = [
 
+    {name: "Home", href: "/"},
 
+    {name: "About", href: "/about"},
 
+    {name: "Contact", href: "/contact"}
 
+];
 
 export default function Home() {
 
-    const ratio: Ratio = new Ratio(8, 6, 88);
 
+    const ratio: Ratio = new Ratio(6, 4, 94);
 
 
     return (
 
         <div className="page-container">
 
-            <Header height={ratio.top()} className="bg-gray-800 flex flex-row justify-center items-center">
 
-                <h1>My Website</h1>
 
-            </Header>
 
-            <Body height={ratio.middle()} className="bg-gray-700 justify-center items-center flex flex-col">
 
+            <Header
 
+                height={ratio.top()}
 
+                siteName="My Site"
 
+                logo="globe.svg"
 
+                className="bg-gray-800 text-white flex items-center"
 
+                menu={menu}
 
+            />
 
+
 
+            <Body height={ratio.middle()} renderFn={undefined}
 
+                  className="bg-gray-700 justify-center items-center flex flex-col">
 
                 <h1>Main Content</h1>
 
                 <p>Your page content here...</p>
 
             </Body>
 
-            <Footer height={ratio.bottom()} className="bg-gray-800 justify-center items-center flex">
 
-                <p>© 2025 Custom Footer</p>
 
-            </Footer>
 
         </div>
 
     );
 
 };

+ 1 - 1
package.json
View File 

@@ -5,7 +5,7 @@
 
   "scripts": {
 
     "dev": "npm run build:modules && next dev",
 
     "build": "next build",
 
-    "build:modules": "cd app/lib && npm run build",
 
+    "build:modules": "cd packages/react-sol && npm run build",
 
     "start": "next start",
 
     "lint": "eslint"
 
   },

+ 10 - 0
packages/react-sol/.idea/.gitignore
View File 

@@ -0,0 +1,10 @@
 
+# Default ignored files
 
+/shelf/
 
+/workspace.xml
 
+# Ignored default folder with query files
 
+/queries/
 
+# Datasource local storage ignored files
 
+/dataSources/
 
+/dataSources.local.xml
 
+# Editor-based HTTP Client requests
 
+/httpRequests/

+ 6 - 0
packages/react-sol/.idea/copilot.data.migration.ask2agent.xml
View File 

@@ -0,0 +1,6 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="Ask2AgentMigrationStateService">
 
+    <option name="migrationStatus" value="COMPLETED" />
 
+  </component>
 
+</project>

+ 8 - 0
packages/react-sol/.idea/lib.iml
View File 

@@ -0,0 +1,8 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<module type="WEB_MODULE" version="4">
 
+  <component name="NewModuleRootManager">
 
+    <content url="file://$MODULE_DIR$" />
 
+    <orderEntry type="inheritedJdk" />
 
+    <orderEntry type="sourceFolder" forTests="false" />
 
+  </component>
 
+</module>

+ 8 - 0
packages/react-sol/.idea/modules.xml
View File 

@@ -0,0 +1,8 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="ProjectModuleManager">
 
+    <modules>
 
+      <module fileurl="file://$PROJECT_DIR$/.idea/lib.iml" filepath="$PROJECT_DIR$/.idea/lib.iml" />
 
+    </modules>
 
+  </component>
 
+</project>

+ 6 - 0
packages/react-sol/.idea/vcs.xml
View File 

@@ -0,0 +1,6 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="VcsDirectoryMappings">
 
+    <mapping directory="$PROJECT_DIR$/../.." vcs="Git" />
 
+  </component>
 
+</project>

+ 26 - 0
app/lib/package-lock.json → packages/react-sol/package-lock.json
View File 

@@ -7,6 +7,9 @@
 
     "": {
 
       "name": "react-sol",
 
       "version": "0.1.0",
 
+      "dependencies": {
 
+        "@heroicons/react": "^2.2.0"
 
+      },
 
       "devDependencies": {
 
         "@rollup/plugin-commonjs": "^25.0.8",
 
         "@rollup/plugin-node-resolve": "^15.3.1",
 
@@ -18,6 +21,7 @@
 
         "rollup": "^4.20.0",
 
         "rollup-plugin-peer-deps-external": "^2.2.4",
 
         "rollup-plugin-postcss": "^4.0.2",
 
+        "rollup-preserve-directives": "^1.1.3",
 
         "tailwindcss": "^4.1.18",
 
         "typescript": "^5.5.4"
 
       },
 
@@ -26,6 +30,15 @@
 
         "react-dom": "^18.0.0"
 
       }
 
     },
 
+    "node_modules/@heroicons/react": {
 
+      "version": "2.2.0",
 
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
 
+      "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
 
+      "license": "MIT",
 
+      "peerDependencies": {
 
+        "react": ">= 16 || ^19.0.0-rc"
 
+      }
 
+    },
 
     "node_modules/@jridgewell/sourcemap-codec": {
 
       "version": "1.5.5",
 
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
 
@@ -2220,6 +2233,19 @@
 
       "dev": true,
 
       "license": "MIT"
 
     },
 
+    "node_modules/rollup-preserve-directives": {
 
+      "version": "1.1.3",
 
+      "resolved": "https://registry.npmjs.org/rollup-preserve-directives/-/rollup-preserve-directives-1.1.3.tgz",
 
+      "integrity": "sha512-oXqxd6ZzkoQej8Qt0k+S/yvO2+S4CEVEVv2g85oL15o0cjAKTKEuo2MzyA8FcsBBXbtytBzBMFAbhvQg4YyPUQ==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "magic-string": "^0.30.5"
 
+      },
 
+      "peerDependencies": {
 
+        "rollup": "^2.0.0 || ^3.0.0 || ^4.0.0"
 
+      }
 
+    },
 
     "node_modules/safe-identifier": {
 
       "version": "0.4.2",
 
       "resolved": "https://registry.npmjs.org/safe-identifier/-/safe-identifier-0.4.2.tgz",

+ 13 - 3
app/lib/package.json → packages/react-sol/package.json
View File 

@@ -2,9 +2,9 @@
 
   "name": "react-sol",
 
   "version": "0.1.0",
 
   "type": "module",
 
-  "main": "dist/index.cjs.js",
 
-  "module": "dist/index.esm.js",
 
-  "types": "dist/index.d.ts",
 
+  "main": "./dist/index.cjs.js",
 
+  "module": "./dist/index.esm.js",
 
+  "types": "./dist/index.d.ts",
 
   "scripts": {
 
     "build": "rollup -c",
 
     "dev": "rollup -c -w"
 
@@ -13,6 +13,13 @@
 
     "react": "^18.0.0",
 
     "react-dom": "^18.0.0"
 
   },
 
+  "exports": {
 
+    ".": {
 
+      "import": "./dist/index.esm.js",
 
+      "require": "./dist/index.cjs.js",
 
+      "types": "./dist/index.d.ts"
 
+    }
 
+  },
 
   "devDependencies": {
 
     "@rollup/plugin-commonjs": "^25.0.8",
 
     "@rollup/plugin-node-resolve": "^15.3.1",
 
@@ -26,5 +33,8 @@
 
     "rollup-plugin-postcss": "^4.0.2",
 
     "tailwindcss": "^4.1.18",
 
     "typescript": "^5.5.4"
 
+  },
 
+  "dependencies": {
 
+    "@heroicons/react": "^2.2.0"
 
   }
 
 }

+ 6 - 4
app/lib/rollup.config.js → packages/react-sol/rollup.config.js
View File 

@@ -3,23 +3,25 @@ import resolve from '@rollup/plugin-node-resolve';
 
 import commonjs from '@rollup/plugin-commonjs';
 
 import postcss from 'rollup-plugin-postcss';
 
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 
+import preserveDirectives from "rollup-preserve-directives";
 
 
 export default {
 
     input: 'src/index.ts',
 
     output: [
 
-        { file: 'dist/index.cjs.js', format: 'cjs', sourcemap: true },
 
-        { file: 'dist/index.esm.js', format: 'esm', sourcemap: true }
 
+        {file: 'dist/index.cjs.js', format: 'cjs', sourcemap: true},
 
+        {file: 'dist/index.esm.js', format: 'esm', sourcemap: true}
 
     ],
 
     plugins: [
 
         peerDepsExternal(),
 
         resolve(),
 
         commonjs(),
 
-        typescript({ tsconfig: './tsconfig.json' }),
 
+        typescript({tsconfig: './tsconfig.json'}),
 
         postcss({
 
             modules: true,          // keep using CSS modules
 
             extract: 'index.css',   // <-- emit dist/index.css
 
             extensions: ['.css']
 
-        })
 
+        }),
 
+        preserveDirectives(),
 
     ],
 
     external: ['react', 'react-dom']
 
 };

+ 1 - 1
app/lib/src/components/Body/Body.tsx → packages/react-sol/src/components/Body/Body.tsx
View File 

@@ -3,7 +3,7 @@ import React, {ReactNode} from "react";
 
 interface BodyProps {
 
     children?: ReactNode;
 
     renderFn?: () => ReactNode;
 
-    height?: number;
 
+    height?: number | string;
 
     className?: string;
 
 }

+ 1 - 0
app/lib/src/components/Footer/Footer.tsx → packages/react-sol/src/components/Footer/Footer.tsx
View File 

@@ -1,3 +1,4 @@
 
+"use client";
 
 import React, {ReactNode} from "react";
 
 
 interface FooterProps {

+ 110 - 0
packages/react-sol/src/components/Header/Header.tsx
View File 

@@ -0,0 +1,110 @@
 
+"use client";
 
+import React, {ReactNode, useState} from "react";
 
+
 
+interface HeaderProps {
 
+    children?: ReactNode;
 
+    renderFn?: () => ReactNode;
 
+    height?: number;
 
+    className?: string;
 
+    siteName?: string;
 
+    logo?: string;
 
+    menu?: any;
 
+}
 
+
 
+export const Header: React.FC<HeaderProps> = ({
 
+                                                  height,
 
+                                                  className = "",
 
+                                                  siteName,
 
+                                                  logo,
 
+                                                  menu,
 
+                                              }) => {
 
+    const [open, setOpen] = useState(false);
 
+
 
+    return (
 
+        <header
 
+            className={`px-6 bg-gray-800 text-white ${className}`}
 
+            style={{height: height ? `${height}vh` : undefined}}
 
+        >
 
+            <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
 
+                <a href="#" className="flex items-center">
 
+                    {logo && <img src={logo} alt="logo" className="w-5 h-5 mr-1"/>}
 
+                    <strong className="ml-2">{siteName}</strong>
 
+                </a>
 
+
 
+                {/* Wrap button + menu in relative container */}
 
+                <div className="relative">
 
+                    <button
 
+                        type="button"
 
+                        onClick={() => setOpen((v) => !v)}
 
+                        className="inline-flex items-center justify-center p-2 rounded text-gray-200 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
 
+                        aria-label="Toggle navigation"
 
+                        aria-expanded={open}
 
+                    >
 
+                        {open ? (
 
+                            <svg
 
+                                xmlns="http://www.w3.org/2000/svg"
 
+                                fill="none"
 
+                                viewBox="0 0 24 24"
 
+                                strokeWidth={1.5}
 
+                                stroke="currentColor"
 
+                                className="h-6 w-6"
 
+                            >
 
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12"/>
 
+                            </svg>
 
+                        ) : (
 
+                            <svg
 
+                                xmlns="http://www.w3.org/2000/svg"
 
+                                fill="none"
 
+                                viewBox="0 0 24 24"
 
+                                strokeWidth={1.5}
 
+                                stroke="currentColor"
 
+                                className="h-6 w-6"
 
+                            >
 
+                                <path
 
+                                    strokeLinecap="round"
 
+                                    strokeLinejoin="round"
 
+                                    d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
 
+                                />
 
+                            </svg>
 
+                        )}
 
+                    </button>
 
+
 
+                    {/* Small popup menu under button */}
 
+                    {open && (
 
+                        <nav
 
+                            className="
 
+                absolute right-0 mt-2
 
+                w-40
 
+                rounded-md
 
+                bg-gray-800
 
+                shadow-lg
 
+                ring-1 ring-black/10
 
+                z-20
 
+              "
 
+                        >
 
+                            <ul className="py-2 text-sm">
 
+                                {menu.length > 0 && (
 
+                                    <nav>
 
+                                        <ul className="flex flex-col space-x-0 list-none m-0 p-0">
 
+                                            {menu.map((item: string, index: string) => (
 
+                                                <li key={index}>
 
+                                                    <a
 
+                                                        href={item.href}
 
+                                                        className="block px-4 py-2 hover:bg-gray-700 transition-colors"
 
+                                                    >
 
+                                                        {item.name}
 
+                                                    </a>
 
+                                                </li>
 
+                                            ))}
 
+                                        </ul>
 
+                                    </nav>
 
+                                )}
 
+                            </ul>
 
+                        </nav>
 
+                    )}
 
+                </div>
 
+            </div>
 
+        </header>
 
+    );
 
+};
 
+

+ 0 - 0
app/lib/src/global.d.ts → packages/react-sol/src/global.d.ts
View File


+ 0 - 0
app/lib/src/index.ts → packages/react-sol/src/index.ts
View File


+ 0 - 0
app/lib/src/styles.css → packages/react-sol/src/styles.css
View File


+ 0 - 0
app/lib/tsconfig.json → packages/react-sol/tsconfig.json
View File