@nobak/design-system 1.0.0

package/lib/components/console/layout/ConsoleCard.js

@@ -0,0 +1,82 @@
+/**
+ * ConsoleCard
+ * 
+ * Reusable card component for the Nobak Developer Console.
+ * Provides consistent styling and structure for content sections.
+ * 
+ * @example
+ * <ConsoleCard
+ *   title="API Usage"
+ *   subtitle="Last 30 days"
+ *   actions={<Button icon="refresh" />}
+ *   footer="Updated 2 minutes ago"
+ * >
+ *   <UsageChart />
+ * </ConsoleCard>
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+export var ConsoleCard = function ConsoleCard(_ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    actions = _ref.actions,
+    children = _ref.children,
+    footer = _ref.footer,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    errorMessage = _ref.errorMessage,
+    className = _ref.className,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? 'medium' : _ref$padding;
+  var cardClasses = clsx('console-card', 'rounded-lg', 'transition-all', 'duration-200', {
+    // Variants
+    'bg-white border border-gray-200 shadow-sm hover:shadow-md': variant === 'default',
+    'bg-white border border-gray-200 shadow-lg': variant === 'elevated',
+    'bg-transparent border-2 border-gray-300': variant === 'outlined',
+    'bg-gray-50': variant === 'flat',
+    // States
+    'opacity-60 pointer-events-none': loading,
+    'border-red-300 bg-red-50': error
+  }, className);
+  var contentClasses = clsx('console-card__content', {
+    'p-0': padding === 'none',
+    'p-3': padding === 'small',
+    'p-6': padding === 'medium',
+    'p-8': padding === 'large'
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: cardClasses
+  }, (title || subtitle || actions) && /*#__PURE__*/React.createElement("div", {
+    className: "console-card__header flex items-start justify-between p-6 pb-4 border-b border-gray-100"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-1"
+  }, title && /*#__PURE__*/React.createElement("h3", {
+    className: "text-lg font-semibold text-gray-900 mb-1"
+  }, title), subtitle && /*#__PURE__*/React.createElement("p", {
+    className: "text-sm text-gray-600"
+  }, subtitle)), actions && /*#__PURE__*/React.createElement("div", {
+    className: "console-card__actions ml-4"
+  }, actions)), /*#__PURE__*/React.createElement("div", {
+    className: contentClasses
+  }, loading && /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-center py-8"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500"
+  })), error && errorMessage && /*#__PURE__*/React.createElement("div", {
+    className: "bg-red-100 border border-red-300 text-red-700 px-4 py-3 rounded mb-4"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "font-medium"
+  }, "Error"), /*#__PURE__*/React.createElement("p", {
+    className: "text-sm"
+  }, errorMessage)), !loading && children), footer && /*#__PURE__*/React.createElement("div", {
+    className: "console-card__footer px-6 py-4 bg-gray-50 border-t border-gray-100 rounded-b-lg"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-sm text-gray-600"
+  }, footer)));
+};
+ConsoleCard.displayName = 'ConsoleCard';

package/lib/components/console/layout/ConsoleLayout.js

