@klyb/cli 0.1.19

package/src/commands/dev.ts

@@ -0,0 +1,94 @@
+import path from 'path';
+import express from 'express';
+import spawn from 'cross-spawn';
+import chalk from 'chalk';
+import fs from 'fs';
+import dotenv from 'dotenv';
+import axios from 'axios';
+
+export async function devCommand() {
+    console.log(chalk.blue('🚀 Starting Klyb Development Environment...'));
+
+    // 0. Load Environment Variables from the User's Project
+    const userEnvPath = path.join(process.cwd(), '.env');
+    if (fs.existsSync(userEnvPath)) {
+        dotenv.config({ path: userEnvPath });
+        console.log(chalk.green('✅ Loaded .env file'));
+    } else {
+        console.log(chalk.yellow('⚠️  No .env file found. API Key integration will be disabled.'));
+    }
+
+    // 1. Start User's Widget Server (Vite)
+    const widgetPort = 3001;
+    console.log(chalk.dim(`   Starting widget server on port ${widgetPort}...`));
+
+    const widgetProcess = spawn('npm', ['run', 'dev', '--', '--port', widgetPort.toString()], {
+        stdio: 'inherit',
+        env: { ...process.env, FORCE_COLOR: 'true' }
+    });
+
+    widgetProcess.on('error', (err) => {
+        console.error(chalk.red('❌ Failed to start widget server'), err);
+    });
+
+    // 2. Start Simulator Server
+    const app = express();
+    const simulatorPort = 3002; // Changed from 3000 to avoid conflict with API
+    const realApiUrl = process.env.KLYB_API_URL || 'http://localhost:3000';
+
+    // API Route for Simulator to get Configuration
+    app.get('/simulator/api/config', async (req, res) => {
+        const apiKey = process.env.KLYB_API_KEY;
+        let user = null;
+
+        if (apiKey) {
+            try {
+                // Determine if apiKey is a JWT or a special key. 
+                // For now, assuming it's a Bearer Token (Personal Access Token)
+                const response = await axios.get(`${realApiUrl}/api/auth/me`, {
+                    headers: { Authorization: `Bearer ${apiKey}` }
+                });
+                user = response.data;
+                // Add role/permissions if needed
+            } catch (error: any) {
+                console.error(chalk.red('❌ Failed to validate API Key:'), error.message);
+                // Don't fail the request, just return guest mode with error
+            }
+        }
+
+        res.json({
+            user: user || { id: 'guest', name: 'Guest Developer', role: 'guest' },
+            mode: apiKey ? 'authenticated' : 'guest',
+            apiUrl: realApiUrl
+        });
+    });
+
+    // Resolve path to built simulator client assets
+    let simulatorDist = path.join(__dirname, '../../simulator/client');
+
+    if (!fs.existsSync(simulatorDist) || !fs.existsSync(path.join(simulatorDist, 'index.html'))) {
+        console.warn(chalk.yellow('⚠️  Simulator build not found. Ensure CLI is built.'));
+        simulatorDist = path.join(__dirname, '../../../dist/simulator/client');
+    }
+
+    app.use(express.static(simulatorDist));
+
+    app.get('*', (req, res) => {
+        // handle api routes not found
+        if (req.path.startsWith('/simulator/api')) {
+            return res.status(404).json({ error: 'Not Found' });
+        }
+        res.sendFile(path.join(simulatorDist, 'index.html'));
+    });
+
+    app.listen(simulatorPort, () => {
+        console.log(chalk.green(`\n📱 Simulator running at http://localhost:${simulatorPort}`));
+        console.log(chalk.cyan(`   Widget running at http://localhost:${widgetPort}`));
+        console.log(chalk.dim('   Press Ctrl+C to stop.'));
+    });
+
+    process.on('SIGINT', () => {
+        widgetProcess.kill();
+        process.exit();
+    });
+}

package/src/commands/init.ts

