chore(deps): update pkgs (#527)

## Description Update packages. ## Checklist Before you create this PR confirms that it meets all requirements listed below by checking the relevant checkboxes (`[x]`). This will ensure a smooth and quick review process. - [x] I read the [Contributor Guide](https://github.com/dooboolab-community/dooboo-ui/blob/main/CONTRIBUTING.md) and followed the process outlined there for submitting PRs. - [x] Run `yarn test:all` and make sure nothing fails. - [x] I am willing to follow-up on review comments in a timely manner.
hyochan · Jan 17, 2024 · 7e97486 · 7e97486
1 parent 9ffe49d
commit 7e97486
Show file tree

Hide file tree

Showing 12 changed files with 1,293 additions and 742 deletions.
diff --git a/.ncurc.json b/.ncurc.json
@@ -1,5 +1,9 @@
 {
   "reject": [
+    "@storybook/*",
+    // Emotion version affects the theme variables
+    "@emotion/react",
+    "@emotion/native"
     // "react",
     // "react-native",
     // "@types/react",

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,7 +6,7 @@
     "typescriptreact"
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

diff --git a/main/modals/Snackbar/index.tsx b/main/modals/Snackbar/index.tsx
@@ -90,13 +90,10 @@ function Snackbar(
         setOptions(snackbarOptions);
       }
 
-      timer = setTimeout(
-        () => {
-          setVisible(false);
-          clearTimer();
-        },
-        snackbarOptions?.timer ?? SnackbarTimer.SHORT,
-      );
+      timer = setTimeout(() => {
+        setVisible(false);
+        clearTimer();
+      }, snackbarOptions?.timer ?? SnackbarTimer.SHORT);
     },
     close: () => {
       setVisible(false);

diff --git a/main/providers/index.tsx b/main/providers/index.tsx
@@ -25,7 +25,7 @@ const [useCtx, Provider] = createCtx<DoobooContext>(
   'dooboo-ui modals should be used within DoobooProvider.',
 );
 
-function DoobooProvider({children}: {children: JSX.Element}): JSX.Element {
+function AppProvider({children}: {children: JSX.Element}): JSX.Element {
   const [assetLoaded] = useFonts({
     doobooui: require('../uis/Icon/doobooui.ttf'),
     'Pretendard-Bold': require('../uis/Icon/Pretendard-Bold.otf'),
@@ -94,7 +94,7 @@ function DoobooWithThemeProvider(props: DoobooProviderProps): JSX.Element {
 
   return (
     <ThemeProvider {...themeConfig}>
-      <DoobooProvider {...props} />
+      <AppProvider {...props} />
     </ThemeProvider>
   );
 }

diff --git a/main/uis/Button/index.tsx b/main/uis/Button/index.tsx
@@ -88,10 +88,10 @@ const ButtonStyles = ({
       type === 'text'
         ? '8px'
         : size === 'large'
-        ? '16px 32px'
-        : size === 'small'
-        ? '8px 16px'
-        : '12px 24px',
+          ? '16px 32px'
+          : size === 'small'
+            ? '8px 16px'
+            : '12px 24px',
     backgroundColor,
     borderWidth: type === 'outlined' ? '1px' : undefined,
     borderColor,

diff --git a/main/uis/EditText/index.tsx b/main/uis/EditText/index.tsx
@@ -155,12 +155,12 @@ export function EditText({
   const defaultColor = !editable
     ? colors.disabled || theme.text.disabled
     : error
-    ? colors.error || theme.text.validation
-    : focused
-    ? colors.focused || theme.text.basic
-    : hovered
-    ? colors.hovered || theme.text.basic
-    : colors.placeholder || theme.text.placeholder;
+      ? colors.error || theme.text.validation
+      : focused
+        ? colors.focused || theme.text.basic
+        : hovered
+          ? colors.hovered || theme.text.basic
+          : colors.placeholder || theme.text.placeholder;
 
   // Default label placeholder color has different value compared to default input placeholder color
   const labelPlaceholderColor = defaultColor ===
@@ -171,12 +171,12 @@ export function EditText({
   const status: EditTextStatus = !editable
     ? 'disabled'
     : error
-    ? 'error'
-    : hovered
-    ? 'hovered'
-    : focused
-    ? 'focused'
-    : 'basic';
+      ? 'error'
+      : hovered
+        ? 'hovered'
+        : focused
+          ? 'focused'
+          : 'basic';
 
   const renderLabel = (): JSX.Element | null => {
     // eslint-disable-next-line react/no-unstable-nested-components

diff --git a/main/uis/IconButton/index.tsx b/main/uis/IconButton/index.tsx
@@ -143,10 +143,10 @@ export function IconButton({
     size === 'large'
       ? 32
       : size === 'medium'
-      ? 24
-      : size === 'small'
-      ? 16
-      : size;
+        ? 24
+        : size === 'small'
+          ? 16
+          : size;
   const borderWidthStr = `${borderWidth}px`;
   const borderRadiusStr = `99px`;
 

diff --git a/main/uis/LoadingIndicator/index.tsx b/main/uis/LoadingIndicator/index.tsx
@@ -65,8 +65,8 @@ export function LoadingIndicator({
             size === 'large'
               ? {width: 50, height: 50}
               : size === 'small'
-              ? {width: 30, height: 30}
-              : undefined,
+                ? {width: 30, height: 30}
+                : undefined,
             styles?.image,
           ]}
         />

diff --git a/main/uis/SwitchToggle/index.tsx b/main/uis/SwitchToggle/index.tsx
@@ -95,13 +95,13 @@ export function SwitchToggle({
     container = size === 'large'
       ? largeContainer
       : size === 'small'
-      ? smallContainer
-      : mediumContainer,
+        ? smallContainer
+        : mediumContainer,
     circle = size === 'large'
       ? largeCircle
       : size === 'small'
-      ? smallCircle
-      : mediumCircle,
+        ? smallCircle
+        : mediumCircle,
     button,
     onElementContainer,
     offElementContainer,

diff --git a/package.json b/package.json
@@ -32,38 +32,38 @@
   },
   "dependencies": {
     "@dooboo-ui/theme": "^0.12.16",
-    "@emotion/native": "^11.11.0",
-    "@emotion/react": "^11.11.1",
+    "@emotion/native": "11.11.0",
+    "@emotion/react": "11.11.1",
     "@expo/match-media": "^0.4.0",
     "@expo/webpack-config": "^19.0.0",
-    "@react-native-async-storage/async-storage": "1.19.3",
-    "expo": "^49.0.11",
+    "@react-native-async-storage/async-storage": "1.18.2",
+    "expo": "^49.0.21",
     "expo-font": "*",
-    "expo-linear-gradient": "~12.5.0",
-    "expo-screen-orientation": "~6.2.0",
+    "expo-linear-gradient": "~12.3.0",
+    "expo-screen-orientation": "~6.0.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.4",
-    "react-native-gesture-handler": "~2.12.1",
-    "react-native-reanimated": "~3.5.2",
-    "react-native-safe-area-context": "4.7.2",
-    "react-native-svg": "13.13.0",
-    "react-native-vector-icons": "^10.0.0",
-    "react-native-web": "~0.19.8",
+    "react-native": "0.72.6",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-svg": "13.9.0",
+    "react-native-vector-icons": "^10.0.3",
+    "react-native-web": "~0.19.10",
     "react-native-web-hooks": "^3.0.2",
     "react-useinterval": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.19",
+    "@babel/core": "^7.23.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.22.15",
-    "@babel/preset-react": "^7.22.15",
-    "@commitlint/cli": "^18.0.0",
-    "@commitlint/config-conventional": "^18.0.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@commitlint/cli": "^18.4.4",
+    "@commitlint/config-conventional": "^18.4.4",
     "@dooboo/eslint-config-react-native": "^1.4.2",
     "@jest/types": "^29.6.3",
-    "@react-native-community/datetimepicker": "^7.5.0",
-    "@react-native-community/slider": "^4.4.3",
+    "@react-native-community/datetimepicker": "^7.6.2",
+    "@react-native-community/slider": "^4.5.0",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-knobs": "^6.4.0",
     "@storybook/addon-ondevice-actions": "^6.5.3",
@@ -73,36 +73,36 @@
     "@storybook/react": "^6.5.16",
     "@storybook/react-native": "6.5.6",
     "@storybook/react-native-server": "6.5.6",
-    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/react-native": "^12.3.0",
-    "@types/jest": "^29.5.5",
-    "@types/jest-plugin-context": "^2.9.5",
-    "@types/node": "^20.6.1",
-    "@types/react": "~18.2.21",
-    "@types/react-dom": "~18.2.7",
-    "@types/react-responsive": "^8.0.5",
-    "@types/react-test-renderer": "^18.0.1",
+    "@testing-library/react-native": "^12.4.3",
+    "@types/jest": "^29.5.11",
+    "@types/jest-plugin-context": "^2.9.7",
+    "@types/node": "^20.11.4",
+    "@types/react": "~18.2.48",
+    "@types/react-dom": "~18.2.18",
+    "@types/react-responsive": "^8.0.8",
+    "@types/react-test-renderer": "^18.0.7",
     "babel-loader": "^9.1.3",
     "babel-preset-expo": "^9.5.2",
     "babel-preset-react-app": "^10.0.1",
     "commitlint-plugin-function-rules": "^3.0.0",
-    "eslint": "^8.49.0",
-    "eslint-plugin-storybook": "^0.6.13",
-    "gh-pages": "^6.0.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "gh-pages": "^6.1.1",
     "givens": "^1.3.9",
     "husky": "^8.0.3",
     "intl": "^1.2.5",
     "jest": "^29.7.0",
     "jest-expo": "^49.0.0",
     "jest-plugin-context": "^2.9.0",
-    "lerna": "^8.0.0",
-    "prettier": "^3.0.3",
+    "lerna": "^8.0.2",
+    "prettier": "^3.2.2",
     "react-test-renderer": "^18.2.0",
     "ts-jest": "^29.1.1",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.2.2"
+    "ts-node": "^10.9.2",
+    "typescript": "^5.3.3"
   },
   "resolutions": {
     "expo-font": "~11.4.0"
@@ -112,4 +112,4 @@
       "packages/*"
     ]
   }
-}
+}
diff --git a/stories/uis/AccordionStories/AccordionCustomStory.tsx b/stories/uis/AccordionStories/AccordionCustomStory.tsx
@@ -76,8 +76,8 @@ function AccordionCustom(): JSX.Element {
                       text === 'User'
                         ? 'AutoAwesome'
                         : text === 'Puzz'
-                        ? 'QuestBoxFill'
-                        : 'House'
+                          ? 'QuestBoxFill'
+                          : 'House'
                     }
                     size={14}
                     style={css`
@@ -119,8 +119,8 @@ function AccordionCustom(): JSX.Element {
                   key === 'HEADING_1'
                     ? 'HouseFill'
                     : key === 'HEADING_2'
-                    ? 'Star'
-                    : 'Bookmark'
+                      ? 'Star'
+                      : 'Bookmark'
                 }
                 size={14}
                 style={css`