@ornikar/bumper 1.1.0

package/src/components/typography/Typograhy.tsx

@@ -0,0 +1,130 @@
+import type { GetProps, GetThemeValueForKey } from '@tamagui/core';
+import { Text, styled } from '@tamagui/core';
+import { createContext, useContext } from 'react';
+import { type Except } from 'type-fest';
+import type { BodyFontVariants, FontVariants, HeadingFontVariants, LabelFontVariants } from '../../tokens/fonts';
+import { getVariantAndWeightValues } from './utils/getTypeAndWeightValues';
+
+export type TypographyVariantContextValue = FontVariants | null;
+export type TypographyWeightContextValue = 'regular' | 'bold' | null;
+export type TypograhyColorContextValue = TypograhyColorProps | null;
+
+const TypographyVariantContext = createContext<TypographyVariantContextValue>(null);
+const TypographyWeightContext = createContext<TypographyWeightContextValue>(null);
+const TypograhyColorContext = createContext<TypograhyColorContextValue>(null);
+
+const InternalTypography = styled(Text, {
+  fontFamily: '$GTStandard',
+  color: '$content.base.hi',
+  '$platform-web': {
+    WebkitFontSmoothing: 'antialiased',
+  },
+  variants: {
+    variant: (variant: FontVariants | undefined) => {
+      if (!variant) return {};
+
+      return {
+        fontSize: `$${variant}`,
+        lineHeight: `$${variant}`,
+        letterSpacing: `$${variant}`,
+      };
+    },
+    weight: {
+      regular: {
+        fontWeight: '$regular',
+      },
+      semibold: {
+        fontWeight: '$semibold',
+      },
+      bold: {
+        fontWeight: '$bold',
+      },
+    },
+  } as const,
+  defaultVariants: {
+    variant: 'body-m',
+    weight: 'regular',
+  },
+});
+
+export type InternalTypographyProps = GetProps<typeof InternalTypography>;
+
+// Create a type for color props that matches strings containing '$content.'
+type ContainsOneString<T extends string> = `${string}${T}${string}`;
+type TypograhyColorProps = ContainsOneString<'$content.'>;
+
+// Remove font-related style props from InternalTypography Props
+type TypographyExcludedFontStyleProps =
+  | 'fontFamily'
+  | 'fontSize'
+  | 'lineHeight'
+  | 'fontStyle'
+  | 'fontVariant'
+  | 'fontWeight';
+type TypographyPropsWithoutFontStyleProps = Except<
+  InternalTypographyProps,
+  TypographyExcludedFontStyleProps | 'color'
+> & {
+  color?: TypograhyColorProps;
+};
+
+export interface BodyProps extends TypographyPropsWithoutFontStyleProps {
+  variant?: BodyFontVariants;
+  weight?: Exclude<InternalTypographyProps['weight'], 'semibold'>;
+}
+export interface HeadingLabelProps extends TypographyPropsWithoutFontStyleProps {
+  variant: HeadingFontVariants | LabelFontVariants;
+  weight?: never;
+}
+export type TypographyTextProps = BodyProps | HeadingLabelProps;
+
+const TypographyText = InternalTypography.styleable<TypographyTextProps>((props, ref) => {
+  const typographyVariantAncestorValue = useContext(TypographyVariantContext);
+  const typographyWeightAncestorValue = useContext(TypographyWeightContext);
+  const typographyColorAncestorValue = useContext(TypograhyColorContext);
+
+  const { variant, weight } = getVariantAndWeightValues(
+    props.weight,
+    props.variant,
+    typographyWeightAncestorValue,
+    typographyVariantAncestorValue,
+  );
+  const color = props.color || typographyColorAncestorValue || undefined;
+
+  let content = (
+    <InternalTypography
+      ref={ref}
+      {...props}
+      color={color as GetThemeValueForKey<'color'>}
+      weight={weight}
+      variant={variant}
+    />
+  );
+
+  content = props.variant ? (
+    // If a variant is provided, we set it in the context for children to be able to inherit variant value
+    <TypographyVariantContext.Provider value={props.variant}>{content}</TypographyVariantContext.Provider>
+  ) : (
+    content
+  );
+
+  content = props.weight ? (
+    // If a weight is provided, we set it in the context for children to be able to inherit weight value
+    <TypographyWeightContext.Provider value={props.weight}>{content}</TypographyWeightContext.Provider>
+  ) : (
+    content
+  );
+
+  content = props.color ? (
+    // If a color is provided, we set it in the context for children to be able to inherit color value
+    <TypograhyColorContext.Provider value={props.color}>{content}</TypograhyColorContext.Provider>
+  ) : (
+    content
+  );
+
+  return content;
+});
+
+export const Typography = {
+  Text: TypographyText,
+};

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