@@ -0,0 +1,88 @@
+import fs from 'fs-extra';
+import path from 'path';
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+import { execSync } from 'child_process';
+
+// In CommonJS, __dirname is available globally
+
+export async function initCommand(name: string) {
+    const targetDir = path.resolve(process.cwd(), name);
+
+    if (fs.existsSync(targetDir)) {
+        console.error(chalk.red(`❌ Directory ${name} already exists.`));
+        process.exit(1);
+    }
+
+    console.log(chalk.blue(`🚀 Creating new Klyb widget project: ${name}`));
+
+    // 1. Copy Template
+    // In dev (ts-node/src), template is in src/templates
+    // In prod (dist), template is in dist/templates (need to ensure build copies it)
+    // For now we assume we are running from src or built dist where structure is preserved.
+    // Adjust path based on where we are executing.
+
+    // We need to resolve the template path relative to this file.
+    // If we are in dist/commands/init.js, template should be in ../templates/react-vite-ts relative to this file? 
+    // No, standard is usually to keep templates as assets.
+    // Let's assume we are in src/commands/init.ts for dev flow or dist/commands/init.js
+
+    // Quick fix for path resolution in both envs: look for templates dir up the tree
+    const templateName = 'react-vite-ts';
+    let templateDir = path.join(__dirname, '../../templates', templateName); // from dist/commands or src/commands
+
+    // Fallback if structure is different (e.g. src vs dist) - explicit check
+    if (!fs.existsSync(templateDir)) {
+        // Try source path if we are running from dist but templates are in src (common in local dev)
+        templateDir = path.join(__dirname, '../../src/templates', templateName);
+    }
+
+    if (!fs.existsSync(templateDir)) {
+        console.error(chalk.red(`❌ Template not found at ${templateDir}`));
+        process.exit(1);
+    }
+
+    try {
+        await fs.copy(templateDir, targetDir);
+
+        // 2. Customize package.json
+        const pkgPath = path.join(targetDir, 'package.json');
+        const pkg = await fs.readJson(pkgPath);
+        pkg.name = name;
+        await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+
+        // 3. Rename files starting with _ (to avoid npm stripping them)
+        const gitignorePath = path.join(targetDir, '_gitignore');
+        if (fs.existsSync(gitignorePath)) {
+            await fs.move(gitignorePath, path.join(targetDir, '.gitignore'));
+        }
+
+        const envExamplePath = path.join(targetDir, '_env.example');
+        if (fs.existsSync(envExamplePath)) {
+            await fs.move(envExamplePath, path.join(targetDir, '.env.example'));
+        }
+
+        console.log(chalk.green(`✅ Project created in ${targetDir}`));
+
+        // 4. Prompt for install
+        const { install } = await inquirer.prompt([{
+            type: 'confirm',
+            name: 'install',
+            message: 'Install dependencies now?',
+            default: true
+        }]);
+
+        if (install) {
+            console.log(chalk.yellow('📦 Installing dependencies...'));
+            execSync('npm install', { cwd: targetDir, stdio: 'inherit' });
+            console.log(chalk.green('✅ Dependencies installed'));
+        }
+
+        console.log('\nNext steps:');
+        console.log(chalk.cyan(`  cd ${name}`));
+        console.log(chalk.cyan('  npm run dev'));
+
+    } catch (e: any) {
+        console.error(chalk.red('❌ Failed to create project'), e);
+    }
+}

package/src/commands/login.ts

@@ -0,0 +1,94 @@
+import chalk from 'chalk';
+import http from 'http';
+import { saveCredentials, credentialsPath } from '../credentials';
+
+const DEFAULT_API_URL = process.env.KLYB_API_URL || 'http://localhost:3000';
+
+/**
+ * `klyb login`
+ *
+ * 1. Starts a one-shot local HTTP server on a random port
+ * 2. Opens the browser to the backend's CLI login page
+ * 3. After the user logs in, the backend redirects back with the JWT
+ * 4. CLI saves the token to ~/.klyb/credentials.json
+ */
+export async function loginCommand() {
+    const apiUrl = DEFAULT_API_URL;
+
+    console.log(chalk.blue('🔑 Logging in to Klyb...'));
+    console.log(chalk.dim(`   API: ${apiUrl}\n`));
+
+    const token = await waitForToken(apiUrl);
+
+    // Persist credentials
+    saveCredentials({
+        token,
+        apiUrl,
+        savedAt: new Date().toISOString(),
+    });
+
+    console.log(chalk.green('\n✅ Logged in successfully!'));
+    console.log(chalk.dim(`   Credentials saved to: ${credentialsPath()}`));
+    console.log(chalk.dim('   You can now run: klyb deploy'));
+}
+
+function waitForToken(apiUrl: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+        // One-shot HTTP server to receive the callback
+        const server = http.createServer((req, res) => {
+            const url = new URL(req.url!, `http://localhost`);
+
+            if (url.pathname === '/callback') {
+                const token = url.searchParams.get('token');
+                const error = url.searchParams.get('error');
+
+                if (token) {
+                    // Success — show a nice page to the user
+                    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+                    res.end(`
+                        <!DOCTYPE html>
+                        <html>
+                        <head><title>Klyb CLI</title></head>
+                        <body style="font-family:sans-serif;text-align:center;padding:4rem;background:#0f172a;color:white">
+                            <h1 style="color:#22d3ee">✅ Logged in!</h1>
+                            <p style="color:#94a3b8">You can close this window and return to your terminal.</p>
+                        </body>
+                        </html>
+                    `);
+                    server.close();
+                    resolve(token);
+                } else {
+                    res.writeHead(400, { 'Content-Type': 'text/html; charset=utf-8' });
+                    res.end(`<p>Error: ${error || 'unknown'}</p>`);
+                    server.close();
+                    reject(new Error(error || 'Login failed'));
+                }
+            } else {
+                res.writeHead(404);
+                res.end();
+            }
+        });
+
+        // Listen on a random available port
+        server.listen(0, '127.0.0.1', () => {
+            const address = server.address() as { port: number };
+            const callbackUrl = `http://127.0.0.1:${address.port}/callback`;
+            const loginUrl = `${apiUrl}/api/auth/cli-login?redirect=${encodeURIComponent(callbackUrl)}`;
+
+            console.log(chalk.cyan('   Opening browser for authentication...'));
+            console.log(chalk.dim(`   If the browser doesn't open, visit:\n   ${loginUrl}\n`));
+
+            // Dynamic import to handle ESM-only open package
+            import('open').then(({ default: openBrowser }) => openBrowser(loginUrl)).catch(() => { });
+        });
+
+        // Timeout after 5 minutes
+        const timeout = setTimeout(() => {
+            server.close();
+            reject(new Error('Login timed out. Please try again.'));
+        }, 5 * 60 * 1000);
+
+        server.on('close', () => clearTimeout(timeout));
+        server.on('error', reject);
+    });
+}

