fulldev-ui 0.3.0-beta.3 → 0.3.3

package/src/index.ts

@@ -1,21 +1,31 @@
 // Schemas and utils
-export * from './schemas/collection'
+export * from './schemas/schemas'
 
 // Base components
 export { default as Badge } from './components/base/Badge.astro'
 export { default as Button } from './components/base/Button.astro'
-export { default as Checkbox } from './components/base/Checkbox.astro'
 export { default as Icon } from './components/base/Icon.astro'
 export { default as Image } from './components/base/Image.astro'
-export { default as Input } from './components/base/Input.astro'
 export { default as Logo } from './components/base/Logo.astro'
-export { default as Radio } from './components/base/Radio.astro'
 export { default as Rating } from './components/base/Rating.astro'
-export { default as Select } from './components/base/Select.astro'
-export { default as SelectOption } from './components/base/SelectOption.astro'
-export { default as Switch } from './components/base/Switch.astro'
-export { default as Textarea } from './components/base/Textarea.astro'
 export { default as Video } from './components/base/Video.astro'
+export { default as Checkbox } from './components/base/checkbox/Checkbox.astro'
+export { default as Input } from './components/base/input/Input.astro'
+export { default as InputElement } from './components/base/input/InputElement.astro'
+export { default as Radio } from './components/base/radio/Radio.astro'
+export { default as Select } from './components/base/select/Select.astro'
+export { default as SelectElement } from './components/base/select/SelectElement.astro'
+export { default as SelectOption } from './components/base/select/SelectOption.astro'
+export { default as Switch } from './components/base/switch/Switch.astro'
+export { default as Table } from './components/base/table/Table.astro'
+export { default as TableBody } from './components/base/table/TableBody.astro'
+export { default as TableCell } from './components/base/table/TableCell.astro'
+export { default as TableFooter } from './components/base/table/TableFooter.astro'
+export { default as TableHead } from './components/base/table/TableHead.astro'
+export { default as TableHeader } from './components/base/table/TableHeader.astro'
+export { default as TableRow } from './components/base/table/TableRow.astro'
+export { default as Textarea } from './components/base/textarea/Textarea.astro'
+export { default as TextareaElement } from './components/base/textarea/TextareaElement.astro'
 
 // Typography components
 export { default as Heading } from './components/typography/Heading.astro'
@@ -31,17 +41,25 @@ export { default as Text } from './components/typography/Text.astro'
 export { default as Body } from './components/_archive/Body.astro'
 export { default as Main } from './components/_archive/Main.astro'
 export { default as Nav } from './components/_archive/Nav.astro'
-export { default as Footer } from './components/_todo/Footer.astro'
 export { default as Form } from './components/_todo/Form.astro'
 export { default as Prose } from './components/_todo/Prose.astro'
 export { default as Writeup } from './components/_todo/Writeup.astro'
-export { default as Box } from './components/segment/Box.astro'
 export { default as Card } from './components/segment/Card.astro'
-export { default as Deck } from './components/segment/Deck.astro'
-export { default as Group } from './components/segment/Group.astro'
+export { default as Footer } from './components/segment/Footer.astro'
 export { default as Header } from './components/segment/Header.astro'
 export { default as Section } from './components/segment/Section.astro'
 
+// Structure components
+export { default as Bento } from './components/structure/Bento.astro'
+export { default as Carousel } from './components/structure/Carousel.astro'
+export { default as Column } from './components/structure/Column.astro'
+export { default as Grid } from './components/structure/Grid.astro'
+export { default as Masonry } from './components/structure/Masonry.astro'
+export { default as Row } from './components/structure/Row.astro'
+export { default as Split } from './components/structure/Split.astro'
+export { default as Spread } from './components/structure/Spread.astro'
+export { default as Wrap } from './components/structure/Wrap.astro'
+
 // Utility components
 export { default as Block } from './components/_Block.astro'
 export { default as Blocks } from './components/_Blocks.astro'

package/src/integration/tailwind.ts

