chore: update minor & patch deps (#164)

* chore(deps): ⬆️ update project deps * fix(usecontrollablestate): 🐛 update value bug with previous value * chore(dev-deps): ⬆️ update minor & patch dev deps * chore(format): 🎨 update format of the code * chore(postcss-import): ➖ remove postcss-import not used in stories * chore(emotion): ⬆️ replace emotion with @emotion/css for v11 * chore: review updates * chore: prettier ignore Co-authored-by: Anurag <[email protected]>
adaptui · Nov 24, 2020 · 3c6613d · 3c6613d
1 parent 93946cc
commit 3c6613d
Show file tree

Hide file tree

Showing 27 changed files with 1,585 additions and 995 deletions.
diff --git a/.storybook/postcss.config.js b/.storybook/postcss.config.js
@@ -1,5 +1,4 @@
 const path = require("path");
-const convertImports = require("postcss-import");
 const scopify = require("postcss-scopify");
 const { kebabCase } = require("lodash");
 
@@ -27,5 +26,5 @@ function addIdScope() {
 
 module.exports = {
   exec: true,
-  plugins: [convertImports(), rewriteRootRule(), addIdScope()],
+  plugins: [rewriteRootRule(), addIdScope()],
 };
diff --git a/babel.config.js b/babel.config.js
@@ -23,7 +23,7 @@ module.exports = function (api) {
 
   const plugins = [
     "date-fns",
-    "babel-plugin-chakra-ui",
+    "@chakra-ui/babel-plugin",
     "@babel/plugin-proposal-class-properties",
   ];
 

diff --git a/package.json b/package.json
@@ -53,12 +53,12 @@
     "tsd": "tsd"
   },
   "dependencies": {
-    "@chakra-ui/counter": "1.0.0-rc.7",
-    "@chakra-ui/hooks": "1.0.0-rc.7",
-    "@chakra-ui/utils": "1.0.0-rc.7",
+    "@chakra-ui/counter": "1.0.0",
+    "@chakra-ui/hooks": "1.0.0",
+    "@chakra-ui/utils": "1.0.0",
     "@react-aria/button": "3.2.2",
     "@react-aria/i18n": "3.1.3",
-    "@react-aria/interactions": "^3.3.0",
+    "@react-aria/interactions": "^3.3.1",
     "@react-aria/utils": "3.4.0",
     "date-fns": "2.16.1",
     "reakit-system": "0.15.0",
@@ -70,39 +70,39 @@
     "@babel/core": "7.12.3",
     "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/preset-env": "7.12.1",
-    "@babel/preset-react": "7.12.1",
+    "@babel/preset-react": "7.12.5",
     "@babel/preset-typescript": "7.12.1",
+    "@chakra-ui/babel-plugin": "1.0.0",
     "@commitlint/cli": "11.0.0",
     "@commitlint/config-conventional": "11.0.0",
-    "@storybook/addon-a11y": "6.0.28",
-    "@storybook/addon-actions": "6.0.28",
-    "@storybook/addon-essentials": "6.0.28",
-    "@storybook/react": "6.0.28",
-    "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "11.1.0",
+    "@emotion/css": "11.0.0",
+    "@storybook/addon-a11y": "6.1.1",
+    "@storybook/addon-actions": "6.1.1",
+    "@storybook/addon-essentials": "6.1.1",
+    "@storybook/react": "6.1.1",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "11.2.1",
     "@testing-library/react-hooks": "3.4.2",
-    "@testing-library/user-event": "12.1.10",
+    "@testing-library/user-event": "12.2.2",
     "@types/jest": "26.0.15",
     "@types/jest-axe": "3.5.1",
     "@types/jest-in-case": "1.0.3",
     "@types/mockdate": "^2.0.0",
-    "@types/react": "16.9.55",
+    "@types/react": "16.9.56",
     "@types/react-dom": "16.9.9",
     "@types/react-transition-group": "4.4.0",
     "@types/testing-library__jest-dom": "5.9.5",
-    "@typescript-eslint/eslint-plugin": "4.6.0",
-    "@typescript-eslint/parser": "4.6.0",
+    "@typescript-eslint/eslint-plugin": "4.8.1",
+    "@typescript-eslint/parser": "4.8.1",
     "babel-eslint": "10.1.0",
-    "babel-jest": "^26.6.1",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-chakra-ui": "1.0.0-rc.7",
+    "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.1",
     "babel-plugin-date-fns": "^2.0.0",
     "chalk": "4.1.0",
     "concurrently": "5.3.0",
     "conventional-github-releaser": "3.1.5",
     "cross-env": "7.0.2",
-    "emotion": "10.0.27",
-    "eslint": "7.12.1",
+    "eslint": "7.13.0",
     "eslint-config-prettier": "6.15.0",
     "eslint-config-react-app": "6.0.0",
     "eslint-plugin-flowtype": "5.2.0",
@@ -115,37 +115,36 @@
     "glob": "^7.1.6",
     "glob-fs": "^0.1.7",
     "husky": "4.3.0",
-    "jest": "26.6.1",
+    "jest": "26.6.3",
     "jest-axe": "4.1.0",
     "jest-in-case": "1.0.2",
-    "jest-matcher-utils": "26.6.1",
+    "jest-matcher-utils": "26.6.2",
     "lint-staged": "10.5.1",
     "lodash": "4.17.20",
     "mockdate": "^3.0.2",
     "outdent": "^0.7.1",
-    "postcss-import": "^12.0.1",
     "postcss-scopify": "^0.1.9",
-    "prettier": "2.1.2",
+    "prettier": "2.2.0",
     "raw-loader": "^4.0.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-hook-form": "6.10.1",
+    "react-hook-form": "6.11.3",
     "react-is": "^16.13.1",
     "react-spring": "8.0.27",
     "react-test-renderer": "16.14.0",
     "react-transition-group": "4.4.1",
-    "react-virtual": "^2.3.1",
+    "react-virtual": "^2.3.2",
     "reakit": "1.3.0",
-    "reakit-test-utils": "0.14.5",
+    "reakit-test-utils": "0.15.0",
     "rimraf": "3.0.2",
-    "sort-package-json": "1.46.1",
+    "sort-package-json": "1.47.0",
     "standard-version": "9.0.0",
     "storybook-addon-preview": "^2.1.0",
-    "ts-jest": "26.4.3",
-    "ts-morph": "8.1.2",
+    "ts-jest": "26.4.4",
+    "ts-morph": "8.2.0",
     "ts-node": "^9.0.0",
     "tsd": "^0.13.1",
-    "typescript": "4.0.5"
+    "typescript": "4.1.2"
   },
   "peerDependencies": {
     "react": "^16.8.0",

diff --git a/src/accordion/AccordionState.ts b/src/accordion/AccordionState.ts
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useCompositeState } from "reakit";
-import { useControllableState } from "@chakra-ui/hooks";
+
 import {
   SelectedIdPair,
   AccordionState,
@@ -12,6 +12,7 @@ import {
   AccordionInitialStateMulti,
   AccordionInitialStateSingle,
 } from "./types";
+import { useControllableState } from "../utils";
 
 export type AccordionStateReturn = AccordionActions &
   AccordionState &
@@ -69,15 +70,13 @@ export function useAccordionState(
     defaultValue: defaultSelectedId,
     value: selectedIdProp,
     onChange: onSelectedIdChange,
-    shouldUpdate: (prev, next) => prev !== next,
   });
 
   // Multiple toggle accordion State
   const [selectedIds, setSelectedIds] = useControllableState({
     defaultValue: defaultSelectedIds,
     value: selectedIdsProp,
     onChange: onSelectedIdsChange,
-    shouldUpdate: (prev, next) => prev !== next,
   });
 
   const composite = useCompositeState({
@@ -104,7 +103,14 @@ export function useAccordionState(
     },
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.allowMultiple, allowToggle, composite.move, selectedId],
+    [
+      props.allowMultiple,
+      allowToggle,
+      composite.move,
+      selectedId,
+      setSelectedId,
+      setSelectedIds,
+    ],
   );
 
   const unSelect = React.useCallback(
@@ -116,7 +122,7 @@ export function useAccordionState(
     },
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [composite.move],
+    [composite.move, setSelectedIds, props.allowMultiple],
   );
 
   const panels = useCompositeState();

diff --git a/src/accordion/stories/AccordionBasic.stories.tsx b/src/accordion/stories/AccordionBasic.stories.tsx
@@ -7,10 +7,9 @@ import { App as Accordion } from "./AccordionBasic.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 import { accordionBasicTemplate, accordionBasicTemplateJs } from "./templates";
 
-export const Default: React.FC<Omit<
-  AccordionInitialState,
-  keyof CompositeState
->> = args => <Accordion {...args} />;
+export const Default: React.FC<
+  Omit<AccordionInitialState, keyof CompositeState>
+> = args => <Accordion {...args} />;
 
 export default {
   component: Default,

diff --git a/src/accordion/stories/AccordionStyled.stories.tsx b/src/accordion/stories/AccordionStyled.stories.tsx
@@ -12,10 +12,9 @@ import { AccordionInitialState } from "../types";
 import { App as Accordion } from "./AccordionStyled.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
-export const Default: React.FC<Omit<
-  Partial<AccordionInitialState>,
-  keyof CompositeState
->> = args => <Accordion {...args} />;
+export const Default: React.FC<
+  Omit<Partial<AccordionInitialState>, keyof CompositeState>
+> = args => <Accordion {...args} />;
 
 export default {
   component: Default,

diff --git a/src/calendar/CalendarState.ts b/src/calendar/CalendarState.ts
@@ -25,12 +25,16 @@ import * as React from "react";
 import { unstable_useId as useId } from "reakit";
 import { useUpdateEffect } from "@chakra-ui/hooks";
 import { useDateFormatter } from "@react-aria/i18n";
-import { useControllableState } from "@chakra-ui/hooks";
 import { InputBase, ValueBase } from "@react-types/shared";
 
+import {
+  parseDate,
+  stringifyDate,
+  isInvalidDateRange,
+  useControllableState,
+} from "../utils";
 import { RangeValueBase } from "../utils/types";
 import { announce } from "../utils/LiveAnnouncer";
-import { isInvalidDateRange, parseDate, stringifyDate } from "../utils";
 import { useWeekStart, useWeekDays, generateDaysInMonthArray } from "./helpers";
 
 export interface CalendarInitialState
@@ -70,7 +74,6 @@ export function useCalendarState(props: CalendarInitialState = {}) {
     value: parseDate(initialDate),
     defaultValue: parseDate(defaultValueProp),
     onChange,
-    shouldUpdate: (prev, next) => prev !== next,
   });
 
   const minValue = parseDate(minValueProp);

diff --git a/src/calendar/RangeCalendarState.ts b/src/calendar/RangeCalendarState.ts
@@ -5,14 +5,13 @@
  */
 import * as React from "react";
 import { format, isSameDay } from "date-fns";
-import { useControllableState } from "@chakra-ui/hooks";
 import { InputBase, ValueBase, RangeValue } from "@react-types/shared";
 
 import { makeRange } from "./helpers";
 import { RangeValueBase } from "../utils/types";
 import { announce } from "../utils/LiveAnnouncer";
 import { useCalendarState } from "./CalendarState";
-import { parseRangeDate, stringifyDate } from "../utils";
+import { parseRangeDate, stringifyDate, useControllableState } from "../utils";
 
 export interface RangeCalendarInitialState
   extends ValueBase<RangeValue<string>>,
@@ -50,7 +49,6 @@ export function useRangeCalendarState(props: RangeCalendarInitialState = {}) {
     value: parseRangeDate(initialDate),
     defaultValue: parseRangeDate(defaultValueProp),
     onChange,
-    shouldUpdate: (prev, next) => prev !== next,
   });
 
   const dateRange = value != null ? value : null;

diff --git a/src/datepicker/DatePickerState.ts b/src/datepicker/DatePickerState.ts
@@ -5,13 +5,17 @@
  */
 
 import * as React from "react";
-import { useControllableState } from "@chakra-ui/hooks";
 import { Validation, ValueBase, ValidationState } from "@react-types/shared";
 
+import {
+  parseDate,
+  stringifyDate,
+  isInvalidDateRange,
+  useControllableState,
+} from "../utils";
 import { useCalendarState } from "../calendar";
 import { RangeValueBase } from "../utils/types";
 import { SegmentInitialState, useSegmentState } from "../segment";
-import { isInvalidDateRange, parseDate, stringifyDate } from "../utils";
 import { PickerBaseInitialState, usePickerBaseState } from "../picker-base";
 
 export interface DatePickerInitialState
@@ -50,7 +54,6 @@ export const useDatePickerState = (props: DatePickerInitialState = {}) => {
     value: parseDate(initialDate),
     defaultValue: parseDate(defaultValueProp) || new Date(),
     onChange,
-    shouldUpdate: (prev, next) => prev !== next,
   });
 
   const minValue = parseDate(minValueProp);

diff --git a/src/datepicker/DateRangePickerState.ts b/src/datepicker/DateRangePickerState.ts
@@ -8,18 +8,17 @@ import {
   Validation,
   ValueBase,
   RangeValue,
-  FocusableProps,
   ValidationState,
 } from "@react-types/shared";
 import * as React from "react";
-import { useControllableState } from "@chakra-ui/hooks";
 import { useCompositeState, unstable_useId as useId } from "reakit";
 
 import {
   parseDate,
   stringifyDate,
   parseRangeDate,
   isInvalidDateRange,
+  useControllableState,
 } from "../utils";
 import { makeRange } from "../calendar/helpers";
 import { RangeValueBase } from "../utils/types";
@@ -76,7 +75,6 @@ export const useDateRangePickerState = (
         end: stringifyDate(new Date()),
       }),
     onChange,
