Remzona54/Remnawave_frontend
1
0
Fork 0
mirror of https://github.com/remnawave/frontend.git synced 2026-05-13 12:16:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore: add @lottiefiles/dotlottie-react dependency and update Lottie components to use .lottie files

Browse source
This commit is contained in:
kastov 2026-03-22 05:08:29 +03:00
parent a1edc231ed
commit b34e3b2e60
No known key found for this signature in database
GPG key ID: 1B27BE29057F4C90
16 changed files with 53 additions and 17747 deletions
Download patch file Download diff file Expand all files Collapse all files

39
package-lock.json generated
View file

@ -19,6 +19,7 @@
"@gfazioli/mantine-split-pane": "^3.0.0",
"@gfazioli/mantine-text-animate": "^2.4.2",
"@highcharts/react": "4.1.0",
"@lottiefiles/dotlottie-react": "^0.18.7",
"@lukemorales/query-key-factory": "^1.3.4",
"@mantine/carousel": "^8.3.17",
"@mantine/charts": "^8.3.17",
@ -60,7 +61,6 @@
"is-svg": "^6.1.0",
"json-edit-react": "^1.29.0",
"lodash": "^4.17.23",
"lottie-react": "^2.4.1",
"mantine-datatable": "8.3.13",
"mantine-form-zod-resolver": "^1.3.0",
"mantine-react-table": "^2.0.0-beta.9",
@ -2522,6 +2522,24 @@
"dev": true,
"license": "MIT"
},
"node_modules/@lottiefiles/dotlottie-react": {
"version": "0.18.7",
"resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-react/-/dotlottie-react-0.18.7.tgz",
"integrity": "sha512-aEUS3GR7U3ldT74Xt4l1pPz5KfY4IOXM30e4LMChXH2qNcwy3PZdoT7i44jf+vV+qgEffXshAAepVAZD6XZmTw==",
"license": "MIT",
"dependencies": {
"@lottiefiles/dotlottie-web": "0.67.0"
},
"peerDependencies": {
"react": "^17 || ^18 || ^19"
}
},
"node_modules/@lottiefiles/dotlottie-web": {
"version": "0.67.0",
"resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-web/-/dotlottie-web-0.67.0.tgz",
"integrity": "sha512-XdMbVQAKqI8NLGqwN1RYQv0eGDM74JhISJFOovBf7k2Uh5B3QJwMOYhMqz8L0UZAs+LzXYdP/wZR7s8hh0uo2g==",
"license": "MIT"
},
"node_modules/@lukemorales/query-key-factory": {
"version": "1.3.4",
"resolved": "https://registry.npmjs.org/@lukemorales/query-key-factory/-/query-key-factory-1.3.4.tgz",
@ -10317,25 +10335,6 @@
"loose-envify": "cli.js"
}
},
"node_modules/lottie-react": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.4.1.tgz",
"integrity": "sha512-LQrH7jlkigIIv++wIyrOYFLHSKQpEY4zehPicL9bQsrt1rnoKRYCYgpCUe5maqylNtacy58/sQDZTkwMcTRxZw==",
"license": "MIT",
"dependencies": {
"lottie-web": "^5.10.2"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/lottie-web": {
"version": "5.13.0",
"resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.13.0.tgz",
"integrity": "sha512-+gfBXl6sxXMPe8tKQm7qzLnUy5DUPJPKIyRHwtpCpyUEYjHYRJC/5gjUvdkuO2c3JllrPtHXH5UJJK8LRYl5yQ==",
"license": "MIT"
},
"node_modules/lower-case": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",

4
package.json
View file

@ -43,6 +43,7 @@
"@gfazioli/mantine-split-pane": "^3.0.0",
"@gfazioli/mantine-text-animate": "^2.4.2",
"@highcharts/react": "4.1.0",
"@lottiefiles/dotlottie-react": "^0.18.7",
"@lukemorales/query-key-factory": "^1.3.4",
"@mantine/carousel": "^8.3.17",
"@mantine/charts": "^8.3.17",
@ -84,7 +85,6 @@
"is-svg": "^6.1.0",
"json-edit-react": "^1.29.0",
"lodash": "^4.17.23",
"lottie-react": "^2.4.1",
"mantine-datatable": "8.3.13",
"mantine-form-zod-resolver": "^1.3.0",
"mantine-react-table": "^2.0.0-beta.9",
@ -194,4 +194,4 @@
"zod-validation-error": "^4.0.0"
}
}
}
}

17703
src/shared/assets/lotties/checkmark.json
View file

File diff suppressed because it is too large Load diff

BIN
src/shared/assets/lotties/checkmark.lottie Normal file
View file

Binary file not shown.

1
src/shared/assets/lotties/globe.json
View file

File diff suppressed because one or more lines are too long

BIN
src/shared/assets/lotties/globe.lottie Normal file
View file

Binary file not shown.

1
src/shared/assets/lotties/satellite.json
View file

File diff suppressed because one or more lines are too long

BIN
src/shared/assets/lotties/satellite.lottie Normal file
View file

Binary file not shown.

1
src/shared/assets/lotties/stop-v2.json
View file

File diff suppressed because one or more lines are too long

BIN
src/shared/assets/lotties/stop-v2.lottie Normal file
View file

