stoix 0.1.0

package/template/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "stoix-app",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development tsx server/server.ts",
+    "build": "tsc --noEmit && vite build && tsc -p tsconfig.server.json",
+    "start": "cross-env NODE_ENV=production node dist/server/server/server.js",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.7",
+    "express": "^4.18.2",
+    "helmet": "^7.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.17",
+    "@types/express": "^4.17.21",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "cross-env": "^7.0.3",
+    "tsx": "^4.7.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12"
+  }
+}

package/template/pages/index.tsx

@@ -0,0 +1,61 @@
+import { useState, useEffect } from 'react';
+
+interface StatusCheck {
+  react: boolean;
+  api: boolean;
+}
+
+function HomePage() {
+  const [status, setStatus] = useState<StatusCheck>({ react: true, api: false });
+
+  useEffect(() => {
+    fetch('/api/example')
+      .then((res) => res.json())
+      .then(() => setStatus((s) => ({ ...s, api: true })))
+      .catch(() => setStatus((s) => ({ ...s, api: false })));
+  }, []);
+
+  return (
+    <div className="stoix-page">
+      <header className="stoix-hero">
+        <h1 className="stoix-title">Stoix</h1>
+        <p className="stoix-subtitle">
+          A disciplined TypeScript framework built on React and Express.
+        </p>
+      </header>
+
+      <div className="stoix-divider" />
+
+      <section className="stoix-status">
+        <h2 className="stoix-section-heading">System Status</h2>
+        <div className="stoix-status-grid">
+          <div className="stoix-status-item">
+            <span className="stoix-status-label">React Rendering</span>
+            <span className={`stoix-status-value ${status.react ? 'ok' : ''}`}>
+              {status.react ? '✓' : '—'}
+            </span>
+          </div>
+          <div className="stoix-status-item">
+            <span className="stoix-status-label">API Connected</span>
+            <span className={`stoix-status-value ${status.api ? 'ok' : ''}`}>
+              {status.api ? '✓' : '—'}
+            </span>
+          </div>
+        </div>
+      </section>
+
+      <div className="stoix-divider" />
+
+      <blockquote className="stoix-quote">
+        <p>
+          "If it is not right, do not do it; if it is not true, do not say it."
+        </p>
+        <cite>— Marcus Aurelius</cite>
+      </blockquote>
+
+      <p className="stoix-principle">Structure before scale.</p>
+    </div>
+  );
+}
+
+export default HomePage;

package/template/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="16" fill="#111111"/>
+  <text x="50" y="68" font-family="Georgia, 'Times New Roman', serif" font-size="52" font-weight="400" fill="#e5e5e5" text-anchor="middle" letter-spacing="2">S</text>
+</svg>

package/template/server/routes/example.ts

@@ -0,0 +1,28 @@
+import { Router, type Request, type Response } from 'express';
+
+const router = Router();
+
+/**
+ * GET /api/example
+ * A sample API route to demonstrate Stoix auto-loading.
+ *
+ * Add more routes in server/routes/ — each file auto-mounts
+ * at /api/<filename>.
+ */
+router.get('/', (_req: Request, res: Response) => {
+  res.json({
+    message: 'Hello from Stoix!',
+    framework: 'Stoix v0.1',
+    timestamp: new Date().toISOString(),
+  });
+});
+
+/**
+ * GET /api/example/health
+ * A simple health check endpoint.
+ */
+router.get('/health', (_req: Request, res: Response) => {
+  res.json({ status: 'ok' });
+});
+
+export default router;

package/template/server/server.ts

