feat(Text): add variant autocompletion

Trendyol · Jul 27, 2022 · a9412cf · a9412cf
1 parent 79d61fd
commit a9412cf
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 82 deletions.
diff --git a/components/Button/Button.stories.tsx b/components/Button/Button.stories.tsx
@@ -134,6 +134,62 @@ export const Types: ButtonStory = args => (
   </>
 );
 
+export const Sizes: ButtonStory = args => (
+  <>
+    <Text p={3} variant="subtitle01Bold">
+      Button Sizes
+    </Text>
+    <Box>
+      <Button
+        {...args}
+        variant="primary"
+        size="large"
+        text="Primary Button"
+        m={3}
+      />
+      <Button
+        {...args}
+        variant="primary"
+        size="medium"
+        text="Primary Button"
+        m={3}
+      />
+      <Button
+        {...args}
+        variant="primary"
+        size="small"
+        text="Primary Button"
+        m={3}
+        mb={6}
+      />
+      <Button
+        {...args}
+        variant="primary"
+        size="large"
+        text="Primary Button"
+        filled={true}
+        m={3}
+      />
+      <Button
+        {...args}
+        variant="primary"
+        size="medium"
+        text="Primary Button"
+        filled={true}
+        m={3}
+      />
+      <Button
+        {...args}
+        variant="primary"
+        size="small"
+        text="Primary Button"
+        filled={true}
+        m={3}
+      />
+    </Box>
+  </>
+);
+
 export const ContainedButtons: ButtonStory = args => (
   <>
     <Text p={3} variant="subtitle01Bold">
@@ -180,7 +236,6 @@ export const ContainedButtons: ButtonStory = args => (
   </>
 );
 
-// Outlined Buttons
 export const OutlinedButtons: ButtonStory = args => (
   <>
     <Text p={3} variant="subtitle01Bold">
@@ -223,7 +278,6 @@ export const OutlinedButtons: ButtonStory = args => (
   </>
 );
 
-// Text Buttons
 export const TextButtons: ButtonStory = args => (
   <>
     <Text p={3} variant="subtitle01Bold">
@@ -275,7 +329,6 @@ export const TextButtons: ButtonStory = args => (
   </>
 );
 
-// Icon Buttons
 export const IconButtons: ButtonStory = args => (
   <>
     <Text p={3} variant="subtitle01Bold">
@@ -350,7 +403,6 @@ export const IconButtons: ButtonStory = args => (
   </>
 );
 
-// Icon Only Buttons
 export const IconOnlyButtons: ButtonStory = args => (
   <>
     <Text p={3} variant="subtitle01Bold">
@@ -372,60 +424,3 @@ export const IconOnlyButtons: ButtonStory = args => (
     </Box>
   </>
 );
-
-// Button Sizes
-export const ButtonSizes: ButtonStory = args => (
-  <>
-    <Text p={3} variant="subtitle01Bold">
-      Button Sizes
-    </Text>
-    <Box>
-      <Button
-        {...args}
-        variant="primary"
-        size="large"
-        text="Primary Button"
-        m={3}
-      />
-      <Button
-        {...args}
-        variant="primary"
-        size="medium"
-        text="Primary Button"
-        m={3}
-      />
-      <Button
-        {...args}
-        variant="primary"
-        size="small"
-        text="Primary Button"
-        m={3}
-        mb={6}
-      />
-      <Button
-        {...args}
-        variant="primary"
-        size="large"
-        text="Primary Button"
-        filled={true}
-        m={3}
-      />
-      <Button
-        {...args}
-        variant="primary"
-        size="medium"
-        text="Primary Button"
-        filled={true}
-        m={3}
-      />
-      <Button
-        {...args}
-        variant="primary"
-        size="small"
-        text="Primary Button"
-        filled={true}
-        m={3}
-      />
-    </Box>
-  </>
-);
diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
@@ -11,6 +11,7 @@ import type {
   ButtonTypeTypes,
   ButtonVariantTypes,
 } from './types';
+import type { TextVariantTypes } from '../Text/types';
 
 const BaseButton = styled(Pressable)`
   ${flexbox}
@@ -67,17 +68,19 @@ const Button = ({
     disabled,
   });
 
-  const textVariants: string = {
+  const textVariants = {
     large: 'subtitle02Medium',
     medium: 'subtitle03Medium',
     small: 'subtitle03Medium',
-  }[size];
+  }[size] as TextVariantTypes;
 
-  const typeColor = disabled
-    ? theme.colors.contentPassive
-    : isPressed && type !== 'text'
-    ? theme.colors.white
-    : buttonTypes[type].color;
+  const typeColor = (
+    disabled
+      ? theme.colors.contentPassive
+      : isPressed && type !== 'text'
+      ? theme.colors.white
+      : buttonTypes[type].color
+  ) as string;
 
   const textStyle = type === 'text' && !disabled ? styles.underlineText : {};
 
@@ -96,7 +99,7 @@ const Button = ({
       {...rest}>
       {icon
         ? React.createElement(icon, {
-            fill: typeColor as string,
+            fill: typeColor,
             testID: 'button-icon',
           })
         : null}

diff --git a/components/Text/Text.stories.tsx b/components/Text/Text.stories.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react-native';
 import Text from '../Text/Text';
 import theme from '../../src/theme';
+import { TextVariantTypes } from './types';
 
-const variantList = Object.keys(theme.textStyle);
+const variantList = Object.keys(theme.textStyle) as TextVariantTypes[];
 
 const TextMeta: ComponentMeta<typeof Text> = {
   title: 'Text',
@@ -15,7 +16,7 @@ const TextMeta: ComponentMeta<typeof Text> = {
     },
   },
   args: {
-    variant: variantList[0] as string,
+    variant: variantList[0] as TextVariantTypes,
   },
 };
 

diff --git a/components/Text/Text.tsx b/components/Text/Text.tsx
@@ -3,39 +3,51 @@ import { Text as T } from 'react-native';
 import styled from 'styled-components/native';
 import {
   compose,
-  color,
+  color as styledColor,
   space,
   typography,
   position,
   size,
   fontWeight,
   textStyle,
-  variant,
+  variant as styledVariant,
   fontSize,
 } from 'styled-system';
 import theme from '../../src/theme';
+import { TextVariantTypes } from './types';
 
 const StyledText = styled(T)(
   compose(
-    color,
+    styledColor,
     space,
     typography,
     position,
     size,
     fontSize,
     fontWeight,
     textStyle,
-    variant({ variants: theme.textStyle }),
+    styledVariant({ variants: theme.textStyle }),
   ),
 );
 
-function Text(props: any) {
-  return <StyledText {...props}>{props.children}</StyledText>;
+function Text({
+  variant = 'bodyText',
+  color = 'contentPrimary',
+  ...rest
+}: {
+  variant?: TextVariantTypes;
+  color?: string;
+  [key: string]: any;
+}) {
+  return (
+    <StyledText
+      //@ts-ignore
+      variant={variant}
+      color={color}
+      {...rest}>
+      {rest.children}
+    </StyledText>
+  );
 }
 
-Text.defaultProps = {
-  variant: 'bodyText',
-  color: 'contentPrimary',
-};
-
 export default Text;
diff --git a/components/Text/types.ts b/components/Text/types.ts
@@ -0,0 +1,28 @@
+export type TextVariantTypes =
+  | 'heading1'
+  | 'heading2'
+  | 'heading3'
+  | 'subtitle01Regular'
+  | 'subtitle01Medium'
+  | 'subtitle01Semibold'
+  | 'subtitle01Bold'
+  | 'subtitle02Regular'
+  | 'subtitle02Medium'
+  | 'subtitle02Semibold'
+  | 'subtitle02Bold'
+  | 'subtitle03Regular'
+  | 'subtitle03Medium'
+  | 'subtitle03Semibold'
+  | 'subtitle03Bold'
+  | 'subtitle04Regular'
+  | 'subtitle04Medium'
+  | 'subtitle04Semibold'
+  | 'subtitle04Bold'
+  | 'bodyText'
+  | 'bodyUnderline'
+  | 'bodyTextLink'
+  | 'bodyLongText'
+  | 'captionText'
+  | 'captionMedium'
+  | 'captionLongText'
+  | 'captionTextLink';