From 2ba5602b2709629f0a87a4b7930723030b5b3305 Mon Sep 17 00:00:00 2001 From: Peace Date: Fri, 5 Sep 2025 17:39:13 +0900 Subject: [PATCH] mfe --- lite.todo/app/(tabs)/_layout.tsx | 70 +- lite.todo/app/(tabs)/done.tsx | 28 +- lite.todo/app/(tabs)/index.tsx | 41 +- lite.todo/app/_layout.tsx | 2 +- lite.todo/components/TodoList.tsx | 59 +- lite.todo/components/ui/icon/index.tsx | 1600 ++++++++++++++++++++ lite.todo/components/ui/icon/index.web.tsx | 1573 +++++++++++++++++++ lite.todo/package-lock.json | 26 +- lite.todo/package.json | 14 +- lite.todo/store/todoProvider.tsx | 23 + 10 files changed, 3344 insertions(+), 92 deletions(-) create mode 100755 lite.todo/components/ui/icon/index.tsx create mode 100755 lite.todo/components/ui/icon/index.web.tsx create mode 100755 lite.todo/store/todoProvider.tsx diff --git a/lite.todo/app/(tabs)/_layout.tsx b/lite.todo/app/(tabs)/_layout.tsx index 1045818..39629d1 100755 --- a/lite.todo/app/(tabs)/_layout.tsx +++ b/lite.todo/app/(tabs)/_layout.tsx @@ -1,41 +1,45 @@ import { Tabs } from "expo-router"; import { MaterialIcons } from "@expo/vector-icons"; +import { TodosProvider } from "@/store/todoProvider"; export default function TabLayout() { return ( - - ( - - ), + + - ( - - ), - }} - /> - + > + ( + + ), + }} + /> + ( + + ), + }} + /> + + ); } diff --git a/lite.todo/app/(tabs)/done.tsx b/lite.todo/app/(tabs)/done.tsx index 9271cb2..5417039 100755 --- a/lite.todo/app/(tabs)/done.tsx +++ b/lite.todo/app/(tabs)/done.tsx @@ -1,5 +1,31 @@ +import TodoList from "@/components/TodoList"; +import { Button, ButtonText } from "@/components/ui/button"; +import { GS } from "@/components/ui/gluestack-ui-provider/gluestack-ui-token"; +import { HStack } from "@/components/ui/hstack"; +import { Text } from "@/components/ui/text"; +import { VStack } from "@/components/ui/vstack"; +import { useTodosCtx } from "@/store/todoProvider"; import { SafeAreaView } from "react-native-safe-area-context"; export default function DoneTab() { - return ; + const { doneTodos, toggle, remove, clearDone } = useTodosCtx(); + + return ( + + + 완료한 일 + + + + + + + ); } diff --git a/lite.todo/app/(tabs)/index.tsx b/lite.todo/app/(tabs)/index.tsx index 94a9244..526bc58 100755 --- a/lite.todo/app/(tabs)/index.tsx +++ b/lite.todo/app/(tabs)/index.tsx @@ -1,11 +1,17 @@ +import TodoList from "@/components/TodoList"; +import { Button, ButtonText } from "@/components/ui/button"; +import { GS } from "@/components/ui/gluestack-ui-provider/gluestack-ui-token"; +import { HStack } from "@/components/ui/hstack"; +import { Input, InputField } from "@/components/ui/input"; import { Text } from "@/components/ui/text"; import { VStack } from "@/components/ui/vstack"; -import { useTodos } from "@/store/useTodos"; +import { useTodosCtx } from "@/store/todoProvider"; import { useState } from "react"; +import { KeyboardAvoidingView, Platform } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; export default function ActiveTab() { - const { activeTodos, leftCount, add, toggle, completeAll } = useTodos(); + const { activeTodos, leftCount, add, toggle, completeAll } = useTodosCtx(); const [title, setTitle] = useState(""); const onAdd = () => { @@ -14,10 +20,33 @@ export default function ActiveTab() { }; return ( - - - 할일 - + + + + 할일 + {/* 확인 창 */} + + {/* 입력 창 */} + + + + + + + + ); } diff --git a/lite.todo/app/_layout.tsx b/lite.todo/app/_layout.tsx index 73aae1c..6dd8451 100755 --- a/lite.todo/app/_layout.tsx +++ b/lite.todo/app/_layout.tsx @@ -11,7 +11,7 @@ export default function App() { - + null }} /> ); diff --git a/lite.todo/components/TodoList.tsx b/lite.todo/components/TodoList.tsx index 2c9dffc..76f6407 100755 --- a/lite.todo/components/TodoList.tsx +++ b/lite.todo/components/TodoList.tsx @@ -11,6 +11,7 @@ import { } from "./ui/checkbox"; import { Button, ButtonText } from "./ui/button"; import { GS } from "./ui/gluestack-ui-provider/gluestack-ui-token"; +import { CheckIcon, CloseIcon, Icon } from "@/components/ui/icon"; type Props = { data: Todo[]; @@ -24,31 +25,41 @@ export default function TodoList({ data, onToggle, onRemove }: Props) { data={data} keyExtractor={(it) => it.id} contentContainerStyle={{ paddingBottom: 80 }} - renderItem={({ item }) => ( - - onToggle(item.id)} - value={item.title} - > - - - - - {item.title} - - - {onRemove ? ( - - ) : null} - - )} + + + + + {item.title} + + + {onRemove ? ( + + ) : null} + + ); + }} ListEmptyComponent={ 할 일이 없습니다. diff --git a/lite.todo/components/ui/icon/index.tsx b/lite.todo/components/ui/icon/index.tsx new file mode 100755 index 0000000..3d9ef61 --- /dev/null +++ b/lite.todo/components/ui/icon/index.tsx @@ -0,0 +1,1600 @@ +import React from 'react'; +import { createIcon } from '@gluestack-ui/core/icon/creator'; +import { Path } from 'react-native-svg'; +import { tva } from '@gluestack-ui/utils/nativewind-utils'; +import { cssInterop } from 'nativewind'; +import { VariantProps } from '@gluestack-ui/utils/nativewind-utils'; +import { + PrimitiveIcon, + IPrimitiveIcon, + Svg, +} from '@gluestack-ui/core/icon/creator'; + +export const UIIcon = createIcon({ + Root: PrimitiveIcon, +}) as React.ForwardRefExoticComponent< + React.ComponentPropsWithoutRef & + React.RefAttributes> +>; + +const iconStyle = tva({ + base: 'text-typography-950 fill-none stroke-current pointer-events-none', + variants: { + size: { + '2xs': 'h-3 w-3', + 'xs': 'h-3.5 w-3.5', + 'sm': 'h-4 w-4', + 'md': 'h-[18px] w-[18px]', + 'lg': 'h-5 w-5', + 'xl': 'h-6 w-6', + }, + }, +}); + +cssInterop(UIIcon, { + className: { + target: 'style', + nativeStyleToProp: { + height: true, + width: true, + fill: true, + color: true, + stroke: true, + }, + }, +}); + +type IIConProps = IPrimitiveIcon & + VariantProps & + React.ComponentPropsWithoutRef; + +const Icon = React.forwardRef, IIConProps>( + function Icon({ size = 'md', className, ...props }, ref) { + const iconProps = { + fill: 'none', + stroke: 'currentColor', + ...props, + }; + + if (typeof size === 'number') { + return ( + + ); + } else if ( + (props.height !== undefined || props.width !== undefined) && + size === undefined + ) { + return ( + + ); + } + return ( + + ); + } +); + +export { Icon }; + +type ParameterTypes = Omit[0], 'Root'>; + +const createIconUI = ({ ...props }: ParameterTypes) => { + const UIIconCreateIcon = createIcon({ + Root: Svg, + ...props, + }) as React.ForwardRefExoticComponent< + React.ComponentPropsWithoutRef & + React.RefAttributes> + >; + + return React.forwardRef>(function UIIcon( + { + className, + size, + ...inComingProps + }: VariantProps & + React.ComponentPropsWithoutRef, + ref + ) { + const iconProps = { + fill: 'none', + stroke: 'currentColor', + ...inComingProps, + }; + + return ( + + ); + }); +}; +export { createIconUI as createIcon }; +// All Icons +const AddIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +AddIcon.displayName = 'AddIcon'; +export { AddIcon }; + +const AlertCircleIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +AlertCircleIcon.displayName = 'AlertCircleIcon'; +export { AlertCircleIcon }; + +const ArrowUpIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +const ArrowDownIcon = createIcon({ + Root: Svg, + + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +const ArrowRightIcon = createIcon({ + Root: Svg, + + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +const ArrowLeftIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +ArrowUpIcon.displayName = 'ArrowUpIcon'; +ArrowDownIcon.displayName = 'ArrowDownIcon'; +ArrowRightIcon.displayName = 'ArrowRightIcon'; +ArrowLeftIcon.displayName = 'ArrowLeftIcon'; + +export { ArrowUpIcon, ArrowDownIcon, ArrowRightIcon, ArrowLeftIcon }; + +const AtSignIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + <> + + + + + ), +}); + +AtSignIcon.displayName = 'AtSignIcon'; + +export { AtSignIcon }; + +const BellIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +BellIcon.displayName = 'BellIcon'; + +export { BellIcon }; + +const CalendarDaysIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + + + + + + + + ), +}); + +CalendarDaysIcon.displayName = 'CalendarDaysIcon'; + +export { CalendarDaysIcon }; + +const CheckIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +const CheckCircleIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +CheckIcon.displayName = 'CheckIcon'; +CheckCircleIcon.displayName = 'CheckCircleIcon'; + +export { CheckIcon, CheckCircleIcon }; + +const ChevronUpIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + d: 'M12 10L8 6L4 10', + path: ( + <> + + + ), +}); + +const ChevronDownIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +const ChevronLeftIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +const ChevronRightIcon = createIcon({ + Root: Svg, + + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +const ChevronsLeftIcon = createIcon({ + Root: Svg, + + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +const ChevronsRightIcon = createIcon({ + Root: Svg, + + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +const ChevronsUpDownIcon = createIcon({ + Root: Svg, + + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +ChevronUpIcon.displayName = 'ChevronUpIcon'; +ChevronDownIcon.displayName = 'ChevronDownIcon'; +ChevronLeftIcon.displayName = 'ChevronLeftIcon'; +ChevronRightIcon.displayName = 'ChevronRightIcon'; +ChevronsLeftIcon.displayName = 'ChevronsLeftIcon'; +ChevronsRightIcon.displayName = 'ChevronsRightIcon'; +ChevronsUpDownIcon.displayName = 'ChevronsUpDownIcon'; + +export { + ChevronUpIcon, + ChevronDownIcon, + ChevronLeftIcon, + ChevronRightIcon, + ChevronsLeftIcon, + ChevronsRightIcon, + ChevronsUpDownIcon, +}; + +const CircleIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +CircleIcon.displayName = 'CircleIcon'; + +export { CircleIcon }; + +const ClockIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +ClockIcon.displayName = 'ClockIcon'; + +export { ClockIcon }; + +const CloseIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +const CloseCircleIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +CloseIcon.displayName = 'CloseIcon'; +CloseCircleIcon.displayName = 'CloseCircleIcon'; + +export { CloseIcon, CloseCircleIcon }; + +const CopyIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +CopyIcon.displayName = 'CopyIcon'; + +export { CopyIcon }; + +const DownloadIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +DownloadIcon.displayName = 'DownloadIcon'; +export { DownloadIcon }; + +const EditIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +EditIcon.displayName = 'EditIcon'; +export { EditIcon }; + +const EyeIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +EyeIcon.displayName = 'EyeIcon'; + +const EyeOffIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + + ), +}); + +EyeOffIcon.displayName = 'EyeOffIcon'; +export { EyeIcon, EyeOffIcon }; + +const FavouriteIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +FavouriteIcon.displayName = 'FavouriteIcon'; +export { FavouriteIcon }; + +const GlobeIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +GlobeIcon.displayName = 'GlobeIcon'; +export { GlobeIcon }; + +const GripVerticalIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + + + + ), +}); + +GripVerticalIcon.displayName = 'GripVerticalIcon'; +export { GripVerticalIcon }; + +const HelpCircleIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +HelpCircleIcon.displayName = 'HelpCircleIcon'; +export { HelpCircleIcon }; + +const InfoIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +InfoIcon.displayName = 'InfoIcon'; +export { InfoIcon }; + +const LinkIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +LinkIcon.displayName = 'LinkIcon'; + +const ExternalLinkIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +ExternalLinkIcon.displayName = 'ExternalLinkIcon'; +export { LinkIcon, ExternalLinkIcon }; + +const LoaderIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +LoaderIcon.displayName = 'LoaderIcon'; +export { LoaderIcon }; + +const LockIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +LockIcon.displayName = 'LockIcon'; +export { LockIcon }; + +const MailIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +MailIcon.displayName = 'MailIcon'; +export { MailIcon }; + +const MenuIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +MenuIcon.displayName = 'MenuIcon'; +export { MenuIcon }; + +const MessageCircleIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +MessageCircleIcon.displayName = 'MessageCircleIcon'; + +export { MessageCircleIcon }; + +const MoonIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +MoonIcon.displayName = 'MoonIcon'; +export { MoonIcon }; + +const PaperclipIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +PaperclipIcon.displayName = 'PaperclipIcon'; +export { PaperclipIcon }; + +const PhoneIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +PhoneIcon.displayName = 'PhoneIcon'; +export { PhoneIcon }; + +const PlayIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +PlayIcon.displayName = 'PlayIcon'; +export { PlayIcon }; + +const RemoveIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +RemoveIcon.displayName = 'RemoveIcon'; +export { RemoveIcon }; + +const RepeatIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + + ), +}); + +RepeatIcon.displayName = 'RepeatIcon'; + +const Repeat1Icon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + + + ), +}); + +Repeat1Icon.displayName = 'Repeat1Icon'; +export { RepeatIcon, Repeat1Icon }; + +const SearchIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +SearchIcon.displayName = 'SearchIcon'; +export { SearchIcon }; + +const SettingsIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +SettingsIcon.displayName = 'SettingsIcon'; +export { SettingsIcon }; + +const ShareIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + + + ), +}); + +ShareIcon.displayName = 'ShareIcon'; +export { ShareIcon }; + +const SlashIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +SlashIcon.displayName = 'SlashIcon'; +export { SlashIcon }; + +const StarIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +StarIcon.displayName = 'StarIcon'; +export { StarIcon }; + +const SunIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + + + + + + + ), +}); + +SunIcon.displayName = 'SunIcon'; +export { SunIcon }; + +const ThreeDotsIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +ThreeDotsIcon.displayName = 'ThreeDotsIcon'; +export { ThreeDotsIcon }; + +const TrashIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +TrashIcon.displayName = 'TrashIcon'; +export { TrashIcon }; + +const UnlockIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +UnlockIcon.displayName = 'UnlockIcon'; +export { UnlockIcon }; diff --git a/lite.todo/components/ui/icon/index.web.tsx b/lite.todo/components/ui/icon/index.web.tsx new file mode 100755 index 0000000..3503efd --- /dev/null +++ b/lite.todo/components/ui/icon/index.web.tsx @@ -0,0 +1,1573 @@ +import React from 'react'; +import { createIcon } from '@gluestack-ui/core/icon/creator'; +import { tva } from '@gluestack-ui/utils/nativewind-utils'; +import { VariantProps } from '@gluestack-ui/utils/nativewind-utils'; +import { PrimitiveIcon, Svg } from '@gluestack-ui/core/icon/creator'; + +export const UIIcon = createIcon({ + Root: PrimitiveIcon, +}); + +const iconStyle = tva({ + base: 'text-typography-950 fill-none pointer-events-none', + variants: { + size: { + '2xs': 'h-3 w-3', + 'xs': 'h-3.5 w-3.5', + 'sm': 'h-4 w-4', + 'md': 'h-[18px] w-[18px]', + 'lg': 'h-5 w-5', + 'xl': 'h-6 w-6', + }, + }, +}); + +export const Icon = React.forwardRef< + React.ComponentRef, + React.ComponentPropsWithoutRef & + VariantProps & { + height?: number | string; + width?: number | string; + } +>(function Icon({ size = 'md', className, ...props }, ref) { + if (typeof size === 'number') { + return ( + + ); + } else if ( + (props.height !== undefined || props.width !== undefined) && + size === undefined + ) { + return ( + + ); + } + return ( + + ); +}); + +type ParameterTypes = Omit[0], 'Root'>; + +const accessClassName = (style: any) => { + const styleObject = Array.isArray(style) ? style[0] : style; + const keys = Object.keys(styleObject); + return styleObject[keys[1]]; +}; + +const createIconUI = ({ ...props }: ParameterTypes) => { + const NewUIIcon = createIcon({ Root: Svg, ...props }); + return React.forwardRef< + React.ComponentRef, + React.ComponentPropsWithoutRef & + VariantProps & { + height?: number | string; + width?: number | string; + } + >(function UIIcon({ className, ...inComingprops }, ref) { + const calculateClassName = React.useMemo(() => { + return className === undefined + ? accessClassName(inComingprops?.style) + : className; + }, [className, inComingprops?.style]); + return ( + + ); + }); +}; + +export { createIconUI as createIcon }; + +// All Icons +const AddIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +AddIcon.displayName = 'AddIcon'; +export { AddIcon }; + +const AlertCircleIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +AlertCircleIcon.displayName = 'AlertCircleIcon'; +export { AlertCircleIcon }; + +const ArrowUpIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +const ArrowDownIcon = createIcon({ + Root: Svg, + + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +const ArrowRightIcon = createIcon({ + Root: Svg, + + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +const ArrowLeftIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +ArrowUpIcon.displayName = 'ArrowUpIcon'; +ArrowDownIcon.displayName = 'ArrowDownIcon'; +ArrowRightIcon.displayName = 'ArrowRightIcon'; +ArrowLeftIcon.displayName = 'ArrowLeftIcon'; + +export { ArrowUpIcon, ArrowDownIcon, ArrowRightIcon, ArrowLeftIcon }; + +const AtSignIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + <> + + + + + ), +}); + +AtSignIcon.displayName = 'AtSignIcon'; + +export { AtSignIcon }; + +const BellIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +BellIcon.displayName = 'BellIcon'; + +export { BellIcon }; + +const CalendarDaysIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + + + + + + + + ), +}); + +CalendarDaysIcon.displayName = 'CalendarDaysIcon'; + +export { CalendarDaysIcon }; + +const CheckIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +const CheckCircleIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +CheckIcon.displayName = 'CheckIcon'; +CheckCircleIcon.displayName = 'CheckCircleIcon'; + +export { CheckIcon, CheckCircleIcon }; + +const ChevronUpIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + d: 'M12 10L8 6L4 10', + path: ( + <> + + + ), +}); + +const ChevronDownIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +const ChevronLeftIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +const ChevronRightIcon = createIcon({ + Root: Svg, + + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +const ChevronsLeftIcon = createIcon({ + Root: Svg, + + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +const ChevronsRightIcon = createIcon({ + Root: Svg, + + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +const ChevronsUpDownIcon = createIcon({ + Root: Svg, + + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +ChevronUpIcon.displayName = 'ChevronUpIcon'; +ChevronDownIcon.displayName = 'ChevronDownIcon'; +ChevronLeftIcon.displayName = 'ChevronLeftIcon'; +ChevronRightIcon.displayName = 'ChevronRightIcon'; +ChevronsLeftIcon.displayName = 'ChevronsLeftIcon'; +ChevronsRightIcon.displayName = 'ChevronsRightIcon'; +ChevronsUpDownIcon.displayName = 'ChevronsUpDownIcon'; + +export { + ChevronUpIcon, + ChevronDownIcon, + ChevronLeftIcon, + ChevronRightIcon, + ChevronsLeftIcon, + ChevronsRightIcon, + ChevronsUpDownIcon, +}; + +const CircleIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +CircleIcon.displayName = 'CircleIcon'; +export { CircleIcon }; + +const ClockIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +ClockIcon.displayName = 'ClockIcon'; + +export { ClockIcon }; + +const CloseIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +const CloseCircleIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +CloseIcon.displayName = 'CloseIcon'; +CloseCircleIcon.displayName = 'CloseCircleIcon'; + +export { CloseIcon, CloseCircleIcon }; + +const CopyIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +CopyIcon.displayName = 'CopyIcon'; + +export { CopyIcon }; + +const DownloadIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +DownloadIcon.displayName = 'DownloadIcon'; +export { DownloadIcon }; + +const EditIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +EditIcon.displayName = 'EditIcon'; +export { EditIcon }; + +const EyeIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +EyeIcon.displayName = 'EyeIcon'; + +const EyeOffIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + + ), +}); + +EyeOffIcon.displayName = 'EyeOffIcon'; +export { EyeIcon, EyeOffIcon }; + +const FavouriteIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +FavouriteIcon.displayName = 'FavouriteIcon'; +export { FavouriteIcon }; + +const GlobeIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +GlobeIcon.displayName = 'GlobeIcon'; +export { GlobeIcon }; + +const GripVerticalIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + + + + ), +}); + +GripVerticalIcon.displayName = 'GripVerticalIcon'; +export { GripVerticalIcon }; + +const HelpCircleIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +HelpCircleIcon.displayName = 'HelpCircleIcon'; +export { HelpCircleIcon }; + +const InfoIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +InfoIcon.displayName = 'InfoIcon'; +export { InfoIcon }; + +const LinkIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +LinkIcon.displayName = 'LinkIcon'; + +const ExternalLinkIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +ExternalLinkIcon.displayName = 'ExternalLinkIcon'; +export { LinkIcon, ExternalLinkIcon }; + +const LoaderIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +LoaderIcon.displayName = 'LoaderIcon'; +export { LoaderIcon }; + +const LockIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +LockIcon.displayName = 'LockIcon'; +export { LockIcon }; + +const MailIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +MailIcon.displayName = 'MailIcon'; +export { MailIcon }; + +const MenuIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +MenuIcon.displayName = 'MenuIcon'; +export { MenuIcon }; + +const MessageCircleIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +MessageCircleIcon.displayName = 'MessageCircleIcon'; + +export { MessageCircleIcon }; + +const MoonIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +MoonIcon.displayName = 'MoonIcon'; +export { MoonIcon }; + +const PaperclipIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +PaperclipIcon.displayName = 'PaperclipIcon'; +export { PaperclipIcon }; + +const PhoneIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +PhoneIcon.displayName = 'PhoneIcon'; +export { PhoneIcon }; + +const PlayIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +PlayIcon.displayName = 'PlayIcon'; +export { PlayIcon }; + +const RemoveIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +RemoveIcon.displayName = 'RemoveIcon'; +export { RemoveIcon }; + +const RepeatIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + + ), +}); + +RepeatIcon.displayName = 'RepeatIcon'; + +const Repeat1Icon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + + + ), +}); + +Repeat1Icon.displayName = 'Repeat1Icon'; +export { RepeatIcon, Repeat1Icon }; + +const SearchIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +SearchIcon.displayName = 'SearchIcon'; +export { SearchIcon }; + +const SettingsIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +SettingsIcon.displayName = 'SettingsIcon'; +export { SettingsIcon }; + +const ShareIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + + + ), +}); + +ShareIcon.displayName = 'ShareIcon'; +export { ShareIcon }; + +const SlashIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +SlashIcon.displayName = 'SlashIcon'; +export { SlashIcon }; + +const StarIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + ), +}); + +StarIcon.displayName = 'StarIcon'; +export { StarIcon }; + +const SunIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + + + + + + + ), +}); + +SunIcon.displayName = 'SunIcon'; +export { SunIcon }; + +const ThreeDotsIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +ThreeDotsIcon.displayName = 'ThreeDotsIcon'; +export { ThreeDotsIcon }; + +const TrashIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + + ), +}); + +TrashIcon.displayName = 'TrashIcon'; +export { TrashIcon }; + +const UnlockIcon = createIcon({ + Root: Svg, + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +UnlockIcon.displayName = 'UnlockIcon'; +export { UnlockIcon }; diff --git a/lite.todo/package-lock.json b/lite.todo/package-lock.json index 2e90448..76259f8 100755 --- a/lite.todo/package-lock.json +++ b/lite.todo/package-lock.json @@ -29,7 +29,7 @@ "react-native-reanimated": "^4.1.0", "react-native-safe-area-context": "5.4.0", "react-native-screens": "~4.11.1", - "react-native-svg": "^15.2.0", + "react-native-svg": "^15.12.0", "react-native-worklets": "^0.5.0", "react-stately": "^3.39.0", "tailwind-variants": "^0.1.20", @@ -2096,21 +2096,6 @@ "react-native-web": ">=0.19.0" } }, - "node_modules/@gluestack-ui/core/node_modules/react-native-svg": { - "version": "15.12.1", - "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.12.1.tgz", - "integrity": "sha512-vCuZJDf8a5aNC2dlMovEv4Z0jjEUET53lm/iILFnFewa15b4atjVxU6Wirm6O9y6dEsdjDZVD7Q3QM4T1wlI8g==", - "license": "MIT", - "dependencies": { - "css-select": "^5.1.0", - "css-tree": "^1.1.3", - "warn-once": "0.1.1" - }, - "peerDependencies": { - "react": "*", - "react-native": "*" - } - }, "node_modules/@gluestack-ui/utils": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@gluestack-ui/utils/-/utils-3.0.0.tgz", @@ -9750,13 +9735,14 @@ } }, "node_modules/react-native-svg": { - "version": "15.2.0", - "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.2.0.tgz", - "integrity": "sha512-R0E6IhcJfVLsL0lRmnUSm72QO+mTqcAOM5Jb8FVGxJqX3NfJMlMP0YyvcajZiaRR8CqQUpEoqrY25eyZb006kw==", + "version": "15.12.0", + "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.12.0.tgz", + "integrity": "sha512-iE25PxIJ6V0C6krReLquVw6R0QTsRTmEQc4K2Co3P6zsimU/jltcDBKYDy1h/5j9S/fqmMeXnpM+9LEWKJKI6A==", "license": "MIT", "dependencies": { "css-select": "^5.1.0", - "css-tree": "^1.1.3" + "css-tree": "^1.1.3", + "warn-once": "0.1.1" }, "peerDependencies": { "react": "*", diff --git a/lite.todo/package.json b/lite.todo/package.json index c1afc6f..a6fc506 100755 --- a/lite.todo/package.json +++ b/lite.todo/package.json @@ -10,12 +10,16 @@ }, "dependencies": { "@expo/html-elements": "^0.10.1", + "@expo/vector-icons": "^14.1.0", "@gluestack-ui/core": "^3.0.0", "@gluestack-ui/utils": "^3.0.0", "@legendapp/motion": "^2.3.0", "@react-native-async-storage/async-storage": "^2.2.0", "babel-plugin-module-resolver": "^5.0.2", "expo": "~53.0.22", + "expo-constants": "~17.1.7", + "expo-linking": "~7.1.7", + "expo-router": "~5.1.5", "expo-status-bar": "~2.2.3", "lucide-react-native": "^0.510.0", "nativewind": "^4.1.23", @@ -25,16 +29,12 @@ "react-native": "0.79.6", "react-native-reanimated": "^4.1.0", "react-native-safe-area-context": "5.4.0", - "react-native-svg": "^15.2.0", + "react-native-screens": "~4.11.1", + "react-native-svg": "^15.12.0", "react-native-worklets": "^0.5.0", "react-stately": "^3.39.0", "tailwind-variants": "^0.1.20", - "tailwindcss": "^3.4.17", - "expo-router": "~5.1.5", - "react-native-screens": "~4.11.1", - "expo-linking": "~7.1.7", - "expo-constants": "~17.1.7", - "@expo/vector-icons": "^14.1.0" + "tailwindcss": "^3.4.17" }, "devDependencies": { "@babel/core": "^7.25.2", diff --git a/lite.todo/store/todoProvider.tsx b/lite.todo/store/todoProvider.tsx new file mode 100755 index 0000000..df6e090 --- /dev/null +++ b/lite.todo/store/todoProvider.tsx @@ -0,0 +1,23 @@ +import { createContext, useContext } from "react"; +import { type Todo, useTodos } from "./useTodos"; + +type TodosContextValue = ReturnType; + +const TodosContext = createContext(null); + +export function TodosProvider({ children }: { children: React.ReactNode }) { + const store = useTodos(); + return ( + {children} + ); +} + +export function useTodosCtx(): TodosContextValue { + const ctx = useContext(TodosContext); + if (!ctx) { + throw new Error("use TodosCtx must be used within "); + } + return ctx; +} + +export type { Todo };