@spacemade/ui 0.0.1

package/scripts/spacemade.mjs

@@ -0,0 +1,446 @@
+#!/usr/bin/env node
+
+import fs from 'node:fs'
+import path from 'node:path'
+import { spawnSync } from 'node:child_process'
+import { createRequire } from 'node:module'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+
+const require = createRequire(import.meta.url)
+const packageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+const cwd = process.cwd()
+const [, , command, ...args] = process.argv
+
+const moduleDefinitions = {
+  cms: './defs/cms-definition.mjs',
+  'simple-cms': './defs/simple-cms-definition.mjs',
+  gallery: './defs/gallery-definition.mjs',
+  nft: './defs/nft-definition.mjs',
+  gpu: './defs/gpu-definition.mjs',
+  metaverse: './defs/metaverse-definition.mjs',
+}
+
+function usage() {
+  console.log(`Usage: spacemade <command> [args]
+
+Commands:
+  dev [next args]              Run the Next dev server
+  build [next args]            Build the Next app
+  start [next args]            Start the Next app
+  generate <schema> [--force]  Generate module overlays from a schema
+  help                         Show this help output`)
+}
+
+function runNext(nextCommand, defaultArgs = []) {
+  const nextBin = require.resolve('next/dist/bin/next', {
+    paths: [cwd, packageRoot],
+  })
+  const result = spawnSync(
+    process.execPath,
+    [nextBin, nextCommand, ...defaultArgs, ...args],
+    {
+      cwd,
+      stdio: 'inherit',
+      env: process.env,
+    }
+  )
+
+  process.exit(result.status ?? 1)
+}
+
+function readSchema(schemaPath) {
+  const resolvedPath = path.resolve(cwd, schemaPath)
+
+  if (!fs.existsSync(resolvedPath)) {
+    throw new Error(`Schema not found: ${schemaPath}`)
+  }
+
+  return JSON.parse(fs.readFileSync(resolvedPath, 'utf8'))
+}
+
+function ensureDir(filePath) {
+  fs.mkdirSync(path.dirname(filePath), { recursive: true })
+}
+
+function writeGeneratedFile(relativePath, contents, force) {
+  const filePath = path.join(cwd, relativePath)
+  ensureDir(filePath)
+
+  if (!force && fs.existsSync(filePath)) {
+    console.log(`skip ${relativePath}`)
+    return
+  }
+
+  fs.writeFileSync(filePath, `${contents}\n`, 'utf8')
+  console.log(`write ${relativePath}`)
+}
+
+function copyGeneratedPath(sourcePath, relativePath, force) {
+  const targetPath = path.join(cwd, relativePath)
+
+  if (!fs.existsSync(sourcePath)) {
+    throw new Error(`Required scaffold path is missing: ${sourcePath}`)
+  }
+
+  if (path.resolve(sourcePath) === path.resolve(targetPath)) {
+    return
+  }
+
+  const sourceStats = fs.statSync(sourcePath)
+
+  if (sourceStats.isDirectory()) {
+    for (const entry of fs.readdirSync(sourcePath)) {
+      if (['.git', '.next', 'node_modules'].includes(entry)) {
+        continue
+      }
+
+      copyGeneratedPath(
+        path.join(sourcePath, entry),
+        path.join(relativePath, entry),
+        force
+      )
+    }
+
+    return
+  }
+
+  ensureDir(targetPath)
+
+  if (!force && fs.existsSync(targetPath)) {
+    console.log(`skip ${relativePath}`)
+    return
+  }
+
+  fs.copyFileSync(sourcePath, targetPath)
+  console.log(`write ${relativePath}`)
+}
+
+function resolvePackageRoot(packageName) {
+  try {
+    return path.dirname(require.resolve(`${packageName}/package.json`, {
+      paths: [cwd, packageRoot],
+    }))
+  } catch {
+    throw new Error(`Package "${packageName}" is not installed. Run ./app.sh install before generation.`)
+  }
+}
+
+function createCoreScaffold(schema, force) {
+  const core = schema?.core || {}
+  const includeUi = core.ui !== false
+  const includeApi = core.api !== false
+
+  if (includeUi) {
+    [
+      'next-env.d.ts',
+      'next.config.ts',
+      'tsconfig.json',
+      'middleware.ts',
+      'public',
+      'src',
+    ].forEach((relativePath) => {
+      copyGeneratedPath(path.join(packageRoot, relativePath), relativePath, force)
+    })
+  }
+
+  if (includeApi) {
+    const apiPackageName = schema?.packages?.api || '@spacemade/api'
+    const apiPackageRoot = resolvePackageRoot(apiPackageName)
+    const apiPackageFiles = [
+      '.sequelizerc',
+      'config',
+      'doc',
+      'lib',
+      'migrations',
+      'next-env.d.ts',
+      'next.config.js',
+      'package.json',
+      'pages',
+      'seeders',
+      'tsconfig.json',
+      'types',
+    ]
+
+    apiPackageFiles.forEach((relativePath) => {
+      copyGeneratedPath(
+        path.join(apiPackageRoot, relativePath),
+        path.join('api', relativePath),
+        force
+      )
+    })
+  }
+}
+
+function validateSchema(schema) {
+  const resources = Array.isArray(schema.resources) ? schema.resources : []
+
+  if (resources.length > 0) {
+    throw new Error('Schema resources are not supported by the spacemade CLI yet. Use module overlays for now.')
+  }
+}
+
+function createDeploymentScaffold(schema, force) {
+  const appName = schema?.app?.name || path.basename(cwd) || 'appstudio-app'
+
+  writeGeneratedFile('docker-compose.yml', `services:
+  app:
+    build:
+      context: .
+      dockerfile: devops/docker/Dockerfile.app
+      target: dev
+    command: npm run dev
+    env_file:
+      - .env
+    ports:
+      - "3000:3000"
+    volumes:
+      - .:/app
+      - app_node_modules:/app/node_modules
+    depends_on:
+      - api
+  api:
+    build:
+      context: .
+      dockerfile: devops/docker/Dockerfile.api
+      target: dev
+    command: npm run dev:api
+    env_file:
+      - .env
+    ports:
+      - "3001:3001"
+    volumes:
+      - .:/app
+      - api_node_modules:/app/node_modules
+    depends_on:
+      - mysql
+      - redis
+  mysql:
+    image: mysql:8.4
+    env_file:
+      - .env
+    environment:
+      MYSQL_DATABASE: "\${DB_NAME}"
+      MYSQL_USER: "\${DB_USER}"
+      MYSQL_PASSWORD: "\${DB_PASSWORD}"
+      MYSQL_ROOT_PASSWORD: "\${DB_ROOT_PASSWORD}"
+    ports:
+      - "\${DB_PORT}:3306"
+    volumes:
+      - mysql_data:/var/lib/mysql
+  redis:
+    image: redis:7-alpine
+    ports:
+      - "\${REDIS_PORT}:6379"
+    volumes:
+      - redis_data:/data
+
+volumes:
+  app_node_modules:
+  api_node_modules:
+  mysql_data:
+  redis_data:`, force)
+
+  writeGeneratedFile('devops/docker/Dockerfile.app', `FROM node:20-slim AS base
+
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN if [ -f package-lock.json ]; then npm ci; else npm install; fi
+COPY . .
+
+FROM base AS dev
+EXPOSE 3000
+CMD ["npm", "run", "dev"]
+
+FROM base AS builder
+RUN npm run build
+
+FROM node:20-slim AS prod
+ENV NODE_ENV=production
+WORKDIR /app
+COPY --from=builder /app ./
+EXPOSE 3000
+CMD ["npm", "run", "start"]`, force)
+
+  writeGeneratedFile('devops/docker/Dockerfile.api', `FROM node:20-slim AS base
+
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN if [ -f package-lock.json ]; then npm ci; else npm install; fi
+COPY api/package.json api/package-lock.json* ./api/
+RUN cd api && if [ -f package-lock.json ]; then npm ci; else npm install; fi
+COPY . .
+
+FROM base AS dev
+EXPOSE 3001
+CMD ["npm", "run", "dev:api"]
+
+FROM base AS builder
+RUN npm run build:api
+
+FROM node:20-slim AS prod
+ENV NODE_ENV=production
+WORKDIR /app
+COPY --from=builder /app ./
+EXPOSE 3001
+CMD ["npm", "run", "start:api"]`, force)
+
+  writeGeneratedFile('devops/docker/entrypoint/app-docker-entrypoint.sh', `#!/usr/bin/env sh
+set -e
+exec "$@"`, force)
+
+  writeGeneratedFile('devops/docker/entrypoint/api-docker-entrypoint.sh', `#!/usr/bin/env sh
+set -e
+exec "$@"`, force)
+
+  writeGeneratedFile('devops/cloudformation/app.yml', `AWSTemplateFormatVersion: '2010-09-09'
+Description: App Studio generated application placeholder stack
+
+Parameters:
+  AppName:
+    Type: String
+    Default: ${appName}
+  AppImage:
+    Type: String
+    Default: replace-me
+  ApiImage:
+    Type: String
+    Default: replace-me
+
+Resources:
+  AppStudioPlaceholder:
+    Type: AWS::CloudFormation::WaitConditionHandle
+
+Outputs:
+  AppName:
+    Value: !Ref AppName
+  AppImage:
+    Value: !Ref AppImage
+  ApiImage:
+    Value: !Ref ApiImage`, force)
+
+  writeGeneratedFile('bitbucket-pipelines.yml', `image: atlassian/default-image:5
+
+definitions:
+  services:
+    docker:
+      memory: 3072
+  steps:
+    - step: &build-images
+        name: Build Docker images
+        caches:
+          - docker
+        services:
+          - docker
+        script:
+          - export DOCKER_BUILDKIT=0
+          - docker build --tag "$DOCKER_REPO-app:pull-request" --file ./devops/docker/Dockerfile.app --target prod .
+          - docker build --tag "$DOCKER_REPO-api:pull-request" --file ./devops/docker/Dockerfile.api --target prod .
+    - step: &publish-images
+        name: Publish Docker images
+        caches:
+          - docker
+        services:
+          - docker
+        script:
+          - test -n "$DOCKER_REPO"
+          - test -n "$DOCKER_HUB_USER"
+          - test -n "$DOCKER_HUB_PASSWORD"
+          - export VERSION="\${BITBUCKET_TAG#v}"
+          - echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
+          - docker build --tag "$DOCKER_REPO-app:$VERSION" --tag "$DOCKER_REPO-app:latest" --file ./devops/docker/Dockerfile.app --target prod .
+          - docker build --tag "$DOCKER_REPO-api:$VERSION" --tag "$DOCKER_REPO-api:latest" --file ./devops/docker/Dockerfile.api --target prod .
+          - docker push "$DOCKER_REPO-app:$VERSION"
+          - docker push "$DOCKER_REPO-app:latest"
+          - docker push "$DOCKER_REPO-api:$VERSION"
+          - docker push "$DOCKER_REPO-api:latest"
+    - step: &deploy-cloudformation
+        name: Deploy CloudFormation
+        image:
+          name: amazon/aws-cli:2.15.57
+          entrypoint: [""]
+        script:
+          - test -n "$APP_STACK_NAME"
+          - test -n "$DOCKER_REPO"
+          - export VERSION="\${BITBUCKET_TAG#v}"
+          - aws cloudformation deploy --stack-name "$APP_STACK_NAME" --template-file devops/cloudformation/app.yml --capabilities CAPABILITY_NAMED_IAM --parameter-overrides AppName=${appName} AppImage="$DOCKER_REPO-app:$VERSION" ApiImage="$DOCKER_REPO-api:$VERSION"
+
+pipelines:
+  pull-requests:
+    '**':
+      - step: *build-images
+  tags:
+    v*:
+      - step: *publish-images
+      - step: *deploy-cloudformation`, force)
+}
+
+async function generate() {
+  const schemaPath = args.find((arg) => !arg.startsWith('-'))
+
+  if (!schemaPath) {
+    throw new Error('Missing schema path. Example: spacemade generate ./appstudio.schema.json')
+  }
+
+  const schema = readSchema(schemaPath)
+  const force = args.includes('--force')
+  const modules = Array.isArray(schema.modules) ? schema.modules : []
+
+  validateSchema(schema)
+  createCoreScaffold(schema, force)
+  createDeploymentScaffold(schema, force)
+
+  if (modules.length === 0) {
+    console.log('No module overlays selected. Spacemade packages are ready.')
+    return
+  }
+
+  const { createGenerator } = await import('./crud-scaffold/src/utils/generator-utils.mjs')
+
+  for (const moduleName of modules) {
+    const definitionPath = moduleDefinitions[moduleName]
+
+    if (!definitionPath) {
+      throw new Error(`Unknown module "${moduleName}". Use one of: ${Object.keys(moduleDefinitions).join(', ')}`)
+    }
+
+    const definitionUrl = pathToFileURL(path.join(packageRoot, 'scripts', definitionPath)).href
+    const definitionModule = await import(definitionUrl)
+    const definition = definitionModule.default || definitionModule[`${moduleName}Definition`]
+
+    if (!definition) {
+      throw new Error(`No scaffold definition found for module "${moduleName}"`)
+    }
+
+    createGenerator(definition)
+  }
+}
+
+async function main() {
+  switch (command) {
+    case 'dev':
+      runNext('dev', ['--webpack', '-p', process.env.PORT || '3000', '-H', '0.0.0.0'])
+      break
+    case 'build':
+      runNext('build')
+      break
+    case 'start':
+      runNext('start', ['-p', process.env.PORT || '3000'])
+      break
+    case 'generate':
+      await generate()
+      break
+    case 'help':
+    case '-h':
+    case '--help':
+    case undefined:
+      usage()
+      break
+    default:
+      throw new Error(`Unknown command: ${command}`)
+  }
+}
+
+main().catch((error) => {
+  console.error(error.message)
+  process.exit(1)
+})