Binary file not shown.

7
src/shared/ui/lotties/checkmark/checkmark.tsx
View file

@ -1,7 +1,8 @@
import Lottie from 'lottie-react'
import { DotLottieReact } from '@lottiefiles/dotlottie-react'
import { FC } from 'react'
import lottie from '../../../assets/lotties/checkmark.json'
// @ts-expect-error - no types for dotlottie-react
import lottie from '../../../assets/lotties/checkmark.lottie'
import { IProps } from './interfaces/props.interface'
export const LottieCheckmarkShared: FC<IProps> = (props) => {
@ -9,7 +10,7 @@ export const LottieCheckmarkShared: FC<IProps> = (props) => {
return (
<div style={{ width, height }}>
<Lottie animationData={lottie} autoplay={autoplay} controls loop={loop} />
<DotLottieReact autoplay={autoplay} loop={loop} src={lottie} />
</div>
)
}

9
src/shared/ui/lotties/globe/globe.tsx
View file

@ -1,15 +1,16 @@
import Lottie from 'lottie-react'
import { DotLottieReact } from '@lottiefiles/dotlottie-react'
import { FC } from 'react'
import globe from '../../../assets/lotties/globe.json'
// @ts-expect-error - no types for dotlottie-react
import globe from '../../../assets/lotties/globe.lottie'
import { IProps } from './interfaces/props.interface'
export const LottieGlobeShared: FC<IProps> = (props) => {
const { width = 96, height = 115 } = props
const { width = 96, height = 115, autoplay = true, loop = true } = props
return (
<div style={{ width, height }}>
<Lottie animationData={globe} autoplay controls loop />
<DotLottieReact autoplay={autoplay} loop={loop} src={globe} />
</div>
)
}

2
src/shared/ui/lotties/globe/interfaces/props.interface.ts
View file

@ -1,4 +1,6 @@
export interface IProps {
autoplay?: boolean
height?: number
loop?: boolean
width?: number
}

7
src/shared/ui/lotties/link/link.tsx
View file

@ -1,7 +1,8 @@
import Lottie from 'lottie-react'
import { DotLottieReact } from '@lottiefiles/dotlottie-react'
import { FC } from 'react'
import link from '../../../assets/lotties/satellite.json'
// @ts-expect-error - no types for dotlottie-react
import link from '../../../assets/lotties/satellite.lottie'
import { IProps } from './interfaces/props.interface'
export const LottieLinkShared: FC<IProps> = (props) => {
@ -9,7 +10,7 @@ export const LottieLinkShared: FC<IProps> = (props) => {
return (
<div style={{ width, height }}>
<Lottie animationData={link} autoplay controls loop />
<DotLottieReact autoplay loop src={link} />
</div>
)
}

7
src/shared/ui/lotties/stop/stop.tsx
View file

@ -1,7 +1,8 @@
import Lottie from 'lottie-react'
import { DotLottieReact } from '@lottiefiles/dotlottie-react'
import { FC } from 'react'
import lottie from '../../../assets/lotties/stop-v2.json'
// @ts-expect-error - no types for dotlottie-react
import lottie from '../../../assets/lotties/stop-v2.lottie'
import { IProps } from './interfaces/props.interface'
export const LottieStopShared: FC<IProps> = (props) => {
@ -9,7 +10,7 @@ export const LottieStopShared: FC<IProps> = (props) => {
return (
<div style={{ width, height }}>
<Lottie animationData={lottie} autoplay={autoplay} controls loop={loop} />
<DotLottieReact autoplay={autoplay} loop={loop} src={lottie} />
</div>
)
}

19
vite.config.ts
View file

@ -13,6 +13,7 @@ import * as dotenv from 'dotenv'
dotenv.config({ path: `${__dirname}/.env` })
export default defineConfig({
assetsInclude: ['**/*.lottie'],
plugins: [
react(),
tsconfigPaths(),
@ -49,9 +50,10 @@ export default defineConfig({
output: {
manualChunks: {
assets: [
'/src/shared/assets/lotties/satellite.json',
'/src/shared/assets/lotties/checkmark.json',
'/src/shared/assets/lotties/stop-v2.json'
'/src/shared/assets/lotties/satellite.lottie',
'/src/shared/assets/lotties/checkmark.lottie',
'/src/shared/assets/lotties/stop-v2.lottie',
'/src/shared/assets/lotties/globe.lottie'
],
react: [
'react',
@ -61,8 +63,12 @@ export default defineConfig({
'react-dom/client'
],
markdown: ['react-markdown', 'remark-gfm', 'rehype-raw'],
icons: ['react-icons/pi', 'react-icons/fa', 'react-icons/tb', 'lottie-web'],
date: ['dayjs'],
icons: [
'react-icons/pi',
'react-icons/fa',
'react-icons/tb',
'@lottiefiles/dotlottie-react'
],
zod: ['axios', 'zod', 'zustand', 'xbytes', 'zod-to-json-schema'],
utils: [
'nanoid',
@ -72,7 +78,8 @@ export default defineConfig({
'is-svg',
'sax',
'jsonc-parser',
'json-edit-react'
'json-edit-react',
'dayjs'
],
mantine: [
'@mantine/core',