fulldev-ui 0.6.0-beta.8 → 0.6.0

package/src/blocks/_Hero.astro

@@ -1,245 +0,0 @@
-<!-- ---
-import type { ComponentProps,HTMLAttributes,HTMLTag } from 'astro/types'
-import Badge from 'fulldev-ui/components/Badge.astro'
-import Buttons from 'fulldev-ui/components/Buttons.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Paragraph,{
-default as Lead,
-} from 'fulldev-ui/components/Paragraph.astro'
-import Rating from 'fulldev-ui/components/Rating.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-
-interface Props extends HTMLAttributes<'section'> {
-  rating?: ComponentProps<typeof Rating> | undefined
-  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']
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-  image?: ComponentProps<typeof Image>['id']
-  level?: ComponentProps<typeof Heading>['level']
-  as?: HTMLTag
-  size?: 'sm' | 'md' | 'lg' | undefined
-  variant?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | undefined
-}
-
-const {
-  as = 'section',
-  size = 'lg',
-  variant = 1,
-  level = 1,
-  rating,
-  tagline,
-  badge,
-  heading,
-  lead,
-  paragraph,
-  buttons,
-  image,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="hero"
-  {as}
-  {size}
-  {variant}
-  {...rest}
->
-  <Element class:list="hero-container">
-    <Element class:list="hero-segment">
-      <Element class:list="hero-content">
-        <Rating
-          {size}
-          {...rating}
-        />
-        <Tagline
-          text={tagline}
-          {size}
-        />
-        <Badge
-          {size}
-          {...badge}
-        />
-        <Heading
-          text={heading}
-          {level}
-          {size}
-        />
-        <Paragraph
-          text={lead}
-          {size}
-        />
-        <Paragraph
-          text={paragraph}
-          {size}
-        />
-        <slot name="content" />
-      </Element>
-      <Buttons
-        variant="primary"
-        {size}
-        {buttons}
-      />
-      <slot name="segment" />
-    </Element>
-    <Image
-      class:list="hero-image"
-      {...image}
-    />
-    <slot />
-  </Element>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .hero {
-      @apply relative w-full;
-
-      .hero-container {
-        @apply flex h-full w-full flex-col;
-      }
-
-      .hero-segment {
-        @apply z-10 flex flex-col items-start gap-8;
-      }
-
-      .hero-content {
-        @apply flex max-w-screen-md flex-col gap-6;
-      }
-
-      &.dark {
-        @apply bg-background;
-      }
-
-      /* Column left aligned */
-      &.variant-1 {
-        .hero-container {
-          @apply container py-8;
-        }
-
-        .hero-segment {
-          @apply gap-8 py-16;
-        }
-
-        .content-image {
-          @apply rounded-lg;
-        }
-      }
-
-      /* Column centered */
-      &.variant-2 {
-        .hero-container {
-          @apply container items-center py-8;
-        }
-
-        .hero-segment {
-          @apply items-center py-16;
-        }
-
-        .hero-content {
-          @apply items-center text-center;
-        }
-
-        .content-image {
-          @apply rounded-lg;
-        }
-      }
-
-      /* Spread */
-      &.variant-3 {
-        .hero-container {
-          @apply container items-center py-8;
-        }
-
-        .hero-segment {
-          @apply w-full flex-row flex-wrap items-end justify-between py-16;
-        }
-
-        .content-image {
-          @apply rounded-lg;
-        }
-      }
-
-      /* Split */
-      &.variant-4 {
-        .hero-container {
-          @apply container py-8 lg:grid lg:grid-cols-2 lg:items-center;
-        }
-
-        .content-image {
-          @apply rounded-lg;
-        }
-      }
-
-      /* Split fill */
-      &.variant-5 {
-        @apply min-h-hero;
-
-        .hero-container {
-          @apply container px-0 lg:grid lg:grid-cols-2 lg:items-center;
-        }
-
-        .hero-segment {
-          @apply w-auto max-w-screen-md px-gutter pb-16 pt-24 lg:pb-24;
-        }
-
-        .hero-image {
-          @apply right-0 top-0 h-full object-cover lg:absolute lg:w-1/2;
-        }
-      }
-
-      /* Background left */
-      &.variant-6 {
-        @apply min-h-hero;
-
-        .hero-container {
-          @apply container justify-center py-16;
-        }
-
-        .hero-image {
-          @apply absolute inset-0 h-full w-full object-cover opacity-30;
-        }
-      }
-
-      /* Background center */
-      &.variant-7 {
-        @apply min-h-hero;
-
-        .hero-container {
-          @apply container items-center justify-center py-16;
-        }
-
-        .hero-image {
-          @apply absolute inset-0 h-full w-full object-cover opacity-30;
-        }
-
-        .hero-segment,
-        .hero-content {
-          @apply items-center text-center;
-        }
-      }
-
-      /* Background spread */
-      &.variant-8 {
-        @apply min-h-hero;
-
-        .hero-container {
-          @apply container items-center justify-end py-16;
-        }
-
-        .hero-image {
-          @apply absolute inset-0 h-full w-full object-cover opacity-30;
-        }
-
-        .hero-segment {
-          @apply w-full flex-row flex-wrap items-end justify-between;
-        }
-      }
-    }
-  }
-</style> -->

