fulldev-ui 0.3.36 → 0.4.0-beta.1

package/src/components/Toc.astro

@@ -0,0 +1,52 @@
+---
+import Column from 'fulldev-ui/components/Column.astro'
+import Link from 'fulldev-ui/components/Link.astro'
+import Heading from './Heading.astro'
+
+const { toc, headings } = Astro.props
+---
+
+<Column
+  class:list="toc"
+  as="aside"
+>
+  {
+    toc?.length && headings?.length > 0 && (
+      <>
+        <Heading
+          text="On this page"
+          level={6}
+        />
+        {headings.map(
+          (heading: { slug: string; depth: number; text: string }) => (
+            <Link
+              href={`#${heading.slug}`}
+              class="toc-link"
+              text={heading.text}
+            />
+          )
+        )}
+      </>
+    )
+  }
+</Column>
+
+<style lang="scss" is:global>
+  .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;
+    overflow-y: auto;
+
+    .toc-link {
+      font-size: var(--text-2);
+    }
+
+    @media (min-width: 1024px) {
+      display: flex !important;
+    }
+  }
+</style>

package/src/components/{structure/Wrap.astro → Wrap.astro}

@@ -1,29 +1,24 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
+import Root from 'fulldev-ui/components/Root.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
-  color?: 'base' | 'brand'
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  compact?: boolean
   align?: 'start' | 'center' | 'end'
 }
 
 const { align = 'center', ...rest } = Astro.props
 ---
 
-<Component
-  class:list={['wrap']}
+<Root
+  class:list="wrap"
   {align}
   {...rest}
 >
   <slot />
-</Component>
+</Root>
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('wrap') {
+  .wrap {
     display: flex;
     flex-wrap: wrap;
     justify-content: stretch;

package/src/components/docs/DecorativeBox.astro

@@ -0,0 +1,15 @@
+<div
+  {...Astro.props}
+  class:list={'decorative-box'}
+>
+</div>
+
+<style>
+  .decorative-box {
+    border: 1px solid;
+    border-radius: 4px;
+    min-width: 100px;
+    height: 100%;
+    min-height: 100px;
+  }
+</style>

package/src/components/docs/PropsTable.astro

@@ -0,0 +1,95 @@
+---
+import Table from 'fulldev-ui/components/Table.astro'
+import { readFileSync } from 'node:fs'
+
+const pathnameWithoutTrailingSlash = Astro.url.pathname.replace(/\/$/, '')
+const slug = pathnameWithoutTrailingSlash.split('/').pop() || ''
+const component = slug.charAt(0).toUpperCase() + slug.slice(1)
+
+const allComponents = await Astro.glob('../../components/**/*.astro')
+const found = allComponents.find(
+  (c) => c.file.split('/').pop()?.replace('.astro', '') === component
+)
+
+if (!found) return
+
+const componentFileContent = readFileSync(found.file, 'utf-8')
+
+const extractProps = (content: string) => {
+  const propsMatch = content.match(
+    /type Props(?:<[^>]+>)?\s*=\s*(?:HTMLAttributes<'[^']+'>\s*&\s*)?(?:Polymorphic<[^>]+>\s*&\s*)?([\s\S]*?)(?:}|$)/
+  )
+  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
+  }
+  return []
+}
+
+const extractDefaultProps = (content: 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, [, name, value]) => {
+          acc[name] =
+            value.startsWith("'") || value.startsWith('"')
+              ? value.slice(1, -1)
+              : value
+          return acc
+        },
+        {} as Record<string, 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'
+}
+
+const parsedProps = extractProps(componentFileContent)
+const parsedAstroProps = extractDefaultProps(componentFileContent)
+const asDefault = extractAsDefault(componentFileContent)
+---
+
+<Table
+  size="md"
+  header={['Prop', 'Type', 'Default']}
+  body={[
+    ...parsedProps.map((item) => [
+      item.name,
+      item.type,
+      parsedAstroProps[item.name] ?? '-',
+    ]),
+    ...(asDefault !== 'div'
+      ? [
+          ['as', 'HTMLTag', asDefault],
+          ['HTML Attributes', `Polymorphic<${asDefault}>`, '-'],
+        ]
+      : []),
+  ]}
+/>

package/src/components/experimental/Channel.astro

@@ -1,15 +1,18 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import { Box, Button, Column, Heading, Text } from 'fulldev-ui'
+import Button from 'fulldev-ui/components/Button.astro'
+import Column from 'fulldev-ui/components/Column.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Text from 'fulldev-ui/components/Text.astro'
+import Root from '../Root.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
   if?: any
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  size?: 'sm' | 'md' | 'lg'
   color?: 'base' | 'brand'
-  variant?: 'solid' | 'surface' | 'soft' | 'outline'
+  variant?: 'primary' | 'secondary' | 'tertiary'
   structure?: 'row' | 'column'
   level?: 1 | 2 | 3 | 4 | 5 | 6
-  compact?: boolean
   heading?: string
   text?: string
   icon?: string
