bertui 0.1.5 → 0.1.7

package/src/styles/bertui.css

@@ -1,210 +1,210 @@
-/* BertUI Built-in Utilities v0.1.0 */
-
-/* Split Text Animation */
-.split {
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-}
-
-.split::before {
-  content: attr(data-text);
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 50%;
-  overflow: hidden;
-  animation: split-left 0.6s ease-out;
-}
-
-.split::after {
-  content: attr(data-text);
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 50%;
-  overflow: hidden;
-  animation: split-right 0.6s ease-out;
-}
-
-@keyframes split-left {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes split-right {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-/* Move Right Animation */
-.moveright {
-  animation: moveright 0.5s ease-out;
-}
-
-@keyframes moveright {
-  from {
-    transform: translateX(-20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-/* Move Left Animation */
-.moveleft {
-  animation: moveleft 0.5s ease-out;
-}
-
-@keyframes moveleft {
-  from {
-    transform: translateX(20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-/* Fade In */
-.fadein {
-  animation: fadein 0.5s ease-out;
-}
-
-@keyframes fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* Scale In */
-.scalein {
-  animation: scalein 0.4s ease-out;
-}
-
-@keyframes scalein {
-  from {
-    transform: scale(0.8);
-    opacity: 0;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-/* Bounce In */
-.bouncein {
-  animation: bouncein 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-
-@keyframes bouncein {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  50% {
-    transform: scale(1.1);
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-/* Slide Up */
-.slideup {
-  animation: slideup 0.5s ease-out;
-}
-
-@keyframes slideup {
-  from {
-    transform: translateY(20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-/* Slide Down */
-.slidedown {
-  animation: slidedown 0.5s ease-out;
-}
-
-@keyframes slidedown {
-  from {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-/* Rotate In */
-.rotatein {
-  animation: rotatein 0.6s ease-out;
-}
-
-@keyframes rotatein {
-  from {
-    transform: rotate(-180deg) scale(0);
-    opacity: 0;
-  }
-  to {
-    transform: rotate(0) scale(1);
-    opacity: 1;
-  }
-}
-
-/* Pulse */
-.pulse {
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-}
-
-/* Shake */
-.shake {
-  animation: shake 0.5s ease-in-out;
-}
-
-@keyframes shake {
-  0%, 100% {
-    transform: translateX(0);
-  }
-  10%, 30%, 50%, 70%, 90% {
-    transform: translateX(-5px);
-  }
-  20%, 40%, 60%, 80% {
-    transform: translateX(5px);
-  }
+/* BertUI Built-in Utilities v0.1.0 */
+
+/* Split Text Animation */
+.split {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+}
+
+.split::before {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50%;
+  overflow: hidden;
+  animation: split-left 0.6s ease-out;
+}
+
+.split::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 50%;
+  overflow: hidden;
+  animation: split-right 0.6s ease-out;
+}
+
+@keyframes split-left {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes split-right {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Move Right Animation */
+.moveright {
+  animation: moveright 0.5s ease-out;
+}
+
+@keyframes moveright {
+  from {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Move Left Animation */
+.moveleft {
+  animation: moveleft 0.5s ease-out;
+}
+
+@keyframes moveleft {
+  from {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Fade In */
+.fadein {
+  animation: fadein 0.5s ease-out;
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Scale In */
+.scalein {
+  animation: scalein 0.4s ease-out;
+}
+
+@keyframes scalein {
+  from {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Bounce In */
+.bouncein {
+  animation: bouncein 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+@keyframes bouncein {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Slide Up */
+.slideup {
+  animation: slideup 0.5s ease-out;
+}
+
+@keyframes slideup {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Slide Down */
+.slidedown {
+  animation: slidedown 0.5s ease-out;
+}
+
+@keyframes slidedown {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Rotate In */
+.rotatein {
+  animation: rotatein 0.6s ease-out;
+}
+
+@keyframes rotatein {
+  from {
+    transform: rotate(-180deg) scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: rotate(0) scale(1);
+    opacity: 1;
+  }
+}
+
+/* Pulse */
+.pulse {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+/* Shake */
+.shake {
+  animation: shake 0.5s ease-in-out;
+}
+
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-5px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(5px);
+  }
 }

package/src/router/router.js

@@ -1,216 +0,0 @@
-// src/router/router.js
-import { join, relative, parse } from 'path';
-import { readdirSync, statSync, existsSync } from 'fs';
-import logger from 'ernest-logger'; // Assuming Ernest Logger is used
-
-/**
- * Scans the pages directory and generates route definitions
- */
-export function generateRoutes(root) {
-  const pagesDir = join(root, 'src', 'pages');
-  
-  if (!existsSync(pagesDir)) {
-    return [];
-  }
-  
-  const routes = [];
-  
-  function scanDirectory(dir, basePath = '') {
-    const entries = readdirSync(dir);
-    
-    for (const entry of entries) {
-      const fullPath = join(dir, entry);
-      const stat = statSync(fullPath);
-      
-      if (stat.isDirectory()) {
-        // Recursively scan subdirectories
-        scanDirectory(fullPath, join(basePath, entry));
-      } else if (stat.isFile() && /\.(jsx?|tsx?)$/.test(entry)) {
-        const parsed = parse(entry);
-        let fileName = parsed.name;
-        
-        // Skip non-page files (e.g., those starting with a dot)
-        if (fileName.startsWith('.') || fileName.startsWith('~')) {
-          continue;
-        }
-        
-        // --- ROUTE PATH GENERATION ---
-        
-        // Handle dynamic routes: _filename -> :filename
-        let isDynamic = false;
-        if (fileName.startsWith('_')) {
-          fileName = fileName.slice(1); // Remove the underscore
-          isDynamic = true;
-        }
-
-        // Generate route path
-        let routePath = join(basePath, fileName === 'index' ? '' : fileName);
-        routePath = '/' + routePath.replace(/\\/g, '/'); // Use forward slashes
-        
-        // Apply dynamic parameter if detected
-        if (isDynamic) {
-            // Replace the last part of the route path with the dynamic parameter (e.g., /blog/slug -> /blog/:slug)
-            routePath = routePath.replace(new RegExp(`/${fileName}$`), `/:${fileName}`);
-        }
-        
-        // Handle the root path, ensuring it's just '/'
-        if (routePath === '//') {
-            routePath = '/';
-        }
-
-        // Get relative path from pages dir (used for imports in generated code)
-        const relativePath = relative(pagesDir, fullPath);
-        
-        routes.push({
-          path: routePath,
-          file: relativePath,
-          component: fullPath,
-          isDynamic: isDynamic || routePath.includes(':') 
-        });
-      }
-    }
-  }
-  
-  scanDirectory(pagesDir);
-  
-  // Sort routes: Root path first, then static, then dynamic
-  routes.sort((a, b) => {
-    if (a.path === '/') return -1; 
-    if (b.path === '/') return 1;
-    if (a.isDynamic && !b.isDynamic) return 1;
-    if (!a.isDynamic && b.isDynamic) return -1;
-    return a.path.localeCompare(b.path);
-  });
-  
-  return routes;
-}
-
-/**
- * Generates the router client code
- */
-export function generateRouterCode(routes) {
-  const imports = routes.map((route, index) => 
-    `import Page${index} from '../src/pages/${route.file.replace(/\\/g, '/')}';`
-  ).join('\n');
-  
-  const routeConfigs = routes.map((route, index) => ({
-    path: route.path,
-    component: `Page${index}`
-  }));
-  
-  return `
-// Auto-generated router code - DO NOT EDIT MANUALLY
-import React, { useState, useEffect } from 'react';
-${imports}
-
-const routes = ${JSON.stringify(routeConfigs, null, 2).replace(/"Page(\d+)"/g, 'Page$1')};
-
-export function Router() {
-  const [currentPath, setCurrentPath] = useState(window.location.pathname);
-  
-  useEffect(() => {
-    const handlePopState = () => {
-      setCurrentPath(window.location.pathname);
-    };
-    
-    window.addEventListener('popstate', handlePopState);
-    return () => window.removeEventListener('popstate', handlePopState);
-  }, []);
-  
-  // Match current path to route
-  const matchedRoute = routes.find(route => {
-    if (route.path === currentPath) return true;
-    
-    // Handle dynamic routes (simple static matching for now)
-    const routeParts = route.path.split('/');
-    const pathParts = currentPath.split('/');
-    
-    if (routeParts.length !== pathParts.length) return false;
-    
-    return routeParts.every((part, i) => {
-      if (part.startsWith(':')) return true; // Match any value for dynamic part
-      return part === pathParts[i];
-    });
-  });
-  
-  if (!matchedRoute) {
-    return <div style={{ padding: '2rem', textAlign: 'center' }}>
-      <h1>404 - Page Not Found</h1>
-      <p>The page "{currentPath}" does not exist.</p>
-      <a href="/" onClick={(e) => { e.preventDefault(); navigate('/'); }}>Go Home</a>
-    </div>;
-  }
-  
-  // Extract params from dynamic routes
-  const params = {};
-  if (matchedRoute.path.includes(':')) {
-    const routeParts = matchedRoute.path.split('/');
-    const pathParts = currentPath.split('/');
-    
-    routeParts.forEach((part, i) => {
-      if (part.startsWith(':')) {
-        const paramName = part.slice(1);
-        params[paramName] = pathParts[i];
-      }
-    });
-  }
-  
-  const Component = matchedRoute.component;
-  return <Component params={params} />;
-}
-
-// Client-side navigation
-export function navigate(path) {
-  window.history.pushState({}, '', path);
-  window.dispatchEvent(new PopStateEvent('popstate'));
-}
-
-// Link component for navigation
-export function Link({ href, children, ...props }) {
-  const handleClick = (e) => {
-    e.preventDefault();
-    navigate(href);
-  };
-  
-  return (
-    <a href={href} onClick={handleClick} {...props}>
-      {children}
-    </a>
-  );
-}
-`;
-}
-
-/**
- * Generates the main entry point with router
- */
-export function generateMainWithRouter(routes) {
-  return `
-import 'bertui/styles';
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { Router } from './.bertui/router.js';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <Router />
-);
-`;
-}
-
-export function logRoutes(routes) {
-  if (routes.length === 0) {
-    logger.warn('No routes found in src/pages/');
-    logger.info('Create files in src/pages/ to define routes:');
-    logger.info('  src/pages/index.jsx     → /');
-    logger.info('  src/pages/about.jsx     → /about');
-    logger.info('  src/pages/user/_id.jsx  → /user/:id'); // Updated tip
-    return;
-  }
-  
-  logger.bigLog('ROUTES DISCOVERED', { color: 'cyan' });
-  logger.table(routes.map(r => ({
-    route: r.path,
-    file: r.file,
-    type: r.isDynamic ? 'dynamic' : 'static'
-  })));
-}