@ornikar/bumper 2.1.0 → 2.2.1-canary.431a0c996598cbee4e3c07f6b9886d37d2a76679.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "2.1.0",
+  "version": "2.2.1-canary.431a0c996598cbee4e3c07f6b9886d37d2a76679.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",
@@ -11,9 +11,6 @@
     "access": "public"
   },
   "sideEffects": false,
-  "bin": {
-    "run-transformers": "./scripts/run-transformers.js"
-  },
   "engines": {
     "node": ">=22.17.0"
   },
@@ -21,13 +18,27 @@
     "build": "ORNIKAR_ONLY=bumper yarn  ../.. build",
     "lint:eslint": "yarn ../.. eslint --report-unused-disable-directives --quiet @ornikar/bumper"
   },
-  "ornikar": {},
+  "ornikar": {
+    "entries": [
+      "index"
+    ],
+    "extraEntries": [
+      "./src/tamagui.config.ts"
+    ]
+  },
   "dependencies": {
     "@babel/runtime": "^7.24.0",
-    "@tamagui/core": "1.135.6"
+    "@tamagui/animations-css": "1.135.6",
+    "@tamagui/animations-react-native": "1.135.6",
+    "@tamagui/core": "1.135.6",
+    "@tamagui/portal": "1.135.6",
+    "@tamagui/toast": "1.135.6",
+    "burnt": "0.12.2",
+    "react-native-safe-area-context": "4.12.0"
   },
   "peerDependencies": {
     "@storybook/addons": ">=7.6.20",
+    "expo": "*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-native": ">=0.76.9"
@@ -49,7 +60,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.76.9",
-    "tamagui-loader": "1.135.6"
+    "react-native-reanimated": "3.18.0"
   },
   "expo": {},
   "exports": {
@@ -70,7 +81,8 @@
         "import": "./dist/index.es.web.js"
       }
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./src/tamagui.config.ts": "./src/tamagui.config.ts"
   },
   "browser": "./dist/index.es",
   "main": "./dist/index-node-22.17.es.mjs",

package/src/animations.ts

@@ -0,0 +1,25 @@
+import { createAnimations as createWebAnimations } from '@tamagui/animations-css';
+import { createAnimations as createNativeAnimations } from '@tamagui/animations-react-native';
+
+export const nativeAnimations = createNativeAnimations({
+  fast: {
+    damping: 20,
+    mass: 1.2,
+    stiffness: 250,
+  },
+  medium: {
+    damping: 10,
+    mass: 0.9,
+    stiffness: 100,
+  },
+  slow: {
+    damping: 20,
+    stiffness: 60,
+  },
+});
+
+export const webAnimations = createWebAnimations({
+  fast: 'ease-in 150ms',
+  medium: 'ease-in 300ms',
+  slow: 'ease-in 450ms',
+});

package/src/components/toast/SafeToastViewport.tsx

@@ -0,0 +1,26 @@
+import { ToastViewport } from '@tamagui/toast';
+import type { ToastViewportProps } from '@tamagui/toast';
+import type { ReactNode } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export interface SafeToastViewportProps {
+  name?: ToastViewportProps['name'];
+  position?: 'top' | 'bottom';
+  portalToRoot?: boolean;
+}
+
+export function SafeToastViewport({ name, position = 'top', portalToRoot = false }: SafeToastViewportProps): ReactNode {
+  const { left, top, bottom, right } = useSafeAreaInsets();
+
+  return (
+    <ToastViewport
+      multipleToasts
+      portalToRoot={portalToRoot}
+      name={name}
+      top={position === 'top' ? top : undefined}
+      bottom={position === 'bottom' ? bottom : undefined}
+      left={left}
+      right={right}
+    />
+  );
+}

package/src/components/toast/Toast.stories.tsx

