fulldev-ui 0.3.36 → 0.4.0-beta.1

package/src/components/experimental/Price.astro

@@ -1,9 +1,9 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
+import Root from 'fulldev-ui/components/Root.astro'
 
 type Props<As extends HTMLTag = 'p'> = Polymorphic<{ as: As }> & {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  size?: 'sm' | 'md' | 'lg'
   color?: 'base' | 'brand'
   contrast?: boolean
   value?: number
@@ -12,24 +12,24 @@ type Props<As extends HTMLTag = 'p'> = Polymorphic<{ as: As }> & {
 const { as = 'p', value, ...rest } = Astro.props
 ---
 
-{value && (
-  <Component
-    if={value}
-  class:list={['price']}
-  {as}
-  {...rest}
->
-    €{value?.toFixed(2).replace('.', ',')}
-  </Component>
-)}
+{
+  value && (
+    <Root
+      if={value}
+      class:list='price']}
+      {as}
+      {...rest}
+    >
+      €{value?.toFixed(2).replace('.', ',')}
+    </Root>
+  )
+}
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('price') {
+  .price {
     margin: 0;
-    max-width: calc(var(--space-4) * 36);
-    color: var(--text, var(--color-11));
+    max-width: calc(var(--space-4) * 44);
+    color: var(--color-12);
     font-weight: var(--font-weight);
     font-size: var(--text-5);
     line-height: 1.25;

package/src/components/experimental/Prose.astro

@@ -0,0 +1,154 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Root from 'fulldev-ui/components/Root.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }>
+
+const { as = 'div', ...rest } = Astro.props
+---
+
+<Root
+  class:list="prose"
+  {as}
+  {...rest}
+>
+  <slot />
+</Root>
+
+<style is:global lang="scss">
+  .prose {
+    width: 100%;
+    max-width: 768px;
+    scroll-margin-top: var(--space-6);
+    color: var(--color-11);
+    font-weight: var(--font-weight);
+    font-size: var(--text-3);
+    line-height: 1.7;
+    font-family: var(--font-family);
+
+    > {
+      .astro-code,
+      .window {
+        margin-top: var(--space-5);
+      }
+
+      * {
+        margin: 0;
+      }
+
+      p {
+        margin-top: var(--space-4);
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: var(--color-12);
+        font-weight: 700;
+        line-height: 1.2;
+      }
+
+      h1 {
+        margin-top: var(--space-6);
+        scroll-margin-top: var(--space-6);
+        font-size: var(--text-8);
+      }
+
+      h2 {
+        margin-top: var(--space-6);
+        scroll-margin-top: var(--space-6);
+        font-size: var(--text-7);
+      }
+
+      h3 {
+        margin-top: var(--space-6);
+        scroll-margin-top: var(--space-6);
+        font-size: var(--text-6);
+      }
+
+      h4 {
+        margin-top: var(--space-5);
+        scroll-margin-top: var(--space-5);
+        font-size: var(--text-5);
+      }
+
+      h5 {
+        margin-top: var(--space-5);
+        scroll-margin-top: var(--space-5);
+        font-size: var(--text-4);
+      }
+
+      h6 {
+        margin-top: var(--space-5);
+        scroll-margin-top: var(--space-5);
+        font-size: var(--text-3);
+      }
+
+      *:first-child {
+        margin-top: 0;
+      }
+    }
+
+    .display {
+      display: grid;
+      width: 100%;
+      max-width: none;
+
+      table {
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          margin: var(--space-2) 0;
+
+          font: 600 var(--text-3) 'Saira';
+
+          & + p {
+            color: var(--hue11);
+          }
+        }
+      }
+    }
+
+    table {
+      margin: var(--space-5) 0;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-1) !important;
+      border-collapse: collapse;
+      width: 100%;
+    }
+
+    th {
+      border-bottom: 1px solid var(--border);
+      background: var(--raised-background) !important;
+      color: var(--muted-foreground) !important;
+      font-weight: 500 !important;
+      font-size: var(--text-3) !important;
+    }
+
+    td {
+      color: var(--muted-foreground) !important;
+    }
+
+    th,
+    td {
+      padding: var(--space-2);
+    }
+
+    table a {
+      color: var(--solid) !important;
+      font-size: var(--text-3) !important;
+      line-height: 1 !important;
+      white-space: nowrap;
+    }
+
+    table a:hover {
+      text-decoration: underline;
+    }
+  }
+</style>

package/src/components/{base → experimental}/Video.astro

@@ -14,7 +14,7 @@ const youtubeId =
 {
   youtubeId && !thumbnail && (
     <iframe
-      class:list={['image video']}
+      class:list='image video']}
       src={`https://www.youtube.com/embed/${youtubeId}?controls=0&showinfo=0&rel=0&modestbranding=1&loop=1`}
       title="YouTube video player"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

package/src/components/experimental/Window.astro

