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

Comparing version 0.5.0-alpha.0 to 0.5.0-alpha.1

dist/App.js

@@ -14,2 +14,4 @@ import React, { useCallback, useEffect, useState, } from 'react';
 import iconsToBezierIcons from './transforms/icons-to-bezier-icons.js';
+import styledToStyledComponents from './transforms/import-styled-from-styled-component.js';
+import mixinToCssVariable from './transforms/mixin-to-css-variable.js';
 var Step;
@@ -33,2 +35,4 @@ (function (Step) {
     Option["FoundationToCssVariable"] = "foundation-to-css-variable";
+    Option["MixinToCssVariable"] = "mixin-to-css-variable";
+    Option["StyledToStyledComponents"] = "styled-to-styled-components";
     Option["Exit"] = "Exit";
@@ -46,2 +50,4 @@ })(Option || (Option = {}));
     [Option.FoundationToCssVariable]: foundationToCssVariable,
+    [Option.MixinToCssVariable]: mixinToCssVariable,
+    [Option.StyledToStyledComponents]: styledToStyledComponents,
 };
@@ -48,0 +54,0 @@ const options = Object.keys(transformMap).map((transformName) => ({

package.json

 {
 	"name": "@channel.io/bezier-codemod",
-	"version": "0.5.0-alpha.0",
+	"version": "0.5.0-alpha.1",
 	"description": "Codemod transformations to help upgrade app using Bezier design system.",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -105,3 +105,5 @@ # Bezier Codemod
   color: ${({ foundation }) => foundation?.theme?.["txt-black-dark"]};
+
   ${({ foundation }) => foundation?.rounding.round12};
+
   ${({ foundation }) =>
@@ -113,3 +115,5 @@ foundation?.border?.getBorder(0.5, foundation.theme["bdr-black-light"], {
     })};
+
   ${({ foundation }) => foundation?.elevation?.ev1()};
+
   ${({ foundation }) => foundation?.transition?.getTransitionsCSS("color")};
@@ -126,8 +130,78 @@ `;
   color: var(--txt-black-dark);
+
+  overflow: hidden;
   border-radius: var(--radius-12);
-  border-bottom: 0.5px solid var(--bdr-black-light);
+
+  border-color: var(--bdr-black-light);
+  border-style: none none solid none;
+  border-width: 0.5px;
+
   background-color: var(--bg-white-low);
   box-shadow: var(--ev-1);
+
   transition: color var(--transition-s);
 `;
 ```
+
+### Mixin interpolation to CSS Variable
+
+**`mixin-to-css-variable`**
+
+Replace mixin interpolation to css variable
+For example:
+
+```tsx
+import {
+  styled,
+  inputWrapperStyle,
+  focusedInputWrapperStyle,
+  erroredInputWrapperStyle,
+} from "@channel.io/bezier-react";
+
+const Wrapper = styled.div`
+  ${inputWrapperStyle};
+
+  ${({ focus }) => focus && focusedInputWrapperStyle};
+
+  ${({ focus, whisper }) => focus && whisper && erroredInputWrapperStyle};
+`;
+```
+
+Transforms into:
+
+```tsx
+import { styled } from "@channel.io/bezier-react";
+
+const Wrapper = styled.div`
+  box-shadow: var(--input-box-shadow);
+
+  ${({ focus }) => focus && css`
+  box-shadow: var(--input-box-shadow-focused);
+`};
+
+  ${({ focus, whisper }) => focus && whisper && css`
+  box-shadow: var(--input-box-shadow-invalid);
+`};
+```
+
+### Styled from @channel.io/bezier-react to styled-components
+
+**`styled-to-styled-components`**
+
+Switch library to import `styled` object from `@channel.io/bezier-react` to `styled-components`
+For example:
+
+```tsx
+import { styled, Button } from "@channel.io/bezier-react";
+
+export const Wrapper = styled(Button)``;
+```
+
+Transforms into:
+
+```tsx
+import styled from "styled-components";
+import { Button } from "@channel.io/bezier-react";
+
+export const Wrapper = styled(Button)``;
+```

No alert changes

Improved metrics

Total package byte prevSize

58515

increased by17.06%

Number of package files

49

increased by25.64%

Lines of code

920

increased by19.48%

Number of lines in readme file

205

increased by56.49%

No dependency changes