@@ -0,0 +1,75 @@
+import type { ComponentStory, Meta } from '@storybook/react';
+import { type ReactNode } from 'react';
+import { StorySection } from '../../story-components/StorySection';
+import { VStack } from '../primitives/Stacks';
+import { View } from '../primitives/View';
+import { Typography } from '../typography/Typograhy';
+import { ToastProvider } from './ToastProvider';
+import { ToastStoryDecorator } from './decorators/ToastProviderDecorator';
+import type { ToastProps } from './types';
+import { useToast } from './useToast';
+
+function ToastComponent(props: ToastProps) {
+  return (
+    <VStack
+      backgroundColor="$bg.highlight.default"
+      padding="$16"
+      borderRadius="$space.4"
+      height="$space.56"
+      justifyContent="center"
+    >
+      <Typography.Text variant="body-l" weight="bold">
+        {props.title}
+      </Typography.Text>
+      {props.description && <Typography.Text>{props.description}</Typography.Text>}
+    </VStack>
+  );
+}
+
+function ToastTrigger(): ReactNode {
+  const { showToast } = useToast();
+
+  const showExampleToast = () => {
+    showToast({
+      title: 'Example Toast',
+      description: 'This is an example of a toast message.',
+    });
+  };
+
+  const showExampleToast2 = () => {
+    showToast({
+      title: 'Example Toast 2',
+      description: 'This is an other example of a toast message.',
+    });
+  };
+  return (
+    <>
+      <View onPress={showExampleToast}>
+        <Typography.Text>Show Toast</Typography.Text>
+      </View>
+      <View onPress={showExampleToast2}>
+        <Typography.Text>Show Toast 2</Typography.Text>
+      </View>
+    </>
+  );
+}
+
+export default {
+  title: 'bumper/Toast',
+  component: ToastProvider,
+  decorators: [ToastStoryDecorator],
+} satisfies Meta<typeof ToastProvider>;
+
+export const ToastProviderStory: ComponentStory<typeof ToastProvider> = () => (
+  <StorySection.Demo>
+    <ToastTrigger />
+  </StorySection.Demo>
+);
+
+ToastProviderStory.storyName = 'Toast';
+ToastProviderStory.parameters = {
+  toast: {
+    position: 'top',
+    component: ToastComponent,
+  },
+};

package/src/components/toast/ToastProvider.tsx

@@ -0,0 +1,33 @@
+import { PortalProvider } from '@tamagui/portal';
+import { ToastProvider as TamaguiToastProvider } from '@tamagui/toast';
+import type { ReactNode } from 'react';
+import { SafeToastViewport } from './SafeToastViewport';
+import { ToastRenderer } from './ToastRenderer';
+import { ToastStoreProvider } from './ToastStoreProvider';
+import type { ToastProps } from './types';
+
+export interface ToastProviderProps {
+  children: React.ReactNode;
+  position?: 'top' | 'bottom';
+  viewportName?: string;
+  ToastComponent: React.ComponentType<ToastProps>;
+}
+
+export function ToastProvider({
+  children,
+  position = 'top',
+  viewportName,
+  ToastComponent,
+}: ToastProviderProps): ReactNode {
+  return (
+    <PortalProvider>
+      <TamaguiToastProvider swipeDirection="horizontal">
+        <ToastStoreProvider>
+          {children}
+          <SafeToastViewport portalToRoot name={viewportName} position={position} />
+          <ToastRenderer ToastComponent={ToastComponent} />
+        </ToastStoreProvider>
+      </TamaguiToastProvider>
+    </PortalProvider>
+  );
+}

package/src/components/toast/ToastRenderer.tsx

@@ -0,0 +1,26 @@
+import { Toast } from '@tamagui/toast';
+import type { ReactNode } from 'react';
+import { useCallback } from 'react';
+import type { ToastProps } from './types';
+import { useToast } from './useToast';
+
+interface ToastRendererProps {
+  ToastComponent: React.ComponentType<ToastProps>;
+}
+
+export function ToastRenderer({ ToastComponent }: ToastRendererProps): ReactNode {
+  const { toasts, hideToast: removeToast } = useToast();
+
+  const hideToast = useCallback(
+    (id: string) => () => {
+      removeToast(id);
+    },
+    [removeToast],
+  );
+
+  return toasts.map((toast) => (
+    <Toast key={toast.id} id={toast.id} duration={toast.timeout} viewportName={toast.viewportName}>
+      <ToastComponent {...toast} hideToast={hideToast(toast.id)} />
+    </Toast>
+  ));
+}

package/src/components/toast/ToastStoreProvider.tsx

