@electroplix/components 0.1.0 → 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

@@ -108,7 +108,3 @@ Components will merge configuration in priority order:
 | `sticky` | `boolean` | `false` |
 | `showSearch` | `boolean` | `false` |
 | `showCTA` | `boolean` | `false` |
-
-## License
-
-MIT