npm - weloop-kosign - Versions diffs - 1.1.3 → 1.1.4 - Mend

weloop-kosign 1.1.3 → 1.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/package.json +1 -1
package/scripts/cli-remote.js +314 -6

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "weloop-kosign",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "CLI tool for installing Weloop UI components",
   "keywords": [
     "weloop",

package/scripts/cli-remote.js CHANGED Viewed

@@ -1493,6 +1493,305 @@ async function initProject() {
     return;
   }
+  // Step 3: Setup project structure based on shadcn/ui + Next.js
+  info('\n🏗️  Setting up project structure...');
+  // Create basic Next.js project structure
+  const directories = [
+    'app',
+    'components',
+    'components/ui',
+    'lib',
+    'hooks',
+    'types',
+    'public',
+    'public/icons'
+  ];
+  directories.forEach(dir => {
+    const dirPath = path.join(process.cwd(), dir);
+    if (!fs.existsSync(dirPath)) {
+      fs.mkdirSync(dirPath, { recursive: true });
+      info(`   → Created ${dir}/ directory`);
+    }
+  });
+  // Create Next.js app structure files
+  const appFiles = {
+    'app/layout.tsx': `import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+const inter = Inter({ subsets: ["latin"] });
+export const metadata: Metadata = {
+  title: "${projectName}",
+  description: "Built with Weloop Design System",
+};
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}`,
+    'app/page.tsx': `export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
+        <h1 className="text-4xl font-bold">
+          Welcome to ${projectName}
+        </h1>
+      </div>
+    </main>
+  );
+}`,
+    'app/globals.css': `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :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: ${selectedRadius.replace('px', '')};
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+  .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%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}`,
+    'next.config.mjs': `/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    appDir: true,
+  },
+};
+export default nextConfig;`,
+    'tailwind.config.ts': `import type { Config } from "tailwindcss";
+const config: Config = {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+} satisfies Config;
+export default config;`,
+    'tsconfig.json': `{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "es6"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}`,
+    '.eslintrc.json': `{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}`
+  };
+  // Create files
+  Object.entries(appFiles).forEach(([filePath, content]) => {
+    const fullPath = path.join(process.cwd(), filePath);
+    if (!fs.existsSync(fullPath)) {
+      fs.writeFileSync(fullPath, content);
+      info(`   → Created ${filePath}`);
+    }
+  });
+  // Create or update package.json for Next.js project
+  const packageJsonPath = path.join(process.cwd(), 'package.json');
+  let packageJson = { dependencies: {}, devDependencies: {} };
+  if (fs.existsSync(packageJsonPath)) {
+    packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+  }
+  // Update package.json with Next.js dependencies
+  const nextDependencies = {
+    "next": "^14.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^5.0.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "tailwindcss": "^3.3.0",
+    "autoprefixer": "^10.0.0",
+    "postcss": "^8.0.0",
+    "tailwindcss-animate": "^1.0.7",
+    "eslint": "^8.0.0",
+    "eslint-config-next": "^14.0.0"
+  };
+  packageJson.name = projectName;
+  packageJson.version = "0.1.0";
+  packageJson.private = true;
+  packageJson.scripts = {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  };
+  // Merge dependencies
+  Object.assign(packageJson.dependencies || {}, nextDependencies);
+  Object.assign(packageJson.devDependencies || {}, {});
+  fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+  info(`   → Updated package.json`);
   // Detect CSS path based on project type
   let cssPath = PATHS.APP_GLOBALS_CSS;
   if (isVite) {
@@ -1538,11 +1837,7 @@ async function initProject() {
   info('   → [:root]/components.json');
   fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
-  // Step 2: Update CSS variables
-  info('   → [:root]/app/globals.css (Updating css variables)');
-  await installCSSStyles(config, DEFAULT_REGISTRY_URL, false, false);
-  // Step 3: Install dependencies
+  // Step 2: Install dependencies
   info('   → Installing dependencies');
   const missingBaseDeps = BASE_DEPENDENCIES.filter(dep => !checkPackageInstalled(dep));
@@ -1550,12 +1845,25 @@ async function initProject() {
     await installPackages(missingBaseDeps);
   }
+  // Install Next.js dependencies if not present
+  const nextDeps = [
+    "next", "react", "react-dom", "typescript",
+    "@types/node", "@types/react", "@types/react-dom",
+    "tailwindcss", "autoprefixer", "postcss",
+    "tailwindcss-animate", "eslint", "eslint-config-next"
+  ];
+  const missingNextDeps = nextDeps.filter(dep => !checkPackageInstalled(dep));
+  if (missingNextDeps.length > 0) {
+    await installPackages(missingNextDeps);
+  }
   // Install tw-animate-css for animations
   if (!checkPackageInstalled(PACKAGE_NAMES.TW_ANIMATE_CSS)) {
     await installPackages([PACKAGE_NAMES.TW_ANIMATE_CSS]);
   }
-  // Step 4: Create utils.ts file
+  // Step 3: Create utils.ts file
   info('   → Create 1 files:');
   const utilsPath = path.join(process.cwd(), 'lib', 'utils.ts');
   createUtilsFile(utilsPath);