@reallukemanning/folio 1.0.0

package/src/components/ProjectView/ProjectView.test.tsx

@@ -0,0 +1,341 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { render, screen, cleanup } from '@testing-library/react'
+import { ProjectView } from './ProjectView'
+import type { FolioProject } from '../../types'
+
+afterEach(() => {
+  cleanup()
+})
+
+const createProject = (overrides: Partial<FolioProject> = {}): FolioProject => ({
+  id: 'test-project',
+  type: 'github',
+  status: 'active',
+  featured: false,
+  name: 'Test Project',
+  tagline: 'A test project',
+  description: 'This is a test project description',
+  background: 'This is the background story of the project.',
+  why: 'Why I built this project.',
+  image: null,
+  struggles: [
+    { type: 'warn', text: 'First challenge faced' },
+    { type: 'error', text: 'Critical issue encountered' },
+  ],
+  timeline: [
+    { date: '2024-01-01', note: 'Project started' },
+    { date: '2024-06-01', note: 'First release' },
+  ],
+  posts: [
+    { title: 'Announcement Post', date: '2024-02-01', url: 'https://blog.com/post1' },
+    { title: 'Update Post', date: '2024-07-01' },
+  ],
+  stack: ['React', 'TypeScript', 'Node.js'],
+  links: {
+    github: 'https://github.com/test/project',
+    live: 'https://test-project.com',
+  },
+  stats: {
+    stars: 100,
+    forks: 20,
+  },
+  language: 'TypeScript',
+  languageColor: '#3178c6',
+  createdAt: '2024-01-01',
+  updatedAt: '2024-06-01',
+  ...overrides,
+})
+
+describe('ProjectView', () => {
+  it('renders with project sections displaying correct content', () => {
+    const project = createProject()
+
+    const { container } = render(
+      <ProjectView project={project}>
+        <ProjectView.Section project={project} name="background" />
+        <ProjectView.Section project={project} name="why" />
+      </ProjectView>
+    )
+
+    expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent('Test Project')
+    expect(container.querySelector('[data-folio-view-section-name="background"]')).toHaveTextContent(/This is the background story/)
+    expect(screen.getByText('Why I built this project.')).toBeInTheDocument()
+  })
+
+  it('renders back button when onBack is provided', () => {
+    const project = createProject()
+    const onBack = () => {}
+
+    render(
+      <ProjectView project={project} onBack={onBack}>
+        <span>Content</span>
+      </ProjectView>
+    )
+
+    expect(screen.getByRole('button', { name: 'Back' })).toBeInTheDocument()
+  })
+
+  it('does not render back button when onBack is not provided', () => {
+    const project = createProject()
+
+    const { container } = render(
+      <ProjectView project={project}>
+        <span>Content</span>
+      </ProjectView>
+    )
+
+    expect(container.querySelector('button')).not.toBeInTheDocument()
+  })
+})
+
+describe('ProjectView sections conditional rendering', () => {
+  it('does not render section when data is null', () => {
+    const project = createProject({ background: null })
+
+    const { container } = render(<ProjectView.Section project={project} name="background" />)
+
+    expect(container.querySelector('[data-folio-view-section]')).not.toBeInTheDocument()
+  })
+
+  it('does not render section when data is empty string', () => {
+    const project = createProject({ background: '' })
+
+    const { container } = render(<ProjectView.Section project={project} name="background" />)
+
+    expect(container.querySelector('[data-folio-view-section]')).not.toBeInTheDocument()
+  })
+
+  it('renders empty section wrapper when data is empty array', () => {
+    const project = createProject({ struggles: [] })
+
+    const { container } = render(<ProjectView.Section project={project} name="struggles" />)
+
+    expect(container.querySelector('[data-folio-view-section]')).toBeInTheDocument()
+    expect(container.querySelector('[data-folio-struggle]')).not.toBeInTheDocument()
+  })
+
+  it('renders background section when present', () => {
+    const project = createProject({ background: 'Background info' })
+
+    const { container } = render(<ProjectView.Section project={project} name="background" />)
+
+    expect(container.querySelector('[data-folio-view-section]')).toBeInTheDocument()
+    expect(screen.getByText('Background info')).toBeInTheDocument()
+  })
+
+  it('renders why section when present', () => {
+    const project = createProject({ why: 'Why this matters' })
+
+    const { container } = render(<ProjectView.Section project={project} name="why" />)
+
+    expect(container.querySelector('[data-folio-view-section]')).toBeInTheDocument()
+    expect(screen.getByText('Why this matters')).toBeInTheDocument()
+  })
+
+  it('renders struggles with correct attributes', () => {
+    const project = createProject()
+
+    const { container } = render(<ProjectView.Section project={project} name="struggles" />)
+
+    expect(container.querySelectorAll('[data-folio-struggle]')).toHaveLength(2)
+    
+    const warnStruggle = container.querySelector('[data-folio-struggle-type="warn"]')
+    expect(warnStruggle).toBeInTheDocument()
+    expect(warnStruggle).toHaveTextContent('First challenge faced')
+
+    const errorStruggle = container.querySelector('[data-folio-struggle-type="error"]')
+    expect(errorStruggle).toBeInTheDocument()
+    expect(errorStruggle).toHaveTextContent('Critical issue encountered')
+  })
+
+  it('renders timeline with correct attributes', () => {
+    const project = createProject()
+
+    const { container } = render(<ProjectView.Section project={project} name="timeline" />)
+
+    expect(container.querySelectorAll('[data-folio-timeline-date]')).toHaveLength(2)
+    expect(container.querySelectorAll('[data-folio-timeline-note]')).toHaveLength(2)
+    expect(screen.getByText('2024-01-01')).toBeInTheDocument()
+    expect(screen.getByText('Project started')).toBeInTheDocument()
+  })
+
+  it('renders posts with correct attributes', () => {
+    const project = createProject()
+
+    const { container } = render(<ProjectView.Section project={project} name="posts" />)
+
+    expect(container.querySelectorAll('[data-folio-post-title]')).toHaveLength(2)
+    expect(container.querySelectorAll('[data-folio-post-date]')).toHaveLength(2)
+    
+    expect(screen.getByText('Announcement Post')).toBeInTheDocument()
+
+    const postLink = container.querySelector('[data-folio-post-link]')
+    expect(postLink).toBeInTheDocument()
+    expect(postLink).toHaveAttribute('href', 'https://blog.com/post1')
+  })
+
+  it('renders posts without url without link', () => {
+    const project = createProject({
+      posts: [{ title: 'No URL Post', date: '2024-01-01' }]
+    })
+
+    const { container } = render(<ProjectView.Section project={project} name="posts" />)
+
+    expect(container.querySelector('[data-folio-post-link]')).not.toBeInTheDocument()
+    expect(screen.getByText('No URL Post')).toBeInTheDocument()
+  })
+
+  it('renders stack with tag attributes', () => {
+    const project = createProject()
+
+    const { container } = render(<ProjectView.Section project={project} name="stack" />)
+
+    expect(container.querySelectorAll('[data-folio-tag]')).toHaveLength(3)
+  })
+})
+
+describe('ProjectView Links', () => {
+  it('renders links when present', () => {
+    const project = createProject()
+
+    const { container } = render(<ProjectView.Links project={project} />)
+
+    expect(container.querySelector('[data-folio-view-links]')).toBeInTheDocument()
+    expect(container.querySelector('[data-folio-link-type="github"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-folio-link-type="live"]')).toBeInTheDocument()
+  })
+
+  it('does not render when no links', () => {
+    const project = createProject({ links: {} })
+
+    const { container } = render(<ProjectView.Links project={project} />)
+
+    expect(container.querySelector('[data-folio-view-links]')).not.toBeInTheDocument()
+  })
+
+  it('renders app store link', () => {
+    const project = createProject({
+      links: { appStore: 'https://apps.apple.com/app/test' }
+    })
+
+    const { container } = render(<ProjectView.Links project={project} />)
+
+    const link = container.querySelector('[data-folio-link-type="app-store"]')
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveAttribute('href', 'https://apps.apple.com/app/test')
+  })
+
+  it('renders play store link', () => {
+    const project = createProject({
+      links: { playStore: 'https://play.google.com/store/apps/test' }
+    })
+
+    const { container } = render(<ProjectView.Links project={project} />)
+
+    const link = container.querySelector('[data-folio-link-type="play-store"]')
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveAttribute('href', 'https://play.google.com/store/apps/test')
+  })
+
+  it('renders product hunt link', () => {
+    const project = createProject({
+      links: { productHunt: 'https://producthunt.com/posts/test' }
+    })
+
+    const { container } = render(<ProjectView.Links project={project} />)
+
+    const link = container.querySelector('[data-folio-link-type="product-hunt"]')
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveAttribute('href', 'https://producthunt.com/posts/test')
+  })
+})
+
+describe('ProjectView Stats', () => {
+  it('renders stats when present', () => {
+    const project = createProject()
+
+    const { container } = render(<ProjectView.Stats project={project} />)
+
+    expect(container.querySelector('[data-folio-view-stats]')).toBeInTheDocument()
+    expect(screen.getByText('100 stars')).toBeInTheDocument()
+    expect(screen.getByText('20 forks')).toBeInTheDocument()
+  })
+
+  it('does not render when stats is null', () => {
+    const project = createProject({ stats: null })
+
+    const { container } = render(<ProjectView.Stats project={project} />)
+
+    expect(container.querySelector('[data-folio-view-stats]')).not.toBeInTheDocument()
+  })
+
+  it('does not render when stats object has no values', () => {
+    const project = createProject({ stats: {} })
+
+    const { container } = render(<ProjectView.Stats project={project} />)
+
+    expect(container.querySelector('[data-folio-view-stats]')).not.toBeInTheDocument()
+  })
+
+  it('renders npm stats', () => {
+    const project = createProject({
+      stats: { downloads: '5000', version: '3.0.0' }
+    })
+
+    render(<ProjectView.Stats project={project} />)
+
+    expect(screen.getByText('5000 downloads')).toBeInTheDocument()
+    expect(screen.getByText('3.0.0')).toBeInTheDocument()
+  })
+
+  it('renders product hunt stats', () => {
+    const project = createProject({
+      stats: { upvotes: 300, comments: 45 }
+    })
+
+    render(<ProjectView.Stats project={project} />)
+
+    expect(screen.getByText('300 upvotes')).toBeInTheDocument()
+    expect(screen.getByText('45 comments')).toBeInTheDocument()
+  })
+})
+
+describe('ProjectView data attributes', () => {
+  it('has correct data-folio-view attribute on root', () => {
+    const project = createProject()
+
+    const { container } = render(
+      <ProjectView project={project}>
+        <span>Content</span>
+      </ProjectView>
+    )
+
+    expect(container.querySelector('[data-folio-view]')).toBeInTheDocument()
+  })
+
+  it('has correct data-folio-view-section attributes', () => {
+    const project = createProject()
+
+    const { container } = render(<ProjectView.Section project={project} name="background" />)
+
+    const section = container.querySelector('[data-folio-view-section]')
+    expect(section).toBeInTheDocument()
+    expect(section).toHaveAttribute('data-folio-view-section-name', 'background')
+  })
+
+  it('has correct data-folio-view-links attribute', () => {
+    const project = createProject()
+
+    const { container } = render(<ProjectView.Links project={project} />)
+
+    expect(container.querySelector('[data-folio-view-links]')).toBeInTheDocument()
+  })
+
+  it('has correct data-folio-view-stats attribute', () => {
+    const project = createProject()
+
+    const { container } = render(<ProjectView.Stats project={project} />)
+
+    expect(container.querySelector('[data-folio-view-stats]')).toBeInTheDocument()
+  })
+})

