@butternutbox/pawprint-native 0.0.1

package/src/components/atoms/Button/Button.stories.tsx

@@ -0,0 +1,145 @@
+import React from "react"
+import { View, StyleSheet } from "react-native"
+import { Button } from "./Button"
+import type { ButtonProps } from "./Button"
+import { Typography } from "../Typography"
+
+export default {
+  title: "Atoms/Button",
+  component: Button,
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["filled", "outlined", "text"],
+      description: "Visual style variant"
+    },
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+      description: "Size of the button"
+    },
+    colour: {
+      control: { type: "select" },
+      options: ["primary", "secondary"],
+      description: "Colour scheme"
+    },
+    loading: {
+      control: { type: "boolean" },
+      description: "Shows spinner and disables interaction"
+    },
+    fullWidth: {
+      control: { type: "boolean" },
+      description: "Stretches to fill container width"
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Prevents interaction"
+    },
+    children: {
+      control: { type: "text" },
+      description: "Button label text"
+    }
+  }
+}
+
+export const Playground = (args: ButtonProps) => <Button {...args} />
+Playground.args = {
+  children: "Button",
+  variant: "filled",
+  size: "md",
+  colour: "primary",
+  loading: false,
+  fullWidth: false,
+  disabled: false
+}
+
+export const AllVariants = () => (
+  <View style={styles.column}>
+    {(["filled", "outlined", "text"] as const).map((variant) => (
+      <View key={variant} style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          {variant}
+        </Typography>
+        <View style={styles.row}>
+          {(["primary", "secondary"] as const).map((colour) => (
+            <Button key={colour} variant={variant} colour={colour}>
+              {colour}
+            </Button>
+          ))}
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
+export const AllSizes = () => (
+  <View style={styles.column}>
+    {(["filled", "outlined", "text"] as const).map((variant) => (
+      <View key={variant} style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          {variant}
+        </Typography>
+        <View style={styles.row}>
+          {(["sm", "md", "lg"] as const).map((size) => (
+            <Button key={size} variant={variant} size={size}>
+              {size}
+            </Button>
+          ))}
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
+export const AllStates = () => (
+  <View style={styles.column}>
+    {(["filled", "outlined", "text"] as const).map((variant) => (
+      <View key={variant} style={styles.section}>
+        {(["primary", "secondary"] as const).map((colour) => (
+          <View key={colour} style={styles.section}>
+            <Typography size="sm" weight="semiBold" color="tertiary">
+              {variant} / {colour}
+            </Typography>
+            <View style={styles.row}>
+              <Button variant={variant} colour={colour}>
+                Default
+              </Button>
+              <Button variant={variant} colour={colour} disabled>
+                Disabled
+              </Button>
+              <Button variant={variant} colour={colour} loading>
+                Loading
+              </Button>
+            </View>
+          </View>
+        ))}
+      </View>
+    ))}
+  </View>
+)
+
+export const FullWidth = () => (
+  <View style={styles.column}>
+    {(["filled", "outlined", "text"] as const).map((variant) => (
+      <Button key={variant} variant={variant} fullWidth>
+        {variant} full width
+      </Button>
+    ))}
+  </View>
+)
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 24
+  },
+  section: {
+    flexDirection: "column",
+    gap: 8
+  },
+  row: {
+    flexDirection: "row",
+    gap: 12,
+    alignItems: "center"
+  }
+})

package/src/components/atoms/Button/Button.tsx

@@ -0,0 +1,261 @@
+import React from "react"
+import { Pressable, View, PressableProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../Typography"
+import { Spinner } from "../Spinner"
+import { resolveFont } from "../../../fonts"
+
+type ButtonVariant = "filled" | "outlined" | "text"
+type ButtonSize = "sm" | "md" | "lg"
+type ButtonColour = "primary" | "secondary"
+
+type ButtonOwnProps = {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  colour?: ButtonColour
+  loading?: boolean
+  fullWidth?: boolean
+  startIcon?: React.ReactNode
+  endIcon?: React.ReactNode
+  children?: React.ReactNode
+}
+
+type ButtonProps = ButtonOwnProps &
+  Omit<PressableProps, keyof ButtonOwnProps | "children">
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const sizeToTypographyKey: Record<ButtonSize, string> = {
+  lg: "large",
+  md: "medium",
+  sm: "small"
+}
+
+const IconWrapper = styled(View)({
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+})
+
+const StyledButton = styled(Pressable)<{
+  buttonHeight: number
+  buttonMinWidth: number
+  buttonPaddingHorizontal: number
+  buttonPaddingVertical: number
+  buttonGap: number
+  buttonBorderRadius: number
+  buttonBgColor: string
+  buttonOpacity: number
+  buttonBorderWidth?: number
+  buttonBorderColor?: string
+  buttonFullWidth: boolean
+}>(
+  ({
+    buttonHeight,
+    buttonMinWidth,
+    buttonPaddingHorizontal,
+    buttonPaddingVertical,
+    buttonGap,
+    buttonBorderRadius,
+    buttonBgColor,
+    buttonOpacity,
+    buttonBorderWidth,
+    buttonBorderColor,
+    buttonFullWidth
+  }) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    height: buttonHeight,
+    minWidth: buttonMinWidth,
+    paddingHorizontal: buttonPaddingHorizontal,
+    paddingVertical: buttonPaddingVertical,
+    gap: buttonGap,
+    borderRadius: buttonBorderRadius,
+    backgroundColor: buttonBgColor,
+    opacity: buttonOpacity,
+    ...(buttonBorderWidth
+      ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor }
+      : {}),
+    ...(buttonFullWidth ? { width: "100%" } : {})
+  })
+)
+
+const StyledTextWrapper = styled(View)<{
+  textOpacity: number
+}>(({ textOpacity }) => ({
+  opacity: textOpacity
+}))
+
+const StyledSpinnerWrapper = styled(View)({
+  position: "absolute",
+  alignItems: "center",
+  justifyContent: "center"
+})
+
+/**
+ * A button component with token-based styling.
+ *
+ * Supports `filled` (default), `outlined`, and `text` variants.
+ *
+ * @example
+ * ```tsx
+ * import { Button } from "@butternutbox/pawprint-native"
+ *
+ * <Button variant="filled" colour="primary" size="md">Click me</Button>
+ * <Button variant="text">Text button</Button>
+ * ```
+ *
+ * @param variant - *(optional)* Visual variant: filled (default), outlined, or text.
+ * @param size - *(optional)* Size variant: sm, md (default), lg
+ * @param colour - *(optional)* Colour variant: primary (default), secondary
+ * @param loading - *(optional)* Shows spinner and disables interaction
+ * @param fullWidth - *(optional)* Stretches button to fill its container
+ * @param startIcon - *(optional)* Leading icon element
+ * @param endIcon - *(optional)* Trailing icon element
+ */
+const Button = React.forwardRef<View, ButtonProps>(
+  (
+    {
+      variant = "filled",
+      size = "md",
+      colour = "primary",
+      loading = false,
+      fullWidth = false,
+      startIcon,
+      endIcon,
+      children,
+      disabled,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const isDisabled = disabled || loading
+    const buttons = theme.tokens.components.buttons
+    const sizeTokens = buttons.size[size]
+    const spacingTokens = buttons.spacing[size]
+    const typographyKey = sizeToTypographyKey[size]
+    const typography = buttons.text[
+      typographyKey as keyof typeof buttons.text
+    ] as unknown as Record<string, string>
+
+    resolveFont(typography.fontFamily, typography.fontWeight)
+
+    const [pressed, setPressed] = React.useState(false)
+
+    const getVariantStyles = (
+      isPressed: boolean
+    ): {
+      backgroundColor: string
+      borderWidth?: number
+      borderColor?: string
+      textColor: string
+      spinnerColor: string
+    } => {
+      if (variant === "filled") {
+        const bgTokens = buttons.filledButton.colour.background[colour]
+        const textToken = buttons.filledButton.colour.text[colour].default
+        return {
+          backgroundColor: isDisabled
+            ? bgTokens.disabled
+            : isPressed
+              ? bgTokens.selected
+              : bgTokens.default,
+          textColor: textToken,
+          spinnerColor: textToken
+        }
+      }
+
+      if (variant === "outlined") {
+        const outline = buttons.outlineButton
+        return {
+          backgroundColor:
+            loading || isPressed
+              ? outline.colour.background.selected
+              : "transparent",
+          borderWidth: parseTokenValue(outline.border.default),
+          borderColor: outline.colour.border.default,
+          textColor:
+            loading || isPressed
+              ? outline.colour.text.selected
+              : outline.colour.text.default,
+          spinnerColor: outline.colour.text.selected
+        }
+      }
+
+      // text variant
+      const text = buttons.textButton
+      return {
+        backgroundColor:
+          loading || isPressed ? text.background.selected : "transparent",
+        textColor:
+          loading || isPressed ? text.text.selected : text.text.default,
+        spinnerColor: text.text.selected
+      }
+    }
+
+    const variantStyles = getVariantStyles(pressed)
+
+    return (
+      <StyledButton
+        ref={ref}
+        disabled={isDisabled}
+        accessibilityState={{ disabled: isDisabled, busy: loading }}
+        onPressIn={() => setPressed(true)}
+        onPressOut={() => setPressed(false)}
+        buttonHeight={parseTokenValue(sizeTokens.height)}
+        buttonMinWidth={parseTokenValue(sizeTokens.minWidth)}
+        buttonPaddingHorizontal={parseTokenValue(
+          spacingTokens.horizontalPadding
+        )}
+        buttonPaddingVertical={parseTokenValue(spacingTokens.verticalPadding)}
+        buttonGap={parseTokenValue(spacingTokens.gap)}
+        buttonBorderRadius={parseTokenValue(buttons.borderRadius.default)}
+        buttonBgColor={variantStyles.backgroundColor}
+        buttonOpacity={
+          isDisabled && !loading ? parseFloat(buttons.opacity.disabled) : 1
+        }
+        buttonBorderWidth={variantStyles.borderWidth}
+        buttonBorderColor={variantStyles.borderColor}
+        buttonFullWidth={fullWidth}
+        {...rest}
+      >
+        {startIcon && <IconWrapper>{startIcon}</IconWrapper>}
+        <StyledTextWrapper textOpacity={loading ? 0 : 1}>
+          <Typography
+            token={{
+              fontFamily: typography.fontFamily,
+              fontWeight: typography.fontWeight,
+              fontSize: typography.fontSize,
+              lineHeight: typography.fontSize,
+              letterSpacing: typography.letterSpacing
+            }}
+            color={variantStyles.textColor as never}
+          >
+            {children}
+          </Typography>
+        </StyledTextWrapper>
+        {endIcon && <IconWrapper>{endIcon}</IconWrapper>}
+        {loading && (
+          <StyledSpinnerWrapper>
+            <Spinner
+              size={size}
+              style={{
+                borderColor: "transparent",
+                borderTopColor: variantStyles.spinnerColor
+              }}
+            />
+          </StyledSpinnerWrapper>
+        )}
+      </StyledButton>
+    )
+  }
+)
+
+Button.displayName = "Button"
+
+export { Button }
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonColour }

package/src/components/atoms/Button/index.ts

@@ -0,0 +1,7 @@
+export { Button } from "./Button"
+export type {
+  ButtonProps,
+  ButtonVariant,
+  ButtonSize,
+  ButtonColour
+} from "./Button"

package/src/components/atoms/Hint/Hint.stories.tsx

@@ -0,0 +1,84 @@
+import React from "react"
+import { View, StyleSheet, Text } from "react-native"
+import { Hint } from "./Hint"
+import type { HintProps } from "./Hint"
+
+export default {
+  title: "Atoms/Hint",
+  component: Hint,
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["default", "success", "warning", "error"],
+      description: "Visual style variant indicating status"
+    }
+  }
+}
+
+export const Default = (args: HintProps) => <Hint {...args} />
+Default.args = {
+  variant: "default"
+}
+
+const variants = ["default", "success", "warning", "error"] as const
+
+export const AllVariants = () => (
+  <View style={styles.row}>
+    {variants.map((variant) => (
+      <View key={variant} style={styles.item}>
+        <Hint variant={variant} />
+        <Text style={styles.label}>{variant}</Text>
+      </View>
+    ))}
+  </View>
+)
+
+export const StatusIndicators = () => (
+  <View style={styles.column}>
+    <View style={styles.statusRow}>
+      <Hint variant="success" />
+      <Text style={styles.text}>Online</Text>
+    </View>
+    <View style={styles.statusRow}>
+      <Hint variant="warning" />
+      <Text style={styles.text}>Away</Text>
+    </View>
+    <View style={styles.statusRow}>
+      <Hint variant="error" />
+      <Text style={styles.text}>Offline</Text>
+    </View>
+    <View style={styles.statusRow}>
+      <Hint variant="default" />
+      <Text style={styles.text}>Unknown</Text>
+    </View>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 12
+  },
+  row: {
+    flexDirection: "row",
+    gap: 24,
+    alignItems: "center"
+  },
+  item: {
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 8
+  },
+  statusRow: {
+    flexDirection: "row",
+    gap: 8,
+    alignItems: "center"
+  },
+  label: {
+    fontSize: 12,
+    color: "#666"
+  },
+  text: {
+    fontSize: 14
+  }
+})