@@ -0,0 +1,34 @@
+import plugin from 'tailwindcss/plugin'
+
+export default plugin(() => {}, {
+  theme: {
+    spacing: {
+      'space-1': 'var(--space-1)',
+      'space-2': 'var(--space-2)',
+      'space-3': 'var(--space-3)',
+      'space-4': 'var(--space-4)',
+      'space-5': 'var(--space-5)',
+      'space-6': 'var(--space-6)',
+      'space-7': 'var(--space-7)',
+    },
+    borderRadius: {
+      1: 'var(--radius-1)',
+      2: 'var(--radius-2)',
+      3: 'var(--radius-3)',
+    },
+    fontSize: {
+      1: 'var(--text-1)',
+      2: 'var(--text-2)',
+      3: 'var(--text-3)',
+      4: 'var(--text-4)',
+      5: 'var(--text-5)',
+      6: 'var(--text-6)',
+      7: 'var(--text-7)',
+    },
+    colors: {
+      background: 'var(--background)',
+      text: 'var(--text)',
+      border: 'var(--border)',
+    },
+  },
+})

package/src/integration/unocss.ts

@@ -0,0 +1,38 @@
+import { definePreset, presetUno } from 'unocss'
+
+export default definePreset((options?: any) => {
+  return {
+    name: 'fullUI',
+    presets: [presetUno()],
+    theme: {
+      spacing: {
+        'space-1': 'var(--space-1)',
+        'space-2': 'var(--space-2)',
+        'space-3': 'var(--space-3)',
+        'space-4': 'var(--space-4)',
+        'space-5': 'var(--space-5)',
+        'space-6': 'var(--space-6)',
+        'space-7': 'var(--space-7)',
+      },
+      borderRadius: {
+        1: 'var(--radius-1)',
+        2: 'var(--radius-2)',
+        3: 'var(--radius-3)',
+      },
+      fontSize: {
+        1: 'var(--text-1)',
+        2: 'var(--text-2)',
+        3: 'var(--text-3)',
+        4: 'var(--text-4)',
+        5: 'var(--text-5)',
+        6: 'var(--text-6)',
+        7: 'var(--text-7)',
+      },
+      colors: {
+        background: 'var(--background)',
+        text: 'var(--text)',
+        border: 'var(--border)',
+      },
+    },
+  }
+})

package/src/schemas/schemas.ts

@@ -0,0 +1,45 @@
+import { z } from 'astro/zod'
+
+export const pathSchema = z.string().transform((value) => {
+  const path = value.split(`content`).pop()
+  const slug = path?.split('/').pop()?.split('.').shift()
+  return slug
+})
+
+export const buttonSchema = z.object({
+  text: z.string(),
+  html: z.string(),
+  href: z.string(),
+})
+
+const baseSchema = z.object({
+  image: z.string(),
+  images: z.string().array(),
+  icon: z.string(),
+  rating: z.number(),
+  badge: z.string(),
+  tagline: z.string(),
+  heading: z.string(),
+  text: z.string(),
+  list: z.string().array(),
+  price: z.string().or(z.number()),
+  button: buttonSchema,
+  buttons: buttonSchema.array(),
+})
+
+export const blockSchema = baseSchema.extend({
+  card: baseSchema,
+  cards: baseSchema.array(),
+})
+
+export const pageSchema = baseSchema.extend({
+  title: z.string(),
+  description: z.string(),
+  head: z
+    .object({
+      title: z.string(),
+      description: z.string(),
+      image: z.string().optional(),
+    })
+    .partial(),
+})

package/src/components/_archive/Row.astro

@@ -1,26 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component>
-
-const { ...rest } = Astro.props
----
-
-<Component
-  class:list={['row']}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('row') {
-    display: flex;
-    align-items: center;
-    gap: var(--space-4);
-  }
-</style>

package/src/components/_todo/Footer.astro

@@ -1,66 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'footer'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component> & {
-    structure?: 'spread'
-    position?: 'relative' | 'sticky' | 'fixed' | 'absolute'
-    variant?: 'base' | 'raised'
-    frame?: 'wrapper' | 'container' | 'panel'
-    align?: 'start' | 'center' | 'end'
-  }
-
-const {
-  as = 'footer',
-  density = 'base',
-  frame = 'wrapper',
-  ...rest
-} = Astro.props
----
-
-<Component
-  class:list={['footer']}
-  {as}
-  {density}
-  {frame}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('footer') {
-    --inner: var(--element-3);
-
-    display: flex;
-    top: 0;
-    right: 0;
-    left: 0;
-    justify-content: space-between;
-    align-items: center;
-    z-index: 10;
-    background: var(--background);
-    padding-top: var(--element-3);
-    padding-bottom: var(--element-3);
-    width: 100%;
-
-    // &.panel {
-    //   margin-top: var(--inner);
-    // }
-
-    &.position-fixed {
-      position: fixed;
-    }
-
-    &.position-absolute {
-      position: absolute;
-    }
-
-    &.position-sticky {
-      position: sticky;
-    }
-  }
-</style>

