fulldev-ui 0.2.12 → 0.3.0-beta.1

package/src/css/size.css

@@ -0,0 +1,334 @@
+:root {
+  --space-sm-1: 3px;
+  --space-sm-2: 6px;
+  --space-sm-3: 12px;
+  --space-sm-4: 24px;
+  --space-sm-5: 48px;
+  --space-sm-6: 72px;
+  --space-md-1: 4px;
+  --space-md-2: 8px;
+  --space-md-3: 16px;
+  --space-md-4: 32px;
+  --space-md-5: 64px;
+  --space-md-6: 96px;
+  --space-lg-1: 5px;
+  --space-lg-2: 10px;
+  --space-lg-3: 20px;
+  --space-lg-4: 40px;
+  --space-lg-5: 80px;
+  --space-lg-6: 120px;
+
+  --element-sm-1: 6px;
+  --element-sm-2: 9px;
+  --element-sm-3: 12px;
+  --element-md-1: 8px;
+  --element-md-2: 12px;
+  --element-md-3: 16px;
+  --element-lg-1: 10px;
+  --element-lg-2: 16px;
+  --element-lg-3: 20px;
+
+  --text-label-sm: 12px;
+  --text-label-md: 14px;
+  --text-label-lg: 16px;
+
+  --text-body-xs: 12px;
+  --text-body-sm: 14px;
+  --text-body-md: 16px;
+  --text-body-lg: 18px;
+  --text-body-xl: 20px;
+
+  --text-heading-xs: 16px;
+  --text-heading-sm: 18px;
+  --text-heading-md: 20px;
+  --text-heading-lg: 24px;
+  --text-heading-xl: 30px;
+  --text-heading-2xl: 36px;
+  --text-heading-3xl: 48px;
+  --text-heading-4xl: 48px;
+  --text-heading-5xl: 60px;
+
+  @media (min-width: 768px) {
+    --text-heading-xs: 16px;
+    --text-heading-sm: 20px;
+    --text-heading-md: 24px;
+    --text-heading-lg: 30px;
+    --text-heading-xl: 36px;
+    --text-heading-2xl: 48px;
+    --text-heading-3xl: 60px;
+    --text-heading-4xl: 72px;
+    --text-heading-5xl: 96px;
+  }
+}
+
+.compact {
+  --space-sm-1: 3px;
+  --space-sm-2: 6px;
+  --space-sm-3: 9px;
+  --space-sm-4: 12px;
+  --space-sm-5: 15px;
+  --space-sm-6: 18px;
+  --space-md-1: 4px;
+  --space-md-2: 8px;
+  --space-md-3: 12px;
+  --space-md-4: 16px;
+  --space-md-5: 20px;
+  --space-md-6: 24px;
+  --space-lg-1: 5px;
+  --space-lg-2: 10px;
+  --space-lg-3: 15px;
+  --space-lg-4: 20px;
+  --space-lg-5: 25px;
+  --space-lg-6: 30px;
+
+  --element-sm-1: 6px;
+  --element-sm-2: 8px;
+  --element-sm-3: 10px;
+  --element-md-1: 8px;
+  --element-md-2: 10px;
+  --element-md-3: 12px;
+  --element-lg-1: 10px;
+  --element-lg-2: 12px;
+  --element-lg-3: 14px;
+
+  --text-heading-xs: 16px;
+  --text-heading-sm: 18px;
+  --text-heading-md: 20px;
+  --text-heading-lg: 24px;
+  --text-heading-xl: 30px;
+  --text-heading-2xl: 30px;
+  --text-heading-3xl: 30px;
+  --text-heading-4xl: 30px;
+  --text-heading-5xl: 30px;
+}
+
+/* --------------------------- */
+/* Generate sizes */
+/* --------------------------- */
+
+.size-xs,
+.size-xs
+  .compact:not(.size-xs [class*='size-'] .compact):not(
+    .size-xs [class*='size-'].compact
+  ) {
+  --space-1: var(--space-sm-1);
+  --space-2: var(--space-sm-2);
+  --space-3: var(--space-sm-3);
+  --space-4: var(--space-sm-4);
+  --space-5: var(--space-sm-5);
+  --space-6: var(--space-sm-6);
+
+  --element-1: var(--element-sm-1);
+  --element-2: var(--element-sm-2);
+  --element-3: var(--element-sm-3);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--element-sm-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--element-sm-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--element-sm-3));
+
+  --text-label: var(--text-label-sm);
+  --text-body: var(--text-body-xs);
+  --text-heading: var(--text-heading-xs);
+}
+
+.size-sm,
+.size-sm
+  .compact:not(.size-sm [class*='size-'] .compact):not(
+    .size-sm [class*='size-'].compact
+  ) {
+  --space-1: var(--space-sm-1);
+  --space-2: var(--space-sm-2);
+  --space-3: var(--space-sm-3);
+  --space-4: var(--space-sm-4);
+  --space-5: var(--space-sm-5);
+  --space-6: var(--space-sm-6);
+
+  --element-1: var(--element-sm-1);
+  --element-2: var(--element-sm-2);
+  --element-3: var(--element-sm-3);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--element-sm-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--element-sm-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--element-sm-3));
+
+  --text-label: var(--text-label-sm);
+  --text-body: var(--text-body-sm);
+  --text-heading: var(--text-heading-sm);
+}
+
+:where(:root),
+:where(.compact),
+.size-md,
+.size-md
+  .compact:not(.size-md [class*='size-'] .compact):not(
+    .size-md [class*='size-'].compact
+  ) {
+  --space-1: var(--space-md-1);
+  --space-2: var(--space-md-2);
+  --space-3: var(--space-md-3);
+  --space-4: var(--space-md-4);
+  --space-5: var(--space-md-5);
+  --space-6: var(--space-md-6);
+
+  --element-1: var(--element-md-1);
+  --element-2: var(--element-md-2);
+  --element-3: var(--element-md-3);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--element-md-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--element-md-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--element-md-3));
+
+  --text-label: var(--text-label-md);
+  --text-body: var(--text-body-md);
+  --text-heading: var(--text-heading-md);
+}
+
+.size-lg,
+.size-lg
+  .compact:not(.size-lg [class*='size-'] .compact):not(
+    .size-lg [class*='size-'].compact
+  ) {
+  --space-1: var(--space-lg-1);
+  --space-2: var(--space-lg-2);
+  --space-3: var(--space-lg-3);
+  --space-4: var(--space-lg-4);
+  --space-5: var(--space-lg-5);
+  --space-6: var(--space-lg-6);
+
+  --element-1: var(--element-lg-1);
+  --element-2: var(--element-lg-2);
+  --element-3: var(--element-lg-3);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--element-lg-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--element-lg-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--element-lg-3));
+
+  --text-label: var(--text-label-lg);
+  --text-body: var(--text-body-lg);
+  --text-heading: var(--text-heading-lg);
+}
+
+.size-xl,
+.size-xl
+  .compact:not(.size-xl [class*='size-'] .compact):not(
+    .size-xl [class*='size-'].compact
+  ) {
+  --space-1: var(--space-lg-1);
+  --space-2: var(--space-lg-2);
+  --space-3: var(--space-lg-3);
+  --space-4: var(--space-lg-4);
+  --space-5: var(--space-lg-5);
+  --space-6: var(--space-lg-6);
+
+  --element-1: var(--element-lg-1);
+  --element-2: var(--element-lg-2);
+  --element-3: var(--element-lg-3);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--element-lg-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--element-lg-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--element-lg-3));
+
+  --text-label: var(--text-label-lg);
+  --text-body: var(--text-body-xl);
+  --text-heading: var(--text-heading-xl);
+}
+
+.size-2xl,
+.size-2xl
+  .compact:not(.size-2xl [class*='size-'] .compact):not(
+    .size-2xl [class*='size-'].compact
+  ) {
+  --space-1: var(--space-lg-1);
+  --space-2: var(--space-lg-2);
+  --space-3: var(--space-lg-3);
+  --space-4: var(--space-lg-4);
+  --space-5: var(--space-lg-5);
+  --space-6: var(--space-lg-6);
+
+  --element-1: var(--element-lg-1);
+  --element-2: var(--element-lg-2);
+  --element-3: var(--element-lg-3);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--element-lg-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--element-lg-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--element-lg-3));
+
+  --text-label: var(--text-label-lg);
+  --text-body: var(--text-body-xl);
+  --text-heading: var(--text-heading-2xl);
+}
+
+.size-3xl,
+.size-3xl
+  .compact:not(.size-3xl [class*='size-'] .compact):not(
+    .size-3xl [class*='size-'].compact
+  ) {
+  --space-1: var(--space-lg-1);
+  --space-2: var(--space-lg-2);
+  --space-3: var(--space-lg-3);
+  --space-4: var(--space-lg-4);
+  --space-5: var(--space-lg-5);
+  --space-6: var(--space-lg-6);
+
+  --element-1: var(--element-lg-1);
+  --element-2: var(--element-lg-2);
+  --element-3: var(--element-lg-3);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--element-lg-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--element-lg-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--element-lg-3));
+
+  --text-label: var(--text-label-lg);
+  --text-body: var(--text-body-xl);
+  --text-heading: var(--text-heading-3xl);
+}
+
+.size-4xl,
+.size-4xl
+  .compact:not(.size-4xl [class*='size-'] .compact):not(
+    .size-4xl [class*='size-'].compact
+  ) {
+  --space-1: var(--space-lg-1);
+  --space-2: var(--space-lg-2);
+  --space-3: var(--space-lg-3);
+  --space-4: var(--space-lg-4);
+  --space-5: var(--space-lg-5);
+  --space-6: var(--space-lg-6);
+
+  --element-1: var(--element-lg-1);
+  --element-2: var(--element-lg-2);
+  --element-3: var(--element-lg-3);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--element-lg-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--element-lg-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--element-lg-3));
+
+  --text-label: var(--text-label-lg);
+  --text-body: var(--text-body-xl);
+  --text-heading: var(--text-heading-4xl);
+}
+
+.size-5xl,
+.size-5xl
+  .compact:not(.size-5xl [class*='size-'] .compact):not(
+    .size-5xl [class*='size-'].compact
+  ) {
+  --space-1: var(--space-lg-1);
+  --space-2: var(--space-lg-2);
+  --space-3: var(--space-lg-3);
+  --space-4: var(--space-lg-4);
+  --space-5: var(--space-lg-5);
+  --space-6: var(--space-lg-6);
+
+  --element-1: var(--element-lg-1);
+  --element-2: var(--element-lg-2);
+  --element-3: var(--element-lg-3);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--element-lg-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--element-lg-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--element-lg-3));
+
+  --text-label: var(--text-label-lg);
+  --text-body: var(--text-body-xl);
+  --text-heading: var(--text-heading-5xl);
+}

