Add built-in Haptic components

native-playground/src/routes/components/Haptic.js

@@ -24,21 +24,21 @@ export default function App() {
       </PreviewSection>
       <PreviewSection title="Different behaviours">
         <Preview>
-          <Haptic type="light">
+          <Haptic.Impact type="light">
             <Button>Light feedback</Button>
-          </Haptic>
-          <Haptic type="medium">
+          </Haptic.Impact>
+          <Haptic.Impact type="medium">
             <Button>Medium feedback</Button>
-          </Haptic>
-          <Haptic type="heavy">
+          </Haptic.Impact>
+          <Haptic.Impact type="heavy">
             <Button>Heavy feedback</Button>
-          </Haptic>
-          <Haptic type="soft">
+          </Haptic.Impact>
+          <Haptic.Impact type="soft">
             <Button>Soft feedback</Button>
-          </Haptic>
-          <Haptic type="rigid">
+          </Haptic.Impact>
+          <Haptic.Impact type="rigid">
             <Button>Rigid feedback</Button>
-          </Haptic>
+          </Haptic.Impact>
           <Haptic.Notification type="success">
             <Button>Success feedback</Button>
           </Haptic.Notification>
@@ -48,9 +48,6 @@ export default function App() {
           <Haptic.Notification type="error">
             <Button>Error feedback</Button>
           </Haptic.Notification>
-          <Haptic.Selection>
-            <Button>Select</Button>
-          </Haptic.Selection>
         </Preview>
       </PreviewSection>
       <PreviewSection title="Multiple children">
@@ -61,6 +58,17 @@ export default function App() {
           </Haptic>
         </Preview>
       </PreviewSection>
+      <PreviewSection title="Built-ins">
+        <Preview>
+          <Haptic.Button palette="primary">Press me</Haptic.Button>
+          <Haptic.Touchable>
+            <Text>Press me</Text>
+          </Haptic.Touchable>
+          <Haptic.Pressable>
+            <Text>Press me</Text>
+          </Haptic.Pressable>
+        </Preview>
+      </PreviewSection>
     </Box>
   );
 }

packages/bumbag-native-haptic/src/Haptic/HapticButton.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { createComponent } from 'bumbag/utils';
+import { Button, ButtonProps } from 'bumbag-native/Button';
+
+import { HapticRoot, HapticRootProps } from './Haptic';
+
+export type LocalHapticButtonProps = {
+  hapticOptions?: {
+    enableVibrateFallback?: HapticRootProps['enableVibrateFallback'];
+    ignoreAndroidSystemSettings?: HapticRootProps['ignoreAndroidSystemSettings'];
+    type?: HapticRootProps['type'];
+  };
+};
+export type HapticButtonProps = ButtonProps & LocalHapticButtonProps;
+
+export const HapticButton = createComponent<HapticButtonProps>(
+  (props) => {
+    const { hapticOptions, ...restProps } = props;
+    return (
+      <HapticRoot {...hapticOptions}>
+        <Button {...restProps}>{props.children}</Button>
+      </HapticRoot>
+    );
+  },
+  {
+    attach: {
+      useProps: () => {},
+      displayName: 'native.Haptic.Button',
+    },
+    themeKey: 'native.Haptic.Button',
+  }
+);

packages/bumbag-native-haptic/src/Haptic/HapticPressable.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { createComponent } from 'bumbag/utils';
+import { Pressable, PressableProps } from 'bumbag-native/Pressable';
+
+import { HapticRoot, HapticRootProps } from './Haptic';
+
+export type LocalHapticPressableProps = {
+  hapticOptions?: {
+    enableVibrateFallback?: HapticRootProps['enableVibrateFallback'];
+    ignoreAndroidSystemSettings?: HapticRootProps['ignoreAndroidSystemSettings'];
+    type?: HapticRootProps['type'];
+  };
+};
+export type HapticPressableProps = PressableProps & LocalHapticPressableProps;
+
+export const HapticPressable = createComponent<HapticPressableProps>(
+  (props) => {
+    const { hapticOptions, ...restProps } = props;
+    return (
+      <HapticRoot {...hapticOptions}>
+        <Pressable {...restProps}>{props.children}</Pressable>
+      </HapticRoot>
+    );
+  },
+  {
+    attach: {
+      useProps: () => undefined,
+      displayName: 'native.Haptic.Pressable',
+    },
+    themeKey: 'native.Haptic.Pressable',
+  }
+);

packages/bumbag-native-haptic/src/Haptic/HapticTouchable.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { createComponent } from 'bumbag/utils';
+import { BoxTouchable, BoxTouchableProps } from 'bumbag-native/Box';
+
+import { HapticRoot, HapticRootProps } from './Haptic';
+
+export type LocalHapticTouchableProps = {
+  hapticOptions?: {
+    enableVibrateFallback?: HapticRootProps['enableVibrateFallback'];
+    ignoreAndroidSystemSettings?: HapticRootProps['ignoreAndroidSystemSettings'];
+    type?: HapticRootProps['type'];
+  };
+};
+export type HapticTouchableProps = BoxTouchableProps & LocalHapticTouchableProps;
+
+export const HapticTouchable = createComponent<HapticTouchableProps>(
+  (props) => {
+    const { hapticOptions, ...restProps } = props;
+    return (
+      <HapticRoot {...hapticOptions}>
+        <BoxTouchable {...restProps}>{props.children}</BoxTouchable>
+      </HapticRoot>
+    );
+  },
+  {
+    attach: {
+      useProps: () => undefined,
+      displayName: 'native.Haptic.Touchable',
+    },
+    themeKey: 'native.Haptic.Touchable',
+  }
+);

packages/bumbag-native-haptic/src/Haptic/index.ts

@@ -1,13 +1,22 @@
 import { Haptic as _Haptic, HapticNotification, HapticImpact, HapticRoot } from './Haptic';
+import { HapticButton } from './HapticButton';
+import { HapticPressable } from './HapticPressable';
+import { HapticTouchable } from './HapticTouchable';
 import { trigger, triggerImpact, triggerSelection, triggerNotification } from './utils';
 
 export * from './Haptic';
+export * from './HapticButton';
+export * from './HapticPressable';
+export * from './HapticTouchable';
 export * from './utils';
 export * from './types';
 
 export const Haptic = Object.assign(_Haptic, {
   Root: Object.assign(HapticRoot, { trigger }),
   Notification: Object.assign(HapticNotification, { trigger: triggerNotification }),
   Impact: Object.assign(HapticImpact, { trigger: triggerImpact }),
+  Button: HapticButton,
+  Touchable: HapticTouchable,
+  Pressable: HapticPressable,
   trigger: triggerSelection,
 });

packages/bumbag-native-haptic/src/Haptic/utils.ts

@@ -36,7 +36,6 @@ export function getImpactType(type: HapticImpactProps['type']) {
 }
 
 export function getNotificationType(type: HapticNotificationProps['type']) {
-  let typeOverride = 'impactLight';
   if (type === 'success') {
     return 'notificationSuccess';
   } else if (type === 'warning') {