altence / lightence-ant-design-react-template Goto Github PK

Describe the bug
The filter isn't working at all.

Expected behavior
It must work once the Apply button is clicked. Not once input changed.

Make the article title bigger.

Describe the bug
lighthouse shows 60% score for a11y

To Reproduce
Steps to reproduce the behavior:

1. Run chrome lighthouse

Expected behavior
a11y should be >90%

1. Implement Recently Added NFTs cards for tablet and desktop
2. Update data on charts. Make it close to design charts
3. Recent activity add overflow only for cards
4. Sider. Your Activity Story. Overflow should not cover title
5. You can spend time on insta stories implementation
6. Investigate and add suggestions for animations. themeforest.net

from the email:

I get an attached error while building project however I just downloaded the project and built it.
I didn't make any changes in the project.

Here is my pc env specification.
Node: 16.0.0
Npm: 7.10.0
Yarn: 1.22.4
Typescript: 4.7.4

Describe the bug
Feed filter contains empty tags

Expected behavior
Tags should be the same as on cards.

Screenshots

Describe the bug
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of Styled(BaseCheckbox).

To Reproduce
Steps to reproduce the behavior:

1. Go to '/auth/login' in web browser
2. See browser console

Desktop:

• Windows
• Browser [Chrome, FF]

Describe the bug
email and password inputs use different fonts
The same issue for Sign up form as well

Expected behavior
email and password should both use Montserrat font.

404. The page you are looking for doesn't exist or has been moved.

https://www.altence.com/lightence-admin-demo

Hello Team, thank you for this project !.
I forked this project to build my own app (it is for our office). I have almost finished the developments but i cannot deploy the app.
I cannot even see the "index.html" in the build folder (Looks like it have not been generated).

On heroku, the app is deployed but it cannot start. Here is what i got :

2022-11-17T11:30:11.611665+00:00 heroku[run.1263]: State changed from up to complete
2022-11-17T11:48:43.147702+00:00 heroku[web.1]: State changed from crashed to starting
2022-11-17T11:48:54.743785+00:00 heroku[web.1]: Starting process with command npm start
2022-11-17T11:48:56.457981+00:00 app[web.1]:
2022-11-17T11:48:56.457996+00:00 app[web.1]: > [email protected] start
2022-11-17T11:48:56.457997+00:00 app[web.1]: > yarn buildThemes && craco start
2022-11-17T11:48:56.457997+00:00 app[web.1]:
2022-11-17T11:48:57.900755+00:00 app[web.1]: command not found: lessc
2022-11-17T11:48:58.054611+00:00 heroku[web.1]: Process exited with status 127
2022-11-17T11:48:58.119504+00:00 heroku[web.1]: State changed from starting to crashed

Please help me, i am almost at the deadline !!

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Need to check and add RTL support

yarn build production does not works
It does create the build folder but does not works

Is your feature request related to a problem? Please describe.
There is a feature of ANTD Form, using which we can trigger Form events like submit, get validation errors anywhere we want, without having to use the actual submit button.

Describe the solution you'd like
I tried using the ref props, but it's not working on the BaseButtonsForm

Describe the bug
When running starter project in FireFox custom scrolling of only content part is broken. Site works with default scroll behavior

Also that brakes background filling. So full page looks like that:

No problem in Chrome.

Also, main project (from main branch) works as expected in FireFox.

To Reproduce
Steps to reproduce the behavior:

1. Create "starter" project by running git clone -b starter https://github.com/altence/lightence-admin.git my-awesome-project && cd my-awesome-project
2. Run it with yarn install && yarn start
3. Open http://localhost:3000/profile/personal-info in FireFox
4. Scroll to the bottom of the page

Expected behavior
Expected that starter project will work same as main one. Without broken styles.

Desktop (please complete the following information):

• OS: Windows
• Browser FireFox
• Version 109.0

Additional context
It is really important for people who want to use this project as base for their project.

Describe the solution you'd like
Add Role/Permission management system to provide access to pages / components based on user role.

Describe the bug
ForwardRef error

To Reproduce
Steps to reproduce the behavior:

1. Go to Advanced Forms -> Step Form
2. Click Next button
3. You will see an error in the console

Expected behavior
No errors

Screenshots

Is your feature request related to a problem? Please describe.
Sign up form is too large and it's necessary to scroll it even on medium screens. Need to remove the scroll by updating the form.

Describe the solution you'd like

