@butternutbox/pawprint-native 0.0.1

package/src/components/molecules/ButtonDock/ButtonDock.stories.tsx

@@ -0,0 +1,95 @@
+import React from "react"
+import { View, StyleSheet, Text } from "react-native"
+import { ButtonDock } from "./ButtonDock"
+import type { ButtonDockProps } from "./ButtonDock"
+import { Button } from "../../atoms/Button"
+
+export default {
+  title: "Molecules/ButtonDock",
+  component: ButtonDock,
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["stacked", "inline"],
+      description: "Layout variant (stacked or inline)"
+    },
+    description: {
+      control: { type: "text" },
+      description: "Helper text below buttons (stacked only)"
+    }
+  }
+}
+
+export const Playground = {
+  args: {
+    variant: "stacked",
+    description: "Helper text goes here"
+  },
+  render: (args: ButtonDockProps) => (
+    <ButtonDock {...args}>
+      <Button fullWidth>Continue</Button>
+      <Button fullWidth variant="outlined">
+        Go back
+      </Button>
+    </ButtonDock>
+  )
+}
+
+export const Stacked = () => (
+  <View style={styles.column}>
+    <ButtonDock variant="stacked" description="Need help? Contact support.">
+      <Button fullWidth>Continue</Button>
+      <Button fullWidth variant="outlined">
+        Go back
+      </Button>
+    </ButtonDock>
+  </View>
+)
+
+export const Inline = () => (
+  <View style={styles.column}>
+    <ButtonDock variant="inline">
+      <Button>Confirm</Button>
+      <Button variant="outlined">Cancel</Button>
+    </ButtonDock>
+  </View>
+)
+
+export const WithLeadingContent = () => (
+  <View style={styles.column}>
+    <ButtonDock
+      variant="stacked"
+      leadingContent={
+        <Text style={styles.leadingText}>
+          By continuing you agree to our terms and conditions.
+        </Text>
+      }
+      description="You can change this later in settings."
+    >
+      <Button fullWidth>Accept & Continue</Button>
+      <Button fullWidth variant="outlined">
+        Go back
+      </Button>
+    </ButtonDock>
+  </View>
+)
+
+export const StackedSingleButton = () => (
+  <View style={styles.column}>
+    <ButtonDock variant="stacked" description="Only one action available.">
+      <Button fullWidth>Continue</Button>
+    </ButtonDock>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 24
+  },
+  leadingText: {
+    textAlign: "center",
+    fontSize: 14,
+    color: "#666"
+  }
+})

package/src/components/molecules/ButtonDock/ButtonDock.tsx