package/src/css/styles.css

@@ -6,8 +6,8 @@
   --font-family: 'IBM Plex Sans', sans-serif;
   --font-weight: 400;
 
-  --heading-font-family: var(--font-family);
-  --heading-font-weight: 700;
+  --text-heading-font-family: var(--font-family);
+  --text-heading-font-weight: 700;
 
   --button-font-family: var(--font-family);
   --button-font-weight: 500;

package/src/index.ts

@@ -1,20 +1,9 @@
-// Utils
-export * from './utils/getAllCollections'
-export * from './utils/getPathname'
-export * from './utils/transform/transform'
-export * from './utils/transform/transformCasing'
-export * from './utils/transform/transformReferences'
-export * from './utils/transform/transformSelfs'
-export * from './utils/transform/transformUnderscores'
-
-// Schemas
-export * from './schemas/attributesSchema'
-export * from './schemas/pageSchema'
+// Schemas and utils
+export * from './schemas/collection'
 
 // Base components
 export { default as Badge } from './components/base/Badge.astro'
 export { default as Button } from './components/base/Button.astro'
-export { default as Buttons } from './components/base/Buttons.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'
@@ -36,36 +25,26 @@ export { default as List } from './components/typography/List.astro'
 export { default as ListItem } from './components/typography/ListItem.astro'
 export { default as Paragraph } from './components/typography/Paragraph.astro'
 export { default as Tagline } from './components/typography/Tagline.astro'