@@ -0,0 +1,41 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import type { ToastOptions } from './types';
+
+interface ToastStore {
+  toasts: ToastOptions[];
+  addToast: (toast: ToastOptions) => void;
+  removeToast: (id: string) => void;
+}
+
+const useToastState = (): ToastStore => {
+  const [toasts, setToasts] = useState<ToastOptions[]>([]);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prevToasts) => prevToasts.filter((t) => t.id !== id));
+  }, []);
+
+  const addToast = useCallback((toast: ToastOptions) => {
+    setToasts((prevToasts) => [...prevToasts, toast]);
+  }, []);
+
+  return { toasts, addToast, removeToast };
+};
+
+const ToastStoreContext = createContext<ToastStore | undefined>(undefined);
+
+export function ToastStoreProvider({ children }: PropsWithChildren): ReactNode {
+  const { toasts, addToast, removeToast } = useToastState();
+
+  const value = useMemo(() => ({ toasts, addToast, removeToast }), [toasts, addToast, removeToast]);
+
+  return <ToastStoreContext.Provider value={value}>{children}</ToastStoreContext.Provider>;
+}
+
+export const useToastStore = (): ToastStore => {
+  const context = useContext(ToastStoreContext);
+  if (!context) {
+    throw new Error('useToastStore must be used within a ToastStoreProvider');
+  }
+  return context;
+};

package/src/components/toast/__snapshots__/Toast.stories.tsx.snap

@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`bumper/Toast Toast 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "paddingBottom": 12,
+          "paddingLeft": 4,
+          "paddingRight": 4,
+          "paddingTop": 4,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandardSemibold",
+            "fontSize": 38,
+            "letterSpacing": 0,
+            "lineHeight": 48,
+            "marginBottom": 4,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Demo
+      </Text>
+      <View
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+      >
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandard",
+            }
+          }
+          suppressHighlighting={true}
+        >
+          Show Toast
+        </Text>
+      </View>
+      <View
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+      >
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandard",
+            }
+          }
+          suppressHighlighting={true}
+        >
+          Show Toast 2
+        </Text>
+      </View>
+    </View>
+    <View
+      pointerEvents="box-none"
+      style={
+        {
+          "bottom": 0,
+          "left": 0,
+          "maxWidth": "100%",
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+          "zIndex": 9007199254740991,
+        }
+      }
+    >
+      <View
+        aria-label="Notifications (F8)"
+        pointerEvents="box-none"
+        role="region"
+        style={
+          {
+            "bottom": 0,
+            "flexDirection": "column",
+            "left": 0,
+            "maxWidth": "100%",
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 100000,
+          }
+        }
+        tabIndex={-1}
+      >
+        <View
+          focusable={false}
+          pointerEvents="box-none"
+          style={
+            {
+              "flexDirection": "column",
+              "left": 0,
+              "maxWidth": "100%",
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        />
+      </View>
+    </View>
+  </RNCSafeAreaProvider>
+</RNCSafeAreaProvider>
+`;

