From 2f1d4c946ad980bf589eb47a6de08b2cf7216068 Mon Sep 17 00:00:00 2001 From: JulienMora Date: Tue, 10 Dec 2024 15:27:41 +0100 Subject: [PATCH 1/5] Fix native progress --- examples/react-template/screens/Progress.tsx | 106 +++++++++--------- examples/react-template/screens/Range.tsx | 4 +- examples/react-template/screens/Switch.tsx | 1 + package-lock.json | 22 ---- .../components/progress/Progress.native.tsx | 88 +++++++++------ 5 files changed, 112 insertions(+), 109 deletions(-) diff --git a/examples/react-template/screens/Progress.tsx b/examples/react-template/screens/Progress.tsx index f5d14005..b6a686d4 100644 --- a/examples/react-template/screens/Progress.tsx +++ b/examples/react-template/screens/Progress.tsx @@ -39,59 +39,59 @@ export const ProgressScreen = (): JSX.Element => { -
- Progression avec unique légende - - - -
-
- Progression avec légendes aux extremités - - - -
-
- Barre de progression circulaire children custo - - - - - - 60 - - - / 300 Go - - - - Barre de progression circulaire avec label et description - - - - - - 60 - - - / 100 Go - - - - - - 60 - - - / 100 Go - - - - Vide : - - - -
+ {/*
*/} + {/* Progression avec unique légende*/} + {/* */} + + {/* */} + {/*
*/} + {/*
*/} + {/* Progression avec légendes aux extremités*/} + {/* */} + + {/* */} + {/*
*/} + {/*
*/} + {/* Barre de progression circulaire children custo*/} + + {/* */} + + {/* */} + {/* */} + {/* 60*/} + {/* */} + {/* */} + {/* / 300 Go*/} + {/* */} + {/* */} + + {/* Barre de progression circulaire avec label et description*/} + + {/* */} + + {/* */} + {/* */} + {/* 60*/} + {/* */} + {/* */} + {/* / 100 Go*/} + {/* */} + {/* */} + + {/* */} + {/* */} + {/* 60*/} + {/* */} + {/* */} + {/* / 100 Go*/} + {/* */} + {/* */} + + {/* Vide : */} + + {/* */} + {/* */} + {/*
*/} ) } diff --git a/examples/react-template/screens/Range.tsx b/examples/react-template/screens/Range.tsx index e134846e..03f02939 100644 --- a/examples/react-template/screens/Range.tsx +++ b/examples/react-template/screens/Range.tsx @@ -6,10 +6,10 @@ export const RangeScreen = (): JSX.Element => {
{ label='Switch one fullwidth' fullWidth name='switch one' + // eslint-disable-next-line no-console onChange={(e) => { console.log('SwitchState =>', e.switchState) diff --git a/package-lock.json b/package-lock.json index 3da2a4af..f0e3870d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2738,7 +2738,6 @@ }, "node_modules/@isaacs/cliui": { "version": "8.0.2", - "dev": true, "license": "ISC", "dependencies": { "string-width": "^5.1.2", @@ -2754,7 +2753,6 @@ }, "node_modules/@isaacs/cliui/node_modules/ansi-regex": { "version": "6.1.0", - "dev": true, "license": "MIT", "engines": { "node": ">=12" @@ -2765,7 +2763,6 @@ }, "node_modules/@isaacs/cliui/node_modules/ansi-styles": { "version": "6.2.1", - "dev": true, "license": "MIT", "engines": { "node": ">=12" @@ -2776,12 +2773,10 @@ }, "node_modules/@isaacs/cliui/node_modules/emoji-regex": { "version": "9.2.2", - "dev": true, "license": "MIT" }, "node_modules/@isaacs/cliui/node_modules/string-width": { "version": "5.1.2", - "dev": true, "license": "MIT", "dependencies": { "eastasianwidth": "^0.2.0", @@ -2797,7 +2792,6 @@ }, "node_modules/@isaacs/cliui/node_modules/strip-ansi": { "version": "7.1.0", - "dev": true, "license": "MIT", "dependencies": { "ansi-regex": "^6.0.1" @@ -2811,7 +2805,6 @@ }, "node_modules/@isaacs/cliui/node_modules/wrap-ansi": { "version": "8.1.0", - "dev": true, "license": "MIT", "dependencies": { "ansi-styles": "^6.1.0", @@ -3575,7 +3568,6 @@ }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", - "dev": true, "license": "MIT", "optional": true, "engines": { @@ -19336,7 +19328,6 @@ }, "node_modules/eastasianwidth": { "version": "0.2.0", - "dev": true, "license": "MIT" }, "node_modules/editions": { @@ -24118,7 +24109,6 @@ }, "node_modules/jackspeak": { "version": "3.4.3", - "dev": true, "license": "BlueOak-1.0.0", "dependencies": { "@isaacs/cliui": "^8.0.2" @@ -34169,7 +34159,6 @@ "node_modules/string-width-cjs": { "name": "string-width", "version": "4.2.3", - "dev": true, "license": "MIT", "dependencies": { "emoji-regex": "^8.0.0", @@ -34182,7 +34171,6 @@ }, "node_modules/string-width-cjs/node_modules/is-fullwidth-code-point": { "version": "3.0.0", - "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -34322,7 +34310,6 @@ "node_modules/strip-ansi-cjs": { "name": "strip-ansi", "version": "6.0.1", - "dev": true, "license": "MIT", "dependencies": { "ansi-regex": "^5.0.1" @@ -37690,7 +37677,6 @@ "node_modules/wrap-ansi-cjs": { "name": "wrap-ansi", "version": "7.0.0", - "dev": true, "license": "MIT", "dependencies": { "ansi-styles": "^4.0.0", @@ -38069,7 +38055,6 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, - "packages/vanilla/node_modules/@storybook/builder-webpack5/node_modules/es-module-lexer": {}, "packages/vanilla/node_modules/@storybook/builder-webpack5/node_modules/fork-ts-checker-webpack-plugin": { "version": "8.0.0", "license": "MIT", @@ -38361,7 +38346,6 @@ "balanced-match": "^1.0.0" } }, - "packages/vanilla/node_modules/chalk": {}, "packages/vanilla/node_modules/colorette": { "version": "2.0.20", "license": "MIT" @@ -38429,7 +38413,6 @@ "node": ">=12" } }, - "packages/vanilla/node_modules/escape-string-regexp": {}, "packages/vanilla/node_modules/eslint": { "version": "9.5.0", "license": "MIT", @@ -38678,7 +38661,6 @@ "version": "1.0.0", "license": "MIT" }, - "packages/vanilla/node_modules/jackspeak": {}, "packages/vanilla/node_modules/js-yaml": { "version": "4.1.0", "license": "MIT", @@ -38950,9 +38932,6 @@ "which-typed-array": "^1.1.2" } }, - "packages/vanilla/node_modules/webpack": { - "peer": true - }, "packages/vanilla/node_modules/webpack-dev-middleware": { "version": "6.1.3", "license": "MIT", @@ -38979,7 +38958,6 @@ } } }, - "packages/vanilla/node_modules/webpack-dev-middleware/node_modules/schema-utils": {}, "packages/vanilla/node_modules/webpack-virtual-modules": { "version": "0.5.0", "license": "MIT" diff --git a/packages/react/components/progress/Progress.native.tsx b/packages/react/components/progress/Progress.native.tsx index 2578590f..195cfecb 100644 --- a/packages/react/components/progress/Progress.native.tsx +++ b/packages/react/components/progress/Progress.native.tsx @@ -1,47 +1,58 @@ -import React, { useEffect, useRef } from 'react' -import { Animated, StyleSheet } from 'react-native' -import { ProgressProps } from './ProgressProps' -import { View } from '@/components/view' -import { getColorStyle, getStatusStyle, TrilogyColor } from '@/objects' -import { ComponentName } from '@/components/enumsComponentsName' +import React, { useEffect, useRef } from "react" +import { Animated, StyleSheet } from "react-native" +import { ProgressProps } from "./ProgressProps" +import { View } from "@/components/view" +import { Text, TextLevels } from "@/components/text" +import { getStatusStyle, getColorStyle, TrilogyColor } from "@/objects" +import { ComponentName } from "@/components/enumsComponentsName" /** * Progress component * @param children {ReactNode} Use Children it only if stacked progress - * @param value {number} Progress value * @param status {StatusState} Progress status variant (SUCCESS|INFO|WARNING|ERROR) * @param stacked {boolean} Stacked progress + * @param legendCenter {stringabsolute} Unique legend + * @param legendStart {string} First extremity legend, only with legendEnd property + * @param legendEnd {string} Second extremity legend, only with legendStart property */ -const Progress = ({ value, status, ...others }: ProgressProps): JSX.Element => { +const Progress = ({ + value, + max = 100, + status, + legendCenter, + legendStart, + legendEnd, + ...others + }: ProgressProps): JSX.Element => { const animation = useRef(new Animated.Value(0)).current useEffect(() => { // eslint-disable-next-line no-unused-expressions - typeof value === 'number' && - Animated.timing(animation, { - toValue: value, - duration: 1000, - useNativeDriver: false, - }).start() + typeof value === "number" && + Animated.timing(animation, { + toValue: value, + duration: 1000, + useNativeDriver: false, + }).start() }, [animation, value]) const height = 6 const width = animation.interpolate({ - inputRange: [0, 100], - outputRange: ['0%', '100%'], - extrapolate: 'clamp', + inputRange: [0, max], + outputRange: ["0%", `${max}%`], + extrapolate: "clamp", }) const styles = StyleSheet.create({ progress: { - flexDirection: 'row', - width: '100%', + flexDirection: "row", + width: "100%", height: height, backgroundColor: getColorStyle(TrilogyColor.MAIN_FADE), borderRadius: 15, }, - value: { - alignSelf: 'flex-start', + percent: { + alignSelf: "flex-start", height: height, backgroundColor: getStatusStyle(status).color, borderRadius: 15, @@ -56,27 +67,40 @@ const Progress = ({ value, status, ...others }: ProgressProps): JSX.Element => { }, test: { width: 20, - backgroundColor: '#333', + backgroundColor: "#333", height: 6, }, - uniqueLegend: { - textAlign: 'center', + legendCenter: { + textAlign: "center", paddingTop: 5, - fontWeight: '500', + fontWeight: "500", }, extremLegend: { - width: '100%', - flexDirection: 'row', - justifyContent: 'space-between', + width: "100%", + flexDirection: "row", + justifyContent: "space-between", paddingTop: 5, - fontWeight: '500', + fontWeight: "500", }, }) return ( - - - + <> + + + + {legendCenter && ( + + {legendCenter} + + )} + {legendStart && legendEnd && !legendCenter && ( + + {legendStart} + {legendEnd} + + )} + ) } From 3f48edc4a17ae6e46735dd0cd2808e9bced52112 Mon Sep 17 00:00:00 2001 From: JulienMora Date: Thu, 12 Dec 2024 09:13:46 +0100 Subject: [PATCH 2/5] clean in process --- examples/react-template/screens/Progress.tsx | 106 +++++++++---------- 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/examples/react-template/screens/Progress.tsx b/examples/react-template/screens/Progress.tsx index b6a686d4..6602d1c5 100644 --- a/examples/react-template/screens/Progress.tsx +++ b/examples/react-template/screens/Progress.tsx @@ -39,59 +39,59 @@ export const ProgressScreen = (): JSX.Element => {
- {/*
*/} - {/* Progression avec unique légende*/} - {/* */} - - {/* */} - {/*
*/} - {/*
*/} - {/* Progression avec légendes aux extremités*/} - {/* */} - - {/* */} - {/*
*/} - {/*
*/} - {/* Barre de progression circulaire children custo*/} - - {/* */} - - {/* */} - {/* */} - {/* 60*/} - {/* */} - {/* */} - {/* / 300 Go*/} - {/* */} - {/* */} - - {/* Barre de progression circulaire avec label et description*/} - - {/* */} - - {/* */} - {/* */} - {/* 60*/} - {/* */} - {/* */} - {/* / 100 Go*/} - {/* */} - {/* */} - - {/* */} - {/* */} - {/* 60*/} - {/* */} - {/* */} - {/* / 100 Go*/} - {/* */} - {/* */} - - {/* Vide : */} - - {/* */} - {/* */} - {/*
*/} +
+ Progression avec unique légende + + + +
+
+ Progression avec légendes aux extremités + + + +
+
+ Barre de progression circulaire children custo + + + + + + 60 + + + / 300 Go + + + + Barre de progression circulaire avec label et description + + + + + + 60 + + + / 100 Go + + + + + + 60 + + + / 100 Go + + + + Vide : + + + +
) } From c72809d0e38e40251f5465a8ed8fcb57358fa78f Mon Sep 17 00:00:00 2001 From: JulienMora Date: Thu, 12 Dec 2024 09:16:35 +0100 Subject: [PATCH 3/5] Fix center legend native --- packages/react/components/progress/Progress.native.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/components/progress/Progress.native.tsx b/packages/react/components/progress/Progress.native.tsx index 195cfecb..4df8cf65 100644 --- a/packages/react/components/progress/Progress.native.tsx +++ b/packages/react/components/progress/Progress.native.tsx @@ -74,6 +74,7 @@ const Progress = ({ textAlign: "center", paddingTop: 5, fontWeight: "500", + alignSelf: "center" }, extremLegend: { width: "100%", From 9104685e7f791b9232a2084dc2aaa14bf2b57166 Mon Sep 17 00:00:00 2001 From: JulienMora Date: Thu, 12 Dec 2024 09:31:16 +0100 Subject: [PATCH 4/5] Fix displayed values children --- examples/react-template/screens/Progress.tsx | 1 + .../react/components/progress/radial/ProgressRadial.native.tsx | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/react-template/screens/Progress.tsx b/examples/react-template/screens/Progress.tsx index 6602d1c5..156e132d 100644 --- a/examples/react-template/screens/Progress.tsx +++ b/examples/react-template/screens/Progress.tsx @@ -10,6 +10,7 @@ import { Title, TitleLevels, TypographyBold, + View } from '@trilogy-ds/react' export const ProgressScreen = (): JSX.Element => { diff --git a/packages/react/components/progress/radial/ProgressRadial.native.tsx b/packages/react/components/progress/radial/ProgressRadial.native.tsx index 9cd3ce8c..8ea546e7 100644 --- a/packages/react/components/progress/radial/ProgressRadial.native.tsx +++ b/packages/react/components/progress/radial/ProgressRadial.native.tsx @@ -21,6 +21,7 @@ import { ComponentName } from '@/components/enumsComponentsName' * @param skeleton {boolean} Skeleton Progress Radial */ const ProgressRadial = ({ + children, value, label, description, @@ -151,7 +152,7 @@ const ProgressRadial = ({ {description || ''} ) : ( - {description} + {description || children} )} )} From c5a8681a59432456301777f7c126486cb219741d Mon Sep 17 00:00:00 2001 From: JulienMora Date: Thu, 12 Dec 2024 09:36:47 +0100 Subject: [PATCH 5/5] Fix progress align title --- examples/react-template/screens/Progress.tsx | 21 +++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/examples/react-template/screens/Progress.tsx b/examples/react-template/screens/Progress.tsx index 156e132d..bb33f258 100644 --- a/examples/react-template/screens/Progress.tsx +++ b/examples/react-template/screens/Progress.tsx @@ -9,6 +9,7 @@ import { TextLevels, Title, TitleLevels, + TypographyAlign, TypographyBold, View } from '@trilogy-ds/react' @@ -20,12 +21,14 @@ export const ProgressScreen = (): JSX.Element => { Progress Bar - - 60 - - - / 100 Go - + + + 60 + + + / 100 Go + + @@ -58,7 +61,7 @@ export const ProgressScreen = (): JSX.Element => { - + <Title typo={TypographyAlign.TEXT_CENTERED} level={TitleLevels.THREE} marginless> 60 @@ -71,7 +74,7 @@ export const ProgressScreen = (): JSX.Element => { - + <Title typo={TypographyAlign.TEXT_CENTERED} level={TitleLevels.THREE} marginless> 60 @@ -80,7 +83,7 @@ export const ProgressScreen = (): JSX.Element => { - + 60