fulldev-ui 0.4.15 → 0.4.16

package/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,57 +1,12 @@
-name: "Bug report"
-description: Report an issue
-title: '[bug]: '
-labels: ["bug"]
+name: 'Bug report'
+description: Report a bug or issue
+labels: ['bug']
 body:
-  - type: markdown
-    attributes:
-      value: |
-        ### Thanks for taking the time to create a bug report. Please search existing issues before submitting, as the issue may have already been addressed.
-
-  - type: textarea
-    id: bug-description
-    attributes:
-      label: Describe the bug
-      description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, describe how in the description.
-      placeholder: Bug description
-    validations:
-      required: true
-
-  - type: input
-    id: components-affected
-    attributes:
-      label: Affected component/components/documentation
-      description: Is this feature request relevant to any of the already existing components?
-      placeholder: ex. Button, Input...
-    validations:
-      required: false
-
   - type: textarea
-    id: reproduction
+    id: description
     attributes:
-      label: How to reproduce
-      description:  A step-by-step description of how to reproduce the bug.
-      placeholder: |
-        1. Go to '...'
-        2. Click on '....'
-        3. See error
+      label: Describe the bug or issue
+      description: Be clear and concise. Add logs and/or screenshots if applicable.
+      placeholder: Add your bug or issue description here...
     validations:
       required: true
