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

package/src/components/Search.astro

@@ -1,59 +1,123 @@
 ---
-import Dialog from 'fulldev-ui/components/Dialog.astro'
+import { getCollection } from 'astro:content'
+import { getHref } from 'fulldev-ui/utils/getHref'
+import Button from './Button.astro'
+import Element from './Element.astro'
+import Heading from './Heading.astro'
+import Input from './Input.astro'
+import Paragraph from './Paragraph.astro'
 
-const { variant = 'secondary', ...rest } = Astro.props
+const pages = await getCollection('pages')
+const products = await getCollection('products')
+const categories = await getCollection('categories')
+const posts = await getCollection('posts')
+const docs = await getCollection('docs')
+const entries = [...pages, ...categories, ...products, ...posts, ...docs]
 ---
 
-<Dialog
-  class:list="search"
-  id="search"
+<script>
+  document.addEventListener('astro:page-load', () => {
+    const input = document.querySelector('.search-input')
+    const items = document.querySelectorAll('.search-item')
+
+    input?.addEventListener('input', (e) => {
+      if (!(e.target instanceof HTMLInputElement)) return
+      const value = e.target.value.toLowerCase()
+      items.forEach((item) => {
+        if (!(item instanceof HTMLElement)) return
+
+        const title =
+          item.querySelector('.heading')?.textContent?.toLowerCase() || ''
+        const description =
+          item.querySelector('.paragraph')?.textContent?.toLowerCase() || ''
+
+        const isVisible = title.includes(value) || description.includes(value)
+        item.classList.toggle('hide', !isVisible)
+      })
+    })
+  })
+</script>
+
+<Button
+  class:list="search-button"
+  variant={Astro.props.variant}
+  size="sm"
   icon="search"
-  {variant}
-  {...rest}
+  onclick={`document.getElementById('search').showModal()`}
 />
 
-<style is:global lang="scss">
-  :root {
-    --pagefind-ui-primary: var(--brand-11);
-    --pagefind-ui-text: var(--base-12);
-    --pagefind-ui-background: var(--base-2);
-    --pagefind-ui-border: var(--base-6);
-    --pagefind-ui-tag: var(--base-6);
-  }
+<dialog
+  class="search"
+  id="search"
+  onclick={`event.target === this && this.close()`}
+>
+  <Element class:list="search-container">
+    <Element class:list="search-content">
+      <Input
+        class:list="search-input"
+        placeholder="Search"
+        icon="search"
+      />
+      <Element class:list="search-list">
+        {
+          entries.map(({ collection, slug, data }) => (
+            <Element
+              as="a"
+              href={getHref(slug)}
+              class="search-item hide"
+            >
+              <Heading
+                text={data.title}
+                as="h6"
+                size="md"
+              />
+              <Paragraph
+                set:text={'description' in data ? data.description : undefined}
+              />
+            </Element>
+          ))
+        }
+      </Element>
+    </Element>
+  </Element>
+</dialog>
 
