fulldev-ui 0.4.29 → 0.5.0-beta.1

package/src/components/docs/PropsTable.astro

@@ -1,43 +1,105 @@
 ---
 import Table from 'fulldev-ui/components/Table.astro'
 import { readFileSync } from 'node:fs'
+import { pascal } from 'radash'
 
-const pathnameWithoutTrailingSlash = Astro.url.pathname.replace(/\/$/, '')
-const slug = pathnameWithoutTrailingSlash.split('/').pop() || ''
-const component = slug.charAt(0).toUpperCase() + slug.slice(1)
+const slug = Astro.url.pathname.replace(/\/$/, '').split('/').pop() || ''
+const componentName = pascal(slug)
 
-const allComponents = await Astro.glob('../../components/**/*.astro')
-const found = allComponents.find(
-  (c) => c.file.split('/').pop()?.replace('.astro', '') === component
-)
+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
 
-if (!found) return
+    propLines.forEach((line) => {
+      const trimmedLine = line.trim()
+      if (trimmedLine === '') return
 
-const componentFileContent = readFileSync(found.file, 'utf-8')
+      // 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
+      }
+    })
 
-const extractProps = (content: string) => {
-  const propsMatch = content.match(
-    /type Props(?:<[^>]+>)?\s*=\s*(?:HTMLAttributes<'[^']+'>\s*&\s*)?(?:Polymorphic<[^>]+>\s*&\s*)?([\s\S]*?)(?:}|$)/
+    if (currentProp) props.push(currentProp)
+  }
+
+  // Extract props from type intersections
+  const intersectionProps = content.match(
+    /Props(?:<[^>]+>)?\s*=\s*([\s\S]*?)(?:$|\n\n)/
   )
-  if (propsMatch) {
-    const propsContent = propsMatch[1]
-    const props = [
-      ...propsContent.matchAll(/(\w+)(?:\??:\s*((?:[^;\n]|\n\s*\|)*)|,)/g),
-    ].map(([, name, type]) => ({
-      name,
-      type: type
-        ? type
-            .replace(/^\s*\|\s*/, '')
-            .trim()
-            .replace(/\n\s*\|/g, ' | ')
-        : 'unknown',
-    }))
-    return props
+  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)
   }
-  return []
+
+  // 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('_')
+  )
 }
 
-const extractDefaultProps = (content: string) => {
+// 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/
   )
