fulldev-ui 0.7.0-beta.9 → 0.7.0

package/src/components/Person.astro

@@ -1,43 +0,0 @@
----
-import Abstract from '@/components/Abstract.astro'
-import Avatar from '@/components/Avatar.astro'
-import Box from '@/components/Box.astro'
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<'div'> {
-  src?: string | undefined
-  heading?: string | undefined
-  text?: string | undefined
-}
-
-const { src, heading, text, ...rest } = Astro.props
----
-
-<Box
-  class:list="person"
-  {...rest}
->
-  <Avatar
-    {src}
-    alt={[heading, text].join(' - ')}
-  />
-  <Abstract>
-    <Box
-      as="h3"
-      set:html={heading}
-    />
-    <Fragment set:html={text} />
-  </Abstract>
-</Box>
-
-<style is:global>
-  @layer fulldev {
-    .person {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-2);
-      font-size: var(--text-sm);
-      line-height: var(--text-sm--line-height);
-    }
-  }
-</style>

package/src/components/Price.astro

@@ -1,46 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<'div'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  amount?: number | undefined
-}
-
-const formatPrice = (price: number): string => {
-  return `€${price?.toFixed(2).replace('.', ',').replace(',00', '')}`
-}
-
-const { size = 'md', amount, ...rest } = Astro.props
----
-
-<Box
-  class:list={`price size-${size}`}
-  {...rest}
->
-  {amount && <Fragment set:html={formatPrice(amount)} />}
-</Box>
-
-<style is:global>
-  @layer fulldev {
-    .price {
-      color: var(--color-foreground);
-      font-weight: var(--font-weight-medium);
-
-      &.size-sm {
-        font-size: var(--text-sm);
-        line-height: var(--text-sm--line-height);
-      }
-
-      &.size-md {
-        font-size: var(--text-base);
-        line-height: var(--text-base--line-height);
-      }
-
-      &.size-lg {
-        font-size: var(--text-lg);
-        line-height: var(--text-lg--line-height);
-      }
-    }
-  }
-</style>

package/src/components/Proof.astro

@@ -1,31 +0,0 @@
----
-import Abstract from '@/components/Abstract.astro'
-import Avatar from '@/components/Avatar.astro'
-import Box from '@/components/Box.astro'
-import Rating from '@/components/Rating.astro'
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<'div'> {
-  avatars?: ComponentProps<typeof Avatar>[]
-  rating?: ComponentProps<typeof Rating>['score']
-  text?: string
-}
-
-const { avatars, rating, text, ...rest } = Astro.props
----
-
-<Box
-  class:list="flex items-center gap-2 text-sm"
-  {...rest}
->
-  <Box class:list="flex -space-x-3">
-    {avatars?.map((avatar) => <Avatar {...avatar} />)}
-  </Box>
-  <Abstract>
-    <Rating
-      score={rating}
-      size="sm"
-    />
-    <Fragment set:html={text} />
-  </Abstract>
-</Box>

package/src/components/Props.astro

@@ -1,21 +0,0 @@
----
-import Box from './Box.astro'
-
-const slug = Astro.params.page
-const folder = slug?.split('/').slice(-2, -1)[0]
-const component = slug
-  ?.split('/')
-  .pop()
-  ?.replace(/^\w/, (c) => c.toUpperCase())
-const path = `src/${folder}/${component}.astro`
----
-
-<p>
-  Please reference
-  <Box
-    target="_blank"
-    href={`https://github.com/fulldotdev/ui/blob/main/${path}`}
-  >
-    {path}
-  </Box> for now.
-</p>

package/src/components/Prose.astro

@@ -1,28 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<'div'> {}
-
-const { ...rest } = Astro.props
----
-
-<Box
-  class:list={[
-    'prose',
-    'flex-flex-col w-full',
-    'child:mt-9 first:child:mt-0',
-    'headings:scroll-mt-20 headings:text-pretty headings:font-semibold headings:tracking-tight',
-    'h1:text-4xl h1:font-extrabold lg:h1:text-5xl',
-    'h2:h1:text-3xl',
-    'h3:text-2xl',
-    'h4:text-xl',
-    'h5:text-lg',
-    'h6:text-base',
-    'p:mt-6 p:leading-[1.8] p:text-foreground/80',
-    'img:p:rounded-lg',
-  ]}
-  {...rest}
->
-  <slot />
-</Box>

package/src/components/Rating.astro

@@ -1,36 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import Icon from '@/components/Icon.astro'
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<'div'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  score?: number | undefined
-}
-
-const { size = 'md', score, ...rest } = Astro.props
-
-const getIcon = (count: number) => {
-  if (!score) return
-  const difference = score - count
-  if (difference >= -0.25) return 'star-filled'
-  if (difference >= -0.75) return 'star-half-filled'
-  return 'star'
-}
----
-
-<Box
-  class:list="flex gap-1"
-  {...rest}
->
-  {
-    score &&
-      [1, 2, 3, 4, 5].map((count) => (
-        <Icon
-          class="!h-4 !w-4 !text-primary"
-          name={getIcon(count)}
-          {size}
-        />
-      ))
-  }
-</Box>

