@sanvika/ui 0.1.5 → 0.2.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@sanvika/ui",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "type": "module",
   "private": false,
-  "description": "Sanvika Production — shared UI component library for 50+ projects. Pure JS, CSS Modules, props-driven.",
+  "description": "Sanvika Production — shared UI component library for 50+ projects (pure JS, CSS Modules, props-driven) + cloud-driven Navbar/Theme presets via ui.sanvikaproduction.com",
   "author": "Shyam Bharteey <shyam@sanvikaproduction.com>",
   "license": "MIT",
   "repository": {
@@ -18,46 +18,32 @@
     "sanvika",
     "classified-ads"
   ],
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
   "exports": {
-    ".": "./dist/index.js",
-    "./icons": "./dist/icons/index.js",
-    "./styles": "./src/styles/index.css"
+    ".": "./src/index.js",
+    "./icons": "./src/components/icons/index.js",
+    "./styles": "./src/styles/index.css",
+    "./server": "./src/server/index.js"
   },
   "files": [
     "dist",
-    "src/styles"
+    "src"
   ],
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
-  "scripts": {
-    "build": "rollup -c rollup.config.js",
-    "prepublishOnly": "npm run build",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "core-js-pure",
-      "esbuild"
-    ]
-  },
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@babel/preset-react": "^7.28.5",
     "@rollup/plugin-babel": "^7.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@storybook/nextjs": "^10.3.2",
-    "eslint": "^9",
-    "eslint-config-next": "16.2.2",
-    "next": "16.2.2",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
     "rollup": "^4.60.1",
-    "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^10.3.2"
+    "rollup-plugin-postcss": "^4.0.2"
+  },
+  "scripts": {
+    "build": "rollup -c rollup.config.js",
+    "build:lib": "rollup -c rollup.config.js"
   }
-}
+}

package/src/components/buttons/Button.jsx

@@ -0,0 +1,97 @@
+// src/components/buttons/Button.jsx
+import React from "react";
+import styles from "../../styles/components/buttons/Button.module.css";
+
+/**
+ * Button — versatile button/link component.
+ *
+ * @param {object} props
+ * @param {React.ReactNode} [props.children]
+ * @param {string} [props.text]           - button label (fallback if no children)
+ * @param {React.ReactNode} [props.icon]  - icon rendered before label
+ * @param {React.ReactNode} [props.badge] - notification badge
+ * @param {"primary"|"secondary"|"danger"|"success"} [props.intent="primary"]
+ * @param {"solid"|"outline"|"ghost"} [props.appearance="solid"]
+ * @param {"sm"|"md"|"lg"} [props.size="md"]
+ * @param {boolean} [props.fullWidth=false]
+ * @param {string} [props.href]           - renders as <a> when set
+ * @param {"button"|"submit"|"reset"} [props.type="button"]
+ * @param {boolean} [props.disabled=false]
+ */
+const Button = ({
+  children,
+  text,
+  icon,
+  badge,
+  badgeClassName,
+  intent = "primary",
+  appearance = "solid",
+  size = "md",
+  fullWidth = false,
+  href,
+  type = "button",
+  disabled = false,
+  className,
+  style,
+  onClick,
+  ...props
+}) => {
+  const label = children ?? text;
+
+  const intentClass = styles[intent] ?? styles.primary;
+
+  const appearanceClass =
+    appearance === "outline"
+      ? styles.outline
+      : appearance === "ghost"
+        ? styles.ghost
+        : "";
+
+  const sizeClass = size === "sm" ? styles.sm : size === "lg" ? styles.lg : "";
+
+  const cls = [
+    styles.button,
+    intentClass,
+    appearanceClass,
+    sizeClass,
+    fullWidth ? styles.full : "",
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const content = (
+    <>
+      {icon && (
+        <span className={styles.icon} aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      {label && <span className={styles.text}>{label}</span>}
+      {badge != null && <span className={`${styles.badge} ${badgeClassName ?? ""}`.trim()}>{badge}</span>}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a href={href} className={cls} style={style} {...props}>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type={type}
+      className={cls}
+      style={style}
+      disabled={disabled}
+      onClick={onClick}
+      {...props}
+    >
+      {content}
+    </button>
+  );
+};
+
+export default Button;

package/src/components/buttons/Button.stories.jsx

@@ -0,0 +1,110 @@
+// src/components/buttons/Button.stories.jsx
+import Button from "./Button";
+
+/** @type {import('@storybook/react').Meta<typeof Button>} */
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    intent: {
+      control: "select",
+      options: ["primary", "secondary", "danger", "success"],
+    },
+    appearance: {
+      control: "select",
+      options: ["solid", "outline", "ghost"],
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+    },
+    disabled: { control: "boolean" },
+    fullWidth: { control: "boolean" },
+  },
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    text: "Get started",
+    intent: "primary",
+    appearance: "solid",
+    size: "md",
+  },
+};
+
+export const Secondary = {
+  args: { text: "Learn more", intent: "secondary" },
+};
+
+export const Danger = {
+  args: { text: "Delete", intent: "danger" },
+};
+
+export const Success = {
+  args: { text: "Confirm", intent: "success" },
+};
+
+export const Outline = {
+  args: { text: "Outline button", appearance: "outline" },
+};
+
+export const Ghost = {
+  args: { text: "Ghost button", appearance: "ghost" },
+};
+
+export const Small = {
+  args: { text: "Small", size: "sm" },
+};
+
+export const Large = {
+  args: { text: "Large", size: "lg" },
+};
+
+export const WithIcon = {
+  args: {
+    text: "Download",
+    icon: <span>⬇</span>,
+    intent: "primary",
+  },
+};
+
+export const WithBadge = {
+  args: {
+    text: "Notifications",
+    badge: 5,
+    intent: "secondary",
+  },
+};
+
+export const Disabled = {
+  args: { text: "Disabled", disabled: true },
+};
+
+export const AsLink = {
+  args: { text: "Visit site", href: "#", intent: "primary" },
+};
+
+export const AllIntents = {
+  render: () => (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      {["primary", "secondary", "danger", "success"].map((intent) => (
+        <Button key={intent} intent={intent} text={intent} />
+      ))}
+    </div>
+  ),
+};
+
+export const AllAppearances = {
+  render: () => (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      {["solid", "outline", "ghost"].map((appearance) => (
+        <Button key={appearance} appearance={appearance} text={appearance} />
+      ))}
+    </div>
+  ),
+};

