bump antd version

altence · Mar 10, 2023 · a03d432 · a03d432
1 parent 7298444
commit a03d432
Show file tree

Hide file tree

Showing 32 changed files with 883 additions and 588 deletions.
diff --git a/package.json b/package.json
@@ -11,12 +11,12 @@
     "url": "https://github.com/altence/lightence-admin/issues"
   },
   "dependencies": {
-    "@ant-design/icons": "^4.6.2",
+    "@ant-design/icons": "^5.0.1",
     "@craco/craco": "^6.1.2",
     "@lit-labs/react": "^1.0.2",
     "@react-google-maps/api": "^2.18.1",
     "@reduxjs/toolkit": "^1.7.1",
-    "antd": "^4.22.4",
+    "antd": "^5.2.3",
     "antd-mask-input": "^2.0.7",
     "axios": "^0.24.0",
     "axios-mock-adapter": "^1.20.0",
@@ -68,14 +68,13 @@
     "workbox-streams": "^5.1.3"
   },
   "scripts": {
-    "start": "yarn buildThemes && craco start",
-    "build": "yarn buildThemes && craco build",
+    "start": "craco start",
+    "build": "craco build",
     "test": "craco test",
     "eject": "craco eject",
     "lint": "eslint \"*/**/*.{js,ts,tsx}\" --fix",
     "lint:styles": "stylelint '*/**/*.{js,ts,tsx}'",
-    "prepare": "husky install",
-    "buildThemes": "lessc --js --clean-css=\"--s1 --advanced\" src/styles/themes/main.less public/themes/main.css"
+    "prepare": "husky install"
   },
   "browserslist": [
     ">0.2%",
@@ -105,8 +104,6 @@
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "husky": "^6.0.0",
-    "less": "^4.1.2",
-    "less-plugin-clean-css": "^1.5.1",
     "lint-staged": "^11.0.0",
     "prettier": "^2.3.1",
     "stylelint": "^13.13.1",

diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="stylesheet" href="%PUBLIC_URL%/themes/main.css"  type = "text/css" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Free and easy-to-use admin template based on React 17+" />
     <meta name="keywords" content="altence lightence admin template react redux responsive free" />

diff --git a/src/App.tsx b/src/App.tsx
@@ -13,6 +13,7 @@ import { usePWA } from './hooks/usePWA';
 import { useThemeWatcher } from './hooks/useThemeWatcher';
 import { useAppSelector } from './hooks/reduxHooks';
 import { themeObject } from './styles/themes/themeVariables';
+import { ThemeConfigProvider } from './styles/ThemeConfigProvider';
 
 const App: React.FC = () => {
   const { language } = useLanguage();
@@ -28,11 +29,13 @@ const App: React.FC = () => {
     <>
       <meta name="theme-color" content={themeObject[theme].primary} />
       <GlobalStyle />
-      <HelmetProvider>
-        <ConfigProvider locale={language === 'en' ? enUS : deDe}>
-          <AppRouter />
-        </ConfigProvider>
-      </HelmetProvider>
+      <ThemeConfigProvider theme={theme}>
+        <HelmetProvider>
+          <ConfigProvider locale={language === 'en' ? enUS : deDe}>
+            <AppRouter />
+          </ConfigProvider>
+        </HelmetProvider>
+      </ThemeConfigProvider>
     </>
   );
 };

diff --git a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { SearchOutlined, PlusCircleFilled, CloseOutlined } from '@ant-design/icons';
-import { DayjsDatePicker } from '@app/components/common/pickers/DayjsDatePicker';
+import { BaseRangePicker } from '@app/components/common/pickers/BaseRangePicker';
 import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
 import { BasePopover } from '@app/components/common/BasePopover/BasePopover';
 import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput';
@@ -114,7 +114,7 @@ export const Input = styled(BaseInput)`
   line-height: 1.375rem;
 `;
 
-export const RangePicker = styled(DayjsDatePicker.RangePicker)`
+export const RangePicker = styled(BaseRangePicker)`
   width: 100%;
   margin-bottom: 0.875rem;
 

diff --git a/src/components/common/BaseButton/BaseButton.styles.ts b/src/components/common/BaseButton/BaseButton.styles.ts
@@ -14,6 +14,17 @@ export const Button = styled(AntButton)<BtnProps>`
   justify-content: center;
   gap: 0.3rem;
 
+  font-weight: 600;
+  box-shadow: none;
+
+  &.ant-btn.ant-btn-icon-only > span {
+    transform: none;
+  }
+
+  &:not(:disabled):focus-visible {
+    outline: none;
+  }
+
   ${(props) =>
     props.$noStyle &&
     css`
@@ -28,9 +39,12 @@ export const Button = styled(AntButton)<BtnProps>`
   &[disabled]:hover {
     color: var(--disabled-color);
   }
+
   ${(props) =>
     !props.danger &&
     css`
+      transition-duration: 0.3s;
+
       ${props.$severity &&
       css`
         box-shadow: none;
@@ -41,34 +55,61 @@ export const Button = styled(AntButton)<BtnProps>`
 
         color: ${defineColorBySeverity(props.$severity)};
 
-        &:hover {
+        &:focus,
+        &:not(:disabled):hover {
           background: var(--background-color);
 
           border-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
 
           color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
         }
+      `}
 
+      ${(typeof props.type === 'undefined' || props.type === 'default' || props.type === 'dashed') &&
+      css`
         &:focus {
-          background: var(--background-color);
-
-          border-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
-
-          color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
+          background-color: var(--background-color);
         }
+
+        ${props.$severity === 'info' &&
+        css`
+          &:focus,
+          &:not(:disabled):hover {
+            color: var(--ant-primary-color-hover);
+            border-color: var(--ant-primary-color-hover);
+          }
+        `}
       `}
 
       ${props.type === 'text' &&
       css`
-        &:hover {
+        &:focus {
+          background-color: rgba(0, 0, 0, 0.02);
+        }
+
+        &:not(:disabled):hover {
           background: transparent;
           color: var(--secondary-color);
         }
       `}
 
       ${props.type === 'ghost' &&
       css`
-        &:hover {
+        color: var(--primary-color);
+        border-color: var(--primary-color);
+
+        &:disabled {
+          cursor: not-allowed;
+          border-color: var(--border-base-color);
+          background-color: var(--disabled-bg-color);
+        }
+
+        &:focus {
+          color: var(--ant-primary-color-hover);
+          border-color: var(--ant-primary-color-hover);
+        }
+
+        &:not(:disabled):hover {
           color: var(--secondary-color);
 
           border-color: var(--secondary-color);
@@ -79,7 +120,12 @@ export const Button = styled(AntButton)<BtnProps>`
       css`
         background: var(--primary-color);
 
-        &:hover {
+        &:focus {
+          border-color: var(--ant-primary-color-hover);
+          background: var(--ant-primary-color-hover);
+        }
+
+        &:not(:disabled):hover {
           background: var(--secondary-color);
 
           border-color: var(--secondary-color);
@@ -88,6 +134,17 @@ export const Button = styled(AntButton)<BtnProps>`
 
       ${props.type === 'link' &&
       css`
+        color: var(--primary-color);
+
+        &:focus {
+          color: var(--ant-primary-color-hover);
+        }
+
+        &:not(:disabled):hover {
+          text-decoration: none;
+          color: var(--ant-primary-color-hover);
+        }
+
         & span,
         a {
           text-decoration: underline;

diff --git a/src/components/common/BaseCalendar/BaseCalendar.tsx b/src/components/common/BaseCalendar/BaseCalendar.tsx
@@ -0,0 +1,2 @@
+export { Calendar as BaseCalendar } from 'antd';
+export type { CalendarProps as BaseCalendarProps } from 'antd';
diff --git a/src/components/common/BaseCard/BaseCard.styles.ts b/src/components/common/BaseCard/BaseCard.styles.ts
@@ -17,6 +17,9 @@ export const Card = styled(AntCard)<CardInternalProps>`
   box-shadow: var(--box-shadow);
 
   .ant-card-head {
+    justify-content: end;
+    min-height: 50px;
+
     border-bottom: 0;
 
     font-weight: ${FONT_WEIGHT.bold};

diff --git a/src/components/common/BaseFeed/BaseFeed.tsx b/src/components/common/BaseFeed/BaseFeed.tsx
@@ -22,6 +22,7 @@ export const BaseFeed: React.FC<BaseFeedProps> = ({ next, hasMore, target = 'mai
         </S.SpinnerWrapper>
       }
       scrollableTarget={target}
+      style={{ overflow: 'visible' }}
     >
       <S.NewsWrapper>{children}</S.NewsWrapper>
     </InfiniteScroll>

diff --git a/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts b/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts
@@ -10,6 +10,17 @@ interface InternalFormItemProps {
 export type BaseFormItemProps = FormItemProps;
 
 export const BaseFormItem = styled(Form.Item)<InternalFormItemProps>`
+  .ant-input {
+    font-size: 1rem;
+    font-family: inherit;
+  }
+
+  .ant-input:disabled {
+    color: var(--disabled-color);
+    background-color: var(--disabled-bg-color);
+    cursor: not-allowed;
+  }
+
   .ant-form-item-label > label {
     color: var(--primary-color);
   }

diff --git a/src/components/common/inputs/BaseInput/BaseInput.styles.ts b/src/components/common/inputs/BaseInput/BaseInput.styles.ts
@@ -3,6 +3,8 @@ import { Input as AntInput } from 'antd';
 import { FONT_WEIGHT, FONT_SIZE } from '@app/styles/themes/constants';
 
 export const Input = styled(AntInput)`
+  font-family: inherit;
+
   .ant-input-group-addon:first-child,
   .ant-input-group-addon:last-child {
     min-width: 5.5rem;

diff --git a/src/components/common/inputs/InputPassword/InputPassword.styles.ts b/src/components/common/inputs/InputPassword/InputPassword.styles.ts
@@ -2,6 +2,8 @@ import styled from 'styled-components';
 import { BaseInput } from '../BaseInput/BaseInput';
 
 export const InputPassword = styled(BaseInput.Password)`
+  font-family: inherit;
+
   .ant-input-password-icon.anticon {
     color: var(--disabled-color);
     &:hover {

diff --git a/src/components/common/inputs/SearchInput/SearchInput.styles.ts b/src/components/common/inputs/SearchInput/SearchInput.styles.ts
@@ -4,6 +4,8 @@ import { BaseInput } from '../BaseInput/BaseInput';
 import { BaseSpace } from '../../BaseSpace/BaseSpace';
 
 export const SearchInput = styled(BaseInput.Search)`
+  font-family: inherit;
+
   & .ant-input-prefix {
     margin: 0.5rem;
   }

diff --git a/src/components/common/pickers/BaseDatePicker.tsx b/src/components/common/pickers/BaseDatePicker.tsx
@@ -1,10 +1,16 @@
 import React from 'react';
-import { PickerProps } from 'antd/lib/date-picker/generatePicker';
-import { DayjsDatePicker } from './DayjsDatePicker';
-import { AppDate } from 'constants/Dates';
+import { DatePicker } from 'antd';
+import type { DatePickerProps as BaseDatePickerProps } from 'antd';
+import styled from 'styled-components';
 
-export type BaseDatePickerProps = PickerProps<AppDate>;
+export type { BaseDatePickerProps };
+
+const StyledDatePicker = styled(DatePicker)`
+  & input {
+    font-family: inherit;
+  }
+`;
 
 export const BaseDatePicker = React.forwardRef<React.Component<BaseDatePickerProps>, BaseDatePickerProps>(
-  ({ className, ...props }, ref) => <DayjsDatePicker ref={ref} className={className} {...props} />,
+  ({ className, ...props }, ref) => <StyledDatePicker ref={ref} className={className} {...props} />,
 );
diff --git a/src/components/common/pickers/BaseRangePicker.tsx b/src/components/common/pickers/BaseRangePicker.tsx
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { DatePicker } from 'antd';
+import { RangePickerProps as BaseRangePickerProps } from 'antd/lib/date-picker';
+
+export type { BaseRangePickerProps };
+
+export const BaseRangePicker = styled(DatePicker.RangePicker)<BaseRangePickerProps>`
+  & input {
+    font-family: inherit;
+  }
+`;
diff --git a/src/components/common/pickers/BaseTimePicker.tsx b/src/components/common/pickers/BaseTimePicker.tsx
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { DatePicker } from 'antd';
+import { TimePickerProps as BaseTimePickerProps } from 'antd';
+
+export type { BaseTimePickerProps };
+
+export const BaseTimePicker = styled(DatePicker.TimePicker)<BaseTimePickerProps>`
+  & input {
+    font-family: inherit;
+  }
+`;
diff --git a/src/components/common/pickers/DayjsDatePicker.tsx b/src/components/common/pickers/DayjsDatePicker.tsx
diff --git a/src/components/common/pickers/TimeRangePicker.tsx b/src/components/common/pickers/TimeRangePicker.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { DayjsDatePicker } from '@app/components/common/pickers/DayjsDatePicker';
+import { BaseRangePicker } from '@app/components/common/pickers/BaseRangePicker';
 import { AppDate, Dates } from '@app/constants/Dates';
 
 const clearDate = Dates.getToday().hour(0).minute(0).second(0).millisecond(0);
@@ -23,7 +23,7 @@ export const TimeRangePicker: React.FC<TimePickerProps> = ({ timeRange, setTimeR
   };
 
   return (
-    <DayjsDatePicker.RangePicker
+    <BaseRangePicker
       value={[timeRangePrepared[0], timeRangePrepared[1]]}
       picker="time"
       format="HH:mm"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { Calendar as BaseCalendar } from 'antd';
		export type { CalendarProps as BaseCalendarProps } from 'antd';