1. Remove Confirm Password input
2. Reduce space between form items
3. Place Sign up with Google and Sign up with Facebook on the same row.

Describe the bug
There is a console warning (error) once the user opens any page

"
Error with Feature-Policy header: Unrecognized feature: 'none'.
"

Screenshots

A user complained about jumping title

Describe the bug
More menu -> Archivate

Expected behavior
Rename to
More menu -> Archive

Describe the bug
TypeScript error in /src/pages/uiComponentsPages/forms/DateTimePickersPage.tsx(18,12):

To Reproduce
Steps to reproduce the behavior:

1. Go to the root directory terminal
2. Run command yarn start
3. In the terminal you can see this issue

'DayjsDatePicker' cannot be used as a JSX component.

Its instance type 'Component<PickerProps & { status?: "" | "warning" | "error" | undefined; dropdownClassName?: string | undefined; popupClassName?: string | undefined; }, unknown, any> & CommonPickerMethods' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/node_modules/@types/styled-components/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.ts(2786)

Describe the bug
when i try to start by "yarn start" it shows me "error:030000086: digital envelope routines::initialization error" ... more at screen.

Expected behavior
start server

Screenshots
https://pasteboard.co/WSvFiLFumXWL.png

Desktop (please complete the following information):
Win11
Chrome
v. 113.0.5672.127

node 20.0.0 (updated to 20.2, but nothing changed)

Additional context
I tried npm audit, reinstall and version you working on it at pull request, but nothing helps, on overstackflow people recommend only chance is downgrade node.

Thank you. Btw your your discord invite in readme doesnt work.

To Reproduce
Steps to reproduce the behavior:

Screenshots
Screenshot

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome

Additional context
Add any other context about the problem here.

Describe the bug
After click selector/dropdown/datepicker the app is freezing (potential antd issue with react 18).

To Reproduce
Steps to reproduce the behavior:

1. Go to medical dashboard
2. Click on selector to choose new month

Expected behavior
After click popup is open with the list of months.

Screenshots

Desktop (please complete the following information):

• OS: ubuntu 22.04
• Browser: chrome

Additional context
With React 18 this happens intermittently on some pages

This is the first time I'm trying to deploy the demo locally, I didn't have a problem with deploying npmfixed branch. Now I'm going to use default branch and after fixing all requirements as described by Altence team, I get this error after using yarn start command :

Compiled with warnings.

my-awesome-project/src/components/profile/profileCard/profileFormNav/nav/PersonalInfo/PhoneItem/PhoneItem.tsx
TypeScript error in /my-awesome-project/src/components/profile/profileCard/profileFormNav/nav/PersonalInfo/PhoneItem/PhoneItem.tsx(34,27):
No overload matches this call.
  Overload 1 of 2, '(props: { onChange: (value?: E164Number | undefined) => void; value?: E164Number | undefined; country?: CountryCode | undefined; international?: boolean | undefined; ... 4 more ...; smartCaret?: boolean | undefined; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ disabled: boolean | undefined; className: string; onClick: (() => void) | undefined; }' is not assignable to type 'IntrinsicAttributes & { onChange: (value?: E164Number | undefined) => void; value?: E164Number | undefined; country?: CountryCode | undefined; ... 5 more ...; smartCaret?: boolean | undefined; } & { ...; } & { ...; }'.
      Property 'disabled' does not exist on type 'IntrinsicAttributes & { onChange: (value?: E164Number | undefined) => void; value?: E164Number | undefined; country?: CountryCode | undefined; ... 5 more ...; smartCaret?: boolean | undefined; } & { ...; } & { ...; }'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<PhoneInputComponentType, any, {}, never, PhoneInputComponentType, PhoneInputComponentType>): ReactElement<...>', gave the following error.
    Type '{ disabled: boolean | undefined; className: string; onClick: (() => void) | undefined; }' is not assignable to type 'IntrinsicAttributes & { onChange: (value?: E164Number | undefined) => void; value?: E164Number | undefined; country?: CountryCode | undefined; ... 5 more ...; smartCaret?: boolean | undefined; } & { ...; } & { ...; }'.
      Property 'disabled' does not exist on type 'IntrinsicAttributes & { onChange: (value?: E164Number | undefined) => void; value?: E164Number | undefined; country?: CountryCode | undefined; ... 5 more ...; smartCaret?: boolean | undefined; } & { ...; } & { ...; }'.  TS2769

    32 |       ]}
    33 |     >
  > 34 |       <S.PhoneNumberInput disabled={verified} className="ant-input" onClick={onClick} />
       |                           ^
    35 |     </BaseButtonsForm.Item>
    36 |   );
    37 | };

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