@@ -0,0 +1,148 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../../atoms/Typography"
+
+type ButtonDockVariant = "stacked" | "inline"
+
+type ButtonDockOwnProps = {
+  variant?: ButtonDockVariant
+  leadingContent?: React.ReactNode
+  description?: React.ReactNode
+}
+
+type ButtonDockProps = ButtonDockOwnProps &
+  Omit<ViewProps, keyof ButtonDockOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledDockRoot = styled(View)<{
+  dockBgColor: string
+  dockBorderTopWidth: number
+  dockBorderTopColor: string
+  dockPaddingVertical: number
+}>(
+  ({
+    dockBgColor,
+    dockBorderTopWidth,
+    dockBorderTopColor,
+    dockPaddingVertical
+  }) => ({
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    backgroundColor: dockBgColor,
+    borderTopWidth: dockBorderTopWidth,
+    borderTopColor: dockBorderTopColor,
+    paddingVertical: dockPaddingVertical
+  })
+)
+
+const StyledStackedInner = styled(View)({
+  alignItems: "center",
+  gap: 16,
+  width: "100%",
+  maxWidth: 520
+})
+
+const StyledButtonGroup = styled(View)<{
+  groupDirection: "column" | "row"
+  groupAlign: "stretch" | "center"
+  groupJustify: "center" | "space-around"
+  groupGap: number
+}>(({ groupDirection, groupAlign, groupJustify, groupGap }) => ({
+  flexDirection: groupDirection,
+  alignItems: groupAlign,
+  justifyContent: groupJustify,
+  gap: groupGap,
+  width: "100%",
+  ...(groupDirection === "column" ? { maxWidth: 520 } : {})
+}))
+
+/**
+ * A layout container for action buttons, typically placed at the bottom of a
+ * page or section.
+ *
+ * @example
+ * ```tsx
+ * import { ButtonDock, Button } from "@butternutbox/pawprint-native"
+ *
+ * <ButtonDock variant="stacked" description="Helper text">
+ *   <Button fullWidth>Continue</Button>
+ *   <Button fullWidth variant="filled" colour="secondary">Back</Button>
+ * </ButtonDock>
+ * ```
+ *
+ * @param variant - *(optional)* Layout variant: stacked (default) or inline
+ * @param leadingContent - *(optional)* Content rendered above buttons (stacked only)
+ * @param description - *(optional)* Helper text rendered below buttons (stacked only)
+ */
+const ButtonDock = React.forwardRef<View, ButtonDockProps>(
+  (
+    { variant = "stacked", leadingContent, description, children, ...rest },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { buttonDock, buttonGroup } = theme.tokens.components
+    const { dimensions } = theme.tokens.semantics
+    const isStacked = variant === "stacked"
+
+    const groupGap = parseTokenValue(
+      isStacked
+        ? buttonGroup.spacing.stacked.gap
+        : buttonGroup.spacing.sideBySide.gap
+    )
+
+    return (
+      <StyledDockRoot
+        ref={ref}
+        dockBgColor={buttonDock.colour.background}
+        dockBorderTopWidth={parseTokenValue(dimensions.borderWidth.sm)}
+        dockBorderTopColor={buttonDock.colour.border}
+        dockPaddingVertical={parseTokenValue(
+          buttonDock.spacing[variant].desktop.verticalPadding
+        )}
+        {...rest}
+      >
+        {isStacked ? (
+          <StyledStackedInner>
+            {leadingContent}
+            <StyledButtonGroup
+              groupDirection="column"
+              groupAlign="stretch"
+              groupJustify="center"
+              groupGap={groupGap}
+            >
+              {children}
+            </StyledButtonGroup>
+            {description && (
+              <Typography
+                variant="body"
+                size="md"
+                weight="medium"
+                align="center"
+              >
+                {typeof description === "string" ? description : description}
+              </Typography>
+            )}
+          </StyledStackedInner>
+        ) : (
+          <StyledButtonGroup
+            groupDirection="row"
+            groupAlign="center"
+            groupJustify="space-around"
+            groupGap={groupGap}
+          >
+            {children}
+          </StyledButtonGroup>
+        )}
+      </StyledDockRoot>
+    )
+  }
+)
+
+ButtonDock.displayName = "ButtonDock"
+
+export { ButtonDock }
+export type { ButtonDockProps, ButtonDockVariant }

package/src/components/molecules/ButtonDock/index.ts

@@ -0,0 +1,2 @@
+export { ButtonDock } from "./ButtonDock"
+export type { ButtonDockProps, ButtonDockVariant } from "./ButtonDock"

package/src/components/molecules/ButtonGroup/ButtonGroup.stories.tsx