package/src/credentials.ts

@@ -0,0 +1,36 @@
+import os from 'os';
+import path from 'path';
+import fs from 'fs-extra';
+
+const CREDENTIALS_PATH = path.join(os.homedir(), '.klyb', 'credentials.json');
+
+export interface KlybCredentials {
+    token: string;       // JWT access token
+    apiUrl: string;      // API base URL used when logging in
+    email?: string;
+    savedAt: string;
+}
+
+export function getCredentials(): KlybCredentials | null {
+    try {
+        if (!fs.existsSync(CREDENTIALS_PATH)) return null;
+        return fs.readJsonSync(CREDENTIALS_PATH) as KlybCredentials;
+    } catch {
+        return null;
+    }
+}
+
+export function saveCredentials(creds: KlybCredentials): void {
+    fs.ensureDirSync(path.dirname(CREDENTIALS_PATH));
+    fs.writeJsonSync(CREDENTIALS_PATH, creds, { spaces: 2 });
+}
+
+export function clearCredentials(): void {
+    if (fs.existsSync(CREDENTIALS_PATH)) {
+        fs.removeSync(CREDENTIALS_PATH);
+    }
+}
+
+export function credentialsPath(): string {
+    return CREDENTIALS_PATH;
+}

package/src/index.ts

@@ -0,0 +1,37 @@
+import { Command } from 'commander';
+import { initCommand } from './commands/init';
+import { devCommand } from './commands/dev';
+import { deployCommand } from './commands/deploy';
+import { loginCommand } from './commands/login';
+
+const program = new Command();
+
+program
+    .name('klyb')
+    .description('Klyb Developer CLI')
+    .version('0.1.0');
+
+program
+    .command('login')
+    .description('Authenticate with Klyb (opens browser)')
+    .action(loginCommand);
+
+program
+    .command('init')
+    .description('Initialize a new Klyb widget project')
+    .argument('<name>', 'Project name')
+    .action(initCommand);
+
+program
+    .command('dev')
+    .description('Start development server with Simulator')
+    .action(devCommand);
+
+program
+    .command('deploy')
+    .description('Build and deploy widget to Klyb')
+    .option('--submit', 'Submit for validation immediately')
+    .action(deployCommand);
+
+program.parse();
+

package/src/simulator/client/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Klyb Simulator</title>
+</head>
+
+<body class="bg-slate-50 h-screen w-screen overflow-hidden">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+</body>
+
+</html>

package/src/simulator/client/src/SimulatorApp.tsx