package/scripts/test-generate-app.mjs

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+
+import fs from 'node:fs'
+import path from 'node:path'
+import { spawnSync } from 'node:child_process'
+import { fileURLToPath } from 'node:url'
+
+const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+const appsRoot = path.join(repoRoot, 'apps')
+const args = process.argv.slice(2)
+const force = args.includes('--force')
+const nameArgIndex = args.indexOf('--name')
+const appName = nameArgIndex >= 0 && args[nameArgIndex + 1] ? args[nameArgIndex + 1] : 'smoke-app'
+const appRoot = path.join(appsRoot, appName)
+
+function run(command, commandArgs, options = {}) {
+  const result = spawnSync(command, commandArgs, {
+    cwd: options.cwd || repoRoot,
+    stdio: 'inherit',
+    env: {
+      ...process.env,
+      ...options.env,
+    },
+  })
+
+  if (result.status !== 0) {
+    process.exit(result.status || 1)
+  }
+}
+
+if (fs.existsSync(appRoot)) {
+  if (!force) {
+    console.error(`${path.relative(repoRoot, appRoot)} already exists. Re-run with -- --force to replace it.`)
+    process.exit(1)
+  }
+
+  fs.rmSync(appRoot, { recursive: true, force: true })
+}
+
+fs.mkdirSync(appRoot, { recursive: true })
+fs.copyFileSync(path.join(repoRoot, 'app.sh'), path.join(appRoot, 'app.sh'))
+fs.chmodSync(path.join(appRoot, 'app.sh'), 0o755)
+
+run('./app.sh', ['init', '--name', appName], { cwd: appRoot })
+run('./app.sh', ['install'], {
+  cwd: appRoot,
+  env: {
+    SPACEMADE_UI_PATH: repoRoot,
+    SPACEMADE_API_PATH: path.join(repoRoot, 'api'),
+  },
+})
+run('./app.sh', ['generate'], {
+  cwd: appRoot,
+  env: {
+    SPACEMADE_UI_PATH: repoRoot,
+    SPACEMADE_API_PATH: path.join(repoRoot, 'api'),
+  },
+})
+
+console.log(`Generated ${path.relative(repoRoot, appRoot)}`)

