Chore/fave 34158 upgrade antd to v5

package.json

@@ -32,22 +32,27 @@
     "clean": "git clean -Xdf",
     "storybook": "start-storybook -p 6006",
     "create-component": "node ./tools/create-component.js",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "audit": "yarn audit --groups dependencies",
+    "publish-local": "yalc publish"
   },
   "dependencies": {
+    "@ant-design/compatible": "^5.1.2",
     "@ant-design/icons": "^4.7.0",
+    "@ant-design/pro-layout": "^7.17.16",
     "@babel/runtime": "^7.1.2",
     "@types/classnames": "^2.3.1",
-    "@types/react": "^16.9.5",
-    "antd": "4.20.0",
+    "@types/react": "17.0.2",
+    "antd": "5.12.2",
     "array-move": "^4.0.0",
     "classnames": "^2.3.1",
     "date-fns": "^2.28.0",
     "react-sortable-hoc": "^2.0.0",
     "ui-box": "^5.0.0"
   },
   "peerDependencies": {
-    "react": ">=16.9.0"
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.1.2",
@@ -127,3 +132,4 @@
     ]
   }
 }
+

src/AutoComplete/stories/index.stories.tsx

@@ -4,8 +4,6 @@ import { Form, FormItemProps, Input, InputProps } from 'antd'
 import Search from 'antd/lib/input/Search'
 import { default as AutoComplete, AutoCompleteProps } from '../index'
 
