fulldev-ui 0.6.0-beta.0 → 0.6.0-beta.10

package/src/components/Section.astro

@@ -1,293 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes, HTMLTag } 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 Element from 'fulldev-ui/components/Element.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Badge from './Badge.astro'
-import Lead from './Lead.astro'
-import List from './List.astro'
-import Paragraph from './Paragraph.astro'
-import Price from './Price.astro'
-import Rating from './Rating.astro'
-import Tagline from './Tagline.astro'
-
-interface Props extends HTMLAttributes<'section'> {
-  as?: HTMLTag
-  size?: 'sm' | 'md' | 'lg' | undefined
-  image?: ComponentProps<typeof Image>
-  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
-  heading?: any
-  background?: any
-  lead?: any
-  rating?: any
-  tagline?: any
-  badge?: any
-  level?: any
-  paragraph?: any
-  dark?: boolean
-  list?: any
-  price?: any
-  center?: boolean
-  inset?: boolean
-  reverse?: boolean
-  frame?: 'fill' | 'panel' | 'viewport' | undefined
-  position?: 'contain' | 'inset' | 'background' | undefined
-  structure?:
-    | 'left'
-    | 'center'
-    | 'spread'
-    | 'split'
-    | 'grid'
-    | 'masonry'
-    | 'carousel'
-    | 'stack'
-    | undefined
-}
-
-const { component, ...props } = Astro.props
-
-const {
-  as = 'section',
-  size = 'md',
-  variant = 'secondary',
-  structure = 'left',
-  inset = false,
-  panel = false,
-  reverse = false,
-  dark = false,
-  frame = 'viewport',
-  position = 'background',
-  level = 2,
-  rating,
-  tagline,
-  badge,
-  heading,
-  lead,
-  paragraph,
-  list,
-  price,
-  buttons,
-  image,
-  background,
-  cards,
-  ...rest
-} = 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 hasCards = cards && cards.length > 0
----
-
-{
-  Component ? (
-    <Component {...props} />
-  ) : (
-    <Element
-      class:list="section"
-      panel={hasCards ? undefined : panel}
-      {as}
-      {size}
-      {structure}
-      {inset}
-      {reverse}
-      {dark}
-      {position}
-      {frame}
-      {...rest}
-    >
-      <Element class:list="section-container">
-        <Element class:list="section-segment">
-          <Element class:list="section-content">
-            <Rating
-              {size}
-              {...rating}
-            />
-            <Tagline
-              text={tagline}
-              {size}
-            />
-            <Badge
-              {size}
-              {...badge}
-            />
-            <Heading
-              text={heading}
-              {size}
-              {level}
-            />
-            <Lead
-              text={lead}
-              {size}
-            />
-            <Paragraph
-              text={paragraph}
-              {size}
-            />
-            <List
-              items={list}
-              {size}
-            />
-            <Price
-              value={price}
-              {size}
-            />
-            <slot name="content" />
-          </Element>
-          <Buttons
-            {size}
-            {variant}
-            {buttons}
-          />
-          <slot name="segment" />
-        </Element>
-        <Image {...image} />
-        <Cards
-          {size}
-          {level}
-          {cards}
-        />
-        <slot />
-      </Element>
-    </Element>
-  )
-}
-
-<style is:global>
-  @layer fulldev {
-    .section {
-      @apply relative flex w-full items-center pb-28 pt-14 first:pt-0;
-
-      .section-container {
-        @apply container z-10 w-full;
-      }
-
-      .section-segment {
-        @apply z-10 gap-8 py-16;
-      }
-
-      .section-content {
-        @apply max-w-screen-md gap-6;
-      }
-
-      &.frame-fill {
-        @apply pb-28 pt-14 first:pt-0;
-      }
-
-      &.frame-viewport {
-        @apply min-h-screen pb-28 pt-14;
-
-        .section-container {
-          @apply justify-center;
-        }
-      }
-
-      &.frame-panel {
-        @apply px-gutter first:pt-gutter;
-
-        .section-container {
-          @apply relative overflow-hidden rounded-lg border bg-card;
-        }
-      }
-
-      &.position-contain {
-        .image {
-          @apply h-auto w-full object-contain;
-        }
-      }
-
-      &.position-background {
-        .image {
-          @apply absolute inset-0 h-full max-h-none w-full max-w-none object-cover opacity-30;
-        }
-      }
-
-      &.position-inset {
-        .section-container {
-          @apply px-0;
-        }
-
-        .section-segment {
-          @apply px-gutter;
-        }
-
-        .image {
-          @apply h-auto w-full object-cover;
-        }
-      }
-
-      &.dark {
-        @apply bg-background;
-      }
-
-      &.structure-left {
-        .section-container,
-        .section-segment,
-        .section-content {
-          @apply flex flex-col items-start;
-        }
-      }
-
-      &.structure-center {
-        .section-container,
-        .section-segment,
-        .section-content {
-          @apply flex flex-col items-center text-center;
-        }
-      }
-
-      &.structure-split {
-        .section-container {
-          @apply grid auto-cols-fr gap-x-14 lg:grid-flow-col lg:items-center;
-        }
-
-        .section-segment,
-        .section-content {
-          @apply flex flex-col items-start;
-        }
-      }
-
-      &.structure-spread {
-        .section-container {
-          @apply flex flex-col;
-        }
-
-        .section-segment {
-          @apply flex w-full flex-row flex-wrap items-end justify-between;
-        }
-      }
-
-      &.reverse {
-        &:not(.structure-split) {
-          .section-segment {
-            @apply order-last;
-          }
-        }
-
-        @media (min-width: 1024px) {
-          .section-segment {
-            @apply order-last;
-          }
-        }
-      }
-    }
-  }
-</style>

