@reallukemanning/folio 1.0.0

package/dist/components/ProjectView/ProjectView.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function isValidSectionName(name) {
+    return ['description', 'background', 'why', 'stack', 'struggles', 'timeline', 'posts'].includes(name);
+}
+function ProjectView({ project, onBack, children }) {
+    return (_jsxs("div", { "data-folio-view": true, children: [onBack && _jsx("button", { onClick: onBack, children: "Back" }), _jsx("h2", { children: project.name }), children] }));
+}
+ProjectView.Section = function ProjectViewSection({ project, name }) {
+    if (!isValidSectionName(name))
+        return null;
+    const sectionData = project[name];
+    if (!sectionData)
+        return null;
+    return (_jsxs("div", { "data-folio-view-section": true, "data-folio-view-section-name": name, children: [typeof sectionData === 'string' && _jsx(_Fragment, { children: sectionData }), Array.isArray(sectionData) &&
+                sectionData.map((item, index) => {
+                    if (typeof item === 'string') {
+                        return _jsx("span", { "data-folio-tag": true, children: item }, index);
+                    }
+                    if ('type' in item && 'text' in item) {
+                        const struggle = item;
+                        return (_jsx("div", { "data-folio-struggle": true, "data-folio-struggle-type": struggle.type, children: struggle.text }, index));
+                    }
+                    if ('date' in item && ('note' in item || 'title' in item)) {
+                        if ('note' in item) {
+                            const timeline = item;
+                            return (_jsxs("div", { children: [_jsx("span", { "data-folio-timeline-date": true, children: timeline.date }), _jsx("span", { "data-folio-timeline-note": true, children: timeline.note })] }, index));
+                        }
+                        if ('title' in item) {
+                            const post = item;
+                            return (_jsxs("div", { children: [_jsx("span", { "data-folio-post-title": true, children: post.title }), _jsx("span", { "data-folio-post-date": true, children: post.date }), post.url && (_jsx("a", { href: post.url, "data-folio-post-link": true, children: "Link" }))] }, index));
+                        }
+                    }
+                    return null;
+                })] }));
+};
+ProjectView.Links = function ProjectViewLinks({ project }) {
+    const links = project.links;
+    if (!links.github &&
+        !links.live &&
+        !links.npm &&
+        !links.appStore &&
+        !links.playStore &&
+        !links.productHunt) {
+        return null;
+    }
+    return (_jsxs("div", { "data-folio-view-links": true, children: [links.github && (_jsx("a", { href: links.github, "data-folio-link": true, "data-folio-link-type": "github", children: "GitHub" })), links.live && (_jsx("a", { href: links.live, "data-folio-link": true, "data-folio-link-type": "live", children: "Live" })), links.npm && (_jsx("a", { href: links.npm, "data-folio-link": true, "data-folio-link-type": "npm", children: "npm" })), links.appStore && (_jsx("a", { href: links.appStore, "data-folio-link": true, "data-folio-link-type": "app-store", children: "App Store" })), links.playStore && (_jsx("a", { href: links.playStore, "data-folio-link": true, "data-folio-link-type": "play-store", children: "Play Store" })), links.productHunt && (_jsx("a", { href: links.productHunt, "data-folio-link": true, "data-folio-link-type": "product-hunt", children: "Product Hunt" }))] }));
+};
+ProjectView.Stats = function ProjectViewStats({ project }) {
+    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 (_jsxs("div", { "data-folio-view-stats": true, children: [project.stats.stars && _jsxs("span", { "data-folio-stat": "stars", children: [project.stats.stars, " stars"] }), project.stats.forks && _jsxs("span", { "data-folio-stat": "forks", children: [project.stats.forks, " forks"] }), project.stats.downloads && (_jsxs("span", { "data-folio-stat": "downloads", children: [project.stats.downloads, " downloads"] })), project.stats.version && _jsx("span", { "data-folio-stat": "version", children: project.stats.version }), project.stats.upvotes && _jsxs("span", { "data-folio-stat": "upvotes", children: [project.stats.upvotes, " upvotes"] }), project.stats.comments && _jsxs("span", { "data-folio-stat": "comments", children: [project.stats.comments, " comments"] })] }));
+};
+export { ProjectView };
+//# sourceMappingURL=ProjectView.js.map

package/dist/components/ProjectView/ProjectView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectView.js","sourceRoot":"","sources":["../../../src/components/ProjectView/ProjectView.tsx"],"names":[],"mappings":"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"}

package/dist/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/dist/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/dist/components/ProjectView/index.d.ts

@@ -0,0 +1,2 @@
+export { ProjectView } from './ProjectView';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ProjectView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProjectView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/ProjectView/index.js

@@ -0,0 +1,2 @@
+export { ProjectView } from './ProjectView';
+//# sourceMappingURL=index.js.map

package/dist/components/ProjectView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ProjectView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/ProjectView/index.ts

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

package/dist/components/index.d.ts

@@ -0,0 +1,5 @@
+export { FeaturedProject } from './FeaturedProject';
+export { ProjectCard } from './ProjectCard';
+export { ProjectList } from './ProjectList';
+export { ProjectView } from './ProjectView';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/index.js

@@ -0,0 +1,5 @@
+export { FeaturedProject } from './FeaturedProject';
+export { ProjectCard } from './ProjectCard';
+export { ProjectList } from './ProjectList';
+export { ProjectView } from './ProjectView';
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/index.ts

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

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './lib';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './lib';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA"}

package/dist/lib/defineProjects.d.ts

@@ -0,0 +1,3 @@
+import type { FolioProjectInput } from '../types';
+export declare function defineProjects(projects: FolioProjectInput[]): FolioProjectInput[];
+//# sourceMappingURL=defineProjects.d.ts.map

package/dist/lib/defineProjects.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defineProjects.d.ts","sourceRoot":"","sources":["../../src/lib/defineProjects.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAEjD,wBAAgB,cAAc,CAAC,QAAQ,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,EAAE,CAEjF"}

package/dist/lib/defineProjects.js

@@ -0,0 +1,4 @@
+export function defineProjects(projects) {
+    return projects;
+}
+//# sourceMappingURL=defineProjects.js.map

package/dist/lib/defineProjects.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defineProjects.js","sourceRoot":"","sources":["../../src/lib/defineProjects.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,cAAc,CAAC,QAA6B;IAC1D,OAAO,QAAQ,CAAA;AACjB,CAAC"}