@@ -0,0 +1,86 @@
+/**
+ * ConsoleLayout
+ * 
+ * Main layout wrapper for all Nobak Developer Console pages.
+ * Provides consistent structure with navigation, sidebar, and content area.
+ * 
+ * @example
+ * <ConsoleLayout
+ *   title="API Keys"
+ *   breadcrumbs={['Dashboard', 'Security', 'API Keys']}
+ *   actions={<Button text="Create New Key" />}
+ *   sidebar={<DevSidebar items={sidebarItems} />}
+ * >
+ *   <APIKeysContent />
+ * </ConsoleLayout>
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+export var ConsoleLayout = function ConsoleLayout(_ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    breadcrumbs = _ref.breadcrumbs,
+    actions = _ref.actions,
+    navigation = _ref.navigation,
+    sidebar = _ref.sidebar,
+    children = _ref.children,
+    footer = _ref.footer,
+    _ref$showSidebar = _ref.showSidebar,
+    showSidebar = _ref$showSidebar === void 0 ? true : _ref$showSidebar,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('console-layout', 'min-h-screen', 'bg-gray-50', className)
+  }, navigation && /*#__PURE__*/React.createElement("div", {
+    className: "console-layout__navigation sticky top-0 z-50 bg-white border-b border-gray-200"
+  }, navigation), /*#__PURE__*/React.createElement("div", {
+    className: "console-layout__container flex"
+  }, showSidebar && sidebar && /*#__PURE__*/React.createElement("aside", {
+    className: "console-layout__sidebar hidden lg:block w-64 bg-white border-r border-gray-200 min-h-screen"
+  }, sidebar), /*#__PURE__*/React.createElement("main", {
+    className: "console-layout__main flex-1"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "console-layout__header bg-white border-b border-gray-200 px-8 py-6"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx({
+      'max-w-7xl mx-auto': !fullWidth
+    })
+  }, breadcrumbs && breadcrumbs.length > 0 && /*#__PURE__*/React.createElement("nav", {
+    className: "console-layout__breadcrumbs mb-4"
+  }, /*#__PURE__*/React.createElement("ol", {
+    className: "flex items-center space-x-2 text-sm"
+  }, breadcrumbs.map(function (crumb, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: index,
+      className: "flex items-center"
+    }, index > 0 && /*#__PURE__*/React.createElement("span", {
+      className: "text-gray-400 mx-2"
+    }, "/"), crumb.href ? /*#__PURE__*/React.createElement("a", {
+      href: crumb.href,
+      className: "text-gray-600 hover:text-gray-900 transition-colors"
+    }, crumb.label) : /*#__PURE__*/React.createElement("span", {
+      className: "text-gray-900 font-medium"
+    }, crumb.label));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-start justify-between"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-1"
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: "text-3xl font-bold text-gray-900 mb-2"
+  }, title), subtitle && /*#__PURE__*/React.createElement("p", {
+    className: "text-gray-600"
+  }, subtitle)), actions && /*#__PURE__*/React.createElement("div", {
+    className: "console-layout__actions ml-6"
+  }, actions)))), /*#__PURE__*/React.createElement("div", {
+    className: "console-layout__content px-8 py-8"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx({
+      'max-w-7xl mx-auto': !fullWidth
+    })
+  }, children)), footer && /*#__PURE__*/React.createElement("div", {
+    className: "console-layout__footer border-t border-gray-200 bg-white"
+  }, footer))));
+};
+ConsoleLayout.displayName = 'ConsoleLayout';

package/lib/components/console/layout/index.js

@@ -0,0 +1,10 @@
+/**
+ * Console Layout Components
+ * 
+ * Core layout components for the Nobak Developer Console
+ */
+
+export { ConsoleLayout } from "./ConsoleLayout";
+export { ConsoleCard } from "./ConsoleCard";
+
+// export { ConsoleDashboard } from './ConsoleDashboard';

package/lib/components/console/monitoring/StatusIndicator.js

