@ornikar/bumper 2.13.0 → 2.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",
@@ -20,7 +20,8 @@
   },
   "ornikar": {
     "entries": [
-      "index"
+      "index",
+      "storybook"
     ],
     "extraEntries": [
       "./src/tamagui.config.ts"
@@ -37,7 +38,9 @@
     "@storybook/preview-api": ">=8.6.15",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-native": ">=0.76.9"
+    "react-native": ">=0.76.9",
+    "react-native-reanimated": "^3.18.0",
+    "react-native-svg": "^15.8.0"
   },
   "peerDependenciesMeta": {
     "@storybook/preview-api": {
@@ -48,6 +51,12 @@
     },
     "react-native": {
       "optional": true
+    },
+    "react-native-reanimated": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -61,10 +70,18 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.76.9",
+    "react-native-reanimated": "3.18.0",
+    "react-native-svg": "15.8.0",
     "react-test-renderer": "18.3.1",
     "storybook": "8.6.15"
   },
-  "expo": {},
+  "expo": {
+    "install": {
+      "exclude": [
+        "react-native-reanimated"
+      ]
+    }
+  },
   "exports": {
     ".": {
       "types": "./dist/definitions/index.d.ts",
@@ -83,10 +100,30 @@
         "import": "./dist/index.es.web.js"
       }
     },
+    "./storybook": {
+      "types": "./dist/definitions/storybook.d.ts",
+      "node": {
+        "web": {
+          "require": "./dist/storybook-node-22.22.cjs.web.js",
+          "import": "./dist/storybook-node-22.22.es.web.mjs"
+        },
+        "import": "./dist/storybook-node-22.22.es.mjs",
+        "require": "./dist/storybook-node-22.22.cjs.js"
+      },
+      "react-native": {
+        "jest": "./dist/storybook-node-22.22.cjs.js"
+      },
+      "browser": {
+        "import": "./dist/storybook.es.web.js"
+      }
+    },
     "./package.json": "./package.json",
     "./src/tamagui.config.ts": "./src/tamagui.config.ts"
   },
-  "browser": "./dist/index.es",
+  "browser": {
+    ".": "./dist/index.es",
+    "./storybook": "./dist/storybook.es"
+  },
   "main": "./dist/index-node-22.22.es.mjs",
   "react-native": "./dist/index-metro.es",
   "types": "./dist/definitions/index.d.ts"

package/src/index.ts

@@ -1,4 +1,3 @@
-export { BumperDecorator } from './shared/storybook/BumperDecorator';
 export { BumperProvider } from './system/core/provider/BumperProvider';
 
 // Primitives
@@ -33,3 +32,7 @@ export type { SwitchBreakpointsProps } from './system/core/breakpoints/SwitchBre
 export { SwitchBreakpoints } from './system/core/breakpoints/SwitchBreakpoins';
 export type { ValueForBreakpoint } from './system/core/breakpoints/utils/breakpointsUtils';
 export { getValueForBreakpoint } from './system/core/breakpoints/utils/breakpointsUtils';
+
+// Loader
+export type { LoaderProps } from './system/loading/loader/Loader';
+export { Loader } from './system/loading/loader/Loader';

package/src/storybook.ts

@@ -0,0 +1 @@
+export { BumperDecorator } from './shared/storybook/BumperDecorator';

package/src/system/loading/loader/Loader.features.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../content/typography';
+import { HStack, VStack } from '../../core/primitives/Stack';
+import { View } from '../../core/primitives/View';
+import { Loader } from './Loader';
+
+const meta: Meta<typeof Loader> = {
+  title: 'Bumper/Loading/Loader/Features',
+  component: Loader,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Sizes: Story = {
+  render: () => (
+    <HStack gap="$space.16" alignItems="center">
+      <VStack alignItems="center" gap="$space.8">
+        <Loader size="icon" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          icon (20)
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <Loader size="page" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          page (48)
+        </Typography.Text>
+      </VStack>
+    </HStack>
+  ),
+};
+
+export const OnContrasted: Story = {
+  render: () => (
+    <HStack gap="$space.16" alignItems="center">
+      <View backgroundColor="$bg.base.hi.default" padding="$space.16" borderRadius="$radius.m">
+        <Loader isOnContrasted size="icon" />
+      </View>
+      <View backgroundColor="$bg.base.hi.default" padding="$space.16" borderRadius="$radius.m">
+        <Loader isOnContrasted size="page" />
+      </View>
+    </HStack>
+  ),
+};

package/src/system/loading/loader/Loader.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Loader } from './Loader';
+
+const meta: Meta<typeof Loader> = {
+  title: 'Bumper/Loading/Loader',
+  component: Loader,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['icon', 'page'],
+      description: 'Loader size (icon: 20px, page: 48px)',
+    },
+    isOnContrasted: {
+      control: 'boolean',
+      description: 'Use contrasted foreground color',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    size: 'page',
+  },
+};

package/src/system/loading/loader/Loader.tsx

