Feature - Merge eCommerce components with existing categories (#446)

README.md

@@ -40,18 +40,23 @@ HyperUI has a wide range of freely available components. These components includ
 ### Application UI 🤖
 
 - [Alerts](https://www.hyperui.dev/components/application-ui/alerts)
+- [Auth Forms](https://www.hyperui.dev/components/application-ui/login-forms)
 - [Badges](https://www.hyperui.dev/components/application-ui/badges)
 - [Breadcrumbs](https://www.hyperui.dev/components/application-ui/breadcrumbs)
 - [Button Groups](https://www.hyperui.dev/components/application-ui/button-groups)
+- [Checkboxes](https://www.hyperui.dev/components/application-ui/checkboxes)
 - [Details Lists](https://www.hyperui.dev/components/application-ui/details-list)
+- [Dividers](https://www.hyperui.dev/components/application-ui/dividers)
 - [Dropdowns](https://www.hyperui.dev/components/application-ui/dropdown)
 - [Error Pages](https://www.hyperui.dev/components/application-ui/error-pages)
+- [Filters](https://www.hyperui.dev/components/application-ui/filters)
 - [Grids](https://www.hyperui.dev/components/application-ui/grids)
 - [Header](https://www.hyperui.dev/components/application-ui/header)
 - [Inputs](https://www.hyperui.dev/components/application-ui/inputs)
-- [Auth Forms](https://www.hyperui.dev/components/application-ui/login-forms)
+- [Media](https://www.hyperui.dev/components/application-ui/media)
 - [Pagination](https://www.hyperui.dev/components/application-ui/pagination)
 - [Progress](https://www.hyperui.dev/components/application-ui/progress)
+- [Quantity Inputs](https://www.hyperui.dev/components/application-ui/quantity-inputs)
 - [Radio Groups](https://www.hyperui.dev/components/application-ui/radio-groups)
 - [Selects](https://www.hyperui.dev/components/application-ui/selects)
 - [Side Menu](https://www.hyperui.dev/components/application-ui/side-menu)
@@ -70,26 +75,24 @@ HyperUI has a wide range of freely available components. These components includ
 - [Blog Cards](https://www.hyperui.dev/components/marketing/blog-cards)
 - [Buttons](https://www.hyperui.dev/components/marketing/buttons)
 - [Cards](https://www.hyperui.dev/components/marketing/cards)
+- [Carts](https://www.hyperui.dev/components/marketing/carts)
+- [Collection Cards](https://www.hyperui.dev/components/marketing/collection-cards)
 - [CTAs](https://www.hyperui.dev/components/marketing/ctas)
 - [FAQs](https://www.hyperui.dev/components/marketing/faqs)
 - [Footers](https://www.hyperui.dev/components/marketing/footers)
 - [Forms](https://www.hyperui.dev/components/marketing/forms)
 - [Header](https://www.hyperui.dev/components/marketing/headers)
 - [Popups](https://www.hyperui.dev/components/marketing/popups)
 - [Pricing](https://www.hyperui.dev/components/marketing/pricings)
+- [Product Cards](https://www.hyperui.dev/components/marketing/product-cards)
+- [Product Collections](https://www.hyperui.dev/components/marketing/product-collections)
 - [Sections](https://www.hyperui.dev/components/marketing/sections)
 - [Stats](https://www.hyperui.dev/components/marketing/stats)
 - [Testimonials](https://www.hyperui.dev/components/marketing/testimonials)
 
 ### eCommerce 🛍️
 
-- [Carts](https://www.hyperui.dev/components/ecommerce/carts)
-- [Collection Cards](https://www.hyperui.dev/components/ecommerce/collection-cards)
-- [Collection Filters](https://www.hyperui.dev/components/ecommerce/collection-filters)
-- [Featured Sections](https://www.hyperui.dev/components/ecommerce/featured-sections)
-- [Product Cards](https://www.hyperui.dev/components/ecommerce/product-cards)
-- [Product Collections](https://www.hyperui.dev/components/ecommerce/product-collections)
-- [Quantity Inputs](https://www.hyperui.dev/components/ecommerce/quantity-inputs)
+These components were originally part of the eCommerce category but have since moved, [find out more](https://www.hyperui.dev/blog/ecommerce-component-changes) in this blog post.
 
 ## Contributing
 

app/[components]/[category]/page.jsx

@@ -30,7 +30,7 @@ export async function generateMetadata({ params }) {
 }
 
 export async function generateStaticParams() {
-  return ['application-ui', 'marketing', 'ecommerce']
+  return ['application-ui', 'marketing']
 }
 
 async function getCategory(params) {

app/api/search/route.js

@@ -8,7 +8,7 @@ async function getComponents() {
   const componentsPath = join(process.cwd(), '/src/data/components')
   const categoriesPath = join(process.cwd(), '/src/data/categories')
 
-  const categorySlugs = ['application-ui', 'marketing', 'ecommerce']
+  const categorySlugs = ['application-ui', 'marketing']
   const componentSlugs = await fs.readdir(componentsPath)
 
   const componentsByCategory = await Promise.all(

app/page.jsx

@@ -10,7 +10,7 @@ async function getComponents() {
   const componentsPath = join(process.cwd(), '/src/data/components')
   const categoriesPath = join(process.cwd(), '/src/data/categories')
 
-  const categorySlugs = ['application-ui', 'marketing', 'ecommerce']
+  const categorySlugs = ['application-ui', 'marketing']
   const componentSlugs = await fs.readdir(componentsPath)
 
   const componentsByCategory = await Promise.all(

app/sitemap.js

@@ -3,7 +3,7 @@ import { promises as fs } from 'fs'
 
 export default async function sitemap() {
   async function getCategories() {
-    const categorySlugs = ['application-ui', 'marketing', 'ecommerce']
+    const categorySlugs = ['application-ui', 'marketing']
 
     return await Promise.all(
       categorySlugs.map(async (categorySlug) => `components/${categorySlug}`)
@@ -13,7 +13,7 @@ export default async function sitemap() {
   async function getComponents() {
     const componentsPath = join(process.cwd(), '/src/data/components')
 
-    const categorySlugs = ['application-ui', 'marketing', 'ecommerce']
+    const categorySlugs = ['application-ui', 'marketing']
     const componentSlugs = await fs.readdir(componentsPath)
 
     const componentsByCategory = await Promise.all(

src/components/CollectionLinks.jsx

@@ -10,7 +10,7 @@ async function getComponents() {
   const componentsPath = join(process.cwd(), '/src/data/components')
   const categoriesPath = join(process.cwd(), '/src/data/categories')
 
-  const categorySlugs = ['application-ui', 'marketing', 'ecommerce']
+  const categorySlugs = ['application-ui', 'marketing']
   const componentSlugs = await fs.readdir(componentsPath)
 
   const categoriesData = await Promise.all(

src/components/Header.jsx

@@ -1,5 +1,7 @@
 'use client'
 
+import Link from 'next/link'
+
 import { useEffect, useState } from 'react'
 
 import { usePathname } from 'next/navigation'
@@ -29,11 +31,6 @@ export default function Header() {
       href: '/components/marketing',
       external: false,
     },
-    {
-      title: 'eCommerce',
-      href: '/components/ecommerce',
-      external: false,
-    },
     {
       title: 'Blog',
       href: '/blog',
@@ -60,6 +57,8 @@ export default function Header() {
         </div>
 
         <div className="flex items-center justify-end gap-2 sm:gap-4">
+          <CategoryAnnouncement />
+
           <HeaderSearch />
 
           <GithubSocial />
@@ -70,3 +69,18 @@ export default function Header() {
     </header>
   )
 }
+
+function CategoryAnnouncement() {
+  return (
+    <Link
+      href="/blog/ecommerce-component-changes"
+      className="inline-flex items-center justify-center gap-1 rounded-full bg-purple-100 px-2.5 py-0.5 text-xs font-medium text-purple-700 transition-colors hover:bg-purple-200 hover:text-purple-800"
+    >
+      <p className="whitespace-nowrap text-sm">eCommerce Changes</p>
+
+      <span role="img" aria-hidden="true" className="hidden sm:block">
+        👉
+      </span>
+    </Link>
+  )
+}

src/data/components/ecommerce-collection-filters.mdx → src/data/components/application-ui-filters.mdx

@@ -1,12 +1,12 @@
 ---
-title: Collection Filters
+title: Filters
 emoji: 🎛️
-category: ecommerce
+category: application-ui
 container: p-6 max-w-md mx-auto
 wrapper: h-[400px]
 seo:
-  title: Collection Filter Components
-  description: Collection Filter components created with Tailwind CSS
+  title: Filter Components
+  description: Filter components created with Tailwind CSS
 components:
   1:
     title: Inline Dropdown
@@ -18,6 +18,8 @@ components:
     interactive: true
 ---
 
-# Collection Filter Components
+# Filter Components
+
+These components were originally part of the eCommerce category but have since moved, [find out more](/blog/ecommerce-component-changes) in this blog post.
 
 <CollectionList componentsData={componentsData} componentContainer={componentContainer} />

src/data/components/ecommerce-quantity-inputs.mdx → src/data/components/application-ui-quantity-inputs.mdx

@@ -1,7 +1,7 @@
 ---
 title: Quantity Inputs
 emoji: ➕
-category: ecommerce
+category: application-ui
 container: p-6 flex justify-center
 wrapper: h-[200px]
 seo:
@@ -28,4 +28,6 @@ components:
 
 # Quantity Input Components
 
+These components were originally part of the eCommerce category but have since moved, [find out more](/blog/ecommerce-component-changes) in this blog post.
+
 <CollectionList componentsData={componentsData} componentContainer={componentContainer} />

src/data/components/ecommerce-carts.mdx → src/data/components/marketing-carts.mdx

@@ -1,7 +1,7 @@
 ---
 title: Carts
 emoji: 🛒
-category: ecommerce
+category: marketing
 seo:
   title: Carts Components
   description: Carts components created with Tailwind CSS
@@ -18,4 +18,6 @@ components:
 
 # Cart Components
 
+These components were originally part of the eCommerce category but have since moved, [find out more](/blog/ecommerce-component-changes) in this blog post.
+
 <CollectionList componentsData={componentsData} componentContainer={componentContainer} />

src/data/components/ecommerce-collection-cards.mdx → src/data/components/marketing-collection-cards.mdx

@@ -1,7 +1,7 @@
 ---
 title: Collection Cards
 emoji: 🙋‍♀️
-category: ecommerce
+category: marketing
 container: p-6 max-w-md mx-auto
 seo:
   title: Collection Card Components
@@ -15,4 +15,6 @@ components:
 
 # Collection Card Components
 
+These components were originally part of the eCommerce category but have since moved, [find out more](/blog/ecommerce-component-changes) in this blog post.
+
 <CollectionList componentsData={componentsData} componentContainer={componentContainer} />

src/data/components/ecommerce-product-cards.mdx → src/data/components/marketing-product-cards.mdx

@@ -1,7 +1,7 @@
 ---
 title: Product Cards
 emoji: 🙋‍♀️
-category: ecommerce
+category: marketing
 container: p-6 max-w-md mx-auto
 seo:
   title: Product Card Components
@@ -23,4 +23,6 @@ components:
 
 # Product Card Components
 
+These components were originally part of the eCommerce category but have since moved, [find out more](/blog/ecommerce-component-changes) in this blog post.
+
 <CollectionList componentsData={componentsData} componentContainer={componentContainer} />

src/data/components/ecommerce-product-collections.mdx → src/data/components/marketing-product-collections.mdx

@@ -1,7 +1,7 @@
 ---
 title: Product Collections
 emoji: 🛍
-category: ecommerce
+category: marketing
 seo:
   title: Product Collection Components
   description: Product Collection components created with Tailwind CSS
@@ -22,4 +22,6 @@ components:
 
 # Product Collection Components
 
+These components were originally part of the eCommerce category but have since moved, [find out more](/blog/ecommerce-component-changes) in this blog post.
+
 <CollectionList componentsData={componentsData} componentContainer={componentContainer} />

src/data/components/marketing-sections.mdx

@@ -18,6 +18,10 @@ components:
     title: Content and Split with Image and Content
   6:
     title: Split with Image and Content with Overlap Background
+  7:
+    title: Collection with Products
+  8:
+    title: Collections Grid
 ---
 
 # Section Components

src/data/posts/ecommerce-component-changes.mdx

@@ -0,0 +1,12 @@
+---
+title: Changes to the eCommerce Components
+description: Create a progress bar with Tailwind CSS with a single HTML element.
+date: 04/15/2024
+emoji: 💰
+---
+
+I recently ran a poll on [GitHub Discussions](https://github.com/markmead/hyperui/discussions/441) asking if it's OK to move the eCommerce components within the [Application UI](/components/application-ui) and [Marketing](/components/marketing) categories.
+
+Based on the results from the poll (and partially the lack of engagement) I took it that the majority are OK with this. Therefore, going forward on HyperUI there will be no eCommerce category and the components have been moved into the appropriate category.
+
+There are some more changes being discussed on [GitHub Discussions](https://github.com/markmead/hyperui/discussions) so it's worth taking a look and having your say. Thank you to everyone who helps make HyperUI a better project.

src/data/posts/remove-number-input-spinners-with-tailwindcss.mdx

@@ -66,7 +66,7 @@ Brace yourself.
 />
 ```
 
-You can see this approach in action on this [quantity input component](/components/ecommerce/quantity-inputs#component-2), but don't worry, I include the CSS snippet as well.
+You can see this approach in action on this [quantity input component](/components/application-ui/quantity-inputs#component-2), but don't worry, I include the CSS snippet as well.
 
 ---