@ornikar/bumper 1.1.0

package/src/components/typography/utils/getTypeAndWeightValues.test.tsx

@@ -0,0 +1,147 @@
+import { BODY_VARIANTS, HEADING_VARIANTS, LABEL_VARIANTS } from '../../../tokens/fonts';
+import { getVariantAndWeightValues } from './getTypeAndWeightValues';
+
+describe('getVariantAndWeightValues', () => {
+  describe('when variant is a body size', () => {
+    it.each(BODY_VARIANTS.map((size) => [size, undefined, null, null, { weight: undefined, variant: size }]))(
+      'should return weight from prop and variant "%s" when weight prop is undefined and no ancestor values',
+      (variant, weight, ancestorWeight, ancestorVariant, expected) => {
+        expect(getVariantAndWeightValues(weight, variant, ancestorWeight, ancestorVariant)).toEqual(expected);
+      },
+    );
+
+    it('should return weight from prop when defined', () => {
+      expect(getVariantAndWeightValues('regular', 'body-l', null, null)).toEqual({
+        weight: 'regular',
+        variant: 'body-l',
+      });
+    });
+
+    it('should return weight from ancestor when weight prop is undefined', () => {
+      expect(getVariantAndWeightValues(undefined, 'body-m', 'regular', null)).toEqual({
+        weight: 'regular',
+        variant: 'body-m',
+      });
+    });
+
+    it('should prioritize weight prop over ancestor weight for body sizes', () => {
+      expect(getVariantAndWeightValues('bold', 'body-m', 'regular', null)).toEqual({
+        weight: 'bold',
+        variant: 'body-m',
+      });
+    });
+  });
+
+  describe('when variant is a heading size', () => {
+    it.each(HEADING_VARIANTS.map((size) => [size, undefined, null, null, { weight: 'semibold', variant: size }]))(
+      'should return weight "semibold" for heading variant "%s"',
+      (variant, weight, ancestorWeight, ancestorVariant, expected) => {
+        expect(getVariantAndWeightValues(weight, variant, ancestorWeight, ancestorVariant)).toEqual(expected);
+      },
+    );
+
+    it('should ignore weight prop for heading sizes and always return semibold', () => {
+      expect(getVariantAndWeightValues('regular', 'heading-m', null, null)).toEqual({
+        weight: 'semibold',
+        variant: 'heading-m',
+      });
+    });
+
+    it('should ignore ancestor weight for heading sizes and always return semibold', () => {
+      expect(getVariantAndWeightValues(undefined, 'heading-m', 'bold', null)).toEqual({
+        weight: 'semibold',
+        variant: 'heading-m',
+      });
+    });
+  });
+
+  describe('when variant is a label size', () => {
+    it.each(LABEL_VARIANTS.map((size) => [size, undefined, null, null, { weight: 'semibold', variant: size }]))(
+      'should return weight "semibold" for label variant "%s"',
+      (variant, weight, ancestorWeight, ancestorVariant, expected) => {
+        expect(getVariantAndWeightValues(weight, variant, ancestorWeight, ancestorVariant)).toEqual(expected);
+      },
+    );
+
+    it('should ignore weight prop for label sizes and always return semibold', () => {
+      expect(getVariantAndWeightValues('regular', 'label-m', null, null)).toEqual({
+        weight: 'semibold',
+        variant: 'label-m',
+      });
+    });
+
+    it('should ignore ancestor weight for label sizes and always return semibold', () => {
+      expect(getVariantAndWeightValues(undefined, 'label-m', 'bold', null)).toEqual({
+        weight: 'semibold',
+        variant: 'label-m',
+      });
+    });
+  });
+
+  describe('when variant comes from ancestor', () => {
+    it('should use ancestor variant when variant prop is undefined', () => {
+      expect(getVariantAndWeightValues(undefined, undefined, null, 'body-m')).toEqual({
+        weight: undefined,
+        variant: 'body-m',
+      });
+    });
+
+    it('should prioritize variant prop over ancestor type', () => {
+      expect(getVariantAndWeightValues(undefined, 'body-l', null, 'body-m')).toEqual({
+        weight: undefined,
+        variant: 'body-l',
+      });
+    });
+
+    it('should return semibold weight when ancestor variant is a heading', () => {
+      expect(getVariantAndWeightValues(undefined, undefined, null, 'heading-m')).toEqual({
+        weight: 'semibold',
+        variant: 'heading-m',
+      });
+    });
+
+    it('should return semibold weight when ancestor variant is a label', () => {
+      expect(getVariantAndWeightValues(undefined, undefined, null, 'label-m')).toEqual({
+        weight: 'semibold',
+        variant: 'label-m',
+      });
+    });
+
+    it('should use ancestor weight when ancestor variant is a body size', () => {
+      expect(getVariantAndWeightValues(undefined, undefined, 'bold', 'body-m')).toEqual({
+        weight: 'bold',
+        variant: 'body-m',
+      });
+    });
+  });
+
+  describe('when no variant is provided', () => {
+    it('should return weight from prop and undefined variant when no ancestor values', () => {
+      expect(getVariantAndWeightValues('regular', undefined, null, null)).toEqual({
+        weight: 'regular',
+        variant: undefined,
+      });
+    });
+
+    it('should return weight from prop and undefined variant when ancestor variant is null', () => {
+      expect(getVariantAndWeightValues('bold', undefined, null, null)).toEqual({
+        weight: 'bold',
+        variant: undefined,
+      });
+    });
+
+    it('should return undefined weight when weight prop is undefined and no variant', () => {
+      expect(getVariantAndWeightValues(undefined, undefined, null, null)).toEqual({
+        weight: undefined,
+        variant: undefined,
+      });
+    });
+
+    it('should ignore ancestor weight when no variant is provided', () => {
+      expect(getVariantAndWeightValues(undefined, undefined, 'bold', null)).toEqual({
+        weight: undefined,
+        variant: undefined,
+      });
+    });
+  });
+});