I would appreciate your attention and response. Thank you.

Is your feature request related to a problem? Please describe.
Currently theme changing doesn't happen so smooth and have some bad user experience.

Describe the solution you'd like
Instead of build files '.less' for each theme would be nice to use CSS variables. We can easily use variables in styled components and replace and customize antd basic styles. Changing theme will happen by changing data attribute in document which will trigger updating all styles.

when setting up the project locally it is giving the following issue - >

Is your feature request related to a problem? Please describe.
Ant Design Menu component suggest to use items instead of children for better performace.

Describe the solution you'd like
Check sidebar and Dropdowns page and fix console warnings.

Describe the bug
Once the user opens any page in dev mode, they see the following error:

"
Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.
Move code with side effects to componentDidMount, and set initial state in the constructor.

Please update the following components: SideEffect(NullComponent)
"

Expected behavior
No error

Screenshots

Hi I think the link has been revoked

Describe the bug
No hover effect on Kanban Card Extra settings dropdown

To Reproduce
Steps to reproduce the behavior:

1. Go to Kanban
2. Click on '...'
3. You will see that there is missing hover effect

Expected behavior
Add hover effect

Screenshots

I got this error while yarn build command and here is my package.json file

{
"name": "lightence-admin",
"version": "1.0.0",
"license": "MIT",
"description": "Free and easy-to-use admin template based on React 17+",
"repository": {
"type": "git",
"url": "git+github.com:altence/lightence-admin.git"
},
"bugs": {
"url": "https://github.com/altence/lightence-admin/issues"
},
"dependencies": {
"@ant-design/icons": "^4.6.2",
"@craco/craco": "^6.1.2",
"@reduxjs/toolkit": "^1.7.1",
"@types/lodash": "^4.14.188",
"antd": "^4.22.4",
"antd-mask-input": "^0.1.15",
"axios": "^0.24.0",
"axios-mock-adapter": "^1.20.0",
"country-list": "^2.2.0",
"dayjs": "^1.11.0",
"echarts": "^5.1.2",
"echarts-for-react": "^3.0.1",
"elt-react-credit-cards": "^0.0.1",
"google-map-react": "^2.1.10",
"history": "^5.3.0",
"i18next": "^20.4.0",
"leaflet": "^1.7.1",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"patch-package": "^6.4.7",
"pigeon-maps": "^0.19.7",
"postinstall-postinstall": "^2.1.0",
"react": "^17.0.2",
"react-avatar": "^5.0.3",
"react-big-calendar": "^1.5.0",
"react-country-flag": "^3.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-i18next": "^11.11.4",
"react-infinite-scroll-component": "^6.1.0",
"react-insta-stories": "^2.3.0",
"react-leaflet": "next",
"react-phone-number-input": "^3.1.27",
"react-redux": "^7.2.6",
"react-responsive": "^8.2.0",
"react-router-dom": "^6.0.2",
"react-router-hash-link": "^2.4.3",
"react-scripts": "4.0.3",
"react-simple-maps": "^2.3.0",
"react-slick": "^0.28.1",
"react-trello": "^2.2.11",
"react-verification-input": "^2.0.3",
"redux-persist": "^6.0.0",
"slick-carousel": "^1.8.1",
"slotpicker": "^3.0.1",
"styled-components": "^5.3.0",
"typeface-lato": "^1.1.13",
"typeface-montserrat": "^1.1.13",
"typescript": "^4.1.2",
"uuid": "^8.3.2",
"web-vitals": "^1.0.1",
"workbox-background-sync": "^5.1.3",
"workbox-broadcast-update": "^5.1.3",
"workbox-cacheable-response": "^5.1.3",
"workbox-core": "^5.1.3",
"workbox-expiration": "^5.1.3",
"workbox-google-analytics": "^5.1.3",
"workbox-navigation-preload": "^5.1.3",
"workbox-precaching": "^5.1.3",
"workbox-range-requests": "^5.1.3",
"workbox-routing": "^5.1.3",
"workbox-strategies": "^5.1.3",
"workbox-streams": "^5.1.3"
},
"scripts": {
"start": "yarn buildThemes && craco --openssl-legacy-provider start",
"build": "yarn buildThemes && craco --openssl-legacy-provider build",
"test": "craco test",
"eject": "craco eject",
"lint": "eslint "/**/.{js,ts,tsx}" --fix",
"lint:styles": "stylelint '/**/.{js,ts,tsx}'",
"prepare": "husky install",
"postinstall": "patch-package",
"buildThemes": "lessc --js --clean-css="--s1 --advanced" src/styles/themes/main.less public/themes/main.css"
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all",
"not IE 11"
],
"devDependencies": {
"@types/country-list": "^2.1.0",
"@types/google-map-react": "^2.1.3",
"@types/leaflet": "^1.7.9",
"@types/react": "^17.0.43",
"@types/react-big-calendar": "^0.38.2",
"@types/react-dom": "^17.0.14",
"@types/react-helmet": "^6.1.5",
"@types/react-phone-number-input": "^3.0.13",
"@types/react-responsive": "^8.0.2",
"@types/react-router-dom": "^5.1.7",
"@types/react-router-hash-link": "^2.4.4",
"@types/react-simple-maps": "^1.0.7",
"@types/react-slick": "^0.23.8",
"@types/styled-components": "^5.1.10",
"@types/uuid": "^8.3.4",
"@typescript-eslint/eslint-plugin": "^5.10.0",
"@typescript-eslint/parser": "^5.8.0",
"craco-alias": "^3.0.1",
"eslint": "^7.28.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"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",
"stylelint-config-recommended": "^5.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.10.0",
"webpack-bundle-analyzer": "^4.4.2",
"webpackbar": "^5.0.0-3"
},
"lint-staged": {
"/**/.{js,ts,tsx}": "yarn lint"
},
"engines": {
"node": "16.x"
},
"resolutions": {
"react-error-overlay": "6.0.9",
"source-map": "^0.8.0-beta.0"
},
"packageManager": "[email protected]",
"keywords": [
"lightence",
"admin",
"admin-dashboard",
"ant-design",
"react"
]
}

