@electroplix/components 0.0.2 → 0.2.0

package/cli.cjs

@@ -0,0 +1,211 @@
+#!/usr/bin/env node
+
+/**
+ * @electroplix/components CLI
+ *
+ * Usage:
+ *   npx @electroplix/components init         – scaffold electroplix.config.ts
+ *   npx @electroplix/components add <name>   – show install/import instructions
+ *   npx @electroplix/components list         – list all available components
+ */
+
+const fs = require("fs");
+const path = require("path");
+
+/* ── component registry ─────────────────────────────────── */
+
+const CATEGORIES = {
+  navigation: [
+    "AnchorLinks", "Breadcrumbs", "LanguageSelector", "MegaMenu",
+    "Pagination", "PrimaryNav", "SidebarMenu", "SideDrawerNav", "Stepper", "Tabs",
+  ],
+  hero: [
+    "HeroShell", "StaticHero", "CarouselHero", "CTAOverlayHero",
+    "PatternedHero", "SplitHero", "VideoHeaderHero",
+  ],
+  buttons: [
+    "PrimaryButton", "SecondaryButton", "TertiaryButton", "IconButton",
+    "FloatingActionButton", "ButtonGroup", "LoadingButton", "ShareButton",
+    "DownloadButton", "PrintButton",
+  ],
+  forms: [
+    "FormShell", "InputField", "TextAreaField", "SelectDropdown", "RadioGroup",
+    "ToggleSwitch", "DateTimePicker", "FileUploader", "ContactForm",
+    "NewsletterSignup", "MultiStepWizard", "Captcha", "AddressAutocomplete",
+  ],
+  content: [
+    "BlockquoteTestimonial", "CalloutBox", "HeadingSection",
+    "InlineCodeText", "ParagraphBlock", "RichMarkdown",
+  ],
+  "data-display": [
+    "Badge", "BadgeGroup", "BarChart", "LineChart", "PieChart", "Sparkline",
+    "ProgressBar", "RatingStars", "CalendarGrid", "DataTable", "Timeline",
+  ],
+  ecommerce: [
+    "CartDrawer", "MiniCartPanel", "OrderSummary", "ProductCard",
+    "ProductGrid", "ProductDetail", "VariantSelector", "QuickAddButton",
+    "WishlistButton", "PaymentButtons",
+  ],
+  "lists-cards": [
+    "BlockShell", "Accordion", "GenericList", "FeatureGrid",
+    "ItemCardGrid", "PricingTable", "SortableTable", "LCTimeline",
+  ],
+  marketing: [
+    "ComparisonTable", "CountdownTimer", "FeatureHighlights", "LeadMagnetGate",
+    "MarketingHeroBlock", "PromoPopup", "TestimonialsCarousel", "TrustBadges",
+  ],
+  media: [
+    "MediaShell", "ResponsiveVideo", "AudioEmbed", "AvatarProfile", "IconGrid",
+    "ImageGallery", "LightboxGallery", "MasonryGrid", "PolaroidImage",
+    "LottieOrSVG", "ImageCropperUploader",
+  ],
+  miscellaneous: [
+    "CookieConsent", "ScrollProgressBar", "ThemeToggle", "EmptyState",
+    "AppInstallBanner", "DownloadBlock", "InlineCode", "RSSFeed",
+  ],
+  modals: [
+    "OverlayBase", "GenericModal", "ConfirmDialog", "FormDialog",
+    "LoadingOverlay", "Tooltip", "ToastBanners", "CookieNotice", "WelcomePopup",
+  ],
+  onboarding: [
+    "FAQAccordion", "OnboardingWizard", "ProductTour", "TooltipHelp",
+    "SupportChat", "ContactSupportBlock",
+  ],
+  search: [
+    "SiteSearchBar", "AutoSuggest", "FacetFilters", "SearchResultCard",
+    "SearchResults", "SearchEmptyState",
+  ],
+  "site-identity": [
+    "LogoDisplay", "AnimatedBrandMark", "Taglines", "BrandingShell",
+    "BrandIconGrid", "FaviconUploader",
+  ],
+  social: [
+    "SocialShareBar", "SocialLoginButtons", "SocialEmbed", "FollowLike",
+    "ReactionsBar", "CommentsBox", "ReviewsForm",
+  ],
+  "user-accounts": [
+    "AuthForm", "PasswordReset", "MultiFactorAuthInput", "ProfileOverview",
+    "ProfileSettings", "AccountSettings", "RoleBadge",
+  ],
+  blog: [
+    "BlogCard", "AuthorByline", "TagList", "BlogBadge", "ReadingBar",
+    "ArticleRenderer", "RelatedPosts", "ArchiveList", "CommentsSection",
+  ],
+};
+
+const ALL_COMPONENTS = new Map();
+for (const [cat, names] of Object.entries(CATEGORIES)) {
+  for (const n of names) ALL_COMPONENTS.set(n.toLowerCase(), { name: n, category: cat });
+}
+
+/* ── colours ────────────────────────────────────────────── */
+
+const PURPLE = "\x1b[35m";
+const GREEN = "\x1b[32m";
+const CYAN = "\x1b[36m";
+const DIM = "\x1b[2m";
+const BOLD = "\x1b[1m";
+const RESET = "\x1b[0m";
+
+/* ── commands ───────────────────────────────────────────── */
+
+function init() {
+  const configName = "electroplix.config.ts";
+  const target = path.join(process.cwd(), configName);
+
+  if (fs.existsSync(target)) {
+    console.log(`${PURPLE}electroplix${RESET}  ${configName} already exists.`);
+    process.exit(0);
+  }
+
+  const template = `import { defineConfig } from "@electroplix/components/config";
+
+export default defineConfig({
+  // Global theme overrides
+  accentColor: "#7C3AED",
+  textColor: "#E5E7EB",
+  bgColor: "#0b0b0c",
+  borderColor: "rgba(255,255,255,0.14)",
+  radius: 14,
+  spacing: 14,
+  fontFamily: "Inter, system-ui, sans-serif",
+  headingSize: 18,
+  bodySize: 14,
+
+  // Optional: configure per-category themes
+  // navigation: { accentColor: "#7C3AED" },
+  // hero: { overlayOpacity: 0.55 },
+  // ecommerce: { currency: "USD" },
+});
+`;
+
+  fs.writeFileSync(target, template, "utf-8");
+  console.log(`\n${PURPLE}electroplix${RESET}  Created ${GREEN}${configName}${RESET}\n`);
+  console.log(`${DIM}Wrap your app with <ElectroplixProvider config={config}> to apply.${RESET}\n`);
+}
+
+function add(name) {
+  if (!name) {
+    console.log(`\n${PURPLE}electroplix${RESET}  Usage: ${CYAN}npx @electroplix/components add <ComponentName>${RESET}\n`);
+    process.exit(1);
+  }
+
+  const entry = ALL_COMPONENTS.get(name.toLowerCase());
+  if (!entry) {
+    console.log(`\n${PURPLE}electroplix${RESET}  Component "${name}" not found.\n`);
+    console.log(`Run ${CYAN}npx @electroplix/components list${RESET} to see all available components.\n`);
+    process.exit(1);
+  }
+
+  console.log(`
+${PURPLE}electroplix${RESET}  ${BOLD}${entry.name}${RESET}  ${DIM}(${entry.category})${RESET}
+
+${GREEN}1.${RESET} Make sure @electroplix/components is installed:
+
+   ${CYAN}npm install @electroplix/components${RESET}
+
+${GREEN}2.${RESET} Import the component:
+
+   ${CYAN}import { ${entry.name} } from "@electroplix/components";${RESET}
+
+${GREEN}3.${RESET} Use it in your JSX:
+
+   ${CYAN}<${entry.name} />${RESET}
+
+${DIM}All components are config-driven. Wrap your app with
+<ElectroplixProvider> to customize themes globally.${RESET}
+`);
+}
+
+function list() {
+  console.log(`\n${PURPLE}@electroplix/components${RESET}  –  ${BOLD}${ALL_COMPONENTS.size} components${RESET}\n`);
+  for (const [cat, names] of Object.entries(CATEGORIES)) {
+    console.log(`  ${BOLD}${cat}${RESET} ${DIM}(${names.length})${RESET}`);
+    console.log(`    ${names.map((n) => `${CYAN}${n}${RESET}`).join(", ")}`);
+    console.log();
+  }
+}
+
+/* ── main ───────────────────────────────────────────────── */
+
+const [, , cmd, ...args] = process.argv;
+
+switch (cmd) {
+  case "init":
+    init();
+    break;
+  case "add":
+    add(args[0]);
+    break;
+  case "list":
+    list();
+    break;
+  default:
+    console.log(`
+${PURPLE}@electroplix/components${RESET} CLI
+
+  ${CYAN}init${RESET}           Scaffold electroplix.config.ts
+  ${CYAN}add <name>${RESET}     Show import instructions for a component
+  ${CYAN}list${RESET}           List all ${ALL_COMPONENTS.size} available components
+`);
+}

