@ecohouse/ui 0.1.0

package/src/components/Button.stories.tsx

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { View, StyleSheet, Text } from "react-native";
+import { Button } from "./Button";
+
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  args: {
+    title: "Button",
+    onPress: fn(),
+    disabled: false,
+    variant: "primary",
+    size: "lg",
+    showIcon: false,
+  },
+  argTypes: {
+    onPress: { action: "pressed" },
+    variant: {
+      control: "select",
+      options: ["white", "primary", "green", "gray"],
+    },
+    size: {
+      control: "select",
+      options: ["lg", "sm"],
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithIcon: Story = {
+  args: { showIcon: true, className: "w-full" },
+};
+
+export const WithCustomIcon: Story = {
+  args: {
+    title: "Custom icon",
+    showIcon: true,
+    icon: <Text style={{ fontSize: 16 }}>★</Text>,
+    className: "w-full",
+  },
+};
+
+export const WithClassName: Story = {
+  args: {
+    showIcon: true,
+    className: "w-full max-w-md",
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <View style={storyStyles.column}>
+      <Button title="Button" variant="gray" onPress={fn()} />
+      <Button title="Button" variant="white" onPress={fn()} />
+      <Button title="Button" variant="primary" onPress={fn()} />
+      <Button title="Button" variant="green" onPress={fn()} />
+    </View>
+  ),
+};
+
+export const AllVariantsWithIcon: Story = {
+  render: () => (
+    <View style={storyStyles.column}>
+      <Button title="Button" variant="gray" showIcon onPress={fn()} />
+      <Button title="Button" variant="white" showIcon onPress={fn()} />
+      <Button title="Button" variant="primary" showIcon onPress={fn()} />
+      <Button title="Button" variant="green" showIcon onPress={fn()} />
+    </View>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <View style={storyStyles.grid}>
+      <View style={storyStyles.column}>
+        <Button title="Button" variant="gray" onPress={fn()} />
+        <Button title="Button" variant="white" onPress={fn()} />
+        <Button title="Button" variant="primary" onPress={fn()} />
+        <Button title="Button" variant="green" onPress={fn()} />
+      </View>
+      <View style={storyStyles.column}>
+        <Button title="Button" variant="gray" disabled onPress={fn()} />
+        <Button title="Button" variant="white" disabled onPress={fn()} />
+        <Button title="Button" variant="primary" disabled onPress={fn()} />
+        <Button title="Button" variant="green" disabled onPress={fn()} />
+      </View>
+    </View>
+  ),
+};
+
+export const DisabledWithIcon: Story = {
+  render: () => (
+    <View style={storyStyles.grid}>
+      <View style={storyStyles.column}>
+        <Button title="Button" variant="gray" showIcon onPress={fn()} />
+        <Button title="Button" variant="white" showIcon onPress={fn()} />
+        <Button title="Button" variant="primary" showIcon onPress={fn()} />
+        <Button title="Button" variant="green" showIcon onPress={fn()} />
+      </View>
+      <View style={storyStyles.column}>
+        <Button title="Button" variant="gray" showIcon disabled onPress={fn()} />
+        <Button title="Button" variant="white" showIcon disabled onPress={fn()} />
+        <Button title="Button" variant="primary" showIcon disabled onPress={fn()} />
+        <Button title="Button" variant="green" showIcon disabled onPress={fn()} />
+      </View>
+    </View>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <View style={storyStyles.column}>
+      <Button title="Large" size="lg" showIcon onPress={fn()} />
+      <Button title="Small" size="sm" showIcon onPress={fn()} />
+      <Button title="Large" size="lg" onPress={fn()} />
+      <Button title="Small" size="sm" onPress={fn()} />
+    </View>
+  ),
+};
+
+const storyStyles = StyleSheet.create({
+  column: {
+    gap: 12,
+    width: 320,
+  },
+  grid: {
+    flexDirection: "row",
+    gap: 24,
+  },
+});

package/src/components/Button.tsx

@@ -0,0 +1,232 @@
+import { useRef, type ComponentRef, type ReactNode } from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  type GestureResponderEvent,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { ArrowUpRightIcon } from "../icons/ArrowUpRightIcon";
+import { colors, buttonTypography } from "../theme/tokens";
+import { useApplyWebClassName } from "../utils/useApplyWebClassName";
+
+export type ButtonVariant = "white" | "primary" | "green" | "gray";
+export type ButtonSize = "lg" | "sm";
+
+export interface ButtonProps {
+  title?: string;
+  children?: ReactNode;
+  onPress: (event: GestureResponderEvent) => void;
+  disabled?: boolean;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  showIcon?: boolean;
+  /** Custom icon inside the badge. Defaults to `ArrowUpRightIcon` when `showIcon` is true. */
+  icon?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  className?: string;
+  textClassName?: string;
+}
+
+type VariantStyleSet = {
+  backgroundColor: string;
+  textColor: string;
+  iconBadgeBackgroundColor: string;
+  iconColor: string;
+};
+
+const variantConfig: Record<ButtonVariant, VariantStyleSet> = {
+  white: {
+    backgroundColor: colors.white,
+    textColor: colors.slateBlue,
+    iconBadgeBackgroundColor: colors.stormGray150,
+    iconColor: colors.navy,
+  },
+  primary: {
+    backgroundColor: colors.navy,
+    textColor: colors.stormGray0,
+    iconBadgeBackgroundColor: colors.white,
+    iconColor: colors.navy,
+  },
+  green: {
+    backgroundColor: colors.green,
+    textColor: colors.stormGray0,
+    iconBadgeBackgroundColor: colors.white,
+    iconColor: colors.green,
+  },
+  gray: {
+    backgroundColor: colors.stormGray50,
+    textColor: colors.slateBlue,
+    iconBadgeBackgroundColor: colors.stormGray150,
+    iconColor: colors.navy,
+  },
+};
+
+const sizeConfig = {
+  lg: {
+    /** Matches Tailwind `h-13` so size stays stable before web classNames attach. */
+    minHeight: 52,
+    borderRadius: 16,
+    paddingTop: 8,
+    paddingRight: 8,
+    paddingBottom: 8,
+    paddingLeft: 24,
+    paddingHorizontalCentered: 24,
+    text: buttonTypography.lg,
+    iconContainerSize: 36,
+    iconContainerRadius: 12,
+    iconContainerPadding: 8,
+    iconSize: 20,
+  },
+  sm: {
+    minHeight: 40,
+    borderRadius: 12,
+    paddingTop: 8,
+    paddingRight: 8,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingHorizontalCentered: 16,
+    text: buttonTypography.sm,
+    iconContainerSize: 32,
+    iconContainerRadius: 8,
+    iconContainerPadding: 8,
+    iconSize: 16,
+  },
+} as const;
+
+export function Button({
+  title,
+  children,
+  onPress,
+  disabled = false,
+  variant = "primary",
+  size = "lg",
+  showIcon = false,
+  icon,
+  style,
+  textStyle,
+  className,
+  textClassName,
+}: ButtonProps) {
+  const containerRef = useRef<ComponentRef<typeof TouchableOpacity>>(null);
+  const textRef = useRef<ComponentRef<typeof Text>>(null);
+  const preset = variantConfig[variant];
+  const metrics = sizeConfig[size];
+
+  const label = typeof children !== "undefined" ? children : title;
+  const hasCustomChildren = typeof children !== "undefined";
+  const customIcon = icon != null && typeof icon !== "boolean" ? icon : undefined;
+  const hasIcon = showIcon || icon === true || customIcon != null;
+  const resolvedContainerClassName = [Platform.OS === "web" ? "max-md:px-4!" : "", className]
+    .filter(Boolean)
+    .join(" ");
+
+  useApplyWebClassName(containerRef, resolvedContainerClassName || undefined);
+  useApplyWebClassName(textRef, textClassName);
+
+  const iconNode = customIcon ?? (
+    <ArrowUpRightIcon size={metrics.iconSize} color={preset.iconColor} />
+  );
+
+  const containerStyle = [
+    styles.base,
+    {
+      minHeight: metrics.minHeight,
+      borderRadius: metrics.borderRadius,
+      backgroundColor: preset.backgroundColor,
+      paddingTop: metrics.paddingTop,
+      paddingBottom: metrics.paddingBottom,
+      paddingLeft: hasIcon ? metrics.paddingLeft : metrics.paddingHorizontalCentered,
+      paddingRight: hasIcon ? metrics.paddingRight : metrics.paddingHorizontalCentered,
+    },
+    hasIcon ? styles.withIcon : styles.centered,
+    disabled && styles.disabled,
+    style,
+  ];
+
+  const labelStyle = [
+    styles.label,
+    metrics.text,
+    { color: preset.textColor },
+    Platform.OS === "android" ? styles.labelAndroid : null,
+    !hasIcon && styles.labelCentered,
+    hasIcon && styles.labelWithIcon,
+    textStyle,
+  ];
+
+  return (
+    <TouchableOpacity
+      ref={containerRef}
+      style={containerStyle}
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={0.7}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+    >
+      {hasCustomChildren ? (
+        children
+      ) : (
+        <Text ref={textRef} style={labelStyle}>
+          {label}
+        </Text>
+      )}
+
+      {hasIcon ? (
+        <View
+          style={[
+            styles.iconContainer,
+            {
+              width: metrics.iconContainerSize,
+              height: metrics.iconContainerSize,
+              borderRadius: metrics.iconContainerRadius,
+              padding: metrics.iconContainerPadding,
+              backgroundColor: preset.iconBadgeBackgroundColor,
+            },
+          ]}
+        >
+          {iconNode}
+        </View>
+      ) : null}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 0,
+  },
+  centered: {
+    justifyContent: "center",
+  },
+  withIcon: {
+    justifyContent: "space-between",
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+  label: {},
+  labelAndroid: {
+    includeFontPadding: false,
+  },
+  labelCentered: {
+    textAlign: "center",
+  },
+  labelWithIcon: {
+    flex: 1,
+    flexShrink: 1,
+    marginRight: 8,
+  },
+  iconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+});

package/src/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src/icons/ArrowUpRightIcon.tsx

@@ -0,0 +1,29 @@
+import Svg, { Path } from "react-native-svg";
+import { ARROW_UP_RIGHT_PATH } from "./arrowUpRightPath";
+
+export { ARROW_UP_RIGHT_PATH } from "./arrowUpRightPath";
+
+interface ArrowUpRightIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Native — react-native-svg (peer dependency). */
+export function ArrowUpRightIcon({
+  size = 20,
+  color = "#082640",
+  strokeWidth = 2,
+}: ArrowUpRightIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={ARROW_UP_RIGHT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/ArrowUpRightIcon.web.tsx

@@ -0,0 +1,35 @@
+import { ARROW_UP_RIGHT_PATH } from "./arrowUpRightPath";
+
+interface ArrowUpRightIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function ArrowUpRightIcon({
+  size = 20,
+  color = "#082640",
+  strokeWidth = 2,
+}: ArrowUpRightIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={ARROW_UP_RIGHT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { ARROW_UP_RIGHT_PATH } from "./arrowUpRightPath";

package/src/icons/arrowUpRightPath.ts

@@ -0,0 +1 @@
+export const ARROW_UP_RIGHT_PATH = "M14.1667 14.1668V5.8335H5.83333M14.1667 5.8335L5.83333 14.1668";

package/src/index.ts

@@ -0,0 +1,23 @@
+export { Button } from "./components/Button";
+export type { ButtonProps, ButtonSize, ButtonVariant } from "./components/Button";
+
+export { ArrowUpRightIcon } from "./icons/ArrowUpRightIcon";
+
+export {
+  colors,
+  brand,
+  emeraldGreen,
+  navy,
+  rubyRed,
+  stormGray,
+  buttonTypography,
+  labelTypography,
+  fonts,
+  fontSize,
+  fontWeight,
+  radii,
+  shadows,
+  spacing,
+  typographyScale,
+} from "./theme/tokens";
+export type { EmeraldGreenStep, NavyStep, RubyRedStep, StormGrayStep } from "./theme/tokens";

package/src/theme/tokens.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import { buttonTypography, colors } from "../theme/tokens";
+
+describe("design tokens", () => {
+  it("exposes navy and button typography used by Button", () => {
+    expect(colors.navy).toMatch(/^#/);
+    expect(buttonTypography.lg.fontSize).toBe(14);
+    expect(buttonTypography.sm.fontSize).toBe(12);
+  });
+});