package/src/components/Search.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
-import {
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command'
-import { SearchIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-interface Props {
-  groups?: {
-    heading?: string
-    links?: {
-      text?: string
-      href?: string
-    }[]
-  }[]
-}
-
-const { groups } = defineProps<Props>()
-
-const open = ref(false)
-
-function handleOpenChange() {
-  open.value = !open.value
-}
-</script>
-
-<template>
-  <Button
-    @click="handleOpenChange"
-    size="sm"
-    class="gap-8"
-    variant="outline"
-  >
-    Zoeken...
-    <SearchIcon />
-  </Button>
-  <CommandDialog v-model:open="open">
-    <CommandInput placeholder="Typ om te zoeken..." />
-    <CommandList>
-      <CommandEmpty>Geen resultaten gevonden.</CommandEmpty>
-      <CommandGroup
-        v-for="group in groups"
-        :key="group.heading"
-        :heading="group.heading"
-      >
-        <CommandItem
-          v-for="item in group.links"
-          :key="item.text"
-          :value="item.text ?? ''"
-          as-child
-        >
-          <a :href="item.href">
-            {{ item.text }}
-          </a>
-        </CommandItem>
-      </CommandGroup>
-    </CommandList>
-  </CommandDialog>
-</template>

package/src/components/Section.astro

@@ -1,18 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
-
-interface Props extends HTMLAttributes<'section'> {
-  as?: HTMLTag
-}
-
-const { as = 'section', class: className, ...rest } = Astro.props
----
-
-<Box
-  class:list={['section relative w-full gap-x-8 gap-y-12 py-16', className]}
-  {as}
-  {...rest}
->
-  <slot />
-</Box>

package/src/components/Select.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import type { HTMLAttributes } from 'vue'
-import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
-import { useForwardPropsEmits } from 'radix-vue'
-
-interface Props extends SelectRootProps {
-  class?: HTMLAttributes['class']
-  options?: {
-    label: string
-    value: string
-  }[]
-  placeholder?: string
-}
-
-const { options, placeholder, class: className, ...props } = defineProps<Props>()
-
-const emits = defineEmits<SelectRootEmits>()
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <Select
-    :id="name"
-    v-bind="forwarded"
-  >
-    <SelectTrigger " :class="className">
-      <SelectValue :placeholder="placeholder || options?.[0]?.label" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectGroup>
-        <SelectItem
-          v-for="option in options"
-          :value="option.value"
-        >
-          {{ option.label }}
-        </SelectItem>
-      </SelectGroup>
-    </SelectContent>
-  </Select>
-</template>

package/src/components/Sidebar.astro

@@ -1,50 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<'aside'> {}
-
-const { ...rest } = Astro.props
----
-
-<Box
-  class:list="sidebar"
-  as="aside"
-  {...rest}
->
-  <slot />
-</Box>
-
-<style is:global>
-  @layer fulldev {
-    .sidebar {
-      display: none;
-      position: sticky;
-      top: var(--header-height);
-      flex-shrink: 0;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--spacing-8);
-      background-color: var(--color-background);
-      /* padding: var(--spacing-8); */
-      width: var(--sidebar-width);
-      max-width: var(--sidebar-width);
-      max-height: calc(100vh - var(--header-height, 0px));
-      overflow-y: auto;
-
-      /* TODO: scrollbar styling */
-      /* @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;
-      }
-
-      &,
-      & ~ * {
-        @media (min-width: 1024px) {
-          --sidebar-width: 14rem;
-        }
-      }
-    }
-  }
-</style>

package/src/components/Social.astro

@@ -1,32 +0,0 @@
----
-import Button from '@/components/Button.astro'
-import type { ComponentProps } from 'astro/types'
-
-interface Props extends Omit<ComponentProps<typeof Button>, 'text' | 'icon' | 'target' | 'size'> {}
-
-const platform = (href: string | undefined) => {
-  if (typeof href !== 'string') return
-  if (href.includes('x.com')) return 'brand-x'
-  if (href.includes('facebook')) return 'brand-facebook'
-  if (href.includes('instagram')) return 'brand-instagram'
-  if (href.includes('linkedin')) return 'brand-linkedin'
-  if (href.includes('youtube')) return 'brand-youtube'
-  if (href.includes('tiktok')) return 'brand-tiktok'
-  if (href.includes('twitch')) return 'brand-twitch'
-  if (href.includes('github')) return 'brand-github'
-  if (href.includes('discord')) return 'brand-discord'
-  return undefined
-}
-
-const { href, variant = 'ghost', ...rest } = Astro.props
----
-
-<Button
-  class:list="social"
-  icon={platform(href)}
-  target="_blank"
-  size="sm"
-  {href}
-  {variant}
-  {...rest}
-/>

package/src/components/Socials.astro

@@ -1,27 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Box from './Box.astro'
-import Social from './Social.astro'
-
-interface Props extends HTMLAttributes<'div'> {
-  variant?: ComponentProps<typeof Social>['variant'] | undefined
-  socials?: ComponentProps<typeof Social>['href'][] | undefined
-}
-
-const { variant = 'secondary', socials, ...rest } = Astro.props
----
-
-<Box
-  class:list="socials inline-flex gap-1"
-  {...rest}
->
-  {
-    socials?.map((social) => (
-      <Social
-        href={social}
-        {variant}
-      />
-    ))
-  }
-  <slot />
-</Box>

package/src/components/Sort.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import Select from '@/components/Select.vue'
-import type { SelectRootProps } from 'radix-vue'
-
-interface Props extends SelectRootProps {
-  options: {
-    label: string
-    value: string
-  }[]
-}
-
-const { options } = defineProps<Props>()
-
-const handleChange = (value: string) => {
-  const container = document.querySelector('[data-sort]')
-  if (!container) throw new Error('Container not found')
-
-  const childElements = container.querySelectorAll(`[data-sort-${value}]`)
-  const childrenArray = Array.from(childElements)
-
-  const sortedChildrenArray = childrenArray.sort((a, b) => {
-    const aValue = a.getAttribute(`data-sort-${value}`)
-    const bValue = b.getAttribute(`data-sort-${value}`)
-    if (!aValue || !bValue) return 0
-
-    const aNum = parseFloat(aValue)
-    const bNum = parseFloat(bValue)
-
-    //
-    if (isNaN(aNum) || isNaN(bNum)) throw new Error('Sort value is not a number')
-
-    return aNum - bNum
-  })
-
-  // Append the sorted children to the container
-  sortedChildrenArray.forEach((child) => container.appendChild(child))
-}
-</script>
-
-<template>
-  <Select
-    class="w-auto"
-    :options="options"
-    @update:modelValue="handleChange"
-  />
-</template>

package/src/components/Split.astro

@@ -1,27 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<'div'> {
-  align?: 'start' | 'center' | 'end'
-  reverse?: boolean | 'auto'
-}
-
-const { align = 'start', reverse = false, class: className, ...rest } = Astro.props
----
-
-<Box
-  {...rest}
-  class:list={[
-    'grid items-start gap-x-8 gap-y-16 lg:grid-cols-2',
-    {
-      'items-start lg:child:sticky lg:child:top-[7.5rem]': align === 'start',
-      'items-center': align === 'center',
-      'lg:first:child:order-last lg:last:child:order-first': reverse === true,
-      'lg:first:child:even:order-last lg:last:child:even:order-first': reverse === 'auto',
-    },
-    className,
-  ]}
->
-  <slot />
-</Box>

package/src/components/Table.astro

@@ -1,103 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<'table'> {
-  header?: string[] | undefined
-  body?: string[][] | undefined
-  footer?: string[] | undefined
-}
-
-const { header, body, footer, ...rest } = Astro.props
----
-
-<Box
-  class:list="table"
-  {...rest}
->
-  <Box as="table">
-    <Box as="thead">
-      <Box as="tr">
-        {header?.map((cell) => <th>{cell}</th>)}
-      </Box>
-    </Box>
-    <Box as="tbody">
-      {
-        body?.map((row: string[]) => (
-          <Box as="tr">
-            {row?.map((cell) => (
-              <td>{cell}</td>
-            ))}
-          </Box>
-        ))
-      }
-    </Box>
-    <Box as="tfoot">
-      <Box as="tr">
-        {footer?.map((cell) => <td>{cell}</td>)}
-      </Box>
-    </Box>
-  </Box>
-</Box>
-
-<style is:global>
-  @layer fulldev {
-    .table {
-      box-shadow: 0 0 0 1px var(--color-6);
-      border-radius: var(--radius-1);
-      overflow-x: auto;
-
-      table {
-        display: table;
-        margin: 0;
-        border-collapse: collapse;
-        width: 100%;
-        caption-side: bottom;
-        white-space: nowrap;
-
-        thead {
-          background-color: var(--color-3);
-
-          &:not(:last-child) {
-            border-bottom: 1px solid var(--color-6);
-          }
-
-          th {
-            color: var(--color-12);
-            font-weight: 500;
-          }
-        }
-
-        tbody {
-          display: table-row-group;
-          vertical-align: middle;
-          background-color: var(--color-2);
-          width: 100%;
-          unicode-bidi: isolate;
-        }
-
-        tfoot {
-          display: table-footer-group;
-          background-color: var(--color-3);
-          color: var(--color-12);
-
-          &:not(:last-child) {
-            border-top: 1px solid var(--color-6);
-          }
-        }
-
-        tr + tr {
-          border-top: 1px solid var(--color-6);
-        }
-
-        th,
-        td {
-          vertical-align: middle;
-          padding: var(--space-3) var(--space-4);
-          font-size: var(--text-2);
-          text-align: left;
-        }
-      }
-    }
-  }
-</style>