package/src/components/Dashboard/DashboardList.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { useRouter } from '@lib/next-router'
+import Button from '@components/common/button/Button'
+
+export const DashboardList = ({
+  isCollapsed,
+  setIsCollapsed,
+}: {
+  isCollapsed: boolean
+  setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>
+}) => {
+  const router = useRouter()
+
+  return (
+    <div className="position-relative h-100">
+      <div className="full-screen-for-app overflow-y-auto custom-scroll-bar pb-6">
+        <ul className="nav flex-column me-1">
+          {/* Logo + Toggle Button */}
+          <li className="d-flex align-items-center justify-content-between w-100 px-3 mb-2" style={{ height: '48px' }}>
+            <span className="fw-bold">Osirax</span>
+            <Button
+              onClick={() => setIsCollapsed((prev) => !prev)}
+              style={{ height: '28px', width: '10px' }}
+              title="Toggle Sidebar"
+              ariaLabel="Toggle Sidebar"
+            >
+              <i className={`bi ${isCollapsed ? 'bi-layout-sidebar-inset' : 'bi-layout-sidebar'} text-dark`} />
+            </Button>
+          </li>
+          {/* Dashboard Item */}
+          <li
+            className="w-100 d-flex align-items-center bg-hover-background rounded-md h-xs-40p ps-3 mb-1 me-1 cursor-pointer"
+            onClick={() => router.push('/dashboard')}
+          >
+            <span className="d-flex align-items-center gap-2 text-dark-900 fw-600">
+              <i className="bi bi-house-door"></i> Console
+            </span>
+          </li>
+
+          {/* Account Section */}
+          <li className="px-3 pt-3 pb-1 text-muted text-uppercase small fw-semibold">
+            Account
+          </li>
+
+          {/* Settings Link */}
+          <li
+            className="w-100 d-flex align-items-center bg-hover-background rounded-md h-xs-40p ps-3 mb-2 me-1 cursor-pointer"
+            onClick={() => router.push('/settings')}
+          >
+            <span className="d-flex align-items-center gap-2 text-dark-900 fw-600">
+              <i className="bi bi-gear"></i> <span>Settings</span>
+            </span>
+          </li>
+
+          {/* Billing Link */}
+          <li
+            className="w-100 d-flex align-items-center bg-hover-background rounded-md h-xs-40p ps-3 mb-2 me-1 cursor-pointer"
+            onClick={() => router.push('/settings/billing')}
+          >
+            <span className="d-flex align-items-center gap-2 text-dark-900 fw-600">
+              <i className="bi bi-wallet"></i> <span>Billings</span>
+            </span>
+          </li>
+
+        </ul>
+      </div>
+    </div>
+  )
+}