@@ -0,0 +1,163 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+// Mock Bridge Types (replicated from SDK for independence)
+type BridgeAction = 'VIBRATE' | 'NAVIGATE' | 'GET_USER' | 'STORAGE_SET' | 'STORAGE_GET';
+interface BridgeRequest { id: string; action: BridgeAction; payload?: any; source?: string; }
+interface BridgeResponse { id: string; success: boolean; data?: any; error?: string; }
+
+export default function SimulatorApp() {
+    // State
+    const [widgetUrl, setWidgetUrl] = useState('http://localhost:3001'); // Default widget port
+    const [logs, setLogs] = useState<{ time: string, type: 'req' | 'res', msg: string }[]>([]);
+    const [userContext, setUserContext] = useState<any>({ id: 'sim-user-1', name: 'Simulator User (Guest)', role: 'guest' });
+    const [authStatus, setAuthStatus] = useState<'loading' | 'authenticated' | 'guest'>('loading');
+
+    // Iframe ref to send responses back
+    const iframeRef = useRef<HTMLIFrameElement>(null);
+
+    // Initial load & Config Fetch
+    useEffect(() => {
+        // Fetch Simulator Config
+        fetch('/simulator/api/config')
+            .then(res => res.json())
+            .then(data => {
+                if (data.user) {
+                    setUserContext(data.user);
+                }
+                setAuthStatus(data.mode);
+                log('sys', `Loaded configuration: ${data.mode}`);
+            })
+            .catch(err => {
+                console.error('Failed to load simulator config', err);
+                setAuthStatus('guest');
+            });
+
+        const handleMessage = (event: MessageEvent) => {
+            const data = event.data as BridgeRequest;
+
+            // Filter only widget messages
+            if (data?.source !== 'klyb-widget') return;
+
+            log('req', `${data.action} ${data.payload ? JSON.stringify(data.payload) : ''}`);
+
+            // Process Request
+            processBridgeRequest(data, event.source as Window);
+        };
+
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, []);
+
+    // Update handler to use current state (via ref or dependency)
+    // Actually we need to be careful with stale closures in event listeners.
+    // The easiest way is to use a ref for userContext or pass it to the handler if it was stable.
+    // But since the listener is added once, it will see stale userContext.
+    // Let's use a ref for userContext.
+    const userContextRef = useRef(userContext);
+    useEffect(() => { userContextRef.current = userContext; }, [userContext]);
+
+    const log = (type: 'req' | 'res' | 'sys', msg: string) => {
+        setLogs(prev => [{
+            time: new Date().toLocaleTimeString().split(' ')[0],
+            type,
+            msg
+        }, ...prev]);
+    };
+
+    const processBridgeRequest = (req: BridgeRequest, sourceWindow: Window) => {
+        let responseData: any = null;
+        let success = true;
+
+        switch (req.action) {
+            case 'GET_USER':
+                // Use the ref to get the latest user context
+                responseData = userContextRef.current;
+                break;
+            case 'VIBRATE':
+                // Visual feedback
+                if (navigator.vibrate) navigator.vibrate(200);
+                alert('📳 VIBRATION TRIGGERED');
+                break;
+            case 'NAVIGATE':
+                alert(`🧭 Navigating to: ${req.payload?.route}`);
+                break;
+            default:
+                console.warn('Unknown action', req.action);
+        }
+
+        // Send Response
+        const response: BridgeResponse = {
+            id: req.id,
+            success,
+            data: responseData
+        };
+
+        sourceWindow.postMessage(response, '*');
+        log('res', `Sent data for ${req.id}`);
+    };
+
+    return (
+        <div className="flex h-screen w-full">
+            {/* Left: Device Simulator */}
+            <div className="flex-1 flex flex-col items-center justify-center bg-slate-100 p-8">
+                <div className="relative border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl">
+                    <div className="w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute"></div>
+                    <div className="h-[32px] w-[3px] bg-gray-800 absolute -start-[17px] top-[72px] rounded-s-lg"></div>
+                    <div className="h-[46px] w-[3px] bg-gray-800 absolute -start-[17px] top-[124px] rounded-s-lg"></div>
+                    <div className="h-[46px] w-[3px] bg-gray-800 absolute -start-[17px] top-[178px] rounded-s-lg"></div>
+                    <div className="h-[64px] w-[3px] bg-gray-800 absolute -end-[17px] top-[142px] rounded-e-lg"></div>
+                    <div className="rounded-[2rem] overflow-hidden w-full h-full bg-white relative">
+                        {/* Iframe Content */}
+                        <iframe
+                            ref={iframeRef}
+                            src={widgetUrl}
+                            className="w-full h-full border-0"
+                            title="Widget Simulator"
+                        />
+                    </div>
+                </div>
+                <div className="mt-4 text-center">
+                    <p className="text-slate-400 text-sm">iPhone 14 Pro Simulator</p>
+                    <div className="mt-2 text-xs">
+                        Status: <span className={authStatus === 'authenticated' ? 'text-green-600 font-bold' : 'text-orange-500'}>
+                            {authStatus === 'authenticated' ? 'Logged In' : 'Guest Mode'}
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            {/* Right: Debug Console */}
+            <div className="w-96 bg-white border-l border-slate-200 flex flex-col">
+                <div className="p-4 border-b border-slate-200 bg-slate-50">
+                    <h2 className="font-bold text-slate-700">Bridge Debugger</h2>
+                </div>
+
+                <div className="p-4 border-b border-slate-200">
+                    <label className="text-xs font-bold text-slate-500 uppercase">Widget URL</label>
+                    <input
+                        type="text"
+                        value={widgetUrl}
+                        onChange={e => setWidgetUrl(e.target.value)}
+                        className="w-full mt-1 px-3 py-2 border rounded text-sm font-mono"
+                    />
+                </div>
+
+                <div className="flex-1 overflow-y-auto p-4 space-y-2 bg-slate-900 font-mono text-xs">
+                    {logs.length === 0 && <p className="text-slate-500 italic">Waiting for events...</p>}
+                    {logs.map((l, i) => (
+                        <div key={i} className="flex gap-2">
+                            <span className="text-slate-500">[{l.time}]</span>
+                            <span className={
+                                l.type === 'req' ? 'text-blue-400' :
+                                    l.type === 'res' ? 'text-green-400' : 'text-yellow-400'
+                            }>
+                                {l.type === 'req' ? '→' : l.type === 'res' ? '←' : '•'}
+                            </span>
+                            <span className="text-slate-300 break-all">{l.msg}</span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/simulator/client/src/main.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import SimulatorApp from './SimulatorApp'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <SimulatorApp />
+    </React.StrictMode>,
+)

package/src/simulator/client/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+    plugins: [react()],
+    root: __dirname, // Ensure root is set to this directory
+    build: {
+        outDir: '../../../dist/simulator/client', // Build into the CLI dist folder
+        emptyOutDir: true
+    }
+})

package/src/templates/react-vite-ts/_env.example

@@ -0,0 +1,12 @@
+# ------------------------------------------------------------------------------
+# Configuration Klyb Widget
+# ------------------------------------------------------------------------------
+
+# L'URL de l'API Klyb.
+# Par défaut, la CLI essaiera de se connecter à http://localhost:3000 si non défini.
+# Décommentez la ligne ci-dessous pour forcer l'environnement de Production :
+# KLYB_API_URL=https://api.klyb.co
+
+# Votre clé d'API Développeur Klyb
+# Vous pouvez la générer depuis votre Espace Développeur sur klyb_comu (Onglet "Clés API")
+KLYB_API_KEY=votre_cle_api_secrete_ici

package/src/templates/react-vite-ts/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Klyb Widget</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </body>
+</html>

package/src/templates/react-vite-ts/klyb.json

@@ -0,0 +1,20 @@
+{
+    "name": "My Klyb Widget",
+    "description": "A widget built for Klyb",
+    "version": "0.0.1",
+    "type": "widget",
+    "preview": "preview.png",
+    "permissions": [
+        "read_community_name"
+    ],
+    "config": {
+        "props": [
+            {
+                "name": "title",
+                "type": "string",
+                "label": "Titre du widget",
+                "default": "Hello World"
+            }
+        ]
+    }
+}

package/src/templates/react-vite-ts/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "my-klyb-widget",
+    "private": true,
+    "version": "0.0.1",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "deploy": "klyb deploy --submit",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "@klyb/sdk": "latest"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.66",
+        "@types/react-dom": "^18.2.22",
+        "@vitejs/plugin-react": "^4.2.1",
+        "typescript": "^5.2.2",
+        "vite": "^5.2.0"
+    }
+}

package/src/templates/react-vite-ts/src/App.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+import { bridge } from '@klyb/sdk'
+
+function App() {
+    const [user, setUser] = useState<{ name: string } | null>(null)
+
+    useEffect(() => {
+        // Determine user context via Bridge
+        bridge.getUser().then((u: any) => setUser(u)).catch(() => console.log('Guest mode'))
+    }, [])
+
+    const handleVibrate = () => {
+        bridge.vibrate();
+    }
+
+    return (
+        <div className="w-full h-full min-h-[200px] bg-white rounded-xl p-6 border border-slate-200 flex flex-col items-center justify-center">
+            <h1 className="text-xl font-bold text-slate-800 mb-2">
+                Hello {user ? user.name : 'Guest'}!
+            </h1>
+            <p className="text-slate-500 text-center mb-4">
+                Welcome to your new Klyb Widget.
+            </p>
+
+            <button
+                onClick={handleVibrate}
+                className="px-4 py-2 bg-blue-600 text-white rounded-lg active:bg-blue-700 transition"
+            >
+                Test Vibration
+            </button>
+        </div>
+    )
+}
+
+export default App