diff --git a/package.json b/package.json index 3801da6..42a8d41 100644 --- a/package.json +++ b/package.json @@ -1,41 +1,20 @@ { - "name": "webild-components-2", - "version": "0.1.0", - "private": true, + "name": "webild-components-2", "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev --turbopack", - "build": "next build --turbopack", - "start": "next start", - "lint": "eslint" + "dev": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "dependencies": { - "@gsap/react": "^2.1.2", - "@react-three/drei": "^10.7.7", - "@react-three/fiber": "^9.4.0", - "clsx": "^2.1.1", - "cobe": "^0.6.5", - "embla-carousel-auto-scroll": "^8.6.0", - "embla-carousel-react": "^8.6.0", - "gsap": "^3.13.0", - "lenis": "^1.3.15", - "lucide-react": "^0.555.0", - "motion-number": "^1.0.0", - "next": "16.0.7", - "react": "19.2.1", - "react-dom": "19.2.1", - "react-fast-marquee": "^1.6.5", - "tailwind-merge": "^3.4.0", - "three": "^0.181.2" + "@gsap/react": "^2.1.2", "@react-three/drei": "^10.7.7", "@react-three/fiber": "^9.4.0", "clsx": "^2.1.1", "cobe": "^0.6.5", "embla-carousel-auto-scroll": "^8.6.0", "embla-carousel-react": "^8.6.0", "gsap": "^3.13.0", "lenis": "^1.3.15", "lucide-react": "^0.555.0", "motion-number": "^1.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-fast-marquee": "^1.6.5", "react-scripts": "5.0.1", "tailwind-merge": "^3.4.0", "three": "^0.181.2", "web-vitals": "^2.1.4" }, "devDependencies": { - "@eslint/eslintrc": "^3", - "@tailwindcss/postcss": "^4", - "@types/node": "^20", - "@types/react": "^19", - "@types/react-dom": "^19", - "eslint": "^9", - "eslint-config-next": "16.0.7", - "tailwindcss": "^4", - "typescript": "^5" + "@types/node": "^16.18.11", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", "autoprefixer": "^10.4.13", "postcss": "^8.4.21", "tailwindcss": "^3.2.4", "typescript": "^4.9.4" + }, + "browserslist": { + "production": [ + ">0.2%", "not dead", "not op_mini all" + ], + "development": [ + "last 1 chrome version", "last 1 firefox version", "last 1 safari version" + ] } -} +} \ No newline at end of file diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..96bb01e --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..e69de29 diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..20024a3 --- /dev/null +++ b/public/index.html @@ -0,0 +1,1237 @@ + + + + + + + + + + + Webild Components + + + +
+ + + + + \ No newline at end of file diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..c716ae8 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,14 @@ +{ + "short_name": "Webild Components", "name": "Webild Components App", "icons": [ + { + "src": "images/favicon-16x16.c832ad73-1768993680503.png", "sizes": "16x16", "type": "image/png" + }, + { + "src": "images/favicon-32x32.0a29681d-1768993680536.png", "sizes": "32x32", "type": "image/png" + }, + { + "src": "images/apple-touch-icon.50147714-1768993680489.png", "sizes": "192x192", "type": "image/png" + } + ], + "start_url": ".", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" +} \ No newline at end of file diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..89c0ad6 --- /dev/null +++ b/src/App.css @@ -0,0 +1,33 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + padding: 20px; + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..2d6fc34 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import './App.css'; +import Home from './components/Home'; + +function App() { + return ( +
+ +
+ ); +} + +export default App; \ No newline at end of file diff --git a/src/components/Home.tsx b/src/components/Home.tsx new file mode 100644 index 0000000..698a2c8 --- /dev/null +++ b/src/components/Home.tsx @@ -0,0 +1,66 @@ +import React from 'react'; + +type BackgroundType = 'solid' | 'glass' | 'transparent'; +type BorderRadiusType = 'none' | 'small' | 'rounded' | 'large'; +type CardStyleType = 'minimal' | 'glass' | 'glass-elevated' | 'solid'; +type ButtonStyleType = 'solid' | 'glass' | 'outline'; +type TextAnimationType = 'none' | 'entrance-slide' | 'entrance-fade' | 'typing'; + +interface HomeProps { + defaultTextAnimation?: TextAnimationType; + borderRadius?: BorderRadiusType; + background?: BackgroundType; + cardStyle?: CardStyleType; + primaryButtonStyle?: ButtonStyleType; + secondaryButtonStyle?: ButtonStyleType; +} + +const Home: React.FC = ({ + defaultTextAnimation = "entrance-slide", borderRadius = "rounded", background = "glass", cardStyle = "glass-elevated", primaryButtonStyle = "solid", secondaryButtonStyle = "glass" +}) => { + return ( +
+
+
+

+ Welcome to Webild Components +

+

+ A modern component library built with React and Tailwind CSS +

+
+ +
+
+

Modern Design

+

+ Beautiful, responsive components with glass morphism effects +

+
+ +
+

TypeScript

+

+ Fully typed components for better developer experience +

+
+ +
+

Customizable

+

+ Flexible theming system with multiple style variants +

+
+
+ +
+ +
+
+
+ ); +}; + +export default Home; \ No newline at end of file diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..51c37d4 --- /dev/null +++ b/src/index.css @@ -0,0 +1,71 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} + +:root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + --secondary: 210 40% 96%; + --secondary-foreground: 222.2 84% 4.9%; + --muted: 210 40% 96%; + --muted-foreground: 215.4 16.3% 46.9%; + --accent: 210 40% 96%; + --accent-foreground: 222.2 84% 4.9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; + --radius: 0.5rem; +} + +.dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; +} + +* { + border-color: hsl(var(--border)); +} + +body { + background-color: hsl(var(--background)); + color: hsl(var(--foreground)); +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..8d82555 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; + +const root = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement +); +root.render( + + + +); + +reportWebVitals(); \ No newline at end of file diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts new file mode 100644 index 0000000..c0ca77c --- /dev/null +++ b/src/reportWebVitals.ts @@ -0,0 +1,15 @@ +import { ReportHandler } from 'web-vitals'; + +const reportWebVitals = (onPerfEntry?: ReportHandler) => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..92a7d97 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,9 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "./src/**/*.{js,jsx,ts,tsx}"], + theme: { + extend: {}, + }, + plugins: [], +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 07bb88e..da3d104 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,42 +1,21 @@ { "compilerOptions": { - "target": "ES2017", - "lib": [ - "dom", - "dom.iterable", - "esnext" + "target": "es5", "lib": [ + "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, - "strict": false, - "noImplicitAny": false, - "noEmit": true, "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "bundler", - "resolveJsonModule": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, - "jsx": "react-jsx", - "incremental": true, - "plugins": [ - { - "name": "next" - } - ], - "paths": { - "@/*": [ - "./src/*" - ] - } + "noEmit": true, + "jsx": "react-jsx" }, "include": [ - "next-env.d.ts", - "**/*.ts", - "**/*.tsx", - ".next/types/**/*.ts", - ".next/dev/types/**/*.ts" - ], - "exclude": [ - "node_modules" + "src" ] -} +} \ No newline at end of file