wkc/lcm-potty-chart
Archived
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Tutorial #62

Merged
LucidKobold merged 32 commits from tutorial into main 2022-06-24 15:51:02 -04:00
Conversation 2 Commits 32 Files Changed 40 +819 -122
16 changed files with 819 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5ccb5abe94 - Show all commits

2
src/components/calender/DatePicker.tsx
View File

@@ -189,7 +189,7 @@ const DatePicker = ({ title, isLoading }: DatePickerProps): JSX.Element => {
> >
<VStack <VStack
alignItems="center" alignItems="center"
alignContent="flex=start" alignContent="flex-start"
w="100%" w="100%"
h="auto" h="auto"
spacing={6} spacing={6}

248
src/components/calender/Day.tsx
View File

@@ -6,10 +6,11 @@ import {
sub, sub,
getDate, getDate,
isBefore, isBefore,
endOfDay endOfDay,
isToday as isTodayFun
} from "date-fns"; } from "date-fns";
import router from "next/router"; import router from "next/router";
import React, { Fragment, useState } from "react"; import React, { useState } from "react";
import AddUpdateSticker from "./modals/AddUpdateSticker"; import AddUpdateSticker from "./modals/AddUpdateSticker";
import DemoStickers from "./stickers/DemoStickers"; import DemoStickers from "./stickers/DemoStickers";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
@@ -23,7 +24,7 @@ interface DayProps {
date: string; date: string;
selectedDate: string; selectedDate: string;
currDate: Date; currDate: Date;
isToday: boolean; tutorial?: "add" | "edit";
} }
/** /**
@@ -35,7 +36,6 @@ interface DayProps {
* @param {date} date the date for this day. * @param {date} date the date for this day.
* @param {date} selectedDate the date for the selected month. * @param {date} selectedDate the date for the selected month.
* @param {Date} currDate today's date. * @param {Date} currDate today's date.
* @param {boolean} isToday is the current iteration of this component in today's date.
*/ */
const Day = ({ const Day = ({
isLoading, isLoading,
@@ -45,10 +45,11 @@ const Day = ({
date, date,
selectedDate, selectedDate,
currDate, currDate,
isToday tutorial
}: DayProps): JSX.Element => { }: DayProps): JSX.Element => {
const selectedDateObj = new Date(selectedDate); const selectedDateObj = new Date(selectedDate);
const currDateObj = new Date(date); const currDateObj = new Date(date);
const isToday = isTodayFun(currDateObj);
const handleNav = (direction: "next" | "prev") => { const handleNav = (direction: "next" | "prev") => {
if (direction === "next") { if (direction === "next") {
@@ -87,95 +88,137 @@ const Day = ({
// TODO: When the valid date range is created, disallow pointer cursor outside of the date range. // TODO: When the valid date range is created, disallow pointer cursor outside of the date range.
return ( return isOverflow ? (
<Fragment> <VStack
{isOverflow && ( bg="transparent"
<VStack color="gray.600"
bg="transparent" border="1px solid #181d8f"
color="gray.600" w="100%"
border="1px solid #181d8f" h="100%"
w="100%" _hover={{
h="100%" cursor: isBefore(currDateObj, endOfDay(currDate))
_hover={{ ? "pointer"
cursor: isBefore(currDateObj, endOfDay(currDate)) : "default",
? "pointer" background: "gray.700",
: "default", border: "1px solid #FFF",
background: "gray.700", color: "whiteAlpha.900"
border: "1px solid #FFF", }}
color: "whiteAlpha.900" onClick={() => handleNav(overflowDirection)}
}} spacing="0.5rem"
onClick={() => handleNav(overflowDirection)} alignContent="center"
spacing="0.5rem" justifyContent="flex-start"
alignContent="center" pt={2}
justifyContent="flex-start" >
pt={2} <Text w="auto" h="auto">
> {`${getDate(currDateObj)}`}
<Text w="auto" h="auto"> </Text>
{`${getDate(currDateObj)}`} {isLoading ? (
</Text> <Skeleton key={currSticker}>
{isLoading ? ( <Box fontSize="1.5rem">
<Skeleton key={currSticker}> <DemoStickers stickerVal={0} />
<Box fontSize="1.5rem"> </Box>
<DemoStickers stickerVal={0} /> </Skeleton>
</Box> ) : (
</Skeleton> <Box key={currSticker} fontSize="1.5rem">
) : ( <DemoStickers stickerVal={currSticker} />
<Box key={currSticker} fontSize="1.5rem"> </Box>
<DemoStickers stickerVal={currSticker} />
</Box>
)}
</VStack>
)} )}
{!isOverflow && ( </VStack>
<VStack ) : (
bg="transparent" <VStack
border="1px solid #0068ff" bg={
w="100%" tutorial
h="100%" ? tutorial === "add" && isToday
onClick={() => { ? "gray.600"
setStep(0); : tutorial === "edit" &&
setSelectedSticker(null); !isToday &&
setIsOpen(true); isBefore(currDateObj, endOfDay(currDate))
}} ? "gray.600"
alignContent="center" : "transparent"
justifyContent="flex-start" : "transparent"
pt={2} }
_hover={{ border={
cursor: isBefore(currDateObj, endOfDay(currDate)) tutorial
? "pointer" ? tutorial === "add" && isToday
: "default", ? "1px solid #00ff3c"
background: "gray.700", : tutorial === "edit" &&
border: "1px solid #FFF" !isToday &&
}} isBefore(currDateObj, endOfDay(currDate))
> ? "1px solid #00ff3c"
<Text : "1px solid #0068ff"
p={ : "1px solid #0068ff"
isToday }
? getDate(currDateObj) > 10 w="100%"
? "0px 6px 3px 6px" h="100%"
: "0px 9px 3px 9px" onClick={() => {
: "auto" setStep(0);
} setSelectedSticker(null);
h="auto" setIsOpen(true);
w="auto" }}
border={isToday ? "1px solid #0068ff" : "0px"} alignContent="center"
borderRadius={isToday ? "100px" : "0px"} justifyContent="flex-start"
> pt={2}
{`${getDate(currDateObj)}`} _hover={{
</Text> cursor: isBefore(currDateObj, endOfDay(currDate))
{isLoading ? ( ? "pointer"
<Skeleton key={currSticker}> : "default",
<Box fontSize="1.5rem"> bg: tutorial
<DemoStickers stickerVal={0} /> ? tutorial === "add" && isToday
</Box> ? "gray.600"
</Skeleton> : tutorial === "edit" &&
) : ( !isToday &&
<Box key={currSticker} fontSize="1.5rem"> isBefore(currDateObj, endOfDay(currDate))
<DemoStickers stickerVal={currSticker} /> ? "gray.600"
</Box> : "transparent"
: "transparent",
border: "1px solid #FFF"
}}
>
<Text
p={
isToday
? getDate(currDateObj) > 10
? "0px 6px 3px 6px"
: "0px 9px 3px 9px"
: "auto"
}
h="auto"
w="auto"
border={isToday ? "1px solid #0068ff" : "0px"}
borderRadius={isToday ? "100px" : "0px"}
>
{`${getDate(currDateObj)}`}
</Text>
{isLoading ? (
<Skeleton key={currSticker}>
<Box fontSize="1.5rem">
<DemoStickers stickerVal={0} />
</Box>
</Skeleton>
) : (
<Box key={currSticker} fontSize="1.5rem">
<DemoStickers stickerVal={currSticker} />
</Box>
)}
{tutorial ? (
<Provider store={store}>
{tutorial.toLowerCase() === "add" && isToday && !isLoading && (
<AddUpdateSticker
stickerDate={date}
isOpen={isOpen}
updateIsOpen={setIsOpen}
currSticker={currSticker}
step={step}
updateStep={setStep}
selectedSticker={selectedSticker}
updateSelectedSticker={setSelectedSticker}
currDate={currDate}
/>
)} )}
<Provider store={store}> {tutorial.toLowerCase() === "edit" &&
{isBefore(currDateObj, endOfDay(currDate)) && !isLoading && ( !isToday &&
isBefore(currDateObj, endOfDay(currDate)) &&
!isLoading && (
<AddUpdateSticker <AddUpdateSticker
stickerDate={date} stickerDate={date}
isOpen={isOpen} isOpen={isOpen}
@@ -188,10 +231,25 @@ const Day = ({
currDate={currDate} currDate={currDate}
/> />
)} )}
</Provider> </Provider>
</VStack> ) : (
<Provider store={store}>
{isBefore(currDateObj, endOfDay(currDate)) && !isLoading && (
<AddUpdateSticker
stickerDate={date}
isOpen={isOpen}
updateIsOpen={setIsOpen}
currSticker={currSticker}
step={step}
updateStep={setStep}
selectedSticker={selectedSticker}
updateSelectedSticker={setSelectedSticker}
currDate={currDate}
/>
)}
</Provider>
)} )}
</Fragment> </VStack>
); );
}; };

6
src/components/calender/index.tsx
View File

@@ -10,7 +10,6 @@ const Calender = ({
date: newDate, date: newDate,
isLoading isLoading
}: UpdateCalendarProps): JSX.Element => { }: UpdateCalendarProps): JSX.Element => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
// * Month * // // * Month * //
@@ -67,7 +66,7 @@ const Calender = ({
// TODO: Move the weekdays into it's own component for responsiveness. // TODO: Move the weekdays into it's own component for responsiveness.
return ( return (
<VStack h="91vh" w="100%"> <VStack h="92vh" w="100%" mb="5vh">
<CalenderNav title={title} isLoading={isLoading} /> <CalenderNav title={title} isLoading={isLoading} />
<VStack h="100%" w="100%" spacing={0}> <VStack h="100%" w="100%" spacing={0}>
<HStack <HStack
@@ -139,12 +138,11 @@ const Calender = ({
date={date} date={date}
selectedDate={selectedDate.date} selectedDate={selectedDate.date}
currDate={currDateObj} currDate={currDateObj}
isToday={isSameDay(currDateObj, toDateObj)}
key={ key={
id.length id.length
? id ? id
: format(toDateObj, "yyyyddLL") + : format(toDateObj, "yyyyddLL") +
`/${sticker === null ? 0 : sticker}` `/${sticker === null ? 0 : sticker}`
} }
/> />
); );

23
src/components/tutorial/CalenderExample.tsx
View File

@@ -6,12 +6,10 @@ import { updateMonth } from "../../features/calender";
import Day from "../calender/Day"; import Day from "../calender/Day";
interface CalenderExampleProps { interface CalenderExampleProps {
type: "add" | "edit" type: "add" | "edit";
} }
const CalenderExample = ({ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => {
type
}: CalenderExampleProps): JSX.Element => {
// TODO: Check if the current date is the start of the user's preferred start of the week and use the previous week for the edit example. // TODO: Check if the current date is the start of the user's preferred start of the week and use the previous week for the edit example.
// TODO: Add highlight to the current date for the add example and highlight other dates when the edit example is used. // TODO: Add highlight to the current date for the add example and highlight other dates when the edit example is used.
@@ -27,7 +25,7 @@ const CalenderExample = ({
const selectedDate: SelectedDateInfo = useAppSelector( const selectedDate: SelectedDateInfo = useAppSelector(
(state) => state.calender.selectedDateInfo (state) => state.calender.selectedDateInfo
); );
const { layout } = selectedDate const { layout } = selectedDate;
// * Stickers * // // * Stickers * //
@@ -66,15 +64,15 @@ const CalenderExample = ({
}); });
} }
return foundWeek || [] as MonthDay[]; return foundWeek || ([] as MonthDay[]);
} };
const [currWeek, setCurrWeek] = useState<MonthDay[]>(getCurrentWeek()); const [currWeek /*, setCurrWeek*/] = useState<MonthDay[]>(getCurrentWeek());
console.info(currWeek); console.info(currWeek);
return ( return (
<VStack h="100%" w="100%" spacing={0}> <VStack h="8.5rem" w="100%" spacing={0}>
<HStack <HStack
px={6} px={6}
spacing={0} spacing={0}
@@ -141,17 +139,16 @@ const CalenderExample = ({
date={date} date={date}
selectedDate={selectedDate.date} selectedDate={selectedDate.date}
currDate={currDateObj} currDate={currDateObj}
isToday={isSameDay(currDateObj, toDateObj)} tutorial={type}
key={ key={
id.length id.length
? id ? id
: format(toDateObj, "yyyyddLL") + : format(toDateObj, "yyyyddLL") +
`/${sticker === null ? 0 : sticker}` `/${sticker === null ? 0 : sticker}`
} }
/> />
); );
}) })}
}
</SimpleGrid> </SimpleGrid>
</VStack> </VStack>
); );

179
src/components/tutorial/index.tsx
View File

@@ -1,5 +1,14 @@
import { Box, Button, Divider, Heading, HStack, Text, VStack } from "@chakra-ui/react"; import {
import React from "react"; Box,
Button,
Checkbox,
Divider,
Heading,
HStack,
Text,
VStack
} from "@chakra-ui/react";
import React, { useState } from "react";
import CalenderExample from "./CalenderExample"; import CalenderExample from "./CalenderExample";
interface TutorialProps { interface TutorialProps {
@@ -11,6 +20,26 @@ const Tutorial = ({
setTutorialComplete, setTutorialComplete,
setTempTutorialComplete setTempTutorialComplete
}: TutorialProps): JSX.Element => { }: TutorialProps): JSX.Element => {
const [rememberComplete, setRememberComplete] = useState<boolean>(false);
const handleComplete = (): void => {
if (rememberComplete) {
setTutorialComplete();
}
if (!rememberComplete) {
setTempTutorialComplete();
}
};
const handleSkip = (): void => {
setTempTutorialComplete();
};
const handleUpdateCheck = (): void => {
setRememberComplete(!rememberComplete);
};
return ( return (
<Box> <Box>
<VStack <VStack
@@ -42,7 +71,7 @@ const Tutorial = ({
<Heading as="h3" size="md"> <Heading as="h3" size="md">
{"A Lucid Creations Media Project"} {"A Lucid Creations Media Project"}
</Heading> </Heading>
<Divider orientation='horizontal' /> <Divider orientation="horizontal" />
</VStack> </VStack>
{/* About the app container */} {/* About the app container */}
<VStack <VStack
@@ -62,14 +91,29 @@ const Tutorial = ({
alignContent="center" alignContent="center"
spacing={0} spacing={0}
> >
<Text>{"An app that mimics a potty/star chart for a potty training toddler or child."}</Text> <Text>
<Text>{"It can be used to track behavior, habits, diaper training, potty training (good luck), daily chores/tasks, or anything else you might want to track in a fun and visual way."}</Text> {
<Text>{"The final app will have settings to disable any mention of ABDL to allow a more general audience to use, such as for a master and pet relationship."}</Text> "An app that mimics a potty/star chart for a potty training toddler or child."
<Text>{"This is an alpha build of the app. Some functionality may not work as intended, is fully functional, and may be missing entirely."}</Text> }
</Text>
<Text>
{
"It can be used to track behavior, habits, diaper training, potty training (good luck), daily chores/tasks, or anything else you might want to track in a fun and visual way."
}
</Text>
<Text>
{
"The final app will have settings to disable any mention of ABDL to allow a more general audience to use, such as for a master and pet relationship."
}
</Text>
<Text>
{
"This is an alpha build of the app. Some functionality may not work as intended, is fully functional, and may be missing entirely."
}
</Text>
</VStack> </VStack>
</VStack> </VStack>
<Divider orientation='horizontal' /> <Divider orientation="horizontal" />
</VStack> </VStack>
{/* Functionality of the app */} {/* Functionality of the app */}
<VStack <VStack
@@ -79,7 +123,7 @@ const Tutorial = ({
alignContent="center" alignContent="center"
spacing={4} spacing={4}
> >
<Heading as="h3" size="lg" > <Heading as="h3" size="lg">
{"Current Functionality"} {"Current Functionality"}
</Heading> </Heading>
<VStack <VStack
@@ -89,38 +133,111 @@ const Tutorial = ({
alignContent="center" alignContent="center"
spacing={2} spacing={2}
> >
<Text>{"The app will generate stickers to display from the 1st of the month to the day before today. This is to simulate previous and continued use."}</Text> <Text>
{
"The app will generate stickers to display from the 1st of the month to the day before today. This is to simulate previous and continued use."
}
</Text>
<Text>{"Ability to add a sticker to the current date."}</Text> <Text>{"Ability to add a sticker to the current date."}</Text>
<Text>{"Ability to add edit a sticker from a previous date with a confirmation prompt."}</Text> <Text>
{
"Ability to add edit a sticker from a previous date with a confirmation prompt."
}
</Text>
</VStack> </VStack>
<Divider orientation='horizontal' /> <Divider orientation="horizontal" />
</VStack> </VStack>
{/* Calender Examples Here */} {/* Calender Demos */}
<Heading>{"Calender examples here"}</Heading> <VStack
<CalenderExample type={"add"} /> h="auto"
<CalenderExample type={"edit"} /> w="100%"
{/* Complete Tutorial buttons */} justifyContent="center"
alignContent="center"
spacing={4}
>
<Heading as="h3" size="lg">
{"How to Use The Calender"}
</Heading>
<VStack
h="auto"
w="100%"
justifyContent="start"
alignContent="center"
spacing={4}
>
<Heading as="h4" size="md">
{"Add a Sticker to Today's Date"}
</Heading>
<HStack
w="100%"
h="auto"
alignContent="center"
justifyContent="center"
spacing={1}
>
<Text>{"Select the date with a"}</Text>
<Text color="#00ff3c">{" green "}</Text>
<Text>{"border."}</Text>
</HStack>
<CalenderExample type={"add"} />
</VStack>
<VStack
h="auto"
w="100%"
justifyContent="start"
alignContent="center"
spacing={4}
>
<Heading as="h4" size="md">
{"Add a Sticker to Previous Dates"}
</Heading>
<HStack
w="100%"
h="auto"
alignContent="center"
justifyContent="center"
spacing={1}
>
<Text>{"Select a date with a"}</Text>
<Text color="#00ff3c">{" green "}</Text>
<Text>{"border."}</Text>
</HStack>
<CalenderExample type={"edit"} />
</VStack>
<Divider orientation="horizontal" />
</VStack>
{/* Complete tutorial */}
<HStack <HStack
h="auto" h="auto"
w="80%" w="80%"
justifyContent="space-between" justifyContent="space-between"
alignContent="center" alignItems="flex-start"
pt={8} pt={8}
> >
<Button <Button type="button" onClick={() => handleSkip()} variant="skip">
type="button" {"Skip"}
onClick={() => setTutorialComplete()}
variant="secondary"
>
{"Complete Tutorial (remember)"}
</Button> </Button>
<Button <VStack
type="button" h="auto"
onClick={() => setTempTutorialComplete()} w="auto"
variant="primary" justifyContent="center"
alignItems="center"
spacing={2}
> >
{"Complete Tutorial"} <Button
</Button> type="button"
onClick={() => handleComplete()}
variant="primary"
>
{"Complete Tutorial"}
</Button>
<Checkbox
isChecked={rememberComplete}
onChange={() => handleUpdateCheck()}
>
{"Remember completed?"}
</Checkbox>
</VStack>
</HStack> </HStack>
</VStack> </VStack>
</Box> </Box>

9
src/pages/index.tsx
View File

@@ -52,14 +52,7 @@ const IndexPage = (): JSX.Element => {
}, [completedTutorial, dispatch, tutorialCompletionInfo]); }, [completedTutorial, dispatch, tutorialCompletionInfo]);
return ( return (
<Box <Box textAlign="center" w="100%" h="auto" pt="50px" minWidth="min-content">
textAlign="center"
w="100%"
h="auto"
pt="50px"
// pb="10vh"
minWidth="min-content"
>
<Provider store={store}> <Provider store={store}>
{isLoading === true ? ( {isLoading === true ? (
<Fragment> <Fragment>

8
src/theme/components/buttonStyles.ts
View File

@@ -36,6 +36,14 @@ const buttonStyles = {
)(props) )(props)
} }
}), }),
skip: (props: Dict<never> | StyleFunctionProps) => ({
bg: "transparent",
fontSize: "xl",
p: "2",
_hover: {
bg: mode(whiten("brand.danger", 20), darken("brand.danger", 20))(props)
}
}),
stickerButton: (props: Dict<never> | StyleFunctionProps) => ({ stickerButton: (props: Dict<never> | StyleFunctionProps) => ({
bg: "transparent", bg: "transparent",
fontSize: "4rem", fontSize: "4rem",