EzUX Showcase

Showcase release: 1.1.20 using ezux@1.1.20

The First Advanced Component Library designed for modern enterprise applications.

EzUX Showcase is a comprehensive demonstration platform for the EzUX library. It features advanced UI components including high-performance DataTables, Schedulers, Kanban boards, and complex layout systems, all optimized for enterprise-grade performance and developer experience.

✨ Key Features

• 🚀 Built with React 19 & Vite: Ultra-fast development and build times.
• 🧠 TypeScript 7: Strict source typechecking with declarations consumed through the ezux TypeScript 6 compatibility contract.
• 🧩 Advanced Enterprise Components:
  • EzLayout: AppShell supporting theming, multiple languages (including RTL), Light/Dark Mode, Sign In/Signout, Sidebar, Header, Footer, and Main content areas.
  • EzTable: High-performance DataTable with Excel-like Filter, Sort, Grouping, Pivot, CRUD operations, and Virtualization via TanStack Table.
  • EzScheduler: Advanced resource management with Day, Week, Month, and Timeline views, plus Group-by-Resources and workday configurations.
  • EzKanban: Drag-and-drop workflow management with swimlanes and timeline integration.
  • EzFlow: Customizable Drag-and-Drop Visual Workflow Designer.
  • EzTreeView: Tri-state TreeView capable of loading thousands of hierarchical nodes with customizable icons.
  • EzSignature: Digital signature capture with PDF export support.
• 🧭 Type-Safe Routing: Fully integrated with TanStack Router.
• 🎨 Modern Aesthetics: Sleek, responsive designs using Tailwind CSS 4.0.
• 🧪 E2E Testing: Robust test coverage with Playwright.
• 🌍 Enterprise Ready: Designed for i18n, RTL, and strict accessibility compliance.

🛠️ Technology Stack

• Framework: React 19
• Build Tool: Vite 8
• Routing: TanStack Router
• State & Data: TanStack Query & TanStack Store
• Styling: Tailwind CSS 4
• Icons: Lucide React
• Testing: Playwright
• Library: ezux 1.1.20

🚀 Getting Started

Prerequisites

• Node.js (v24 or higher recommended)
• npm
• TypeScript 7 is used for local development and production builds.

Installation

1. Clone the repository:

   git clone https://github.com/zee24-cmd/ezux_showcase.git
   cd ezux_showcase

2. Install dependencies:

   npm install

Development

Run the development server:

npm run dev

The app will be available at http://localhost:3001.

Build

Create a production-ready build:

npm run build

Testing

Run end-to-end tests:

npm run test:e2e

Run the TypeScript 7 typecheck independently:

npm run typecheck

The showcase uses EzUX's Zinc default theme and semantic theme variables. Alternate themes, dark mode, responsive typography, and touch-friendly controls are demonstrated throughout the component routes.

Compatibility and UI Guidance

• Local development and builds run on TypeScript 7 strict mode; generated declarations must remain consumable by TypeScript 6.0.3 consumers, so avoid TS7-only declaration syntax in exported surfaces.
• Keep @typescript/typescript6 only for compiler API or declaration compatibility checks.
• React 19 demos should prefer typed actions, optimistic updates, transitions, and derived render state where they improve pending, rollback, or loading behavior.
• TanStack Query keys should include complete resource identity and request state; table columns/data should stay referentially stable and use typed updater shapes.
• Zinc is the default EzUX theme. Use semantic color and typography tokens such as bg-background, text-foreground, text-muted-foreground, border-border, ring-ring, ez-text-body, ez-text-label, and ez-text-caption.
• User-facing text should stay at 12px or larger, preserve visible focus states, and keep controls at mobile-friendly touch sizes.

📂 Project Structure

• src/components: Reusable UI components and showcase wrappers.
• src/demos: Individual component demonstrations and complex use cases.
• src/routes: File-based routing structure.
• src/data: Mock data and factories for demonstrations.
• tests/: Playwright E2E test suites.

📄 License

This project is authored by Zeeshan Sayed. Contact for licensing details.

---

Built with ❤️ by Zeeshan Sayed