package/dist/README.md

@@ -1,5 +1,110 @@
 # @electroplix/components
 
-This is the README for the Electroplix components package.
+Parametric, config-driven React UI components.
 
-(You can update this file with your actual documentation.)
+## Install
+
+```bash
+npm install @electroplix/components
+# or
+pnpm add @electroplix/components
+```
+
+> **Peer dependencies:** `react >=18` and `react-dom >=18`.
+
+## Quick start
+
+```tsx
+import { Navbar } from "@electroplix/components";
+
+export default function Page() {
+  return (
+    <Navbar
+      logoText="MyBrand"
+      links={[
+        { label: "Home", href: "/" },
+        { label: "Docs", href: "/docs" },
+      ]}
+      ctaText="Sign Up"
+    />
+  );
+}
+```
+
+## Global configuration
+
+Create a config file and wrap your app with `ElectroplixProvider` to set
+style defaults for **every** component instance:
+
+```ts
+// electroplix.config.ts
+import { defineConfig } from "@electroplix/components";
+
+export default defineConfig({
+  navbar: {
+    bgColor: "#22223B",
+    textColor: "#F2E9E4",
+    accentColor: "#C9ADA7",
+    borderColor: "#4A4E69",
+    fontFamily: "Roboto, sans-serif",
+    height: 80,
+    padding: 32,
+    sticky: true,
+    showSearch: true,
+    showCTA: true,
+  },
+});
+```
+
+```tsx
+// app/layout.tsx  (Next.js App Router example)
+import { ElectroplixProvider } from "@electroplix/components";
+import config from "../electroplix.config";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <ElectroplixProvider config={config}>
+          {children}
+        </ElectroplixProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+Components will merge configuration in priority order:
+1. **Per-instance** `config` prop (highest)
+2. **Global** `ElectroplixProvider` config
+3. **Built-in** defaults
+
+## API reference
+
+### `<Navbar>`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `logoText` | `string` | `"Electroplix"` | Brand text |
+| `logoHref` | `string` | `"/"` | Logo link target |
+| `links` | `NavLink[]` | `[]` | Navigation links |
+| `ctaText` | `string` | `"Get Started"` | CTA button label |
+| `ctaHref` | `string` | `"#"` | CTA button href |
+| `searchPlaceholder` | `string` | `"Search…"` | Search input placeholder |
+| `onSearch` | `(q: string) => void` | — | Search callback |
+| `config` | `NavbarConfig` | — | Per-instance style overrides |
+
+### `NavbarConfig` (global or per-instance)
+
+| Key | Type | Default |
+|-----|------|---------|
+| `bgColor` | `string` | `"#0B0B0C"` |
+| `textColor` | `string` | `"#F3F4F6"` |
+| `accentColor` | `string` | `"#8B5CF6"` |
+| `borderColor` | `string` | `"rgba(255,255,255,0.1)"` |
+| `fontFamily` | `string` | `"Inter, ui-sans-serif, system-ui"` |
+| `height` | `number` | `72` |
+| `padding` | `number` | `24` |
+| `sticky` | `boolean` | `false` |
+| `showSearch` | `boolean` | `false` |
+| `showCTA` | `boolean` | `false` |