package/src/components/Text.astro

@@ -1,43 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-
-interface Props extends HTMLAttributes<'p'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  color?: 'base' | 'brand' | undefined
-  theme?: 'light' | 'dark' | undefined
-  contrast?: boolean | undefined
-  lead?: boolean | undefined
-  text?: string | undefined
-  if?: any
-}
-
-const { color = 'base', text, ...rest } = Astro.props
----
-
-<Element
-  class:list="text"
-  as="p"
-  {color}
-  {...rest}
->
-  <slot />
-  <Fragment set:html={text} />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .text {
-      margin: 0;
-      max-width: calc(var(--space-4) * 44);
-      color: var(--color-11);
-      font-size: var(--text-3);
-      line-height: 1.625;
-
-      &.lead {
-        font-size: var(--text-4);
-        text-wrap: balance;
-      }
-    }
-  }
-</style>

package/src/components/Writeup.astro

@@ -1,108 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Badge from 'fulldev-ui/components/Badge.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import List from 'fulldev-ui/components/List.astro'
-import Price from 'fulldev-ui/components/Price.astro'
-import Rating from 'fulldev-ui/components/Rating.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Text from 'fulldev-ui/components/Text.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Lead from './Lead.astro'
-import Paragraph from './Paragraph.astro'
-
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  level?: ComponentProps<typeof Heading>['level']
-  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']
-  text?: ComponentProps<typeof Text>['text']
-  list?: ComponentProps<typeof List>['items']
-  align?: 'start' | 'center' | 'end' | undefined
-  price?: ComponentProps<typeof Price>['value']
-  rating?:
-    | ComponentProps<typeof Rating>
-    | ComponentProps<typeof Rating>['value']
-}
-
-const {
-  level = 2,
-  rating,
-  badge,
-  tagline,
-  heading,
-  lead,
-  paragraph,
-  text,
-  list,
-  price,
-  size,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="writeup"
-  {size}
-  {...rest}
->
-  <slot>
-    <Rating
-      {size}
-      {...typeof rating === 'number' ? { value: rating } : rating}
-    />
-    <Tagline text={tagline} />
-    <Badge
-      {size}
-      {...badge}
-    />
-    <Heading
-      {size}
-      {level}
-      text={heading}
-    />
-    <Lead
-      {size}
-      text={lead}
-    />
-    <Paragraph
-      {size}
-      text={paragraph}
-    />
-    <List
-      items={list}
-      {size}
-    />
-    <Price value={price} />
-  </slot>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .writeup {
-      display: flex;
-      position: relative;
-      flex-direction: column;
-      align-items: inherit;
-      text-align: inherit;
-
-      &.align-start {
-        align-items: flex-start;
-        text-align: left;
-      }
-
-      &.align-center {
-        align-items: center;
-        text-align: center;
-      }
-
-      &.align-end {
-        align-items: flex-end;
-        text-align: right;
-      }
-    }
-  }
-</style>