@@ -0,0 +1,82 @@
+import React from "react"
+import { View, StyleSheet } from "react-native"
+import { ButtonGroup } from "./ButtonGroup"
+import type { ButtonGroupProps } from "./ButtonGroup"
+import { Button } from "../../atoms/Button"
+
+export default {
+  title: "Molecules/ButtonGroup",
+  component: ButtonGroup,
+  argTypes: {
+    layout: {
+      control: { type: "select" },
+      options: ["stacked", "inline"],
+      description: "Layout direction (stacked or inline)"
+    },
+    description: {
+      control: { type: "text" },
+      description: "Optional text below buttons"
+    }
+  }
+}
+
+export const Playground = {
+  args: {
+    layout: "stacked",
+    description: "Choose an option below"
+  },
+  render: (args: ButtonGroupProps) => (
+    <ButtonGroup {...args}>
+      <Button fullWidth>Confirm</Button>
+      <Button fullWidth variant="outlined">
+        Cancel
+      </Button>
+    </ButtonGroup>
+  )
+}
+
+export const Stacked = () => (
+  <View style={styles.column}>
+    <ButtonGroup layout="stacked" description="Two buttons stacked vertically">
+      <Button fullWidth>Primary action</Button>
+      <Button fullWidth variant="outlined">
+        Secondary action
+      </Button>
+    </ButtonGroup>
+  </View>
+)
+
+export const Inline = () => (
+  <View style={styles.column}>
+    <ButtonGroup layout="inline" description="Two buttons side by side">
+      <Button>Confirm</Button>
+      <Button variant="outlined">Cancel</Button>
+    </ButtonGroup>
+  </View>
+)
+
+export const SingleButton = () => (
+  <View style={styles.column}>
+    <ButtonGroup layout="stacked" description="Just one button">
+      <Button fullWidth>Continue</Button>
+    </ButtonGroup>
+  </View>
+)
+
+export const WithoutDescription = () => (
+  <View style={styles.column}>
+    <ButtonGroup layout="stacked">
+      <Button fullWidth>Confirm</Button>
+      <Button fullWidth variant="outlined">
+        Cancel
+      </Button>
+    </ButtonGroup>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 24
+  }
+})

package/src/components/molecules/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,94 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../../atoms/Typography"
+
+export type ButtonGroupLayout = "stacked" | "inline"
+
+type ButtonGroupOwnProps = {
+  layout?: ButtonGroupLayout
+  description?: React.ReactNode
+  children: React.ReactNode
+}
+
+export type ButtonGroupProps = ButtonGroupOwnProps &
+  Omit<ViewProps, keyof ButtonGroupOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledGroupRoot = styled(View)<{
+  rootGap: number
+}>(({ rootGap }) => ({
+  gap: rootGap,
+  alignItems: "center",
+  width: "100%"
+}))
+
+const StyledButtonRow = styled(View)<{
+  rowDirection: "row-reverse" | "column"
+  rowAlign?: "center"
+  rowGap: number
+}>(({ rowDirection, rowAlign, rowGap }) => ({
+  flexDirection: rowDirection,
+  width: "100%",
+  gap: rowGap,
+  ...(rowAlign ? { alignItems: rowAlign } : {})
+}))
+
+/**
+ * ButtonGroup arranges 1 or 2 buttons in a stacked or inline layout
+ * with an optional description below.
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup description="Choose an option">
+ *   <Button colour="primary">Confirm</Button>
+ *   <Button colour="secondary">Cancel</Button>
+ * </ButtonGroup>
+ * ```
+ *
+ * @param {"stacked" | "inline"} [layout="stacked"] - Layout direction for buttons.
+ * @param {React.ReactNode} [description] - Optional text displayed below the buttons.
+ * @param {React.ReactNode} children - 1 or 2 Button elements.
+ */
+export const ButtonGroup = React.forwardRef<View, ButtonGroupProps>(
+  ({ layout = "stacked", description, children, ...rest }, ref) => {
+    const theme = useTheme()
+    const { buttonGroup } = theme.tokens.components
+
+    const isInline = layout === "inline"
+
+    return (
+      <StyledGroupRoot
+        ref={ref}
+        accessibilityRole="none"
+        rootGap={parseTokenValue(buttonGroup.spacing.gap)}
+        {...rest}
+      >
+        <StyledButtonRow
+          rowDirection={isInline ? "row-reverse" : "column"}
+          rowAlign={isInline ? "center" : undefined}
+          rowGap={parseTokenValue(
+            isInline
+              ? buttonGroup.spacing.sideBySide.gap
+              : buttonGroup.spacing.stacked.gap
+          )}
+        >
+          {children}
+        </StyledButtonRow>
+        {description && (
+          <Typography
+            token={buttonGroup.typography.description}
+            color={buttonGroup.colour.text}
+            align="center"
+          >
+            {description}
+          </Typography>
+        )}
+      </StyledGroupRoot>
+    )
+  }
+)
+
+ButtonGroup.displayName = "ButtonGroup"

