@reallukemanning/folio 1.0.0

package/src/cli-components/ProjectGrid/index.ts

@@ -0,0 +1,2 @@
+export { ProjectGrid } from './ProjectGrid.js'
+export type { FolioProject } from '../types.js'

package/src/cli-components/ProjectList/ProjectList.tsx

@@ -0,0 +1,6 @@
+function ProjectList({ children }: { children: React.ReactNode }) {
+  if (!children) return null
+  return <div data-folio-list>{children}</div>
+}
+
+export { ProjectList }

package/src/cli-components/ProjectList/index.ts

@@ -0,0 +1,2 @@
+export { ProjectList } from './ProjectList.js'
+export type { FolioProject } from '../types.js'

package/src/cli-components/ProjectView/ProjectView.tsx

@@ -0,0 +1,117 @@
+import type { FolioProject } from '../types.js'
+
+function ProjectView({
+  project,
+  onBack,
+  children
+}: {
+  project: FolioProject
+  onBack?: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <div data-folio-view>
+      {onBack && <button onClick={onBack}>Back</button>}
+      <h2>{project.name}</h2>
+      {children}
+    </div>
+  )
+}
+
+ProjectView.Section = function ProjectViewSection({
+  project,
+  name
+}: {
+  project: FolioProject
+  name: string
+}) {
+  const sectionData = project[name as keyof FolioProject]
+
+  if (!sectionData) return null
+
+  return (
+    <div data-folio-view-section data-folio-view-section-name={name}>
+      {typeof sectionData === 'string' && <>{sectionData}</>}
+      {Array.isArray(sectionData) &&
+        sectionData.map((item, index) => {
+          if (typeof item === 'string') {
+            return <span key={index} data-folio-tag>{item}</span>
+          }
+          if ('type' in item && 'text' in item) {
+            const struggle = item as { type: string; text: string }
+            return (
+              <div key={index} data-folio-struggle data-folio-struggle-type={struggle.type}>
+                {struggle.text}
+              </div>
+            )
+          }
+          if ('date' in item && ('note' in item || 'title' in item)) {
+            if ('note' in item) {
+              const timeline = item as { date: string; note: string }
+              return (
+                <div key={index}>
+                  <span data-folio-timeline-date>{timeline.date}</span>
+                  <span data-folio-timeline-note>{timeline.note}</span>
+                </div>
+              )
+            }
+            if ('title' in item) {
+              const post = item as { title: string; date: string; url?: string }
+              return (
+                <div key={index}>
+                  <span data-folio-post-title>{post.title}</span>
+                  <span data-folio-post-date>{post.date}</span>
+                  {post.url && (
+                    <a href={post.url} data-folio-post-link>
+                      Link
+                    </a>
+                  )}
+                </div>
+              )
+            }
+          }
+          return null
+        })}
+    </div>
+  )
+}
+
+ProjectView.Links = function ProjectViewLinks({ project }: { project: FolioProject }) {
+  const links = project.links
+
+  if (!links.github && !links.live && !links.npm && !links.appStore && !links.playStore) {
+    return null
+  }
+
+  return (
+    <div data-folio-view-links>
+      {links.github && (
+        <a href={links.github} data-folio-link data-folio-link-type="github">
+          GitHub
+        </a>
+      )}
+      {links.live && (
+        <a href={links.live} data-folio-link data-folio-link-type="live">
+          Live
+        </a>
+      )}
+      {links.npm && (
+        <a href={links.npm} data-folio-link data-folio-link-type="npm">
+          npm
+        </a>
+      )}
+      {links.appStore && (
+        <a href={links.appStore} data-folio-link data-folio-link-type="app-store">
+          App Store
+        </a>
+      )}
+      {links.playStore && (
+        <a href={links.playStore} data-folio-link data-folio-link-type="play-store">
+          Play Store
+        </a>
+      )}
+    </div>
+  )
+}
+
+export { ProjectView }

package/src/cli-components/ProjectView/index.ts

@@ -0,0 +1,2 @@
+export { ProjectView } from './ProjectView.js'
+export type { FolioProject } from '../types.js'

package/src/cli-components/types.ts

