chore: upgrade babel and types

WTTJ · Sep 17, 2024 · 06b2867 · 06b2867
1 parent e4b4ecf
commit 06b2867
Show file tree

Hide file tree

Showing 20 changed files with 798 additions and 364 deletions.
diff --git a/package.json b/package.json
@@ -71,15 +71,15 @@
     "url": "https://github.com/WTTJ/welcome-ui/issues"
   },
   "devDependencies": {
-    "@babel/cli": "7.22.10",
-    "@babel/core": "7.24.8",
-    "@babel/eslint-parser": "^7.22.11",
+    "@babel/cli": "7.25.6",
+    "@babel/core": "7.25.2",
+    "@babel/eslint-parser": "^7.25.1",
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",
-    "@babel/plugin-transform-modules-commonjs": "7.23.0",
-    "@babel/plugin-transform-runtime": "^7.22.10",
-    "@babel/preset-env": "7.24.7",
-    "@babel/preset-react": "7.22.15",
+    "@babel/plugin-transform-modules-commonjs": "7.24.8",
+    "@babel/plugin-transform-runtime": "^7.25.4",
+    "@babel/preset-env": "7.25.4",
+    "@babel/preset-react": "7.24.7",
     "@babel/preset-typescript": "^7.22.11",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
@@ -90,29 +90,29 @@
     "@testing-library/react": "^14.2.1",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "14.5.2",
-    "@types/emoji-mart": "3.0.9",
-    "@types/jest": "^29.5.4",
+    "@types/emoji-mart": "3.0.14",
+    "@types/jest": "^29.5.13",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.escaperegexp": "^4.1.6",
     "@types/lodash.groupby": "^4.6.6",
-    "@types/lodash.range": "^3.2.6",
+    "@types/lodash.range": "^3.2.9",
     "@types/ramda": "^0.29.2",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.2.7",
-    "@types/react-window": "^1.8.5",
-    "@types/styled-components": "^5.1.25",
+    "@types/react-window": "^1.8.8",
+    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^5.59.11",
     "@typescript-eslint/parser": "^5.59.11",
     "@vusion/webfonts-generator": "^0.8.0",
     "@xstyled/styled-components": "^3.7.3",
-    "aws-sdk": "^2.1397.0",
-    "babel-jest": "29.6.4",
+    "aws-sdk": "^2.1691.0",
+    "babel-jest": "29.7.0",
     "babel-plugin-annotate-pure-calls": "^0.4.0",
     "babel-plugin-transform-async-to-promises": "^0.8.18",
     "colors": "^1.4.0",
     "conventional-github-releaser": "^3.1.3",
     "date-fns": "^2.30.0",
-    "depcheck": "^1.4.6",
+    "depcheck": "^1.4.7",
     "esbuild": "^0.17.11",
     "esbuild-plugin-replace": "^1.4.0",
     "esm": "^3.2.25",

diff --git a/packages/Breadcrumb/src/Item.styles.ts b/packages/Breadcrumb/src/Item.styles.ts
@@ -20,7 +20,7 @@ export const Item = styled.aBox`
   }
 `
 
-export const Separator = styled.span`
+export const Separator = styled.spanBox`
   ${th('breadcrumbs.separator')};
   display: flex;
   align-items: center;

diff --git a/packages/Breadcrumb/src/styles.ts b/packages/Breadcrumb/src/styles.ts
@@ -8,15 +8,15 @@ interface GradientProps {
   gradientBackground: Colors
 }
 
-export const StartGradient = styled.span<GradientProps>(
+export const StartGradient = styled.spanBox<GradientProps>(
   ({ gradientBackground, theme }) => css`
     left: 0;
     background-image: ${gradient(theme as Theme, gradientBackground)};
     transform-origin: left;
   `
 )
 
-export const EndGradient = styled.span<GradientProps>(
+export const EndGradient = styled.spanBox<GradientProps>(
   ({ gradientBackground, theme }) => css`
     right: 0;
     background-image: ${gradient(theme as Theme, gradientBackground, 'left')};
@@ -39,7 +39,7 @@ export const Breadcrumb = styled(Box)`
   }
 `
 
-export const List = styled.ol`
+export const List = styled.olBox`
   display: inline-flex;
   align-items: center;
   max-width: 100%;

diff --git a/packages/DateTimePicker/src/styles.ts b/packages/DateTimePicker/src/styles.ts
@@ -8,7 +8,7 @@ const focusStyles = css`
   }
 `
 
-export const DateTimePicker = styled.div`
+export const DateTimePicker = styled.divBox`
   position: relative;
   display: inline-flex;
   flex-wrap: nowrap;

diff --git a/packages/DateTimePickerCommon/src/CustomPopper.tsx b/packages/DateTimePickerCommon/src/CustomPopper.tsx
@@ -19,7 +19,7 @@ export const CustomPopper = ({
   return <StyledCustomPopper popperStyles={popperProps}>{children}</StyledCustomPopper>
 }
 
-const StyledCustomPopper = styled.div(
+const StyledCustomPopper = styled.divBox(
   ({ popperStyles }: { popperStyles: CSSObject }) => css`
     ${datePickerStyles};
     ${fixAriaMessageStyle};

diff --git a/packages/Field/src/styles.ts b/packages/Field/src/styles.ts
@@ -58,7 +58,7 @@ type IconWrapperProps = {
   size?: FieldIconSize
 }
 
-export const IconWrapper = styled.div<IconWrapperProps>(
+export const IconWrapper = styled.divBox<IconWrapperProps>(
   ({ iconPlacement, size }) => css`
     position: absolute;
     top: 0;
@@ -89,7 +89,7 @@ export const IconWrapper = styled.div<IconWrapperProps>(
   `
 )
 
-export const IconGroupWrapper = styled.div(
+export const IconGroupWrapper = styled.divBox(
   ({ size }: { size: FieldIconSize }) => css`
     position: absolute;
     padding: 0;

diff --git a/packages/FileDrop/src/styles.ts b/packages/FileDrop/src/styles.ts
@@ -47,7 +47,7 @@ export const FilePreview = styled.div`
   justify-content: center;
 `
 
-export const ImagePreview = styled.img`
+export const ImagePreview = styled.imgBox`
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;

diff --git a/packages/MarkdownEditor/src/styles.ts b/packages/MarkdownEditor/src/styles.ts
@@ -56,7 +56,7 @@ export const Toolbar = styled.div`
   z-index: 1;
 `
 
-export const ToolbarIcon = styled.a.withConfig({ shouldForwardProp })<ToolbarIconOptions>(
+export const ToolbarIcon = styled.aBox.withConfig({ shouldForwardProp })<ToolbarIconOptions>(
   ({ active }) => css`
     display: flex;
     align-items: center;
@@ -91,7 +91,7 @@ export const EmojiPicker = styled.div`
   right: ${th('space.md')};
 `
 
-export const Actions = styled.div`
+export const Actions = styled.divBox`
   position: absolute;
   bottom: 0;
   left: 0;

diff --git a/packages/Modal/src/Assets/AssetWithTitle.tsx b/packages/Modal/src/Assets/AssetWithTitle.tsx
@@ -17,7 +17,7 @@ type AssetWithTitleProps = {
 const titleBlockMobile = '4rem'
 const titleBlockDesktop = '6rem'
 
-const Wrapper = styled.div`
+const Wrapper = styled.divBox`
   display: flex;
   flex-direction: column;
 

diff --git a/packages/Pagination/src/styles.ts b/packages/Pagination/src/styles.ts
@@ -9,7 +9,7 @@ export const List = styled.ul`
   margin: 0;
 `
 
-export const Item = styled.li`
+export const Item = styled.liBox`
   display: inline-block;
   vertical-align: bottom;
   padding: 0;
@@ -47,7 +47,7 @@ export const abstractLinkStyle = css`
   }
 `
 
-export const ArrowLink = styled.a(
+export const ArrowLink = styled.aBox(
   props => css`
     ${abstractLinkStyle};
     ${props['aria-disabled'] &&
@@ -58,7 +58,7 @@ export const ArrowLink = styled.a(
   `
 )
 
-export const PageLink = styled.a(
+export const PageLink = styled.aBox(
   props => css`
     ${abstractLinkStyle};
     ${props['aria-current'] && th('paginations.active')}

diff --git a/packages/RadioGroup/src/styles.ts b/packages/RadioGroup/src/styles.ts
@@ -1,7 +1,7 @@
 import styled, { css, system } from '@xstyled/styled-components'
 import { WuiProps } from '@welcome-ui/system'
 
-export const Radios = styled.div<{
+export const Radios = styled.divBox<{
   flexDirection?: WuiProps['flexDirection']
 }>(
   ({ flexDirection }) => css`

diff --git a/packages/Select/package.json b/packages/Select/package.json
@@ -65,7 +65,7 @@
   "sideEffects": false,
   "homepage": "https://welcome-ui.com/components/select",
   "devDependencies": {
-    "@types/lodash.capitalize": "^4.2.6",
+    "@types/lodash.capitalize": "^4.2.9",
     "lodash.capitalize": "^4.2.1"
   }
 }
diff --git a/packages/Select/src/styles.ts b/packages/Select/src/styles.ts
@@ -13,7 +13,7 @@ import { IconWrapper as WUIIconWrapper } from '@welcome-ui/field'
 
 import { SelectOptions } from './index'
 
-export const Wrapper = styled('div').withConfig({ shouldForwardProp })<{ disabled: boolean }>(
+export const Wrapper = styled.divBox.withConfig({ shouldForwardProp })<{ disabled: boolean }>(
   ({ disabled }) => css`
     position: relative;
     ${system}
@@ -123,7 +123,7 @@ export const Item = styled.li(
   `
 )
 
-export const Indicators = styled.div(
+export const Indicators = styled.divBox(
   ({ size }: { size: Size }) => css`
     position: absolute;
     padding: 0;
@@ -162,7 +162,7 @@ export const DropDownIndicator = styled.button.withConfig({ shouldForwardProp })
   `
 )
 
-export const Tags = styled.div`
+export const Tags = styled.divBox`
   margin-top: lg;
 
   ${/* sc-selector */ StyledTag}:not(:last-child) {

diff --git a/packages/Slider/src/Range.tsx b/packages/Slider/src/Range.tsx
@@ -284,7 +284,6 @@ export const Range = forwardRef<'div', RangeProps>(
                 <S.Output isVisible={tooltipMinVisible} ref={tooltipMinRef}>
                   <S.Tooltip>{minValue}</S.Tooltip>
                 </S.Output>
-
                 <S.Output isVisible={tooltipMaxVisible} ref={tooltipMaxRef}>
                   <S.Tooltip>{maxValue}</S.Tooltip>
                 </S.Output>

diff --git a/packages/Slider/src/styles.ts b/packages/Slider/src/styles.ts
@@ -4,6 +4,7 @@ import { Hint } from '@welcome-ui/hint'
 
 type BorderProps = {
   borderSelectorColor?: string
+  disabled?: boolean
 }
 
 const sliderSelector = css`
@@ -212,7 +213,7 @@ type OutputProps = {
   isVisible?: boolean
 }
 
-export const Output = styled.output<OutputProps>(
+export const Output = styled.outputBox<OutputProps>(
   ({ isVisible }) => css`
     opacity: 0;
     visibility: hidden;