Add codemod for Text component interface

.changeset/early-tables-taste.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-codemod": minor
+---
+
+Add codemod to transform interface of `Text` component

packages/bezier-codemod/README.md

@@ -258,7 +258,7 @@ export const Wrapper = styled(Button)``;
 
 ### Remove Alpha prefix from `AlphaStack` and add Legacy prefix to `Stack`
 
-`remove-alpha-from-alpha-stack`
+`v2-remove-alpha-from-alpha-stack`
 
 Deprecates current `Stack`, `HStack`, `VStack`, `StackItem`, `Spacer` components and supports `AlphaStack` instead, removing "Alpha" prefix.
 
@@ -317,3 +317,47 @@ function Bar() {
   );
 }
 ```
+
+### Change interface of `Text`
+
+`v2-text-component-interface`
+
+Replace `Typography` enum with string literal and change properties related to margin to be shorthand.
+
+For example:
+
+```tsx
+import { Text, styled, Typography } from "@channel.io/bezier-react";
+
+function Foo() {
+  return (
+    <Text typo={Typography.Size13} marginLeft={4}>
+      title
+    </Text>
+  );
+}
+
+const Title = styled(Text).attrs({
+  typo: Typography.Size13,
+  marginLeft: 4,
+})``;
+```
+
+Transforms into:
+
+```tsx
+import { Text, styled } from "@channel.io/bezier-react";
+
+function Foo() {
+  return (
+    <Text typo="13" ml={4}>
+      title
+    </Text>
+  );
+}
+
+const Title = styled(Text).attrs({
+  typo: "13",
+  ml: 4,
+})``;
+```

packages/bezier-codemod/src/App.tsx

@@ -30,6 +30,7 @@ import foundationToCssVariableTransition from './transforms/v2-foundation-to-css
 import styledToStyledComponents from './transforms/v2-import-styled-from-styled-components/transform.js'
 import inputInterpolationToCssVariable from './transforms/v2-input-interpolation-to-css-variable/transform.js'
 import removeAlphaFromAlphaStack from './transforms/v2-remove-alpha-from-alpha-stack/transform.js'
+import textComponentInterface from './transforms/v2-text-component-interface/transform.js'
 import typographyInterpolationToCssVariable from './transforms/v2-typography-interpolation-to-css-variable/transform.js'
 import zIndexInterpolationToCssVariable from './transforms/v2-z-index-interpolation-to-css-variable/transform.js'
 
@@ -55,6 +56,7 @@ enum Option {
   V2StyledToStyledComponents = 'v2-styled-to-styled-components',
   V2RemoveAlphaFromAlphaStack = 'v2-remove-alpha-from-alpha-stack',
   V2ZIndexInterpolationToCssVariable = 'v2-z-index-interpolation-to-css-variable',
+  V2TextComponentInterface = 'v2-text-component-interface',
   Exit = 'Exit',
 }
 
@@ -75,6 +77,7 @@ const transformMap = {
   [Option.V2StyledToStyledComponents]: styledToStyledComponents,
   [Option.V2RemoveAlphaFromAlphaStack]: removeAlphaFromAlphaStack,
   [Option.V2ZIndexInterpolationToCssVariable]: zIndexInterpolationToCssVariable,
+  [Option.V2TextComponentInterface]: textComponentInterface,
 }
 
 const options = (Object.keys(transformMap) as Option[]).map((transformName) => ({

packages/bezier-codemod/src/shared/enum.ts

@@ -11,7 +11,7 @@ type Member = string
 type Value = string
 export type EnumTransformMap = Record<Name, Record<Member, Value>>
 
-export const transformEnumMemberToStringLiteral = (sourceFile: SourceFile, enumTransforms: EnumTransformMap) => {
+export const transformEnumToStringLiteralInBezier = (sourceFile: SourceFile, enumTransforms: EnumTransformMap) => {
   const transformedEnumNames: string[] = []
 
   Object

packages/bezier-codemod/src/transforms/enum-member-to-string-literal/transform.ts

@@ -2,7 +2,7 @@ import { type SourceFile } from 'ts-morph'
 
 import {
   type EnumTransformMap,
-  transformEnumMemberToStringLiteral,
+  transformEnumToStringLiteralInBezier,
 } from '../../shared/enum.js'
 
 const ENUM_TRANSFORM_MAP: EnumTransformMap = {
@@ -18,7 +18,7 @@ const ENUM_TRANSFORM_MAP: EnumTransformMap = {
 }
 
 function enumMemberToStringLiteral(sourceFile: SourceFile): true | void {
-  return transformEnumMemberToStringLiteral(sourceFile, ENUM_TRANSFORM_MAP)
+  return transformEnumToStringLiteralInBezier(sourceFile, ENUM_TRANSFORM_MAP)
 }
 
 export default enumMemberToStringLiteral

packages/bezier-codemod/src/transforms/v2-text-component-interface/fixtures/text-component-attrs.input.tsx

@@ -0,0 +1,12 @@
+import { Text, Typography, styled } from '@channel.io/bezier-react'
+
+export const Title = styled(Text).attrs({
+  typo: Typography.Size11,
+  marginAll: 1,
+  marginTop: 2,
+  marginRight: 3,
+  marginBottom: 4,
+  marginLeft: 5,
+  marginHorizontal: 6,
+  marginVertical: 7,
+})``

packages/bezier-codemod/src/transforms/v2-text-component-interface/fixtures/text-component-attrs.output.tsx

@@ -0,0 +1,12 @@
+import { Text, styled } from '@channel.io/bezier-react'
+
+export const Title = styled(Text).attrs({
+  typo: "11",
+  m: 1,
+  mt: 2,
+  mr: 3,
+  mb: 4,
+  ml: 5,
+  mx: 6,
+  my: 7,
+})``

packages/bezier-codemod/src/transforms/v2-text-component-interface/fixtures/text-component-props.input.tsx

@@ -0,0 +1,18 @@
+import { Text, Typography } from '@channel.io/bezier-react'
+
+export function Component () {
+  return (
+    <Text 
+      typo={Typography.Size14}
+      marginAll={1}
+      marginTop={3}
+      marginRight={3}
+      marginBottom={3}
+      marginLeft={2}
+      marginHorizontal={3}
+      marginVertical={3}
+    >
+      text
+    </Text>
+  )
+}

packages/bezier-codemod/src/transforms/v2-text-component-interface/fixtures/text-component-props.output.tsx

@@ -0,0 +1,18 @@
+import { Text } from '@channel.io/bezier-react'
+
+export function Component () {
+  return (
+    <Text 
+      typo="14"
+      m={1}
+      mt={3}
+      mr={3}
+      mb={3}
+      ml={2}
+      mx={3}
+      my={3}
+    >
+      text
+    </Text>
+  )
+}

packages/bezier-codemod/src/transforms/v2-text-component-interface/fixtures/text-component-with-interpolation.input.tsx

@@ -0,0 +1,16 @@
+import { Text, Typography, styled } from '@channel.io/bezier-react'
+
+export const Title = styled(Text).attrs({
+  typo: Typography.Size11,
+  marginAll: 1,
+  marginTop: 2,
+  marginRight: 3,
+  marginBottom: 4,
+  marginLeft: 5,
+  marginHorizontal: 6,
+  marginVertical: 7,
+})``
+
+export const Subtitle = styled(Text)`
+  ${Typography.Size11};
+`

packages/bezier-codemod/src/transforms/v2-text-component-interface/fixtures/text-component-with-interpolation.output.tsx

@@ -0,0 +1,16 @@
+import { Text, Typography, styled } from '@channel.io/bezier-react'
+
+export const Title = styled(Text).attrs({
+  typo: "11",
+  m: 1,
+  mt: 2,
+  mr: 3,
+  mb: 4,
+  ml: 5,
+  mx: 6,
+  my: 7,
+})``
+
+export const Subtitle = styled(Text)`
+  ${Typography.Size11};
+`

packages/bezier-codemod/src/transforms/v2-text-component-interface/transform.test.ts

@@ -0,0 +1,17 @@
+import { testTransformFunction } from '../../utils/test.js'
+
+import textTransform from './transform.js'
+
+describe('Text component transform', () => {
+  it('should transform typography enum to string literal and margin properties to be shorthand', () => {
+    testTransformFunction(__dirname, 'text-component-props', textTransform)
+  })
+
+  it('should transform properties in attrs object of styled component', () => {
+    testTransformFunction(__dirname, 'text-component-attrs', textTransform)
+  })
+
+  it('should transform properties only in attrs object of styled component', () => {
+    testTransformFunction(__dirname, 'text-component-with-interpolation', textTransform)
+  })
+})

packages/bezier-codemod/src/transforms/v2-text-component-interface/transform.ts

@@ -0,0 +1,76 @@
+import { type SourceFile } from 'ts-morph'
+
+import {
+  type ComponentTransformMap,
+  changeAttrProperty,
+  changeComponentProp,
+} from '../../utils/component.js'
+
+const STYLED_ATTRS_TRANSFORM_MAP: ComponentTransformMap = {
+  Text: {
+    keyMapper: {
+      marginAll: 'm',
+      marginTop: 'mt',
+      marginRight: 'mr',
+      marginBottom: 'mb',
+      marginLeft: 'ml',
+      marginHorizontal: 'mx',
+      marginVertical: 'my',
+    },
+    valueMapper: {
+      'Typography.Size11': '"11"',
+      'Typography.Size12': '"12"',
+      'Typography.Size13': '"13"',
+      'Typography.Size14': '"14"',
+      'Typography.Size15': '"15"',
+      'Typography.Size16': '"16"',
+      'Typography.Size17': '"17"',
+      'Typography.Size18': '"18"',
+      'Typography.Size22': '"22"',
+      'Typography.Size24': '"24"',
+      'Typography.Size30': '"30"',
+      'Typography.Size36': '"36"',
+    },
+  },
+}
+
+const JSX_PROP_TRANSFORM_MAP: ComponentTransformMap = {
+  Text: {
+    keyMapper: {
+      marginAll: 'm',
+      marginTop: 'mt',
+      marginRight: 'mr',
+      marginBottom: 'mb',
+      marginLeft: 'ml',
+      marginHorizontal: 'mx',
+      marginVertical: 'my',
+    },
+    valueMapper: {
+      '{Typography.Size11}': '"11"',
+      '{Typography.Size12}': '"12"',
+      '{Typography.Size13}': '"13"',
+      '{Typography.Size14}': '"14"',
+      '{Typography.Size15}': '"15"',
+      '{Typography.Size16}': '"16"',
+      '{Typography.Size17}': '"17"',
+      '{Typography.Size18}': '"18"',
+      '{Typography.Size22}': '"22"',
+      '{Typography.Size24}': '"24"',
+      '{Typography.Size30}': '"30"',
+      '{Typography.Size36}': '"36"',
+    },
+  },
+}
+
+const transformTextComponentProps = (sourceFile: SourceFile) => {
+  const oldSourceFileText = sourceFile.getText()
+
+  changeComponentProp(sourceFile, JSX_PROP_TRANSFORM_MAP)
+  changeAttrProperty(sourceFile, STYLED_ATTRS_TRANSFORM_MAP)
+
+  sourceFile.fixUnusedIdentifiers()
+
+  return oldSourceFileText !== sourceFile.getText()
+}
+
+export default transformTextComponentProps

packages/bezier-codemod/src/transforms/v2-z-index-interpolation-to-css-variable/transform.ts

@@ -1,11 +1,11 @@
 /* eslint-disable no-template-curly-in-string */
 import { type SourceFile } from 'ts-morph'
 
-import { transformEnumMemberToStringLiteral } from '../../shared/enum.js'
+import { transformEnumToStringLiteralInBezier } from '../../shared/enum.js'
 import { interpolationTransform } from '../../shared/interpolation.js'
 import { removeUnusedNamedImport } from '../../utils/import.js'
 
-const cssVariableByInterpolation = {
+const CSS_VARIABLE_TRANSFORM_MAP = {
   'ZIndex.Hide': 'var(--z-index-hidden);',
   'ZIndex.Auto': 'var(--z-index-auto);',
   'ZIndex.Base': 'var(--z-index-base);',
@@ -17,22 +17,24 @@ const cssVariableByInterpolation = {
   'ZIndex.Important': 'var(--z-index-important);',
 }
 
+const ENUM_TRANSFORM_MAP = {
+  ZIndex: {
+    Hide: 'var(--z-index-hidden)',
+    Base: 'var(--z-index-base)',
+    Float: 'var(--z-index-float)',
+    Overlay: 'var(--z-index-overlay)',
+    Modal: 'var(--z-index-modal)',
+    Toast: 'var(--z-index-toast)',
+    Tooltip: 'var(--z-index-tooltip)',
+    Important: 'var(--z-index-important)',
+  },
+}
+
 const replaceZIndexInterpolation = (sourceFile: SourceFile) => {
   const oldSourceFileText = sourceFile.getText()
 
-  interpolationTransform(sourceFile, cssVariableByInterpolation)
-  transformEnumMemberToStringLiteral(sourceFile, {
-    ZIndex: {
-      Hide: 'var(--z-index-hidden)',
-      Base: 'var(--z-index-base)',
-      Float: 'var(--z-index-float)',
-      Overlay: 'var(--z-index-overlay)',
-      Modal: 'var(--z-index-modal)',
-      Toast: 'var(--z-index-toast)',
-      Tooltip: 'var(--z-index-tooltip)',
-      Important: 'var(--z-index-important)',
-    },
-  })
+  interpolationTransform(sourceFile, CSS_VARIABLE_TRANSFORM_MAP)
+  transformEnumToStringLiteralInBezier(sourceFile, ENUM_TRANSFORM_MAP)
 
   const isChanged = sourceFile.getText() !== oldSourceFileText
   if (isChanged) {