-  @media (max-width: 1023.999px) {
-    .search,
-    #search,
-    #search-button {
-      display: none !important;
-    }
-  }
+<style is:global>
+  @layer fulldev {
+    .search {
+      @apply container h-full w-full max-w-screen-md rounded-lg !border-none bg-transparent py-24 outline-none backdrop:bg-black/50;
 
-  .dialog div {
-    width: 100%;
-  }
+      &:is(.dark &) {
+        color-scheme: dark;
+      }
 
-  .pagefind-ui__search-input {
-    outline: none !important;
-    border: 1px solid var(--base-7);
-    color: var(--base-11);
+      .search-container {
+        @apply w-full overflow-hidden rounded-lg border bg-background shadow-md;
+      }
 
-    &::placeholder {
-      color: var(--base-11);
-    }
+      .search-content {
+        @apply max-h-[400px] w-full overflow-y-auto;
+      }
 
-    &:hover {
-      outline: none;
-    }
+      .input {
+        @apply m-5;
+      }
 
-    &:focus {
-      outline: none;
-      box-shadow: inset 0 0 0 2px var(--base-8);
-      border-color: var(--base-8);
-    }
-  }
+      .search-list {
+        @apply flex h-full w-full shrink grow-0 flex-col;
+      }
+
+      .search-item {
+        @apply border-t p-5 transition-colors hover:bg-accent;
 
-  .pagefind-ui__search-clear {
-    background: transparent !important;
+        &.hide {
+          @apply hidden;
+        }
+      }
+
+      .paragraph {
+        @apply mt-2 truncate text-sm text-muted-foreground;
+      }
+    }
   }
 </style>

package/src/components/Section.astro

@@ -1,255 +1,26 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
-import Buttons from 'fulldev-ui/components/Buttons.astro'
-import type Card from 'fulldev-ui/components/Card.astro'
-import Cards from 'fulldev-ui/components/Cards.astro'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Writeup from 'fulldev-ui/components/Writeup.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props.js'
 
-interface Props
-  extends GlobalProps,
-    ComponentProps<typeof Writeup>,
-    HTMLAttributes<'section'> {
-  image?: ComponentProps<typeof Image>
-  position?: ComponentProps<typeof Image>['position']
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-  button?: ComponentProps<typeof Button> | undefined
-  variant?: ComponentProps<typeof Button>['variant']
-  cards?: ComponentProps<typeof Cards>['cards']
-  panel?: ComponentProps<typeof Card>['panel']
-  component?: string
-  structure?:
-    | ComponentProps<typeof Cards>['structure']
-    | 'column'
-    | 'split'
-    | 'spread'
+interface Props extends HTMLAttributes<'section'> {
+  as?: HTMLTag
 }
 
-const {
-  cards,
-  structure = cards ? 'grid' : 'column',
-  align = 'start',
-  level = 2,
-  size = 'md',
-  badge,
-  tagline,
-  rating,
-  heading,
-  text,
-  list,
-  button,
-  buttons,
-  variant,
-  panel,
-  image,
-  theme,
-  position,
-  ...rest
-} = Astro.props
-
-const { component, ...props } = Astro.props
-
-const allComponents = {
-  ...import.meta.glob('/src/**/*.astro'),
-  ...import.meta.glob('../../**/*.astro'),
-}
-
-const componentPath = Object.keys(allComponents).find(
-  (path) => path.split('/').pop()?.split('.')[0] === component
-)
-
-const Component =
-  componentPath && (await (allComponents[componentPath] as any)()).default
+const { as = 'section', ...rest } = Astro.props
 ---
 
-{
-  Component ? (
-    <Component {...props} />
-  ) : (
-    <Element
-      class:list="section"
-      as="section"
-      panel={!cards && panel}
-      theme={cards ? undefined : theme}
-      structure={
-        structure === 'grid' ||
-        structure === 'carousel' ||
-        structure === 'stack'
-          ? text
-            ? 'column'
-            : 'spread'
-          : structure
-      }
-      {align}
-      {size}
-      {...rest}
-    >
-      <Element class:list="segment">
-        <slot name="segment">
-          <slot name="writeup">
-            <Writeup
-              {level}
-              {rating}
-              {badge}
-              {tagline}
-              {heading}
-              {text}
-              {list}
-            />
-          </slot>
-          <slot name="buttons">
-            <Button
-              {variant}
-              {...button}
-            />
-            <Buttons
-              {variant}
-              {buttons}
-            />
-          </slot>
-        </slot>
-      </Element>
-      <slot>
-        <Cards
-          level={(level + 2) as any}
-          size={size === 'lg' ? 'md' : 'sm'}
-          structure={
-            structure === 'grid' ||
-            structure === 'masonry' ||
-            structure === 'stack' ||
-            structure === 'carousel' ||
-            structure === 'bento'
-              ? structure
-              : undefined
-          }
-          position={cards ? position : undefined}
-          {theme}
-          {cards}
-          {panel}
-          {position}
-        />
-        <Image
-          position={cards ? undefined : position}
-          {...image}
-        />
-      </slot>
-    </Element>
-  )
-}
+<Element
+  class:list="section"
+  {as}
+  {...rest}
+>
+  <slot />
+</Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .section {
-      --inset-top: 0px;
-      --inset-left: var(--gutter);
-      --inset-right: var(--gutter);
-      --inset-bottom: var(--spacer);
-
-      display: flex;
-      position: relative;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--space-6) var(--space-7);
-      padding: var(--spacer) var(--gutter);
-
-      .segment {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: var(--space-5);
-        z-index: 1;
-      }
-
-      &.panel {
-        margin: var(--spacer) var(--gutter);
-        border: 1px solid var(--base-a6);
-        border-radius: var(--radius-2);
-        background-color: var(--base-2);
-        padding: min(var(--gutter), var(--spacer));
-        overflow: hidden;
-      }
-
-      &.reverse {
-        --inset-top: var(--spacer);
-        --inset-left: var(--gutter);
-        --inset-right: var(--gutter);
-        --inset-bottom: 0px;
-
-        &:not(.structure-split) {
-          .segment {
-            order: 999;
-          }
-        }
-
-        @media (min-width: 1024px) {
-          .segment {
-            order: 999;
-          }
-        }
-      }
-
-      &.structure-column {
-        display: flex;
-        flex-direction: column;
-
-        &.align-center {
-          align-items: center;
-
-          .segment {
-            align-items: center;
-            text-align: center;
-          }
-        }
-      }
-
-      &.structure-split {
-        display: grid;
-        grid-template-columns: 1fr;
-        width: 100%;
-
-        @media (min-width: 1024px) {
-          --inset-top: var(--spacer);
-          --inset-left: 0px;
-          --inset-right: var(--gutter);
-          --inset-bottom: var(--spacer);
-
-          grid-auto-columns: 1fr;
-          grid-auto-flow: column;
-
-          &.reverse {
-            --inset-right: 0px;
-            --inset-left: var(--gutter);
-          }
-        }
-
-        &.align-center {
-          align-items: center;
-        }
-      }
-
-      &.structure-spread {
-        display: flex;
-        flex-direction: column;
-
-        .segment {
-          flex-direction: row;
-          justify-content: space-between;
-          width: 100%;
-        }
-
-        &.align-center {
-          .segment {
-            align-items: center;
-
-            .writeup {
-              align-items: flex-start;
-            }
-          }
-        }
-      }
+      @apply relative w-full bg-background py-16 first:py-8;
     }
   }
 </style>