@@ -0,0 +1,78 @@
+import 'dotenv/config';
+import express, { type Request, type Response, type NextFunction } from 'express';
+import helmet from 'helmet';
+import cors from 'cors';
+import path from 'node:path';
+import fs from 'node:fs';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import config from '../stoix.config.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const isProduction = process.env.NODE_ENV === 'production';
+
+function getRouteFiles(dir: string): string[] {
+  const files: string[] = [];
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...getRouteFiles(fullPath));
+      continue;
+    }
+
+    const isRouteModule = /\.(ts|js)$/.test(entry.name) && !entry.name.includes('.d.');
+    if (isRouteModule) files.push(fullPath);
+  }
+  return files;
+}
+
+async function start() {
+  const app = express();
+  const port = Number(process.env.PORT) || config.port;
+
+  app.use(helmet(isProduction ? undefined : { contentSecurityPolicy: false }));
+  if (config.server.cors) app.use(cors({ origin: config.server.cors }));
+  app.use(express.json());
+  app.use(express.urlencoded({ extended: true }));
+
+  // Auto-mount route files in server/routes recursively at /api/<path-to-file>.
+  const routesDir = path.join(__dirname, 'routes');
+  if (fs.existsSync(routesDir)) {
+    for (const filePath of getRouteFiles(routesDir).sort()) {
+      const relativeFilePath = path.relative(routesDir, filePath);
+      const routeFromFile = relativeFilePath
+        .replace(/\.(ts|js)$/, '')
+        .split(path.sep)
+        .join('/')
+        .replace(/\/index$/, '');
+      const routePath = routeFromFile ? `${config.server.apiPrefix}/${routeFromFile}` : config.server.apiPrefix;
+
+      const { default: router } = await import(pathToFileURL(filePath).href);
+      app.use(routePath, router);
+    }
+  }
+
+  app.use(config.server.apiPrefix, (_req: Request, res: Response) => {
+    res.status(404).json({ error: 'Not Found' });
+  });
+
+  if (isProduction) {
+    const dist = path.join(process.cwd(), 'dist', 'client');
+    app.use(express.static(dist));
+    app.get('*', (_req: Request, res: Response) => res.sendFile(path.join(dist, 'index.html')));
+  } else {
+    const { createServer } = await import('vite');
+    app.use((await createServer({ server: { middlewareMode: true }, appType: 'spa' })).middlewares);
+  }
+
+  app.use((err: Error & { status?: number }, _req: Request, res: Response, _next: NextFunction) => {
+    res.status(err.status || 500).json({ error: err.message });
+  });
+
+  const server = app.listen(port, () => console.log(`Stoix running on http://localhost:${port}`));
+
+  const shutdown = () => server.close(() => process.exit(0));
+  process.on('SIGTERM', shutdown);
+  process.on('SIGINT', shutdown);
+}
+
+start();

package/template/src/App.tsx

@@ -0,0 +1,18 @@
+import HomePage from '../pages/index';
+
+function App() {
+  return (
+    <div className="stoix-app">
+      <main className="stoix-main">
+        <HomePage />
+      </main>
+
+      <footer className="stoix-footer">
+        <div className="stoix-footer-line" />
+        <p>Stoix v0.1</p>
+      </footer>
+    </div>
+  );
+}
+
+export default App;

