From c4b55b892f895059c509121478d13e0431ab4c46 Mon Sep 17 00:00:00 2001 From: Anthony RICHARD Date: Wed, 22 Jan 2025 14:23:19 +0100 Subject: [PATCH] add weight and height question --- app/(quiz)/quiz.tsx | 13 +- app/+not-found.tsx | 74 ++++++--- babel.config.js | 2 +- components/Constants.tsx | 45 +++++- components/quiz/HeightQuestion.tsx | 48 ++++++ components/quiz/Question.tsx | 4 +- components/quiz/WeightQuestion.tsx | 48 ++++++ components/ui/SegmentedControl.tsx | 17 +++ components/ui/Slider.tsx | 18 +++ package-lock.json | 181 ++++++++++++---------- package.json | 4 +- ui/avatar/index.tsx | 186 ---------------------- ui/checkbox/index.tsx | 237 ----------------------------- 13 files changed, 336 insertions(+), 541 deletions(-) create mode 100644 components/quiz/HeightQuestion.tsx create mode 100644 components/quiz/WeightQuestion.tsx create mode 100644 components/ui/SegmentedControl.tsx create mode 100644 components/ui/Slider.tsx delete mode 100644 ui/avatar/index.tsx delete mode 100644 ui/checkbox/index.tsx diff --git a/app/(quiz)/quiz.tsx b/app/(quiz)/quiz.tsx index dc59fdd..278d603 100644 --- a/app/(quiz)/quiz.tsx +++ b/app/(quiz)/quiz.tsx @@ -1,7 +1,8 @@ import BackButton from "@/components/BackButton"; -import GoalQuestion from "@/components/quiz/GoalQuestion"; -import LvlQuestion from "@/components/quiz/LvlQuestion"; +import { toBgColor, toTextColor } from "@/components/Constants"; +import HeightQuestion from "@/components/quiz/HeightQuestion"; import { QuestionChildProps } from "@/components/quiz/Question"; +import WeightQuestion from "@/components/quiz/WeightQuestion"; import Button from "@/components/ui/Button"; import Screen from "@/components/ui/Screen"; import Text from "@/components/ui/Text"; @@ -12,7 +13,7 @@ export default function Quiz() { const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0); const questions: ForwardRefExoticComponent< QuestionChildProps & RefAttributes - >[] = [GoalQuestion, LvlQuestion]; + >[] = [WeightQuestion, HeightQuestion]; const goBack = () => { if (currentQuestionIndex >= 1) { @@ -31,9 +32,9 @@ export default function Quiz() { - - - Question {currentQuestionIndex + 1} / {questions.length} + + + {currentQuestionIndex + 1} sur {questions.length} diff --git a/app/+not-found.tsx b/app/+not-found.tsx index d075182..0482d3c 100644 --- a/app/+not-found.tsx +++ b/app/+not-found.tsx @@ -1,30 +1,56 @@ -import { Link, Stack, usePathname } from 'expo-router'; -import {StyleSheet, Text, View} from 'react-native'; - +import React from "react"; +import { + View, + Text, + Image, + TouchableOpacity, + SafeAreaView, + StatusBar, +} from "react-native"; export default function NotFoundScreen() { - const pathname = usePathname(); - return ( - <> - - - This screen {pathname} doesn't exist: {pathname} - Go to home screen! + + + + {/* Back Button Area */} + + ⟨ + + + {/* Main Content */} + + {/* Magnifying Glass Image */} + + + {/* Error Text */} + Not Found + + {/* Error Message */} + + Whoops! Coach S can't find this page :( + + + {/* Status Code */} + + + :warning: Status Code: 404 + + + + {/* Home Button */} + + + Take Me Home + + - + ); } - -const styles = StyleSheet.create({ - container: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - padding: 20, - }, - link: { - marginTop: 15, - paddingVertical: 15, - }, -}); diff --git a/babel.config.js b/babel.config.js index 99456b2..1d96698 100644 --- a/babel.config.js +++ b/babel.config.js @@ -5,6 +5,6 @@ module.exports = function (api) { ["babel-preset-expo", { jsxImportSource: "nativewind" }], "nativewind/babel", ], + plugins: ["react-native-reanimated/plugin"], }; }; - diff --git a/components/Constants.tsx b/components/Constants.tsx index 22d2301..43ddc7c 100644 --- a/components/Constants.tsx +++ b/components/Constants.tsx @@ -1,5 +1,17 @@ -export type Size = "xs" | "md" | "lg" | "xl" | "2xl" | "3xl"; -export type Color = "black" | "white" | "orange" | "red"; +export type Size = + | "xs" + | "md" + | "lg" + | "xl" + | "2xl" + | "3xl" + | "4xl" + | "5xl" + | "6xl" + | "7xl" + | "8xl" + | "9xl"; +export type Color = "black" | "white" | "orange" | "red" | "blue"; export type Weight = "thin" | "normal" | "bold" | "extrabold"; export type Position = "left" | "center" | "right"; @@ -17,6 +29,33 @@ export function toTextSize(size: Size): string { return "text-2xl"; case "3xl": return "text-3xl"; + case "4xl": + return "text-4xl"; + case "5xl": + return "text-5xl"; + case "6xl": + return "text-6xl"; + case "7xl": + return "text-7xl"; + case "8xl": + return "text-8xl"; + case "9xl": + return "text-9xl"; + } +} + +export function toBgColor(color: Color): string { + switch (color) { + case "black": + return "bg-black"; + case "white": + return "bg-white"; + case "orange": + return "bg-orange-500"; + case "red": + return "bg-red-500"; + case "blue": + return "bg-blue-200"; } } @@ -30,6 +69,8 @@ export function toTextColor(color: Color): string { return "text-orange-500"; case "red": return "text-red-500"; + case "blue": + return "text-blue-500"; } } diff --git a/components/quiz/HeightQuestion.tsx b/components/quiz/HeightQuestion.tsx new file mode 100644 index 0000000..6b48bc8 --- /dev/null +++ b/components/quiz/HeightQuestion.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import Question, { QuestionChildProps } from "./Question"; +import Slider from "../ui/Slider"; +import Text from "../ui/Text"; +import { View } from "react-native"; +import SegmentedControl from "@react-native-segmented-control/segmented-control"; + +export default React.forwardRef( + (props, ref): React.ReactElement => { + const MIN_HEIGHT = 120; + const MAX_HEIGHT = 250; + const UNITS = ["cm", "inch"]; + const [height, setHeight] = React.useState(MIN_HEIGHT); + const [unit, setUnit] = React.useState("cm"); + return ( + + + + {height <= MIN_HEIGHT ? ( + + - de + + ) : null} + {height >= MAX_HEIGHT ? ( + + + de + + ) : null} + + {height} + + + {unit} + + + + + ); + } +); diff --git a/components/quiz/Question.tsx b/components/quiz/Question.tsx index e9bafe7..8d00941 100644 --- a/components/quiz/Question.tsx +++ b/components/quiz/Question.tsx @@ -14,12 +14,12 @@ export default React.forwardRef( (props, ref): React.ReactElement => { const { question, isVisible, children, ...rest } = props; const getClassName = () => { - return "gap-4" + " " + (isVisible ? "block" : "hidden"); + return "gap-6" + " " + (isVisible ? "block" : "hidden"); }; return ( - + {question} {children} diff --git a/components/quiz/WeightQuestion.tsx b/components/quiz/WeightQuestion.tsx new file mode 100644 index 0000000..386260e --- /dev/null +++ b/components/quiz/WeightQuestion.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import Question, { QuestionChildProps } from "./Question"; +import Slider from "../ui/Slider"; +import Text from "../ui/Text"; +import { View } from "react-native"; +import SegmentedControl from "@react-native-segmented-control/segmented-control"; + +export default React.forwardRef( + (props, ref): React.ReactElement => { + const MIN_WEIGHT = 40; + const MAX_WEIGHT = 200; + const UNITS = ["kg", "lb"]; + const [weight, setWeight] = React.useState(MIN_WEIGHT); + const [unit, setUnit] = React.useState("kg"); + return ( + + + + {weight <= MIN_WEIGHT ? ( + + - de + + ) : null} + {weight >= MAX_WEIGHT ? ( + + + de + + ) : null} + + {weight} + + + {unit} + + + + + ); + } +); diff --git a/components/ui/SegmentedControl.tsx b/components/ui/SegmentedControl.tsx new file mode 100644 index 0000000..a036301 --- /dev/null +++ b/components/ui/SegmentedControl.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import SegmentedControl, { + SegmentedControlProps, +} from "@react-native-segmented-control/segmented-control"; + +export default React.forwardRef( + (props, ref): React.ReactElement => { + return ( + + ); + } +); diff --git a/components/ui/Slider.tsx b/components/ui/Slider.tsx new file mode 100644 index 0000000..3e336dc --- /dev/null +++ b/components/ui/Slider.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import Slider, { SliderProps } from "@react-native-community/slider"; + +export default React.forwardRef( + (props, ref): React.ReactElement => { + const { ...rest } = props; + return ( + + ); + } +); diff --git a/package-lock.json b/package-lock.json index 7df089d..7abaa8c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,8 @@ "dependencies": { "@expo/html-elements": "^0.4.2", "@expo/vector-icons": "^14.0.2", + "@react-native-community/slider": "^4.5.5", + "@react-native-segmented-control/segmented-control": "^2.5.7", "@react-navigation/bottom-tabs": "^7.2.0", "@react-navigation/native": "^7.0.14", "@react-navigation/native-stack": "^7.2.0", @@ -37,7 +39,7 @@ "react-native": "0.76.6", "react-native-gesture-handler": "^2.20.2", "react-native-gifted-charts": "^1.4.54", - "react-native-reanimated": "~3.16.1", + "react-native-reanimated": "^3.16.7", "react-native-safe-area-context": "4.12.0", "react-native-screens": "^4.4.0", "react-native-svg": "15.8.0", @@ -1137,9 +1139,9 @@ } }, "node_modules/@babel/plugin-transform-nullish-coalescing-operator": { - "version": "7.26.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.26.5.tgz", - "integrity": "sha512-OHqczNm4NTQlW1ghrVY43FPoiRzbmzNVbcgVnMKZN/RQYezHUSdjACjaX50CD3B7UIAjv39+MlsrVDb3v741FA==", + "version": "7.26.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.26.6.tgz", + "integrity": "sha512-CKW8Vu+uUZneQCPtXmSBUC6NCAUdya26hWCElAWh5mVSlSRsmiCPUUDKb3Z0szng1hiAJa098Hkhg9o4SE35Qw==", "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.26.5" @@ -1703,9 +1705,9 @@ } }, "node_modules/@expo/cli": { - "version": "0.22.9", - "resolved": "https://registry.npmjs.org/@expo/cli/-/cli-0.22.9.tgz", - "integrity": "sha512-GFW1+InbgTz0+10qWfoo5fyBU2DhhPuJkL4TUnG7GTq8lDlim88JLghJVbq0uAX/xDLcd326QnI0XONsUGSWrw==", + "version": "0.22.10", + "resolved": "https://registry.npmjs.org/@expo/cli/-/cli-0.22.10.tgz", + "integrity": "sha512-MA4TOtf6x8ixVaQbUINgest/DsrWcMVGMmjXYtnhUfwQGvZtJC+aI+xMBM7ow2OqY2B/xfoRcgqkvWkl36yxkA==", "license": "MIT", "dependencies": { "@0no-co/graphql.web": "^1.0.8", @@ -1764,7 +1766,7 @@ "requireg": "^0.2.2", "resolve": "^1.22.2", "resolve-from": "^5.0.0", - "resolve.exports": "^2.0.2", + "resolve.exports": "^2.0.3", "semver": "^7.6.0", "send": "^0.19.0", "slugify": "^1.3.4", @@ -1964,9 +1966,9 @@ } }, "node_modules/@expo/html-elements": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/@expo/html-elements/-/html-elements-0.4.2.tgz", - "integrity": "sha512-lNioCgdtOrCMMqzHY+PCTdyuWBTU4yMBlOzPSkS4YFIWt9bq0zexM2ZJkpybTXmowNdE3zHO93xxAmiA2yDi2w==", + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/@expo/html-elements/-/html-elements-0.4.3.tgz", + "integrity": "sha512-UwEEdnpyhUEIDe/AkFSBUmCuwcknjAuu73fd5L9Rm/BbHczYXCrtyZmzCNVBsAiHhwUjmhNWzFlr9cAkp/sxIA==", "license": "MIT" }, "node_modules/@expo/image-utils": { @@ -2127,9 +2129,9 @@ } }, "node_modules/@expo/metro-runtime": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@expo/metro-runtime/-/metro-runtime-4.0.0.tgz", - "integrity": "sha512-+zgCyuXqIzgZVN8h0g36sursGXBy3xqtJW9han7t/iR2HTTrrbEoep5ftW1a27bdSINU96ng+rSsPLbyHYeBvw==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@expo/metro-runtime/-/metro-runtime-4.0.1.tgz", + "integrity": "sha512-CRpbLvdJ1T42S+lrYa1iZp1KfDeBp4oeZOK3hdpiS5n0vR0nhD6sC1gGF0sTboCTp64tLteikz5Y3j53dvgOIw==", "license": "MIT", "peerDependencies": { "react-native": "*" @@ -2278,9 +2280,9 @@ "license": "MIT" }, "node_modules/@expo/server": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@expo/server/-/server-0.5.0.tgz", - "integrity": "sha512-bfo5udr9C2feCn+vGQ9LvjRD2zFjMyBEnMWDZLYr5D8eCjqLjazGBpPKOVjWOhFR2SshKA3hUBkWEYrVpun0NQ==", + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/@expo/server/-/server-0.5.1.tgz", + "integrity": "sha512-lk8pKKw0eVP6rqkDR46vQB3vLA46z4KNGrqHpjD/SvMu1cGaRmQG2cQdX44mQtG8WyO9EYau+fBMHQQS2OTFKg==", "license": "MIT", "dependencies": { "@remix-run/node": "^2.12.0", @@ -3002,6 +3004,22 @@ "react": "^16.8 || ^17.0 || ^18.0" } }, + "node_modules/@react-native-community/slider": { + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/@react-native-community/slider/-/slider-4.5.5.tgz", + "integrity": "sha512-x2N415pg4ZxIltArOKczPwn7JEYh+1OxQ4+hTnafomnMsqs65HZuEWcX+Ch8c5r8V83DiunuQUf5hWGWlw8hQQ==", + "license": "MIT" + }, + "node_modules/@react-native-segmented-control/segmented-control": { + "version": "2.5.7", + "resolved": "https://registry.npmjs.org/@react-native-segmented-control/segmented-control/-/segmented-control-2.5.7.tgz", + "integrity": "sha512-l84YeVX8xAU3lvOJSvV4nK/NbGhIm2gBfveYolwaoCbRp+/SLXtc6mYrQmM9ScXNwU14mnzjQTpTHWl5YPnkzQ==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.0", + "react-native": ">=0.62" + } + }, "node_modules/@react-native/assets-registry": { "version": "0.76.6", "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.76.6.tgz", @@ -4187,9 +4205,9 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "22.10.5", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.5.tgz", - "integrity": "sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==", + "version": "22.10.7", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.7.tgz", + "integrity": "sha512-V09KvXxFiutGp6B7XkpaDXlNadZxrzajcY50EuoLIpQ6WWYCSvf19lVIazzfIzQvhUN2HjX12spLojTnhuKlGg==", "license": "MIT", "dependencies": { "undici-types": "~6.20.0" @@ -5223,9 +5241,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001692", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001692.tgz", - "integrity": "sha512-A95VKan0kdtrsnMubMKxEKUKImOPSuCpYgxSQBo036P5YYgVIcOYJEgt/txJWqObiRQeISNCfef9nvlQ0vbV7A==", + "version": "1.0.30001695", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001695.tgz", + "integrity": "sha512-vHyLade6wTgI2u1ec3WQBxv+2BrTERV28UXQu9LO6lZ9pYeMk34vjXFLOxo1A4UBA8XTL4njRQZdno/yYaSmWw==", "funding": [ { "type": "opencollective", @@ -6359,9 +6377,9 @@ "license": "MIT" }, "node_modules/electron-to-chromium": { - "version": "1.5.80", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.80.tgz", - "integrity": "sha512-LTrKpW0AqIuHwmlVNV+cjFYTnXtM9K37OGhpe0ZI10ScPSxqVSryZHIY3WnCS5NSYbBODRTZyhRMS2h5FAEqAw==", + "version": "1.5.84", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.84.tgz", + "integrity": "sha512-I+DQ8xgafao9Ha6y0qjHHvpZ9OfyA1qKlkHkjywxzniORU2awxyz7f/iVJcULmrF2yrM3nHQf+iDjJtbbexd/g==", "license": "ISC" }, "node_modules/emittery": { @@ -6465,9 +6483,9 @@ } }, "node_modules/es-object-atoms": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz", - "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", + "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", "license": "MIT", "dependencies": { "es-errors": "^1.3.0" @@ -6711,13 +6729,13 @@ } }, "node_modules/expo": { - "version": "52.0.25", - "resolved": "https://registry.npmjs.org/expo/-/expo-52.0.25.tgz", - "integrity": "sha512-BWHveMyDSST7vuGNn8zbrSGboJdvXDE9auUEkFa14ETAWRtsghYnZ0KmjOEQNxNmrBHzct/JgZ8efh5sJGd0xA==", + "version": "52.0.27", + "resolved": "https://registry.npmjs.org/expo/-/expo-52.0.27.tgz", + "integrity": "sha512-PxIS8JRTegUNYq4vNeP0eCqm7p17oGNYjJ/9x207zkwVlklywD9LYIckGojXEY5JPW/DwhbhtO6E2hMgdQQugg==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.20.0", - "@expo/cli": "0.22.9", + "@expo/cli": "0.22.10", "@expo/config": "~10.0.8", "@expo/config-plugins": "~9.0.14", "@expo/fingerprint": "0.11.7", @@ -6729,8 +6747,8 @@ "expo-file-system": "~18.0.7", "expo-font": "~13.0.3", "expo-keep-awake": "~14.0.2", - "expo-modules-autolinking": "2.0.5", - "expo-modules-core": "2.1.3", + "expo-modules-autolinking": "2.0.7", + "expo-modules-core": "2.1.4", "fbemitter": "^3.0.0", "web-streams-polyfill": "^3.3.2", "whatwg-url-without-unicode": "8.0.0-3" @@ -6870,9 +6888,9 @@ } }, "node_modules/expo-modules-autolinking": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-2.0.5.tgz", - "integrity": "sha512-z1aAa7OtnAXZRFwn/CSgr9qSclW0mepGRJzcjZjyHL49u3VWmAHaPLl6S5vVGSX3sTYsFjKJ7ioCCye3tNdeUg==", + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-2.0.7.tgz", + "integrity": "sha512-rkGc6a/90AC3q8wSy4V+iIpq6Fd0KXmQICKrvfmSWwrMgJmLfwP4QTrvLYPYOOMjFwNJcTaohcH8vzW/wYKrMg==", "license": "MIT", "dependencies": { "@expo/spawn-async": "^1.7.2", @@ -6925,22 +6943,22 @@ } }, "node_modules/expo-modules-core": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-2.1.3.tgz", - "integrity": "sha512-DkSEr7q/SobjmCAo70833+xl0liShEFDHuC/YzXmHoDRxYHJaZCNc9uVBqjMeRfPVWp+4Rj9hF/gNvfad7vy0g==", + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-2.1.4.tgz", + "integrity": "sha512-gfsbTPSaocgcQQDy4Z4ztg1hcOofwODctAA+yoNcrUQr/hRaDc6ndIJQwGPjoGXnEbXVxFfzGGSAkNiqK1I7lQ==", "license": "MIT", "dependencies": { "invariant": "^2.2.4" } }, "node_modules/expo-router": { - "version": "4.0.16", - "resolved": "https://registry.npmjs.org/expo-router/-/expo-router-4.0.16.tgz", - "integrity": "sha512-KRGUxo43g9gCWbq9cJn5AkxW+rOxoJwBNv3X57Ylns5j/5p6WUMiKnRJOT4k8wmMQTQGzH37gGDx3ufI2A9Q2g==", + "version": "4.0.17", + "resolved": "https://registry.npmjs.org/expo-router/-/expo-router-4.0.17.tgz", + "integrity": "sha512-8ybo6bVwdG1S9hafh9BTOjX1hpCgomdUvs6hKHMM01koo8mQ7zocH/+zxQeaMVDxGhboz2dO5GiDchWJ0OheRA==", "license": "MIT", "dependencies": { - "@expo/metro-runtime": "4.0.0", - "@expo/server": "^0.5.0", + "@expo/metro-runtime": "4.0.1", + "@expo/server": "^0.5.1", "@radix-ui/react-slot": "1.0.1", "@react-navigation/bottom-tabs": "^7.2.0", "@react-navigation/native": "^7.0.14", @@ -6996,9 +7014,9 @@ } }, "node_modules/expo-splash-screen": { - "version": "0.29.20", - "resolved": "https://registry.npmjs.org/expo-splash-screen/-/expo-splash-screen-0.29.20.tgz", - "integrity": "sha512-6CkKHyfPREhTL4/NcAI1BQqAMo+qv8K5Kt1s+jQCE8LCweX203BWMDYPu5padBnlYfVDAs7O4CFAe3cyaEDSjA==", + "version": "0.29.21", + "resolved": "https://registry.npmjs.org/expo-splash-screen/-/expo-splash-screen-0.29.21.tgz", + "integrity": "sha512-7uZ+qvIuNcvrvrLIklW+Wbt6llPuCj6LKYjrMu+GOX8s///laldS4TGiMAbqcE7fmfCzQ8ffgfY7xhxRourhcA==", "license": "MIT", "dependencies": { "@expo/prebuild-config": "^8.0.25" @@ -7100,9 +7118,9 @@ "license": "MIT" }, "node_modules/fast-uri": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.5.tgz", - "integrity": "sha512-5JnBCWpFlMo0a3ciDy/JckMzzv1U9coZrIhedq+HXxxUfDTAiS0LA8OKVao4G9BxmCVck/jtA5r3KAtRWEyD8Q==", + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz", + "integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==", "funding": [ { "type": "github", @@ -7364,9 +7382,9 @@ "license": "MIT" }, "node_modules/flow-parser": { - "version": "0.258.1", - "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.258.1.tgz", - "integrity": "sha512-Y8CrO98EcXVCiYE4s5z0LTMbeYjKyd3MAEUJqxA7B8yGRlmdrG5UDqq4pVrUAfAu2tMFgpQESvBhBu9Xg1tpow==", + "version": "0.259.1", + "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.259.1.tgz", + "integrity": "sha512-xiXLmMH2Z7OmdE9Q+MjljUMr/rbemFqZIRxaeZieVScG4HzQrKKhNcCYZbWTGpoN7ZPi7z8ClQbeVPq6t5AszQ==", "license": "MIT", "engines": { "node": ">=0.4.0" @@ -7585,9 +7603,9 @@ } }, "node_modules/gifted-charts-core": { - "version": "0.1.56", - "resolved": "https://registry.npmjs.org/gifted-charts-core/-/gifted-charts-core-0.1.56.tgz", - "integrity": "sha512-Gey9dxjUB4/4bCin+xSyLuudSoBffJ9GK1qd0epBd3vrjHMGYrKFNRlkxI5MRxIJjvTcWOL2Fi43glNC2gs/0w==", + "version": "0.1.57", + "resolved": "https://registry.npmjs.org/gifted-charts-core/-/gifted-charts-core-0.1.57.tgz", + "integrity": "sha512-bXV46FsGwZZtrT7jo9vMrAzYNAc6HOlFhPRwfZlqOiYF+qZAzEyQf1/r2eMe7OTCxUQ9sejR+65PIRhshTnrlw==", "license": "MIT", "peerDependencies": { "react": "*", @@ -8342,6 +8360,12 @@ "node": ">=8" } }, + "node_modules/isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==", + "license": "MIT" + }, "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -12224,15 +12248,14 @@ } }, "node_modules/react-native-gesture-handler": { - "version": "2.20.2", - "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.20.2.tgz", - "integrity": "sha512-HqzFpFczV4qCnwKlvSAvpzEXisL+Z9fsR08YV5LfJDkzuArMhBu2sOoSPUF/K62PCoAb+ObGlTC83TKHfUd0vg==", + "version": "2.22.0", + "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.22.0.tgz", + "integrity": "sha512-m5Ps1cOSxSiMP4re+XsbeWcC9DNJuIEjMSmtUxBdyfYEJtdu5iAAiX7KlHHrf2mnK4I/56Ncy4PvPKWBwSpWpQ==", "license": "MIT", "dependencies": { "@egjs/hammerjs": "^2.0.17", "hoist-non-react-statics": "^3.3.0", - "invariant": "^2.2.4", - "prop-types": "^15.7.2" + "invariant": "^2.2.4" }, "peerDependencies": { "react": "*", @@ -12240,12 +12263,12 @@ } }, "node_modules/react-native-gifted-charts": { - "version": "1.4.54", - "resolved": "https://registry.npmjs.org/react-native-gifted-charts/-/react-native-gifted-charts-1.4.54.tgz", - "integrity": "sha512-FvDRbymuJMxpsPbveQqyLUIYzfgJeY6xC6hNYD0d1OLZdnv/HgNYFMIwpoh2Hv25GRS0BXwPLjf8zE0f2zY9Wg==", + "version": "1.4.55", + "resolved": "https://registry.npmjs.org/react-native-gifted-charts/-/react-native-gifted-charts-1.4.55.tgz", + "integrity": "sha512-WOF5MnCbfqvweY+aUHWalWUBVdOcfHeUQmnVekrNebJrzBzM333WGPItOahDluO8XFVzBoagpow54enBfCbc6w==", "license": "MIT", "dependencies": { - "gifted-charts-core": "0.1.56" + "gifted-charts-core": "0.1.57" }, "peerDependencies": { "expo-linear-gradient": "*", @@ -12288,9 +12311,9 @@ } }, "node_modules/react-native-reanimated": { - "version": "3.16.6", - "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.16.6.tgz", - "integrity": "sha512-jPbAfLF5t8+UCKFTO+LeOY+OmAcDP5SsAfqINvNQz5GFGvoO7UebxujjtY58CmpZNH6c3SQ514FF9//mZDpo/g==", + "version": "3.16.7", + "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.16.7.tgz", + "integrity": "sha512-qoUUQOwE1pHlmQ9cXTJ2MX9FQ9eHllopCLiWOkDkp6CER95ZWeXhJCP4cSm6AD4jigL5jHcZf/SkWrg8ttZUsw==", "license": "MIT", "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", @@ -12322,9 +12345,9 @@ } }, "node_modules/react-native-screens": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-4.4.0.tgz", - "integrity": "sha512-c7zc7Zwjty6/pGyuuvh9gK3YBYqHPOxrhXfG1lF4gHlojQSmIx2piNbNaV+Uykj+RDTmFXK0e/hA+fucw/Qozg==", + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-4.5.0.tgz", + "integrity": "sha512-yBWeN5EHNeew9f0ia9VE7JSlUQzCZEwkb87r7A7/Sg41OJHuRKHNRhmdCOiMBUqwwQi3F+b4NZGywjeM/gWMyg==", "license": "MIT", "dependencies": { "react-freeze": "^1.0.0", @@ -12677,12 +12700,6 @@ "util-deprecate": "~1.0.1" } }, - "node_modules/readable-stream/node_modules/isarray": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", - "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==", - "license": "MIT" - }, "node_modules/readable-stream/node_modules/safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", @@ -14522,9 +14539,9 @@ } }, "node_modules/undici": { - "version": "6.21.0", - "resolved": "https://registry.npmjs.org/undici/-/undici-6.21.0.tgz", - "integrity": "sha512-BUgJXc752Kou3oOIuU1i+yZZypyZRqNPW0vqoMPl8VaoalSfeR0D8/t4iAS3yirs79SSMTxTag+ZC86uswv+Cw==", + "version": "6.21.1", + "resolved": "https://registry.npmjs.org/undici/-/undici-6.21.1.tgz", + "integrity": "sha512-q/1rj5D0/zayJB2FraXdaWxbhWiNKDvu8naDT2dl1yTlvJp4BLtOcp2a5BvgGNQpYYJzau7tf1WgKv3b+7mqpQ==", "license": "MIT", "engines": { "node": ">=18.17" diff --git a/package.json b/package.json index c090dc4..d413f18 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,8 @@ "dependencies": { "@expo/html-elements": "^0.4.2", "@expo/vector-icons": "^14.0.2", + "@react-native-community/slider": "^4.5.5", + "@react-native-segmented-control/segmented-control": "^2.5.7", "@react-navigation/bottom-tabs": "^7.2.0", "@react-navigation/native": "^7.0.14", "@react-navigation/native-stack": "^7.2.0", @@ -44,7 +46,7 @@ "react-native": "0.76.6", "react-native-gesture-handler": "^2.20.2", "react-native-gifted-charts": "^1.4.54", - "react-native-reanimated": "~3.16.1", + "react-native-reanimated": "^3.16.7", "react-native-safe-area-context": "4.12.0", "react-native-screens": "^4.4.0", "react-native-svg": "15.8.0", diff --git a/ui/avatar/index.tsx b/ui/avatar/index.tsx deleted file mode 100644 index c5fc689..0000000 --- a/ui/avatar/index.tsx +++ /dev/null @@ -1,186 +0,0 @@ -"use client"; -import React from "react"; -import { createAvatar } from "@gluestack-ui/avatar"; - -import { View, Text, Image, Platform } from "react-native"; - -import { tva } from "@gluestack-ui/nativewind-utils/tva"; -import { - withStyleContext, - useStyleContext, -} from "@gluestack-ui/nativewind-utils/withStyleContext"; -import type { VariantProps } from "@gluestack-ui/nativewind-utils"; -const SCOPE = "AVATAR"; - -const UIAvatar = createAvatar({ - Root: withStyleContext(View, SCOPE), - Badge: View, - Group: View, - Image: Image, - FallbackText: Text, -}); - -const avatarStyle = tva({ - base: "rounded-full justify-center items-center relative bg-primary-600 group-[.avatar-group]/avatar-group:-ml-2.5", - variants: { - size: { - xs: "w-6 h-6", - sm: "w-8 h-8", - md: "w-12 h-12", - lg: "w-16 h-16", - xl: "w-24 h-24", - "2xl": "w-32 h-32", - }, - }, -}); - -const avatarFallbackTextStyle = tva({ - base: "text-typography-0 font-semibold overflow-hidden text-transform:uppercase web:cursor-default", - - parentVariants: { - size: { - xs: "text-2xs", - sm: "text-xs", - md: "text-base", - lg: "text-xl", - xl: "text-3xl", - "2xl": "text-5xl", - }, - }, -}); - -const avatarGroupStyle = tva({ - base: "group/avatar-group flex-row-reverse relative avatar-group", -}); - -const avatarBadgeStyle = tva({ - base: "w-5 h-5 bg-success-500 rounded-full absolute right-0 bottom-0 border-background-0 border-2", - parentVariants: { - size: { - xs: "w-2 h-2", - sm: "w-2 h-2", - md: "w-3 h-3", - lg: "w-4 h-4", - xl: "w-6 h-6", - "2xl": "w-8 h-8", - }, - }, -}); - -const avatarImageStyle = tva({ - base: "h-full w-full rounded-full absolute", -}); - -type IAvatarProps = Omit< - React.ComponentPropsWithoutRef, - "context" -> & - VariantProps; - -const Avatar = React.forwardRef< - React.ElementRef, - IAvatarProps ->(({ className, size = "md", ...props }, ref) => { - return ( - - ); -}); - -type IAvatarBadgeProps = React.ComponentPropsWithoutRef & - VariantProps; - -const AvatarBadge = React.forwardRef< - React.ElementRef, - IAvatarBadgeProps ->(({ className, size, ...props }, ref) => { - const { size: parentSize } = useStyleContext(SCOPE); - - return ( - - ); -}); - -type IAvatarFallbackTextProps = React.ComponentPropsWithoutRef< - typeof UIAvatar.FallbackText -> & - VariantProps; -const AvatarFallbackText = React.forwardRef< - React.ElementRef, - IAvatarFallbackTextProps ->(({ className, size, ...props }, ref) => { - const { size: parentSize } = useStyleContext(SCOPE); - - return ( - - ); -}); - -type IAvatarImageProps = React.ComponentPropsWithoutRef & - VariantProps; - -const AvatarImage = React.forwardRef< - React.ElementRef, - IAvatarImageProps ->(({ className, ...props }, ref) => { - return ( - - ); -}); - -type IAvatarGroupProps = React.ComponentPropsWithoutRef & - VariantProps; - -const AvatarGroup = React.forwardRef< - React.ElementRef, - IAvatarGroupProps ->(({ className, ...props }, ref) => { - return ( - - ); -}); - -export { Avatar, AvatarBadge, AvatarFallbackText, AvatarImage, AvatarGroup }; diff --git a/ui/checkbox/index.tsx b/ui/checkbox/index.tsx deleted file mode 100644 index 4e85cac..0000000 --- a/ui/checkbox/index.tsx +++ /dev/null @@ -1,237 +0,0 @@ -'use client'; -import React from 'react'; -import { createCheckbox } from '@gluestack-ui/checkbox'; -import { View, Pressable, Text, Platform } from 'react-native'; -import type { TextProps, ViewProps } from 'react-native'; -import { tva } from '@gluestack-ui/nativewind-utils/tva'; -import { PrimitiveIcon, IPrimitiveIcon, UIIcon } from '@gluestack-ui/icon'; -import { - withStyleContext, - useStyleContext, -} from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { cssInterop } from 'nativewind'; -import type { VariantProps } from '@gluestack-ui/nativewind-utils'; - -const IndicatorWrapper = React.forwardRef< - React.ElementRef, - ViewProps ->(({ ...props }, ref) => { - return ; -}); - -const LabelWrapper = React.forwardRef, TextProps>( - ({ ...props }, ref) => { - return ; - } -); - -const IconWrapper = React.forwardRef< - React.ElementRef, - IPrimitiveIcon ->(({ ...props }, ref) => { - return ; -}); - -const SCOPE = 'CHECKBOX'; -const UICheckbox = createCheckbox({ - // @ts-expect-error - Root: - Platform.OS === 'web' - ? withStyleContext(View, SCOPE) - : withStyleContext(Pressable, SCOPE), - Group: View, - Icon: IconWrapper, - Label: LabelWrapper, - Indicator: IndicatorWrapper, -}); - -cssInterop(PrimitiveIcon, { - className: { - target: 'style', - nativeStyleToProp: { - height: true, - width: true, - fill: true, - color: 'classNameColor', - stroke: true, - }, - }, -}); - -const checkboxStyle = tva({ - base: 'group/checkbox flex-row items-center justify-start web:cursor-pointer data-[disabled=true]:cursor-not-allowed', - variants: { - size: { - lg: 'gap-2', - md: 'gap-2', - sm: 'gap-1.5', - }, - }, -}); - -const checkboxIndicatorStyle = tva({ - base: 'justify-center items-center border-outline-400 bg-transparent rounded web:data-[focus-visible=true]:outline-none web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-indicator-primary data-[checked=true]:bg-primary-600 data-[checked=true]:border-primary-600 data-[hover=true]:data-[checked=false]:border-outline-500 data-[hover=true]:bg-transparent data-[hover=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[checked=true]:bg-primary-700 data-[hover=true]:data-[checked=true]:border-primary-700 data-[hover=true]:data-[checked=true]:data-[disabled=true]:border-primary-600 data-[hover=true]:data-[checked=true]:data-[disabled=true]:bg-primary-600 data-[hover=true]:data-[checked=true]:data-[disabled=true]:opacity-40 data-[hover=true]:data-[checked=true]:data-[disabled=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[disabled=true]:border-outline-400 data-[hover=true]:data-[disabled=true]:data-[invalid=true]:border-error-700 data-[active=true]:data-[checked=true]:bg-primary-800 data-[active=true]:data-[checked=true]:border-primary-800 data-[invalid=true]:border-error-700 data-[disabled=true]:opacity-40', - parentVariants: { - size: { - lg: 'w-6 h-6 border-[3px]', - md: 'w-5 h-5 border-2', - sm: 'w-4 h-4 border-2', - }, - }, -}); - -const checkboxLabelStyle = tva({ - base: 'text-typography-600 data-[checked=true]:text-typography-900 data-[hover=true]:text-typography-900 data-[hover=true]:data-[checked=true]:text-typography-900 data-[hover=true]:data-[checked=true]:data-[disabled=true]:text-typography-900 data-[hover=true]:data-[disabled=true]:text-typography-400 data-[active=true]:text-typography-900 data-[active=true]:data-[checked=true]:text-typography-900 data-[disabled=true]:opacity-40 web:select-none', - parentVariants: { - size: { - lg: 'text-lg', - md: 'text-base', - sm: 'text-sm', - }, - }, -}); - -const checkboxIconStyle = tva({ - base: 'text-typography-50 fill-none', - - parentVariants: { - size: { - sm: 'h-3 w-3', - md: 'h-4 w-4', - lg: 'h-5 w-5', - }, - }, -}); - -const CheckboxGroup = UICheckbox.Group; - -type ICheckboxProps = React.ComponentPropsWithoutRef & - VariantProps; - -const Checkbox = React.forwardRef< - React.ElementRef, - ICheckboxProps ->(({ className, size = 'md', ...props }, ref) => { - return ( - - ); -}); - -type ICheckboxIndicatorProps = React.ComponentPropsWithoutRef< - typeof UICheckbox.Indicator -> & - VariantProps; - -const CheckboxIndicator = React.forwardRef< - React.ElementRef, - ICheckboxIndicatorProps ->(({ className, ...props }, ref) => { - const { size: parentSize } = useStyleContext(SCOPE); - - return ( - - ); -}); - -type ICheckboxLabelProps = React.ComponentPropsWithoutRef< - typeof UICheckbox.Label -> & - VariantProps; -const CheckboxLabel = React.forwardRef< - React.ElementRef, - ICheckboxLabelProps ->(({ className, ...props }, ref) => { - const { size: parentSize } = useStyleContext(SCOPE); - return ( - - ); -}); - -type ICheckboxIconProps = React.ComponentPropsWithoutRef< - typeof UICheckbox.Icon -> & - VariantProps; - -const CheckboxIcon = React.forwardRef< - React.ElementRef, - ICheckboxIconProps ->(({ className, size, ...props }, ref) => { - const { size: parentSize } = useStyleContext(SCOPE); - - if (typeof size === 'number') { - return ( - - ); - } else if ( - (props.height !== undefined || props.width !== undefined) && - size === undefined - ) { - return ( - - ); - } - - return ( - - ); -}); - -Checkbox.displayName = 'Checkbox'; -CheckboxIndicator.displayName = 'CheckboxIndicator'; -CheckboxLabel.displayName = 'CheckboxLabel'; -CheckboxIcon.displayName = 'CheckboxIcon'; - -export { - Checkbox, - CheckboxIndicator, - CheckboxLabel, - CheckboxIcon, - CheckboxGroup, -};