package/src/components/buttons/FavoriteHeartButton.jsx

@@ -0,0 +1,41 @@
+// src/components/buttons/FavoriteHeartButton.jsx
+import React from "react";
+import HeartIcon from "../icons/HeartIcon.jsx";
+import Button from "./Button.jsx";
+import styles from "../../styles/components/buttons/FavoriteHeartButton.module.css";
+
+/**
+ * FavoriteHeartButton — toggleable heart/favorite button.
+ * Returns null when isOwner=true (owners cannot favorite their own items).
+ *
+ * @param {boolean} isFavorited - current favorite state
+ * @param {function} onClick
+ * @param {boolean} [disabled=false]
+ * @param {boolean} [isOwner=false] - if true, renders nothing
+ * @param {string} [className]
+ * @param {object} [style]
+ */
+const FavoriteHeartButton = ({
+  isFavorited,
+  onClick,
+  disabled,
+  isOwner = false,
+  className = "",
+  style,
+}) => {
+  if (isOwner) return null;
+
+  return (
+    <Button
+      onClick={onClick}
+      disabled={disabled}
+      className={`${styles.favoriteHeartButton} ${isFavorited ? styles.favorited : styles.notFavorited} ${className}`}
+      style={style}
+      aria-label={isFavorited ? "Unfavorite" : "Favorite"}
+      title={isFavorited ? "Unfavorite" : "Favorite"}
+      icon={<HeartIcon style={{ width: 20, height: 20 }} />}
+    />
+  );
+};
+
+export default FavoriteHeartButton;

package/src/components/buttons/FavoriteHeartButton.stories.jsx

@@ -0,0 +1,48 @@
+// src/components/buttons/FavoriteHeartButton.stories.jsx
+"use client";
+import { useState } from "react";
+import FavoriteHeartButton from "./FavoriteHeartButton";
+
+const meta = {
+  title: "Components/Buttons/FavoriteHeartButton",
+  component: FavoriteHeartButton,
+  parameters: { layout: "centered" },
+  argTypes: {
+    isFavorited: { control: "boolean" },
+    disabled: { control: "boolean" },
+    isOwner: { control: "boolean" },
+  },
+};
+
+export default meta;
+
+const FavDemo = ({ initial = false }) => {
+  const [fav, setFav] = useState(initial);
+  return (
+    <FavoriteHeartButton
+      isFavorited={fav}
+      onClick={() => setFav((v) => !v)}
+    />
+  );
+};
+
+export const NotFavorited = {
+  render: () => <FavDemo initial={false} />,
+};
+
+export const Favorited = {
+  render: () => <FavDemo initial={true} />,
+};
+
+export const Disabled = {
+  args: { isFavorited: false, disabled: true, onClick: () => {} },
+};
+
+export const HiddenForOwner = {
+  args: { isFavorited: false, isOwner: true, onClick: () => {} },
+  parameters: {
+    docs: {
+      description: { story: "Returns null when isOwner=true — nothing renders." },
+    },
+  },
+};

