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

package/src/components/Element.astro

@@ -15,6 +15,12 @@ const {
   reverse,
   open,
   lead,
+  current,
+  direction,
+  center,
+  frame,
+  dark,
+  inset,
   ...rest
 } = Astro.props
 
@@ -26,22 +32,24 @@ const render = 'if' in rest ? rest.if : slot?.trim().length > 0
   render && (
     <As
       class:list={[
-        'root',
         {
           contrast,
           panel,
           open,
           reverse,
-          lead,
+          current,
+          center,
+          inset,
+          dark,
           [`size-${size}`]: size,
           [`color-${color}`]: color,
-          [`theme-${theme}`]: theme,
           [`level-${level}`]: level,
+          [`frame-${frame}`]: frame,
           [`variant-${variant}`]: variant,
           [`structure-${structure}`]: structure,
           [`align-${align}`]: align,
           [`position-${position}`]: position,
-          [`position-${position}`]: position,
+          [`direction-${direction}`]: direction,
         },
       ]}
       {...rest}
@@ -51,8 +59,8 @@ const render = 'if' in rest ? rest.if : slot?.trim().length > 0
   )
 }
 
-<style is:global lang="scss">
-  @import '@unocss/reset/tailwind.css' layer(fulldev);
-  @import 'fulldev-ui/css/color.css';
-  @import 'fulldev-ui/css/size.css';
+<style is:global>
+  @import 'tailwindcss/base' layer(fulldev);
+  @import 'fulldev-ui/css/theme' layer(fulldev);
+  @import 'tailwindcss/components';
 </style>

package/src/components/Form.astro

@@ -8,12 +8,14 @@ import Textarea from 'fulldev-ui/components/Textarea.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
 interface Props extends GlobalProps, HTMLAttributes<'form'> {
-  fields: (
-    | ComponentProps<typeof Input>
-    | ComponentProps<typeof Select>
-    | (ComponentProps<typeof Textarea> & { type?: 'textarea' | undefined })
-  )[]
   submit?: ComponentProps<typeof Button>['text']
+  fields?:
+    | (
+        | ComponentProps<typeof Input>
+        | ComponentProps<typeof Select>
+        | (ComponentProps<typeof Textarea> & { type?: 'textarea' | undefined })
+      )[]
+    | undefined
 }
 
 const { fields, submit, ...rest } = Astro.props