@@ -0,0 +1,58 @@
+export type ProjectType = 'github' | 'manual' | 'npm' | 'product-hunt' | 'hybrid'
+
+export type ProjectStatus = 'active' | 'shipped' | 'in-progress' | 'coming-soon' | 'archived' | 'for-sale'
+
+export interface ProjectStruggle {
+  type: 'warn' | 'error'
+  text: string
+}
+
+export interface ProjectTimelineEntry {
+  date: string
+  note: string
+}
+
+export interface ProjectPost {
+  title: string
+  date: string
+  url?: string
+}
+
+export interface ProjectLinks {
+  github?: string
+  live?: string
+  npm?: string
+  appStore?: string
+  playStore?: string
+  productHunt?: string
+}
+
+export interface ProjectStats {
+  stars?: number
+  forks?: number
+  downloads?: string
+  version?: string
+  upvotes?: number
+  comments?: number
+}
+
+export interface FolioProject {
+  id: string
+  type: ProjectType
+  status: ProjectStatus
+  featured: boolean
+  name: string
+  tagline: string
+  description: string
+  background: string | null
+  why: string | null
+  image: string | null
+  struggles: ProjectStruggle[]
+  timeline: ProjectTimelineEntry[]
+  posts: ProjectPost[]
+  stack: string[]
+  links: ProjectLinks
+  stats: ProjectStats | null
+  language: string | null
+  languageColor: string | null
+}

package/src/cli-types.ts

@@ -0,0 +1,58 @@
+export type ProjectType = 'github' | 'manual' | 'npm' | 'product-hunt' | 'hybrid'
+
+export type ProjectStatus = 'active' | 'shipped' | 'in-progress' | 'coming-soon' | 'archived' | 'for-sale'
+
+export interface ProjectStruggle {
+  type: 'warn' | 'error'
+  text: string
+}
+
+export interface ProjectTimelineEntry {
+  date: string
+  note: string
+}
+
+export interface ProjectPost {
+  title: string
+  date: string
+  url?: string
+}
+
+export interface ProjectLinks {
+  github?: string
+  live?: string
+  npm?: string
+  appStore?: string
+  playStore?: string
+  productHunt?: string
+}
+
+export interface ProjectStats {
+  stars?: number
+  forks?: number
+  downloads?: string
+  version?: string
+  upvotes?: number
+  comments?: number
+}
+
+export interface FolioProject {
+  id: string
+  type: ProjectType
+  status: ProjectStatus
+  featured: boolean
+  name: string
+  tagline: string
+  description: string
+  background: string | null
+  why: string | null
+  image: string | null
+  struggles: ProjectStruggle[]
+  timeline: ProjectTimelineEntry[]
+  posts: ProjectPost[]
+  stack: string[]
+  links: ProjectLinks
+  stats: ProjectStats | null
+  language: string | null
+  languageColor: string | null
+}

package/src/cli.ts

@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander'
+import { init } from './commands/init.js'
+import { add } from './commands/add.js'
+
+const program = new Command()
+
+program
+  .name('folio')
+  .description('CLI tool for Folio project showcase pages')
+  .version('0.0.0')
+
+program
+  .command('init')
+  .description('Initialize a new Folio project')
+  .option('--github', 'Auto-detect projects from GitHub repos')
+  .action(init)
+
+program
+  .command('add')
+  .description('Add a Folio component to your project')
+  .argument('<component>', 'Component name (e.g., project-card, project-view)')
+  .action(add)
+
+program.parse()

package/src/commands/add.ts