package/src/components/typography/utils/getTypeAndWeightValues.tsx

@@ -0,0 +1,32 @@
+import type { FontVariants } from '../../../tokens/fonts';
+import { BODY_VARIANTS } from '../../../tokens/fonts';
+import type {
+  InternalTypographyProps,
+  TypographyTextProps,
+  TypographyVariantContextValue,
+  TypographyWeightContextValue,
+} from '../Typograhy';
+
+interface VariantAndWeightValues {
+  weight: InternalTypographyProps['weight'] | undefined;
+  variant: FontVariants | undefined;
+}
+
+export function getVariantAndWeightValues(
+  weightProp: TypographyTextProps['weight'],
+  variantProp: TypographyTextProps['variant'],
+  typographyWeightAncestorValue: TypographyWeightContextValue,
+  typographyVariantAncestorValue: TypographyVariantContextValue,
+): VariantAndWeightValues {
+  const computedVariant = variantProp || typographyVariantAncestorValue || undefined;
+
+  if (computedVariant) {
+    if ((BODY_VARIANTS as readonly string[]).includes(computedVariant)) {
+      const computedWeight = weightProp || typographyWeightAncestorValue || undefined;
+      return { weight: computedWeight, variant: computedVariant };
+    }
+    return { weight: 'semibold', variant: computedVariant };
+  }
+
+  return { weight: weightProp, variant: undefined };
+}

package/src/core/BumperDecorator.tsx

@@ -0,0 +1,11 @@
+import { makeDecorator } from '@storybook/addons';
+import type { ReactNode } from 'react';
+import { BumperProvider } from './BumperProvider';
+
+export const BumperDecorator = makeDecorator({
+  name: 'BumperDecorator',
+  parameterName: 'bumper',
+  wrapper: (storyFn, context) => {
+    return <BumperProvider>{storyFn(context) as ReactNode}</BumperProvider>;
+  },
+});

package/src/core/BumperProvider.tsx