@@ -25,25 +27,24 @@ const { fields, submit, ...rest } = Astro.props
   {...rest}
 >
   {
-    fields.map((field) => {
+    fields?.map((field) => {
       if ('options' in field) return <Select {...field} />
       if ('type' in field && field.type === 'textarea')
         return <Textarea {...field} />
       return <Input {...(field as any)} />
     })
   }
+  <slot />
   <Button
     type="submit"
     text={submit}
   />
 </Element>
 
-<style is:global lang="scss">
-  .form {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-    width: 100%;
-    max-width: calc(var(--space-4) * 44);
+<style is:global>
+  @layer fulldev {
+    .form {
+      @apply flex w-full max-w-screen-md flex-col gap-4;
+    }
   }
 </style>

package/src/components/Gallery.astro

@@ -0,0 +1,172 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+
+interface Props {
+  images: (ComponentProps<typeof Image> | ComponentProps<typeof Image>['src'])[]
+}
+
+const { images } = Astro.props
+
+const hasMultiple = images?.length > 1
+const hasMany = images?.length > 5
+---
+
+<script>
+  function scrollLeft(carousel: HTMLElement) {
+    carousel.scrollLeft -= carousel.clientWidth
+  }
+
+  function scrollRight(carousel: HTMLElement) {
+    carousel.scrollLeft += carousel.clientWidth
+  }
+
+  function scrollTo(carousel: HTMLElement, index: number) {
+    carousel.scrollLeft = index * carousel.clientWidth
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    const galleries = document.querySelectorAll('.gallery')
+    galleries.forEach((gallery) => {
+      // Apply left and right event listeners to large and small carousels
+      const containers = gallery.querySelectorAll(
+        '.gallery-small, .gallery-large'
+      )
+      containers?.forEach((element) => {
+        const left = element?.querySelector('.gallery-left')
+        const right = element?.querySelector('.gallery-right')
+        const carousel = element?.querySelector(
+          '.gallery-carousel'
+        ) as HTMLElement
+
+        left?.addEventListener('click', () => scrollLeft(carousel))
+        right?.addEventListener('click', () => scrollRight(carousel))
+      })
+
+      // Apply item click event listener to small carousel items
+      const items = gallery.querySelectorAll('.gallery-small .gallery-item')
+      const largeCarousel = gallery.querySelector(
+        '.gallery-large .gallery-carousel'
+      ) as HTMLElement
+      items?.forEach((item, i) => {
+        item.addEventListener('click', () => {
+          scrollTo(largeCarousel, i)
+        })
+      })
+    })
+  })
+</script>
+
+<Element class:list="gallery">
+  <Element class:list="gallery-large">
+    <Button
+      if={hasMultiple}
+      class="gallery-left"
+      icon="chevron-left"
+      variant="secondary"
+      size="sm"
+    />
+    <Element class:list="gallery-carousel">
+      {
+        images?.map((image: any) => (
+          <Element class:list="gallery-item">
+            <Image {...(typeof image === 'string' ? { src: image } : image)} />
+          </Element>
+        ))
+      }
+    </Element>
+    <Button
+      if={hasMultiple}
+      class="gallery-right"
+      icon="chevron-right"
+      variant="secondary"
+      size="sm"
+    />
+  </Element>
+  <Element
+    if={hasMultiple}
+    class:list="gallery-small"
+  >
+    <Button
+      if={hasMany}
+      class="gallery-left"
+      icon="chevron-left"
+      variant="secondary"
+      size="sm"
+    />
+    <Element class:list="gallery-carousel">
+      {
+        images?.map((image: any) => (
+          <Element
+            as="button"
+            class:list="gallery-item"
+          >
+            <Image {...(typeof image === 'string' ? { src: image } : image)} />
+          </Element>
+        ))
+      }
+    </Element>
+    <Button
+      if={hasMany}
+      class="gallery-right"
+      icon="chevron-right"
+      variant="ghost"
+      size="sm"
+    />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .gallery {
+      @apply relative flex flex-col gap-2;
+
+      .gallery-large,
+      .gallery-small {
+        @apply relative flex items-center;
+      }
+
+      .image {
+        @apply rounded;
+      }
+
+      .button {
+        @apply absolute z-10 bg-secondary-hover opacity-50 hover:opacity-100;
+      }
+
+      .gallery-left {
+        @apply left-2;
+      }
+
+      .gallery-right {
+        @apply right-2;
+      }
+
+      .gallery-carousel {
+        @apply inline-flex w-full snap-x snap-mandatory overflow-x-auto scroll-smooth scrollbar-none;
+      }
+
+      .gallery-large {
+        .gallery-item {
+          @apply flex w-full min-w-full snap-start;
+        }
+
+        .image {
+          @apply h-full max-h-[768px] w-full object-contain;
+        }
+      }
+
+      .gallery-small {
+        .gallery-carousel {
+          @apply gap-2;
+        }
+
+        .gallery-item {
+          @apply min-w-[calc(20%-0.4rem)] snap-start overflow-hidden transition hover:opacity-80;
+        }
+      }
+    }
+  }
+</style>

package/src/components/Head.astro

@@ -6,7 +6,7 @@ import type Layout from 'fulldev-ui/layouts/Layout.astro'
 
 type Props = ComponentProps<typeof Layout>
 
-const { title, description, image, seo, code, render } = Astro.props
+const { theme, title, description, image, seo, code, render } = Astro.props
 
 const renderTitle = render && (await render()).headings[0]?.text
 const mergedTitle = seo?.title || title || renderTitle
@@ -25,6 +25,10 @@ const mergedImage =
     name="generator"
     content={Astro.generator}
   />
+  <link
+    rel="canonical"
+    href={Astro.url.href.endsWith('/') ? Astro.url.href : Astro.url.href + '/'}
+  />
   <ViewTransitions />
   <AstroSeo
     title={mergedTitle ?? ''}
@@ -43,4 +47,51 @@ const mergedImage =
     } as any}
   />
   <Fragment set:html={code?.head} />