package/src/components/docs/DecorativeBox.astro

@@ -1,15 +0,0 @@
-<div
-  {...Astro.props}
-  class:list={'decorative-box'}
->
-</div>
-
-<style>
-  .decorative-box {
-    border: 1px solid;
-    border-radius: 4px;
-    min-width: 100px;
-    height: 100%;
-    min-height: 100px;
-  }
-</style>

package/src/components/docs/PropsTable.astro

@@ -1,49 +0,0 @@
----
-// const { schema } = Astro.props
-
-// import Table from 'fulldev-ui/components/Table.astro'
-// import { zodToJsonSchema } from 'zod-to-json-schema'
-
-// const slug = Astro.params.page?.split('/').pop() || ''
-
-// const allSchemas = import.meta.glob('/src/schemas/**/*.ts', {
-//   eager: true,
-// })
-
-// const schemaName = schema ?? slug
-// const foundSchema = Object.entries(allSchemas).find(([key]) =>
-//   key.toLowerCase().includes(`/${schemaName.toLowerCase()}.ts`)
-// )?.[1] as any
-
-// const jsonSchema = zodToJsonSchema(foundSchema?.default, {
-//   pipeStrategy: 'output',
-// }) as { properties?: Record<string, any> }
-
-// const properties = jsonSchema.properties || {}
-
-// const tableBody = Object.entries(properties).map(([key, value]: any) => {
-//   let type = 'any'
-//   if (value.enum) {
-//     type = value.enum.join(' | ')
-//   } else if (value.type) {
-//     type = value.type
-//   } else if (value.$ref) {
-//     type = `typeof ${key}`
-//   }
-//   const defaultValue = value.default?.toString() ?? '-'
-//   return [key, type, defaultValue]
-// })
----
-
-<!-- <Table
-  size="md"
-  class:list={['props-table']}
-  header={['Prop', 'Type', 'Default']}
-  body={tableBody}
-/>
-
-<style is:global>
-  .props-table {
-    overflow: auto;
-  }
-</style> -->

package/src/components/experimental/Video.astro

@@ -1,32 +0,0 @@
-<!-- ---
-// 
-type Props = any & {
-  src: string
-  thumbnail?: string | undefined
-}
-
-const { src, thumbnail } = Astro.props
-const youtubeId =
-  (src?.includes('youtube.com') || src?.includes('youtu.be')) &&
-  src.split('/').pop()?.split('?').shift()
----
-
-{
-  youtubeId && !thumbnail && (
-    <iframe
-      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"
-      allowfullscreen
-    />
-  )
-}
-{
-  youtubeId && thumbnail && (
-    <img
-      src={`https://img.youtube.com/vi/${youtubeId}/0.jpg`}
-      alt=""
-    />
-  )
-} -->

package/src/components/experimental/Window.astro

@@ -1,122 +0,0 @@
-<!-- ---
-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="window block">
-      <div class="button-header">
-        <Button
-          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 is:global>
-  @layer fulldev {
-    .window {
-      .code-container {
-        @apply w-full;
-      }
-
-      &.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 !important;
-            border-radius: 0px !important;
-          }
-        }
-      }
-
-      &.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%;
-        }
-      }
-    }
-  }
-</style> -->

package/src/components/sections.astro

@@ -1,28 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Section from './Section.astro'
-
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  sections?: ComponentProps<typeof Section>[] | undefined
-}
-
-const { sections, ...rest } = Astro.props
----
-
-<Element
-  class:list="sections"
-  {...rest}
->
-  {sections?.map((section) => <Section {...section} />)}
-</Element>
-
-<style is:global >
-  @layer fulldev {
-    .sections {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-</style>