@@ -0,0 +1,128 @@
+/**
+ * StatusIndicator
+ * 
+ * Display API/service status with visual indicators.
+ * Shows operational status, uptime, and incident information.
+ * 
+ * @example
+ * <StatusIndicator
+ *   status="operational"
+ *   label="API Status"
+ *   uptime="99.9%"
+ * />
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+var statusConfig = {
+  operational: {
+    color: 'text-green-700',
+    bgColor: 'bg-green-50',
+    borderColor: 'border-green-200',
+    label: 'Operational',
+    icon: '✓'
+  },
+  degraded: {
+    color: 'text-yellow-700',
+    bgColor: 'bg-yellow-50',
+    borderColor: 'border-yellow-200',
+    label: 'Degraded Performance',
+    icon: '⚠'
+  },
+  partial: {
+    color: 'text-orange-700',
+    bgColor: 'bg-orange-50',
+    borderColor: 'border-orange-200',
+    label: 'Partial Outage',
+    icon: '⚠'
+  },
+  down: {
+    color: 'text-red-700',
+    bgColor: 'bg-red-50',
+    borderColor: 'border-red-200',
+    label: 'Major Outage',
+    icon: '✕'
+  },
+  maintenance: {
+    color: 'text-blue-700',
+    bgColor: 'bg-blue-50',
+    borderColor: 'border-blue-200',
+    label: 'Scheduled Maintenance',
+    icon: ': '
+  }
+};
+export var StatusIndicator = function StatusIndicator(_ref) {
+  var status = _ref.status,
+    label = _ref.label,
+    uptime = _ref.uptime,
+    lastUpdated = _ref.lastUpdated,
+    _ref$detailed = _ref.detailed,
+    detailed = _ref$detailed === void 0 ? false : _ref$detailed,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    className = _ref.className,
+    onClick = _ref.onClick;
+  var config = statusConfig[status];
+  var containerClasses = clsx('status-indicator', 'inline-flex', 'items-center', 'gap-2', 'rounded-lg', 'border', config.bgColor, config.borderColor, {
+    'px-2 py-1 text-xs': size === 'small',
+    'px-3 py-2 text-sm': size === 'medium',
+    'px-4 py-3 text-base': size === 'large',
+    'cursor-pointer hover:shadow-md transition-shadow': onClick
+  }, className);
+  var dotClasses = clsx('status-indicator__dot', 'rounded-full', {
+    'w-2 h-2': size === 'small',
+    'w-3 h-3': size === 'medium',
+    'w-4 h-4': size === 'large',
+    'bg-green-500 animate-pulse': status === 'operational',
+    'bg-yellow-500': status === 'degraded',
+    'bg-orange-500': status === 'partial',
+    'bg-red-500 animate-pulse': status === 'down',
+    'bg-blue-500': status === 'maintenance'
+  });
+  if (!detailed) {
+    // Compact view
+    return /*#__PURE__*/React.createElement("div", {
+      className: containerClasses,
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement("div", {
+      className: dotClasses
+    }), /*#__PURE__*/React.createElement("span", {
+      className: clsx('font-medium', config.color)
+    }, label || config.label));
+  }
+
+  // Detailed view
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('status-indicator-detailed', 'bg-white', 'rounded-lg', 'border', 'border-gray-200', 'p-6', 'shadow-sm', {
+      'cursor-pointer hover:shadow-md transition-shadow': onClick
+    }, className),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-between mb-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-3"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: dotClasses
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+    className: "text-lg font-semibold text-gray-900"
+  }, label || 'System Status'), /*#__PURE__*/React.createElement("p", {
+    className: clsx('text-sm font-medium', config.color)
+  }, config.label))), /*#__PURE__*/React.createElement("div", {
+    className: "text-3xl"
+  }, config.icon)), (uptime || lastUpdated) && /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-2 gap-4 pt-4 border-t border-gray-100"
+  }, uptime && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    className: "text-xs text-gray-600 uppercase tracking-wide mb-1"
+  }, "Uptime"), /*#__PURE__*/React.createElement("p", {
+    className: "text-2xl font-bold text-gray-900"
+  }, uptime)), lastUpdated && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    className: "text-xs text-gray-600 uppercase tracking-wide mb-1"
+  }, "Last Updated"), /*#__PURE__*/React.createElement("p", {
+    className: "text-sm text-gray-700"
+  }, lastUpdated))), onClick && /*#__PURE__*/React.createElement("div", {
+    className: "mt-4 pt-4 border-t border-gray-100"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "text-sm text-primary-600 hover:text-primary-700 font-medium"
+  }, "View Status Page \u2192")));
+};
+StatusIndicator.displayName = 'StatusIndicator';

package/lib/components/console/monitoring/index.js

@@ -0,0 +1,9 @@
+/**
+ * Console Monitoring Components
+ * 
+ * Monitoring and status components
+ */
+
+export { StatusIndicator } from "./StatusIndicator";
+
+// export { ErrorBoundary } from './ErrorBoundary';