package/src/components/Blocks.astro

@@ -1,26 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Block from 'fulldev-ui/components/Block.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-
-interface Props extends HTMLAttributes<'div'> {
-  blocks?: ComponentProps<typeof Block>[] | undefined
-}
-
-const { blocks, ...rest } = Astro.props
----
-
-<Element
-  class:list="blocks"
-  {...rest}
->
-  {blocks?.map((block) => <Block {...block} />)}
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .blocks {
-      @apply flex flex-col;
-    }
-  }
-</style>

package/src/components/Sidebar.astro

@@ -1,43 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import Menus from 'fulldev-ui/components/Menus.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/block'
-
-interface Props extends HTMLAttributes<'aside'>, BlockSchema {}
-
-const { menus, ...rest } = Astro.props
----
-
-<Element
-  class:list="sidebar"
-  as="aside"
-  {...rest}
->
-  <Menus
-    size="sm"
-    menu={rest}
-    {menus}
-  />
-</Element>
-
-<!-- <style is:global>
-  @layer fulldev {
-    .sidebar {
-      @apply sticky bottom-0 left-0 hidden h-full w-56 max-w-56 shrink-0 grow flex-col items-start gap-8 overflow-y-auto border-r bg-background py-8 pr-8 lg:flex;
-      @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
-
-      --headers: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
-      top: var(--headers);
-      width: var(--sidebar-width);
-      height: calc(100vh - var(--headers));
-
-      &,
-      & ~ * {
-        @media (min-width: 1024px) {
-          --sidebar-width: 14rem;
-        }
-      }
-    }
-  }
-</style> -->

package/src/content/pages/docs/blocks/feature.mdx

@@ -1,17 +0,0 @@
----
-_layout: block
-title: Feature
----
-
-```astro live
----
-import Feature1 from 'fulldev-ui/blocks/Feature1.astro'
----
-
-<Feature1
-  heading="Lorem ipsum dolor sit"
-  paragraph="Lorem ipsum dolor sit amet consectetur ades"
-  buttons={[{ text: 'Lorem ipsum' }, { text: 'Lorem ipsum' }]}
-  image={{ src: '/images/placeholder-landscape.webp' }}
-/>
-```

package/src/content/pages/docs/layouts.mdx

@@ -1,80 +0,0 @@
----
-_layout: doc
-title: Using Layouts
-description: Ready to use layouts and page generation.
----
-
-## Regular usage
-
-```astro
----
-import Page from 'fulldev-ui/layouts/Page.astro'
----
-
-<Page
-  title="Your meta title"
-  description="Your meta description"
-  banner={{
-    text: 'This is a banner',
-  }}
-  header={{
-    logo: {
-      image: '/favicon/android-chrome-512x512.png',
-      text: 'Fulldev UI',
-    },
-    links: [{ text: 'Docs', href: '/docs/' }],
-    socials: [
-      'https://github.com/fulldotdev/ui',
-      'https://discord.gg/vXZqMbadm8',
-    ],
-  }}
-/>
-```
-
-## Dynamic page generation
-
-To generate pages dynamically, you need to enable page generation in your `astro.config.ts` file.
-
-```ts
-// astro.config.ts
-import { defineConfig } from 'astro/config'
-import fulldev from 'fulldev-ui/integration'
-
-export default defineConfig({
-  integrations: [
-    fulldev({
-      injectRoutes: true,
-    }),
-  ],
-})
-```
-
-### Configuring collections
-
-There are two types of collections:
-
-1. `pages`: Used for generating pages and/or cards.
-2. `layouts`: Default values that can be referenced by pages
-
-Create a content collections config file at `src/content/config.ts`, and add the following content:
-
-```ts
-// src/content/config.ts
-import { defineCollection } from 'astro:content'
-import { pageSchema } from 'fulldev-ui/schemas/page.ts'
-
-export const collections = {
-  pages: defineCollection({
-    type: 'content',
-    schema: pageSchema,
-  }),
-  layouts: defineCollection({
-    type: 'data',
-    schema: pageSchema,
-  }),
-}
-```
-
-#### Pages
-
-Please reference `fulldev-ui/schemas/page.ts` for more information on the page schema.

package/src/layouts/Block.astro