@@ -0,0 +1,15 @@
+import { TamaguiProvider } from '@tamagui/core';
+import type { ReactNode } from 'react';
+import { config } from '../tamagui.config';
+
+export interface BumperProviderProps {
+  children: ReactNode;
+}
+
+export function BumperProvider({ children }: BumperProviderProps): ReactNode {
+  return (
+    <TamaguiProvider config={config} defaultTheme="light">
+      {children}
+    </TamaguiProvider>
+  );
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+export { BumperDecorator } from './core/BumperDecorator';
+export { BumperProvider } from './core/BumperProvider';
+
+// Breakpoints
+export { useBreakpointValue } from './components/breakpoints/hooks/useBreakpointValue';
+export { useCurrentBreakpointName } from './components/breakpoints/hooks/useCurrentBreakpointName';
+export { useWindowSize } from './components/breakpoints/hooks/useWindowSize';
+export type { SwitchBreakpointsProps } from './components/breakpoints/SwitchBreakpoins';
+export { SwitchBreakpoints } from './components/breakpoints/SwitchBreakpoins';
+export type { ValueForBreakpoint } from './components/breakpoints/utils/breakpointsUtils';
+export { getValueForBreakpoint } from './components/breakpoints/utils/breakpointsUtils';

package/src/story-components/StorySection.tsx

@@ -0,0 +1,70 @@
+import { styled } from '@tamagui/core';
+import type { ReactNode } from 'react';
+import type { Except } from 'type-fest';
+import type { VStackProps } from '../components/primitives/Stacks';
+import { VStack } from '../components/primitives/Stacks';
+import { StoryTitle } from './StoryTitle';
+
+const InternalStorySection = styled(VStack, {
+  paddingVertical: '$4',
+  paddingHorizontal: '$4',
+  variants: {
+    withBackground: {
+      true: {
+        backgroundColor: '$content.base.hi',
+      },
+    },
+  } as const,
+});
+
+export type StorySectionProps = Except<VStackProps, 'marginBottom'> & {
+  title: ReactNode;
+  children: ReactNode;
+  level?: 1 | 2;
+  /** @private */
+  internalIsDemoSection?: boolean;
+  withBackground?: boolean;
+};
+
+export function StorySection({
+  title,
+  children,
+  level = 1,
+  internalIsDemoSection,
+  withBackground,
+  ...props
+}: StorySectionProps): ReactNode {
+  if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
+  return (
+    <InternalStorySection {...props}>
+      <StoryTitle level={(level + 1) as 2 | 3}>{title}</StoryTitle>
+      {children}
+    </InternalStorySection>
+  );
+}
+
+export type DemoSectionProps = Except<StorySectionProps, 'paddingBottom' | 'title' | 'internalIsDemoSection'> & {
+  children: ReactNode;
+};
+
+StorySection.Demo = function DemoSection({ children, ...props }: DemoSectionProps): ReactNode {
+  return (
+    <StorySection internalIsDemoSection title="Demo" paddingBottom="$12" {...props}>
+      {children}
+    </StorySection>
+  );
+};
+
+StorySection.SubSection = function SubSection({
+  title,
+  children,
+  withBackground,
+  ...props
+}: StorySectionProps): ReactNode {
+  return (
+    <InternalStorySection withBackground={withBackground} {...props}>
+      <StoryTitle level={3}>{title}</StoryTitle>
+      {children}
+    </InternalStorySection>
+  );
+};

package/src/story-components/StoryTitle.tsx

@@ -0,0 +1,16 @@
+import { styled } from '@tamagui/core';
+import { Typography } from '../components/typography/Typograhy';
+
+export const StoryTitle = styled(Typography.Text, {
+  variants: {
+    level: {
+      1: { variant: 'heading-xl', marginBottom: '$8' },
+      2: { variant: 'heading-l', marginBottom: '$4' },
+      3: { variant: 'heading-m', marginBottom: '$4' },
+    },
+  } as const,
+
+  defaultVariants: {
+    level: 1,
+  },
+} as const);

package/src/tamagui.config.ts

@@ -0,0 +1,43 @@
+import { createTamagui, createTokens } from '@tamagui/core';
+import { light } from './themes/light';
+import { BreakpointNameEnum, breakpoints } from './themes/utils/breakpoints';
+import { fonts } from './tokens/fonts';
+import { sizeTokens } from './tokens/size';
+import { spaceTokens } from './tokens/space';
+
+const tokens = createTokens({
+  color: {},
+  space: spaceTokens,
+  size: sizeTokens,
+});
+
+export const config = createTamagui({
+  tokens,
+  fonts: {
+    GTStandard: fonts,
+  },
+  themes: {
+    light,
+  },
+  media: {
+    [BreakpointNameEnum.BASE]: { minWidth: breakpoints[BreakpointNameEnum.BASE] },
+    [BreakpointNameEnum.SMALL]: { minWidth: breakpoints[BreakpointNameEnum.SMALL] },
+    [BreakpointNameEnum.MEDIUM]: { minWidth: breakpoints[BreakpointNameEnum.MEDIUM] },
+    [BreakpointNameEnum.LARGE]: { minWidth: breakpoints[BreakpointNameEnum.LARGE] },
+    [BreakpointNameEnum.WIDE]: { minWidth: breakpoints[BreakpointNameEnum.WIDE] },
+  },
+  settings: {
+    allowedStyleValues: 'strict',
+    disableSSR: true,
+    styleCompat: 'react-native',
+    autocompleteSpecificTokens: true,
+    debug: false,
+  },
+});
+
+type Conf = typeof config;
+
+// make imports typed
+declare module '@tamagui/core' {
+  interface TamaguiCustomConfig extends Conf {}
+}