@@ -18,10 +21,9 @@ type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
 }
 
 const {
-  variant = 'soft',
+  variant = 'secondary',
   structure = 'row',
   color = 'brand',
-  compact = true,
   level = 5,
   heading,
   target,
@@ -32,7 +34,7 @@ const {
 } = Astro.props
 ---
 
-<Box
+<Root
   class:list={'channel'}
   {structure}
   {...rest}
@@ -47,11 +49,14 @@ const {
   <Column>
     <Heading
       {level}
-      html={heading}
+      set:html={heading}
+    />
+    <Text
+      style={{ marginTop: 'var(--space-1)' }}
+      set:html={text}
     />
-    <Text html={text} />
   </Column>
-</Box>
+</Root>
 
 <style>
   .channel {

package/src/components/experimental/Form.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Root from 'fulldev-ui/components/Root.astro'
+
+type Props<As extends HTMLTag = 'form'> = Polymorphic<{ as: As }> & {
+  structure?: 'column' | 'row' | 'group'
+  space?: 'none' | 'auto'
+}
+
+const {
+  as = 'form',
+  space = 'auto',
+  structure = 'column',
+  ...rest
+} = Astro.props
+---
+
+<Root
+  class:list="form"
+  {as}
+  {structure}
+  {space}
+  {...rest}
+>
+  <slot />
+</Root>
+
+<style is:global lang="scss">
+  .form {
+    display: flex;
+    width: 100%;
+    max-width: calc(var(--space-4) * 44);
+  }
+</style>

package/src/components/experimental/Gallery.astro

@@ -0,0 +1,180 @@
+---
+import Icon from 'fulldev-ui/components/Icon.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+
+const { images, direction } = Astro.props
+---
+
+<script>
+  const carousel = document.querySelector('.gallery .large-carousel')
+  const icon = document.querySelector('.gallery .icon')
+  const smallImages = document.querySelectorAll('.gallery .small-image')
+
+  carousel &&
+    icon?.addEventListener('click', () => {
+      const carouselWidth = (carousel as HTMLElement).offsetWidth
+      const currentScroll = carousel.scrollLeft
+      const maxScroll = carousel.scrollWidth - carouselWidth
+
+      let scrollAmount = currentScroll + carouselWidth
+      if (scrollAmount > maxScroll) {
+        scrollAmount = 0 // Reset to beginning if we're at the end
+      }
+
+      carousel.scrollTo({
+        left: scrollAmount,
+        behavior: 'smooth',
+      })
+    })
+
+  carousel &&
+    smallImages?.forEach((image, i) => {
+      image.addEventListener('click', () => {
+        const imageWidth = (carousel as HTMLElement).offsetWidth
+        carousel.scrollTo({
+          left: i * imageWidth,
+          behavior: 'smooth',
+        })
+      })
+    })
+</script>
+
+<div
+  class:list={[
+    'full',
+    'gallery',
+    {
+      [`direction-${direction}`]: direction,
+    },
+  ]}
+>
+  <div class="large-container">
+    <div class="large-carousel">
+      {
+        images?.map((image: any) => (
+          <Image
+            class="large-image"
+            src={image}
+          />
+        ))
+      }
+    </div>
+    {
+      images?.length > 1 && (
+        <Icon
+          class="icon"
+          name="swipe-left"
+        />
+      )
+    }
+  </div>
+  <div class="small-carousel">
+    {
+      images?.length > 1 &&
+        images.map((image: any) => (
+          <Image
+            class="small-image"
+            src={image}
+          />
+        ))
+    }
+  </div>
+</div>
+
+<style is:global lang="scss">
+  .gallery {
+    display: flex;
+    position: relative;
+    column-gap: var(--space-4);
+    row-gap: var(--space-1);
+    flex-direction: column;
+
+    @media (min-width: 1024px) {
+      flex-direction: row-reverse;
+    }
+
+    .large-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      &:hover .icon {
+        opacity: 1;
+      }
+
+      .icon {
+        position: absolute;
+        right: var(--space-3);
+        opacity: 0.5;
+        animation: swipe-icon 1.6s ease-in-out infinite;
+        transition: opacity 0.2s ease-in-out;
+        font-size: calc(var(--text-2) * 1.7);
+
+        @media (min-width: 1024px) {
+          display: none;
+        }
+      }
+
+      @keyframes swipe-icon {
+        0%,
+        100% {
+          right: var(--space-3);
+        }
+        50% {
+          right: calc(var(--space-3) * 2);
+        }
+      }
+    }
+
+    .small-carousel,
+    .large-carousel {
+      --column-width: 100%;
+      display: flex;
+      position: relative;
+      align-items: flex-start;
+      gap: var(--space-4);
+
+      box-sizing: border-box;
+      padding-bottom: var(--space-4);
+      width: 100%;
+      overflow-x: auto;
+      scroll-behavior: smooth;
+      scroll-snap-type: x mandatory;
+
+      > .root {
+        flex-grow: 0;
+        flex-shrink: 0;
+        width: var(--column-width);
+        scroll-snap-align: center;
+      }
+
+      &.position-inset {
+        margin-right: calc(var(--inner-x) * -1);
+        margin-left: calc(var(--inner-x) * -1);
+        padding-right: var(--inner-x);
+        padding-left: var(--inner-x);
+        width: calc(100% + var(--inner-x) * 2);
+      }
+    }
+
+    .small-carousel {
+      --column-width: var(--space-7);
+
+      @media (min-width: 1024px) {
+        --column-width: 100%;
+
+        flex-direction: column;
+        width: 40%;
+      }
+    }
+
+    .small-image,
+    .large-image {
+    }
+
+    .small-image:hover {
+      opacity: 0.8;
+      cursor: pointer;
+    }
+  }
+</style>

package/src/components/experimental/GalleryVertical.astro

@@ -0,0 +1,161 @@
+---
+import Icon from 'fulldev-ui/components/Icon.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+
+const { images, direction } = Astro.props
+---
+
+<script>
+  const carousel = document.querySelector('.gallery .large-carousel')
+  const icon = document.querySelector('.gallery .icon')
+  const smallImages = document.querySelectorAll('.gallery .small-image')
+
+  carousel &&
+    icon?.addEventListener('click', () => {
+      const carouselWidth = (carousel as HTMLElement).offsetWidth
+      const currentScroll = carousel.scrollLeft
+      const maxScroll = carousel.scrollWidth - carouselWidth
+
+      let scrollAmount = currentScroll + carouselWidth
+      if (scrollAmount > maxScroll) {
+        scrollAmount = 0 // Reset to beginning if we're at the end
+      }
+
+      carousel.scrollTo({
+        left: scrollAmount,
+        behavior: 'smooth',
+      })
+    })
+
+  carousel &&
+    smallImages.forEach((image, i) => {
+      image.addEventListener('click', () => {
+        const imageWidth = (carousel as HTMLElement).offsetWidth
+        carousel.scrollTo({
+          left: i * imageWidth,
+          behavior: 'smooth',
+        })
+      })
+    })
+</script>
+
+<div
+  class:list={[
+    'full',
+    'gallery',
+    {
+      [`direction-${direction}`]: direction,
+    },
+  ]}
+>
+  <div class="large-container">
+    <div class="large-carousel">
+      {
+        images?.map((image: any) => (
+          <Image
+            class="large-image"
+            src={image}
+          />
+        ))
+      }
+    </div>
+    {
+      images?.length > 1 && (
+        <Icon
+          class="icon"
+          name="swipe-left"
+        />
+      )
+    }
+  </div>
+  <div class="small-carousel">
+    {
+      images?.length > 1 &&
+        images.map((image: any) => (
+          <Image
+            class="small-image"
+            src={image}
+          />
+        ))
+    }
+  </div>
+</div>
+
+<style is:global lang="scss">
+  .gallery {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    gap: var(--space-1);
+
+    .large-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      &:hover .icon {
+        opacity: 1;
+      }
+
+      .icon {
+        position: absolute;
+        right: var(--space-3);
+        opacity: 0.5;
+        animation: swipe-icon 1.6s ease-in-out infinite;
+        transition: opacity 0.2s ease-in-out;
+        font-size: calc(var(--text-2) * 1.7);
+      }
+
+      @keyframes swipe-icon {
+        0%,
+        100% {
+          right: var(--space-3);
+        }
+        50% {
+          right: calc(var(--space-3) * 2);
+        }
+      }
+    }
+
+    .small-carousel,
+    .large-carousel {
+      --column-width: 100%;
+      display: flex;
+      position: relative;
+      flex-direction: row;
+      align-items: flex-start;
+      gap: var(--space-4);
+
+      box-sizing: border-box;
+      padding-bottom: var(--space-4);
+      width: 100%;
+      overflow-x: auto;
+      scroll-behavior: smooth;
+      scroll-snap-type: x mandatory;
+
+      > .root {
+        flex-grow: 0;
+        flex-shrink: 0;
+        width: var(--column-width);
+        scroll-snap-align: center;
+      }
+
+      &.position-inset {
+        margin-right: calc(var(--inner-x) * -1);
+        margin-left: calc(var(--inner-x) * -1);
+        padding-right: var(--inner-x);
+        padding-left: var(--inner-x);
+        width: calc(100% + var(--inner-x) * 2);
+      }
+    }
+
+    .small-carousel {
+      --column-width: var(--space-7);
+    }
+
+    .small-image:hover {
+      opacity: 0.8;
+      cursor: pointer;
+    }
+  }
+</style>

package/src/components/{base → experimental}/Logo.astro

@@ -1,6 +1,6 @@
 ---
 import type { ComponentProps } from 'astro/types'
-import { Image } from 'fulldev-ui'
+import Image from 'fulldev-ui/components/Image.astro'
 
 type Props = Omit<ComponentProps<typeof Image>, 'position' | 'frame'> & {}
 
@@ -8,14 +8,12 @@ const { ...rest } = Astro.props
 ---
 
 <Image
-  class="logo"
+  class:list="logo"
   {...rest}
 />
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('logo') {
+  .logo {
     max-width: calc(15 * var(--space-2));
     height: 100%;
     object-fit: contain;