fulldev-ui 0.4.28 → 0.5.0-beta.0

package/src/components/Toc.astro

@@ -1,54 +1,131 @@
 ---
-import Column from 'fulldev-ui/components/Column.astro'
-import Link from 'fulldev-ui/components/Link.astro'
-import Heading from './Heading.astro'
+import type { HTMLAttributes } 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 type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-const { toc, headings } = Astro.props
+interface Props extends GlobalProps, HTMLAttributes<'aside'> {
+  render?: CollectionEntry<'pages'>['render'] | undefined
+}
+
+const { size = 'sm', render } = Astro.props
+
+const headings = render ? (await render())?.headings : []
+const filteredHeadings = headings?.filter(
+  (heading: any) => heading.depth >= 2 && heading.depth <= 4
+)
 ---
 
-<Column
+<input
+  id="toc"
+  class="toc-checkbox"
+  type="checkbox"
+/>
+
+<Element
   class:list="toc"
   as="aside"
+  {size}
 >
   {
-    toc?.length && headings?.length > 0 && (
+    filteredHeadings?.length > 0 && (
       <>
         <Heading
           text="On this page"
           level={6}
         />
-        {headings.map(
-          (heading: { slug: string; depth: number; text: string }) => (
-            <Link
+        <nav class="toc-nav">
+          <Button
+            variant="link"
+            href={`#${filteredHeadings[0]?.slug}`}
+            text="Overview"
+            class="toc-link toc-link-h2"
+          />
+          {filteredHeadings.map((heading: any) => (
+            <Button
+              variant="link"
               href={`#${heading.slug}`}
-              class="toc-link"
               text={heading.text}
+              class={`toc-link toc-link-h${heading.depth}`}
             />
-          )
-        )}
+          ))}
+        </nav>
       </>
     )
   }
-</Column>
+</Element>
 
 <style lang="scss" is:global>
   @layer fulldev {
+    .toc-checkbox {
+      display: none;
+    }
+
+    @media (max-width: 1023.999px) {
+      body:has(.toc-checkbox:checked) {
+        overflow: hidden;
+      }
+    }
+
     .toc {
-      display: none !important;
-      box-sizing: border-box;
-      border-left: 1px solid var(--color-a6);
-      padding: var(--space-6) 0 var(--space-6)
-        min(var(--space-5), var(--gutter));
-      height: 100vh;
-      max-height: 100vh;
+      --toc-width: 240px;
+
+      display: none;
+      position: fixed;
+      top: var(--header-height, 0px);
+      right: 0;
+      flex-shrink: 0;
+      flex-direction: column;
+      justify-content: flex-start;
+      gap: calc(var(--space-4) + var(--space-1));
+      z-index: 10;
+      border-left-width: 1px;
+      border-style: solid;
+      border-color: var(--color-a6);
+      background-color: var(--color-background);
+      padding: var(--space-md-6) var(--gutter);
+      width: 100%;
+      max-height: calc(100vh - var(--header-height, 0px));
       overflow-y: auto;
 
-      .toc-link {
-        font-size: var(--text-2);
+      &:is(.toc-checkbox:checked + &) {
+        display: flex;
       }
 
       @media (min-width: 1024px) {
-        display: flex !important;
+        display: flex;
+        position: sticky;
+        border-left-width: 1px;
+        width: var(--toc-width);
+      }
+
+      .button + .heading {
+        margin-top: var(--space-5);
+      }
+
+      .toc-nav {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .toc-link {
+        text-align: left;
+      }
+
+      .toc-link-h2 {
+        margin-top: var(--space-3);
+      }
+
+      .toc-link-h3 {
+        margin-top: var(--space-3);
+        margin-left: var(--space-4);
+      }
+
+      .toc-link-h4 {
+        margin-top: var(--space-2);
+        margin-left: var(--space-5);
       }
     }
   }

package/src/components/Writeup.astro

@@ -0,0 +1,90 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import List from 'fulldev-ui/components/List.astro'
+import Price from 'fulldev-ui/components/Price.astro'
+import Rating from 'fulldev-ui/components/Rating.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Text from 'fulldev-ui/components/Text.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  level?: ComponentProps<typeof Heading>['level']
+  badge?: ComponentProps<typeof Badge> | undefined
+  tagline?: ComponentProps<typeof Tagline>['text']
+  heading?: ComponentProps<typeof Heading>['text']
+  text?: ComponentProps<typeof Text>['text']
+  list?: ComponentProps<typeof List>['items']
+  align?: 'start' | 'center' | 'end' | undefined
+  price?: ComponentProps<typeof Price>['value']
+  rating?:
+    | ComponentProps<typeof Rating>
+    | ComponentProps<typeof Rating>['value']
+}
+
+const {
+  level = 2,
+  rating,
+  badge,
+  tagline,
+  heading,
+  text,
+  list,
+  price,
+  ...rest
+} = Astro.props
+---
+
+<Element
+  class:list="writeup"
+  {...rest}
+>
+  <slot>
+    <Rating
+      color="brand"
+      {...typeof rating === 'number' ? { value: rating } : rating}
+    />
+    <Tagline text={tagline} />
+    <Badge {...badge} />
+    <Heading
+      {level}
+      text={heading}
+    />
+    <Text
+      lead={level === 1}
+      text={text}
+    />
+    <List items={list} />
+    <Price value={price} />
+  </slot>
+</Element>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .writeup {
+      display: flex;
+      position: relative;
+      flex-direction: column;
+      align-items: inherit;
+      gap: var(--space-3);
+      text-align: inherit;
+
+      &.align-start {
+        align-items: flex-start;
+        text-align: left;
+      }
+
+      &.align-center {
+        align-items: center;
+        text-align: center;
+      }
+
+      &.align-end {
+        align-items: flex-end;
+        text-align: right;
+      }
+    }
+  }
+</style>

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>