@@ -0,0 +1,173 @@
+---
+import Button from 'fulldev-ui/components/Button.astro'
+
+const { componentProps } = Astro.props
+
+const randomId = Math.random().toString(36).substring(2, 15)
+const id = componentProps.title?.toLowerCase().replace(/ /g, '-') ?? randomId
+
+const isComponent =
+  Astro.url.pathname.includes('components/') ||
+  Astro.url.pathname.includes('frameworks') ||
+  Astro.url.pathname.includes('base/') ||
+  Astro.url.pathname.includes('typography/') ||
+  Astro.url.pathname.includes('segment/')
+---
+
+{
+  isComponent ? (
+    <div class="component window">
+      <div class="example-container">
+        <slot name="example" />
+      </div>
+      <div class="code-container">
+        <slot name="code" />
+      </div>
+    </div>
+  ) : (
+    <div class="block window">
+      <div class="button-header">
+        <Button
+          as="label"
+          for={id}
+          variant="secondary"
+        >
+          Preview / Code
+        </Button>
+      </div>
+      <input
+        type="checkbox"
+        id={id}
+        name={id}
+        class="window-toggle"
+      />
+      <div class="example-container">
+        <slot name="example" />
+      </div>
+      <div class="code-container">
+        <slot name="code" />
+      </div>
+    </div>
+  )
+}
+
+<style lang="scss" is:global>
+  .window {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+
+    .code-container {
+      width: 100%;
+
+      .astro-code {
+        margin: 0;
+        background-color: var(--base-2) !important;
+        padding: var(--space-5);
+      }
+    }
+
+    &.component {
+      border: 1px solid var(--base-6);
+      border-radius: var(--radius-2);
+      overflow: hidden;
+
+      .example-container {
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        gap: var(--space-4);
+        padding: var(--space-5);
+      }
+
+      .code-container {
+        border: none;
+        border-top: 1px solid var(--base-6);
+        border-radius: 0px;
+
+        .astro-code {
+          border: none;
+          border-radius: 0px;
+        }
+      }
+    }
+
+    &.block {
+      gap: var(--space-2);
+      padding-top: var(--space-7);
+      padding-bottom: var(--space-7);
+
+      .button-header {
+        padding: 0 var(--gutter);
+      }
+
+      .code-container {
+        display: none;
+        padding: 0 var(--gutter);
+        max-width: calc(100% - (2 * var(--gutter)));
+      }
+
+      .window-toggle {
+        display: none;
+        visibility: hidden;
+        opacity: 0;
+      }
+
+      .window-toggle:checked {
+        & ~ .example-container {
+          display: none;
+        }
+        & ~ .code-container {
+          display: block;
+        }
+      }
+
+      .example-container {
+        border-top: 1px solid var(--base-6);
+        width: 100%;
+      }
+    }
+  }
+
+  // .window {
+  //   width: 100%;
+
+  //   &.component {
+  //     border: 1px solid var(--base-6);
+  //     border-radius: var(--radius-2);
+  //     overflow: hidden;
+
+  //     .example-container {
+  //       display: flex;
+  //       flex-direction: column;
+  //       align-items: start;
+  //       gap: var(--space-4);
+  //       padding: var(--space-5);
+  //     }
+
+  //     .astro-code {
+  //       border: none;
+  //       border-top: 1px solid var(--base-6);
+  //       border-radius: 0px;
+  //     }
+  //   }
+
+  //   &:not(.component) {
+  //     padding-top: var(--space-7);
+  //     padding-bottom: var(--space-7);
+
+  //     .live-code-layout {
+  //       display: flex;
+  //       flex-direction: column;
+  //       margin-top: var(--space-4);
+  //       width: 100%;
+  //       overflow: hidden;
+
+  //       .example-container {
+  //         border-top: 1px solid var(--base-6);
+  //       }
+  //     }
+  //   }
+  // }
+</style>

package/src/content/config.ts

@@ -1,14 +1,17 @@
-// import { defineCollection, reference } from 'astro:content'
-// import { pageSchema } from '../schemas/schemas'
+import { defineCollection } from 'astro:content'
+import { page } from 'fulldev-ui/schemas/page'
 
-// const collection = defineCollection({
-//   type: 'content',
-//   schema: pageSchema({
-//     page: reference('pages'),
-//     pages: reference('pages').array(),
-//   }),
-// })
-
-// export const collections = {
-//   pages: collection,
-// }
+export const collections = {
+  pages: defineCollection({
+    type: 'content',
+    schema: page,
+  }),
+  records: defineCollection({
+    type: 'data',
+    schema: page,
+  }),
+  settings: defineCollection({
+    type: 'data',
+    schema: page,
+  }),
+}

package/src/content/pages/_changelog.mdx

@@ -0,0 +1,10 @@
+---
+_layout: PostLayout
+settings: components
+title: Changelog
+description: What's new in Fulldev UI
+---
+
+import ChangeLog from '../../../CHANGELOG.md'
+
+<ChangeLog />

package/src/content/pages/_segment/footer.mdx

