create-ec-app 0.0.1

package/README.md

@@ -0,0 +1,204 @@
+# create-ec-app
+
+🚀 **Unified CLI tool to create different types of EC applications**
+
+Create React, Next.js, Power Pages, and React Native applications with a single command. Each app comes pre-configured with the tools and patterns you need for building enterprise applications.
+
+## Quick Start
+
+### npm (recommended)
+
+```bash
+npx create-ec-app my-awesome-project
+```
+
+### bun
+
+```bash
+bunx create-ec-app my-awesome-project
+```
+
+### pnpm
+
+```bash
+pnpm create ec-app my-awesome-project
+```
+
+## App Types
+
+### 📱 Webresource App
+
+Perfect for Dynamics 365 webresources
+
+- **Framework**: React + Vite + TypeScript
+- **Styling**: Tailwind CSS + Kendo UI
+- **Features**:
+  - Pre-configured for Dynamics 365 embedding
+  - Kendo UI theme selection
+  - TanStack Query for data fetching
+  - Zustand for state management
+  - XRM type definitions
+
+### 🌐 Portal App
+
+Ideal for customer portals and external-facing applications
+
+- **Framework**: Next.js + TypeScript
+- **Styling**: Choice of Kendo UI or Shadcn/ui
+- **Features**:
+  - NextAuth.js authentication
+  - Dynamics 365 integration
+  - GitHub Actions workflow
+  - Environment configuration
+
+### ⚡ Power Pages App
+
+Specialized for Microsoft Power Pages
+
+- **Framework**: React + Vite + TypeScript
+- **Styling**: Tailwind CSS + Kendo UI
+- **Features**:
+  - Power Pages authentication context
+  - Portal-specific data services
+  - Pre-built auth components
+  - Power Pages configuration
+
+### 📲 Mobile App
+
+Cross-platform mobile development
+
+- **Framework**: React Native + Expo + TypeScript
+- **Styling**: NativeWind (Tailwind for React Native)
+- **Features**:
+  - MSAL.js authentication
+  - React Native Reusables components
+  - TanStack Query
+  - Pre-configured navigation
+
+## Installation & Usage
+
+### Option 1: Direct Usage (Recommended)
+
+**npm**:
+
+```bash
+npx create-ec-app@latest my-project
+```
+
+**bun**:
+
+```bash
+bunx create-ec-app@latest my-project
+```
+
+**pnpm**:
+
+```bash
+pnpm create ec-app@latest my-project
+```
+
+### Option 2: Global Installation
+
+**npm**:
+
+```bash
+npm install -g create-ec-app
+create-ec-app my-project
+```
+
+**bun**:
+
+```bash
+bun add -g create-ec-app
+create-ec-app my-project
+```
+
+**pnpm**:
+
+```bash
+pnpm add -g create-ec-app
+create-ec-app my-project
+```
+
+**yarn**:
+
+```bash
+yarn global add create-ec-app
+create-ec-app my-project
+```
+
+## Getting Started
+
+1. **Run the command**:
+
+   ```bash
+   npx create-ec-app my-project
+   # or with your preferred package manager
+   ```
+
+2. **Choose your application type** from the interactive menu
+
+3. **Follow the prompts** for additional configuration (themes, UI libraries, etc.)
+
+4. **Start developing**:
+   ```bash
+   cd my-project
+   npm run dev
+   # or: bun dev, pnpm dev, yarn dev
+   ```
+
+## What's Included
+
+All applications come with:
+
+- ✅ TypeScript configuration
+- ✅ ESLint and Prettier setup
+- ✅ Git repository initialization
+- ✅ Environment configuration
+- ✅ Build and development scripts
+- ✅ Enterprise-ready folder structure
+
+### Webresource & Power Pages Apps Include:
+
+- Kendo UI components and theming
+- Dynamics 365 authentication helpers
+- TanStack Query setup
+- Zustand store configuration
+
+### Portal Apps Include:
+
+- NextAuth.js configuration
+- Choice of UI library (Kendo UI or Shadcn/ui)
+- GitHub Actions deployment workflow example
+- Environment variable templates
+
+### Mobile Apps Include:
+
+- Expo development build configuration
+- NativeWind styling system
+- MSAL authentication setup
+- Navigation structure
+
+## Development
+
+To contribute to this tool:
+
+```bash
+git clone <repository-url>
+cd create-ec-app
+npm install
+npm run build
+npm link
+```
+
+## License
+
+MIT
+
+---
+
+**Note**: For Kendo UI apps, remember to activate your license after project creation:
+
+```bash
+npx kendo-ui-license activate
+```

