fulldev-ui 0.6.0-beta.2 → 0.6.0-beta.6

package/astro.config.ts

@@ -1,10 +1,6 @@
+import svelte from '@astrojs/svelte'
 import { defineConfig } from 'astro/config'
 import integration from 'fulldev-ui/integration'
-import simpleStackQuery from 'simple-stack-query'
-
-import simpleStackForm from 'simple-stack-form'
-
-import svelte from '@astrojs/svelte'
 
 // https://astro.build/config
 export default defineConfig({
@@ -19,8 +15,6 @@ export default defineConfig({
       css: '/src/css/custom.css',
       injectRoutes: false,
     }),
-    simpleStackQuery(),
-    simpleStackForm(),
     svelte(),
   ],
   redirects: {

package/cloudcannon.config.yml

@@ -0,0 +1,269 @@
+paths:
+  uploads: public/images
+  static: public
+
+collection_groups:
+  - heading: Content
+    collections:
+      - pages
+      - jobs
+      - categories
+  - heading: Settings
+    collections:
+      - layouts
+
+collections_config:
+  pages:
+    path: src/content/pages
+    url: /[full_slug]/
+    icon: wysiwyg
+    name: Pages
+    disable_add_folder: true
+    _enabled_editors:
+      - visual
+      - content
+    schemas:
+      page:
+        name: Page
+        icon: wysiwyg
+        remove_extra_inputs: false
+        remove_empty_inputs: true
+        hide_extra_inputs: true
+        path: schemas/page.md
+      job:
+        name: Job
+        icon: wysiwyg
+        remove_extra_inputs: false
+        remove_empty_inputs: true
+        hide_extra_inputs: true
+        path: schemas/job.md
+      jobs:
+        name: Job overview
+        icon: wysiwyg
+        remove_extra_inputs: false
+        remove_empty_inputs: true
+        hide_extra_inputs: true
+        path: schemas/category.md
+      post:
+        name: Content
+        icon: wysiwyg
+        remove_extra_inputs: false
+        remove_empty_inputs: true
+        hide_extra_inputs: true
+        path: schemas/post.md
+      category:
+        name: Category
+        icon: wysiwyg
+        remove_extra_inputs: false
+        remove_empty_inputs: true
+        hide_extra_inputs: true
+        path: schemas/category.md
+      product:
+        name: Product
+        icon: wysiwyg
+        remove_extra_inputs: false
+        remove_empty_inputs: true
+        hide_extra_inputs: true
+        path: schemas/product.md
+  layouts:
+    path: src/content/layouts
+    name: Layouts
+    icon: web
+    disable_url: true
+    disable_add: true
+    disable_add_folder: true
+    disable_file_actions: true
+    _enabled_editors:
+      - data
+
+_inputs:
+  head:
+    label: SEO / Settings
+
+  head.title:
+    label: SEO title
+    comment: 50-60 characters
+
+  head.description:
+    label: SEO description
+    comment: 50-120 characters
+
+  parents:
+    type: multiselect
+    label: Categorieën
+    options:
+      values: collections.pages
+  children:
+    type: multiselect
+    label: Subcategorieën
+    options:
+      values: collections.pages
+  siblings:
+    type: multiselect
+    label: Aanbevolen pagina's
+    options:
+      values: collections.pages
+
+  href:
+    type: url
+    label: Link
+
+  rating.value:
+    label: Rating
+    type: range
+    options:
+      min: 0
+      max: 5
+      step: 0.1
+
+  head.image:
+    type: image
+    label: Image
+    comment: Visible when you share a link of the page
+    options:
+      accepts_mime_types: 'image/jpeg,image/jpg,image/png,image/webp'
+      mime_type: image/png
+      resize_style: contain
+      width: 1200
+      height: 640
+  images:
+    type: array
+    cascade: true
+  images[*]:
+    type: image
+    options:
+      accepts_mime_types: 'image/jpeg,image/jpg,image/png,image/webp'
+      mime_type: image/webp
+      resize_style: contain
+      width: 1920
+      height: 1920
+  image:
+    type: image
+    label: Afbeelding
+    options:
+      accepts_mime_types: 'image/jpeg,image/jpg,image/png,image/webp'
+      mime_type: image/webp
+      resize_style: contain
+      width: 1920
+      height: 1920
+
+  list:
+    type: array
+  list[*]:
+    type: text
+  hidden:
+    label: Hide
+    type: switch
+  soldout:
+    label: Sold out
+    type: switch
+  draft:
+    label: Draft
+    type: switch
+  order:
+    label: Volgorde
+    type: number
+  paragraph:
+    type: textarea
+    label: Tekst
+  text:
+    type: textarea
+    label: Tekst
+  button.text:
+    type: text
+  options:
+    type: array
+    label: Opties
+  options[*]:
+    type: text
+  variations:
+    type: array
+    label: Variations
+  sizes:
+    type: array
+    label: Sizes
+  sizes[*]:
+    type: text
+  logo:
+    type: image
+    cascade: true
+    options:
+      accepts_mime_types: 'image/jpeg,image/jpg,image/png,image/webp'
+      mime_type: image/webp
+      resize_style: contain
+      width: 260
+      height: 32
+  rating:
+    type: range
+    options:
+      min: 0
+      max: 5
+      step: 0.1
+    label: Rating
+  price:
+    type: number
+    label: Prijs
+  presets:
+    hidden: true
+  component:
+    hidden: true
+  dark:
+    hidden: true
+  name:
+    hidden: true
+  color:
+    hidden: true
+  layout:
+    hidden: true
+  position:
+    hidden: true
+  scheme:
+    hidden: true
+  hue:
+    hidden: true
+  align:
+    hidden: true
+  frame:
+    hidden: true
+  variant:
+    hidden: true
+  scale:
+    hidden: true
+  render:
+    hidden: true
+  collection:
+    hidden: true
+  slug:
+    hidden: true
+  id:
+    hidden: true
+  class:
+    hidden: true
+  direction:
+    hidden: true
+  size:
+    hidden: true
+  structure:
+    hidden: true
+
+_editables:
+  content:
+    allow_custom_markup: false
+    remove_custom_markup: false
+    bold: true
+    bulletedlist: true
+    format: p h1 h2 h3 h4 h5 h6
+    image: true
+    image_size_attributes: true
+    italic: true
+    link: true
+    numberedlist: true
+    redo: true
+    table: true
+    underline: true
+    undo: true
+    accepts_mime_types: 'image/jpeg,image/jpg,image/png,image/webp'
+    mime_type: image/webp
+    resize_style: contain
+    width: 1920
+    height: 1920

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.6.0-beta.2",
+  "version": "0.6.0-beta.6",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",

package/src/blocks/Banner.astro

@@ -1,34 +1,32 @@
 ---
-import type { ComponentProps } from 'astro/types'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Container from 'fulldev-ui/components/Container.astro'
 import Element from 'fulldev-ui/components/Element.astro'
-import Text from 'fulldev-ui/components/Text.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-type Props = {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  text?: ComponentProps<typeof Text>['text']
+interface Props extends HTMLAttributes<'header'>, BlockSchema {
+  as?: HTMLTag
 }
 
-const { size = 'sm', text, ...rest } = Astro.props
+const { as = 'header', text, ...rest } = Astro.props
 ---
 
 <Element
-  class:list={'banner'}
-  as="header"
-  {size}
+  class:list="banner"
   {...rest}
 >
-  <Text text={text} />
+  <Container>
+    <Fragment set:html={text} />
+  </Container>
 </Element>
 
 <style is:global>
   @layer fulldev {
     .banner {
-      @apply relative z-50 flex w-full items-center justify-center overflow-hidden bg-primary px-gutter text-center text-sm text-primary-foreground;
-      height: var(--banner-height);
+      @apply relative flex w-full items-center bg-primary py-3 text-primary-foreground;
 
-      &,
-      & ~ * {
-        --banner-height: 32px;
+      .container {
+        @apply flex items-center justify-center overflow-hidden bg-primary text-center text-sm leading-none text-primary-foreground;
       }
     }
   }

package/src/blocks/Colleagues1.astro

@@ -0,0 +1,73 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Card from 'fulldev-ui/components/Card.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Stack from 'fulldev-ui/components/Stack.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const { tagline, heading, paragraph, cards, ...rest } = Astro.props
+---
+
+<Section
+  class:list="colleagues-1"
+  {...rest}
+>
+  <Container>
+    <Writeup align="center">
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        size="3xl"
+        text={heading}
+      />
+      <Paragraph text={paragraph} />
+    </Writeup>
+    <Stack>
+      {
+        cards?.map(({ image, heading, paragraph }) => (
+          <Card>
+            <Image {...image} />
+            <Heading
+              as="h3"
+              size="xl"
+              text={heading}
+            />
+            <Paragraph text={paragraph} />
+          </Card>
+        ))
+      }
+    </Stack>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .colleagues-1 {
+      .container {
+        @apply flex flex-col items-center gap-16;
+      }
+
+      .card {
+        @apply mt-20 flex flex-col items-center gap-1 pt-0;
+      }
+
+      .image {
+        @apply -mt-20 mb-4 aspect-square max-w-40 rounded-full object-cover;
+      }
+
+      .icon {
+        @apply text-primary;
+      }
+    }
+  }
+</style>

package/src/blocks/Contact1.astro

@@ -0,0 +1,100 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Badges from 'fulldev-ui/components/Badges.astro'
+import Channel from 'fulldev-ui/components/Channel.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Form from 'fulldev-ui/components/Form.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Social from 'fulldev-ui/components/Social.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const {
+  badge,
+  badges,
+  tagline,
+  heading,
+  form,
+  text,
+  googleMaps,
+  paragraph,
+  buttons,
+  socials,
+  position,
+  image,
+  channels,
+  level = 1,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="contact-1"
+  {...rest}
+>
+  <Element>
+    <Element class:list="contact-1-segment">
+      <Element class:list="contact-1-content">
+        <Badges
+          size="sm"
+          {badge}
+          {badges}
+        />
+        <Tagline
+          size="sm"
+          text={tagline}
+        />
+        <Heading
+          as="h1"
+          size="2xl"
+          text={heading}
+        />
+        <Paragraph text={paragraph} />
+      </Element>
+      <Element class:list="contact-1-channels">
+        {channels?.map((channel) => <Channel {...channel} />)}
+      </Element>
+      <Element class:list="contact-1-socials">
+        {socials?.map((social) => <Social href={social} />)}
+      </Element>
+      <Form
+        action="/thank-you"
+        method="POST"
+        {...form}
+      />
+    </Element>
+    <Image
+      {position}
+      {...image}
+    />
+  </Element>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .contact-1 {
+      @apply relative w-full;
+
+      .container {
+        @apply flex flex-col gap-16;
+      }
+
+      .contact-1-segment {
+        @apply flex flex-col items-start gap-8;
+      }
+
+      .contact-1-content {
+        @apply flex max-w-screen-md flex-col gap-4;
+      }
+
+      .image {
+        @apply rounded-md;
+      }
+    }
+  }
+</style>

package/src/blocks/Content1.astro

@@ -0,0 +1,79 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
+import Button from 'fulldev-ui/components/Button.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Group from 'fulldev-ui/components/Group.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import List from 'fulldev-ui/components/List.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {
+  headings?: ComponentProps<typeof Toc>['headings']
+}
+
+const {
+  tagline,
+  badge,
+  badges,
+  heading,
+  paragraph,
+  list,
+  button,
+  buttons,
+  image,
+  content,
+  headings,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="content-1"
+  {...rest}
+>
+  <Container>
+    <Prose>
+      <Group>
+        <Badge {...badge} />
+        {badges?.map((badge) => <Badge {...badge} />)}
+      </Group>
+      <Tagline text={tagline} />
+      <Heading
+        as="h1"
+        size="4xl"
+        text={heading}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <List items={list} />
+      <Group>
+        <Button {...button} />
+        {buttons?.map((button) => <Button {...button} />)}
+      </Group>
+      <Image {...image} />
+      <Fragment set:html={content} />
+      <slot />
+    </Prose>
+    <Toc {headings} />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .content-1 {
+      .container {
+        @apply flex items-start justify-evenly gap-x-gutter;
+      }
+    }
+  }
+</style>