@@ -0,0 +1,244 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Footer
+---
+
+# Footer
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Footer from 'fulldev-ui/components/Footer.astro'
+---
+
+<Footer
+  heading="Fulldev UI"
+  set:html="Rapidly build content-driven websites."
+  align="start"
+  size="sm"
+  columns={[
+    {
+      heading: 'Pages',
+      links: [
+        { href: '/overview/introduction', text: 'Docs' },
+        { href: '/typography/heading', text: 'Components' },
+        { href: '/blocks', text: 'Blocks' },
+      ],
+    },
+  ]}
+/>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Footer from 'fulldev-ui/components/Footer.astro'
+---
+
+<Footer
+  heading="Fulldev UI"
+  set:html="Rapidly build content-driven websites."
+  align="start"
+  size="sm"
+  columns={[
+    {
+      heading: 'Pages',
+      links: [
+        { href: '/overview/introduction', text: 'Docs' },
+        { href: '/typography/heading', text: 'Components' },
+        { href: '/blocks', text: 'Blocks' },
+      ],
+    },
+    {
+      heading: 'Socials',
+      links: [
+        { href: '/x', text: 'X' },
+        { href: '/github', text: 'GitHub' },
+        { href: '/discord', text: 'Discord' },
+      ],
+    },
+  ]}
+/>
+
+<Footer
+  heading="Fulldev UI"
+  set:html="Rapidly build content-driven websites."
+  align="start"
+  size="sm"
+  structure="spread"
+  columns={[
+    {
+      heading: 'Links',
+      links: [
+        { href: '/overview/introduction', text: 'Docs' },
+        { href: '/components', text: 'Components' },
+        { href: '/discord', text: 'Discord' },
+      ],
+    },
+  ]}
+/>
+
+<Footer
+  heading="Fulldev UI"
+  set:html="Rapidly build content-driven websites."
+  align="start"
+  size="md"
+  structure="spread"
+  columns={[
+    {
+      heading: 'Links',
+      links: [
+        { href: '/overview/introduction', text: 'Docs' },
+        { href: '/components', text: 'Components' },
+        { href: '/discord', text: 'Discord' },
+      ],
+    },
+  ]}
+/>
+
+<Footer
+  heading="Fulldev UI"
+  set:html="Rapidly build content-driven websites."
+  align="start"
+  size="lg"
+  structure="spread"
+  columns={[
+    {
+      heading: 'Links',
+      links: [
+        { href: '/overview/introduction', text: 'Docs' },
+        { href: '/components', text: 'Components' },
+        { href: '/discord', text: 'Discord' },
+      ],
+    },
+  ]}
+/>
+```
+
+```astro live
+---
+import Footer from 'fulldev-ui/components/Footer.astro'
+---
+
+<Footer
+  variant="ghost"
+  structure="spread"
+  align="start"
+  heading="Fulldev UI"
+  set:html="Rapidly build content-driven websites."
+  columns={[
+    {
+      heading: 'Links',
+      links: [
+        { href: '/overview/introduction', text: 'Docs' },
+        { href: '/components', text: 'Components' },
+        { href: '/discord', text: 'Discord' },
+      ],
+    },
+  ]}
+/>
+
+<Footer
+  variant="subtle"
+  structure="spread"
+  align="start"
+  heading="Fulldev UI"
+  set:html="Rapidly build content-driven websites."
+  columns={[
+    {
+      heading: 'Links',
+      links: [
+        { href: '/overview/introduction', text: 'Docs' },
+        { href: '/components', text: 'Components' },
+        { href: '/discord', text: 'Discord' },
+      ],
+    },
+  ]}
+/>
+
+<Footer
+  variant="soft"
+  structure="spread"
+  align="start"
+  heading="Fulldev UI"
+  set:html="Rapidly build content-driven websites."
+  columns={[
+    {
+      heading: 'Links',
+      links: [
+        { href: '/overview/introduction', text: 'Docs' },
+        { href: '/components', text: 'Components' },
+        { href: '/discord', text: 'Discord' },
+      ],
+    },
+  ]}
+/>
+
+<Footer
+  variant="surface"
+  structure="spread"
+  align="start"
+  heading="Fulldev UI"
+  set:html="Rapidly build content-driven websites."
+  columns={[
+    {
+      heading: 'Links',
+      links: [
+        { href: '/overview/introduction', text: 'Docs' },
+        { href: '/components', text: 'Components' },
+        { href: '/discord', text: 'Discord' },
+      ],
+    },
+  ]}
+/>
+```
+
+```astro live
+---
+import Footer from 'fulldev-ui/components/Footer.astro'
+---
+
+<Footer
+  frame="fill"
+  structure="spread"
+  align="start"
+  heading="Fulldev UI"
+  set:html="Rapidly build content-driven websites."
+  columns={[
+    {
+      heading: 'Links',
+      links: [
+        { href: '/overview/introduction', text: 'Docs' },
+        { href: '/components', text: 'Components' },
+        { href: '/discord', text: 'Discord' },
+      ],
+    },
+  ]}
+/>
+
+<Footer
+  frame="panel"
+  structure="spread"
+  align="start"
+  heading="Fulldev UI"
+  set:html="Rapidly build content-driven websites."
+  columns={[
+    {
+      heading: 'Links',
+      links: [
+        { href: '/overview/introduction', text: 'Docs' },
+        { href: '/components', text: 'Components' },
+        { href: '/discord', text: 'Discord' },
+      ],
+    },
+  ]}
+/>
+```