fulldev-ui 0.5.0-beta.9 → 0.6.0-beta-5

package/src/components/_Prose copy.astro

@@ -0,0 +1,172 @@
+---
+import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import {
+  default as Lead,
+  default as Paragraph,
+} from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
+import { crush } from 'radash'
+import type Sidebar from './Sidebar.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag | undefined
+  render?: any
+  sidebar?: ComponentProps<typeof Sidebar> | undefined
+  slug?: CollectionEntry<'pages'>['slug'] | undefined
+  toc?: boolean | ComponentProps<typeof Toc>['heading'] | undefined
+  tagline?: ComponentProps<typeof Tagline>['text'] | undefined
+  heading?: ComponentProps<typeof Heading>['text'] | undefined
+  image?: ComponentProps<typeof Image> | undefined
+  lead?: ComponentProps<typeof Lead>['text'] | undefined
+}
+
+const {
+  toc = false,
+  slug,
+  sidebar,
+  render,
+  tagline,
+  heading,
+  lead,
+  image,
+  ...rest
+} = Astro.props
+
+const Content = render && (await render())?.Content
+
+const flatMenu = crush(sidebar?.menu ?? {})
+const slugs = Object.entries(flatMenu)
+  .map(([key, value]) => (key.endsWith('.slug') ? value : null))
+  .filter(Boolean)
+const slugIndex = slugs.findIndex((val) => val === slug)
+
+const prevSlug = slugs[slugIndex - 1]
+const nextSlug = slugs[slugIndex + 1]
+---
+
+<Element
+  class:list="prose"
+  {...rest}
+>
+  <Element class:list="prose-container">
+    <Element class:list="prose-content">
+      <Tagline text={tagline} />
+      <Heading
+        as="h1"
+        level={2}
+        text={heading}
+      />
+      <Paragraph text={lead} />
+      <Image {...image} />
+      {Content && <Content />}
+      <slot />
+      <Element class:list="prose-footer">
+        <Button
+          class:list="prose-prev"
+          icon={prevSlug && 'arrow-left'}
+          slug={prevSlug}
+          variant="secondary"
+        />
+        <Button
+          class:list="prose-next"
+          icon={nextSlug && 'arrow-right'}
+          slug={nextSlug}
+          variant="secondary"
+          reverse
+        />
+      </Element>
+    </Element>
+    <Toc
+      if={toc}
+      heading={typeof toc === 'string' ? toc : undefined}
+      {render}
+    />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .prose {
+      @apply relative items-start py-28 first:pt-14;
+
+      .prose-container {
+        @apply container flex h-full w-full flex-grow items-start justify-evenly gap-14 gap-x-gutter;
+      }
+
+      .prose-content {
+        @apply w-full max-w-screen-md;
+
+        > * {
+          @apply mt-6 first:mt-0;
+        }
+
+        p {
+          @apply mt-4 first:mt-0;
+        }
+
+        code:not(.astro-code code) {
+          @apply rounded bg-muted px-1.5 py-0.5 font-mono text-sm font-medium;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          @apply mt-8 scroll-m-20 font-semibold first:mt-0;
+
+          code {
+            font-size: inherit !important;
+          }
+        }
+
+        > h1 {
+          @apply text-4xl font-extrabold;
+        }
+
+        > h2 {
+          @apply text-2xl;
+        }
+
+        > h3 {
+          @apply text-xl;
+        }
+
+        > h4 {
+          @apply text-lg;
+        }
+
+        > h5 {
+          @apply text-base;
+        }
+
+        > h6 {
+          @apply text-sm;
+        }
+
+        > aside {
+          @apply mt-6 rounded-md border border-destructive p-4 text-destructive first:mt-0;
+        }
+      }
+
+      .prose-footer {
+        @apply mt-14 flex items-center;
+
+        .prose-next {
+          @apply ml-auto;
+        }
+      }
+
+      .toc {
+        @apply order-last;
+      }
+    }
+  }
+</style>