+
+  <script is:inline define:vars={{ theme }}>
+    function setTheme(document) {
+      const value = localStorage.getItem('theme') || theme
+
+      const isDark =
+        value === 'dark' ||
+        (value === 'system' &&
+          window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+      document.documentElement.classList.toggle('dark', isDark)
+
+      document.querySelectorAll('.themer').forEach((themer) => {
+        themer?.querySelectorAll('option').forEach((option) => {
+          option.selected = option.value === value
+        })
+      })
+    }
+
+    function setOption(document) {
+      const value = localStorage.getItem('theme') || theme
+
+      document.querySelectorAll('.themer').forEach((themer) => {
+        themer?.querySelectorAll('option').forEach((option) => {
+          option.selected = option.value === value
+        })
+      })
+    }
+
+    setTheme(document)
+    setOption(document)
+
+    document.addEventListener('astro:before-swap', (event) => {
+      setTheme(event.newDocument)
+    })
+
+    document.addEventListener('astro:page-load', (event) => {
+      setOption(document)
+    })
+  </script>
+
+  <!-- TrustBox script -->
+  <script
+    type="text/javascript"
+    src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js"
+    async
+  ></script>
 </head>

package/src/components/Header.astro

@@ -1,136 +1,126 @@
 ---
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Cart from 'fulldev-ui/components/Cart.astro'
+import Drawer from 'fulldev-ui/components/Drawer.astro'
 import Element from 'fulldev-ui/components/Element.astro'
-import Logo from 'fulldev-ui/components/experimental/Logo.astro'
-import ThemeSelect from 'fulldev-ui/components/ThemeSelect.astro'
+import Links from 'fulldev-ui/components/Links.astro'
+import Logo from 'fulldev-ui/components/Logo.astro'
+import Menu from 'fulldev-ui/components/Menu.astro'
+import Socials from 'fulldev-ui/components/Socials.astro'
+import Themer from 'fulldev-ui/components/Themer.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Cart from './Cart.astro'
-import Drawer from './Drawer.astro'
-import type Menu from './Menu.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'header'> {
   logo?: ComponentProps<typeof Logo>
   company?: ComponentProps<typeof Logo>['company']
   buttons?: ComponentProps<typeof Buttons>['buttons']
+  links?: ComponentProps<typeof Links>['links']
   menu?: ComponentProps<typeof Menu>['groups']
   panel?: boolean | undefined
   search?: boolean | undefined
   open?: boolean | undefined
-  themeselect?: boolean | undefined
   cart?: string | undefined
+  socials?: ComponentProps<typeof Socials>['socials']
+  themer?: boolean | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
 }
 
 const {
   size = 'sm',
-  open = true,
+  open,
   logo,
   company,
   buttons,
+  links,
   search,
   panel,
+  socials,
   menu,
-  themeselect,
   cart,
+  themer,
   ...rest
 } = Astro.props
 ---
 
 <Element
-  class:list={['header']}
+  class:list="header"
   as="header"
-  {panel}
   {size}
   {open}
   {...rest}
 >
-  <Logo
-    {company}
-    {...typeof logo === 'string' ? { src: logo } : logo}
-  />
-  <Buttons
-    {buttons}
-    variant="link"
-  />
-  {themeselect && <ThemeSelect />}
-  <Drawer
-    icon="menu-2"
-    id="menu"
-    {logo}
-    {company}
-    {buttons}
-    {menu}
-  />
-  <Cart
-    if={cart}
-    heading={cart}
-  />
+  <Element class:list="header-container">
+    <Logo
+      {company}
+      {size}
+      {...typeof logo === 'string' ? { src: logo } : logo}
+    />
+    <Links
+      class:list="header-links"
+      {size}
+      {links}
+    />
+    <Socials
+      {size}
+      variant="ghost"
+      {socials}
+    />
+    <Buttons
+      class:list="header-buttons"
+      {size}
+      {buttons}
+    >
+      <Themer
+        if={themer}
+        {size}
+      />
+      <Cart
+        if={cart}
+        variant="secondary"
+        heading={cart}
+        {size}
+      />
+      <Drawer
+        class:list={['header-button']}
+        icon="menu-2"
+        id="menu"
+        variant="secondary"
+        {logo}
+        {company}
+        {buttons}
+        {links}
+        {menu}
+        {size}
+      />
+    </Buttons>
+  </Element>
 </Element>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     .header {
-      display: flex;
-      position: sticky;
-      top: 0;
-      left: 0;
-      justify-content: flex-end;
-      align-items: center;
-      gap: var(--space-4);
-      z-index: 20;
-      border-bottom-width: 1px;
-      border-style: solid;
-      border-color: var(--base-a6);
-      background-color: var(--base-2);
-      padding: 0 var(--gutter);
-      width: 100%;
-      height: var(--header-height);
-      overflow: hidden;
+      @apply sticky left-0 top-0 z-20 flex h-14 items-center overflow-hidden bg-background;
 
-      &,
-      & ~ * {
-        --header-height: 56px;
+      .header-container {
+        @apply container flex w-full items-center justify-between gap-6;
       }
 
-      &.panel {
-        margin: var(--space-4) var(--gutter);
-        border-width: 1px solid;
-        border-radius: var(--radius-2);
-        padding: var(--sapce-4) min(var(--gutter), var(--space-4));
-        width: auto;
-      }
-
-      .logo {
-        margin-right: auto;
+      &,
+      & ~ * {
+        --header-height: 3.5rem;
       }
 
-      @media (min-width: 1024px) {
-        &:not(.open) {
-          display: none;
-
-          & ~ * {
-            --header-height: 0px;
-          }
-        }
+      .header-links {
+        @apply mr-auto max-lg:hidden;
       }
 
-      .buttons {
-        display: none;
-
-        @media (min-width: 1024px) {
-          display: flex;
-          gap: var(--space-2);
-
-          .button.variant-link + .button {
-            margin-left: var(--space-3);
-          }
-        }
+      .header-socials {
+        @apply ml-auto max-lg:hidden;
       }
 
       .menu-button {
-        @media (min-width: 1024px) {
-          display: none;
-        }
+        @apply lg:hidden;
       }
     }
   }