witel/base-front-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add prettier

Browse Source
This commit is contained in:
AminGhasempoor
2026-04-15 11:28:33 +03:30
parent e37f76ca5a
commit d163d2c23f
12 changed files with 267 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.prettierrc Normal file
View File

@@ -0,0 +1,14 @@
{
"plugins": ["prettier-plugin-tailwindcss"],
"printWidth": 120,
"tabWidth": 4,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always",
"endOfLine": "crlf"
}

1
README.Docker.md
View File

@@ -0,0 +1 @@
Hello from docker ReadMe

32
docker-compose.yaml
View File

@@ -1,16 +1,16 @@
services:
witelflix-front:
image: witelflix:${VERSION}
container_name: witelflix
# build: #just if we have internet uncomment
# context: .
# dockerfile: Dockerfile
ports:
- "3000:3000"
env_file:
- .env
restart: unless-stopped
# volumes:
# - .:/app # کل پروژه mount شده به /app در کانتینر
# - /app/node_modules # node_modules داخل کانتینر بماند تا با host override نشود
# - /app/.next # next داخل کانتینر بماند تا با host override نشود
services:
witelflix-front:
image: witelflix:${VERSION}
container_name: witelflix
# build: #just if we have internet uncomment
# context: .
# dockerfile: Dockerfile
ports:
- "3000:3000"
env_file:
- .env
restart: unless-stopped
# volumes:
# - .:/app # کل پروژه mount شده به /app در کانتینر
# - /app/node_modules # node_modules داخل کانتینر بماند تا با host override نشود
# - /app/.next # next داخل کانتینر بماند تا با host override نشود

2
next-env.d.ts vendored
View File

@@ -1,6 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
import "./.next/dev/types/routes.d.ts";
import "./.next/types/routes.d.ts";
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

95
package.json
View File

@@ -1,47 +1,48 @@
{
"name": "witelflix",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@types/js-cookie": "^3.0.6",
"axios": "^1.15.0",
"clsx": "^2.1.1",
"date-fns": "^4.1.0",
"date-fns-jalali": "4.1.0-0",
"embla-carousel": "^8.6.0",
"embla-carousel-autoplay": "^8.6.0",
"embla-carousel-react": "^8.6.0",
"framer-motion": "^12.38.0",
"js-cookie": "^3.0.5",
"lucide-react": "^1.8.0",
"next": "16.1.6",
"next-intl": "^4.9.1",
"next-pwa": "^5.6.0",
"next-sitemap": "^4.2.3",
"next-themes": "^0.4.6",
"nextjs-toploader": "^3.9.17",
"prettier": "^3.8.2",
"prettier-plugin-tailwindcss": "^0.7.2",
"radix-ui": "^1.4.3",
"react": "19.2.4",
"react-dom": "19.2.4",
"react-hook-form": "^7.72.1",
"react-hot-toast": "^2.6.0",
"tailwind-merge": "^3.5.0",
"tailwind-scrollbar": "^4.0.2",
"zustand": "^5.0.12"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.1.18",
"@types/node": "25.0.10",
"@types/react": "19.2.10",
"@types/react-dom": "19.2.3",
"postcss": "8.5.6",
"tailwindcss": "4.1.18",
"typescript": "5.9.3"
}
}
{
"name": "witelflix",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"format": "npx prettier . --write"
},
"dependencies": {
"@types/js-cookie": "^3.0.6",
"axios": "^1.15.0",
"clsx": "^2.1.1",
"date-fns": "^4.1.0",
"date-fns-jalali": "4.1.0-0",
"embla-carousel": "^8.6.0",
"embla-carousel-autoplay": "^8.6.0",
"embla-carousel-react": "^8.6.0",
"framer-motion": "^12.38.0",
"js-cookie": "^3.0.5",
"lucide-react": "^1.8.0",
"next": "16.1.6",
"next-intl": "^4.9.1",
"next-pwa": "^5.6.0",
"next-sitemap": "^4.2.3",
"next-themes": "^0.4.6",
"nextjs-toploader": "^3.9.17",
"prettier": "^3.8.2",
"prettier-plugin-tailwindcss": "^0.7.2",
"radix-ui": "^1.4.3",
"react": "19.2.4",
"react-dom": "19.2.4",
"react-hook-form": "^7.72.1",
"react-hot-toast": "^2.6.0",
"tailwind-merge": "^3.5.0",
"tailwind-scrollbar": "^4.0.2",
"zustand": "^5.0.12"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.1.18",
"@types/node": "25.0.10",
"@types/react": "19.2.10",
"@types/react-dom": "19.2.3",
"postcss": "8.5.6",
"tailwindcss": "4.1.18",
"typescript": "5.9.3"
}
}