package/src/components/_Sidebar copy.astro

@@ -0,0 +1,87 @@
+<!-- ---
+import type { HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import Links from 'fulldev-ui/components/Links.astro'
+import Logo from 'fulldev-ui/components/Logo.astro'
+import Themer from 'fulldev-ui/components/Themer.astro'
+import type { SidebarSchema } from 'fulldev-ui/schemas/components/sidebar'
+import Heading from './Heading.astro'
+
+interface Props extends HTMLAttributes<'aside'>, SidebarSchema {}
+
+const { company, logo, menus, heading, themer, ...rest } = Astro.props
+---
+
+<Element
+  class:list="sidebar"
+  as="aside"
+  {...rest}
+>
+  <Element
+    class:list="sidebar-header"
+    as="header"
+  >
+    <Logo
+      {company}
+      {...logo}
+      size="sm"
+    />
+    <Heading
+      as="h5"
+      size="md"
+      text={heading}
+    />
+  </Element>
+  <Element class:list="sidebar-content">
+    <Element
+      class:list="sidebar-nav"
+      as="nav"
+    >
+      {
+        menus?.map(({ heading, links }) => (
+          <Element class:list="sidebar-menu">
+            <Heading
+              text={heading}
+              size="sm"
+              as="h6"
+            />
+            <Links
+              direction="column"
+              size="sm"
+              {links}
+            />
+          </Element>
+        ))
+      }
+    </Element>
+    <Themer if={themer} />
+    <slot />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .sidebar {
+      @apply sticky bottom-0 z-10 hidden h-full flex-col items-start justify-start border-r bg-background lg:flex;
+
+      --height: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
+      top: var(--height);
+      width: var(--sidebar-width);
+      max-height: calc(100vh - var(--height));
+
+      &,
+      & ~ * {
+        --sidebar-width: 13rem;
+      }
+
+      .sidebar-header {
+        @apply sticky flex h-14 w-full items-center px-gutter py-6;
+      }
+
+      .sidebar-content {
+        @apply flex w-full flex-1 flex-col items-start gap-7 overflow-y-auto px-gutter pb-14 pt-6 first:pt-14;
+        @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
+      }
+    }
+  }
+</style> -->

package/src/components/docs/PropsTable.astro

@@ -1,275 +1,49 @@
 ---