package/src/components/_todo/todo.md

@@ -1,10 +0,0 @@
-# Chores
-
-# New components
-- Footer
-- Header
-- Nav
-- Prose
-- Writeup
-- Join
-- Pile

package/src/components/base/Checkbox.astro

@@ -1,41 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-
-type Props = ComponentProps<typeof Component>
-
-const { as = 'input', type = 'checkbox', name, ...rest } = Astro.props
----
-
-<Component
-  class:list={['checkbox']}
-  if={true}
-  {as}
-  type="checkbox"
-  {...rest}
-/>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('checkbox') {
-    display: block;
-    border-width: var(--border-width);
-    border-color: var(--border-color);
-    border-radius: var(--full-border-radius-2);
-    background: var(--background);
-    min-width: var(--element-2);
-    color: var(--color);
-    accent-color: var(--10);
-    font-size: var(--text-body);
-
-    &:hover {
-      border: var(--border-color-hover);
-      background: var(--background-hover);
-    }
-
-    &:active {
-      border: var(--border-color-active);
-      background: var(--background-active);
-    }
-  }
-</style>

package/src/components/base/Input.astro

@@ -1,59 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'input'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component> & {
-    variant?: 'outline'
-  }
-
-const { as = 'input', variant = 'outline', ...rest } = Astro.props
----
-
-<Component
-  class:list={['input']}
-  if={true}
-  {as}
-  {variant}
-  {...rest}
-/>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('input') {
-    display: flex;
-    position: relative;
-    align-items: center;
-    outline: none;
-    box-shadow: inset 0 0 0 var(--border-width) var(--border-outline);
-    border: 0px;
-    border-radius: var(--radius-1);
-    background-color: var(--input-background);
-    padding: var(--element-2);
-    width: 100%;
-    min-width: var(--element-2);
-    height: calc(var(--text-label) + 2 * var(--element-3));
-    color: var(--foreground);
-    font-weight: var(--font-weight);
-    font-size: var(--text-label);
-    line-height: 1.25;
-    font-family: var(--font-family);
-
-    &:hover {
-      outline: none;
-      box-shadow: inset 0 0 0 1px var(--border-hover);
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: inset 0 0 0 3px var(--border-hover);
-    }
-
-    &:disabled {
-      opacity: 50%;
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-</style>

package/src/components/base/Radio.astro

@@ -1,39 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-
-type Props = ComponentProps<typeof Component>
-
-const { as = 'input', type = 'radio', name, ...rest } = Astro.props
----
-
-<Component
-  class:list={['radio']}
-  if={true}
-  {as}
-  type="radio"
-  {...rest}
-/>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('radio') {
-    border-width: var(--border-width);
-    border-color: var(--border-color);
-    border-radius: var(--full-border-radius-2);
-    background: var(--background);
-    min-width: var(--element-2);
-    accent-color: var(--10);
-    font-size: var(--text-body);
-
-    &:hover {
-      border: var(--border-color-hover);
-      background: var(--background-hover);
-    }
-
-    &:active {
-      border: var(--border-color-active);
-      background: var(--background-active);
-    }
-  }
-</style>

package/src/components/base/Select.astro

@@ -1,69 +0,0 @@
----
-// TODO clean up the styling. Since before every component in Fullui was just one element, we should decide how we are going to handle situation like this where extra elements are needed.
-// I think we should split it up into multiple components, like SelectIcon etc. gr Sil
-import type { ComponentProps, Polymorphic } from 'astro/types'
-import { isObject } from 'radash'
-import Component from '../_Component.astro'
-import Icon from './Icon.astro'
-import SelectOption from './SelectOption.astro'
-
-type Props<As extends 'select'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component> & {
-    options?: (ComponentProps<typeof SelectOption> | string)[]
-  }
-
-const { as = 'select', options, ...rest } = Astro.props
----
-
-<Component
-  as="div"
-  class:list="select-wrapper"
-  {...rest}
->
-  <Component
-    as="select"
-    if={options}
-    class:list={['select input']}
-    {...rest}
-  >
-    <slot name="before" />
-    {
-      options?.map((option: any) => {
-        if (isObject(option)) return <SelectOption {...option} />
-        else return <SelectOption text={option} />
-      })
-    }
-    <slot />
-  </Component>
-  <div class="select-icon-wrapper">
-    <Icon
-      class="select-icon"
-      name="chevron-down"
-    />
-  </div>
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('select') {
-    appearance: none;
-  }
-
-  .select-icon-wrapper {
-    display: flex;
-    position: absolute;
-    top: 0;
-    right: var(--element-2);
-    align-items: center;
-    margin: 0 !important;
-    padding: 0;
-    height: 100%;
-    pointer-events: none;
-  }
-
-  .full.select-wrapper {
-    position: relative;
-    width: 100%;
-  }
-</style>

package/src/components/base/SelectOption.astro

@@ -1,27 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-
-type Props = Omit<HTMLAttributes<'option'>, 'slot'> & {
-  text?: string
-}
-
-const { text, ...rest } = Astro.props
----
-
-<option
-  class:list={['option']}
-  {...rest}
->
-  {text}
-  <slot />
-</option>
-
-<style>
-  .full.option {
-    color: var(--foreground);
-    font-weight: var(--font-weight);
-    font-size: var(--text-label);
-    line-height: 1;
-    font-family: var(--font-family);
-  }
-</style>

package/src/components/base/Textarea.astro

@@ -1,34 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'textarea'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component>
-
-const {
-  as = 'textarea',
-  rows = '5',
-  variant = 'outline',
-  name,
-  ...rest
-} = Astro.props
----
-
-<Component
-  class:list={['textarea input']}
-  if={true}
-  {rows}
-  {variant}
-  {as}
-  {...rest}
-/>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('textarea') {
-    height: calc((var(--text-1) + 2 * var(--element-3)) * 2);
-    min-height: calc((var(--text-1) + 2 * var(--element-3)) * 1);
-    resize: vertical;
-  }
-</style>

package/src/components/base/todo.md

@@ -1,7 +0,0 @@
-# Chores
-
-# New components
-- Stat (for displaying a number with a label)
-- Spinner (for loading states)
-- Bubble (for whatsapp chat bubbles etc)
-- Divider (for separating with a light border)

package/src/components/segment/Box.astro

@@ -1,41 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'section'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component> & {
-    scheme?: 'light' | 'dark'
-    color?: 'base' | 'brand'
-    size?: 'sm' | 'md' | 'lg'
-    compact?: boolean
-    frame?: 'container' | 'wrapper' | 'panel' | 'viewport' | 'none'
-    variant?: 'fill' | 'subtle' | 'outline' | 'soft' | 'solid' | 'surface'
-    align?: 'start' | 'center' | 'end' | 'stretch'
-    structure?:
-      | 'row'
-      | 'column'
-      | 'split'
-      | 'spread'
-      | 'grid'
-      | 'bento'
-      | 'masonry'
-      | 'carousel'
-  }
-
-const { ...rest } = Astro.props
----
-
-<Component
-  class:list={['box']}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('box') {
-    position: relative;
-  }
-</style>

package/src/components/segment/Deck.astro

@@ -1,40 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
-  scheme?: 'light' | 'dark'
-  color?: 'base' | 'brand'
-  compact?: boolean
-  size?: 'sm' | 'md' | 'lg' | 'xl'
-  structure?: 'grid' | 'carousel' | 'masonry' | 'bento' | 'row' | 'split'
-  frame?: 'wrapper' | 'container'
-}
-
-const { as = 'div', structure = 'grid', ...rest } = Astro.props
----
-
-<Component
-  class:list={['deck']}
-  {as}
-  {structure}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('deck') {
-    position: relative;
-    width: 100%;
-
-    // &.frame-fill {
-    //   margin-right: calc(var(--space-gutter) * -1);
-    //   margin-left: calc(var(--space-gutter) * -1);
-    //   padding: 0 var(--space-gutter) var(--space-3);
-    //   width: calc(100% + var(--space-gutter) * 2);
-    // }
-  }
-</style>