@ornikar/bumper 2.5.0 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",
@@ -31,13 +31,13 @@
     "@tamagui/core": "1.135.6"
   },
   "peerDependencies": {
-    "@storybook/addons": ">=7.6.20",
+    "@storybook/preview-api": ">=8.6.15",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-native": ">=0.76.9"
   },
   "peerDependenciesMeta": {
-    "@storybook/addons": {
+    "@storybook/preview-api": {
       "optional": true
     },
     "react-dom": {

package/src/components/breakpoints/breakpoints.stories.tsx

@@ -1,4 +1,4 @@
-import type { ComponentStory, Meta } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { View } from '@tamagui/core';
 import type { ReactElement } from 'react';
 import { Typography } from '../typography/Typograhy';
@@ -30,7 +30,7 @@ const SwitchBreakpointsComponent = (): ReactElement => {
   );
 };
 
-export const BreakpointsStory: ComponentStory<typeof View> = () => {
+export const BreakpointsStory: StoryFn<typeof View> = () => {
   return (
     <>
       <CurrentBreakpointNameComponent />

package/src/components/primitives/Center.stories.tsx

@@ -1,4 +1,4 @@
-import type { ComponentStory, Meta } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { CenterProps } from './Center';
 import { Center } from './Center';
 import { View } from './View';
@@ -8,7 +8,7 @@ export default {
   component: Center,
 } satisfies Meta<CenterProps>;
 
-export const CenterStory: ComponentStory<typeof Center> = () => (
+export const CenterStory: StoryFn<typeof Center> = () => (
   <Center width="$size.120" height="$size.120" backgroundColor="$bg.accent.default">
     <View width="$size.16" height="$size.16" backgroundColor="$bg.base.mid.default" />
   </Center>

package/src/components/primitives/Pressable.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { Typography } from '../typography/Typograhy';
+import type { CenterProps } from './Center';
+import { Center } from './Center';
+import { Pressable } from './Pressable';
+
+export default {
+  title: 'bumper/Primitives',
+  component: Center,
+} satisfies Meta<CenterProps>;
+
+export const PressableStory: StoryFn<typeof Pressable> = () => (
+  <Pressable
+    as={Center}
+    marginTop="$space.16"
+    padding="$space.24"
+    backgroundColor="$bg.accent.default"
+    pressStyle={{ opacity: 0.7 }}
+    onPress={() => null}
+  >
+    <Typography.Text color="$content.base.onContrasted.hi">Click me</Typography.Text>
+  </Pressable>
+);
+
+PressableStory.storyName = 'Pressable';

package/src/components/primitives/Pressable.tsx

@@ -0,0 +1,35 @@
+import type { GetProps, TamaguiComponent } from '@tamagui/core';
+import { View, styled } from '@tamagui/core';
+import type { ReactNode } from 'react';
+import type { Except } from 'type-fest';
+
+export type PressableProps<C extends TamaguiComponent = typeof View> = {
+  /**
+   * The Tamagui component to render as (`View`, `Stack`, etc.).
+   *
+   * @default View
+   */
+  as?: C;
+} & Except<GetProps<C>, 'as'>;
+
+/**
+ * A polymorphic Pressable component that can render as any Tamagui primitive.
+ *
+ * @example
+ * <Pressable onPress={() => {}} />
+ *
+ * @example
+ * <Pressable
+ *   as={HStack}
+ *   onPress={() => {}}
+ * />
+ */
+export function Pressable<C extends TamaguiComponent = typeof View>({ as, ...rest }: PressableProps<C>): ReactNode {
+  const Component = styled(as ?? View, {
+    name: 'Pressable',
+    role: 'button',
+    cursor: 'pointer',
+  });
+
+  return <Component {...(rest as GetProps<C>)} />;
+}

package/src/components/primitives/Stack.stories.tsx

@@ -1,4 +1,4 @@
-import type { ComponentStory, Meta } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { StackProps } from './Stack';
 import { HStack, Stack, VStack } from './Stack';
 import { View } from './View';
@@ -36,7 +36,7 @@ const items = (
   </>
 );
 
-export const StackStory: ComponentStory<typeof Stack> = () => (
+export const StackStory: StoryFn<typeof Stack> = () => (
   <>
     <HStack gap="$space.4">{items}</HStack>
 

package/src/components/primitives/View.stories.tsx

@@ -1,4 +1,4 @@
-import type { ComponentStory, Meta } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ViewProps } from './View';
 import { View } from './View';
 
@@ -7,7 +7,7 @@ export default {
   component: View,
 } satisfies Meta<ViewProps>;
 
-export const ViewStory: ComponentStory<typeof View> = () => (
+export const ViewStory: StoryFn<typeof View> = () => (
   <View width="$size.120" height="$size.120" backgroundColor="$bg.accent.default" />
 );
 

package/src/components/primitives/__snapshots__/Pressable.stories.tsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`bumper/Primitives Pressable 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#563B56",
+        "justifyContent": "center",
+        "marginTop": 16,
+        "opacity": 1,
+        "paddingBottom": 24,
+        "paddingLeft": 24,
+        "paddingRight": 24,
+        "paddingTop": 24,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "color": "#ffffff",
+          "fontFamily": "GTStandard",
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Click me
+    </Text>
+  </View>
+</RNCSafeAreaProvider>
+`;

package/src/components/primitives/__snapshots_web__/Pressable.stories.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`bumper/Primitives Pressable 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="is_Pressable _opacity-0active-0--7 _display-flex _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _cursor-pointer _marginTop-t-space-spa1366020313 _paddingTop-t-space-spa1366020284 _paddingRight-t-space-spa1366020284 _paddingBottom-t-space-spa1366020284 _paddingLeft-t-space-spa1366020284 _backgroundColor-bg--accent-1633109644"
+            role="button"
+            tabindex="0"
+          >
+            <span
+              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _color-content--ba254712717"
+              data-disable-theme="true"
+            >
+              Click me
+            </span>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/components/typography/Typography.stories.tsx

@@ -1,4 +1,4 @@
-import type { ComponentStory, Meta } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { FC } from 'react';
 import { StorySection } from '../../story-components/StorySection';
 import type { BodyFontVariants, FontVariants, HeadingFontVariants, LabelFontVariants } from '../../tokens/fonts';
@@ -74,7 +74,7 @@ function TypographyVariants({ types }: TypographyTypesProps) {
   );
 }
 
-export const TypographyStory: ComponentStory<typeof Typography.Text> = (args) => (
+export const TypographyStory: StoryFn<typeof Typography.Text> = (args) => (
   <>
     <StorySection.Demo>
       <Typography.Text {...args} />

package/src/core/BumperDecorator.tsx

@@ -1,4 +1,4 @@
-import { makeDecorator } from '@storybook/addons';
+import { makeDecorator } from '@storybook/preview-api';
 import type { ReactNode } from 'react';
 import { BumperProvider } from './BumperProvider';
 

package/src/index.ts

@@ -4,6 +4,8 @@ export { BumperProvider } from './core/BumperProvider';
 // Primitives
 export type { CenterProps } from './components/primitives/Center';
 export { Center } from './components/primitives/Center';
+export type { PressableProps } from './components/primitives/Pressable';
+export { Pressable } from './components/primitives/Pressable';
 export type { HStackProps, StackProps, VStackProps } from './components/primitives/Stack';
 export { HStack, Stack, VStack } from './components/primitives/Stack';
 export type { ViewProps } from './components/primitives/View';

package/src/themes/light.stories.tsx

@@ -1,4 +1,4 @@
-import type { ComponentStory, Meta } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { GetThemeValueForKey } from '@tamagui/core';
 import { VStack } from '../components/primitives/Stack';
 import { View } from '../components/primitives/View';
@@ -27,7 +27,7 @@ const TokenView = ({ tokenName, tokenValue }: { tokenName: string; tokenValue: s
   );
 };
 
-export const TypographyHeadingStory: ComponentStory<typeof View> = () => (
+export const TypographyHeadingStory: StoryFn<typeof View> = () => (
   <StorySection title="Tokens">
     {Object.entries(light).map(([tokenName, tokenValue]) => (
       <TokenView key={tokenName} tokenName={tokenName} tokenValue={tokenValue} />

package/src/tokens/palettes/deepPurpleColorPalette.stories.tsx

@@ -1,4 +1,4 @@
-import type { ComponentStory, Meta } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { GetThemeValueForKey } from '@tamagui/core';
 import { View } from '../../components/primitives/View';
 import { Typography } from '../../components/typography/Typograhy';
@@ -26,7 +26,7 @@ const TokenView = ({ tokenName, tokenValue }: { tokenName: string; tokenValue: s
   );
 };
 
-export const TypographyHeadingStory: ComponentStory<typeof View> = () => (
+export const TypographyHeadingStory: StoryFn<typeof View> = () => (
   <StorySection title="Palette">
     {Object.entries(deepPurpleColorPalette).map(([tokenName, tokenValue]) => (
       <TokenView key={tokenName} tokenName={tokenName} tokenValue={tokenValue} />