Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-09 23:15:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add options to sort and resize graphs in dash. widget

Browse Source
This commit is contained in:
MauriceNino
2023-02-10 18:20:28 +01:00
parent bb010ff54a
commit a05e80bf26
11 changed files with 436 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -53,7 +53,7 @@
"dockerode": "^3.3.2",
"embla-carousel-react": "^7.0.0",
"fily-publish-gridstack": "^0.0.13",
"framer-motion": "^6.5.1",
"framer-motion": "^9.0.2",
"i18next": "^21.9.1",
"i18next-browser-languagedetector": "^6.1.5",
"i18next-http-backend": "^1.4.1",

119
src/components/Dashboard/Tiles/Widgets/DraggableList.tsx Normal file
View File

@@ -0,0 +1,119 @@
import { Collapse, createStyles, Stack, Text } from '@mantine/core';
import { IconChevronDown, IconGripVertical } from '@tabler/icons';
import { Reorder, useDragControls } from 'framer-motion';
import { FC, ReactNode, useState } from 'react';
import { IDraggableListInputValue } from '../../../../widgets/widgets';
const useStyles = createStyles((theme) => ({
container: {
display: 'flex',
flexDirection: 'column',
borderRadius: theme.radius.md,
border: `1px solid ${
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
}`,
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white,
marginBottom: theme.spacing.xs,
gap: theme.spacing.xs,
},
row: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '12px 16px',
gap: theme.spacing.sm,
},
middle: {
flexGrow: 1,
},
symbol: {
fontSize: 16,
},
clickableIcons: {
color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[6],
cursor: 'pointer',
userSelect: 'none',
transition: 'transform .3s ease-in-out',
},
rotate: {
transform: 'rotate(180deg)',
},
collapseContent: {
padding: '12px 16px',
},
}));
type DraggableListParams = {
value: IDraggableListInputValue['defaultValue'];
onChange: (value: IDraggableListInputValue['defaultValue']) => void;
labels: Record<string, string>;
children?: Record<string, ReactNode>;
};
export const DraggableList: FC<DraggableListParams> = (props) => {
const keys = props.value.map((v) => v.key);
return (
<div>
<Reorder.Group
axis="y"
values={keys}
onReorder={(order) =>
props.onChange(order.map((key) => props.value.find((v) => v.key === key)!))
}
as="div"
>
{props.value.map((item) => (
<ListItem key={item.key} item={item} label={props.labels[item.key]}>
{props.children?.[item.key]}
</ListItem>
))}
</Reorder.Group>
</div>
);
};
const ListItem: FC<{
item: IDraggableListInputValue['defaultValue'][number];
label: string;
}> = (props) => {
const { classes, cx } = useStyles();
const controls = useDragControls();
const [showContent, setShowContent] = useState(false);
const hasContent = props.children != null && Object.keys(props.children).length !== 0;
return (
<Reorder.Item value={props.item.key} dragListener={false} dragControls={controls} as="div">
<div className={classes.container}>
<div className={classes.row}>
<IconGripVertical
className={classes.clickableIcons}
onPointerDown={(e) => controls.start(e)}
size={18}
stroke={1.5}
/>
<div className={classes.middle}>
<Text className={classes.symbol}>{props.label}</Text>
</div>
{hasContent && (
<IconChevronDown
className={cx(classes.clickableIcons, { [classes.rotate]: showContent })}
onClick={() => setShowContent(!showContent)}
size={18}
stroke={1.5}
/>
)}
</div>
{hasContent && (
<Collapse in={showContent}>
<Stack className={classes.collapseContent}>{props.children}</Stack>
</Collapse>
)}
</div>
</Reorder.Item>
);
};

106
src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
View File