package/lib/components/console/navigation/DevFooter.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Button } from "../../../shared";
+var DevFooter = function DevFooter(_ref) {
+  var children = _ref.children,
+    Link = _ref.component,
+    docs_url = _ref.docs_url,
+    main_url = _ref.main_url;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-between items-center py-8 w-full max-w-screen-xl"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center"
+  }, /*#__PURE__*/React.createElement(Button, {
+    text: "Nobak",
+    type: "link",
+    component: Link,
+    variant: "basic",
+    to: main_url,
+    customCss: "text-primary-800"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex space-x-6 items-center"
+  }, /*#__PURE__*/React.createElement(Button, {
+    text: "API Documentation",
+    type: "link",
+    component: Link,
+    variant: "basic",
+    to: docs_url,
+    customCss: "text-primary-1200"
+  }), /*#__PURE__*/React.createElement(Button, {
+    type: "anchor",
+    to: "/faq",
+    text: "FAQ",
+    variant: "basic",
+    customCss: "text-primary-1200"
+  }))));
+};
+export { DevFooter };

package/lib/components/console/navigation/DevMenu.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Logo } from "../..";
+import { Button } from "../../../shared";
+var DevMenu = function DevMenu(_ref) {
+  var menuItems = _ref.menuItems,
+    Link = _ref.component;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-center bg-primary-400"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-between items-center p-4 w-full max-w-screen-xl"
+  }, /*#__PURE__*/React.createElement(Link, {
+    to: "/"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center"
+  }, /*#__PURE__*/React.createElement(Logo, {
+    type: "Isologo",
+    size: "small"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ml-2 text-p1-bold"
+  }, "Developers"))), /*#__PURE__*/React.createElement("div", {
+    className: "flex space-x-6 items-center"
+  }, menuItems.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Button, {
+      key: index,
+      text: item.label,
+      variant: "basic",
+      type: "link",
+      to: item.to,
+      component: item.component || Link,
+      size: "small",
+      active: item.isActive
+    });
+  }))));
+};
+export { DevMenu };

package/lib/components/console/navigation/DevSidebar.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Button } from "../../../shared";
+var DevSidebar = function DevSidebar(_ref) {
+  var sidebarItems = _ref.sidebarItems,
+    Link = _ref.component;
+  console.log('sidebarItems', sidebarItems);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sticky top-0 z-10"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "w-64 flex flex-col justify-between p-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mt-8 flex-1"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col space-y-4  pl-2 pr-2 pt-2"
+  }, sidebarItems.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Button, {
+      key: index,
+      text: item.label,
+      variant: "air",
+      size: "small",
+      type: "link",
+      component: Link,
+      to: item.to,
+      active: item.isActive
+    });
+  })))));
+};
+export { DevSidebar };

package/lib/components/console/navigation/index.js

@@ -0,0 +1,11 @@
+/**
+ * Console Navigation Components
+ * 
+ * Navigation components for the Nobak Developer Console
+ */
+
+export { DevMenu } from "./DevMenu";
+export { DevSidebar } from "./DevSidebar";
+export { DevFooter } from "./DevFooter";
+
+// export { Breadcrumbs } from './Breadcrumbs';

package/lib/components/console/settings/index.js

@@ -0,0 +1,10 @@
+/**
+ * Console Settings Components
+ * 
+ * Settings and configuration components
+ */
+
+// Export settings components here
+// export { SettingsPanel } from './SettingsPanel';
+// export { TeamManagement } from './TeamManagement';
+// export { BillingDashboard } from './BillingDashboard';

package/lib/components/index.js

@@ -0,0 +1,12 @@
+export { RisingSun } from "./RisingSun";
+export { MenuBar } from "./MenuBar";
+export { DevMenu } from "./DevMenu";
+export { Logo } from "./Logo";
+export { Footer } from "./Footer";
+export { DevFooter } from "./DevFooter";
+export { AdminPanel } from "./AdminPanel";
+export { HeroContainer } from "./HeroContainer";
+export { DevSidebar } from "./DevSidebar";
+export { WalletMenu } from "./WalletMenu";
+export { DigitalDisplay } from "./DigitalDisplay";
+export { Symbol } from "./Symbol";

package/lib/design/ColorPicker.stories.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { HSLTool } from "./HSLTool-V4";
+export default {
+  title: 'Tools / Color Picker',
+  component: HSLTool
+};
+export var HSLToolStory = function HSLToolStory() {
+  return /*#__PURE__*/React.createElement(HSLTool, null);
+};