@sanvika/ui 0.1.5 → 0.3.0

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;

package/src/components/icons/FaAngleDown.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaAngleDown(props) {
+  return (
+    <svg viewBox="0 0 320 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M31 192c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0L160 259.3 232.5 135.5c9.4-9.4 24.6-9.4 33.9 0L289 158c9.4 9.4 9.4 24.6 0 33.9l-128 128c-9.4 9.4-24.6 9.4-33.9 0z" />
+    </svg>
+  );
+}

package/src/components/icons/FaAngleRight.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaAngleRight(props) {
+  return (
+    <svg viewBox="0 0 256 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M64 448c-8.1 0-16.2-3.1-22.4-9.4-12.5-12.5-12.5-32.8 0-45.3L178.7 256 41.6 118.7c-12.5-12.5-12.5-32.8 0-45.3 12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3l-160 160C80.2 444.9 72.1 448 64 448z" />
+    </svg>
+  );
+}

package/src/components/icons/FaArrowDown.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaArrowDown(props) {
+  return (
+    <svg viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M413.1 222.5L224 411.7 34.9 222.5c-9.4-9.4-24.6-9.4-33.9 0L-21.6 245.1c-9.4 9.4-9.4 24.6 0 33.9L192.7 512c9.4 9.4 24.6 9.4 34 0L469.6 279c9.4-9.4 9.4-24.6 0-33.9l-22.6-22.6c-9.3-9.4-24.5-9.4-34 0z" />
+    </svg>
+  );
+}

package/src/components/icons/FaArrowLeft.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaArrowLeft(props) {
+  return (
+    <svg viewBox="0 0 256 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M31.1 239l160-160c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L154.9 256l92.7 120.5c9.4 9.4 9.4 24.6 0 33.9L225.1 433c-9.4 9.4-24.6 9.4-33.9 0l-160-160c-9.4-9.4-9.4-24.6 0-33.9z" />
+    </svg>
+  );
+}

package/src/components/icons/FaArrowUp.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaArrowUp(props) {
+  return (
+    <svg viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M34.9 289.5L224 100.3 413.1 289.5c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L259.3 7c-9.4-9.4-24.6-9.4-34 0L12.3 233c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.3 9.4 24.5 9.4 34-0.0z" />
+    </svg>
+  );
+}

package/src/components/icons/FaBell.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaBell(props) {
+  return (
+    <svg viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M224 512a64 64 0 0 0 64-64H160a64 64 0 0 0 64 64zm215.4-149.7C406.4 339 384 288 384 224 384 141 323 76 256 64V48a32 32 0 0 0-64 0v16C129 76 68 141 68 224c0 64-22.4 115-55.4 138.3A31.99 31.99 0 0 0 48 416h352a31.99 31.99 0 0 0 39.4-53.7z" />
+    </svg>
+  );
+}