ThunderNetworkRaD/dynamic-design
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixes

Browse source 
Co-authored-by: Mambuco <gabriele.giambrone@icloud.com>
This commit is contained in:
KillerBossOriginal 2025-03-27 18:29:10 +01:00
parent 755beb7464
commit 479f52af33
Signed by: KillerBossOriginal
SSH key fingerprint: SHA256:g7H+SlV+I5Mm+ycywgv2DsfeQczLXX5KtmLO5Nkj9AE
23 changed files with 255 additions and 90 deletions

4
.gitignore vendored
View file

@ -10,4 +10,6 @@ yarn-error.log*
.vscode/*
pnpm-lock.yaml
pnpm-lock.yaml
dist

3
package.json
View file

@ -6,5 +6,8 @@
"devDependencies": {
"typescript": "^5.5.3"
},
"scripts": {
"showcase": "pnpm --filter showcase run"
},
"private": true
}

2
pnpm-workspace.yaml Normal file
View file

@ -0,0 +1,2 @@
packages:
- 'src/*'

6
src/core/package.json
View file

@ -4,6 +4,9 @@
"description": "Thunder Network's Dynamic Design",
"license": "MIT",
"author": "Thunder Network RaD | KillerBossOriginal",
"scripts": {
"build": "tsc && sass styles build"
},
"keywords": [
"components",
"design",
@ -22,7 +25,8 @@
"typescript": "^5.5.3",
"@types/react": "^19.0.2",
"react": "^19.0.0",
"react-dom": "^19.0.0"
"react-dom": "^19.0.0",
"sass": "^1.86.0"
},
"peerDependencies": {
"react": "19.x || 18.x",

14
src/core/components/Cursor.tsx → src/core/src/components/Cursor.tsx
View file

@ -112,7 +112,19 @@ export function CursorProvider({ hidden, exists, children, cursor, enabled }: Cu
cursor ??
<div
ref={cursorRef}
className={`pointer-events-none fixed top-0 left-0 ${isCursorHidden || !doesCursorExists || !isCursorInViewport ? 'invisible' : ''} w-10 h-10 bg-white rounded-full z-50 mix-blend-difference`}
style={{
pointerEvents: 'none',
position: 'fixed',
top: 0,
left: 0,
zIndex: 50,
borderRadius: "9999px",
width: "2.5rem",
height: "2.5rem",
backgroundColor: "#ffffff",
mixBlendMode: "difference",
visibility: isCursorHidden || !doesCursorExists || !isCursorInViewport ? 'hidden' : 'visible',
}}
/>
: null
}

0
src/core/components/DynamicProvider.tsx → src/core/src/components/DynamicProvider.tsx
View file

4
src/core/components/Navigation.tsx → src/core/src/components/Navigation.tsx
View file

@ -1,7 +1,7 @@
"use client";
import React, {createContext, ReactNode, useContext, useState} from 'react';
import {Coords} from "../types/navigation/coords";
import {Method} from "../types/navigation/method";
import {Coords} from "@core/types/navigation/coords";
import {Method} from "@core/types/navigation/method";
export const NavigationContext = createContext<{
coords: Coords,

2
src/core/components/Theme.tsx → src/core/src/components/Theme.tsx
View file

@ -1,6 +1,6 @@
"use client";
import React, {createContext, ReactNode, useContext, useState} from 'react';
import Theme from "../types/theme";
import Theme from "@core/types/theme";
export const themeContext = createContext<{
theme: Theme,

2
src/core/index.ts → src/core/src/index.ts
View file

@ -1,4 +1,4 @@
import Theme from "./types/theme";
import Theme from "@core/types/theme";
export const defaultTheme: Theme = {
colorScheme: "light"

0
src/core/src/styles/typography.scss Normal file
View file

0
src/core/types/navigation/coords.ts → src/core/src/types/navigation/coords.ts
View file

0
src/core/types/navigation/method.ts → src/core/src/types/navigation/method.ts
View file

0
src/core/types/theme.ts → src/core/src/types/theme.ts
View file

8
src/core/tsconfig.json Normal file
View file

@ -0,0 +1,8 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "src",
"outDir": "dist"
},
"include": ["src/**/*"]
}

29
src/showcase/app/globals.css
View file

@ -1,7 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
@ -14,8 +10,33 @@
}
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}

4
src/showcase/app/layout.tsx
View file

@ -24,9 +24,7 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<body className={`${geistSans.variable} ${geistMono.variable}`}>
{children}
</body>
</html>

168
src/showcase/app/page.module.css Normal file
View file