@@ -3,24 +3,25 @@ import {
Button,
Group,
MultiSelect,
NumberInput,
Select,
Slider,
Stack,
Switch,
TextInput,
Text,
NumberInput,
Slider,
Select,
TextInput,
} from '@mantine/core';
import { ContextModalProps } from '@mantine/modals';
import { IconAlertTriangle } from '@tabler/icons';
import { Trans, useTranslation } from 'next-i18next';
import { useState } from 'react';
import Widgets from '../../../../widgets';
import type { IWidgetOptionValue } from '../../../../widgets/widgets';
import { FC, useState } from 'react';
import { useConfigContext } from '../../../../config/provider';
import { useConfigStore } from '../../../../config/store';
import { IWidget } from '../../../../widgets/widgets';
import { useColorTheme } from '../../../../tools/color';
import Widgets from '../../../../widgets';
import type { IDraggableListInputValue, IWidgetOptionValue } from '../../../../widgets/widgets';
import { IWidget } from '../../../../widgets/widgets';
import { DraggableList } from './DraggableList';
export type WidgetEditModalInnerProps = {
widgetId: string;
@@ -93,7 +94,17 @@ export const WidgetsEditModal = ({
</Alert>
);
}
return WidgetOptionTypeSwitch(option, index, t, key, value, handleChange);
return (
<WidgetOptionTypeSwitch
key={`${key}.${index}`}
option={option}
widgetId={innerProps.widgetId}
propName={key}
value={value}
handleChange={handleChange}
/>
);
})}
<Group position="right">
<Button onClick={() => context.closeModal(id)} variant="light">
@@ -108,20 +119,20 @@ export const WidgetsEditModal = ({
// Widget switch
// Widget options are computed based on their type.
// here you can define new types for options (along with editing the widgets.d.ts file)
function WidgetOptionTypeSwitch(
option: IWidgetOptionValue,
index: number,
t: any,
key: string,
value: string | number | boolean | string[],
handleChange: (key: string, value: IntegrationOptionsValueType) => void
) {
const { primaryColor, secondaryColor } = useColorTheme();
const WidgetOptionTypeSwitch: FC<{
option: IWidgetOptionValue;
widgetId: string;
propName: string;
value: any;
handleChange: (key: string, value: IntegrationOptionsValueType) => void;
}> = ({ option, widgetId, propName: key, value, handleChange }) => {
const { t } = useTranslation([`modules/${widgetId}`, 'common']);
const { primaryColor } = useColorTheme();
switch (option.type) {
case 'switch':
return (
<Switch
key={`${option.type}-${index}`}
label={t(`descriptor.settings.${key}.label`)}
checked={value as boolean}
onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
@@ -131,7 +142,6 @@ function WidgetOptionTypeSwitch(
return (
<TextInput
color={primaryColor}
key={`${option.type}-${index}`}
label={t(`descriptor.settings.${key}.label`)}
value={value as string}
onChange={(ev) => handleChange(key, ev.currentTarget.value)}
@@ -141,7 +151,6 @@ function WidgetOptionTypeSwitch(
return (
<MultiSelect
color={primaryColor}
key={`${option.type}-${index}`}
data={option.data}
label={t(`descriptor.settings.${key}.label`)}
value={value as string[]}
@@ -153,7 +162,6 @@ function WidgetOptionTypeSwitch(
return (
<Select
color={primaryColor}
key={`${option.type}-${index}`}
defaultValue={option.defaultValue}
data={option.data}
label={t(`descriptor.settings.${key}.label`)}
@@ -165,7 +173,6 @@ function WidgetOptionTypeSwitch(
return (
<NumberInput
color={primaryColor}
key={`${option.type}-${index}`}
label={t(`descriptor.settings.${key}.label`)}
value={value as number}
onChange={(v) => handleChange(key, v!)}
@@ -176,7 +183,6 @@ function WidgetOptionTypeSwitch(
<Stack spacing="xs">
<Slider
color={primaryColor}
key={`${option.type}-${index}`}
label={value}
value={value as number}
min={option.min}
@@ -186,7 +192,57 @@ function WidgetOptionTypeSwitch(
/>
</Stack>
);
case 'draggable-list':
// eslint-disable-next-line no-case-declarations
const typedVal = value as IDraggableListInputValue['defaultValue'];
return (
<Stack spacing="xs">
<Text>{t(`descriptor.settings.${key}.label`)}</Text>
<DraggableList
value={typedVal}
onChange={(v) => handleChange(key, v)}
labels={Object.fromEntries(
Object.entries(option.items).map(([graphName]) => [
graphName,
t(`descriptor.settings.${graphName}.label`),
])
)}
>
{Object.fromEntries(
Object.entries(option.items).map(([graphName, graph]) => [
graphName,
Object.entries(graph).map(([subKey, setting], i) => (
<WidgetOptionTypeSwitch
key={`${graphName}.${subKey}.${i}`}
option={setting as IWidgetOptionValue}
widgetId={widgetId}
propName={`${graphName}.${subKey}`}
value={typedVal.find((v) => v.key === graphName)?.subValues?.[subKey]}
handleChange={(_, newVal) =>
handleChange(
key,
typedVal.map((oldVal) =>
oldVal.key === graphName
? {
...oldVal,
subValues: {
...oldVal.subValues,
[subKey]: newVal,
},
}
: oldVal
)
)
}
/>
)),
])
)}
</DraggableList>
</Stack>
);
default:
return null;
}
}
};

1
src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
View File

@@ -83,6 +83,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
inner: {
position: 'sticky',
top: 30,
maxHeight: '100%',
},
},
});

12
src/components/Dashboard/Wrappers/Category/useCategoryActions.tsx
View File

@@ -228,7 +228,8 @@ export const useCategoryActions = (configName: string | undefined, category: Cat
...previous.apps.filter((x) => !isAppAffectedFilter(x)),
...previous.apps
.filter((x) => isAppAffectedFilter(x))
.map((app): AppType => ({
.map(
(app): AppType => ({
...app,
area: {
...app.area,
@@ -238,13 +239,15 @@ export const useCategoryActions = (configName: string | undefined, category: Cat
id: mainWrapperId,
},
},
})),
})
),
],
widgets: [
...previous.widgets.filter((widget) => !isWidgetAffectedFilter(widget)),
...previous.widgets
.filter((widget) => isWidgetAffectedFilter(widget))
.map((widget): IWidget<string, any> => ({
.map(
(widget): IWidget<string, any> => ({
...widget,
area: {
...widget.area,
@@ -254,7 +257,8 @@ export const useCategoryActions = (configName: string | undefined, category: Cat
id: mainWrapperId,
},
},
})),
})
),
],
categories: previous.categories.filter((x) => x.id !== category.id),
wrappers: previous.wrappers.filter((x) => x.position !== currentItem.position),

2
src/widgets/dashDot/DashDotCompactNetwork.tsx
View File

@@ -24,7 +24,7 @@ export const DashDotCompactNetwork = ({ info }: DashDotCompactNetworkProps) => {
const downSpeed = bytes.toPerSecondString(info?.network?.speedDown);
return (
<Group noWrap align="start" position="apart" w="100%" maw="251px">
<Group noWrap align="start" position="apart" w="100%">
<Text weight={500}>{t('card.graphs.network.label')}</Text>
<Stack align="end" spacing={0}>
<Group spacing={0}>

2
src/widgets/dashDot/DashDotCompactStorage.tsx
View File

@@ -25,7 +25,7 @@ export const DashDotCompactStorage = ({ info }: DashDotCompactStorageProps) => {
});
return (
<Group noWrap align="start" position="apart" w="100%" maw="251px">
<Group noWrap align="start" position="apart" w="100%">
<Text weight={500}>{t('card.graphs.storage.label')}</Text>
<Stack align="end" spacing={0}>
<Text color="dimmed" size="xs">

69
src/widgets/dashDot/DashDotGraph.tsx
View File

@@ -1,63 +1,71 @@
import { createStyles, Stack, Title, useMantineTheme } from '@mantine/core';
import { DashDotGraph as GraphType } from './types';
import { createStyles, Title, useMantineTheme } from '@mantine/core';
import { DashDotCompactNetwork, DashDotInfo } from './DashDotCompactNetwork';
import { DashDotCompactStorage } from './DashDotCompactStorage';
interface DashDotGraphProps {
graph: GraphType;
graph: string;
graphHeight: number;
isCompact: boolean;
multiView: boolean;
dashDotUrl: string;
usePercentages: boolean;
info: DashDotInfo;
}
export const DashDotGraph = ({
graph,
graphHeight,
isCompact,
multiView,
dashDotUrl,
usePercentages,
info,
}: DashDotGraphProps) => {
const { classes } = useStyles();
return (
<Stack
className={classes.graphStack}
w="100%"
maw="251px"
style={{
width: isCompact ? (graph.twoSpan ? '100%' : 'calc(50% - 10px)') : undefined,
}}
>
return graph === 'storage' && isCompact ? (
<DashDotCompactStorage info={info} />
) : graph === 'network' && isCompact ? (
<DashDotCompactNetwork info={info} />
) : (
<div className={classes.graphContainer}>
<Title className={classes.graphTitle} order={4}>
{graph.name}
{graph}
</Title>
<iframe
className={classes.iframe}
key={graph.name}
title={graph.name}
src={useIframeSrc(dashDotUrl, graph, isCompact, usePercentages)}
key={graph}
title={graph}
src={useIframeSrc(dashDotUrl, graph, multiView, usePercentages)}
style={{
height: `${graphHeight}px`,
}}
/>
</Stack>
</div>
);
};
const useIframeSrc = (
dashDotUrl: string,
graph: GraphType,
isCompact: boolean,
graph: string,
multiView: boolean,
usePercentages: boolean
) => {
const { colorScheme, colors, radius } = useMantineTheme();
const surface = (colorScheme === 'dark' ? colors.dark[7] : colors.gray[0]).substring(1); // removes # from hex value
const graphId = graph.id === 'memory' ? 'ram' : graph.id;
return (
`${dashDotUrl}` +
'?singleGraphMode=true' +
`&graph=${graphId}` +
'?singleGraphMode=true' + // obsolete in newer versions
`&graph=${graph}` +
`&theme=${colorScheme}` +
`&surface=${surface}` +
`&gap=${isCompact ? 10 : 5}` +
'&gap=5' +
`&innerRadius=${radius.lg}` +
`&multiView=${graph.isMultiView}` +
`&showPercentage=${usePercentages ? 'true' : 'false'}`
`&multiView=${multiView}` +
`&showPercentage=${usePercentages.toString()}` +
'&textOffset=16' +
'&textSize=12'
);
};
@@ -65,7 +73,7 @@ export const useStyles = createStyles((theme, _params, getRef) => ({
iframe: {
flex: '1 0 auto',
maxWidth: '100%',
height: '140px',
width: '100%',
borderRadius: theme.radius.lg,
border: 'none',
colorScheme: 'light', // fixes white borders around iframe
@@ -74,13 +82,14 @@ export const useStyles = createStyles((theme, _params, getRef) => ({
ref: getRef('graphTitle'),
position: 'absolute',
right: 0,
bottom: 0,
opacity: 0,
transition: 'opacity .1s ease-in-out',
pointerEvents: 'none',
marginTop: 10,
marginRight: 25,
marginBottom: 12,
marginRight: 12,
},
graphStack: {
graphContainer: {
position: 'relative',
[`&:hover .${getRef('graphTitle')}`]: {
opacity: 0.5,

194
src/widgets/dashDot/DashDotTile.tsx
View File

@@ -1,4 +1,4 @@
import { Center, createStyles, Group, Stack, Text, Title } from '@mantine/core';
import { Center, createStyles, Grid, Stack, Text, Title } from '@mantine/core';
import { IconUnlink } from '@tabler/icons';
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
@@ -6,45 +6,126 @@ import { useTranslation } from 'next-i18next';
import { useConfigContext } from '../../config/provider';
import { defineWidget } from '../helper';
import { IWidget } from '../widgets';
import { DashDotCompactNetwork, DashDotInfo } from './DashDotCompactNetwork';
import { DashDotCompactStorage } from './DashDotCompactStorage';
import { DashDotInfo } from './DashDotCompactNetwork';
import { DashDotGraph } from './DashDotGraph';
const definition = defineWidget({
id: 'dashdot',
icon: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/dashdot.png',
options: {
cpuMultiView: {
type: 'switch',
defaultValue: false,
},
storageMultiView: {
type: 'switch',
defaultValue: false,
},
useCompactView: {
type: 'switch',
defaultValue: true,
url: {
type: 'text',
defaultValue: '',
},
usePercentages: {
type: 'switch',
defaultValue: false,
},
graphs: {
type: 'multi-select',
defaultValue: ['cpu', 'memory'],
data: [
// ['cpu', 'memory', 'storage', 'network', 'gpu'], into { label, value }
{ label: 'CPU', value: 'cpu' },
{ label: 'Memory', value: 'memory' },
{ label: 'Storage', value: 'storage' },
{ label: 'Network', value: 'network' },
{ label: 'GPU', value: 'gpu' },
],
columns: {
type: 'number',
defaultValue: 2,
},
graphHeight: {
type: 'number',
defaultValue: 115,
},
graphsOrder: {
type: 'draggable-list',
defaultValue: [
{
key: 'storage',
subValues: {
enabled: true,
compactView: true,
span: 2,
multiView: false,
},
},
{
key: 'network',
subValues: {
enabled: true,
compactView: true,
span: 2,
},
},
{
key: 'cpu',
subValues: {
enabled: true,
multiView: false,
span: 1,
},
},
{
key: 'ram',
subValues: {
enabled: true,
span: 1,
},
},
{
key: 'gpu',
subValues: {
enabled: false,
span: 1,
},
},
],
items: {
cpu: {
enabled: {
type: 'switch',
},
span: {
type: 'number',
},
multiView: {
type: 'switch',
},
},
storage: {
enabled: {
type: 'switch',
},
span: {
type: 'number',
},
compactView: {
type: 'switch',
},
multiView: {
type: 'switch',
},
},
ram: {
enabled: {
type: 'switch',
},
span: {
type: 'number',
},
},
network: {
enabled: {
type: 'switch',
},
span: {
type: 'number',
},
compactView: {
type: 'switch',
},
},
gpu: {
enabled: {
type: 'switch',
},
span: {
type: 'number',
},
},
},
url: {
type: 'text',
defaultValue: '',
},
},
gridstack: {
@@ -90,53 +171,34 @@ function DashDotTile({ widget }: DashDotTileProps) {
);
}
const graphs = widget?.properties.graphs.map((graph) => ({
id: graph,
name: t(`card.graphs.${graph}.title`),
twoSpan: ['network', 'gpu'].includes(graph),
isMultiView:
(graph === 'cpu' && widget.properties.cpuMultiView) ||
(graph === 'storage' && widget.properties.storageMultiView),
}));
const isCompact = widget?.properties.useCompactView ?? false;
const isCompactStorageVisible = graphs?.some((g) => g.id === 'storage' && isCompact);
const isCompactNetworkVisible = graphs?.some((g) => g.id === 'network' && isCompact);
const usePercentages = widget?.properties.usePercentages ?? false;
const displayedGraphs = graphs?.filter(
(g) => !isCompact || !['network', 'storage'].includes(g.id)
);
const { graphsOrder, usePercentages, columns, graphHeight } = widget.properties;
return (
<>
<Title order={3} mb="xs">
{t('card.title')}
</Title>
<Stack spacing="xs">
<Title order={3}>{t('card.title')}</Title>
{!info && <p>{t('card.errors.noInformation')}</p>}
{info && (
<div className={classes.graphsContainer}>
<Group position="apart" w="100%">
{isCompactStorageVisible && <DashDotCompactStorage info={info} />}
{isCompactNetworkVisible && <DashDotCompactNetwork info={info} />}
</Group>
<Group position="center" w="100%" className={classes.graphsWrapper}>
{displayedGraphs?.map((graph) => (
<Grid grow gutter="sm" w="100%" columns={columns}>
{graphsOrder
.filter((g) => g.subValues.enabled)
.map((g) => (
<Grid.Col span={Math.min(columns, g.subValues.span)}>
<DashDotGraph
key={graph.id}
graph={graph}
dashDotUrl={dashDotUrl}
isCompact={isCompact}
info={info}
graph={g.key as any}
graphHeight={graphHeight}
isCompact={g.subValues.compactView ?? false}
multiView={g.subValues.multiView ?? false}
usePercentages={usePercentages}
/>
</Grid.Col>
))}
</Group>
</Grid>
</div>
)}
</>
</Stack>
);
}
@@ -171,12 +233,6 @@ export const useDashDotTileStyles = createStyles(() => ({
rowGap: 10,
columnGap: 10,
},
graphsWrapper: {
'& > *:nth-child(odd):last-child': {
width: '100% !important',
maxWidth: '100% !important',
},
},
}));
export default definition;

27
src/widgets/widgets.ts
View File

@@ -3,7 +3,7 @@ import React from 'react';
import { AreaType } from '../types/area';
import { ShapeType } from '../types/shape';
// Type of widgets which are safed to config
// Type of widgets which are saved to config
export type IWidget<TKey extends string, TDefinition extends IWidgetDefinition> = {
id: TKey;
properties: {
@@ -18,15 +18,7 @@ export type IWidget<TKey extends string, TDefinition extends IWidgetDefinition>
// Makes the type less specific
// For example when the type true is used as input the result is boolean
// By not using this type the definition would always be { property: true }
type MakeLessSpecific<TInput extends IWidgetOptionValue['defaultValue']> = TInput extends boolean
? boolean
: TInput extends number
? number
: TInput extends string[]
? string[]
: TInput extends string
? string
: never;
type MakeLessSpecific<T> = T extends boolean ? boolean : T;
// Types of options that can be specified for the widget edit modal
export type IWidgetOptionValue =
@@ -35,7 +27,8 @@ export type IWidgetOptionValue =
| ITextInputOptionValue
| ISliderInputOptionValue
| ISelectOptionValue
| INumberInputOptionValue;
| INumberInputOptionValue
| IDraggableListInputValue;
// Interface for data type
interface DataType {
@@ -84,6 +77,18 @@ export type ISliderInputOptionValue = {
step: number;
};
export type IDraggableListInputValue = {
type: 'draggable-list';
defaultValue: {
key: string;
subValues?: Record<string, any>;
}[];
items: Record<
string,
Record<string, Omit<Exclude<IWidgetOptionValue, IDraggableListInputValue>, 'defaultValue'>>
>;
};
// is used to type the widget definitions which will be used to display all widgets
export type IWidgetDefinition<TKey extends string = string> = {
id: TKey;

78
yarn.lock
View File

@@ -1274,7 +1274,7 @@ __metadata:
languageName: node
linkType: hard
"@motionone/animation@npm:^10.12.0":
"@motionone/animation@npm:^10.15.1":
version: 10.15.1
resolution: "@motionone/animation@npm:10.15.1"
dependencies:
@@ -1286,17 +1286,17 @@ __metadata:
languageName: node
linkType: hard
"@motionone/dom@npm:10.12.0":
version: 10.12.0
resolution: "@motionone/dom@npm:10.12.0"
"@motionone/dom@npm:^10.15.3":
version: 10.15.5
resolution: "@motionone/dom@npm:10.15.5"
dependencies:
"@motionone/animation": ^10.12.0
"@motionone/generators": ^10.12.0
"@motionone/types": ^10.12.0
"@motionone/utils": ^10.12.0
"@motionone/animation": ^10.15.1
"@motionone/generators": ^10.15.1
"@motionone/types": ^10.15.1
"@motionone/utils": ^10.15.1
hey-listen: ^1.0.8
tslib: ^2.3.1
checksum: 123356f28e44362c4f081aae3df22e576f46bfcb07e01257b2ac64a115668448f29b8de67e4b6e692c5407cffb78ffe7cf9fa1bc064007482bab5dd23a69d380
checksum: 2453fe3df6a2b4b339d075bcd598bda1eee1926ba0ad881edfd154362b0992c91f31c08d83c469c7e8cb8bf8ebc0ed5530972673cf5c74d99e46e3772cf5f1cb
languageName: node
linkType: hard
@@ -1310,7 +1310,7 @@ __metadata:
languageName: node
linkType: hard
"@motionone/generators@npm:^10.12.0":
"@motionone/generators@npm:^10.15.1":
version: 10.15.1
resolution: "@motionone/generators@npm:10.15.1"
dependencies:
@@ -1321,14 +1321,14 @@ __metadata:
languageName: node
linkType: hard
"@motionone/types@npm:^10.12.0, @motionone/types@npm:^10.15.1":
"@motionone/types@npm:^10.15.1":
version: 10.15.1
resolution: "@motionone/types@npm:10.15.1"
checksum: 98091f7dca257508d94d1080678c433da39a814e8e58aaa742212bf6c2a5b5e2120a6251a06e3ea522219ce6d1b6eb6aa2cab224b803fe52789033d8398ef0aa
languageName: node
linkType: hard
"@motionone/utils@npm:^10.12.0, @motionone/utils@npm:^10.15.1":
"@motionone/utils@npm:^10.15.1":
version: 10.15.1
resolution: "@motionone/utils@npm:10.15.1"
dependencies:
@@ -4786,33 +4786,21 @@ __metadata:
languageName: node
linkType: hard
"framer-motion@npm:^6.5.1":
version: 6.5.1
resolution: "framer-motion@npm:6.5.1"
"framer-motion@npm:^9.0.2":
version: 9.0.2
resolution: "framer-motion@npm:9.0.2"
dependencies:
"@emotion/is-prop-valid": ^0.8.2
"@motionone/dom": 10.12.0
framesync: 6.0.1
"@motionone/dom": ^10.15.3
hey-listen: ^1.0.8
popmotion: 11.0.3
style-value-types: 5.0.0
tslib: ^2.1.0
tslib: ^2.4.0
peerDependencies:
react: ">=16.8 || ^17.0.0 || ^18.0.0"
react-dom: ">=16.8 || ^17.0.0 || ^18.0.0"
react: ^18.0.0
react-dom: ^18.0.0
dependenciesMeta:
"@emotion/is-prop-valid":
optional: true
checksum: 737959063137b4ccafe01e0ac0c9e5a9531bf3f729f62c34ca7a5d7955e6664f70affd22b044f7db51df41acb21d120a4f71a860e17a80c4db766ad66f2153a1
languageName: node
linkType: hard
"framesync@npm:6.0.1":
version: 6.0.1
resolution: "framesync@npm:6.0.1"
dependencies:
tslib: ^2.1.0
checksum: a23ebe8f7e20a32c0b99c2f8175b6f07af3ec6316aad52a2316316a6d011d717af8d2175dcc2827031c59fabb30232ed3e19a720a373caba7f070e1eae436325
checksum: 5694d3a49acb9f753f0eed4a946c2b33efc237e0863b882cc4bed9a6022447ce2c9024134b5e9fd7b6f73602d9af046fa633c0f7235e8cbb24702b403299b55e
languageName: node
linkType: hard
@@ -5397,7 +5385,7 @@ __metadata:
eslint-plugin-testing-library: ^5.5.1
eslint-plugin-unused-imports: ^2.0.0
fily-publish-gridstack: ^0.0.13
framer-motion: ^6.5.1
framer-motion: ^9.0.2
i18next: ^21.9.1
i18next-browser-languagedetector: ^6.1.5
i18next-http-backend: ^1.4.1
@@ -7684,18 +7672,6 @@ __metadata:
languageName: node
linkType: hard
"popmotion@npm:11.0.3":
version: 11.0.3
resolution: "popmotion@npm:11.0.3"
dependencies:
framesync: 6.0.1
hey-listen: ^1.0.8
style-value-types: 5.0.0
tslib: ^2.1.0
checksum: 9fe7d03b4ec0e85bfb9dadc23b745147bfe42e16f466ba06e6327197d0e38b72015afc2f918a8051dedc3680310417f346ffdc463be6518e2e92e98f48e30268
languageName: node
linkType: hard
"postcss@npm:8.4.14":
version: 8.4.14
resolution: "postcss@npm:8.4.14"
@@ -8799,16 +8775,6 @@ __metadata:
languageName: node
linkType: hard
"style-value-types@npm:5.0.0":
version: 5.0.0
resolution: "style-value-types@npm:5.0.0"
dependencies:
hey-listen: ^1.0.8
tslib: ^2.1.0
checksum: 16d198302cd102edf9dba94e7752a2364c93b1eaa5cc7c32b42b28eef4af4ccb5149a3f16bc2a256adc02616a2404f4612bd15f3081c1e8ca06132cae78be6c0
languageName: node
linkType: hard
"styled-jsx@npm:5.1.1":
version: 5.1.1
resolution: "styled-jsx@npm:5.1.1"
@@ -9073,7 +9039,7 @@ __metadata:
languageName: node
linkType: hard
"tslib@npm:^2.0.0, tslib@npm:^2.1.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0":
"tslib@npm:^2.0.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0":
version: 2.5.0
resolution: "tslib@npm:2.5.0"
checksum: ae3ed5f9ce29932d049908ebfdf21b3a003a85653a9a140d614da6b767a93ef94f460e52c3d787f0e4f383546981713f165037dc2274df212ea9f8a4541004e1