@@ -1,81 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import Footer from 'fulldev-ui/blocks/Footer.astro'
-import Header from 'fulldev-ui/blocks/Header.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Menus from 'fulldev-ui/components/Menus.astro'
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
-import Container from 'fulldev-ui/structures/Container.astro'
-import Layout from 'fulldev-ui/structures/Layout.astro'
-import Prose from 'fulldev-ui/structures/Prose.astro'
-import Sidebar from 'fulldev-ui/structures/Sidebar.astro'
-
-type Props = ComponentProps<typeof Layout> &
-  PageSchema & {
-    render: CollectionEntry<'pages'>['render']
-  }
-
-const { header, sidebar, render, title, description, footer } = Astro.props
-
-const { Content } = await render()
----
-
-<Layout
-  class:list="block"
-  {...Astro.props}
->
-  <Header
-    {...sidebar}
-    {...header}
-  />
-  <Container
-    class:list="block-main"
-    as="main"
-  >
-    <Sidebar>
-      <Menus
-        size="sm"
-        menus={sidebar?.menus}
-      />
-    </Sidebar>
-    <Container class:list="block-container">
-      <Prose class:list="block-prose">
-        <Heading
-          size="4xl"
-          as="h1"
-          text={title}
-        />
-        <Paragraph
-          muted
-          text={description}
-        />
-        <Content />
-      </Prose>
-    </Container>
-  </Container>
-  <Footer {...footer} />
-</Layout>
-
-<style is:global>
-  @layer fulldev {
-    .block {
-      .block-main {
-        @apply flex w-full items-start justify-between !px-0;
-      }
-
-      .block-container {
-        max-width: calc(100% - var(--sidebar-width)) !important;
-      }
-
-      .sidebar {
-        @apply hidden lg:flex;
-      }
-
-      .block-prose {
-        @apply mx-auto max-w-none py-8;
-      }
-    }
-  }
-</style>

package/src/layouts/Category.astro

@@ -1,136 +0,0 @@
-<!-- ---
-import type { ComponentProps } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import { getCollection } from 'astro:content'
-import Products1 from 'fulldev-ui/blocks/Products1.astro'
-import Carousel from 'fulldev-ui/components/Carousel.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Select from 'fulldev-ui/components/Select.astro'
-import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
-import Layout from 'fulldev-ui/structures/Layout.astro'
-import Prose from 'fulldev-ui/structures/Prose.astro'
-import { getHref } from 'fulldev-ui/utils/getHref.ts'
-
-interface Props extends ComponentProps<typeof Layout>, PageSchema {
-  render: CollectionEntry<'pages'>['render']
-  slug: CollectionEntry<'pages'>['slug']
-}
-
-const { render, slug, title, description } = Astro.props
-
-const categories = await getCollection('pages', ({ data }) =>
-  data.categories?.some((c) => c.slug.includes(slug))
-)
-
-const products = await getCollection('pages', ({ data }) =>
-  data.categories?.some((c) => c.slug.includes(slug))
-)
-
-const sorts = [
-  {
-    option: 'Aanbevolen',
-    products: [...products].sort(
-      (a, b) => (a.data.order || 0) - (b.data.order || 0)
-    ),
-  },
-  {
-    option: 'Prijs (laag - hoog)',
-    products: [...products].sort(
-      (a, b) => (a.data.price || 0) - (b.data.price || 0)
-    ),
-  },
-  {
-    option: 'Prijs (hoog - laag)',
-    products: [...products].sort(
-      (a, b) => (b.data.price || 0) - (a.data.price || 0)
-    ),
-  },
-  {
-    option: 'Alfabetisch (A-Z)',
-    products: [...products],
-  },
-  {
-    option: 'Alfabetisch (Z-A)',
-    products: [...products].sort((a, b) =>
-      (b.data.title || '').localeCompare(a.data.title || '')
-    ),
-  },
-]
----
-
-<script>
-  document.addEventListener('astro:page-load', () => {
-    const sort = document.querySelector('.sort')
-
-    sort?.addEventListener('change', (e) => {
-      const blocks = document.querySelectorAll('.products')
-      const value = (e.target as HTMLSelectElement).value
-      blocks?.forEach((block) => block.classList.add('hide'))
-
-      const block = document.querySelector(`.products[id='${value}']`)
-      block?.classList.remove('hide')
-    })
-  })
-</script>
-
-<Layout
-  class:list="category"
-  {...Astro.props}
->
-  <Intro1
-    heading={title}
-    text={description}
-  />
-  <Carousel>
-    {
-      categories.map((category) => (
-        <Element
-          as="a"
-          class:list="item"
-          href={getHref(category.slug)}
-        >
-          {category.data.title}
-        </Element>
-      ))
-    }
-  </Carousel>
-  <Element class:list="toolbar">
-    <span>{products.length} resultaten</span>
-    <Select
-      class:list="sort"
-      size="sm"
-      name="Sorteren"
-      options={sorts.map((sort) => sort.option)}
-    />
-  </Element>
-  {
-    sorts.map((sort: any) => (
-      <Products1
-        class:list={sort.option !== 'Aanbevolen' ? 'hide' : ''}
-        products={sort.products}
-      />
-    ))
-  }
-  <Prose {render} />
-  <slot />
-</Layout>
-
-<style is:global>
-  .carousel {
-    .item {
-      @apply min-w-48 rounded-sm border p-4 text-sm;
-    }
-  }
-
-  .products.hide {
-    @apply hidden;
-  }
-
-  .toolbar {
-    @apply container flex items-center justify-between pt-8;
-
-    span {
-      @apply text-sm text-muted-foreground;
-    }
-  }
-</style> -->