@ -0,0 +1,168 @@
.page {
--gray-rgb: 0, 0, 0;
--gray-alpha-200: rgba(var(--gray-rgb), 0.08);
--gray-alpha-100: rgba(var(--gray-rgb), 0.05);
--button-primary-hover: #383838;
--button-secondary-hover: #f2f2f2;
display: grid;
grid-template-rows: 20px 1fr 20px;
align-items: center;
justify-items: center;
min-height: 100svh;
padding: 80px;
gap: 64px;
font-family: var(--font-geist-sans);
}
@media (prefers-color-scheme: dark) {
.page {
--gray-rgb: 255, 255, 255;
--gray-alpha-200: rgba(var(--gray-rgb), 0.145);
--gray-alpha-100: rgba(var(--gray-rgb), 0.06);
--button-primary-hover: #ccc;
--button-secondary-hover: #1a1a1a;
}
}
.main {
display: flex;
flex-direction: column;
gap: 32px;
grid-row-start: 2;
}
.main ol {
font-family: var(--font-geist-mono);
padding-left: 0;
margin: 0;
font-size: 14px;
line-height: 24px;
letter-spacing: -0.01em;
list-style-position: inside;
}
.main li:not(:last-of-type) {
margin-bottom: 8px;
}
.main code {
font-family: inherit;
background: var(--gray-alpha-100);
padding: 2px 4px;
border-radius: 4px;
font-weight: 600;
}
.ctas {
display: flex;
gap: 16px;
}
.ctas a {
appearance: none;
border-radius: 128px;
height: 48px;
padding: 0 20px;
border: none;
border: 1px solid transparent;
transition:
background 0.2s,
color 0.2s,
border-color 0.2s;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 20px;
font-weight: 500;
}
a.primary {
background: var(--foreground);
color: var(--background);
gap: 8px;
}
a.secondary {
border-color: var(--gray-alpha-200);
min-width: 158px;
}
.footer {
grid-row-start: 3;
display: flex;
gap: 24px;
}
.footer a {
display: flex;
align-items: center;
gap: 8px;
}
.footer img {
flex-shrink: 0;
}
/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
a.primary:hover {
background: var(--button-primary-hover);
border-color: transparent;
}
a.secondary:hover {
background: var(--button-secondary-hover);
border-color: transparent;
}
.footer a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
}
@media (max-width: 600px) {
.page {
padding: 32px;
padding-bottom: 80px;
}
.main {
align-items: center;
}
.main ol {
text-align: center;
}
.ctas {
flex-direction: column;
}
.ctas a {
font-size: 14px;
height: 40px;
padding: 0 16px;
}
a.secondary {
min-width: auto;
}
.footer {
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
}
@media (prefers-color-scheme: dark) {
.logo {
filter: invert();
}
}

40
src/showcase/app/page.tsx
View file

@ -1,37 +1,34 @@
import Image from "next/image";
import styles from "./page.module.css";
export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
<div className={styles.page}>
<main className={styles.main}>
<Image
className="dark:invert"
className={styles.logo}
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
app/page.tsx
</code>
.
<ol>
<li>
Get started by editing <code>app/page.tsx</code>.
</li>
<li>Save and see your changes instantly.</li>
</ol>
<div className="flex gap-4 items-center flex-col sm:flex-row">
<div className={styles.ctas}>
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className={styles.primary}
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
className={styles.logo}
src="/vercel.svg"
alt="Vercel logomark"
width={20}
@ -40,19 +37,18 @@ export default function Home() {
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
className={styles.secondary}
>
Read our docs
</a>
</div>
</main>
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
<footer className={styles.footer}>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
@ -66,8 +62,7 @@ export default function Home() {
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
@ -81,8 +76,7 @@ export default function Home() {
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>

16
src/showcase/eslint.config.mjs
View file

@ -1,16 +0,0 @@
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
});
const eslintConfig = [
...compat.extends("next/core-web-vitals", "next/typescript"),
];
export default eslintConfig;

9
src/showcase/package.json
View file

@ -11,17 +11,12 @@
"dependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "15.1.3"
"next": "15.2.4"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"eslint": "^9",
"eslint-config-next": "15.1.3",
"@eslint/eslintrc": "^3"
"@types/react-dom": "^19"
}
}

8
src/showcase/postcss.config.mjs
View file

@ -1,8 +0,0 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
},
};
export default config;

18
src/showcase/tailwind.config.ts
View file

@ -1,18 +0,0 @@
import type { Config } from "tailwindcss";
export default {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
},
plugins: [],
} satisfies Config;

8
tsconfig.json
View file

@ -9,9 +9,9 @@
"outDir": "dist",
"baseUrl": "./",
"paths": {
"@lib/*": ["path/to/your/lib/*"]
"@/*": ["./src/*"],
"@core/*": ["./src/core/src/*"]
},
"jsx": "preserve"
},
"include": ["src"]
}
}
}