package/src/blocks/Content2.astro

@@ -0,0 +1,94 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
+import Button from 'fulldev-ui/components/Button.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Group from 'fulldev-ui/components/Group.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import List from 'fulldev-ui/components/List.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {
+  headings?: ComponentProps<typeof Toc>['headings']
+}
+
+const {
+  tagline,
+  badge,
+  badges,
+  heading,
+  paragraph,
+  list,
+  button,
+  buttons,
+  image,
+  headings,
+  content,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="content-2"
+  {...rest}
+>
+  <Container>
+    <Prose>
+      <Group>
+        <Badge {...badge} />
+        {badges?.map((badge) => <Badge {...badge} />)}
+      </Group>
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        as="h1"
+        size="4xl"
+        text={heading}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <List items={list} />
+      <Group>
+        <Button {...button} />
+        {buttons?.map((button) => <Button {...button} />)}
+      </Group>
+      <Fragment set:html={content} />
+      <slot />
+    </Prose>
+    <Image {...image} />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .content-2 {
+      .container {
+        @apply grid items-start gap-x-gutter gap-y-16 lg:grid-cols-2;
+      }
+
+      .prose,
+      .image {
+        @apply lg:sticky lg:top-sticky-16;
+      }
+
+      .prose {
+        @apply max-w-screen-sm;
+      }
+
+      .image {
+        @apply rounded-md;
+      }
+    }
+  }
+</style>