@channel.io/bezier-codemod - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0-alpha.0

dist/App.js

@@ -6,2 +6,8 @@ import React, { useCallback, useEffect, useState, } from 'react';
 import enumMemberToStringLiteral from './transforms/enum-member-to-string-literal.js';
+import foundationToCssVariableBorder from './transforms/foundation-to-css-variable-border.js';
+import foundationToCssVariableElevation from './transforms/foundation-to-css-variable-elevation.js';
+import foundationToCssVariableRounding from './transforms/foundation-to-css-variable-rounding.js';
+import foundationToCssVariableTheme from './transforms/foundation-to-css-variable-theme.js';
+import foundationToCssVariableTransition from './transforms/foundation-to-css-variable-transition.js';
+import foundationToCssVariable from './transforms/foundation-to-css-variable.js';
 import iconNameToBezierIcon from './transforms/icon-name-to-bezier-icon.js';
@@ -21,2 +27,8 @@ import iconsToBezierIcons from './transforms/icons-to-bezier-icons.js';
     Option["EnumMemberToStringLiteral"] = "enum-member-to-string-literal";
+    Option["FoundationToCssVariableTheme"] = "foundation-to-css-variable-theme";
+    Option["FoundationToCssVariableBorder"] = "foundation-to-css-variable-border";
+    Option["FoundationToCssVariableElevation"] = "foundation-to-css-variable-elevation";
+    Option["FoundationToCssVariableRounding"] = "foundation-to-css-variable-rounding";
+    Option["FoundationToCssVariableTransition"] = "foundation-to-css-variable-transition";
+    Option["FoundationToCssVariable"] = "foundation-to-css-variable";
     Option["Exit"] = "Exit";
@@ -28,2 +40,8 @@ })(Option || (Option = {}));
     [Option.EnumMemberToStringLiteral]: enumMemberToStringLiteral,
+    [Option.FoundationToCssVariableTheme]: foundationToCssVariableTheme,
+    [Option.FoundationToCssVariableBorder]: foundationToCssVariableBorder,
+    [Option.FoundationToCssVariableElevation]: foundationToCssVariableElevation,
+    [Option.FoundationToCssVariableRounding]: foundationToCssVariableRounding,
+    [Option.FoundationToCssVariableTransition]: foundationToCssVariableTransition,
+    [Option.FoundationToCssVariable]: foundationToCssVariable,
 };
@@ -30,0 +48,0 @@ const options = Object.keys(transformMap).map((transformName) => ({

package.json

 {
 	"name": "@channel.io/bezier-codemod",
-	"version": "0.4.0",
+	"version": "0.5.0-alpha.0",
 	"description": "Codemod transformations to help upgrade app using Bezier design system.",
@@ -22,4 +22,4 @@ "repository": {
 		"typecheck": "tsc --noEmit",
-		"test": "jest --onlyChanged",
-		"clean": "rm -rf dist node_modules .turbo .eslintcache"
+		"test": "jest",
+		"clean": "rm -rf dist node_modules .turbo .eslintcache .jestcache"
 	},
@@ -37,8 +37,5 @@ "files": [
 	"devDependencies": {
-		"@types/jest": "^29.5.4",
 		"@types/node": "^20.6.0",
 		"@types/react": "^18.2.21",
 		"eslint-config-bezier": "workspace:*",
-		"jest": "^29.6.4",
-		"ts-jest": "^29.1.1",
 		"tsconfig": "workspace:*"
@@ -45,0 +42,0 @@ },

README.md

@@ -24,6 +24,13 @@ # Bezier Codemod
 ```tsx
-import React from 'react'
-import { AllIcon, Button, CheckIcon as CheckIconSource, Icon, type IconName, IconSize } from '@channel.io/bezier-react'
+import React from "react";
+import {
+  AllIcon,
+  Button,
+  CheckIcon as CheckIconSource,
+  Icon,
+  type IconName,
+  IconSize,
+} from "@channel.io/bezier-react";
 
-import Foo from './foo'
+import Foo from "./foo";
 ```
@@ -34,7 +41,11 @@
 ```tsx
-import React from 'react'
-import { AllIcon, CheckIcon as CheckIconSource, type IconName } from '@channel.io/bezier-icons'
-import { Button, Icon, IconSize } from '@channel.io/bezier-react'
+import React from "react";
+import {
+  AllIcon,
+  CheckIcon as CheckIconSource,
+  type IconName,
+} from "@channel.io/bezier-icons";
+import { Button, Icon, IconSize } from "@channel.io/bezier-react";
 
-import Foo from './foo'
+import Foo from "./foo";
 ```
@@ -51,7 +62,11 @@
 ```tsx
-import { ProgressBar, ProgressBarSize, ProgressBarVariant } from '@channel.io/bezier-react'
+import {
+  ProgressBar,
+  ProgressBarSize,
+  ProgressBarVariant,
+} from "@channel.io/bezier-react";
 
 export default () => (
   <ProgressBar
-    width='100%'
+    width="100%"
     size={ProgressBarSize.M}
@@ -61,3 +76,3 @@ variant={ProgressBarVariant.GreenAlt}
   />
-)
+);
 ```
@@ -68,12 +83,53 @@
 ```tsx
-import { ProgressBar } from '@channel.io/bezier-react'
+import { ProgressBar } from "@channel.io/bezier-react";
 
 export default () => (
   <ProgressBar
-    width='100%'
-    size='m'
-    variant='green-alt'
+    width="100%"
+    size="m"
+    variant="green-alt"
     value={uploadProgressPercentage / 100}
   />
-)
+);
 ```
+
+### Foundation to CSS Variable
+
+**`foundation-to-css-variable`**
+
+Replace foundation to css variable
+You can also use individual transform function such as `foundation-to-css-theme`, `foundation-to-css-rounding`, and so on.
+
+For example:
+
+```tsx
+import { styled } from "@channel.io/bezier-react";
+
+const Wrapper = styled.div`
+  color: ${({ foundation }) => foundation?.theme?.["txt-black-dark"]};
+  ${({ foundation }) => foundation?.rounding.round12};
+  ${({ foundation }) =>
+    foundation?.border?.getBorder(0.5, foundation.theme["bdr-black-light"], {
+      top: false,
+      right: false,
+      left: false,
+    })};
+  ${({ foundation }) => foundation?.elevation?.ev1()};
+  ${({ foundation }) => foundation?.transition?.getTransitionsCSS("color")};
+`;
+```
+
+Transforms into:
+
+```tsx
+import { styled } from "@channel.io/bezier-react";
+
+const Wrapper = styled.div`
+  color: var(--txt-black-dark);
+  border-radius: var(--radius-12);
+  border-bottom: 0.5px solid var(--bdr-black-light);
+  background-color: var(--bg-white-low);
+  box-shadow: var(--ev-1);
+  transition: color var(--transition-s);
+`;
+```

No alert changes

Improved metrics

Total package byte prevSize

49989

47.86%

Dev dependency count

4

-42.86%

Number of package files

39

85.71%

Lines of code

770

73.81%

Number of lines in readme file

131

74.67%

Worsened metrics

Number of low supply chain risk alerts

4

33.33%

No dependency changes