@butternutbox/pawprint-native 0.0.1

package/src/components/molecules/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,323 @@
+import React from "react"
+import { View, Pressable, ScrollView, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../../atoms/Typography"
+
+type SegmentedControlLayout = "fixed" | "intrinsic"
+
+type SegmentedControlOption = {
+  value: string
+  label: React.ReactNode
+  disabled?: boolean
+}
+
+type SegmentedControlOwnProps = {
+  options?: SegmentedControlOption[]
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  layout?: SegmentedControlLayout
+  disabled?: boolean
+}
+
+export type SegmentedControlProps = SegmentedControlOwnProps &
+  Omit<ViewProps, keyof SegmentedControlOwnProps>
+
+type SegmentedControlItemOwnProps = {
+  value: string
+  disabled?: boolean
+  children: React.ReactNode
+}
+
+export type SegmentedControlItemProps = SegmentedControlItemOwnProps &
+  Omit<ViewProps, keyof SegmentedControlItemOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledSegmentItem = styled(Pressable)<{
+  itemHeight: number
+  itemMinWidth: number
+  itemPaddingVertical: number
+  itemPaddingHorizontal: number
+  itemBorderRadius: number
+  itemBgColor: string
+  itemOpacity: number
+  itemFlex?: number
+}>(
+  ({
+    itemHeight,
+    itemMinWidth,
+    itemPaddingVertical,
+    itemPaddingHorizontal,
+    itemBorderRadius,
+    itemBgColor,
+    itemOpacity,
+    itemFlex
+  }) => ({
+    height: itemHeight,
+    minWidth: itemMinWidth,
+    paddingVertical: itemPaddingVertical,
+    paddingHorizontal: itemPaddingHorizontal,
+    borderRadius: itemBorderRadius,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: itemBgColor,
+    opacity: itemOpacity,
+    ...(itemFlex !== undefined ? { flex: itemFlex } : { flexShrink: 0 })
+  })
+)
+
+const StyledContainer = styled(View)<{
+  containerGap: number
+  containerPaddingVertical: number
+  containerPaddingHorizontal: number
+  containerBorderRadius: number
+  containerBgColor: string
+  containerFullWidth: boolean
+}>(
+  ({
+    containerGap,
+    containerPaddingVertical,
+    containerPaddingHorizontal,
+    containerBorderRadius,
+    containerBgColor,
+    containerFullWidth
+  }) => ({
+    flexDirection: "row",
+    alignItems: "stretch",
+    gap: containerGap,
+    paddingVertical: containerPaddingVertical,
+    paddingHorizontal: containerPaddingHorizontal,
+    borderRadius: containerBorderRadius,
+    backgroundColor: containerBgColor,
+    ...(containerFullWidth ? { width: "100%" } : {})
+  })
+)
+
+/**
+ * Internal item rendered within SegmentedControl.
+ */
+const SegmentedControlItemBase = ({
+  value,
+  disabled = false,
+  selected = false,
+  layout,
+  onSelect,
+  children,
+  theme
+}: {
+  value: string
+  disabled?: boolean
+  selected?: boolean
+  layout: SegmentedControlLayout
+  onSelect?: (value: string) => void
+  children: React.ReactNode
+  theme: ReturnType<typeof useTheme>
+}) => {
+  const { controlItem } = theme.tokens.components.segmentedControl
+  const { size, spacing, borderRadius, colour, opacity } = controlItem
+  const { typography } = controlItem
+
+  const handlePress = () => {
+    if (disabled) return
+    onSelect?.(value)
+  }
+
+  const { token, color } = selected
+    ? {
+        token: typography.label.default,
+        color: colour.text.selected
+      }
+    : {
+        token: typography.label.inactive,
+        color: colour.text.unselected
+      }
+
+  return (
+    <StyledSegmentItem
+      onPress={handlePress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityState={{ selected, disabled }}
+      itemHeight={parseTokenValue(size.small.height)}
+      itemMinWidth={parseTokenValue(size.small.minWidth)}
+      itemPaddingVertical={parseTokenValue(spacing.verticalPadding)}
+      itemPaddingHorizontal={parseTokenValue(spacing.horizontalPadding)}
+      itemBorderRadius={parseTokenValue(borderRadius.default)}
+      itemBgColor={selected ? colour.background.selected : "transparent"}
+      itemOpacity={disabled ? parseFloat(opacity.disabled.default) : 1}
+      itemFlex={layout === "fixed" ? 1 : undefined}
+    >
+      <Typography token={token} color={color}>
+        {children}
+      </Typography>
+    </StyledSegmentItem>
+  )
+}
+
+/**
+ * SegmentedControl.Item for compound component API.
+ */
+const SegmentedControlItem = React.forwardRef<View, SegmentedControlItemProps>(
+  (_props, _ref) => {
+    return null
+  }
+)
+
+SegmentedControlItem.displayName = "SegmentedControl.Item"
+
+/**
+ * Segmented control component for selecting exactly one option from a set.
+ *
+ * @param {Array} [options] - Options to render as segments.
+ * @param {string} [value] - Controlled selected value.
+ * @param {string} [defaultValue] - Uncontrolled initial selected value.
+ * @param {(value: string) => void} [onValueChange] - Called when the selected value changes.
+ * @param {"fixed" | "intrinsic"} [layout="intrinsic"] - Layout mode.
+ * @param {boolean} [disabled=false] - Whether the entire control is disabled.
+ *
+ * @example
+ * <SegmentedControl
+ *   options={[{ value: "left", label: "Left" }, { value: "right", label: "Right" }]}
+ *   defaultValue="left"
+ * />
+ *
+ * @example
+ * <SegmentedControl value={value} onValueChange={setValue}>
+ *   <SegmentedControl.Item value="left">Left</SegmentedControl.Item>
+ *   <SegmentedControl.Item value="right">Right</SegmentedControl.Item>
+ * </SegmentedControl>
+ */
+const SegmentedControlRoot = React.forwardRef<View, SegmentedControlProps>(
+  (
+    {
+      options,
+      value,
+      defaultValue,
+      onValueChange,
+      layout = "intrinsic",
+      disabled = false,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { spacing, borderRadius, colour } =
+      theme.tokens.components.segmentedControl
+
+    const optionsFirstValue = options?.[0]?.value
+    const childrenArray = React.Children.toArray(children)
+    const firstChildValue = childrenArray
+      .map((child) => {
+        if (!React.isValidElement(child)) return undefined
+        return (child.props as { value?: string }).value
+      })
+      .find((v): v is string => typeof v === "string")
+
+    const derivedDefaultValue =
+      defaultValue ?? optionsFirstValue ?? firstChildValue
+
+    const isControlled = typeof value === "string"
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(
+      () => derivedDefaultValue ?? ""
+    )
+    const currentValue = isControlled ? value : uncontrolledValue
+
+    const handleSelect = React.useCallback(
+      (newValue: string) => {
+        if (!isControlled) {
+          setUncontrolledValue(newValue)
+        }
+        onValueChange?.(newValue)
+      },
+      [isControlled, onValueChange]
+    )
+
+    const renderItems = () => {
+      if (options) {
+        return options.map((option) => (
+          <SegmentedControlItemBase
+            key={option.value}
+            value={option.value}
+            disabled={disabled || option.disabled}
+            selected={currentValue === option.value}
+            layout={layout}
+            onSelect={handleSelect}
+            theme={theme}
+          >
+            {option.label}
+          </SegmentedControlItemBase>
+        ))
+      }
+
+      return childrenArray.map((child) => {
+        if (!React.isValidElement(child)) return child
+        const childProps = child.props as SegmentedControlItemOwnProps
+        return (
+          <SegmentedControlItemBase
+            key={childProps.value}
+            value={childProps.value}
+            disabled={disabled || childProps.disabled}
+            selected={currentValue === childProps.value}
+            layout={layout}
+            onSelect={handleSelect}
+            theme={theme}
+          >
+            {childProps.children}
+          </SegmentedControlItemBase>
+        )
+      })
+    }
+
+    const containerProps = {
+      containerGap: parseTokenValue(spacing.gap),
+      containerPaddingVertical: parseTokenValue(spacing.verticalPadding),
+      containerPaddingHorizontal: parseTokenValue(spacing.horizontalPadding),
+      containerBorderRadius: parseTokenValue(borderRadius.default),
+      containerBgColor: colour.background.default,
+      containerFullWidth: layout === "fixed"
+    }
+
+    if (layout === "intrinsic") {
+      return (
+        <View ref={ref} {...rest}>
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={{
+              flexDirection: "row",
+              alignItems: "stretch",
+              gap: containerProps.containerGap,
+              paddingVertical: containerProps.containerPaddingVertical,
+              paddingHorizontal: containerProps.containerPaddingHorizontal,
+              borderRadius: containerProps.containerBorderRadius,
+              backgroundColor: containerProps.containerBgColor
+            }}
+          >
+            {renderItems()}
+          </ScrollView>
+        </View>
+      )
+    }
+
+    return (
+      <StyledContainer ref={ref} {...containerProps} {...rest}>
+        {renderItems()}
+      </StyledContainer>
+    )
+  }
+)
+
+SegmentedControlRoot.displayName = "SegmentedControl"
+
+type SegmentedControlComponent = React.ForwardRefExoticComponent<
+  SegmentedControlProps & React.RefAttributes<View>
+> & {
+  Item: typeof SegmentedControlItem
+}
+
+export const SegmentedControl = Object.assign(SegmentedControlRoot, {
+  Item: SegmentedControlItem
+}) as SegmentedControlComponent

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

@@ -0,0 +1,5 @@
+export { SegmentedControl } from "./SegmentedControl"
+export type {
+  SegmentedControlProps,
+  SegmentedControlItemProps
+} from "./SegmentedControl"

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

@@ -0,0 +1,144 @@
+import React, { useState } from "react"
+import { View, StyleSheet } from "react-native"
+import { Slider } from "./Slider"
+import type { SliderProps } from "./Slider"
+import { Typography } from "../../atoms/Typography"
+
+export default {
+  title: "Molecules/Slider",
+  component: Slider,
+  argTypes: {
+    min: {
+      control: { type: "number" },
+      description: "Minimum value"
+    },
+    max: {
+      control: { type: "number" },
+      description: "Maximum value"
+    },
+    step: {
+      control: { type: "number" },
+      description: "Step increment"
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Prevents interaction"
+    },
+    leadingLabel: {
+      control: { type: "text" },
+      description: "Label to the left of track"
+    },
+    trailingLabel: {
+      control: { type: "text" },
+      description: "Label to the right of track"
+    },
+    description: {
+      control: { type: "text" },
+      description: "Descriptive text below control"
+    }
+  }
+}
+
+export const Default = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        No labels
+      </Typography>
+      <Slider defaultValue={50} />
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        With labels
+      </Typography>
+      <Slider defaultValue={25} leadingLabel="0kg" trailingLabel="50kg+" />
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        With description
+      </Typography>
+      <Slider
+        defaultValue={40}
+        leadingLabel="Light"
+        trailingLabel="Heavy"
+        description="Adjust the weight of your dog's meals."
+      />
+    </View>
+  </View>
+)
+
+export const States = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        25%
+      </Typography>
+      <Slider defaultValue={25} leadingLabel="0" trailingLabel="100" />
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        50%
+      </Typography>
+      <Slider defaultValue={50} leadingLabel="0" trailingLabel="100" />
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        100%
+      </Typography>
+      <Slider defaultValue={100} leadingLabel="0" trailingLabel="100" />
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Disabled
+      </Typography>
+      <Slider defaultValue={50} leadingLabel="0" trailingLabel="100" disabled />
+    </View>
+  </View>
+)
+
+export const Controlled = () => {
+  const [value, setValue] = useState(30)
+
+  return (
+    <View style={styles.column}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Value: {value}
+      </Typography>
+      <Slider
+        value={value}
+        onValueChange={setValue}
+        leadingLabel="0kg"
+        trailingLabel="50kg+"
+      />
+    </View>
+  )
+}
+
+export const Playground = {
+  args: {
+    min: 0,
+    max: 100,
+    step: 1,
+    disabled: false,
+    leadingLabel: "Min",
+    trailingLabel: "Max",
+    description: ""
+  },
+  render: (args: SliderProps) => <Slider {...args} defaultValue={50} />
+}
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 32
+  },
+  section: {
+    flexDirection: "column",
+    gap: 12
+  }
+})