@@ -0,0 +1,144 @@
+import type { ComponentStory, Meta } from '@storybook/react';
+import type { FC } from 'react';
+import { StorySection } from '../../story-components/StorySection';
+import type { BodyFontVariants, FontVariants, HeadingFontVariants, LabelFontVariants } from '../../tokens/fonts';
+import { VStack } from '../primitives/Stacks';
+import { View } from '../primitives/View';
+import type { TypographyTextProps } from './Typograhy';
+import { Typography } from './Typograhy';
+
+export default {
+  title: 'bumper/Typography/Typography',
+  component: Typography.Text,
+} satisfies Meta<typeof Typography.Text>;
+
+interface TypographyTypeWithComponent<T extends FontVariants> {
+  component: FC<TypographyTextProps>;
+  variant: T;
+  weights: TypographyTextProps['weight'][];
+}
+
+const headingVariants: TypographyTypeWithComponent<HeadingFontVariants>[] = [
+  { component: Typography.Text, variant: 'heading-2xl', weights: [undefined] },
+  { component: Typography.Text, variant: 'heading-xl', weights: [undefined] },
+  { component: Typography.Text, variant: 'heading-l', weights: [undefined] },
+  { component: Typography.Text, variant: 'heading-m', weights: [undefined] },
+  { component: Typography.Text, variant: 'heading-s', weights: [undefined] },
+  { component: Typography.Text, variant: 'heading-xs', weights: [undefined] },
+];
+
+const bodyVariants: TypographyTypeWithComponent<BodyFontVariants>[] = [
+  { component: Typography.Text, variant: 'body-xl', weights: ['bold', 'regular'] },
+  { component: Typography.Text, variant: 'body-l', weights: ['bold', 'regular'] },
+  { component: Typography.Text, variant: 'body-m', weights: ['bold', 'regular'] },
+  { component: Typography.Text, variant: 'body-s', weights: ['bold', 'regular'] },
+  { component: Typography.Text, variant: 'body-xs', weights: ['bold', 'regular'] },
+];
+
+const labelVariants: TypographyTypeWithComponent<LabelFontVariants>[] = [
+  { component: Typography.Text, variant: 'label-xl', weights: [undefined] },
+  { component: Typography.Text, variant: 'label-l', weights: [undefined] },
+  { component: Typography.Text, variant: 'label-m', weights: [undefined] },
+  { component: Typography.Text, variant: 'label-s', weights: [undefined] },
+];
+
+interface TypographyTypesProps {
+  types: TypographyTypeWithComponent<FontVariants>[];
+}
+
+function TypographyVariants({ types }: TypographyTypesProps) {
+  return (
+    <>
+      {types.map((type) => {
+        return type.weights.map((weight) => (
+          <VStack key={`${type.variant}-${weight}`} marginBottom="$size.20">
+            <Typography.Text variant="heading-s">{`${type.variant.split('-').join(' ')} - ${
+              weight || 'semibold'
+            }`}</Typography.Text>
+            <View
+              paddingVertical="$space.4"
+              paddingHorizontal="$space.8"
+              borderRadius="$space.4"
+              backgroundColor="$bg.base.mid.default"
+              marginTop="$space.4"
+            >
+              {/* Don't know why it's expecting BodyFontVariants type */}
+              <Typography.Text variant={type.variant as BodyFontVariants} weight={weight}>
+                The quick brown fox jumps over the lazy dog
+              </Typography.Text>
+            </View>
+          </VStack>
+        ));
+      })}
+    </>
+  );
+}
+
+export const TypographyStory: ComponentStory<typeof Typography.Text> = (args) => (
+  <>
+    <StorySection.Demo>
+      <Typography.Text {...args} />
+    </StorySection.Demo>
+    <StorySection title="Inheritance">
+      <StorySection.SubSection title="Type inheritance">
+        <Typography.Text variant="body-l">
+          Type is body-l{' '}
+          <Typography.Text variant="heading-l">
+            type is heading-l <Typography.Text color="$content.accent">type is undefined</Typography.Text>
+          </Typography.Text>{' '}
+          <Typography.Text color="$content.danger">
+            type is undefined <Typography.Text variant="body-s">Type is body-s</Typography.Text>
+          </Typography.Text>
+          .
+        </Typography.Text>
+      </StorySection.SubSection>
+      <StorySection.SubSection title="Weight inheritance">
+        <Typography.Text>
+          weight is undefined{' '}
+          <Typography.Text weight="bold">
+            weight is bold{' '}
+            <Typography.Text variant="heading-m">
+              weight is undefined and type is heading-m{' '}
+              <Typography.Text variant="body-m" weight="regular">
+                weight is regular <Typography.Text weight="bold">weight is bold</Typography.Text>
+              </Typography.Text>
+            </Typography.Text>
+          </Typography.Text>{' '}
+        </Typography.Text>
+      </StorySection.SubSection>
+      <StorySection.SubSection title="Color inheritance">
+        <Typography.Text>
+          color is undefined{' '}
+          <Typography.Text color="$content.accent">
+            color is $content.accent{' '}
+            <Typography.Text>
+              color is undefined{' '}
+              <Typography.Text color="$content.danger">
+                color is content.danger{' '}
+                <Typography.Text color="$content.base.hi">color is content.base.hi</Typography.Text>
+              </Typography.Text>
+            </Typography.Text>
+          </Typography.Text>{' '}
+        </Typography.Text>
+      </StorySection.SubSection>
+      <StorySection title="Heading">
+        <TypographyVariants types={headingVariants} />
+      </StorySection>
+      <StorySection title="Body">
+        <TypographyVariants types={bodyVariants} />
+      </StorySection>
+      <StorySection title="Label">
+        <TypographyVariants types={labelVariants} />
+      </StorySection>
+    </StorySection>
+  </>
+);
+
+TypographyStory.storyName = 'Typography';
+
+TypographyStory.args = {
+  children: 'Hello World',
+  color: '$content.base.hi',
+  weight: 'regular',
+  variant: 'body-m',
+};