@ornikar/bumper 1.1.0

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

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`bumper/utils/Breakpoints Breakpoints 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;"
+        >
+          <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"
+          >
+            Current breakpoint name: base
+          </span>
+          <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"
+          >
+            Breakpoint value: base
+          </span>
+          <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"
+          >
+            SwitchBreakpoints value: base
+          </span>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,45 @@
+import type { ComponentStory, Meta } from '@storybook/react';
+import type { View } from '@tamagui/core';
+import type { ReactElement } from 'react';
+import { Typography } from '../typography/Typograhy';
+import { SwitchBreakpoints } from './SwitchBreakpoins';
+import { useBreakpointValue } from './hooks/useBreakpointValue';
+import { useCurrentBreakpointName } from './hooks/useCurrentBreakpointName';
+
+export default {
+  title: 'bumper/utils/Breakpoints',
+} satisfies Meta;
+
+const CurrentBreakpointNameComponent = (): ReactElement => {
+  const breakpointName = useCurrentBreakpointName();
+
+  return <Typography.Text>Current breakpoint name: {breakpointName}</Typography.Text>;
+};
+
+const BreakpointValueComponent = (): ReactElement => {
+  const value = useBreakpointValue({ base: 'base', small: 'small', medium: 'medium', large: 'large', wide: 'wide' });
+
+  return <Typography.Text>Breakpoint value: {value}</Typography.Text>;
+};
+
+const SwitchBreakpointsComponent = (): ReactElement => {
+  return (
+    <Typography.Text>
+      SwitchBreakpoints value: <SwitchBreakpoints base="base" small="small" medium="medium" large="large" wide="wide" />
+    </Typography.Text>
+  );
+};
+
+export const BreakpointsStory: ComponentStory<typeof View> = () => {
+  return (
+    <>
+      <CurrentBreakpointNameComponent />
+
+      <BreakpointValueComponent />
+
+      <SwitchBreakpointsComponent />
+    </>
+  );
+};
+
+BreakpointsStory.storyName = 'Breakpoints';

package/src/components/breakpoints/hooks/useBreakpointValue.ts

@@ -0,0 +1,12 @@
+import { useMemo } from 'react';
+import type { ValueForBreakpoint } from '../utils/breakpointsUtils';
+import { getValueForBreakpoint } from '../utils/breakpointsUtils';
+import { useCurrentBreakpointName } from './useCurrentBreakpointName';
+
+export function useBreakpointValue<T>(values: ValueForBreakpoint<T>): T {
+  const breakpoint = useCurrentBreakpointName();
+
+  return useMemo(() => {
+    return getValueForBreakpoint(breakpoint, values);
+  }, [breakpoint, values]);
+}

package/src/components/breakpoints/hooks/useCurrentBreakpointName.ts

@@ -0,0 +1,20 @@
+import { useMedia } from '@tamagui/core';
+import { BreakpointNameEnum } from '../../../themes/utils/breakpoints';
+
+export function useCurrentBreakpointName(): BreakpointNameEnum {
+  const media = useMedia();
+
+  switch (true) {
+    case media.wide:
+      return BreakpointNameEnum.WIDE;
+    case media.large:
+      return BreakpointNameEnum.LARGE;
+    case media.medium:
+      return BreakpointNameEnum.MEDIUM;
+    case media.small:
+      return BreakpointNameEnum.SMALL;
+    case media.base:
+    default:
+      return BreakpointNameEnum.BASE;
+  }
+}

package/src/components/breakpoints/hooks/useWindowSize.ts

@@ -0,0 +1 @@
+export { useWindowDimensions as useWindowSize } from 'react-native';

package/src/components/breakpoints/utils/breakpointsUtils.test.ts

@@ -0,0 +1,85 @@
+import { BreakpointNameEnum } from '../../../themes/utils/breakpoints';
+import { getValueForBreakpoint } from './breakpointsUtils';
+
+describe('getValueForBreakpoint', () => {
+  test('should return the base value for BASE breakpoint', () => {
+    expect(getValueForBreakpoint(BreakpointNameEnum.BASE, { base: 'base-value' })).toBe('base-value');
+  });
+
+  test('should return small value for SMALL breakpoint if available', () => {
+    expect(getValueForBreakpoint(BreakpointNameEnum.SMALL, { base: 'base-value', small: 'small-value' })).toBe(
+      'small-value',
+    );
+  });
+
+  test('should fallback to base value for SMALL breakpoint if small not provided', () => {
+    expect(getValueForBreakpoint(BreakpointNameEnum.SMALL, { base: 'base-value' })).toBe('base-value');
+  });
+
+  test('should return medium value for MEDIUM breakpoint if available', () => {
+    expect(
+      getValueForBreakpoint(BreakpointNameEnum.MEDIUM, {
+        base: 'base-value',
+        small: 'small-value',
+        medium: 'medium-value',
+      }),
+    ).toBe('medium-value');
+  });
+
+  test('should fallback to small value for MEDIUM breakpoint if medium not provided', () => {
+    expect(
+      getValueForBreakpoint(BreakpointNameEnum.MEDIUM, {
+        base: 'base-value',
+        small: 'small-value',
+      }),
+    ).toBe('small-value');
+  });
+
+  test('should return large value for LARGE breakpoint if available', () => {
+    expect(
+      getValueForBreakpoint(BreakpointNameEnum.LARGE, {
+        base: 'base-value',
+        small: 'small-value',
+        medium: 'medium-value',
+        large: 'large-value',
+      }),
+    ).toBe('large-value');
+  });
+
+  test('should fallback to medium value for LARGE breakpoint if large not provided', () => {
+    expect(
+      getValueForBreakpoint(BreakpointNameEnum.LARGE, {
+        base: 'base-value',
+        small: 'small-value',
+        medium: 'medium-value',
+      }),
+    ).toBe('medium-value');
+  });
+
+  test('should return wide value for WIDE breakpoint if available', () => {
+    expect(
+      getValueForBreakpoint(BreakpointNameEnum.WIDE, {
+        base: 'base-value',
+        small: 'small-value',
+        medium: 'medium-value',
+        large: 'large-value',
+        wide: 'wide-value',
+      }),
+    ).toBe('wide-value');
+  });
+
+  test('should fallback to large value for WIDE breakpoint if wide not provided', () => {
+    expect(
+      getValueForBreakpoint(BreakpointNameEnum.WIDE, {
+        base: 'base-value',
+        small: 'small-value',
+        medium: 'medium-value',
+        large: 'large-value',
+      }),
+    ).toBe('large-value');
+  });
+
+  test('should return base value for unknown breakpoint', () => {
+    expect(getValueForBreakpoint('unknown' as BreakpointNameEnum, { base: 'base-value' })).toBe('base-value');
+  });
+});

package/src/components/breakpoints/utils/breakpointsUtils.ts

@@ -0,0 +1,28 @@
+import { BreakpointNameEnum } from '../../../themes/utils/breakpoints';
+
+export interface ValueForBreakpoint<T> {
+  base: T;
+  small?: T;
+  medium?: T;
+  large?: T;
+  wide?: T;
+}
+
+export function getValueForBreakpoint<T>(
+  breakpoint: BreakpointNameEnum,
+  { base, small, medium, large, wide }: ValueForBreakpoint<T>,
+): T {
+  switch (breakpoint) {
+    case BreakpointNameEnum.WIDE:
+      return wide ?? large ?? medium ?? small ?? base;
+    case BreakpointNameEnum.LARGE:
+      return large ?? medium ?? small ?? base;
+    case BreakpointNameEnum.MEDIUM:
+      return medium ?? small ?? base;
+    case BreakpointNameEnum.SMALL:
+      return small ?? base;
+    case BreakpointNameEnum.BASE:
+    default:
+      return base;
+  }
+}

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

@@ -0,0 +1,62 @@
+import type { ComponentStory, Meta } from '@storybook/react';
+import { Text } from '@tamagui/core';
+import { StorySection } from '../../story-components/StorySection';
+import { Typography } from '../typography/Typograhy';
+import { HStack, Stack, VStack } from './Stacks';
+
+export default {
+  title: 'bumper/Primitives/Stacks',
+  component: Stack,
+} satisfies Meta<unknown>;
+
+export const StacksStory: ComponentStory<typeof Stack> = () => (
+  <>
+    <Text>
+      - space is deprecated, use gap instead - direction from NB is now flexDirection- reversed from NB is now direction
+      (rtl/ltr)
+    </Text>
+
+    <StorySection title="Stack">
+      <StorySection.SubSection title="Demo">
+        <Stack flexDirection="column-reverse" gap="$2">
+          <Typography.Text>1</Typography.Text>
+          <Typography.Text>2</Typography.Text>
+        </Stack>
+      </StorySection.SubSection>
+    </StorySection>
+
+    <StorySection title="HStack">
+      <StorySection.SubSection title="Default">
+        <HStack>
+          <Typography.Text>1</Typography.Text>
+          <Typography.Text>2</Typography.Text>
+        </HStack>
+      </StorySection.SubSection>
+
+      <StorySection.SubSection title="With gap (space)">
+        <HStack gap="$2">
+          <Typography.Text backgroundColor="$bg.accent.default">1</Typography.Text>
+          <Typography.Text backgroundColor="$bg.accent.default">2</Typography.Text>
+        </HStack>
+      </StorySection.SubSection>
+    </StorySection>
+
+    <StorySection title="VStack">
+      <StorySection.SubSection title="Default">
+        <VStack>
+          <Typography.Text>1</Typography.Text>
+          <Typography.Text>2</Typography.Text>
+        </VStack>
+      </StorySection.SubSection>
+
+      <StorySection.SubSection title="With gap (space)">
+        <VStack gap="$2">
+          <Typography.Text backgroundColor="$bg.accent.default">1</Typography.Text>
+          <Typography.Text backgroundColor="$bg.accent.default">2</Typography.Text>
+        </VStack>
+      </StorySection.SubSection>
+    </StorySection>
+  </>
+);
+
+StacksStory.storyName = 'Stacks';

package/src/components/primitives/Stacks.ts

@@ -0,0 +1,19 @@
+import { Stack, styled } from '@tamagui/core';
+import type { GetProps } from '@tamagui/core';
+
+export { Stack } from '@tamagui/core';
+export type StackProps = GetProps<typeof Stack>;
+
+export const HStack = styled(Stack, {
+  name: 'HStack',
+  flexDirection: 'row',
+});
+
+export type HStackProps = GetProps<typeof HStack>;
+
+export const VStack = styled(Stack, {
+  name: 'VStack',
+  flexDirection: 'column',
+});
+
+export type VStackProps = GetProps<typeof VStack>;

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

@@ -0,0 +1,13 @@
+import type { ComponentStory, Meta } from '@storybook/react';
+import { View } from './View';
+
+export default {
+  title: 'bumper/Primitives/View',
+  component: View,
+} satisfies Meta<unknown>;
+
+export const ViewStory: ComponentStory<typeof View> = () => (
+  <View width={50} height={500} backgroundColor="$bg.base.mid.default" />
+);
+
+ViewStory.storyName = 'View';

package/src/components/primitives/View.ts

@@ -0,0 +1,5 @@
+import type { View } from '@tamagui/core';
+import type { ComponentProps } from 'react';
+
+export { View } from '@tamagui/core';
+export type ViewProps = ComponentProps<typeof View>;