-
-  - type: textarea
-    id: logs
-    attributes:
-      label: Logs
-      description: "Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text."
-      render: bash
-
-  - type: checkboxes
-    id: terms
-    attributes:
-      label: Before submitting
-      description: By submitting this issue, you agree to follow our [Contributing Guidelines](https://github.com/fulldotdev/ui/blob/main/CONTRIBUTING.md).
-      options:
-        - label: I've made research efforts and searched the documentation
-          required: true
-        - label: I've searched for existing issues
-          required: true

package/.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,8 @@
 blank_issues_enabled: false
 contact_links:
+  - name: Add your site to our showcase
+    url: https://github.com/fulldotdev/ui/blob/main/CONTRIBUTING.md#showcase
+    about: Add your project to the showcase page and get featured on our website.
   - name: Get Help on Discord
     url: https://discord.gg/tdmUyH2YE4
     about: If you can't get something to work, open a forum post in our Discord server.

package/.github/ISSUE_TEMPLATE/documentation.yml

@@ -0,0 +1,12 @@
+name: 'Documentation'
+description: Issues and suggestions regarding documentation
+labels: ['docs']
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the issue or suggestion
+      description: Be clear and concise. Add logs and/or screenshots if applicable.
+      placeholder: Add your issue or suggestion description here...
+    validations:
+      required: true

package/.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,39 +1,12 @@
-name: 'Feature request'
-description: Create a feature request for fulldev-ui
-title: '[feat]: '
-labels: ['area: request']
+name: 'Feature'
+description: Propose and discuss improvements
+labels: ['feature']
 body:
-  - type: markdown
-    attributes:
-      value: |
-        ### Thanks for taking the time to create a feature request! Please search existing issues before submitting, as the issue may have already been addressed.
-
   - type: textarea
-    id: feature-description
+    id: description
     attributes:
-      label: Feature description
-      description: Tell us about your feature request
-      placeholder: 'I think this feature would be nice to have because...'
-      value: 'Describe your feature request...'
+      label: Describe the feature
+      description: Be clear and concise. Add logs and/or screenshots if applicable.
+      placeholder: Add your feature description here...
     validations:
       required: true
-
-  - type: input
-    id: components-affected
-    attributes:
-      label: Affected component/components/documentation
-      description: Is this feature request relevant to any of the already existing components?
-      placeholder: ex. Button, Input...
-    validations:
-      required: false
-
-  - type: checkboxes
-    id: terms
-    attributes:
-      label: Before submitting
-      description: By submitting this request, you agree to follow our [Contributing Guidelines](https://github.com/fulldotdev/ui/blob/main/CONTRIBUTING.md).
-      options:
-        - label: I've made research efforts and searched the documentation
-          required: true
-        - label: I've searched for existing issues and PRs
-          required: true

package/.github/ISSUE_TEMPLATE/support.yml

@@ -0,0 +1,12 @@
+name: 'Support'
+description: Ask a question or request help
+labels: ['support']
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe your question or request
+      description: Be clear and concise. Add logs and/or screenshots if applicable.
+      placeholder: Add your question or request description here...
+    validations:
+      required: true

package/.github/pull_request_template.md

@@ -1,19 +1,7 @@
-# Changes/Additions being made
+# Changes/Additions being made and why
 
 Here give examples of the changes you've made in this pull request. Include an itemized list if you can. It'll help the reviewer
 
-## What's the context?
-
-What's the context for the changes? Are there any
-
-## Rationale behind the change or addition
-
-Why did you choose to make these changes? Were there any trade-offs you had to consider?
-
-## Test plan
-
-How do you know the changes are safe to ship to production?
-
 ## Screenshots (optional)
 
 If you made visual changes, what are the before an afters?

package/CODE_OF_CONDUCT.md

@@ -0,0 +1,6 @@
+# Contributor Code of Conduct
+We accept and encourage everyone's contributions. It doesn't matter how you look, how you feel, where you're from, or anything like that. In fact, we won't bring it up, or ask.
+
+We are here to build great software, to learn, to grow, and to help each other. Maybe make some friends along the way.
+
+If you have any questions, please reach out!

package/CONTRIBUTING.md

@@ -55,11 +55,14 @@ The main source directory containing all the core files of the project.
 
 ### Setup
 
-1. Clone the Github repository in your designated folder:
+1. Fork the [repository](https://github.com/fulldotdev/ui) by clicking the fork button on the top right of the repository page.
+
+2. Clone the Github repository in your designated folder:
 
 ```bash
-git clone https://github.com/fulldotdev/ui.git
+git clone https://github.com/your-user-name/ui
 ```
+Ensure the cloned repo is named "ui" or replace "ui" with your fork's name.
 
 2. Enter the folder using `cd ui`.
 
@@ -69,7 +72,7 @@ git clone https://github.com/fulldotdev/ui.git
 git checkout -b my-new-branch
 ```
 
-1. Install the packages using pnpm:
+4. Install the packages using pnpm:
 
 ```bash
 pnpm install
@@ -77,7 +80,7 @@ pnpm install
 
 Make sure to do this in root to make sure you're using the local version of the component package.
 
-1. Run the development server:
+5. Run the development server:
 
 ```bash
 pnpm dev
@@ -85,10 +88,23 @@ pnpm dev
 
 ## Commit & Pull Requests
 
+### Pull Requests
+
+The simplest way to open a pull request with your changes is by using github web, after following the [setup guide](#setup) and commit your changes you have a contribute button at the top of your repo, after clicking that you should be able to make a pull request and go from there.
+
 ### Commit Conduct
 
 For a faster and easier review we advise you to use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#summary).
 
+## Showcase
+
+Have you used fulldev-ui to build a website? Add it to the showcase!
+
+1. Fork this repository.
+2. Add a screenshot of your site to the `public/showcase/` directory.
+3. Add your site to the `showcase` array at the top of `src/content/pages/overview/showcase.mdx`.
+4. Go to the forked repository on your Github and clicke the 'Contribute` button to make a Pull Request.
+
 ## Community / Contact
 
 Looking to share your work using fulldev-ui, regular talks about it or support join our [discord server](https://discord.gg/tdmUyH2YE4).

package/README.md

@@ -29,3 +29,4 @@ Copyright (c) 2024–present [Fulldev][fulldev]
 [docs]: https://ui.full.dev/
 [fulldev]: https://full.dev/
 [issues]: https://github.com/fulldotdev/ui/issues/
+[discord]: https://discord.gg/vXZqMbadm8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.4.15",
+  "version": "0.4.16",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",
@@ -22,6 +22,7 @@
     "build": "astro build",
     "check": "astro check",
     "preview": "astro preview",
+    "build:prod": "astro check && astro build",
     "astro": "astro",
     "test": "astro check && astro build && astro preview --host"
   },

package/src/blocks/Features.astro

@@ -6,6 +6,6 @@ const { ...rest } = Astro.props
 
 <Section
   class:list="features"
-  structure="grid"
+  structure="stack"
   {...rest}
 />

package/src/blocks/Prices.astro

@@ -6,7 +6,7 @@ const { ...rest } = Astro.props
 
 <Section
   class:list="prices"
-  structure="grid"
+  structure="stack"
   frame="panel"
   {...rest}
 />

package/src/components/Badge.astro

@@ -34,8 +34,8 @@ const {
   <slot>
     <Fragment set:text={text} />
     <Fragment set:html={html} />
-    <Icon name={icon} />
   </slot>
+  <Icon name={icon} />
 </Root>
 
 <style is:global lang="scss">

package/src/components/Box.astro

@@ -8,6 +8,7 @@ import Masonry from './Masonry.astro'
 import Row from './Row.astro'
 import Split from './Split.astro'
 import Spread from './Spread.astro'
+import Stack from './Stack.astro'
 import Wrap from './Wrap.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
@@ -25,6 +26,7 @@ type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
     | 'split'
     | 'spread'
     | 'wrap'
+    | 'stack'
 }
 
 const structuresMap = {
@@ -37,6 +39,7 @@ const structuresMap = {
   split: Split,
   spread: Spread,
   wrap: Wrap,
+  stack: Stack,
 }
 
 const {

package/src/components/Button.astro

@@ -35,9 +35,9 @@ const {
   {radius}
   {...rest}
 >
+  <Avatar src={avatar} />
+  <Icon name={icon} />
   <slot>
-    <Avatar src={avatar} />
-    <Icon name={icon} />
     <Fragment set:html={html} />
     <Fragment set:text={text} />
   </slot>
@@ -57,7 +57,7 @@ const {
       cursor: pointer;
       outline: none;
       box-shadow: none;
-      border: none;
+      border-width: 0px;
       background: none;
       padding: 0 var(--space-4);
       height: calc(var(--text-2) + 2 * var(--space-4));
@@ -111,21 +111,23 @@ const {
       }
 
       &.variant-secondary {
-        box-shadow: 0 var(--space-1) var(--space-3) 0 rgba(0, 0, 0, 0.05);
+        border-style: solid;
+        border-color: var(--color-7);
         background-color: var(--color-3);
         color: var(--color-11);
 
         &:hover {
+          border-color: var(--color-8);
           background-color: var(--color-4);
         }
 
         &:active {
+          border-color: var(--color-8);
           background-color: var(--color-5);
         }
       }
 
       &.variant-tertiary {
-        box-shadow: 0 var(--space-1) var(--space-3) 0 rgba(0, 0, 0, 0.05);
         background-color: transparent;
         color: var(--color-11);
 

package/src/components/Card.astro

@@ -12,12 +12,14 @@ import Spread from 'fulldev-ui/components/Spread.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
 import Text from 'fulldev-ui/components/Text.astro'
 import Wrap from 'fulldev-ui/components/Wrap.astro'
+import Badge from './Badge.astro'
 
 type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
   ratio?: 'landscape' | 'portrait' | 'square' | number
   variant?: 'primary' | 'secondary' | 'tertiary'
   position?: 'background' | 'cover' | 'inset'
   align?: 'start' | 'center' | 'end'
+  justify?: 'start' | 'center' | 'end'
   level?: 1 | 2 | 3 | 4 | 5 | 6
   size?: 'sm' | 'md' | 'lg'
   radius?: 'auto' | 'none'
@@ -26,8 +28,11 @@ type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
   space?: 'auto' | 'none'
   mask?: 'sm' | 'md' | 'lg'
   image?: string
+  images?: string[]
   button?: ComponentProps<typeof Button<'a'>>
   buttons?: ComponentProps<typeof Button<'a'>>[]
+  badge?: string | ComponentProps<typeof Badge<'a'>>
+  badges?: (string | ComponentProps<typeof Badge<'a'>>)[]
   rating?: number | ComponentProps<typeof Rating>
   price?: number
   icon?: string
@@ -48,7 +53,7 @@ const {
   href,
   as = href ? 'a' : 'div',
   space = 'auto',
-  frame = 'panel',
+  frame = 'none',
   radius = 'auto',
   align = 'start',
   variant,
@@ -63,8 +68,11 @@ const {
   description,
   list,
   buttons,
+  badge,
+  badges,
   ratio,
   image,
+  images,
   rating,
   button,
   price,
@@ -101,13 +109,26 @@ const buttonVariant = (i: number) => {
     {position}
     {mask}
     ratio={position === 'background' ? undefined : ratio}
-    src={image}
+    src={image || images?.[0]}
   />
   <Icon name={icon} />
   <Rating
     color="brand"
+    {avatars}
+    {avatar}
+    {label}
     {...typeof rating === 'number' ? { value: rating } : rating}
   />
+  <Wrap>
+    {
+      [badge, ...(badges ?? [])].filter(Boolean)?.map((badge: any) => (
+        <Badge
+          color="base"
+          {...(typeof badge === 'string' ? { html: badge } : badge)}
+        />
+      ))
+    }
+  </Wrap>
   <Tagline
     color="base"
     html={tagline}

package/src/components/Drawer.astro

@@ -59,6 +59,7 @@ const {
       background: var(--color-2);
       padding: 0;
       padding: var(--space-7) var(--space-7) var(--space-7) var(--gutter);
+      min-width: 260px;
       max-width: 360px;
       height: 100vh;
       max-height: 100vh;

package/src/components/Footer.astro

@@ -8,7 +8,7 @@ import Text from 'fulldev-ui/components/Text.astro'
 import Logo from 'fulldev-ui/components/experimental/Logo.astro'
 
 type Props<As extends HTMLTag = 'footer'> = Polymorphic<{ as: As }> & {
-  structure?: 'spread' | 'row' | 'split' | 'column'
+  structure?: 'spread' | 'row' | 'split' | 'column' | 'stack'
   variant?: 'base' | 'ghost' | 'subtle' | 'soft' | 'surface' | 'outline'
   frame?: 'fill' | 'panel' | 'contain'
   align?: 'start' | 'center' | 'end'

package/src/components/Grid.astro

@@ -24,7 +24,7 @@ const { ...rest } = Astro.props
 
       display: grid;
       position: relative;
-      grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
+      grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));
       gap: var(--space-4);
       width: 100%;
     }

package/src/components/Header.astro

@@ -32,8 +32,7 @@ const {
   structure = 'spread',
   space = 'auto',
   size = 'sm',
-  frame = 'fill',
-  variant = 'base',
+  frame = 'none',
   logo,
   heading,
   links,
@@ -52,7 +51,6 @@ const url = Astro.url.href
   {as}
   {frame}
   {structure}
-  {variant}
   {space}
   {size}
   {...rest}
@@ -86,52 +84,54 @@ const url = Astro.url.href
         />
       ))
     }
-    <Search {...search} />
-    <Drawer
-      icon="menu-2"
-      id="navigation-drawer"
-    >
-      {
-        drawer &&
-          drawer.length > 0 &&
-          drawer.map((item: any) => (
-            <>
-              <Heading
-                level={6}
-                html={item.heading}
-              />
-              {item.links?.map((link: any) => (
-                <Link
-                  {...link}
-                  class="sidebar-link"
-                  color={
-                    url.replace(/\/$/, '').endsWith(link.href)
-                      ? 'brand'
-                      : undefined
-                  }
+    {search && <Search {...search} />}
+    {
+      drawer && (
+        <Drawer
+          icon="menu-2"
+          id="navigation-drawer"
+        >
+          {drawer &&
+            drawer.length > 0 &&
+            drawer.map((item: any) => (
+              <>
+                <Heading
+                  level={6}
+                  html={item.heading}
                 />
-              ))}
-              {item.folder &&
-                (async () => {
-                  const pages = await getCollection(
-                    'pages',
-                    (entry: any) =>
-                      entry.slug.startsWith(item.folder) &&
-                      !entry.slug.endsWith(item.folder)
-                  )
-                  return pages.map((page: any) => (
-                    <Link
-                      href={`/${page.slug}`}
-                      class="sidebar-link"
-                      color={slug === page.slug ? 'brand' : undefined}
-                      html={page.data.title}
-                    />
-                  ))
-                })()}
-            </>
-          ))
-      }
-    </Drawer>
+                {item.links?.map((link: any) => (
+                  <Link
+                    {...link}
+                    class="sidebar-link"
+                    color={
+                      url.replace(/\/$/, '').endsWith(link.href)
+                        ? 'brand'
+                        : undefined
+                    }
+                  />
+                ))}
+                {item.folder &&
+                  (async () => {
+                    const pages = await getCollection(
+                      'pages',
+                      (entry: any) =>
+                        entry.slug.startsWith(item.folder) &&
+                        !entry.slug.endsWith(item.folder)
+                    )
+                    return pages.map((page: any) => (
+                      <Link
+                        href={`/${page.slug}`}
+                        class="sidebar-link"
+                        color={slug === page.slug ? 'brand' : undefined}
+                        html={page.data.title}
+                      />
+                    ))
+                  })()}
+              </>
+            ))}
+        </Drawer>
+      )
+    }
   </Row>
 </Root>
 
@@ -160,6 +160,10 @@ const url = Astro.url.href
       max-width: calc(100% - (2 * var(--outer-x)));
       height: var(--header-height);
 
+      &.frame-none {
+        padding: 0 var(--gutter);
+      }
+
       &.frame-fill {
         background-color: var(--color-2);
         padding: 0 var(--gutter);

package/src/components/Rating.astro

@@ -8,6 +8,7 @@ import Label from './Label.astro'
 
 type Props = HTMLAttributes<'div'> & {
   color?: 'base' | 'brand'
+  align?: 'start' | 'center' | 'end'
   value?: number
   size?: string
   label?: string
@@ -15,7 +16,7 @@ type Props = HTMLAttributes<'div'> & {
   avatar?: string
 }
 
-const { value, label, avatars, avatar, ...rest } = Astro.props
+const { value, label, avatars, avatar, align, ...rest } = Astro.props
 
 const getIcon = (count: number) => {
   if (!value) return
@@ -24,6 +25,8 @@ const getIcon = (count: number) => {
   if (difference >= -0.75) return 'star-half-filled'
   return 'star'
 }
+
+const hasAvatars = avatars && avatars?.length > 0
 ---
 
 <Root
@@ -38,7 +41,7 @@ const getIcon = (count: number) => {
       />
     ))
   }
-  <Column>
+  <Column align={!hasAvatars ? align : undefined}>
     <Root
       class:list={'stars'}
       {...rest}
@@ -64,6 +67,7 @@ const getIcon = (count: number) => {
   @layer fulldev {
     .rating {
       display: flex;
+      align-items: center;
       gap: var(--space-4);
 
       .avatar + .avatar {