feat: unstyled

example/storybook/src/react-native-aria/Button/Button.stories.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { storiesOf } from "@storybook/react-native";
+import { Button } from "./Button";
+import { Wrapper } from "../Wrapper";
+
+export const Example = () => {
+  return (
+    <Wrapper>
+      <Button> Button</Button>
+    </Wrapper>
+  );
+};
+
+storiesOf("Button", module).add("Button", Example);

example/storybook/src/react-native-aria/Button/Button.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { useHover } from "@react-native-aria/interactions";
+import { useButton } from "@react-native-aria/button";
+import { useFocusRing } from "@react-native-aria/focus";
+import { OverlayContainer, OverlayProvider } from "@react-native-aria/overlays";
+import { Pressable, Text, View } from "react-native";
+import { useRef } from "react";
+
+export function Button(props: any) {
+  const ref = useRef(null);
+  let { buttonProps, isPressed } = useButton(props);
+
+  const { isHovered, hoverProps } = useHover({}, ref);
+
+  const { focusProps, isFocusVisible } = useFocusRing();
+
+  return (
+    <View>
+      <Pressable
+        ref={ref}
+        {...buttonProps}
+        {...hoverProps}
+        {...focusProps}
+        style={{
+          backgroundColor: isPressed ? "rgb(9, 90, 186)" : "#e1e1e1",
+          padding: 5,
+        }}
+      >
+        <Text
+          style={{
+            color: isPressed ? "#f1f1f1" : "#000",
+          }}
+        >
+          A simple button
+        </Text>
+      </Pressable>
+
+      <View>
+        <View>
+          <Text>{isFocusVisible ? "focus visible" : "not focus visible"}</Text>
+        </View>
+        <View>
+          <Text>{isHovered ? "Hovering" : "Not hovering"}</Text>
+        </View>
+      </View>
+    </View>
+  );
+}

example/storybook/src/react-native-aria/Button/ToggleButton.stories.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { storiesOf } from "@storybook/react-native";
+import { ToggleButton } from "./ToggleButton";
+import { Wrapper } from "../Wrapper";
+
+export const Example = () => {
+  return (
+    <Wrapper>
+      <ToggleButton>Toggle button</ToggleButton>
+    </Wrapper>
+  );
+};
+
+storiesOf("Button", module).add("Toggle Button", Example);

example/storybook/src/react-native-aria/Button/ToggleButton.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { useHover } from "@react-native-aria/interactions";
+import { useToggleButton } from "@react-native-aria/button";
+import { useFocusRing } from "@react-native-aria/focus";
+import { useToggleState } from "@react-stately/toggle";
+import { Pressable, Text, View } from "react-native";
+import { useRef } from "react";
+
+export function ToggleButton(props: any) {
+  const ref = useRef(null);
+  let state = useToggleState(props);
+  let { buttonProps, isPressed } = useToggleButton(props, state, ref);
+
+  const { isHovered, hoverProps } = useHover({}, ref);
+
+  const { focusProps, isFocusVisible } = useFocusRing();
+
+  return (
+    <View>
+      <Pressable
+        ref={ref}
+        {...buttonProps}
+        {...hoverProps}
+        {...focusProps}
+        style={{
+          backgroundColor: state.isSelected ? "rgb(9, 90, 186)" : "#e1e1e1",
+          padding: 5,
+        }}
+      >
+        <Text
+          style={{
+            color: state.isSelected ? "#f1f1f1" : "#000",
+          }}
+        >
+          A simple toggle button
+        </Text>
+      </Pressable>
+
+      <View>
+        <View>
+          <Text>{isFocusVisible ? "focus visible" : "not focus visible"}</Text>
+        </View>
+        <View>
+          <Text>{isHovered ? "Hovering" : "Not hovering"}</Text>
+        </View>
+        <View>
+          <Text>{state.isSelected ? "Selected" : "Not Selected"}</Text>
+        </View>
+      </View>
+    </View>
+  );
+}