@@ -0,0 +1,191 @@
+import { mkdir, access, copyFile, readdir } from 'node:fs/promises'
+import { resolve, dirname } from 'node:path'
+import inquirer from 'inquirer'
+import chalk from 'chalk'
+import { fileURLToPath } from 'node:url'
+
+interface ComponentMapping {
+  [key: string]: {
+    sourcePath: string
+    destName: string
+  }
+}
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const COMPONENTS: ComponentMapping = {
+  'project-card': {
+    sourcePath: resolve(__dirname, '../cli-components/ProjectCard'),
+    destName: 'ProjectCard',
+  },
+  'project-view': {
+    sourcePath: resolve(__dirname, '../cli-components/ProjectView'),
+    destName: 'ProjectView',
+  },
+  'project-grid': {
+    sourcePath: resolve(__dirname, '../cli-components/ProjectGrid'),
+    destName: 'ProjectGrid',
+  },
+  'project-list': {
+    sourcePath: resolve(__dirname, '../cli-components/ProjectList'),
+    destName: 'ProjectList',
+  },
+  'featured-project': {
+    sourcePath: resolve(__dirname, '../cli-components/FeaturedProject'),
+    destName: 'FeaturedProject',
+  },
+}
+
+export async function add(componentName: string): Promise<void> {
+  const workingDir = process.cwd()
+  const component = COMPONENTS[componentName]
+
+  if (!component) {
+    console.error(chalk.red(`✖ Component "${componentName}" not found`))
+    console.log()
+    console.log(chalk.bold('Available components:'))
+    Object.keys(COMPONENTS).forEach((name) => {
+      console.log(chalk.gray(`  - ${name}`))
+    })
+    console.log()
+    console.log(chalk.gray('Usage: npx folio add <component-name>'))
+    process.exit(1)
+  }
+
+  const destDir = resolve(workingDir, 'components', 'folio', component.destName)
+  const folioDir = resolve(workingDir, 'components', 'folio')
+
+  console.log(chalk.bold(`📦 Adding ${componentName}...`))
+  console.log()
+
+  try {
+    const sourceFiles = await getSourceFiles(component.sourcePath)
+
+    if (sourceFiles.length === 0) {
+      console.error(chalk.red(`✖ No files found for ${componentName}`))
+      console.error(chalk.gray('  Try reinstalling @folio/cli'))
+      process.exit(1)
+    }
+
+    const existingFiles = await checkExistingFiles(destDir, sourceFiles)
+
+    if (existingFiles.length > 0) {
+      console.log(chalk.yellow(`⚠ Found ${existingFiles.length} existing file(s):`))
+      existingFiles.forEach((file) => {
+        console.log(chalk.gray(`  - ${file}`))
+      })
+      console.log()
+
+      const { overwrite } = await inquirer.prompt([
+        {
+          type: 'confirm',
+          name: 'overwrite',
+          message: 'Overwrite existing files?',
+          default: false,
+        },
+      ])
+
+      if (!overwrite) {
+        console.log(chalk.yellow('✖ Add cancelled.'))
+        return
+      }
+    }
+
+    await createDirectory(destDir)
+    await copyFiles(sourceFiles, destDir)
+
+    const typesSource = resolve(__dirname, '../cli-components/types.ts')
+    const typesDest = resolve(folioDir, 'types.ts')
+    const typesExist = await checkTypeFileExists(typesDest)
+
+    if (!typesExist) {
+      await copyFile(typesSource, typesDest)
+      console.log(chalk.gray('  ✓ Added types.ts'))
+    }
+
+    console.log(chalk.green(`✓ ${componentName} added successfully`))
+    console.log()
+    console.log(chalk.bold('Import usage:'))
+    console.log(chalk.gray(`  import { ${component.destName} } from './components/folio/${component.destName}'`))
+  } catch (error) {
+    if (error instanceof Error && 'code' in error) {
+      if (error.code === 'EACCES') {
+        console.error(chalk.red(`✖ Permission denied`))
+        console.error(chalk.gray(`  Cannot write to ${destDir}`))
+        console.error(chalk.gray('  Check file permissions and try again.'))
+        process.exit(1)
+      } else if (error.code === 'ENOENT') {
+        console.error(chalk.red(`✖ Source files not found`))
+        console.error(chalk.gray('  Try reinstalling @folio/cli'))
+        process.exit(1)
+      }
+    }
+
+    console.error(chalk.red('✖ Failed to add component'))
+    console.error(chalk.gray(`  ${error instanceof Error ? error.message : 'Unknown error'}`))
+    process.exit(1)
+  }
+}
+
+async function getSourceFiles(sourcePath: string): Promise<string[]> {
+  try {
+    const files = await readdir(sourcePath)
+    const filePaths = files
+      .filter((file) => file.endsWith('.tsx') || file.endsWith('.ts'))
+      .map((file) => resolve(sourcePath, file))
+    return filePaths
+  } catch {
+    return []
+  }
+}
+
+async function checkExistingFiles(destDir: string, sourceFiles: string[]): Promise<string[]> {
+  try {
+    await access(destDir)
+  } catch {
+    return []
+  }
+
+  const existing: string[] = []
+
+  for (const sourceFile of sourceFiles) {
+    const fileName = sourceFile.split('/').pop() as string
+    const destPath = resolve(destDir, fileName)
+
+    try {
+      await access(destPath)
+      existing.push(fileName)
+    } catch {
+    }
+  }
+
+  return existing
+}
+
+async function checkTypeFileExists(filePath: string): Promise<boolean> {
+  try {
+    await access(filePath)
+    return true
+  } catch {
+    return false
+  }
+}
+
+async function createDirectory(dirPath: string): Promise<void> {
+  try {
+    await mkdir(dirPath, { recursive: true })
+  } catch (error) {
+    if (error instanceof Error && 'code' in error && error.code !== 'EEXIST') {
+      throw error
+    }
+  }
+}
+
+async function copyFiles(sourceFiles: string[], destDir: string): Promise<void> {
+  for (const sourceFile of sourceFiles) {
+    const fileName = sourceFile.split('/').pop() as string
+    const destPath = resolve(destDir, fileName)
+    await copyFile(sourceFile, destPath)
+  }
+}