package/src/components/molecules/ButtonGroup/index.ts

@@ -0,0 +1,2 @@
+export { ButtonGroup } from "./ButtonGroup"
+export type { ButtonGroupProps, ButtonGroupLayout } from "./ButtonGroup"

package/src/components/molecules/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,148 @@
+import React from "react"
+import { View, StyleSheet } from "react-native"
+import { Checkbox } from "./Checkbox"
+import type { CheckboxProps } from "./Checkbox"
+import { CheckboxGroup } from "./CheckboxGroup"
+import { Typography } from "../../atoms/Typography"
+
+export default {
+  title: "Molecules/Checkbox",
+  component: Checkbox,
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["standalone", "tile"],
+      description: "Visual layout variant"
+    },
+    label: {
+      control: { type: "text" },
+      description: "Visible label text"
+    },
+    subText: {
+      control: { type: "text" },
+      description: "Optional secondary descriptive text"
+    },
+    checked: {
+      control: { type: "boolean" },
+      description: "Controlled checked state"
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Prevents interaction"
+    }
+  }
+}
+
+export const Playground = {
+  args: {
+    variant: "standalone",
+    label: "Accept terms",
+    subText: "Required to proceed",
+    disabled: false
+  },
+  render: (args: CheckboxProps) => <Checkbox {...args} />
+}
+
+export const Standalone = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Default
+      </Typography>
+      <CheckboxGroup>
+        <Checkbox label="Chicken" subText="Tender & tasty" />
+        <Checkbox label="Beef" subText="Rich & hearty" />
+        <Checkbox label="Lamb" subText="Slow cooked" />
+      </CheckboxGroup>
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Disabled
+      </Typography>
+      <CheckboxGroup>
+        <Checkbox label="Chicken" subText="Tender & tasty" disabled />
+        <Checkbox
+          label="Beef"
+          subText="Rich & hearty"
+          disabled
+          defaultChecked
+        />
+      </CheckboxGroup>
+    </View>
+  </View>
+)
+
+export const Tile = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Vertical
+      </Typography>
+      <CheckboxGroup orientation="vertical">
+        <Checkbox variant="tile" label="Chicken" subText="Tender & tasty" />
+        <Checkbox variant="tile" label="Beef" subText="Rich & hearty" />
+        <Checkbox variant="tile" label="Lamb" subText="Slow cooked" />
+      </CheckboxGroup>
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Horizontal
+      </Typography>
+      <CheckboxGroup orientation="horizontal">
+        <Checkbox variant="tile" label="Chicken" />
+        <Checkbox variant="tile" label="Beef" />
+        <Checkbox variant="tile" label="Lamb" />
+      </CheckboxGroup>
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Disabled
+      </Typography>
+      <CheckboxGroup orientation="vertical">
+        <Checkbox variant="tile" label="Chicken" disabled />
+        <Checkbox variant="tile" label="Beef" disabled defaultChecked />
+      </CheckboxGroup>
+    </View>
+  </View>
+)
+
+export const AllStates = () => (
+  <View style={styles.column}>
+    {(["standalone", "tile"] as const).map((variant) => (
+      <View key={variant} style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          {variant}
+        </Typography>
+        <View style={styles.row}>
+          <Checkbox variant={variant} label="Unchecked" />
+          <Checkbox variant={variant} label="Checked" defaultChecked />
+          <Checkbox variant={variant} label="Disabled" disabled />
+          <Checkbox
+            variant={variant}
+            label="Checked + Disabled"
+            disabled
+            defaultChecked
+          />
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 32
+  },
+  section: {
+    flexDirection: "column",
+    gap: 12
+  },
+  row: {
+    flexDirection: "column",
+    gap: 8
+  }
+})