package/src/components/toast/__snapshots_web__/Toast.stories.tsx.snap

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`bumper/Toast Toast 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="css-view-175oi2r r-flex-13awgt0"
+          >
+            <div
+              class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _paddingTop-t-space-4 _paddingBottom-t-space-12 _paddingRight-t-space-4 _paddingLeft-t-space-4"
+            >
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-t-space-4 _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347201 _lineHeight-f-lineHeigh1544154440 _letterSpacing-f-letterSpa1195674547 _fontWeight-f-weight-se1074390495"
+                data-disable-theme="true"
+              >
+                Demo
+              </span>
+              <div
+                class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-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"
+                  data-disable-theme="true"
+                >
+                  Show Toast
+                </span>
+              </div>
+              <div
+                class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-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"
+                  data-disable-theme="true"
+                >
+                  Show Toast 2
+                </span>
+              </div>
+            </div>
+            <span
+              style="z-index: 9007199254740991; position: fixed; inset: 0; contain: strict; pointer-events: none;"
+            >
+              <div
+                aria-label="Notifications (F8)"
+                class="is_ViewportWrapper _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-fixed _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _pointerEvents-box-none _top-0px _bottom-0px _left-0px _right-0px _maxWidth-10037 _zIndex-100000"
+                role="region"
+                tabindex="-1"
+              >
+                <div
+                  class="is_ToastViewport _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-fixed _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _pointerEvents-box-none _maxWidth-10037 _top-0px _left-0px _right-0px"
+                  tabindex="-1"
+                >
+                  <div
+                    style="display: contents;"
+                  />
+                </div>
+              </div>
+            </span>
+            <div
+              style="display: contents;"
+            />
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/components/toast/decorators/ToastProviderDecorator.tsx

@@ -0,0 +1,23 @@
+import { makeDecorator } from '@storybook/addons';
+import type { ReactNode } from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { ToastProvider } from '../ToastProvider';
+
+export const ToastStoryDecorator = makeDecorator({
+  name: 'ToastStoryDecorator',
+  parameterName: 'toast',
+  wrapper: (storyFn, context): ReactNode => {
+    const story = storyFn(context) as unknown as ReactNode;
+
+    return (
+      <SafeAreaProvider>
+        <ToastProvider
+          ToastComponent={context.parameters.toast.component || null}
+          position={context.parameters.toast?.position || 'top'}
+        >
+          {story}
+        </ToastProvider>
+      </SafeAreaProvider>
+    );
+  },
+});

package/src/components/toast/types.ts

@@ -0,0 +1,9 @@
+import type { CustomData } from '@tamagui/toast';
+
+export interface ToastOptions extends CustomData {
+  title: string;
+}
+
+export interface ToastProps extends ToastOptions {
+  hideToast: () => void;
+}

package/src/components/toast/useToast.tsx

@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+import { useToastStore } from './ToastStoreProvider';
+import type { ToastOptions } from './types';
+
+interface UseToastReturn {
+  toasts: ToastOptions[];
+  showToast: (options: ToastOptions) => void;
+  hideToast: (id: string) => void;
+}
+
+export function useToast(): UseToastReturn {
+  const { toasts, addToast, removeToast } = useToastStore();
+
+  const showToast = useCallback(
+    (options: ToastOptions): void => {
+      const { title, ...otherOptions } = options;
+      const id = `${JSON.stringify(options)}${Math.random()}`;
+      addToast({ id, title, ...otherOptions });
+    },
+    [addToast],
+  );
+
+  const hideToast = useCallback(
+    (id: string): void => {
+      removeToast(id);
+    },
+    [removeToast],
+  );
+
+  return {
+    toasts,
+    showToast,
+    hideToast,
+  };
+}

package/src/index.ts

@@ -1,6 +1,16 @@
 export { BumperDecorator } from './core/BumperDecorator';
 export { BumperProvider } from './core/BumperProvider';
 
+// Primitives
+export type { HStackProps, StackProps, VStackProps } from './components/primitives/Stacks';
+export { HStack, Stack, VStack } from './components/primitives/Stacks';
+export type { ViewProps } from './components/primitives/View';
+export { View } from './components/primitives/View';
+
+// Typography
+export type { TypographyTextProps } from './components/typography/Typograhy';
+export { Typography } from './components/typography/Typograhy';
+
 // Breakpoints
 export { useBreakpointValue } from './components/breakpoints/hooks/useBreakpointValue';
 export { useCurrentBreakpointName } from './components/breakpoints/hooks/useCurrentBreakpointName';
@@ -9,3 +19,8 @@ export type { SwitchBreakpointsProps } from './components/breakpoints/SwitchBrea
 export { SwitchBreakpoints } from './components/breakpoints/SwitchBreakpoins';
 export type { ValueForBreakpoint } from './components/breakpoints/utils/breakpointsUtils';
 export { getValueForBreakpoint } from './components/breakpoints/utils/breakpointsUtils';
+
+// Toast
+export { SafeToastViewport as ToastViewport } from './components/toast/SafeToastViewport';
+export { ToastProvider } from './components/toast/ToastProvider';
+export { useToast } from './components/toast/useToast';

package/src/tamagui.config.ts

@@ -1,4 +1,6 @@
 import { createTamagui, createTokens } from '@tamagui/core';
+import { Platform } from 'react-native';
+import { nativeAnimations, webAnimations } from './animations';
 import { light } from './themes/light';
 import { BreakpointNameEnum, breakpoints } from './themes/utils/breakpoints';
 import { fonts } from './tokens/fonts';
@@ -33,6 +35,7 @@ export const config = createTamagui({
     autocompleteSpecificTokens: true,
     debug: false,
   },
+  animations: Platform.OS === 'web' ? webAnimations : nativeAnimations,
 });
 
 type Conf = typeof config;