package/src/components/ProjectView/ProjectView.tsx

@@ -0,0 +1,168 @@
+import type { FolioProject } from '../../types'
+
+type SectionName = keyof Pick<FolioProject, 'description' | 'background' | 'why' | 'stack' | 'struggles' | 'timeline' | 'posts'>
+
+function isValidSectionName(name: string): name is SectionName {
+  return ['description', 'background', 'why', 'stack', 'struggles', 'timeline', 'posts'].includes(name)
+}
+
+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
+}) {
+  if (!isValidSectionName(name)) return null
+
+  const sectionData = project[name]
+
+  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 &&
+    !links.productHunt
+  ) {
+    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>
+      )}
+      {links.productHunt && (
+        <a href={links.productHunt} data-folio-link data-folio-link-type="product-hunt">
+          Product Hunt
+        </a>
+      )}
+    </div>
+  )
+}
+
+ProjectView.Stats = function ProjectViewStats({ project }: { project: FolioProject }) {
+  if (!project.stats) {
+    return null
+  }
+
+  const hasStats =
+    project.stats.stars ||
+    project.stats.forks ||
+    project.stats.downloads ||
+    project.stats.version ||
+    project.stats.upvotes ||
+    project.stats.comments
+
+  if (!hasStats) {
+    return null
+  }
+
+  return (
+    <div data-folio-view-stats>
+      {project.stats.stars && <span data-folio-stat="stars">{project.stats.stars} stars</span>}
+      {project.stats.forks && <span data-folio-stat="forks">{project.stats.forks} forks</span>}
+      {project.stats.downloads && (
+        <span data-folio-stat="downloads">{project.stats.downloads} downloads</span>
+      )}
+      {project.stats.version && <span data-folio-stat="version">{project.stats.version}</span>}
+      {project.stats.upvotes && <span data-folio-stat="upvotes">{project.stats.upvotes} upvotes</span>}
+      {project.stats.comments && <span data-folio-stat="comments">{project.stats.comments} comments</span>}
+    </div>
+  )
+}
+
+export { ProjectView }