11
postcss.config.mjs
View File

@@ -1,6 +1,5 @@
export default {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default {
plugins: {
"@tailwindcss/postcss": {},
},
};

72
src/app/layout.tsx
View File

@@ -1,38 +1,34 @@
import { ClientAppProvider } from '@/providers/ClientAppProvider'
import '@/styles/globals.css'
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Theater of dreams',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang='en' suppressHydrationWarning>
<head>
{/* Prevent theme flicker before hydration */}
<script
dangerouslySetInnerHTML={{
__html: `
(function() {
try {
const stored = localStorage.getItem('theme');
const theme = stored || 'dark';
document.documentElement.setAttribute('data-theme', theme);
} catch (e) {}
})();
`,
}}
/>
</head>
<body className='bg-primary'>
<ClientAppProvider>{children}</ClientAppProvider>
</body>
</html>
)
}
import { ClientAppProvider } from "@/providers/ClientAppProvider";
import "@/styles/globals.css";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Theater of dreams",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<head>
{/* Prevent theme flicker before hydration */}
<script
dangerouslySetInnerHTML={{
__html: `
(function() {
try {
const stored = localStorage.getItem('theme');
const theme = stored || 'dark';
document.documentElement.setAttribute('data-theme', theme);
} catch (e) {}
})();
`,
}}
/>
</head>
<body className="bg-primary">
<ClientAppProvider>{children}</ClientAppProvider>
</body>
</html>
);
}

22
src/app/page.tsx
View File

@@ -1,11 +1,11 @@
import ThemeToggle from '@/components/UI/ThemeToggle'
export default function Home() {
return (
<main>
<ThemeToggle />
<h1>Offline Next.js Template 🚀</h1>
<p>This project was generated completely offline.</p>
</main>
)
}
import ThemeToggle from "@/components/UI/ThemeToggle";
export default function Home() {
return (
<main>
<ThemeToggle />
<h1>Offline Next.js Template 🚀</h1>
<p>This project was generated completely offline.</p>
</main>
);
}

56
src/components/UI/ThemeToggle.tsx
View File

@@ -1,30 +1,26 @@
'use client'
import { motion } from 'framer-motion'
import { Moon, Sun } from 'lucide-react'
import { useTheme } from 'next-themes'
export default function ThemeToggle() {
const { theme, setTheme } = useTheme()
return (
<button
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
className='flex cursor-pointer items-center py-2'
>
<motion.div
key={theme}
initial={{ rotate: -90, opacity: 0 }}
animate={{ rotate: 0, opacity: 1 }}
exit={{ rotate: 90, opacity: 0 }}
transition={{ duration: 0.5, ease: 'easeInOut' }}
>
{theme === 'dark' ? (
<Moon className='text-text size-6' />
) : (
<Sun className='text-text size-6' />
)}
</motion.div>
</button>
)
}
"use client";
import { motion } from "framer-motion";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
export default function ThemeToggle() {
const { theme, setTheme } = useTheme();
return (
<button
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
className="flex cursor-pointer items-center py-2"
>
<motion.div
key={theme}
initial={{ rotate: -90, opacity: 0 }}
animate={{ rotate: 0, opacity: 1 }}
exit={{ rotate: 90, opacity: 0 }}
transition={{ duration: 0.5, ease: "easeInOut" }}
>
{theme === "dark" ? <Moon className="text-text size-6" /> : <Sun className="text-text size-6" />}
</motion.div>
</button>
);
}