package/template/src/main.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles.css';
+
+const rootElement = document.getElementById('root');
+
+if (!rootElement) {
+  throw new Error('Root element not found. Make sure <div id="root"></div> exists in index.html.');
+}
+
+// Client-side rendering (SSR-ready: swap with hydrateRoot for SSR)
+ReactDOM.createRoot(rootElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/template/src/styles.css

@@ -0,0 +1,198 @@
+/* ── Stoix ── Discipline over decoration ────────── */
+
+:root {
+  --stoix-bg: #111111;
+  --stoix-surface: #1a1a1a;
+  --stoix-border: #333333;
+  --stoix-text: #ffffff;
+  --stoix-text-muted: #888888;
+  --stoix-marble: #e5e5e5;
+  --stoix-stone: #888888;
+  --stoix-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --stoix-font-heading: Georgia, 'Times New Roman', serif;
+  --stoix-mono: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--stoix-font-body);
+  background-color: var(--stoix-bg);
+  color: var(--stoix-text);
+  line-height: 1.7;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: var(--stoix-marble);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+a:hover {
+  color: var(--stoix-text);
+}
+
+/* ── Layout ──────────────────────────────────────── */
+
+.stoix-app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.stoix-main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 2rem;
+}
+
+/* ── Page ────────────────────────────────────────── */
+
+.stoix-page {
+  max-width: 600px;
+  width: 100%;
+  text-align: center;
+}
+
+/* ── Hero ────────────────────────────────────────── */
+
+.stoix-hero {
+  padding: 2rem 0;
+}
+
+.stoix-title {
+  font-family: var(--stoix-font-heading);
+  font-size: 3.5rem;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  color: var(--stoix-text);
+  margin-bottom: 1.25rem;
+  text-transform: uppercase;
+}
+
+.stoix-subtitle {
+  font-size: 1rem;
+  color: var(--stoix-text-muted);
+  font-weight: 400;
+  line-height: 1.6;
+  max-width: 440px;
+  margin: 0 auto;
+}
+
+/* ── Divider (temple foundation line) ────────────── */
+
+.stoix-divider {
+  width: 80px;
+  height: 1px;
+  background: var(--stoix-border);
+  margin: 2.5rem auto;
+}
+
+/* ── System Status ───────────────────────────────── */
+
+.stoix-section-heading {
+  font-family: var(--stoix-font-body);
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: var(--stoix-text-muted);
+  margin-bottom: 1.25rem;
+}
+
+.stoix-status-grid {
+  display: flex;
+  justify-content: center;
+  gap: 3rem;
+}
+
+.stoix-status-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.stoix-status-label {
+  font-size: 0.8rem;
+  color: var(--stoix-text-muted);
+  letter-spacing: 0.04em;
+}
+
+.stoix-status-value {
+  font-size: 1rem;
+  color: var(--stoix-text-muted);
+  font-family: var(--stoix-mono);
+}
+
+.stoix-status-value.ok {
+  color: var(--stoix-marble);
+}
+
+/* ── Quote ───────────────────────────────────────── */
+
+.stoix-quote {
+  padding: 0;
+  border: none;
+  margin: 0 auto;
+  max-width: 480px;
+}
+
+.stoix-quote p {
+  font-family: var(--stoix-font-heading);
+  font-size: 1.05rem;
+  font-style: italic;
+  color: var(--stoix-marble);
+  line-height: 1.8;
+  margin-bottom: 0.75rem;
+}
+
+.stoix-quote cite {
+  font-family: var(--stoix-font-body);
+  font-size: 0.8rem;
+  font-style: normal;
+  color: var(--stoix-text-muted);
+  letter-spacing: 0.05em;
+}
+
+/* ── Principle ───────────────────────────────────── */
+
+.stoix-principle {
+  margin-top: 2.5rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--stoix-stone);
+}
+
+/* ── Footer ──────────────────────────────────────── */
+
+.stoix-footer {
+  text-align: center;
+  padding: 2rem;
+}
+
+.stoix-footer-line {
+  width: 40px;
+  height: 1px;
+  background: var(--stoix-border);
+  margin: 0 auto 1rem;
+}
+
+.stoix-footer p {
+  font-size: 0.75rem;
+  color: var(--stoix-text-muted);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}

package/template/stoix.config.ts

@@ -0,0 +1,19 @@
+export interface StoixConfig {
+  port: number;
+  framework: 'react';
+  server: {
+    apiPrefix: string;
+    cors: string | string[] | false;
+  };
+}
+
+const config: StoixConfig = {
+  port: 3000,
+  framework: 'react',
+  server: {
+    apiPrefix: '/api',
+    cors: false,
+  },
+};
+
+export default config;

package/template/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "outDir": "dist",
+    "rootDir": ".",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "src",
+    "pages",
+    "server",
+    "stoix.config.ts",
+    "vite.config.ts",
+    "vite-env.d.ts"
+  ],
+  "exclude": ["node_modules", "dist"]
+}

package/template/tsconfig.server.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "outDir": "dist/server",
+    "rootDir": "."
+  },
+  "include": ["server", "stoix.config.ts"],
+  "exclude": ["node_modules", "dist"]
+}

package/template/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+
+export default defineConfig({
+  plugins: [react()],
+  root: '.',
+  publicDir: 'public',
+  build: {
+    outDir: 'dist/client',
+    emptyOutDir: true,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, '.'),
+    },
+  },
+});