fulldev-ui 0.5.0-beta.8 → 0.6.0-beta.0

package/src/components/Toc.astro

@@ -1,22 +1,27 @@
 ---
 import type { ComponentProps, 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'
+import Links from './Links.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'div'> {
   heading?: ComponentProps<typeof Heading>['text']
   render?: CollectionEntry<'pages'>['render'] | undefined
 }
 
-const { size = 'sm', heading, render, ...rest } = Astro.props
+const { size = 'sm', heading = 'On this page', render, ...rest } = Astro.props
 
 const headings = render ? (await render())?.headings : []
 const filteredHeadings = headings?.filter(
   (heading: any) => heading.depth >= 2 && heading.depth <= 4
 )
+const links = filteredHeadings?.map((button: any) => ({
+  text: button.text,
+  href: `#${button.slug}`,
+  class: `depth-${button.depth}`,
+}))
 ---
 
 <Element
@@ -26,45 +31,32 @@ const filteredHeadings = headings?.filter(
   {...rest}
 >
   <Heading
-    level={6}
+    level={5}
     text={heading}
+    {size}
+  />
+  <Links
+    direction="column"
+    {links}
+    {size}
   />
-  {
-    filteredHeadings?.map((button: any) => (
-      <Button
-        class:list={`depth-${button.depth}`}
-        href={`#${button.slug}`}
-        variant="link"
-        text={button.text}
-      />
-    ))
-  }
 </Element>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     .toc {
-      display: none;
+      @apply sticky bottom-0 z-10 -mt-14 hidden w-52 shrink-0 flex-col items-start justify-start gap-3 overflow-y-auto py-14 md:flex;
+      @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
 
-      @media (min-width: 1024px) {
-        display: flex;
-        position: sticky;
-        top: calc(var(--header-height, 0px) + var(--space-6));
-        bottom: 0;
-        flex-shrink: 0;
-        flex-direction: column;
-        justify-content: flex-start;
-        gap: var(--space-4);
-        z-index: 10;
-        min-width: calc(var(--space-7) * 3);
+      top: var(--header-height, 0px);
+      max-height: calc(100vh - var(--header-height, 0px));
 
-        .depth-3 {
-          padding-left: var(--space-4);
-        }
+      .depth-3 {
+        @apply pl-3;
+      }
 
-        .depth-4 {
-          padding-left: var(--space-5);
-        }
+      .depth-4 {
+        @apply relative pl-6;
       }
     }
   }

package/src/components/Writeup.astro

@@ -9,12 +9,16 @@ 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'
+import Lead from './Lead.astro'
+import Paragraph from './Paragraph.astro'
 
 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']
+  lead?: ComponentProps<typeof Lead>['text']
+  paragraph?: ComponentProps<typeof Paragraph>['text']
   text?: ComponentProps<typeof Text>['text']
   list?: ComponentProps<typeof List>['items']
   align?: 'start' | 'center' | 'end' | undefined
@@ -30,45 +34,59 @@ const {
   badge,
   tagline,
   heading,
+  lead,
+  paragraph,
   text,
   list,
   price,
+  size,
   ...rest
 } = Astro.props
 ---
 
 <Element
   class:list="writeup"
+  {size}
   {...rest}
 >
   <slot>
     <Rating
-      color="brand"
+      {size}
       {...typeof rating === 'number' ? { value: rating } : rating}
     />
     <Tagline text={tagline} />
-    <Badge {...badge} />
+    <Badge
+      {size}
+      {...badge}
+    />
     <Heading
+      {size}
       {level}
       text={heading}
     />
-    <Text
-      lead={level === 1}
-      text={text}
+    <Lead
+      {size}
+      text={lead}
+    />
+    <Paragraph
+      {size}
+      text={paragraph}
+    />
+    <List
+      items={list}
+      {size}
     />
-    <List items={list} />
     <Price value={price} />
   </slot>
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .writeup {
       display: flex;
       position: relative;
       flex-direction: column;
       align-items: inherit;
-      gap: var(--space-3);
       text-align: inherit;
 
       &.align-start {

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/components/sections.astro

@@ -18,7 +18,7 @@ const { sections, ...rest } = Astro.props
   {sections?.map((section) => <Section {...section} />)}
 </Element>
 
-<style is:global lang="scss">
+<style is:global >
   @layer fulldev {
     .sections {
       display: flex;

package/src/content/pages/blocks/_categories.mdx

@@ -1,5 +1,5 @@
 ---
-presets: [docs, blocks]
+presets: [docs]
 
 title: Categories
 ---

package/src/content/pages/blocks/_footer.mdx

@@ -1,5 +1,5 @@
 ---
-presets: [docs, blocks]
+presets: [docs]
 
 title: Footer
 ---

package/src/content/pages/blocks/_header.mdx

@@ -1,5 +1,5 @@
 ---
-presets: [docs, blocks]
+presets: [docs]
 
 title: Header
 ---
@@ -151,7 +151,6 @@ import Header from 'fulldev-ui/components/Header.astro'
     },
   ]}
   position="relative"
-  color="brand"
 />
 ```
 
@@ -182,6 +181,5 @@ import Header from 'fulldev-ui/components/Header.astro'
     },
   ]}
   position="relative"
-  color="brand"
 />
 ```

package/src/content/pages/blocks/_jobs.mdx

@@ -1,5 +1,5 @@
 ---
-presets: [docs, blocks]
+presets: [docs]
 
 title: Jobs
 ---

package/src/content/pages/blocks/_prices.mdx

@@ -1,5 +1,5 @@
 ---
-presets: [docs, blocks]
+presets: [docs]
 
 title: Prices
 ---

package/src/content/pages/blocks/_product.mdx

@@ -1,5 +1,5 @@
 ---
-presets: [docs, blocks]
+presets: [docs]
 
 title: Product
 ---

package/src/content/pages/blocks/_products.mdx

@@ -1,5 +1,5 @@
 ---
-presets: [docs, blocks]
+presets: [docs]
 
 title: Products
 ---

package/src/content/pages/blocks/_stats.mdx

@@ -1,5 +1,5 @@
 ---
-presets: [docs, blocks]
+presets: [docs]
 
 title: Stats
 ---

package/src/content/pages/blocks/banner.mdx

@@ -1,5 +1,5 @@
 ---
-presets: [docs, blocks]
+presets: [docs]
 
 title: Banner
 ---

package/src/content/pages/blocks/colleagues.mdx

@@ -1,5 +1,5 @@
 ---
-presets: [docs, blocks]
+presets: [docs]
 
 title: Colleagues
 ---
@@ -10,7 +10,6 @@ import Colleagues from 'fulldev-ui/blocks/Colleagues.astro'
 ---
 
 <Colleagues
-  align="start"
   heading="Meet the team"
   text="Our team is made up of experienced professionals who are dedicated to helping you achieve your goals."
   panel