@@ -47,11 +109,14 @@ const extractDefaultProps = (content: string) => {
           /(\w+)\s*=\s*('[^']*'|"[^"]*"|[^,\n]+)/g
         ),
       ].reduce(
-        (acc, [, name, value]) => {
-          acc[name] =
-            value.startsWith("'") || value.startsWith('"')
-              ? value.slice(1, -1)
-              : value
+        (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>
@@ -59,40 +124,148 @@ const extractDefaultProps = (content: string) => {
     : {}
 }
 
-const extractAsDefault = (content: string) => {
-  const asDefaultMatch = content.match(/as\s*=\s*([^,\n]+)/)
-  return asDefaultMatch
-    ? asDefaultMatch[1]
-        .trim()
-        .split(' : ')[0]
-        .replace(/['"]/g, '')
-        .replace(/href \? a : /, '')
-        .replace(/href \? 'a' : /, '')
-    : 'div'
+// 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}`, '-'])
+}
 ---
 
 <Table
   size="md"
   class:list={['props-table']}
   header={['Prop', 'Type', 'Default']}
-  body={[
-    ...parsedProps.map((item) => [
-      item.name,
-      item.type,
-      parsedAstroProps[item.name] ?? '-',
-    ]),
-    ...(asDefault !== 'div'
-      ? [
-          ['as', 'HTMLTag', asDefault],
-          ['HTML Attributes', `Polymorphic<${asDefault}>`, '-'],
-        ]
-      : []),
-  ]}
+  body={Array.from(tableBody.values())}
 />
 
 <style is:global lang="scss">

package/src/components/experimental/Form.astro

@@ -1,29 +1,22 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
+import type { HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-type Props<As extends HTMLTag = 'form'> = Polymorphic<{ as: As }> & {
-  structure?: 'column' | 'row' | 'group'
-  space?: 'none' | 'auto'
+interface Props extends GlobalProps, HTMLAttributes<'form'> {
+  structure?: 'column' | 'row' | 'group' | undefined
 }
 
-const {
-  as = 'form',
-  space = 'auto',
-  structure = 'column',
-  ...rest
-} = Astro.props
+const { structure = 'column', ...rest } = Astro.props
 ---
 
-<Root
-  class:list="form"
-  {as}
-  {structure}
-  {space}
+<Element
+  class:list={`form ${structure}`}
+  as="form"
   {...rest}
 >
   <slot />
-</Root>
+</Element>
 
 <style is:global lang="scss">
   .form {

package/src/components/experimental/Logo.astro

@@ -1,21 +1,38 @@
 ---
 import type { ComponentProps } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 
-type Props = Omit<ComponentProps<typeof Image>, 'position' | 'frame'> & {}
+interface Props extends ComponentProps<typeof Image> {
+  company?: string | undefined
+}
 
-const { ...rest } = Astro.props
+const { company, ...rest } = Astro.props as Props
 ---
 
-<Image
+<Element
+  as="a"
+  href="/"
   class:list="logo"
-  {...rest}
-/>
+>
+  {company ? <Fragment set:html={company} /> : <Image {...rest} />}
+</Element>
 
 <style is:global lang="scss">
-  .logo {
-    max-width: calc(15 * var(--space-2));
-    height: 100%;
-    object-fit: contain;
+  @layer fulldev {
+    .logo {
+      display: flex;
+      align-items: center;
+      color: var(--color-12);
+      font-weight: 700;
+      font-size: var(--text-6);
+      line-height: 1.1;
+
+      .image {
+        max-width: calc(15 * var(--space-2));
+        height: 100%;
+        object-fit: contain;
+      }
+    }
   }
 </style>

package/src/components/experimental/Prose.astro

@@ -1,19 +1,19 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
+import Element from 'fulldev-ui/components/Element.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }>
 
 const { as = 'div', ...rest } = Astro.props
 ---
 
-<Root
+<Element
   class:list="prose"
   {as}
   {...rest}
 >
   <slot />
-</Root>
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
@@ -21,10 +21,8 @@ const { as = 'div', ...rest } = Astro.props
       width: 100%;
       scroll-margin-top: var(--space-6);
       color: var(--color-11);
-      font-weight: var(--font-weight);
       font-size: var(--text-3);
       line-height: 1.7;
-      font-family: var(--font-family);
 
       > {
         .astro-code,
@@ -152,5 +150,11 @@ const { as = 'div', ...rest } = Astro.props
         text-decoration: underline;
       }
     }
+
+    p code {
+      background-color: var(--base-12);
+      padding: 0 var(--space-1);
+      color: var(--base-1);
+    }
   }
 </style>

package/src/components/experimental/Video.astro

@@ -2,7 +2,7 @@
 // 
 type Props = any & {
   src: string
-  thumbnail?: string
+  thumbnail?: string | undefined
 }
 
 const { src, thumbnail } = Astro.props

package/src/components/experimental/Window.astro

@@ -28,7 +28,6 @@ const isComponent =
     <div class="block window">
       <div class="button-header">
         <Button
-          as="label"
           for={id}
           variant="secondary"
         >
@@ -64,7 +63,7 @@ const isComponent =
 
         .astro-code {
           margin: 0;
-          background-color: var(--base-2) !important;
+          background-color: #191919 !important;
           padding: var(--space-5);
         }
       }
@@ -88,8 +87,8 @@ const isComponent =
           border-radius: 0px;
 
           .astro-code {
-            border: none;
-            border-radius: 0px;
+            border: none !important;
+            border-radius: 0px !important;
           }
         }
       }

package/src/components/sections.astro

@@ -0,0 +1,28 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Section from './Section.astro'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  sections?: ComponentProps<typeof Section>[] | undefined
+}
+
+const { sections, ...rest } = Astro.props
+---
+
+<Element
+  class:list="sections"
+  {...rest}
+>
+  {sections?.map((section) => <Section {...section} />)}
+</Element>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .sections {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+</style>

package/src/content/config.ts

@@ -1,17 +1,20 @@
 import { defineCollection } from 'astro:content'
-import { page } from 'fulldev-ui/schemas/page'
+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'
 
 export const collections = {
   pages: defineCollection({
     type: 'content',
-    schema: page,
+    schema: pageSchema,
   }),
-  records: defineCollection({
+  presets: defineCollection({
     type: 'data',
-    schema: page,
+    schema: presetSchema,
   }),
-  settings: defineCollection({
-    type: 'data',
-    schema: page,
+  images: defineCollection({
+    loader: imageLoader,
+    schema: imageSchema,
   }),
 }

package/src/content/pages/base/_dialog.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Dialog
 ---

package/src/content/pages/base/_drawer.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Drawer
 ---

package/src/content/pages/base/_localeswitcher.mdx

@@ -0,0 +1,17 @@
+---
+presets: [docs]
+
+title: LocaleSwitcher
+---
+
+# Theme Switcher
+
+```astro live
+---
+import LocaleSwitcher from 'fulldev-ui/components/LocaleSwitcher.astro'
+---
+
+<LocaleSwitcher />
+```
+
+## Props

package/src/content/pages/base/_switch.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Switch
 ---

package/src/content/pages/base/badge.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Badge
 ---
@@ -56,15 +55,5 @@ import Badge from 'fulldev-ui/components/Badge.astro'
 import Badge from 'fulldev-ui/components/Badge.astro'
 ---
 
-<Badge radius="none">Badge</Badge>
-<Badge radius="auto">Badge</Badge>
-<Badge radius="full">Badge</Badge>
-```
-
-```astro live
----
-import Badge from 'fulldev-ui/components/Badge.astro'
----
-
 <Badge icon="circle" text="Badge" />
 ```

package/src/content/pages/base/button.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Button
 ---
@@ -59,13 +58,3 @@ import Button from 'fulldev-ui/components/Button.astro'
 <Button color="base" text="Button" />
 <Button color="brand" text="Button" />
 ```
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button radius="none" text="Button" />
-<Button radius="auto" text="Button" />
-<Button radius="full" text="Button" />
-```