ecommerce-skin-clothing

A production-grade, extensible React + TypeScript UI component library designed for modern e-commerce "Clothing" product detail pages (PDP).

Features

• 📱 Mobile-First Design: Optimized layouts for mobile devices.
• 🎨 Theming System: Built-in Tailwind preset and theme tokens for extensive customization.
• ⚙️ Component Overrides: Inject your own components (e.g., custom Buttons) via the components prop.
• ⚡ TypeScript Support: Fully typed components and strict type contracts.
• 🧩 Modular Architecture: Clean separation between primitives, commerce blocks, and composite layouts.

Architecture

The library follows a strict presentation-only architecture, ensuring no coupling to application business logic (Redux, API calls, etc.). All interaction data is passed up via props.

• primitives/: Low-level UI components (e.g., Button).
• commerce/: E-commerce domain blocks (e.g., VariantSelector, SizeChart).
• layouts/: Skin-specific compositions (e.g., ProductCard, ProductGallery).
• theme/: Centralized design tokens and Tailwind preset.

Installation

You can install this package locally or via npm.

Using npm

npm install ecommerce-skin-clothing

Then, to ensure proper styling, include the provided Tailwind preset in your host application's tailwind.config.ts (or .js):

import { ecommerceSkinPreset } from 'ecommerce-skin-clothing';

export default {
  presets: [ecommerceSkinPreset], // Inherit base theme tokens
  content: [
    // ... your app's internal paths
    './node_modules/ecommerce-skin-clothing/dist/**/*.js', // Ensure the library's classes are parsed
  ],
  // ...
};

Usage

Import the ProductCard component and the ClothingProduct type to use it in your React/Next.js application.

import React from 'react';
import { ProductCard, ClothingProduct } from 'ecommerce-skin-clothing';

const sampleProduct: ClothingProduct = {
  id: 'sk-101',
  name: 'Essential Cotton T-Shirt',
  brand: 'Malicc Basic',
  description: 'Crafted from 100% organic cotton...',
  price: 35.00,
  discountPrice: 24.99,
  currency: 'USD',
  images: ['/images/shirt-front.jpg', '/images/shirt-back.jpg'],
  sizes: ['S', 'M', 'L', 'XL'],
  colors: ['#000000', '#FFFFFF'],
  material: '100% Cotton',
  fit: 'Regular',
  gender: 'Men',
  stock: 120,
  rating: 4.8,
  reviewCount: 45
};

const ProductPage = () => {
  return (
    <div className="bg-gray-50 flex items-center justify-center">
      <div className="w-full max-w-md">
        <ProductCard 
          product={sampleProduct} 
          onAddToCart={(product, size, color) => console.log('Added:', product.id)}
          onBuyNow={(product, size, color) => console.log('Buy Now:', product.id)} 
        />
      </div>
    </div>
  );
};

export default ProductPage;

Component Overrides

You can inject custom UI into specific slots via the components prop. This allows the host app to swap out elements without having to fork the library:

import { CustomButton } from '@/components/ui/CustomButton';

// ...
<ProductCard
  product={product}
  components={{
    // Replaces the default Add To Cart button
    AddToCartButton: CustomButton, 
  }}
/>

ClassName Override Support

All exported components (Layouts, Commerce blocks, and Primitives) accept a className prop to easily override top-level styling:

<ProductCard className="mt-12 shadow-2xl rounded-xl overflow-hidden" product={product} />

Available Exports

• Types: ClothingProduct, ClothingSize, ClothingFit, ClothingGender, ComponentOverrides, ProductCardComponents
• Layouts: ProductCard, ProductGallery, ProductInfo
• Commerce Blocks: VariantSelector, SizeChart
• Primitives: Button
• Theme: ecommerceSkinPreset, tokens

Developing Locally

If you are developing this library further, run:

# Install dependencies
npm install

# Build the package (outputs to /dist using tsup)
npm run build

This uses tsup to bundle the library into ESM, CJS, and TypeScript declaration files, ensuring optimal tree-shaking for host applications.