-
-// Structure components
-export { default as Bento } from './components/structure/Bento.astro'
-export { default as Carousel } from './components/structure/Carousel.astro'
-export { default as Grid } from './components/structure/Grid.astro'
-export { default as Group } from './components/structure/Group.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 Stack } from './components/structure/Stack.astro'
+export { default as Text } from './components/typography/Text.astro'
 
 // Segment components
-export { default as Body } from './components/segment/Body.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 Footer } from './components/segment/Footer.astro'
-export { default as Form } from './components/segment/Form.astro'
+export { default as Group } from './components/segment/Group.astro'
 export { default as Header } from './components/segment/Header.astro'
-export { default as Main } from './components/segment/Main.astro'
-export { default as Nav } from './components/segment/Nav.astro'
-export { default as Prose } from './components/segment/Prose.astro'
 export { default as Section } from './components/segment/Section.astro'
-export { default as Writeup } from './components/segment/Writeup.astro'
 
 // Utility components
 export { default as Block } from './components/_Block.astro'
 export { default as Blocks } from './components/_Blocks.astro'
 export { default as Children } from './components/_Children.astro'
 export { default as Head } from './components/utility/Head.astro'
-
-// Layouts
-export { default as Layout } from './layouts/Layout.astro'
+export { default as Layout } from './components/utility/Layout.astro'