-    shouldUpdate: (prev, next) => prev !== next,
   });
 
   const minValue = parseDate(minValueProp);

diff --git a/src/drawer/stories/Drawer.component.tsx b/src/drawer/stories/Drawer.component.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 
 import {
   Drawer,
-  TPlacement,
+  Placement,
   useDrawerState,
   DrawerBackdrop,
   DrawerCloseButton,
@@ -13,14 +13,14 @@ import {
 export const App = () => {
   const dialog = useDrawerState({ animated: true });
   const inputRef = React.useRef<HTMLInputElement | null>(null);
-  const [placement, setPlacement] = React.useState<TPlacement>("left");
+  const [placement, setPlacement] = React.useState<Placement>("left");
 
   return (
     <div>
       <DrawerDisclosure {...dialog}>Open Drawer</DrawerDisclosure>
       <select
         defaultValue={placement}
-        onBlur={e => setPlacement(e.target.value as TPlacement)}
+        onBlur={e => setPlacement(e.target.value as Placement)}
       >
         <option value="top">Top</option>
         <option value="bottom">Bottom</option>

diff --git a/src/drawer/stories/Drawer.stories.tsx b/src/drawer/stories/Drawer.stories.tsx
@@ -12,7 +12,7 @@ export default {
     preview: createPreviewTabs({
       js: drawerTemplateJs,
       ts: drawerTemplate,
-      deps: ["emotion@latest"],
+      deps: ["@emotion/css@latest"],
     }),
   },
 } as Meta;

diff --git a/src/meter/stories/Meter.component.tsx b/src/meter/stories/Meter.component.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { css, keyframes } from "emotion";
+import { css, keyframes } from "@emotion/css";
 
 import {
   Meter,

diff --git a/src/meter/stories/Meter.stories.tsx b/src/meter/stories/Meter.stories.tsx
@@ -12,7 +12,7 @@ export default {
     preview: createPreviewTabs({
       js: meterTemplateJs,
       ts: meterTemplate,
-      deps: ["emotion@latest"],
+      deps: ["@emotion/css@latest"],
     }),
   },
 } as Meta;