package/src/components/Select.astro

@@ -15,34 +15,37 @@ interface Props extends GlobalProps, HTMLAttributes<'select'> {
 const {
   label,
   placeholder,
+  name = label || placeholder,
+  id = name,
+  size = 'md',
   options,
   value,
-  name,
-  required,
-  disabled,
-  onchange,
   ...rest
 } = Astro.props
 ---
 
 <Element
+  if={options}
   class:list="select"
-  {...rest}
+  as="label"
+  for={id}
+  {size}
 >
   <Label
     for={name}
     text={label}
   />
+  <Icon name="chevron-down" />
   <Element
+    class:list="select-select"
     as="select"
-    if={name || options}
-    id={name}
+    if={id}
+    {id}
     {name}
-    {required}
-    {disabled}
-    {onchange}
+    {...rest}
   >
     <Element
+      class:list="select-option"
       as="option"
       value={placeholder}
       set:html={placeholder}
@@ -52,6 +55,7 @@ const {
     {
       options?.map((option: any) => (
         <Element
+          class:list="select-option"
           as="option"
           selected={value === option}
           set:html={option}
@@ -61,67 +65,53 @@ const {
     }
     <slot />
   </Element>
-  <Icon name="chevron-down" />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .select {
-      display: flex;
-      position: relative;
-      flex-direction: column;
-      gap: var(--space-1);
-      width: 100%;
+      @apply relative flex flex-col gap-1.5;
 
       .icon {
-        position: absolute;
-        right: var(--space-4);
-        bottom: var(--space-4);
-        width: var(--text-2);
-        height: var(--text-2);
-        pointer-events: none;
+        @apply pointer-events-none absolute;
       }
 
-      select {
-        display: flex;
-        position: relative;
-        align-items: center;
-        appearance: none;
-        appearance: none;
-        outline: none;
-        border: 1px solid var(--color-6);
-        border-radius: var(--radius-1);
-        background-color: transparent;
-        padding-right: calc(var(--text-2) + 2 * var(--space-4));
-        padding-left: var(--space-4);
-        width: 100%;
-        min-width: var(--space-4);
-        height: calc(var(--text-2) + 2 * var(--space-4));
-        color: var(--color-11);
-        font-size: var(--text-2);
-        line-height: 1.25;
+      .select-select {
+        @apply flex w-full appearance-none rounded-md border border-input bg-background pr-10 text-sm ring-offset-background;
+        @apply file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground;
+        @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+        @apply disabled:pointer-events-none disabled:opacity-50;
+        @apply [&[readonly]]:pointer-events-none;
+      }
 
-        &:hover {
-          outline: none;
+      &.size-sm {
+        .select-select {
+          @apply h-9 px-2.5 py-1.5 pr-9 text-xs;
         }
 
-        &:focus {
-          outline: none;
-          box-shadow: inset 0 0 0 2px var(--color-7);
-          border-color: var(--color-7);
+        .icon {
+          @apply bottom-2 right-2;
         }
+      }
 
-        &:disabled {
-          opacity: 50%;
-          cursor: not-allowed;
-          pointer-events: none;
+      &.size-md {
+        .select-select {
+          @apply h-10 px-3 py-2 pr-10 text-sm;
+        }
+
+        .icon {
+          @apply bottom-2.5 right-2.5;
         }
       }
 
-      option {
-        color: var(--text);
-        font-size: var(--text-2);
-        line-height: 1;
+      &.size-lg {
+        .select-select {
+          @apply h-12 px-3.5 py-2.5 pr-11 text-base;
+        }
+
+        .icon {
+          @apply bottom-3.5 right-3.5;
+        }
       }
     }
   }