package/src/components/ProjectView/index.ts

@@ -0,0 +1 @@
+export { ProjectView } from './ProjectView'

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export { FeaturedProject } from './FeaturedProject'
+export { ProjectCard } from './ProjectCard'
+export { ProjectList } from './ProjectList'
+export { ProjectView } from './ProjectView'

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components'
+export * from './lib'
+export * from './types'

package/src/lib/__tests__/defineProjects.test.ts

@@ -0,0 +1,112 @@
+import { describe, it, expect } from 'vitest'
+import { defineProjects } from '../defineProjects'
+import type { FolioProjectInput } from '../../types'
+
+describe('defineProjects', () => {
+  it('should return the input array unchanged', () => {
+    const projects: FolioProjectInput[] = [
+      {
+        id: 'project-1',
+        type: 'github',
+        repo: 'user/repo1',
+        status: 'active',
+      },
+      {
+        id: 'project-2',
+        type: 'manual',
+        status: 'shipped',
+        name: 'Manual Project',
+      },
+    ]
+
+    const result = defineProjects(projects)
+
+    expect(result).toBe(projects)
+    expect(result).toHaveLength(2)
+  })
+
+  it('should return an empty array when given an empty array', () => {
+    const result = defineProjects([])
+
+    expect(result).toEqual([])
+    expect(result).toHaveLength(0)
+  })
+
+  it('should handle single project', () => {
+    const projects: FolioProjectInput[] = [
+      {
+        id: 'single',
+        type: 'npm',
+        package: 'my-package',
+        status: 'active',
+      },
+    ]
+
+    const result = defineProjects(projects)
+
+    expect(result).toHaveLength(1)
+    expect(result[0].id).toBe('single')
+    expect(result[0].type).toBe('npm')
+  })
+
+  it('should handle all project types', () => {
+    const projects: FolioProjectInput[] = [
+      { id: 'gh', type: 'github', repo: 'user/repo', status: 'active' },
+      { id: 'man', type: 'manual', status: 'active' },
+      { id: 'npm', type: 'npm', package: 'pkg', status: 'active' },
+      { id: 'ph', type: 'product-hunt', slug: 'product', status: 'active' },
+      { id: 'hyb', type: 'hybrid', repo: 'user/repo', package: 'pkg', status: 'active' },
+    ]
+
+    const result = defineProjects(projects)
+
+    expect(result).toHaveLength(5)
+    expect(result.map(p => p.type)).toEqual(['github', 'manual', 'npm', 'product-hunt', 'hybrid'])
+  })
+
+  it('should preserve all project properties', () => {
+    const projects: FolioProjectInput[] = [
+      {
+        id: 'full-project',
+        type: 'github',
+        repo: 'user/repo',
+        status: 'shipped',
+        featured: true,
+        name: 'Full Project',
+        tagline: 'A complete project',
+        description: 'Full description',
+        background: 'Background',
+        why: 'Why',
+        image: 'image.png',
+        struggles: [{ type: 'warn', text: 'Warning' }],
+        timeline: [{ date: '2024-01-01', note: 'Start' }],
+        posts: [{ title: 'Post', date: '2024-01-01' }],
+        stack: ['React', 'TypeScript'],
+        links: { live: 'https://example.com' },
+        stats: { stars: 100 },
+        createdAt: '2024-01-01',
+        updatedAt: '2024-06-01',
+      },
+    ]
+
+    const result = defineProjects(projects)
+
+    expect(result[0]).toEqual(projects[0])
+  })
+
+  it('should provide type safety for project configs', () => {
+    const githubProject: FolioProjectInput = {
+      id: 'typed-project',
+      type: 'github',
+      repo: 'user/repo',
+      status: 'active',
+    }
+
+    const result = defineProjects([githubProject])
+
+    expect(result[0].type).toBe('github')
+    if (result[0].type === 'github') {
+      expect(result[0].repo).toBe('user/repo')
+    }
+  })
+})