Is your feature request related to a problem? Please describe.

1. Sometimes it takes significant time to load assets from res.cloudinary
2. Reducing the bundle size by optimizing local assets

Describe the solution you'd like

1. Take an asset
2. Optimize it (if image then convert to .webp https://image.online-convert.com/ru/convert-to-webp and postprocess by https://tinypng.com/
3. Put all the assets (local images and res.cloudinary) to the CloudFlare

Describe the solution you'd like
https://ant.design/docs/react/migration-v5

Describe the bug
When the header filter is applied there is no visual effect on the icon

Expected behavior
Filter icon should have some effect when active

Is there any docs in order to get auth pages work?

When the latest screening user is selected let's color their name along with the avatar border

Describe the bug
utils.tsx contains function that may return ReactNode. It's better to create a component for it.

Expected behavior
No markup in utils.ts

Describe the bug

When screen width is 1282px < width < 1362px the right "ProfileDropdown" move to next column. It's a reason why header have bigger height and display search and button incorrectly.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Dashboard' page.
2. Resize screen to 1282px < width < 1362px
3. See that search input and github button shows incorrectly.

Expected behavior
search input and github button in header should display with correct styles. Header height should be the same on different screen sizes.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 22.04
• Browser Google Chrome
• Version 104.0.5112.79

Describe the bug
When the user clicks on the assignee area, it's getting removed.

Expected behavior
Assignee should be removed once user clicks on X button, not assignee themselves

Describe the bug
There is a console error once user opens any page

"
react_devtools_backend.js:4061 z / z2 / zlevel of displayable is invalid, which may cause unexpected errors
"

Screenshots

Add hover effect while hovering sidebar menu item

Describe the bug
There are missing i18n for error messages in Step Form

Expected behavior
Add i18n and check all messages on having the corresponding i18n.

Screenshots

Investigate and add animation for card hover, examples can be found here themeforest.net

Add visual effects while hovering

To Reproduce
Steps to reproduce the behavior:

Screenshots
https://i.imgur.com/V3VZI3F.png

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome

Real Covid Statistics doesn't work. Looks like API is down

Steps to reproduce the behavior:

1. Go to Medical Dashboard
2. Scroll down to Real Covid Statistics
3. See error

Expected behavior
You should see covid chart

Screenshots

This is not a bug report, just a question. My code works in main, but not in v2.0.0, maybe due to some babel upgrade. After bisecting, I found out that main doesn't contain v2.0.0 at all. Why is this the case? Which one should I use?