package/bin/index.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import '../dist/index.js';

package/dist/creators/mobile.d.ts

@@ -0,0 +1,2 @@
+export declare const createMobileApp: (projectName: string) => Promise<void>;
+//# sourceMappingURL=mobile.d.ts.map

package/dist/creators/mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile.d.ts","sourceRoot":"","sources":["../../src/creators/mobile.ts"],"names":[],"mappings":"AAiMA,eAAO,MAAM,eAAe,GAAU,aAAa,MAAM,KAAG,OAAO,CAAC,IAAI,CA+CvE,CAAC"}

package/dist/creators/mobile.js

@@ -0,0 +1,220 @@
+import chalk from "chalk";
+import ora from "ora";
+import fs from "fs-extra";
+import path from "path";
+import { execSync } from "child_process";
+// Helper function to run commands and show a spinner
+const runCommand = (command, spinnerMessage) => {
+    const spinner = ora(spinnerMessage).start();
+    try {
+        execSync(command, { stdio: "pipe" });
+        spinner.succeed();
+    }
+    catch (error) {
+        spinner.fail();
+        console.error(chalk.red(`Failed to execute command: ${command}`));
+        console.error(error);
+        process.exit(1);
+    }
+};
+// Template functions
+const getAppLayout = () => `import "@/global.css";
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
+import { PortalHost } from '@rn-primitives/portal';
+import { useFonts } from 'expo-font';
+import { Stack } from 'expo-router';
+import * as SplashScreen from 'expo-splash-screen';
+import { useEffect } from 'react';
+import 'react-native-reanimated';
+
+import { useColorScheme } from '@/components/useColorScheme';
+
+export {
+  // Catch any errors thrown by the Layout component.
+  ErrorBoundary
+} from 'expo-router';
+
+export const unstable_settings = {
+  // Ensure that reloading on '/modal' keeps a back button present.
+  initialRouteName: '(tabs)',
+};
+
+// Prevent the splash screen from auto-hiding before asset loading is complete.
+SplashScreen.preventAutoHideAsync();
+
+export default function RootLayout() {
+  const [loaded, error] = useFonts({
+    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
+    ...FontAwesome.font,
+  });
+
+  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
+  useEffect(() => {
+    if (error) throw error;
+  }, [error]);
+
+  useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync();
+    }
+  }, [loaded]);
+
+  if (!loaded) {
+    return null;
+  }
+
+  return <RootLayoutNav />;
+}
+
+function RootLayoutNav() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+      <Stack>
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
+      </Stack>
+      <PortalHost />
+    </ThemeProvider>
+  );
+}`;
+const getThemeLib = () => `import { DarkTheme, DefaultTheme, type Theme } from '@react-navigation/native';
+
+export const THEME = {
+  light: {
+    background: 'hsl(0 0% 100%)',
+    foreground: 'hsl(0 0% 3.9%)',
+    card: 'hsl(0 0% 100%)',
+    cardForeground: 'hsl(0 0% 3.9%)',
+    popover: 'hsl(0 0% 100%)',
+    popoverForeground: 'hsl(0 0% 3.9%)',
+    primary: 'hsl(0 0% 9%)',
+    primaryForeground: 'hsl(0 0% 98%)',
+    secondary: 'hsl(0 0% 96.1%)',
+    secondaryForeground: 'hsl(0 0% 9%)',
+    muted: 'hsl(0 0% 96.1%)',
+    mutedForeground: 'hsl(0 0% 45.1%)',
+    accent: 'hsl(0 0% 96.1%)',
+    accentForeground: 'hsl(0 0% 9%)',
+    destructive: 'hsl(0 84.2% 60.2%)',
+    border: 'hsl(0 0% 89.8%)',
+    input: 'hsl(0 0% 89.8%)',
+    ring: 'hsl(0 0% 63%)',
+    radius: '0.625rem',
+    chart1: 'hsl(12 76% 61%)',
+    chart2: 'hsl(173 58% 39%)',
+    chart3: 'hsl(197 37% 24%)',
+    chart4: 'hsl(43 74% 66%)',
+    chart5: 'hsl(27 87% 67%)',
+  },
+  dark: {
+    background: 'hsl(0 0% 3.9%)',
+    foreground: 'hsl(0 0% 98%)',
+    card: 'hsl(0 0% 3.9%)',
+    cardForeground: 'hsl(0 0% 98%)',
+    popover: 'hsl(0 0% 3.9%)',
+    popoverForeground: 'hsl(0 0% 98%)',
+    primary: 'hsl(0 0% 98%)',
+    primaryForeground: 'hsl(0 0% 9%)',
+    secondary: 'hsl(0 0% 14.9%)',
+    secondaryForeground: 'hsl(0 0% 98%)',
+    muted: 'hsl(0 0% 14.9%)',
+    mutedForeground: 'hsl(0 0% 63.9%)',
+    accent: 'hsl(0 0% 14.9%)',
+    accentForeground: 'hsl(0 0% 98%)',
+    destructive: 'hsl(0 70.9% 59.4%)',
+    border: 'hsl(0 0% 14.9%)',
+    input: 'hsl(0 0% 14.9%)',
+    ring: 'hsl(300 0% 45%)',
+    radius: '0.625rem',
+    chart1: 'hsl(220 70% 50%)',
+    chart2: 'hsl(160 60% 45%)',
+    chart3: 'hsl(30 80% 55%)',
+    chart4: 'hsl(280 65% 60%)',
+    chart5: 'hsl(340 75% 55%)',
+  },
+};
+
+export const NAV_THEME: Record<'light' | 'dark', Theme> = {
+  light: {
+    ...DefaultTheme,
+    colors: {
+      background: THEME.light.background,
+      border: THEME.light.border,
+      card: THEME.light.card,
+      notification: THEME.light.destructive,
+      primary: THEME.light.primary,
+      text: THEME.light.foreground,
+    },
+  },
+  dark: {
+    ...DarkTheme,
+    colors: {
+      background: THEME.dark.background,
+      border: THEME.dark.border,
+      card: THEME.dark.card,
+      notification: THEME.dark.destructive,
+      primary: THEME.dark.primary,
+      text: THEME.dark.foreground,
+    },
+  },
+};`;
+const getUtilsLib = () => `import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}`;
+const getComponentsJson = () => `{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "global.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}`;
+export const createMobileApp = async (projectName) => {
+    const cleanProjectName = projectName
+        .trim()
+        .toLowerCase()
+        .replace(/\s+/g, "-")
+        .replace(/[^a-z0-9\-]/g, "-")
+        .replace(/-+/g, "-");
+    const projectDir = path.resolve(process.cwd(), cleanProjectName);
+    console.log(`\nScaffolding a new Expo app in ${chalk.green(projectDir)}...\n`);
+    runCommand(`npx create-expo-app@latest --example with-tailwindcss ${cleanProjectName}`, "Creating Expo project with Tailwind example...");
+    process.chdir(projectDir);
+    runCommand("npx expo install tailwindcss-animate class-variance-authority clsx tailwind-merge @rn-primitives/portal", "Installing React Native Reusables dependencies...");
+    const appLayoutPath = path.join(projectDir, "app", "_layout.tsx");
+    await fs.writeFile(appLayoutPath, getAppLayout(), "utf8");
+    ora("Updated app/_layout.tsx").succeed();
+    const libDir = path.join(projectDir, "lib");
+    await fs.ensureDir(libDir);
+    const themePath = path.join(libDir, "theme.ts");
+    await fs.writeFile(themePath, getThemeLib(), "utf8");
+    ora("Created lib/theme.ts").succeed();
+    const utilsPath = path.join(libDir, "utils.ts");
+    await fs.writeFile(utilsPath, getUtilsLib(), "utf8");
+    ora("Created lib/utils.ts").succeed();
+    const componentsJsonPath = path.join(projectDir, "components.json");
+    await fs.writeFile(componentsJsonPath, getComponentsJson(), "utf8");
+    ora("Created components.json").succeed();
+    // Initialize Git
+    runCommand("git init", "Initializing Git repository...");
+    runCommand("git add .", "Staging files for initial commit...");
+    runCommand(`git commit -m "Initial commit from create-ec-app"`, "Creating initial commit...");
+};
+//# sourceMappingURL=mobile.js.map