-import '../../assets/style/form-item.css'
-
 export default {
   title: 'AutoComplete',
   component: AutoComplete
@@ -22,10 +20,10 @@ const Template: Story<Args> = (args: Args) => (
       <AutoComplete
         {...args.autoComplete}
         filterOption={(inputValue, option) =>
-        option!.value
-          .toString()
-          .toUpperCase()
-          .indexOf(inputValue.toUpperCase()) !== -1
+          option!.value
+            .toString()
+            .toUpperCase()
+            .indexOf(inputValue.toUpperCase()) !== -1
         }
       >
         <Input {...args.input} />

src/Breadcrumb/style.css

@@ -1,7 +1,8 @@
-/* @import '../Menu/style.css';
-@import '../Dropdown/style.css'; */
-
 .ant-breadcrumb {
+  & > ol {
+    @apply mb-[1em];
+  }
+
   li a {
     @apply text-sm font-inter text-neutral-400;
     @apply hover:text-neutral-400 hover:underline;

src/Button/style.css

@@ -7,66 +7,71 @@
   &.icon-start {
     @apply pl-2;
 
-    svg:first-child {
+    svg:first-of-type {
       @apply mr-1;
     }
   }
 
   &.icon-end {
     @apply pr-2;
 
-    svg:last-child {
+    svg:last-of-type {
       @apply ml-1;
     }
   }
 
-  &-sm {
+  &&-sm {
     @apply px-3 py-1 text-xs font-semibold rounded;
 
     &.icon-start {
       @apply pl-2;
 
-      svg:first-child {
+      svg:first-of-type {
         @apply mr-1;
       }
     }
 
     &.icon-end {
       @apply pr-1;
 
-      svg:last-child {
+      svg:last-of-type {
         @apply ml-1;
       }
     }
   }
 
-  &-lg {
+  &&-lg {
     @apply px-4 py-2.5 text-sm font-bold;
 
     &.icon-start {
       @apply pl-2;
 
-      svg:first-child {
+      svg:first-of-type {
         @apply mr-1;
       }
     }
 
     &.icon-end {
       @apply pr-2;
 
-      svg:last-child {
+      svg:last-of-type {
         @apply ml-1;
       }
     }
   }
 
   &-circle {
-    @apply text-primary h-auto px-3 py-3;
-    @apply hover:text-primary hover:outline-primary hover:outline-1;
-    @apply focus:text-primary;
+    &:not(:disabled):not(.ant-btn-disabled) {
+      @apply text-primary bg-white border-neutral-300;
 
-    &:active {
-      @apply text-primary;
+      &:focus,
+      &:active {
+        @apply text-primary border-primary;
+      }
+
+      &:hover {
+        @apply text-primary border-neutral-300;
+      }
     }
 
     &.ant-btn-lg {
@@ -75,28 +80,33 @@
   }
 
   &-primary {
-    @apply bg-primary text-white;
-    @apply hover:bg-primary hover:bg-opacity-70 hover:text-white;
-    @apply focus:bg-primary focus:text-white focus:outline-none;
-
-    &:active {
-      @apply bg-primary text-white bg-opacity-70;
+    &:not(:disabled):not(.ant-btn-disabled) {
+      @apply bg-primary text-white;
+      @apply hover:bg-primary hover:bg-opacity-70 hover:text-white;
+      @apply focus:bg-primary focus:text-white focus:outline-none;
+      @apply active:bg-primary active:text-white active:bg-opacity-70;
     }
   }
 
   &-text {
-    @apply text-primary;
-    @apply hover:text-primary;
-    @apply focus:text-primary;
-
-    &:active {
+    &:not(:disabled):not(.ant-btn-disabled) {
       @apply text-primary;
+
+      &:hover,
+      &:focus,
+      &:active {
+        @apply text-primary;
+      }
     }
   }
 
   &-link {
-    @apply text-primary;
-    @apply hover:text-primary;
-    @apply focus:text-primary;
+    &:not(:disabled):not(.ant-btn-disabled) {
+      &:hover,
+      &:focus,
+      &:active {
+        @apply text-primary;
+      }
+    }
   }
 }

src/Checkbox/style.css

@@ -1,68 +1,39 @@
 .ant-checkbox {
-  &:hover {
-    .ant-checkbox-inner {
-      @apply border-slate-700;
+  @apply font-inter;
+
+  &:not(.ant-checkbox-disabled) {
+    &:hover {
+      .ant-checkbox-inner {
+        @apply border-slate-700;
+      }
     }
   }
 
   &-wrapper {
-    @apply text-slate-700 font-inter font-normal;
-  }
-
-  &-wrapper:hover {
-    .ant-checkbox-inner {
-      @apply border-slate-700;
-    }
-  }
+    &:not(&-disabled) {
+      .ant-checkbox-inner {
+        @apply border-slate-700;
+      }
 
-  &-checked {
-    .ant-checkbox-inner {
-      @apply bg-slate-700 border-slate-700;
-    }
-    .ant-checkbox-inner::after {
-      @apply box-border;
-    }
-  }
+      &:hover {
+        .ant-checkbox-inner {
+          @apply border-slate-700;
+        }
 
-  &-checked::after {
-    @apply border-none;
-  }
+        .ant-checkbox-checked:not(.ant-checkbox-disabled) .ant-checkbox-inner {
+          @apply bg-slate-700 border-slate-700;
+        }
+      }
 
-  &-disabled {
-    .ant-checkbox-inner {
-      @apply bg-white border-neutral-200;
+      & .ant-checkbox-checked {
+        .ant-checkbox-inner {
+          @apply bg-slate-700 border-slate-700;
+        }
+      }
     }
-    .ant-checkbox-inner::after {
-      @apply border-white;
-    }
-  }
-
-  &-disabled.ant-checkbox-checked .ant-checkbox-inner {
-    @apply bg-neutral-300;
-  }
-
-  &-disabled.ant-checkbox-checked .ant-checkbox-inner::after {
-    @apply border-white;
-  }
-
-  &-input {
-    @apply m-0;
-  }
-
-  &-input:focus + &-inner {
-    @apply border-slate-700;
-  }
-
-  &-input + &-inner {
-    @apply border-slate-700 rounded;
   }
+}
 
-  &-indeterminate {
-    .ant-checkbox-inner::after {
-      @apply bg-slate-700 border-neutral-300;
-    }
-    .ant-checkbox-inner {
-      @apply border-neutral-300;
-    }
-  }
+.ant-checkbox-indeterminate .ant-checkbox-inner:after {
+  @apply bg-slate-700;
 }

src/Comment/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { Comment as AntComment, CommentProps as AntCommentProps, Form } from 'antd'
+import { Comment as AntComment, Form } from '@ant-design/compatible'
+import { CommentProps as AntCommentProps } from '@ant-design/compatible/lib/comment'
 
 import './style.css'
 import Avatar from '../Avatar'
@@ -53,6 +54,10 @@ export type CommentListProps = CommentLoggedInUserProps &
     setReplyToID: (value: string | undefined) => void
   }
 
+// todo: create an alternative component for this.
+/**
+ * @deprecated deprecated in antd v5.0. It is used from compatibility package. consider using an alternative component
+ */
 export const Comment: React.FC<CommentProps> = props => <AntComment {...props} />
 
 const authorInitials = (name: string) => {

src/DatePicker/stories/index.stories.tsx

@@ -4,8 +4,6 @@ import { Form, FormItemProps } from 'antd'
 import { differenceInDays } from 'date-fns'
 import { DatePicker } from '../index'
 
-import '../../assets/style/form-item.css'
-
 export default {
   title: 'DatePicker/Basic',
   component: DatePicker

src/DatePicker/stories/quarterPicker.stories.tsx

@@ -4,8 +4,6 @@ import { Form, FormItemProps } from 'antd'
 import { differenceInDays } from 'date-fns'
 import { QuarterPicker } from '../index'
 
-import '../../assets/style/form-item.css'
-
 export default {
   title: 'DatePicker/QuarterPicker',
   component: QuarterPicker

src/DatePicker/stories/rangePicker.stories.tsx

@@ -5,8 +5,6 @@ import { differenceInDays } from 'date-fns'
 import { ArrowRight } from 'phosphor-react'
 import { DateRangePicker } from '../index'
 
-import '../../assets/style/form-item.css'
-
 export default {
   title: 'DatePicker/RangePicker',
   component: DateRangePicker

src/DatePicker/style.css

@@ -6,6 +6,10 @@
   @apply h-10 px-4 border-transparent shadow-none rounded-lg;
   @apply hover:border-neutral-300 focus:border-neutral-300;
 
+  &&-focused {
+    @apply border-transparent shadow-none;
+  }
+
   &-panel-container {
     @apply rounded-lg;
   }
@@ -28,7 +32,7 @@
     @apply px-4 text-slate-300;
   }
 
-  &-suffix {
+  & &-suffix {
     @apply text-neutral-500;
   }