84
src/providers/ClientAppProvider.tsx
View File

@@ -1,44 +1,40 @@
'use client'
import { AnimatePresence, motion } from 'framer-motion'
import { ThemeProvider } from 'next-themes'
import { useEffect, useState } from 'react'
export function ClientAppProvider({ children }: { children: React.ReactNode }) {
const [mounted, setMounted] = useState(false)
// wait for hydration
useEffect(() => {
setMounted(true)
}, [])
return (
<ThemeProvider
attribute='data-theme'
defaultTheme='dark'
enableSystem={false}
>
<AnimatePresence mode='wait'>
{!mounted ? (
<motion.div
key='splash'
className='bg-map-bg flex h-dvh w-dvw items-center justify-center'
initial={{ opacity: 1 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
) : (
<motion.div
key='app'
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3, ease: 'easeOut' }}
className='bg-map-bg'
>
{children}
</motion.div>
)}
</AnimatePresence>
</ThemeProvider>
)
}
"use client";
import { AnimatePresence, motion } from "framer-motion";
import { ThemeProvider } from "next-themes";
import { useEffect, useState } from "react";
export function ClientAppProvider({ children }: { children: React.ReactNode }) {
const [mounted, setMounted] = useState(false);
// wait for hydration
useEffect(() => {
setMounted(true);
}, []);
return (
<ThemeProvider attribute="data-theme" defaultTheme="dark" enableSystem={false}>
<AnimatePresence mode="wait">
{!mounted ? (
<motion.div
key="splash"
className="bg-map-bg flex h-dvh w-dvw items-center justify-center"
initial={{ opacity: 1 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
) : (
<motion.div
key="app"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3, ease: "easeOut" }}
className="bg-map-bg"
>
{children}
</motion.div>
)}
</AnimatePresence>
</ThemeProvider>
);
}

86
src/styles/globals.css
View File

@@ -1,43 +1,43 @@
@import 'tailwindcss';
*,
*::before,
*::after,
*::-webkit-scrollbar {
box-sizing: border-box;
}
* {
-ms-overflow-style: none;
scrollbar-width: none;
transition:
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}
*::-webkit-scrollbar {
display: none;
}
body {
margin: 0;
}
@theme {
--color-primary: #cbd5e1;
--color-text: #273343;
/* constants */
--color-neo-aqua: #16a795;
--color-core-red: #ef4444;
--color-warning: #eedd55;
--color-information: #0ea5e9;
--color-error: #ef4444;
--color-success: #22c55e;
}
[data-theme='dark'] {
--color-primary: #273343;
--color-text: #cbd5e1;
}
@import "tailwindcss";
*,
*::before,
*::after,
*::-webkit-scrollbar {
box-sizing: border-box;
}
* {
-ms-overflow-style: none;
scrollbar-width: none;
transition:
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}
*::-webkit-scrollbar {
display: none;
}
body {
margin: 0;
}
@theme {
--color-primary: #cbd5e1;
--color-text: #273343;
/* constants */
--color-neo-aqua: #16a795;
--color-core-red: #ef4444;
--color-warning: #eedd55;
--color-information: #0ea5e9;
--color-error: #ef4444;
--color-success: #22c55e;
}
[data-theme="dark"] {
--color-primary: #273343;
--color-text: #cbd5e1;
}

62
tsconfig.json
View File

@@ -1,34 +1,28 @@
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"],
"&/*": ["./public/*"]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
".next/dev/types/**/*.ts"
],
"exclude": ["node_modules"]
}
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"],
"&/*": ["./public/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts"],
"exclude": ["node_modules"]
}