-import Table from 'fulldev-ui/components/Table.astro'
-import { readFileSync } from 'node:fs'
-import { pascal } from 'radash'
-
-const slug = Astro.params.page || 'index'
-const componentName = pascal(slug)
-
-const allComponents = import.meta.glob('/src/**/*.astro', { eager: true })
-const foundComponent = Object.entries(allComponents).find(
-  ([key]) => key.split('/').pop() === `${componentName}.astro`
-)?.[1] as any
-const componentFileContent =
-  (foundComponent && readFileSync(foundComponent.file, 'utf-8')) || ''
-
-interface Prop {
-  name: string
-  type: string
-}
-
-// Regular expression to match the Props interface or type
-const staticProps = /(?:interface|type)\s+Props[\s\S]*?{([\s\S]*?)}/
-
-// Function to extract props from the component file
-const extractProps = (content: string): Prop[] => {
-  const props: Prop[] = []
-
-  // Extract static props from Props interface or type
-  const staticPropsMatch = content.match(staticProps)
-  if (staticPropsMatch && staticPropsMatch[1]) {
-    const propsContent = staticPropsMatch[1]
-    const propLines = propsContent.split('\n')
-
-    let currentProp: Prop | null = null
-
-    propLines.forEach((line) => {
-      const trimmedLine = line.trim()
-      if (trimmedLine === '') return
-
-      // Match prop name and type
-      const match = trimmedLine.match(/^(\w+)(\??):(.*)/)
-      if (match && match[1] && match[3]) {
-        if (currentProp) props.push(currentProp)
-        currentProp = {
-          name: match[1],
-          type: match[3].trim(),
-        }
-      } else if (currentProp) {
-        // Continue adding to type if it spans multiple lines
-        currentProp.type += ' ' + trimmedLine
-      }
-    })
-
-    if (currentProp) props.push(currentProp)
-  }
-
-  // Extract props from type intersections
-  const intersectionProps = content.match(
-    /Props(?:<[^>]+>)?\s*=\s*([\s\S]*?)(?:$|\n\n)/
-  )
-  if (intersectionProps && intersectionProps[1]) {
-    const intersectionContent = intersectionProps[1]
-    let currentProp: Prop | null = null
-    const lines = intersectionContent.split('\n')
-
-    lines.forEach((line) => {
-      const trimmedLine = line.trim()
-      if (trimmedLine === '') return
-
-      // Match prop name and type
-      const match = trimmedLine.match(/(\w+)(\??):(.*)/)
-      if (match && match[1] && match[3]) {
-        if (currentProp) props.push(currentProp)
-        currentProp = {
-          name: match[1],
-          type: match[3].trim(),
-        }
-      } else if (currentProp) {
-        // Continue adding to type if it spans multiple lines
-        currentProp.type += ' ' + trimmedLine
-      }
-    })
-
-    if (currentProp) props.push(currentProp)
-  }
-
-  // Clean up the type of the last prop
-  if (props.length > 0) {
-    const lastProp = props[props.length - 1]
-    if (lastProp) {
-      lastProp.type = lastProp.type.replace(/\s*}\s*$/, '')
-    }
-  }
-
-  // Filter out 'as' prop and props starting with underscore
-  return props.filter(
-    (prop) => prop.name !== 'as' && !prop.name.startsWith('_')
-  )
-}
-
-// Function to extract default prop values from Astro.props
-const extractDefaultProps = (content: string): Record<string, string> => {
-  const defaultPropsMatch = content.match(
-    /const\s*{[\s\S]*?}\s*=\s*Astro\.props/
-  )
-  return defaultPropsMatch
-    ? [
-        ...defaultPropsMatch[0].matchAll(
-          /(\w+)\s*=\s*('[^']*'|"[^"]*"|[^,\n]+)/g
-        ),
-      ].reduce(
-        (acc, match) => {
-          const [, name, value] = match
-          if (name && name !== 'as' && value !== undefined) {
-            acc[name] =
-              value.startsWith("'") || value.startsWith('"')
-                ? value.slice(1, -1)
-                : value
-          }
-          return acc
-        },
-        {} as Record<string, string>
-      )
-    : {}
-}
-
-// Function to extract the default 'As' prop value from the interface or type
-const extractAsDefault = (content: string): string => {
-  const asTypeMatch = content.match(/type Props<As extends ([^>]+)>/)
-  if (asTypeMatch && asTypeMatch[1]) {
-    return asTypeMatch[1].trim().replace(/['"]/g, '')
-  }
-
-  const asInterfaceMatch = content.match(/interface Props<As extends ([^>]+)>/)
-  if (asInterfaceMatch && asInterfaceMatch[1]) {
-    return asInterfaceMatch[1].trim().replace(/['"]/g, '')
-  }
-
-  return ''
-}
-
-const parsedProps = extractProps(componentFileContent)
-const parsedAstroProps = extractDefaultProps(componentFileContent)
-const asDefault = extractAsDefault(componentFileContent)
-
-// Function to get the default value for a prop
-const getDefaultValue = (name: string): string => {
-  if (name in parsedAstroProps) {
-    return parsedAstroProps[name] || '-'
-  }
-
-  return '-'
-}
-
-// Check if the component extends Element.astro
-const extendsElement = componentFileContent.includes('GlobalProps')
-
-// Check if the component extends Writeup.astro
-const extendsWriteup = componentFileContent.includes(
-  'ComponentProps<typeof Writeup>'
-)
-
-// Prepare the table body data
-const tableBody = new Map()
-
-// Add component-specific props
-parsedProps.forEach((item) => {
-  tableBody.set(item.name, [
-    item.name,
-    item.type.replace(/\s*\|?\s*(undefined|null)/, '').trim(),
-    getDefaultValue(item.name),
-  ])
-})
-
-// Add Element props if the component extends Element.astro
-if (extendsElement) {
-  const elementProps = extractProps(
-    readFileSync('src/components/Element.astro', 'utf-8')
-  )
-  elementProps
-    .filter((item) => item.name !== '[key: string | number | symbol]')
-    .forEach((item) => {
-      if (!tableBody.has(item.name)) {
-        let type = item.type
-          .replace(/\s*\|?\s*(undefined|null)/, '')
-          .trim()
-          .replace(/\s*\|\s*any/, '')
-          .replace(/\s*\[key: string \| number \| symbol\]: any/, '')
-
-        // Remove [key: string | number | symbol]: any from the last prop
-        if (item === elementProps[elementProps.length - 1]) {
-          type = type.replace(/\s*\[key: string \| number \| symbol\]: any/, '')
-        }
-
-        if (item.name === 'size') {
-          type = "'sm' | 'md' | 'lg'"
-        } else if (item.name === 'color') {
-          type = "'base' | 'brand'"
-        }
-
-        tableBody.set(item.name, [item.name, type, getDefaultValue(item.name)])
-      }
-    })
-}
-
-// Add Writeup props if the component extends Writeup.astro
-if (extendsWriteup) {
-  const writeupProps = extractProps(
-    readFileSync('src/components/Writeup.astro', 'utf-8')
-  )
-  writeupProps
-    .filter((item) => item.name !== '[key: string | number | symbol]')
-    .forEach((item) => {
-      if (!tableBody.has(item.name)) {
-        let type = item.type
-          .replace(/\s*\|?\s*(undefined|null)/, '')
-          .trim()
-          .replace(/\s*\|\s*any/, '')
-          .replace(/\s*\[key: string \| number \| symbol\]: any/, '')
-
-        // Remove [key: string | number | symbol]: any from the last prop
-        if (item === writeupProps[writeupProps.length - 1]) {
-          type = type.replace(/\s*\[key: string \| number \| symbol\]: any/, '')
-        }
-
-        tableBody.set(item.name, [item.name, type, getDefaultValue(item.name)])
-      }
-    })
-}
-
-// Add 'as' prop only if asDefault is not empty
-if (asDefault) {
-  tableBody.set('as', ['as', 'HTMLTag', asDefault])
-}
-
-// Check if the component is polymorphic
-const isPolymorphic = componentFileContent.includes('Polymorphic<')
-
-// Extract HTMLAttributes from the component
-const htmlAttributesMatch = componentFileContent.match(
-  /HTMLAttributes<'(\w+)'>/
-)
-let htmlElement = htmlAttributesMatch ? htmlAttributesMatch[1] : ''
-
-// Special handling for List and Button components
-if (componentName === 'List') {
-  htmlElement = "'ul' | 'ol'"
-} else if (componentName === 'Button') {
-  htmlElement = "'button' | 'a' | 'label'"
-}
-
-// Add HTML Attributes row
-if (isPolymorphic && asDefault) {
-  tableBody.set('HTML Attributes', [
-    'HTML Attributes',
-    `Polymorphic<${asDefault}>`,
-    '-',
-  ])
-} else if (htmlElement) {
-  tableBody.set('HTML Attributes', ['HTML Attributes', `${htmlElement}`, '-'])
-}
+// const { schema } = Astro.props
+
+// import Table from 'fulldev-ui/components/Table.astro'
+// import { zodToJsonSchema } from 'zod-to-json-schema'
+
+// const slug = Astro.params.page?.split('/').pop() || ''
+
+// const allSchemas = import.meta.glob('/src/schemas/**/*.ts', {
+//   eager: true,
+// })
+
+// const schemaName = schema ?? slug
+// const foundSchema = Object.entries(allSchemas).find(([key]) =>
+//   key.toLowerCase().includes(`/${schemaName.toLowerCase()}.ts`)
+// )?.[1] as any
+
+// const jsonSchema = zodToJsonSchema(foundSchema?.default, {
+//   pipeStrategy: 'output',
+// }) as { properties?: Record<string, any> }
+
+// const properties = jsonSchema.properties || {}
+
+// const tableBody = Object.entries(properties).map(([key, value]: any) => {
+//   let type = 'any'
+//   if (value.enum) {
+//     type = value.enum.join(' | ')
+//   } else if (value.type) {
+//     type = value.type
+//   } else if (value.$ref) {
+//     type = `typeof ${key}`
+//   }
+//   const defaultValue = value.default?.toString() ?? '-'
+//   return [key, type, defaultValue]
+// })
 ---
 
-<Table
+<!-- <Table
   size="md"
   class:list={['props-table']}
   header={['Prop', 'Type', 'Default']}
-  body={Array.from(tableBody.values())}
+  body={tableBody}
 />
 
-<style is:global lang="scss">
+<style is:global>
   .props-table {
     overflow: auto;
   }
-</style>
+</style> -->

package/src/components/experimental/Window.astro

@@ -1,4 +1,4 @@
----
+<!-- ---
 import Button from 'fulldev-ui/components/Button.astro'
 
 const { componentProps } = Astro.props
@@ -25,7 +25,7 @@ const isComponent =
       </div>
     </div>
   ) : (
-    <div class="block window">
+    <div class="window block">
       <div class="button-header">
         <Button
           for={id}
@@ -50,22 +50,11 @@ const isComponent =
   )
 }
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     .window {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      width: 100%;
-
       .code-container {
-        width: 100%;
-
-        .astro-code {
-          margin: 0;
-          background-color: #191919 !important;
-          padding: var(--space-5);
-        }
+        @apply w-full;
       }
 
       &.component {
@@ -130,45 +119,4 @@ const isComponent =
       }
     }
   }
-
-  // .window {
-  //   width: 100%;
-
-  //   &.component {
-  //     border: 1px solid var(--base-6);
-  //     border-radius: var(--radius-2);
-  //     overflow: hidden;
-
-  //     .example-container {
-  //       display: flex;
-  //       flex-direction: column;
-  //       align-items: start;
-  //       gap: var(--space-4);
-  //       padding: var(--space-5);
-  //     }
-
-  //     .astro-code {
-  //       border: none;
-  //       border-top: 1px solid var(--base-6);
-  //       border-radius: 0px;
-  //     }
-  //   }
-
-  //   &:not(.component) {
-  //     padding-top: var(--space-7);
-  //     padding-bottom: var(--space-7);
-
-  //     .live-code-layout {
-  //       display: flex;
-  //       flex-direction: column;
-  //       margin-top: var(--space-4);
-  //       width: 100%;
-  //       overflow: hidden;
-
-  //       .example-container {
-  //         border-top: 1px solid var(--base-6);
-  //       }
-  //     }
-  //   }
-  // }
-</style>
+</style> -->

package/src/content/config.ts

@@ -1,20 +1,13 @@
 import { defineCollection } from 'astro:content'
-import imageLoader from 'fulldev-ui/loaders/imageLoader.ts'
-import imageSchema from 'fulldev-ui/schemas/imageSchema.ts'
-import pageSchema from 'fulldev-ui/schemas/pageSchema.ts'
-import presetSchema from 'fulldev-ui/schemas/presetSchema.ts'
+import { pageSchema } from 'fulldev-ui/schemas/page.ts'
 
 export const collections = {
   pages: defineCollection({
     type: 'content',
     schema: pageSchema,
   }),
-  presets: defineCollection({
+  layouts: defineCollection({
     type: 'data',
-    schema: presetSchema,
-  }),
-  images: defineCollection({
-    loader: imageLoader,
-    schema: imageSchema,
+    schema: pageSchema,
   }),
 }