package/src/components/buttons/ScrollButton.jsx

@@ -0,0 +1,36 @@
+// src/components/buttons/ScrollButton.jsx
+import React from "react";
+import Button from "./Button.jsx";
+import { FaArrowUp, FaArrowDown } from "../icons/index.js";
+
+/**
+ * ScrollButton — icon-only button for scroll up/down actions.
+ *
+ * @param {"up"|"down"} [direction="up"]
+ * @param {function} onClick
+ * @param {string} [className]
+ * @param {object} [style]
+ */
+const ScrollButton = ({
+  direction = "up",
+  onClick,
+  className = "",
+  style = {},
+}) => {
+  const icon = direction === "up" ? <FaArrowUp /> : <FaArrowDown />;
+  const label = direction === "up" ? "Scroll to top" : "Scroll to bottom";
+
+  return (
+    <Button
+      icon={icon}
+      onClick={onClick}
+      className={className}
+      appearance="ghost"
+      aria-label={label}
+      title={label}
+      style={{ display: "flex", ...style }}
+    />
+  );
+};
+
+export default ScrollButton;

package/src/components/buttons/ScrollButton.stories.jsx

@@ -0,0 +1,21 @@
+// src/components/buttons/ScrollButton.stories.jsx
+import ScrollButton from "./ScrollButton";
+
+const meta = {
+  title: "Components/Buttons/ScrollButton",
+  component: ScrollButton,
+  parameters: { layout: "centered" },
+  argTypes: {
+    direction: { control: "select", options: ["up", "down"] },
+  },
+};
+
+export default meta;
+
+export const Up = {
+  args: { direction: "up", onClick: () => window.scrollTo({ top: 0, behavior: "smooth" }) },
+};
+
+export const Down = {
+  args: { direction: "down", onClick: () => window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" }) },
+};

package/src/components/buttons/ThreeDotButton.jsx

@@ -0,0 +1,36 @@
+// src/components/buttons/ThreeDotButton.jsx
+import React from "react";
+import Button from "./Button.jsx";
+import styles from "../../styles/components/buttons/ThreeDotButton.module.css";
+
+/**
+ * ThreeDotButton — compact vertical three-dot menu trigger.
+ * Pure props-driven: all navigation/action logic passed via onClick.
+ *
+ * @param {function} [onClick]
+ * @param {string} [ariaLabel="More options"]
+ * @param {string} [className]
+ */
+const ThreeDotButton = ({
+  className = "",
+  ariaLabel = "More options",
+  onClick,
+}) => {
+  return (
+    <Button
+      className={`${styles.threeDotButton} ${className}`}
+      onClick={onClick}
+      aria-label={ariaLabel}
+      title={ariaLabel}
+      icon={
+        <span className={styles.dotsWrapper} aria-hidden="true">
+          <span className={styles.dot} />
+          <span className={styles.dot} />
+          <span className={styles.dot} />
+        </span>
+      }
+    />
+  );
+};
+
+export default ThreeDotButton;

package/src/components/buttons/ThreeDotButton.stories.jsx

@@ -0,0 +1,14 @@
+// src/components/buttons/ThreeDotButton.stories.jsx
+import ThreeDotButton from "./ThreeDotButton";
+
+const meta = {
+  title: "Components/Buttons/ThreeDotButton",
+  component: ThreeDotButton,
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+
+export const Default = {
+  args: { onClick: () => alert("Menu opened"), ariaLabel: "More options" },
+};

package/src/components/common/Container.jsx

@@ -0,0 +1,38 @@
+// src/components/common/Container.jsx
+import styles from "../../styles/components/common/Container.module.css";
+
+/**
+ * Container — a centered max-width wrapper.
+ *
+ * @param {"default"|"narrow"|"wide"|"full"} [size="default"]
+ * @param {React.ElementType} [as="div"]
+ */
+const Container = ({
+  children,
+  size = "default",
+  className,
+  style,
+  as: Tag = "div",
+  ...props
+}) => {
+  const sizeClass =
+    size === "narrow"
+      ? styles.narrow
+      : size === "wide"
+        ? styles.wide
+        : size === "full"
+          ? styles.full
+          : "";
+
+  const cls = [styles.container, sizeClass, className ?? ""]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <Tag className={cls} style={style} {...props}>
+      {children}
+    </Tag>
+  );
+};
+
+export default Container;

package/src/components/common/Section.jsx

@@ -0,0 +1,60 @@
+// src/components/common/Section.jsx
+import styles from "../../styles/components/common/Section.module.css";
+import Container from "./Container.jsx";
+
+/**
+ * Section — a full-width page section with optional title/subtitle.
+ *
+ * @param {"default"|"alternate"|"card"} [variant="default"]
+ * @param {"default"|"tight"|"flush"} [padding="default"]
+ * @param {string} [title]
+ * @param {string} [subtitle]
+ * @param {"default"|"narrow"|"wide"|"full"} [containerSize="default"]
+ * @param {React.ElementType} [as="section"]
+ */
+const Section = ({
+  children,
+  variant = "default",
+  padding = "default",
+  title,
+  subtitle,
+  containerSize = "default",
+  className,
+  style,
+  as: Tag = "section",
+  ...props
+}) => {
+  const variantClass =
+    variant === "alternate"
+      ? styles.alternate
+      : variant === "card"
+        ? styles.card
+        : "";
+
+  const paddingClass =
+    padding === "tight"
+      ? styles.tight
+      : padding === "flush"
+        ? styles.flush
+        : "";
+
+  const cls = [styles.section, variantClass, paddingClass, className ?? ""]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <Tag className={cls} style={style} {...props}>
+      <Container size={containerSize}>
+        {(title || subtitle) && (
+          <div className={styles.header}>
+            {title && <h2 className={styles.title}>{title}</h2>}
+            {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
+          </div>
+        )}
+        {children}
+      </Container>
+    </Tag>
+  );
+};
+
+export default Section;

package/src/components/common/Section.stories.jsx

@@ -0,0 +1,64 @@
+// src/components/common/Section.stories.jsx
+import Section from "./Section";
+import Button from "../buttons/Button.jsx";
+
+/** @type {import('@storybook/react').Meta<typeof Section>} */
+const meta = {
+  title: "Layout/Section",
+  component: Section,
+  parameters: { layout: "fullscreen" },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "alternate", "card"],
+    },
+    padding: {
+      control: "select",
+      options: ["default", "tight", "flush"],
+    },
+  },
+};
+
+export default meta;
+
+export const Default = {
+  args: {
+    title: "Section Title",
+    subtitle: "An optional subtitle providing more context about this section.",
+    children: (
+      <p style={{ textAlign: "center", color: "var(--secondary-text-color)" }}>
+        Section content goes here.
+      </p>
+    ),
+  },
+};
+
+export const Alternate = {
+  args: {
+    ...Default.args,
+    variant: "alternate",
+  },
+};
+
+export const Card = {
+  args: {
+    ...Default.args,
+    variant: "card",
+  },
+};
+
+export const WithCTA = {
+  args: {
+    title: "Ready to get started?",
+    subtitle: "Join thousands of creators building on Sanvika.",
+    children: (
+      <div style={{ display: "flex", justifyContent: "center", gap: "12px" }}>
+        <Button intent="primary">Get started</Button>
+        <Button intent="secondary" appearance="outline">
+          Learn more
+        </Button>
+      </div>
+    ),
+    variant: "alternate",
+  },
+};

package/src/components/icons/BellIcon.jsx

@@ -0,0 +1,10 @@
+// src/components/icons/BellIcon.jsx
+import React from "react";
+
+export const BellIcon = ({ className, style, title = "Notifications" }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className={className} style={style} role="img">
+    <title>{title}</title>
+    <path d="M12 2a4 4 0 00-4 4v1.586L6.293 9.293A1 1 0 006 10v2l-1 1v1h14v-1l-1-1v-2a1 1 0 00-.293-.707L16 7.586V6a4 4 0 00-4-4zm0 18a2.5 2.5 0 01-2.45-2h4.9A2.5 2.5 0 0112 20z" />
+  </svg>
+);
+export default BellIcon;

package/src/components/icons/ChevronDown.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const ChevronDown = ({ className, style, title = "Open" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    aria-hidden="true"
+    className={className}
+    style={style}
+    role="img"
+  >
+    <title>{title}</title>
+    <path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z" />
+  </svg>
+);
+
+export default ChevronDown;

package/src/components/icons/EmailIcon.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const EmailIcon = ({ className, style }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" className={className} style={style} aria-hidden="true">
+    <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
+  </svg>
+);
+
+export default EmailIcon;