package/src/components/Dashboard/dashboardLayout.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { useState } from 'react'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import Button from '@components/common/button/Button'
+import {DashboardList} from '@components/Dashboard/DashboardList' // Assuming this is your sidebar component
+
+export const DashboardLayout = ({
+  title,
+  backUrl,
+  addMaxWidth = true,
+  excludeTopNav = false,
+}: {
+  title: string
+  backUrl?: string
+  addMaxWidth?: boolean
+  excludeTopNav?: boolean
+  children?: React.ReactNode
+}) => {
+  const { user } = useUserAuthContext()
+  const isAuthenticated = !!user?.id
+
+  const [isCollapsed, setIsCollapsed] = useState(false)
+
+  return (
+    <div className={`container-lg ${!excludeTopNav ? 'py-8 py-lg-5 navbar-height' : ''}`}>
+      <div className={`${addMaxWidth ? 'mw-lg-1000p' : ''} mx-auto`}>
+        <div className='row'>
+          {/* Left Column */}
+          {isAuthenticated && (
+            <div className='col-lg-2 pe-lg-0'>
+              <div className='d-none d-lg-block'>
+                {/* Render the DashboardList sidebar */}
+                <DashboardList isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />
+              </div>
+
+              {/* Mobile View */}
+              <div className='d-lg-none position-fixed top-0 left-0 right-0 mt-5 h-xs-60p h-md-70p bg-background z-index-120 d-flex align-items-center px-3'>
+                <Button color='background' className='no-min-size p-0 mt-2 mt-md-4'>
+                  <span className='bi bi-list fs-4 pe-2'></span>
+                  <span>Console</span>
+                </Button>
+              </div>
+            </div>
+          )}
+          {/* Right Column */}
+          <div className={`col-lg-10 ps-0 ${isAuthenticated ? 'border-start' : ''}`}>
+            <div className="dashboard-content">
+              <h3>{title}</h3>
+              <p>Console content goes here...</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}