example/storybook/src/react-native-aria/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { storiesOf } from "@storybook/react-native";
+import { CheckboxGroup } from "./CheckboxGroup";
+import { Checkbox } from "./Checkbox";
+import { Text } from "react-native";
+import { Wrapper } from "../Wrapper";
+
+const CheckboxExample = () => {
+  const [state, setCheckbox] = React.useState([]);
+
+  return (
+    <CheckboxGroup
+      label="Favorite sports"
+      value={state}
+      onChange={(val: any) => {
+        setCheckbox(val);
+      }}
+    >
+      <Checkbox value="soccer">
+        <Text>Soccer</Text>
+      </Checkbox>
+      <Checkbox value="baseball" isSelected>
+        <Text>Baseball</Text>
+      </Checkbox>
+      <Checkbox value="basketball" autoFocus>
+        <Text>Basketball</Text>
+      </Checkbox>
+    </CheckboxGroup>
+  );
+};
+
+export const Example = () => {
+  return (
+    <Wrapper>
+      <CheckboxExample />
+    </Wrapper>
+  );
+};
+
+storiesOf("Checkbox", module).add("Checkbox group", Example);

example/storybook/src/react-native-aria/Checkbox/Checkbox.tsx

@@ -0,0 +1,63 @@
+import React, { useContext, useRef } from 'react';
+import { Platform, Pressable, View } from 'react-native';
+import { useCheckbox, useCheckboxGroupItem } from '@react-native-aria/checkbox';
+import { useFocusRing } from '@react-native-aria/focus';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { useToggleState } from '@react-stately/toggle';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { CheckboxGroupContext } from './CheckboxGroup';
+
+export function Checkbox(props: any) {
+  let groupState = useContext(CheckboxGroupContext);
+  let inputRef = useRef<HTMLInputElement>(null);
+
+  let { isFocusVisible, focusProps } = useFocusRing();
+
+  let { inputProps } = groupState
+    ? // eslint-disable-next-line react-hooks/rules-of-hooks
+      useCheckboxGroupItem(
+        {
+          ...props,
+          // Only pass isRequired and validationState to react-aria if they came from
+          // the props for this individual checkbox, and not from the group via context.
+          isRequired: props.isRequired,
+          validationState: props.validationState,
+        },
+        groupState,
+        inputRef
+      )
+    : // eslint-disable-next-line react-hooks/rules-of-hooks
+      useCheckbox(props, useToggleState(props), inputRef);
+
+  let icon: any = props.isIndeterminate
+    ? 'checkbox-intermediate'
+    : inputProps.checked
+    ? 'checkbox-marked'
+    : 'checkbox-blank-outline';
+
+  const iconColor = props.isDisabled ? '#d1d1d1' : '#000';
+
+  return (
+    <View style={isFocusVisible ? { borderWidth: 2 } : {}}>
+      {Platform.OS === 'web' ? (
+        <label>
+          <VisuallyHidden>
+            <input {...inputProps} {...focusProps} ref={inputRef}></input>
+          </VisuallyHidden>
+
+          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <MaterialCommunityIcons size={30} color={iconColor} name={icon} />
+            {props.children}
+          </View>
+        </label>
+      ) : (
+        <Pressable {...inputProps} {...focusProps}>
+          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <MaterialCommunityIcons size={30} color={iconColor} name={icon} />
+            {props.children}
+          </View>
+        </Pressable>
+      )}
+    </View>
+  );
+}

example/storybook/src/react-native-aria/Checkbox/CheckboxGroup.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { useCheckboxGroupState } from "@react-stately/checkbox";
+import { useCheckboxGroup } from "@react-native-aria/checkbox";
+import { Text, View } from "react-native";
+
+export let CheckboxGroupContext = React.createContext<any>(null);
+
+export function CheckboxGroup(props: any) {
+  let { children, label } = props;
+  let state = useCheckboxGroupState(props);
+  let { groupProps, labelProps } = useCheckboxGroup(props, state);
+
+  return (
+    <View {...groupProps}>
+      {label && <Text {...labelProps}>{label}</Text>}
+      <CheckboxGroupContext.Provider value={state}>
+        {children}
+      </CheckboxGroupContext.Provider>
+    </View>
+  );
+}

example/storybook/src/react-native-aria/Combobox/Combobox.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { storiesOf } from "@storybook/react-native";
+import { Wrapper } from "../Wrapper";
+import { ComboBox } from "./index";
+import { Item } from "@react-stately/collections";
+
+export const Example = () => {
+  return (
+    <Wrapper>
+      <ComboBox label="Favorite Animal">
+        <Item key="red panda">Red Panda</Item>
+        <Item key="cat">Cat</Item>
+        <Item key="dog">Dog</Item>
+        <Item key="aardvark">Aardvark</Item>
+        <Item key="kangaroo">Kangaroo</Item>
+        <Item key="snake">Snake</Item>
+      </ComboBox>
+    </Wrapper>
+  );
+};
+
+storiesOf("Combobox", module).add("Basic", () => <Example />);