@@ -0,0 +1,65 @@
+import { styled, useStyle } from '@tamagui/core';
+import type { ReactNode } from 'react';
+import { useEffect } from 'react';
+import { useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import { View } from '../../core/primitives/View';
+import type { TamaguiMediaProps } from '../../types';
+import { LoaderBackgroundCircle } from './LoaderBackgroundCircle';
+import { LoaderCircleWrapper } from './LoaderCircleWrapper';
+import { LoaderForegroundCircle } from './LoaderForegroundCircle';
+import type { LoaderSize } from './loaderConfig';
+import { LOADER_ANIMATION, LOADER_SIZE_CONFIG } from './loaderConfig';
+
+const { icon, page } = LOADER_SIZE_CONFIG;
+
+const LoaderContainer = styled(View, {
+  name: 'Loader',
+  position: 'relative',
+  rotate: '-90deg',
+  variants: {
+    size: {
+      icon: { width: icon.size, height: icon.size },
+      page: { width: page.size, height: page.size },
+    },
+  } as const,
+});
+
+interface InternalLoaderProps {
+  /** The size of the loader. `'icon'` renders a small 20px loader, `'page'` renders a larger 48px loader.
+   * @default 'page'
+   * */
+  size?: LoaderSize;
+  /** Whether the loader is displayed on a contrasted (dark) background. When `true`, uses a high-contrast foreground color.
+   * @default false
+   * */
+  isOnContrasted?: boolean;
+  /** Test ID passed to the root container for testing purposes. */
+  testID?: string;
+}
+
+export type LoaderProps = TamaguiMediaProps<InternalLoaderProps>;
+
+export function Loader({ size = 'page', isOnContrasted = false, testID }: LoaderProps): ReactNode {
+  const backgroundStyle = useStyle({ color: '$border.base.mid' });
+  const foregroundStyle = useStyle({
+    color: isOnContrasted ? '$border.base.onContrasted.hi' : '$content.accent',
+  });
+
+  const progress = useSharedValue(0);
+
+  useEffect(() => {
+    progress.value = withRepeat(withTiming(1, LOADER_ANIMATION), -1, false);
+  }, [progress]);
+
+  return (
+    <LoaderContainer size={size} testID={testID}>
+      <LoaderCircleWrapper size={size}>
+        <LoaderBackgroundCircle size={size} stroke={backgroundStyle.color} />
+      </LoaderCircleWrapper>
+
+      <LoaderCircleWrapper isForeground size={size}>
+        <LoaderForegroundCircle color={String(foregroundStyle.color)} size={size} progress={progress} />
+      </LoaderCircleWrapper>
+    </LoaderContainer>
+  );
+}

package/src/system/loading/loader/LoaderBackgroundCircle.tsx

@@ -0,0 +1,15 @@
+import { styled } from '@tamagui/core';
+import { Circle } from 'react-native-svg';
+import { LOADER_SIZE_CONFIG } from './loaderConfig';
+
+const { icon, page } = LOADER_SIZE_CONFIG;
+
+export const LoaderBackgroundCircle = styled(Circle, {
+  fill: 'none',
+  variants: {
+    size: {
+      icon: { strokeWidth: icon.strokeWidth, cx: icon.center, cy: icon.center, r: icon.radius },
+      page: { strokeWidth: page.strokeWidth, cx: page.center, cy: page.center, r: page.radius },
+    },
+  } as const,
+});

package/src/system/loading/loader/LoaderCircleWrapper.tsx

@@ -0,0 +1,19 @@
+import { styled } from '@tamagui/core';
+import Svg from 'react-native-svg';
+import { LOADER_SIZE_CONFIG } from './loaderConfig';
+
+const { icon, page } = LOADER_SIZE_CONFIG;
+
+export const LoaderCircleWrapper = styled(Svg, {
+  variants: {
+    size: {
+      icon: { width: icon.size, height: icon.size, viewBox: icon.viewBox },
+      page: { width: page.size, height: page.size, viewBox: page.viewBox },
+    },
+    isForeground: {
+      true: {
+        position: 'absolute',
+      },
+    },
+  } as const,
+});

package/src/system/loading/loader/LoaderForegroundCircle.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import { Circle } from 'react-native-svg';
+import type { LoaderSize } from './loaderConfig';
+import { LOADER_SIZE_CONFIG } from './loaderConfig';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+interface LoaderForegroundCircleProps {
+  color: string;
+  size: LoaderSize;
+  progress: SharedValue<number>;
+}
+
+export function LoaderForegroundCircle({ color, size, progress }: LoaderForegroundCircleProps): ReactNode {
+  const { center, radius, circumference, strokeWidth } = LOADER_SIZE_CONFIG[size];
+
+  const animatedProps = useAnimatedProps(
+    () => ({
+      strokeDashoffset: circumference - 2 * circumference * progress.value,
+    }),
+    [circumference, progress],
+  );
+
+  return (
+    <AnimatedCircle
+      cx={center}
+      cy={center}
+      r={radius}
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      fill="none"
+      strokeDasharray={circumference}
+      animatedProps={animatedProps}
+    />
+  );
+}