package/dist/creators/mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile.js","sourceRoot":"","sources":["../../src/creators/mobile.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,MAAM,KAAK,CAAC;AACtB,OAAO,EAAE,MAAM,UAAU,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,qDAAqD;AACrD,MAAM,UAAU,GAAG,CAAC,OAAe,EAAE,cAAsB,EAAQ,EAAE;IACpE,MAAM,OAAO,GAAG,GAAG,CAAC,cAAc,CAAC,CAAC,KAAK,EAAE,CAAC;IAC5C,IAAI,CAAC;QACJ,QAAQ,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;QACrC,OAAO,CAAC,OAAO,EAAE,CAAC;IACnB,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QAChB,OAAO,CAAC,IAAI,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,8BAA8B,OAAO,EAAE,CAAC,CAAC,CAAC;QAClE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACrB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACjB,CAAC;AACF,CAAC,CAAC;AAEF,qBAAqB;AACrB,MAAM,YAAY,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6DjC,CAAC;AAEH,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgF/B,CAAC;AAEJ,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;EAKhC,CAAC;AAEH,MAAM,iBAAiB,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;EAkBtC,CAAC;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,EAAE,WAAmB,EAAiB,EAAE;IAC3E,MAAM,gBAAgB,GAAG,WAAW;SAClC,IAAI,EAAE;SACN,WAAW,EAAE;SACb,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC;SACpB,OAAO,CAAC,cAAc,EAAE,GAAG,CAAC;SAC5B,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAEtB,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,gBAAgB,CAAC,CAAC;IAEjE,OAAO,CAAC,GAAG,CAAC,mCAAmC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAE/E,UAAU,CACT,yDAAyD,gBAAgB,EAAE,EAC3E,gDAAgD,CAChD,CAAC;IAEF,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAE1B,UAAU,CACT,yGAAyG,EACzG,mDAAmD,CACnD,CAAC;IAEF,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC;IAClE,MAAM,EAAE,CAAC,SAAS,CAAC,aAAa,EAAE,YAAY,EAAE,EAAE,MAAM,CAAC,CAAC;IAC1D,GAAG,CAAC,yBAAyB,CAAC,CAAC,OAAO,EAAE,CAAC;IAEzC,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IAC5C,MAAM,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAChD,MAAM,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE,WAAW,EAAE,EAAE,MAAM,CAAC,CAAC;IACrD,GAAG,CAAC,sBAAsB,CAAC,CAAC,OAAO,EAAE,CAAC;IAEtC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAChD,MAAM,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE,WAAW,EAAE,EAAE,MAAM,CAAC,CAAC;IACrD,GAAG,CAAC,sBAAsB,CAAC,CAAC,OAAO,EAAE,CAAC;IAEtC,MAAM,kBAAkB,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC;IACpE,MAAM,EAAE,CAAC,SAAS,CAAC,kBAAkB,EAAE,iBAAiB,EAAE,EAAE,MAAM,CAAC,CAAC;IACpE,GAAG,CAAC,yBAAyB,CAAC,CAAC,OAAO,EAAE,CAAC;IAEzC,iBAAiB;IACjB,UAAU,CAAC,UAAU,EAAE,gCAAgC,CAAC,CAAC;IACzD,UAAU,CAAC,WAAW,EAAE,qCAAqC,CAAC,CAAC;IAC/D,UAAU,CAAC,mDAAmD,EAAE,4BAA4B,CAAC,CAAC;AAC/F,CAAC,CAAC"}

package/dist/creators/portal.d.ts

@@ -0,0 +1,2 @@
+export declare const createPortalApp: (projectName: string) => Promise<void>;
+//# sourceMappingURL=portal.d.ts.map

package/dist/creators/portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../src/creators/portal.ts"],"names":[],"mappings":"AAuuBA,eAAO,MAAM,eAAe,GAAU,aAAa,MAAM,KAAG,OAAO,CAAC,IAAI,CAuNvE,CAAC"}