package/src/integration/integration.ts

@@ -6,6 +6,51 @@ const defaultConfig = {
   layer: 'fulldev',
 }
 
+interface Config {
+  layer: string
+  prefix: string
+  screen: string
+  styled: boolean
+  responsive: boolean
+  colors: {
+    gray: {
+      background: string
+      backgroundPanel: string
+      backgroundElement: string
+      backgroundHover: string
+      backgroundActive: string
+
+      border: string
+      borderElement: string
+      borderHover: string
+
+      solid: string
+      solidHover: string
+
+      text: string
+      textContrast: string
+    }
+    accent: {
+      background: string
+      backgroundPanel: string
+      backgroundElement: string
+      backgroundHover: string
+      backgroundActive: string
+
+      border: string
+      borderElement: string
+      borderHover: string
+
+      solid: string
+      solidHover: string
+
+      text: string
+      textContrast: string
+    }
+  }
+  tailwind: {}
+}
+
 export default function fulluiIntegration(
   userConfig: any = {}
 ): AstroIntegration {

package/src/schemas/collection.ts

@@ -0,0 +1,87 @@
+import type { ZodRawShape } from 'astro/zod'
+import {
+  reference,
+  z,
+  type AnyEntryMap,
+  type ContentEntryMap,
+  type DataEntryMap,
+  type ValidContentEntrySlug,
+} from 'astro:content'
+
+export const pathSchema = <C extends keyof AnyEntryMap>(collection: C) =>
+  z
+    .string()
+    .transform((value) => {
+      const fullpath = value.split(`${collection}/`).pop()
+      const slug = fullpath?.split('.').shift()
+      return slug
+    })
+    .pipe(reference(collection))
+
+const buttonSchema = z
+  .object({
+    text: z.string(),
+    html: z.string(),
+    href: z.string(),
+  })
+  .partial()
+  .passthrough()
+
+const baseSchema = z
+  .object({
+    image: z.string(),
+    images: z.string().array(),
+    rating: z.number(),
+    badge: z.string(),
+    tagline: z.string(),
+    heading: z.string(),
+    paragraph: z.string(),
+    list: z.string().array(),
+    price: z.string().or(z.number()),
+    button: buttonSchema,
+    buttons: buttonSchema.array(),
+  })
+  .partial()
+  .passthrough()
+
+const blockSchema = <R extends ZodRawShape>(references: R) =>
+  baseSchema
+    .extend({
+      card: baseSchema,
+      cards: baseSchema.array(),
+    })
+    .extend(references)
+    .partial()
+    .passthrough()
+
+export const pageSchema = <R extends ZodRawShape>(references: R) =>
+  baseSchema
+    .extend({
+      title: z.string(),
+      description: z.string(),
+      block: blockSchema(references),
+      blocks: z.object({}).catchall(blockSchema(references)).partial(),
+      head: z
+        .object({
+          title: z.string(),
+          description: z.string(),
+          image: z.string().optional(),
+        })
+        .partial(),
+    })
+    .extend(references)
+    .partial()
+    .passthrough()
+
+export type Reference<C extends keyof AnyEntryMap> =
+  C extends keyof ContentEntryMap
+    ? {
+        collection: C
+        slug: ValidContentEntrySlug<C>
+      }
+    : C extends keyof DataEntryMap
+      ? {
+          collection: C
+          id: keyof DataEntryMap[C]
+        }
+      : never

package/src/blocks/todo.md

@@ -1,12 +0,0 @@
-Add config files here for blocks. These should contain the following things:
-
-- schema for in CMS
-- default values
-- schema for all possible props, cms and defaults combined
-
-Each block should have it's own config file, because this aligns with how astro and markdown workk; they utilize folder structure.
-We might need a folder for 'hero' for example, to add all possible hero's.
-
-
-example:
-Hero component should choose which hero. Could also be a local hero. similar behaviour as blocks, but then only hero's.

package/src/components/_Plural.astro

@@ -1,27 +0,0 @@
----
-import { listify } from 'radash'
-import { isNumber, isString, pickBy } from 'remeda'
-
-interface Props {
-  component: any
-  [defaults: string]: any
-  [items: number]: object | string
-}
-
-const { component: Component, ...rest } = Astro.props
-
-const defaults = pickBy(rest, (v, key) => !isNumber(parseInt(key as string)))
-
-const items = pickBy(rest, (v, key) => isNumber(parseInt(key as string)))
-const array = listify(items, (k, value) => value)
-const mapped = array.map((item) => (isString(item) ? { html: item } : item))
----
-
-{
-  mapped.map((item) => (
-    <Component
-      {...defaults}
-      {...item}
-    />
-  ))
-}

package/src/components/base/Buttons.astro

@@ -1,15 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import type { Pluralmorphic } from '../../types/Pluralmorphic'
-import Plural from '../_Plural.astro'
-import Button from './Button.astro'
-
-type Props = Pluralmorphic<ComponentProps<typeof Button>>
-
-const { props } = Astro
----
-
-<Plural
-  component={Button}
-  {...props}
-/>

package/src/components/base/Images.astro

@@ -1,15 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import type { Pluralmorphic } from '../../types/Pluralmorphic'
-import Plural from '../_Plural.astro'
-import Image from './Image.astro'
-
-type Props = Pluralmorphic<ComponentProps<typeof Image>>
-
-const { props } = Astro
----
-
-<Plural
-  component={Image}
-  {...props}
-/>

package/src/components/segment/Footer.astro

@@ -1,14 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import type Tag from '../_Tag.astro'
-
-type Props<As extends HTMLTag = 'footer'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag>
-
-const {
-  as = 'footer',
-  direction = 'horizontal',
-  density = 'compact',
-  ...rest
-} = Astro.props
----

package/src/components/structure/Bento.astro

@@ -1,35 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag>
-
-const { ...rest } = Astro.props
----
-
-<Tag
-  class:list={['bento']}
-  {...rest}
->
-  <slot />
-</Tag>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('bento') {
-    display: grid;
-    position: relative;
-    grid-template-columns: 1fr;
-    width: 100%;
-
-    @media (min-width: 1024px) {
-      grid-template-columns: 1fr 1fr 1fr;
-
-      & > *:nth-child(2n) {
-        grid-column-start: span 2;
-      }
-    }
-  }
-</style>