package/src/components/atoms/Hint/Hint.tsx

@@ -0,0 +1,59 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+
+type HintVariant = "default" | "success" | "warning" | "error"
+
+type HintOwnProps = {
+  variant?: HintVariant
+}
+
+export type HintProps = HintOwnProps & Omit<ViewProps, keyof HintOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledHint = styled(View)<{ hintVariant: HintVariant }>(({
+  theme,
+  hintVariant
+}) => {
+  const {
+    badge,
+    hint: {
+      colour: { background }
+    }
+  } = theme.tokens.components.badges
+
+  const hintVariantMap = {
+    default: background.default,
+    success: background.success,
+    warning: background.warning,
+    error: background.error
+  } as const
+
+  const size = parseTokenValue(badge.hint.sizing.default)
+
+  return {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+    backgroundColor: hintVariantMap[hintVariant]
+  }
+})
+
+/**
+ * Hint component for displaying notification indicators.
+ * A small circular dot used to draw attention or indicate status.
+ *
+ * @param {"default" | "success" | "warning" | "error"} [variant="default"] - Visual style variant.
+ *
+ * @example
+ * <Hint variant="success" />
+ * <Hint variant="error" />
+ */
+export const Hint = React.forwardRef<View, HintProps>(
+  ({ variant = "default", ...rest }, ref) => {
+    return <StyledHint ref={ref} hintVariant={variant} {...rest} />
+  }
+)
+
+Hint.displayName = "Hint"

package/src/components/atoms/Hint/index.ts

@@ -0,0 +1,2 @@
+export { Hint } from "./Hint"
+export type { HintProps } from "./Hint"