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 +1468 -449
40 changed files with 1468 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
data/stickerSeeder.ts
View File

@@ -24,6 +24,7 @@ const generateSticker = (): -2 | -1 | 0 | 1 | 2 => {
}
};
// TODO: Update so seeder takes in a month or date to then generate the stickers for it.
/**
* This seeder is to simulate the date and sticker info from the database.
* Filling up an array for the current month with sticker from ths first to

22
lib/versionStringToNumber.ts Normal file
View File

@@ -0,0 +1,22 @@
/**
* Function to convert the version string to a number tha represents the most recent major release.
* @param {string }version The version string.
* @returns {number} a number that represents the most recent major release.
*/
const versionStringToNumber = (version: string): number => {
const versionStrArr: string[] = version.split(".");
const versionArr: number[] = versionStrArr.map((str) => parseInt(str));
if (versionArr[0] === 0 && versionArr[1] === 0 && versionArr[2] > 1) {
versionArr[1] = 1;
}
const versionStr = `${versionArr[0]}` + "." + `${versionArr[1]}`;
const versionNum: number = parseFloat(versionStr);
return versionNum;
};
export default versionStringToNumber;

12
package.json
View File

@@ -2,7 +2,7 @@
"private": true,
"name": "lucid-creations-media-potty-chart",
"homepage": "https://lucidcreations.media/introducing-code-name-potty-chart/",
"version": "v0.0.11-alpha",
"version": "0.1.0",
"author": {
"name": "Lucid Creations Media",
"url": "https://lucidcreations.media",
@@ -23,23 +23,23 @@
"@reduxjs/toolkit": "^1.8.2",
"date-fns": "^2.28.0",
"formik": "^2.2.9",
"framer-motion": "^6.3.11",
"framer-motion": "^6.3.15",
"next": "12.1.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.2",
"sharp": "^0.30.6"
"sharp": "^0.30.7"
},
"devDependencies": {
"@types/node": "^18.0.0",
"@types/react": "^18.0.14",
"@types/react-redux": "^7.1.24",
"@typescript-eslint/eslint-plugin": "<5.28.0",
"@typescript-eslint/eslint-plugin": "^5.29.0",
"eslint": "^8.18.0",
"eslint-config-next": "^12.1.6",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-jsx-a11y": "^6.6.0",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "<4.6.0",
"prettier": "^2.7.1",
"typescript": "^4.7.4"

6
src/app/store.ts
View File

@@ -1,11 +1,13 @@
import { configureStore } from "@reduxjs/toolkit";
import calenderReducer from "../features/calender/calender";
import calenderReducer from "../features/calender";
import stickersReducer from "../features/calender/stickers";
import tutorialReducer from "../features/tutorial";
export const store = configureStore({
reducer: {
calender: calenderReducer,
stickers: stickersReducer
stickers: stickersReducer,
tutorial: tutorialReducer
}
});

23
src/components/buttons/Custom.tsx Normal file
View File

@@ -0,0 +1,23 @@
import React from "react";
import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
import { motion } from "framer-motion";
interface CustomButtonProps {
text: string;
link: string;
type: "primary" | "secondary" | "footer";
}
const MotionBox = motion<BoxProps>(Box);
const CustomButton = ({ text, link, type }: CustomButtonProps): JSX.Element => {
return (
<MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
<Link href={link} target="_blank" rel="noopener">
<Button variant={type}>{text}</Button>
</Link>
</MotionBox>
);
};
export default CustomButton;

24
src/components/buttons/Patreon.tsx Normal file
View File

@@ -0,0 +1,24 @@
import React from "react";
import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
import { Icon } from "@iconify/react";
import { motion } from "framer-motion";
const MotionBox = motion<BoxProps>(Box);
const Patreon = (): JSX.Element => {
return (
<MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
<Link
href="https://www.patreon.com/bePatron?u=15380906"
target="_blank"
rel="noopener"
>
<Button variant="patreon" leftIcon={<Icon icon="ri:patreon-fill" />}>
{"Fund The App"}
</Button>
</Link>
</MotionBox>
);
};
export default Patreon;

27
src/components/buttons/Twitter.tsx Normal file
View File

@@ -0,0 +1,27 @@
import React from "react";
import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
import { Icon } from "@iconify/react";
import { motion } from "framer-motion";
const MotionBox = motion<BoxProps>(Box);
const Twitter = (): JSX.Element => {
return (
<MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
<Link
href="https://www.patreon.com/bePatron?u=15380906"
target="_blank"
rel="noopener"
>
<Button
variant="twitter"
leftIcon={<Icon icon="akar-icons:twitter-fill" />}
>
{"Dev Updates"}
</Button>
</Link>
</MotionBox>
);
};
export default Twitter;

28
src/components/buttons/data/links.ts Normal file
View File

@@ -0,0 +1,28 @@
export interface LinkObj {
href?: string;
name?: string;
type: "primary" | "secondary" | "twitter" | "patreon";
}
type Links = LinkObj[];
const links: Links = [
{
href: "https://docs.google.com/document/d/1hrerGKHTO3iach8A-CabtfIB4lyZWlgO8EGTyOCrI2Y",
name: "Roadmap and Progress",
type: "secondary"
},
{
href: "https://lucidcreations.media/introducing-code-name-potty-chart/",
name: "Original Announcement",
type: "secondary"
},
{
type: "patreon"
},
{
type: "twitter"
}
];
export default links;

77
src/components/buttons/index.tsx Normal file
View File

@@ -0,0 +1,77 @@
import React from "react";
import { Box, HStack, VStack } from "@chakra-ui/react";
import CustomButton from "./Custom";
import links, { LinkObj } from "./data/links";
import Patreon from "./Patreon";
import Twitter from "./Twitter";
const Buttons = (): JSX.Element => {
return (
<Box h="auto" w="100%">
<HStack
display={{ base: "none", lg: "flex" }}
h="auto"
w="100%"
justifyContent="center"
alignContent="center"
spacing={4}
>
{links.map((link: LinkObj) => {
const { href, name, type } = link;
if (type === "primary" || type === "secondary") {
return (
<CustomButton
key={name.replaceAll(" ", "-")}
link={href}
text={name}
type={type}
/>
);
}
if (type === "patreon") {
return <Patreon key={type} />;
}
if (type === "twitter") {
return <Twitter key={type} />;
}
})}
</HStack>
<VStack
display={{ base: "flex", lg: "none" }}
h="auto"
w="100%"
justifyContent="center"
alignContent="center"
spacing={4}
>
{links.map((link: LinkObj) => {
const { href, name, type } = link;
if (type === "primary" || type === "secondary") {
return (
<CustomButton
key={name.replaceAll(" ", "-")}
link={href}
text={name}
type={type}
/>
);
}
if (type === "patreon") {
return <Patreon key={type} />;
}
if (type === "twitter") {
return <Twitter key={type} />;
}
})}
</VStack>
</Box>
);
};
export default Buttons;

16
src/components/calender/CalenderNav.tsx
View File

@@ -1,13 +1,23 @@
import React from "react";
import { useAppSelector } from "../../app/hooks";
import { useRouter } from "next/router";
import { HStack, IconButton } from "@chakra-ui/react";
import { Icon } from "@iconify/react";
import { format, isSameMonth, addMonths, subMonths } from "date-fns";
import findValidDateRange from "../../../lib/findValidDateRange";
import DatePicker from "./DatePicker";
import { useAppSelector } from "../../app/hooks";
const CalenderNav = (): JSX.Element => {
interface CalenderNavProps {
isLoading: boolean;
title: string;
}
/**
* @param {boolean} isLoading is the component loading?
* @param {string} title the title for the current date.
*/
const CalenderNav = ({ title, isLoading }: CalenderNavProps): JSX.Element => {
const selectedDate = useAppSelector(
(state) => state.calender.selectedDateInfo
);
@@ -46,7 +56,7 @@ const CalenderNav = (): JSX.Element => {
icon={<Icon icon="akar-icons:chevron-left" />}
onClick={() => handleNavButtons("prev")}
/>
<DatePicker />
<DatePicker isLoading={isLoading} title={title} />
<IconButton
isDisabled={isSameMonth(selectedDateObj, validEnd)}
aria-label="Next Month"

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

@@ -14,6 +14,7 @@ import {
PopoverContent,
PopoverHeader,
PopoverTrigger,
Skeleton,
VStack
} from "@chakra-ui/react";
import {
@@ -27,13 +28,18 @@ import {
import { format } from "date-fns";
import findValidDateRange from "../../../lib/findValidDateRange";
import FormValidateEmoji from "./FormValidateEmoji";
import { useAppSelector } from "../../app/hooks";
const DatePicker = (): JSX.Element => {
const selectedDate = useAppSelector(
(state) => state.calender.selectedDateInfo
);
interface DatePickerProps {
isLoading: boolean;
title: string;
}
/**
* @param {boolean} isLoading is the component loading?
* @param {string} title the title for the current date.
*/
const DatePicker = ({ title, isLoading }: DatePickerProps): JSX.Element => {
const router = useRouter();
const [valid, setValid] = useState<boolean>(false);
@@ -51,7 +57,7 @@ const DatePicker = (): JSX.Element => {
dateError = "Please select a date.";
setValid(false);
} else if (dateArr.length === 3) {
const date: UpdateCalendarProps = {
const date: UpdateCalenderPropsDateLayout = {
year: parseInt(dateArr[0]),
month: parseInt(dateArr[1]),
day: parseInt(dateArr[2])
@@ -91,7 +97,7 @@ const DatePicker = (): JSX.Element => {
if (formInput.date) {
if (!validateDate(formInput.date)) {
const dateArr = formInput.date.split("-");
const date: UpdateCalendarProps = {
const date: UpdateCalenderPropsDateLayout = {
year: parseInt(dateArr[0]),
month: parseInt(dateArr[1]),
day: parseInt(dateArr[2])
@@ -130,9 +136,17 @@ const DatePicker = (): JSX.Element => {
<Popover placement="bottom" initialFocusRef={initRef}>
<PopoverTrigger>
<Button border="none" variant="outline">
<Heading w="100%" h="auto">
{selectedDate.title}
</Heading>
{isLoading ? (
<Skeleton>
<Heading w="100%" h="auto">
{title}
</Heading>
</Skeleton>
) : (
<Heading w="100%" h="auto">
{title}
</Heading>
)}
</Button>
</PopoverTrigger>
<PopoverContent>
@@ -175,7 +189,7 @@ const DatePicker = (): JSX.Element => {
>
<VStack
alignItems="center"
alignContent="flex=start"
alignContent="flex-start"
w="100%"
h="auto"
spacing={6}

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

@@ -1,4 +1,7 @@
import { Box, Text, VStack } from "@chakra-ui/react";
import React, { useState } from "react";
import { Provider } from "react-redux";
import { store } from "../../app/store";
import { Box, Skeleton, Text, VStack } from "@chakra-ui/react";
import {
add,
getYear,
@@ -6,46 +9,47 @@ import {
sub,
getDate,
isBefore,
endOfDay
endOfDay,
isToday as isTodayFun
} from "date-fns";
import router from "next/router";
import React, { Fragment, useState } from "react";
import AddUpdateSticker from "./modals/AddUpdateSticker";
import DemoStickers from "./stickers/DemoStickers";
import { Provider } from "react-redux";
import { store } from "../../app/store";
interface DayProps {
isLoading: boolean;
isOverflow?: boolean;
overflowDirection?: "next" | "prev" | null;
currSticker: StickerVal;
date: string;
selectedDate: string;
currDate: Date;
isToday: boolean;
tutorial?: "add" | "edit";
}
/**
* The individual days in the calender component.
* @param {boolean} isLoading is the component loading?
* @param {boolean} isOverflow is the current date being given before or after the current month.
* @param {"next" | "prev" | null} overflowDirection the direction the overflow is. This will navigate the calender forward or backwards 1 month.
* @param {StickerVal} currSticker the sticker for this date.
* @param {date} date the date for this day.
* @param {date} selectedDate the date for the selected month.
* @param {Date} currDate today's date.
* @param {boolean} isToday is the current iteration of this component in today's date.
*/
const Day = ({
isLoading,
isOverflow,
overflowDirection,
currSticker,
date,
selectedDate,
currDate,
isToday
tutorial
}: DayProps): JSX.Element => {
const selectedDateObj = new Date(selectedDate);
const currDateObj = new Date(date);
const isToday = isTodayFun(currDateObj);
const handleNav = (direction: "next" | "prev") => {
if (direction === "next") {
@@ -84,79 +88,141 @@ const Day = ({
// TODO: When the valid date range is created, disallow pointer cursor outside of the date range.
return (
<Fragment>
{isOverflow && (
<VStack
bg="transparent"
color="gray.600"
border="1px solid #181d8f"
w="100%"
h="100%"
_hover={{
cursor: isBefore(currDateObj, endOfDay(currDate))
? "pointer"
: "default",
background: "gray.700",
border: "1px solid #FFF",
color: "whiteAlpha.900"
}}
onClick={() => handleNav(overflowDirection)}
spacing="0.5rem"
alignContent="center"
justifyContent="flex-start"
pt={2}
>
<Text w="auto" h="auto">
{`${getDate(currDateObj)}`}
</Text>
<Box key={currSticker} fontSize="1.5rem">
<DemoStickers stickerVal={currSticker} />
return isOverflow ? (
<VStack
w="100%"
h="100%"
bg="transparent"
pt={2}
color="gray.600"
border="1px solid #181d8f"
_hover={{
cursor: isBefore(currDateObj, endOfDay(currDate))
? selectedSticker !== null
? "pointer"
: "default"
: "default",
background: "gray.700",
border: "1px solid #FFF",
color: "whiteAlpha.900"
}}
onClick={() =>
selectedSticker !== null ? handleNav(overflowDirection) : ""
}
spacing="0.5rem"
alignContent="center"
justifyContent="flex-start"
>
<Text w="auto" h="auto">
{`${getDate(currDateObj)}`}
</Text>
{isLoading ? (
<Skeleton key={currSticker}>
<Box fontSize="1.5rem">
<DemoStickers stickerVal={0} />
</Box>
</VStack>
</Skeleton>
) : (
<Box key={currSticker} fontSize="1.5rem">
<DemoStickers stickerVal={currSticker} />
</Box>
)}
{!isOverflow && (
<VStack
bg="transparent"
border="1px solid #0068ff"
w="100%"
h="100%"
onClick={() => {
setStep(0);
setSelectedSticker(null);
setIsOpen(true);
}}
alignContent="center"
justifyContent="flex-start"
pt={2}
_hover={{
cursor: isBefore(currDateObj, endOfDay(currDate))
? "pointer"
: "default",
background: "gray.700",
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>
<Box key={currSticker} fontSize="1.5rem">
<DemoStickers stickerVal={currSticker} />
</VStack>
) : (
<VStack
w="100%"
h="100%"
bg={
tutorial
? tutorial === "add" && isToday
? "gray.600"
: tutorial === "edit" &&
!isToday &&
isBefore(currDateObj, endOfDay(currDate))
? "gray.600"
: "transparent"
: "transparent"
}
border={
tutorial
? tutorial === "add" && isToday
? "1px solid #00ff3c"
: tutorial === "edit" &&
!isToday &&
isBefore(currDateObj, endOfDay(currDate))
? "1px solid #00ff3c"
: "1px solid #0068ff"
: "1px solid #0068ff"
}
onClick={() => {
setStep(0);
setSelectedSticker(null);
setIsOpen(true);
}}
alignContent="center"
justifyContent="flex-start"
pt={2}
_hover={{
cursor: isBefore(currDateObj, endOfDay(currDate))
? "pointer"
: "default",
bg: tutorial
? tutorial === "add" && isToday
? "gray.600"
: tutorial === "edit" &&
!isToday &&
isBefore(currDateObj, endOfDay(currDate))
? "gray.600"
: "transparent"
: "transparent",
border: "1px solid #FFF"
}}
>
<Text
h="auto"
w="auto"
p={
isToday
? getDate(currDateObj) > 10
? "0px 6px 3px 6px"
: "0px 9px 3px 9px"
: "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>
<Provider store={store}>
{isBefore(currDateObj, endOfDay(currDate)) && (
</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}
/>
)}
{tutorial.toLowerCase() === "edit" &&
!isToday &&
isBefore(currDateObj, endOfDay(currDate)) &&
!isLoading && (
<AddUpdateSticker
stickerDate={date}
isOpen={isOpen}
@@ -169,10 +235,25 @@ const Day = ({
currDate={currDate}
/>
)}
</Provider>
</VStack>
</Provider>
) : (
<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>
);
};

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

@@ -1,18 +1,23 @@
import React, { useEffect } from "react";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { updateCurrDate, updateMonth } from "../../features/calender";
import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
import { isSameDay, format } from "date-fns";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { updateCurrDate, updateMonth } from "../../features/calender/calender";
import CalenderNav from "./CalenderNav";
import Day from "./Day";
const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
const Calender = ({
date: newDate,
isLoading
}: UpdateCalendarProps): JSX.Element => {
const dispatch = useAppDispatch();
// * Month * //
const currDate: string = useAppSelector((state) => state.calender.currDate);
const selectedDate: SelectedDateInfo = useAppSelector(
(state) => state.calender.selectedDateInfo
);
const { layout } = selectedDate;
const { layout, title, date: currentSelectedDateStr } = selectedDate;
const currDateObj = new Date(currDate);
@@ -22,30 +27,31 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
(state) => state.stickers.stickersMonth
);
const dispatch = useAppDispatch();
useEffect(() => {
if (newDate && newDate.year && newDate.month && newDate.day) {
const { year, month, day } = newDate;
if (year > 0 && month > 0 && day > 0) {
const generatedDate: Date = new Date(year, month - 1, day);
const currSelectedDateObj = new Date(currentSelectedDateStr);
const dateString: string = generatedDate.toJSON();
dispatch(updateMonth(dateString));
if (!isSameDay(currSelectedDateObj, generatedDate)) {
dispatch(updateMonth(dateString));
}
} else {
console.warn("Invalid date format: ", newDate);
}
}
}, [dispatch, newDate]);
}, [currentSelectedDateStr, dispatch, newDate]);
useEffect(() => {
console.info("Check to update date.");
// console.info("Check to update date.");
const currDateObj = new Date(currDate);
if (!isSameDay(currDateObj, new Date())) {
console.info("Updated date.");
// console.info("Updated date.");
dispatch(updateCurrDate());
}
}, [currDate, dispatch]);
@@ -63,28 +69,28 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
// TODO: Move the weekdays into it's own component for responsiveness.
return (
<VStack h="91vh" w="100%">
<CalenderNav />
<VStack h="92vh" w="100%" mb="5vh">
<CalenderNav title={title} isLoading={isLoading} />
<VStack h="100%" w="100%" spacing={0}>
<HStack
px={6}
spacing={0}
w="100%"
h="auto"
px={{ base: 1, sm: 2, md: 6 }}
spacing={0}
alignContent="center"
alignItems="center"
>
{weekdays.map((weekDay) => {
return (
<Box
key={weekDay}
display="flex"
alignContent="center"
alignItems="center"
bg="transparent"
border="1px solid #0068ff"
w="100%"
h={10}
key={weekDay}
bg="transparent"
border="1px solid #0068ff"
alignContent="center"
alignItems="center"
>
<Text display={{ base: "none", md: "block" }} w="100%" h="auto">
{weekDay}
@@ -103,7 +109,13 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
);
})}
</HStack>
<SimpleGrid px={6} w="100%" h="100%" columns={7} alignItems="center">
<SimpleGrid
w="100%"
h="100%"
px={{ base: 1, sm: 2, md: 6 }}
columns={7}
alignItems="center"
>
{Object.keys(month).map((week) => {
const thisWeek = month[week];
@@ -128,13 +140,13 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
return (
<Day
isLoading={isLoading}
isOverflow={isOverflow}
overflowDirection={overflowDirection}
currSticker={sticker}
date={date}
selectedDate={selectedDate.date}
currDate={currDateObj}
isToday={isSameDay(currDateObj, toDateObj)}
key={
id.length
? id

6
src/components/calender/modals/AddUpdateSticker.tsx
View File

@@ -1,3 +1,6 @@
import React, { useState, useRef } from "react";
import { useAppDispatch } from "../../../app/hooks";
import { addEditSticker } from "../../../features/calender/stickers";
import {
Button,
Modal,
@@ -13,13 +16,10 @@ import {
SimpleGrid,
Box
} from "@chakra-ui/react";
import React, { useState, useRef } from "react";
import { format, isSameDay } from "date-fns";
import { Icon } from "@iconify/react";
import StickerSelector from "./StickerSelector";
import DemoStickers from "../stickers/DemoStickers";
import { useAppDispatch } from "../../../app/hooks";
import { addEditSticker } from "../../../features/calender/stickers";
interface AddStickerProps {
isOpen: boolean;

2
src/components/loading/LoadingOverlay.tsx
View File

@@ -1,3 +1,4 @@
import React from "react";
import {
Box,
Modal,
@@ -5,7 +6,6 @@ import {
ModalContent,
ModalOverlay
} from "@chakra-ui/react";
import React from "react";
import LoadingSpinner from "./LoadingSpinner";
const LoadingOverlay = (): JSX.Element => {

2
src/components/loading/LoadingSpinner.tsx
View File

@@ -1,5 +1,5 @@
import { Spinner } from "@chakra-ui/react";
import React from "react";
import { Spinner } from "@chakra-ui/react";
const LoadingSpinner = (): JSX.Element => {
return (

210
src/components/tutorial/CalenderExample.tsx Normal file
View File

@@ -0,0 +1,210 @@
import React, { useEffect } from "react";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { updateMonth } from "../../features/calender";
import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
import { format, isSameDay, isToday } from "date-fns";
import Day from "../calender/Day";
import { setCurrentWeek } from "../../features/tutorial";
interface CalenderExampleProps {
type: "add" | "edit";
isLoading: boolean;
}
const CalenderExample = ({
type,
isLoading
}: 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.
const currDateStr: string = useAppSelector(
(state) => state.calender.currDate
);
const currDateObj: Date = new Date(currDateStr);
const dispatch = useAppDispatch();
// * Current Month * //
const selectedDate: SelectedDateInfo = useAppSelector(
(state) => state.calender.selectedDateInfo
);
const { layout, date: currSelectedDateStr } = selectedDate;
// * Stickers * //
const stickersMonth: StickerDays = useAppSelector(
(state) => state.stickers.stickersMonth
);
// Simulated user settings.
const userSettings = {
theme: "default",
startOfWeek: "Sunday"
};
// * Week Names * //
const currMonth: WeekLayout =
layout[`${userSettings.startOfWeek.toLowerCase()}`];
const { month, weekdays } = currMonth;
useEffect(() => {
const currDateObj: Date = new Date(currDateStr);
const currSelectedDateOj: Date = new Date(currSelectedDateStr);
if (!isSameDay(currDateObj, currSelectedDateOj)) {
dispatch(updateMonth(currDateObj.toJSON()));
}
}, [currDateStr, currSelectedDateStr, dispatch]);
// * The current week * //
const currWeek = useAppSelector((state) => state.tutorial.currWeek);
useEffect(() => {
const getCurrentWeek = (): MonthDay[] => {
let foundWeek: MonthDay[];
for (const week in month) {
const currWeek = month[week];
currWeek.forEach((day: MonthDay) => {
const { date } = day;
if (isToday(new Date(date))) {
foundWeek = currWeek;
}
});
}
return foundWeek || ([] as MonthDay[]);
};
if (currWeek === null) {
dispatch(setCurrentWeek(getCurrentWeek()));
}
}, [currWeek, dispatch, month]);
return (
<VStack
h="auto"
w="100%"
alignContent="center"
alignItems="center"
spacing={2}
>
<VStack
h="8.5rem"
w="100%"
alignContent="center"
alignItems="center"
spacing={0}
>
<HStack
w="100%"
h="auto"
alignContent="center"
alignItems="center"
spacing={0}
px={{ base: 1, sm: 2, md: 6 }}
>
{weekdays.map((weekDay) => {
return (
<Box
key={weekDay}
display="flex"
w="100%"
h={10}
bg="transparent"
border="1px solid #0068ff"
alignContent="center"
alignItems="center"
>
<Text display={{ base: "none", md: "block" }} w="100%" h="auto">
{weekDay}
</Text>
<Text
display={{ base: "none", sm: "block", md: "none" }}
w="100%"
h="auto"
>
{weekDay.substring(0, 3)}
</Text>
<Text display={{ base: "block", sm: "none" }} w="100%" h="auto">
{weekDay.substring(0, 2)}
</Text>
</Box>
);
})}
</HStack>
<SimpleGrid
w="100%"
h="100%"
columns={7}
px={{ base: 1, sm: 2, md: 6 }}
alignItems="center"
>
{currWeek &&
currWeek.map((day: MonthDay) => {
const { date, isOverflow, overflowDirection } = day;
const toDateObj: Date = new Date(date);
let sticker = null;
let id = "";
stickersMonth.map((stickerDay) => {
const { date: stickerDate } = stickerDay;
if (isSameDay(new Date(stickerDate), toDateObj)) {
sticker = stickerDay.sticker;
id = stickerDay.id;
}
});
return (
<Day
isLoading={isLoading}
isOverflow={isOverflow}
overflowDirection={overflowDirection}
currSticker={sticker}
date={date}
selectedDate={selectedDate.date}
currDate={currDateObj}
tutorial={type}
key={
id.length
? id
: format(toDateObj, "yyyyddLL") +
`/${sticker === null ? 0 : sticker}`
}
/>
);
})}
</SimpleGrid>
</VStack>
{type === "edit" && (
<VStack
w="100%"
h="auto"
alignContent="center"
alignItems="center"
spacing={2}
>
<Text fontSize="sm" color="whiteAlpha.800">
{
"Not being able to edit within this tutorial when the current date is the start of the week or month is a known bug."
}
</Text>
<Text fontSize="sm" color="whiteAlpha.800">
{"This bug will be fixed in beta v2."}
</Text>
<Text fontSize="sm" color="whiteAlpha.800">
{"You can skip the tutorial and try again tomorrow."}
</Text>
</VStack>
)}
</VStack>
);
};
export default CalenderExample;

10
src/components/tutorial/data/aboutApp.ts Normal file
View File

@@ -0,0 +1,10 @@
type AboutApp = string[];
const aboutApp: AboutApp = [
"The Potty Chart is app that mimics a potty/star chart commonly used while potty training toddler or child.",
"The app 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 with colorful themes, stickers, and even receive encouraging messaged from your big/dom, followed, and friends.",
"The final app will have settings to disable any mentions and references of ABDL to allow a more general audience to use, such as for a master and pet relationship.",
"This is a beta build of the app. Some functionality may not work as intended, is not fully functional, and may be missing entirely."
];
export default aboutApp;

9
src/components/tutorial/data/appFunctionality.ts Normal file
View File

@@ -0,0 +1,9 @@
type AppFunctionality = string[];
const appFunctionality: AppFunctionality = [
"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.",
"Ability to add a sticker to the current date.",
"Ability to add edit a sticker from a previous date with a confirmation prompt."
];
export default appFunctionality;

38
src/components/tutorial/index.tsx Normal file
View File

@@ -0,0 +1,38 @@
import React from "react";
import { VStack } from "@chakra-ui/react";
import TutorialCalender from "./sections/TutorialCalender";
import TutorialLinks from "./sections/TutorialLinks";
import TutorialHeading from "./sections/TutorialHeading";
import TutorialAboutApp from "./sections/TutorialAboutApp";
import TutorialSubmitButtons from "./sections/TutorialSubmitButtons";
import TutorialAppFunctionality from "./sections/TutorialAppFunctionality";
interface TutorialProps {
isLoading: boolean;
}
const Tutorial = ({ isLoading }: TutorialProps): JSX.Element => {
return (
<VStack
h="auto"
w="auto"
justifyContent="center"
alignContent="center"
my={8}
mx={{ base: 0, sm: 2, md: 4 }}
py={4}
px={{ base: 0, sm: 2, md: 4 }}
bg="gray.700"
borderRadius={{ base: "", sm: "2xl" }}
>
<TutorialHeading />
<TutorialAboutApp />
<TutorialAppFunctionality />
<TutorialCalender isLoading={isLoading} />
<TutorialLinks />
<TutorialSubmitButtons isLoading={isLoading} />
</VStack>
);
};
export default Tutorial;

33
src/components/tutorial/sections/TutorialAboutApp.tsx Normal file
View File

@@ -0,0 +1,33 @@
import React from "react";
import { VStack, Heading, Divider, Text } from "@chakra-ui/react";
import aboutApp from "../data/aboutApp";
const TutorialAboutApp = (): JSX.Element => {
return (
<VStack
h="auto"
w="100%"
justifyContent="center"
alignContent="center"
spacing={4}
>
<Heading as="h3" size="lg">
{"About the App"}
</Heading>
<VStack
h="auto"
w="100%"
justifyContent="start"
alignContent="center"
spacing={1}
>
{aboutApp.map((string: string) => {
return <Text key={string.replaceAll(" ", "-")}>{string}</Text>;
})}
</VStack>
<Divider orientation="horizontal" />
</VStack>
);
};
export default TutorialAboutApp;

33
src/components/tutorial/sections/TutorialAppFunctionality.tsx Normal file
View File

@@ -0,0 +1,33 @@
import React from "react";
import { VStack, Heading, Divider, Text } from "@chakra-ui/react";
import appFunctionality from "../data/appFunctionality";
const TutorialAppFunctionality = (): JSX.Element => {
return (
<VStack
h="auto"
w="100%"
justifyContent="center"
alignContent="center"
spacing={4}
>
<Heading as="h3" size="lg">
{"App Functionality"}
</Heading>
<VStack
h="auto"
w="100%"
justifyContent="start"
alignContent="center"
spacing={1}
>
{appFunctionality.map((string: string) => {
return <Text key={string.replaceAll(" ", "-")}>{string}</Text>;
})}
</VStack>
<Divider orientation="horizontal" />
</VStack>
);
};
export default TutorialAppFunctionality;

74
src/components/tutorial/sections/TutorialCalender.tsx Normal file
View File

@@ -0,0 +1,74 @@
import React from "react";
import { Divider, Heading, HStack, Text, VStack } from "@chakra-ui/react";
import CalenderExample from "../CalenderExample";
interface CalenderExampleProps {
isLoading: boolean;
}
const TutorialCalender = ({ isLoading }: CalenderExampleProps): JSX.Element => {
return (
<VStack
h="auto"
w="100%"
justifyContent="center"
alignContent="center"
spacing={4}
>
<Heading as="h3" size="lg">
{"How to Use The Calender"}
</Heading>
<VStack
h="auto"
w="100%"
justifyContent="center"
alignItems="center"
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 the"}</Text>
<Text color="#00ff3c">{" green "}</Text>
<Text>{"border."}</Text>
</HStack>
<CalenderExample type={"add"} isLoading={isLoading} />
</VStack>
<VStack
h="auto"
w="100%"
justifyContent="center"
alignItems="center"
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"} isLoading={isLoading} />
</VStack>
<Divider orientation="horizontal" />
</VStack>
);
};
export default TutorialCalender;

22
src/components/tutorial/sections/TutorialHeading.tsx Normal file
View File

@@ -0,0 +1,22 @@
import React from "react";
import { VStack, Heading, Divider } from "@chakra-ui/react";
const TutorialHeading = (): JSX.Element => {
return (
<VStack
h="auto"
w="100%"
justifyContent="center"
alignContent="center"
spacing={4}
>
<Heading as="h2">{"Welcome to Code Name: LCM Potty Chart"}</Heading>
<Heading as="h3" size="md">
{"A Lucid Creations Media Project"}
</Heading>
<Divider orientation="horizontal" />
</VStack>
);
};
export default TutorialHeading;

23
src/components/tutorial/sections/TutorialLinks.tsx Normal file
View File

@@ -0,0 +1,23 @@
import React from "react";
import { Divider, Heading, VStack } from "@chakra-ui/react";
import Buttons from "../../buttons";
const TutorialLinks = (): JSX.Element => {
return (
<VStack
h="auto"
w="100%"
justifyContent="center"
alignContent="center"
spacing={4}
>
<Heading as="h3" size="lg">
{"More Info"}
</Heading>
<Buttons />
<Divider orientation="horizontal" />
</VStack>
);
};
export default TutorialLinks;

83
src/components/tutorial/sections/TutorialSubmitButtons.tsx Normal file
View File

@@ -0,0 +1,83 @@
import { HStack, Button, VStack, Checkbox } from "@chakra-ui/react";
import React from "react";
import { useAppDispatch, useAppSelector } from "../../../app/hooks";
import {
setTutorialCompleted,
setTempTutorialComplete,
toggleRememberCompleted
} from "../../../features/tutorial";
interface TutorialSubmitButtonsProps {
isLoading: boolean;
}
const TutorialSubmitButtons = ({
isLoading
}: TutorialSubmitButtonsProps): JSX.Element => {
const rememberComplete: boolean = useAppSelector(
(state) => state.tutorial.rememberCompleted
);
const dispatch = useAppDispatch();
const handleComplete = (): void => {
if (rememberComplete) {
dispatch(setTutorialCompleted());
}
if (!rememberComplete) {
dispatch(setTempTutorialComplete());
}
};
const handleSkip = (): void => {
dispatch(setTempTutorialComplete());
};
const handleUpdateCheck = (): void => {
dispatch(toggleRememberCompleted());
};
return (
<HStack
h="auto"
w="90%"
justifyContent="space-between"
alignItems="flex-start"
pt={8}
>
<Button
type="button"
isDisabled={isLoading}
onClick={() => handleSkip()}
variant="skip"
>
{"Skip"}
</Button>
<VStack
h="auto"
w="auto"
justifyContent="center"
alignItems="center"
spacing={2}
>
<Button
type="button"
isDisabled={isLoading}
onClick={() => handleComplete()}
variant="primary"
>
{"Complete Tutorial"}
</Button>
<Checkbox
isChecked={rememberComplete}
isDisabled={isLoading}
onChange={() => handleUpdateCheck()}
>
{"Remember completed?"}
</Checkbox>
</VStack>
</HStack>
);
};
export default TutorialSubmitButtons;

12
src/features/calender/calender.ts → src/features/calender/index.ts
View File

@@ -5,6 +5,7 @@ import populate from "../../../lib/populateMonth";
interface CalenderSlice {
currDate: string;
selectedDateInfo: SelectedDateInfo;
isLoading: boolean;
}
const getCurrDate = (): Date => new Date();
@@ -17,7 +18,8 @@ const initialState: CalenderSlice = {
date: dateParse(getCurrDate()),
title: dateFormatter(getCurrDate()),
layout: populate(getCurrDate())
}
},
isLoading: true
};
// TODO: Add a function that validated if a month has at least one sticker in it. Use that within the nav function (when filter is enabled).
@@ -50,9 +52,15 @@ const calenderSlice = createSlice({
// Update current date
updateCurrDate(state: CalenderSlice) {
state.currDate = dateParse(new Date());
},
// Update isLoading
updateLoading(state: CalenderSlice, action: PayloadAction<boolean>) {
const { payload } = action;
state.isLoading = payload;
}
}
});
export const { updateMonth, updateCurrDate } = calenderSlice.actions;
export const { updateMonth, updateCurrDate, updateLoading } =
calenderSlice.actions;
export default calenderSlice.reducer;

140
src/features/tutorial/index.ts Normal file
View File

@@ -0,0 +1,140 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { addMonths, endOfDay } from "date-fns";
import versionStringToNumber from "../../../lib/versionStringToNumber";
export interface StorageState {
exp: string;
version: number;
completed: boolean;
}
const endOfToday: Date = endOfDay(new Date());
const generateExpDate = (): string => {
return endOfDay(addMonths(endOfToday, 1)).toJSON();
};
const generateVersion = (): number => {
const versionStr: string = process.env.NEXT_PUBLIC_APP_VERSION;
return versionStringToNumber(versionStr);
};
// * Storage Helpers * //
const setTempStorage = (storageState: StorageState): void => {
sessionStorage.setItem("completedTutorial", JSON.stringify(storageState));
};
const getTempStorage = (): StorageState | null => {
return JSON.parse(sessionStorage.getItem("completedTutorial"));
};
const clearTempStorage = (): void => {
sessionStorage.removeItem("completedTutorial");
};
const setStorage = (storageState: StorageState): void => {
localStorage.setItem("completedTutorial", JSON.stringify(storageState));
};
const getStorage = (): StorageState | null => {
return JSON.parse(localStorage.getItem("completedTutorial"));
};
const clearStorage = (): void => {
localStorage.removeItem("completedTutorial");
};
interface TutorialSlice {
completedTutorial: boolean | null;
storageState: StorageState | null;
rememberCompleted: boolean;
currWeek: MonthDay[] | null;
}
const initialState: TutorialSlice = {
completedTutorial: null,
storageState: null,
rememberCompleted: false,
currWeek: null
};
const tutorialSlice = createSlice({
name: "Tutorial",
initialState,
reducers: {
// Set temp complete
setTempTutorialComplete(state: TutorialSlice) {
const exp: string = generateExpDate();
const version: number = generateVersion();
const storageState: StorageState = {
exp,
version,
completed: true
};
setTempStorage(storageState);
state.storageState = storageState;
state.completedTutorial = true;
},
// Set completed (remember)
setTutorialCompleted(state: TutorialSlice) {
const exp: string = generateExpDate();
const version: number = generateVersion();
const storageState: StorageState = {
exp,
version,
completed: true
};
setStorage(storageState);
state.storageState = storageState;
state.completedTutorial = true;
},
// Clear states and storages
clearTutorialCompleted(state: TutorialSlice) {
clearTempStorage();
clearStorage();
state.storageState = null;
state.completedTutorial = null;
},
// Get and set states
getAndSetTutorial(state: TutorialSlice) {
const temp = getTempStorage();
const local = getStorage();
if (temp !== null || local !== null) {
state.storageState = temp !== null ? temp : local;
state.completedTutorial =
temp !== null ? temp.completed : local.completed;
}
if (temp === null && local === null) {
state.completedTutorial = false;
}
},
// Toggle remember completed
toggleRememberCompleted(state: TutorialSlice) {
const { rememberCompleted } = state;
state.rememberCompleted = !rememberCompleted;
},
// Set current week
setCurrentWeek(state: TutorialSlice, action: PayloadAction<MonthDay[]>) {
const { payload } = action;
state.currWeek = payload;
}
}
});
export const {
setTempTutorialComplete,
setTutorialCompleted,
clearTutorialCompleted,
getAndSetTutorial,
toggleRememberCompleted,
setCurrentWeek
} = tutorialSlice.actions;
export default tutorialSlice.reducer;

6
src/pages/_app.tsx
View File

@@ -2,6 +2,8 @@ import type { AppProps } from "next/app";
import React from "react";
import { ChakraProvider } from "@chakra-ui/react";
import AppTheme from "../theme/AppTheme";
import { Provider } from "react-redux";
import { store } from "../app/store";
import Layout from "../theme/layout/Layout";
import Head from "next/head";
@@ -17,7 +19,9 @@ function LCMPottyChart({ Component, pageProps }: AppProps): JSX.Element {
content="width=device-width, user-scalable=yes, initial-scale=1.0"
/>
</Head>
<Component {...pageProps} />
<Provider store={store}>
<Component {...pageProps} />
</Provider>
</Layout>
</ChakraProvider>
</React.StrictMode>

4
src/pages/_document.tsx
View File

@@ -1,11 +1,11 @@
import React from "react";
import NextDocument, { Html, Head, Main, NextScript } from "next/document";
import React from "react";
import { ColorModeScript } from "@chakra-ui/react";
import AppTheme from "../theme/AppTheme";
const description =
// "Behavior and progress tracker for ABDLs and babyfurs alike. Track multiple littles and create any trackers you would like.";
"Alpha preview of a, calender like, 'start chart' behavior and progress tracker for ABDLs and babyfurs.";
"Beta preview of a, calender like, 'star chart' behavior and progress tracker for ABDLs, diaperfurs, and babyfurs.";
const logo = "images/logo.svg";
const logoOG = "/images/logo.png";

12
src/pages/calendar/[...date].tsx
View File

@@ -1,4 +1,6 @@
import React, { useEffect, useState } from "react";
import { Provider } from "react-redux";
import { store } from "../../app/store";
import { Box } from "@chakra-ui/react";
import { useRouter } from "next/router";
import {
@@ -13,21 +15,21 @@ import {
// import findValidDateRange from "../../lib/findValidDateRange";
import ErrorPage from "next/error";
import Calender from "../../components/calender";
import { Provider } from "react-redux";
import { store } from "../../app/store";
const DateRoute: React.FC<unknown> = () => {
const router = useRouter();
const { date: slug } = router.query;
const [date, setDate] = useState<UpdateCalendarProps | null>(null);
const [date, setDate] = useState<UpdateCalenderPropsDateLayout | null>(null);
const [error, setError] = useState<boolean>(false);
// const dateRange = useRef(findValidDateRange());
// const validDateRange = Object.assign({}, dateRange.current);
const validateDateInput = (dateArr: number[]): UpdateCalendarProps => {
const validateDateInput = (
dateArr: number[]
): UpdateCalenderPropsDateLayout => {
if (!(dateArr.length >= 2) && !(dateArr.length <= 3)) {
return {
year: 0,
@@ -198,7 +200,7 @@ const DateRoute: React.FC<unknown> = () => {
) : (
<Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
<Provider store={store}>
<Calender {...date} />
<Calender date={date} isLoading={false} />
</Provider>
</Box>
);

127
src/pages/index.tsx
View File

@@ -1,21 +1,130 @@
import React, { useRef } from "react";
import { Box } from "@chakra-ui/react";
import { format } from "date-fns";
import React, { Fragment, useEffect, useRef } from "react";
import { Provider } from "react-redux";
import { store } from "../app/store";
import { useAppDispatch, useAppSelector } from "../app/hooks";
import { updateLoading } from "../features/calender";
import {
clearTutorialCompleted,
getAndSetTutorial,
StorageState
} from "../features/tutorial";
import { Box } from "@chakra-ui/react";
import { format, isAfter, isBefore, startOfDay } from "date-fns";
import Calender from "../components/calender";
import Tutorial from "../components/tutorial";
import LoadingOverlay from "../components/loading/LoadingOverlay";
import versionStringToNumber from "../../lib/versionStringToNumber";
const IndexPage = (): JSX.Element => {
const date = useRef<UpdateCalendarProps>({
year: parseInt(format(new Date(), "y")),
month: parseInt(format(new Date(), "M")),
day: parseInt(format(new Date(), "d"))
const currDateStr: string = useAppSelector(
(state) => state.calender.currDate
);
const isLoading: boolean = useAppSelector(
(state) => state.calender.isLoading
);
const currDateObj: Date = new Date(currDateStr);
// * Tutorial * //
const completedTutorial: boolean = useAppSelector(
(state) => state.tutorial.completedTutorial
);
const tutorialCompletionInfo: StorageState = useAppSelector(
(state) => state.tutorial.storageState
);
const dispatch = useAppDispatch();
// Get the completed tutorial cookie or have it set to false.
useEffect(() => {
if (completedTutorial === null && tutorialCompletionInfo === null) {
dispatch(getAndSetTutorial());
}
if (completedTutorial !== null) {
dispatch(updateLoading(false));
}
}, [completedTutorial, dispatch, tutorialCompletionInfo]);
// Checking the exp date of completed tutorial cookie and if the version completed is out of date.
useEffect(() => {
if (tutorialCompletionInfo !== null) {
const { exp, version } = tutorialCompletionInfo;
const currDateObj: Date = new Date(currDateStr);
/**
* Checks if the completed tutorial cookie is expired.
* @param {Date} expDate the date when the completed tutorital cookie expires.
* @returns {boolean} true if the cookie is expired, false is otherwise.
*/
const expDateValidator = (expDate: Date): boolean => {
let flag = false;
const startOfToday = startOfDay(currDateObj);
if (isAfter(startOfToday, expDate)) {
flag = true;
}
return flag;
};
/**
* Checks if the last time the completed tutorial is before an update to the tutorial.
* @param {number} lastVersionCompleted the version number the tutorial was last completed.
* @returns {boolean} true if the version given is before the changes to the tutorial, false otherwise.
*/
const versionValidator = (lastVersionCompleted: number): boolean => {
const lastVersionWithChangeStr: string =
process.env.NEXT_PUBLIC_NEW_TUTORIAL_VERSION;
const lastVersionWithChange: number = versionStringToNumber(
lastVersionWithChangeStr
);
const lastUpdatedDateStr: string =
process.env.NEXT_PUBLIC_LAST_UPDATE_DATE;
const lastUpdatedDate: Date = new Date(lastUpdatedDateStr);
let flag = false;
if (
lastVersionCompleted < lastVersionWithChange ||
(lastVersionCompleted === lastVersionWithChange &&
isBefore(currDateObj, lastUpdatedDate))
) {
flag = true;
console.error("Completed cookie version is out of date.");
}
return flag;
};
if (expDateValidator(new Date(exp)) || versionValidator(version)) {
console.warn("Version outdated or cookie expired.");
dispatch(clearTutorialCompleted());
}
}
}, [currDateStr, dispatch, tutorialCompletionInfo]);
// Current date
const currDate = useRef<UpdateCalenderPropsDateLayout>({
year: parseInt(format(currDateObj, "y")),
month: parseInt(format(currDateObj, "M")),
day: parseInt(format(currDateObj, "d"))
});
return (
<Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh" minWidth="min-content">
<Box textAlign="center" w="100%" h="auto" pt="50px" minWidth="min-content">
<Provider store={store}>
<Calender {...date.current} />
{isLoading === true ? (
<Fragment>
<LoadingOverlay />
<Calender date={currDate.current} isLoading={isLoading} />
</Fragment>
) : completedTutorial ? (
<Calender date={currDate.current} isLoading={isLoading} />
) : (
<Tutorial isLoading={isLoading} />
)}
</Provider>
</Box>
);

3
src/theme/AppTheme.ts
View File

@@ -29,7 +29,8 @@ const AppTheme = extendTheme({
footer: "#0097a7",
footerText: "black",
content: "#2d3748",
patreon: "#FF424D"
patreon: "#FF424D",
twitter: "#1da1f2"
},
loading: {
overlayBg: "#171923cb",

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

@@ -15,9 +15,11 @@ const buttonStyles = {
// styles for different visual variants ("outline", "solid")
variants: {
primary: (props: Dict<never> | StyleFunctionProps) => ({
bg: "rgba(255, 255, 255, .15)",
bg: "brand.primary",
fontSize: "xl",
p: "2",
py: 3,
px: 4,
color: "whiteAlpha",
_hover: {
bg: mode(
whiten("brand.primary", 20),
@@ -26,16 +28,29 @@ const buttonStyles = {
}
}),
secondary: (props: Dict<never> | StyleFunctionProps) => ({
bg: "brand.primary",
bg: "brand.secondary",
fontSize: "xl",
p: "2",
py: 3,
px: 4,
color: "whiteAlpha",
_hover: {
bg: mode(
whiten("brand.primary", 20),
darken("brand.primary", 20)
whiten("brand.secondary", 20),
darken("brand.secondary", 20)
)(props)
}
}),
skip: (props: Dict<never> | StyleFunctionProps) => ({
bg: "transparent",
fontSize: "xl",
py: 3,
px: 4,
color: "whiteAlpha.800",
_hover: {
bg: mode(whiten("brand.danger", 20), darken("brand.danger", 20))(props),
color: "whiteAlpha.900"
}
}),
stickerButton: (props: Dict<never> | StyleFunctionProps) => ({
bg: "transparent",
fontSize: "4rem",
@@ -48,27 +63,10 @@ const buttonStyles = {
)(props)
}
}),
project: (props: Dict<never> | StyleFunctionProps) => ({
bg: "transparent",
fontSize: "md",
py: 2,
px: 4,
boxShadow:
"rgba(0, 134, 255, 0.2) 0px 0px 15px, rgba(0, 134, 255, 0.15) 0px 0px 3px 1px",
border: "1px solid rgba(0, 134, 255, 0.4)",
_hover: {
bg: mode(
whiten("brand.secondary", 20),
darken("brand.secondary", 20)
)(props),
boxShadow:
"rgba(0, 104, 255, 0.5) 0px 0px 15px, rgba(0, 104, 255, 0.3) 0px 0px 3px 1px"
}
}),
nav: (props: Dict<never> | StyleFunctionProps) => ({
bg: "transparent",
fontSize: "md",
px: "2",
px: 2,
_hover: {
bg: mode(
whiten("brand.secondary", 20),
@@ -79,15 +77,16 @@ const buttonStyles = {
stickyNav: (/* props: Dict<never> | StyleFunctionProps */) => ({
bg: "transparent",
fontSize: "md",
px: "2",
px: 2,
_hover: {
textDecoration: "underline"
}
}),
credits: (props: Dict<never> | StyleFunctionProps) => ({
footer: (props: Dict<never> | StyleFunctionProps) => ({
bg: "brand.main",
fontSize: "lg",
p: 3,
py: 3,
px: 4,
color: "whiteAlpha",
_hover: {
bg: mode(whiten("brand.main", 20), darken("brand.main", 20))(props)
@@ -113,22 +112,6 @@ const buttonStyles = {
border: "1px solid rgba(0, 134, 255, 1)"
}
}),
collapse: (props: Dict<never> | StyleFunctionProps) => ({
bg: "transparent",
fontSize: "md",
p: 2,
h: 8,
color: "brand.hover",
textDecoration: "underline",
_hover: {
bg: mode(
whiten("brand.secondary", 20),
darken("brand.secondary", 20)
)(props),
color: "whiteAlpha.900",
textDecoration: "none"
}
}),
submit: (props: Dict<never> | StyleFunctionProps) => ({
fontSize: "lg",
py: 2,
@@ -151,7 +134,7 @@ const buttonStyles = {
mobileNav: (props: Dict<never> | StyleFunctionProps) => ({
// bg: "transparent",
fontSize: "md",
px: "2",
px: 2,
boxShadow:
"rgba(0, 134, 255, 0.30) 0px 0px 15px, rgba(0, 134, 255, 0.15) 0px 0px 3px 1px",
_hover: {
@@ -180,6 +163,19 @@ const buttonStyles = {
darken("brand.patreon", 20)
)(props)
}
}),
twitter: (props: Dict<never> | StyleFunctionProps) => ({
bg: "brand.twitter",
fontSize: "lg",
py: 3,
px: 4,
color: "whiteAlpha",
_hover: {
bg: mode(
whiten("brand.twitter", 20),
darken("brand.twitter", 20)
)(props)
}
})
},
// default values for `size` and `variant`

35
src/theme/layout/Footer.tsx
View File

@@ -4,16 +4,18 @@ import {
Text,
VStack,
Link,
HStack,
// Image,
Button,
BoxProps
} from "@chakra-ui/react";
import { Icon } from "@iconify/react";
// import BackToTopButton from "./BackToTopButton";
import { motion } from "framer-motion";
import Patreon from "../../components/buttons/Patreon";
import CustomButton from "../../components/buttons/Custom";
import Twitter from "../../components/buttons/Twitter";
import Buttons from "../../components/buttons";
export const MotionBox = motion<BoxProps>(Box);
const MotionBox = motion<BoxProps>(Box);
const Footer = (): JSX.Element => {
// const [showBackToTop, setShowBackToTop] = useState<boolean>(false);
@@ -68,32 +70,7 @@ const Footer = (): JSX.Element => {
</Button>
</Link>
</MotionBox> */}
<MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
<Link
href="https://lucidcreations.media/introducing-code-name-potty-chart/"
target="_blank"
rel="noopener"
>
<Button color="whiteAlpha" variant="credits">
More About This App
</Button>
</Link>
</MotionBox>
<MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
<Link
href="https://www.patreon.com/bePatron?u=15380906"
target="_blank"
rel="noopener"
>
<Button
color="whiteAlpha"
variant="patreon"
leftIcon={<Icon icon="ri:patreon-fill" />}
>
Fund This App
</Button>
</Link>
</MotionBox>
<Buttons />
<Text color="brand.footerText" fontSize="xs">
&copy;
{` 2021 - ${new Date().getFullYear()} `}

26
src/theme/layout/Header.tsx
View File

@@ -15,7 +15,7 @@ import appLogo from "../../../public/images/logo.svg";
const Header = (): JSX.Element => {
const appName = "LCM Potty Chart";
const appVersion = "v0.0.11-alpha";
const appVersion = process.env.NEXT_PUBLIC_APP_VERSION_HEADER || "";
// Add transparency while not at the top of the page.
const [transparentNavbar, setTransparentNavbar] = useState<boolean>(false);
@@ -99,18 +99,18 @@ const Header = (): JSX.Element => {
>
{/* Logo | Site Name */}
<HStack
display={{ base: "flex", lg: "none" }}
position="absolute"
width="100%"
height={12}
top={0}
ml={4}
spacing="5px"
justifyContent={{
base: "flex-start",
sm: "center"
}}
alignItems="center"
height={12}
top={0}
position="absolute"
ml={4}
display={{ base: "flex", lg: "none" }}
spacing="5px"
_hover={{
cursor: "default"
}}
@@ -163,21 +163,21 @@ const Header = (): JSX.Element => {
</HStack>
<Menu isLazy lazyBehavior="unmount" isOpen={open}>
<MenuButton
id="mobile-menu-button"
as={IconButton}
aria-label="Mobile Menu"
icon={menuIcon()}
onClick={() => setOpen(!open)}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
display={{
base: "inline-flex",
lg: "none"
}}
variant="mobileNav"
bg={transparentNavbar ? "transparent" : "rgba(255, 255, 255, .15)"}
type="button"
border={transparentNavbar ? "1px solid #0068ff" : "none"}
id="mobile-menu-button"
variant="mobileNav"
type="button"
onClick={() => setOpen(!open)}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
/>
<MobileNav updateOpen={setOpen} />
</Menu>

1
src/theme/layout/Layout.tsx
View File

@@ -1,5 +1,4 @@
import React, { FC, ReactNode } from "react";
import type { AppProps } from "next/app";
import Header from "../layout/Header";
import { Box } from "@chakra-ui/layout";

2
src/theme/layout/MobileNav.tsx
View File

@@ -17,12 +17,12 @@ const MobileNav: FC<MobileNavProps> = ({ updateOpen }: MobileNavProps) => {
<MenuList
as="nav"
display={{ base: "block", lg: "none" }}
bg="brand.main"
h="auto"
w="100%"
p={0}
border="none"
boxShadow="none"
bg="brand.main"
>
{navItems.map((navItem: NavItem, index: number) => {
return (

6
types/Calender.d.ts vendored
View File

@@ -39,11 +39,15 @@ interface MonthLayout {
monday: WeekLayout;
}
interface UpdateCalendarProps {
interface UpdateCalenderPropsDateLayout {
year: number;
month: number;
day: number;
}
interface UpdateCalendarProps {
date: UpdateCalenderPropsDateLayout;
isLoading: boolean;
}
interface SelectedDateInfo {
date: string;

345
yarn.lock
View File

@@ -78,7 +78,7 @@ __metadata:
languageName: node
linkType: hard
"@babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.9.2":
"@babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.9.2":
version: 7.18.3
resolution: "@babel/runtime@npm:7.18.3"
dependencies:
@@ -1446,13 +1446,13 @@ __metadata:
languageName: node
linkType: hard
"@typescript-eslint/eslint-plugin@npm:<5.28.0":
version: 5.27.1
resolution: "@typescript-eslint/eslint-plugin@npm:5.27.1"
"@typescript-eslint/eslint-plugin@npm:^5.29.0":
version: 5.29.0
resolution: "@typescript-eslint/eslint-plugin@npm:5.29.0"
dependencies:
"@typescript-eslint/scope-manager": 5.27.1
"@typescript-eslint/type-utils": 5.27.1
"@typescript-eslint/utils": 5.27.1
"@typescript-eslint/scope-manager": 5.29.0
"@typescript-eslint/type-utils": 5.29.0
"@typescript-eslint/utils": 5.29.0
debug: ^4.3.4
functional-red-black-tree: ^1.0.1
ignore: ^5.2.0
@@ -1465,7 +1465,7 @@ __metadata:
peerDependenciesMeta:
typescript:
optional: true
checksum: ee00d8d3a7b395e346801b7bf30209e278f06b5c283ad71c03b34db9e2d68a43ca0e292e315fa7e5bf131a8839ff4a24e0ed76c37811d230f97aae7e123d73ea
checksum: b1022a640f80c314ac8b247a2ccdd21f4b523b3cb8906956f5d276008ac964c8a1e951b2b2b16ca9621eb795dc9bbf6447b5b767acfe4866a1bc3e3527d966fc
languageName: node
linkType: hard
@@ -1496,21 +1496,21 @@ __metadata:
languageName: node
linkType: hard
"@typescript-eslint/scope-manager@npm:5.27.1":
version: 5.27.1
resolution: "@typescript-eslint/scope-manager@npm:5.27.1"
"@typescript-eslint/scope-manager@npm:5.29.0":
version: 5.29.0
resolution: "@typescript-eslint/scope-manager@npm:5.29.0"
dependencies:
"@typescript-eslint/types": 5.27.1
"@typescript-eslint/visitor-keys": 5.27.1
checksum: 401bf2b46de08ddb80ec9f36df7d58bf5de7837185a472b190b670d421d685743aad4c9fa8a6893f65ba933b822c5d7060c640e87cf0756d7aa56abdd25689cc
"@typescript-eslint/types": 5.29.0
"@typescript-eslint/visitor-keys": 5.29.0
checksum: 540642bef9c55fd7692af98dfb42ab99eeb82553f42ab2a3c4e132e02b5ba492da1c6bf1ca6b02b900a678fc74399ad6c564c0ca20d91032090b6cbcb01a5bde
languageName: node
linkType: hard
"@typescript-eslint/type-utils@npm:5.27.1":
version: 5.27.1
resolution: "@typescript-eslint/type-utils@npm:5.27.1"
"@typescript-eslint/type-utils@npm:5.29.0":
version: 5.29.0
resolution: "@typescript-eslint/type-utils@npm:5.29.0"
dependencies:
"@typescript-eslint/utils": 5.27.1
"@typescript-eslint/utils": 5.29.0
debug: ^4.3.4
tsutils: ^3.21.0
peerDependencies:
@@ -1518,7 +1518,7 @@ __metadata:
peerDependenciesMeta:
typescript:
optional: true
checksum: 43b7da26ea1bd7d249c45d168ec88f971fb71362bbc21ec4748d73b1ecb43f4ca59f5ed338e8dbc74272ae4ebac1cab87a9b62c0fa616c6f9bd833a212dc8a40
checksum: 686b8ff05a7591f76a2a1d3746b988168dcbd59c2f52de095b19e4f8e17063e03dc3d0f7b3d84f7be6880f2df97c3e184877664d0b4275ea9871c31d1e58c7d2
languageName: node
linkType: hard
@@ -1529,10 +1529,10 @@ __metadata:
languageName: node
linkType: hard
"@typescript-eslint/types@npm:5.27.1":
version: 5.27.1
resolution: "@typescript-eslint/types@npm:5.27.1"
checksum: 81faa50256ba67c23221273744c51676774fe6a1583698c3a542f3e2fd21ab34a4399019527c9cf7ab4e5a1577272f091d5848d3af937232ddb2dbf558a7c39a
"@typescript-eslint/types@npm:5.29.0":
version: 5.29.0
resolution: "@typescript-eslint/types@npm:5.29.0"
checksum: 982ecdd69103105cabff8deac7f82f6002cf909238702ce902133e9af655cd962f977d5adf650c5ddae80d8c0e46abe1612a9141b25c7ed20ba8d662eb7ab871
languageName: node
linkType: hard
@@ -1554,12 +1554,12 @@ __metadata:
languageName: node
linkType: hard
"@typescript-eslint/typescript-estree@npm:5.27.1":
version: 5.27.1
resolution: "@typescript-eslint/typescript-estree@npm:5.27.1"
"@typescript-eslint/typescript-estree@npm:5.29.0":
version: 5.29.0
resolution: "@typescript-eslint/typescript-estree@npm:5.29.0"
dependencies:
"@typescript-eslint/types": 5.27.1
"@typescript-eslint/visitor-keys": 5.27.1
"@typescript-eslint/types": 5.29.0
"@typescript-eslint/visitor-keys": 5.29.0
debug: ^4.3.4
globby: ^11.1.0
is-glob: ^4.0.3
@@ -1568,23 +1568,23 @@ __metadata:
peerDependenciesMeta:
typescript:
optional: true
checksum: 59d2a0885be7d54bd86472a446d84930cc52d2690ea432d9164075ea437b3b4206dadd49799764ad0fb68f3e4ebb4e36db9717c7a443d0f3c82d5659e41fbd05
checksum: b91107a9fc31bf511aaa70f1e6d1d832d3acf08cfe999c870169447a7c223abff54c1d604bbb08d7c069dd98b43fb279bc314d1726097704fe8ad4c6e0969b12
languageName: node
linkType: hard
"@typescript-eslint/utils@npm:5.27.1":
version: 5.27.1
resolution: "@typescript-eslint/utils@npm:5.27.1"
"@typescript-eslint/utils@npm:5.29.0":
version: 5.29.0
resolution: "@typescript-eslint/utils@npm:5.29.0"
dependencies:
"@types/json-schema": ^7.0.9
"@typescript-eslint/scope-manager": 5.27.1
"@typescript-eslint/types": 5.27.1
"@typescript-eslint/typescript-estree": 5.27.1
"@typescript-eslint/scope-manager": 5.29.0
"@typescript-eslint/types": 5.29.0
"@typescript-eslint/typescript-estree": 5.29.0
eslint-scope: ^5.1.1
eslint-utils: ^3.0.0
peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
checksum: 51add038226cddad2b3322225de18d53bc1ed44613f7b3a379eb597114b8830a632990b0f4321e0ddf3502b460d80072d7e789be89135b5e11e8dae167005625
checksum: 216f51fb9c176437919af55db9ed14db8af7b020611e954c06e69956b9e3248cbfe6a218013d6c17b716116dca6566a4c03710f9b48ce4e94f89312d61c16d07
languageName: node
linkType: hard
@@ -1598,13 +1598,13 @@ __metadata:
languageName: node
linkType: hard
"@typescript-eslint/visitor-keys@npm:5.27.1":
version: 5.27.1
resolution: "@typescript-eslint/visitor-keys@npm:5.27.1"
"@typescript-eslint/visitor-keys@npm:5.29.0":
version: 5.29.0
resolution: "@typescript-eslint/visitor-keys@npm:5.29.0"
dependencies:
"@typescript-eslint/types": 5.27.1
"@typescript-eslint/types": 5.29.0
eslint-visitor-keys: ^3.3.0
checksum: 8f104eda321cd6c613daf284fbebbd32b149d4213d137b0ce1caec7a1334c9f46c82ed64aff1243b712ac8c13f67ac344c996cd36d21fbb15032c24d9897a64a
checksum: 15f228ad9ffaf0e42cc6b2ee4e5095c1e89c4c2dc46a65d19ca0e2296d88c08a1192039d942bd9600b1496176749f6322d636dd307602dbab90404a9501b4d6e
languageName: node
linkType: hard
@@ -1682,13 +1682,6 @@ __metadata:
languageName: node
linkType: hard
"ansi-regex@npm:^2.0.0":
version: 2.1.1
resolution: "ansi-regex@npm:2.1.1"
checksum: 190abd03e4ff86794f338a31795d262c1dfe8c91f7e01d04f13f646f1dcb16c5800818f886047876f1272f065570ab86b24b99089f8b68a0e11ff19aed4ca8f1
languageName: node
linkType: hard
"ansi-regex@npm:^5.0.1":
version: 5.0.1
resolution: "ansi-regex@npm:5.0.1"
@@ -1714,13 +1707,6 @@ __metadata:
languageName: node
linkType: hard
"aproba@npm:^1.0.3":
version: 1.2.0
resolution: "aproba@npm:1.2.0"
checksum: 0fca141966559d195072ed047658b6e6c4fe92428c385dd38e288eacfc55807e7b4989322f030faff32c0f46bb0bc10f1e0ac32ec22d25315a1e5bbc0ebb76dc
languageName: node
linkType: hard
"aproba@npm:^1.0.3 || ^2.0.0":
version: 2.0.0
resolution: "aproba@npm:2.0.0"
@@ -1738,16 +1724,6 @@ __metadata:
languageName: node
linkType: hard
"are-we-there-yet@npm:~1.1.2":
version: 1.1.7
resolution: "are-we-there-yet@npm:1.1.7"
dependencies:
delegates: ^1.0.0
readable-stream: ^2.0.6
checksum: 70d251719c969b2745bfe5ddf3ebaefa846a636e90a6d5212573676af5d6670e15457761d4725731e19cbebdce42c4ab0cbedf23ab047f2a08274985aa10a3c7
languageName: node
linkType: hard
"argparse@npm:^2.0.1":
version: 2.0.1
resolution: "argparse@npm:2.0.1"
@@ -1845,6 +1821,13 @@ __metadata:
languageName: node
linkType: hard
"axe-core@npm:^4.4.2":
version: 4.4.2
resolution: "axe-core@npm:4.4.2"
checksum: 93fbb36c5ac8ab5e67e49678a6f7be0dc799a9f560edd95cca1f0a8183def8c50205972366b9941a3ea2b20224a1fe230e6d87ef38cb6db70472ed1b694febd1
languageName: node
linkType: hard
"axobject-query@npm:^2.2.0":
version: 2.2.0
resolution: "axobject-query@npm:2.2.0"
@@ -2018,13 +2001,6 @@ __metadata:
languageName: node
linkType: hard
"code-point-at@npm:^1.0.0":
version: 1.1.0
resolution: "code-point-at@npm:1.1.0"
checksum: 17d5666611f9b16d64fdf48176d9b7fb1c7d1c1607a189f7e600040a11a6616982876af148230336adb7d8fe728a559f743a4e29db3747e3b1a32fa7f4529681
languageName: node
linkType: hard
"color-convert@npm:^1.9.0":
version: 1.9.3
resolution: "color-convert@npm:1.9.3"
@@ -2100,7 +2076,7 @@ __metadata:
languageName: node
linkType: hard
"console-control-strings@npm:^1.0.0, console-control-strings@npm:^1.1.0, console-control-strings@npm:~1.1.0":
"console-control-strings@npm:^1.1.0":
version: 1.1.0
resolution: "console-control-strings@npm:1.1.0"
checksum: 8755d76787f94e6cf79ce4666f0c5519906d7f5b02d4b884cf41e11dcd759ed69c57da0670afd9236d229a46e0f9cf519db0cd829c6dca820bb5a5c3def584ed
@@ -2132,13 +2108,6 @@ __metadata:
languageName: node
linkType: hard
"core-util-is@npm:~1.0.0":
version: 1.0.3
resolution: "core-util-is@npm:1.0.3"
checksum: 9de8597363a8e9b9952491ebe18167e3b36e7707569eed0ebf14f8bba773611376466ae34575bca8cfe3c767890c859c74056084738f09d4e4a6f902b2ad7d99
languageName: node
linkType: hard
"cosmiconfig@npm:^6.0.0":
version: 6.0.0
resolution: "cosmiconfig@npm:6.0.0"
@@ -2186,7 +2155,7 @@ __metadata:
languageName: node
linkType: hard
"damerau-levenshtein@npm:^1.0.7":
"damerau-levenshtein@npm:^1.0.7, damerau-levenshtein@npm:^1.0.8":
version: 1.0.8
resolution: "damerau-levenshtein@npm:1.0.8"
checksum: d240b7757544460ae0586a341a53110ab0a61126570ef2d8c731e3eab3f0cb6e488e2609e6a69b46727635de49be20b071688698744417ff1b6c1d7ccd03e0de
@@ -2589,6 +2558,29 @@ __metadata:
languageName: node
linkType: hard
"eslint-plugin-jsx-a11y@npm:^6.6.0":
version: 6.6.0
resolution: "eslint-plugin-jsx-a11y@npm:6.6.0"
dependencies:
"@babel/runtime": ^7.18.3
aria-query: ^4.2.2
array-includes: ^3.1.5
ast-types-flow: ^0.0.7
axe-core: ^4.4.2
axobject-query: ^2.2.0
damerau-levenshtein: ^1.0.8
emoji-regex: ^9.2.2
has: ^1.0.3
jsx-ast-utils: ^3.3.1
language-tags: ^1.0.5
minimatch: ^3.1.2
semver: ^6.3.0
peerDependencies:
eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
checksum: d9da9a3ec71137c12519289c63e71250d5d78d4b7729b84e7e12edf1aad993083f23303d9b62359591b2f8aababb1bbec032cd84f1425e759b11a055e3acd144
languageName: node
linkType: hard
"eslint-plugin-react-hooks@npm:<4.6.0, eslint-plugin-react-hooks@npm:^4.5.0":
version: 4.5.0
resolution: "eslint-plugin-react-hooks@npm:4.5.0"
@@ -2598,7 +2590,7 @@ __metadata:
languageName: node
linkType: hard
"eslint-plugin-react@npm:^7.29.4, eslint-plugin-react@npm:^7.30.0":
"eslint-plugin-react@npm:^7.29.4":
version: 7.30.0
resolution: "eslint-plugin-react@npm:7.30.0"
dependencies:
@@ -2622,6 +2614,30 @@ __metadata:
languageName: node
linkType: hard
"eslint-plugin-react@npm:^7.30.1":
version: 7.30.1
resolution: "eslint-plugin-react@npm:7.30.1"
dependencies:
array-includes: ^3.1.5
array.prototype.flatmap: ^1.3.0
doctrine: ^2.1.0
estraverse: ^5.3.0
jsx-ast-utils: ^2.4.1 || ^3.0.0
minimatch: ^3.1.2
object.entries: ^1.1.5
object.fromentries: ^2.0.5
object.hasown: ^1.1.1
object.values: ^1.1.5
prop-types: ^15.8.1
resolve: ^2.0.0-next.3
semver: ^6.3.0
string.prototype.matchall: ^4.0.7
peerDependencies:
eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
checksum: 553fb9ece6beb7c14cf6f84670c786c8ac978c2918421994dcc4edd2385302022e5d5ac4a39fafdb35954e29cecddefed61758040c3c530cafcf651f674a9d51
languageName: node
linkType: hard
"eslint-scope@npm:^5.1.1":
version: 5.1.1
resolution: "eslint-scope@npm:5.1.1"
@@ -2889,9 +2905,9 @@ __metadata:
languageName: node
linkType: hard
"framer-motion@npm:^6.3.11":
version: 6.3.11
resolution: "framer-motion@npm:6.3.11"
"framer-motion@npm:^6.3.15":
version: 6.3.15
resolution: "framer-motion@npm:6.3.15"
dependencies:
"@emotion/is-prop-valid": ^0.8.2
framesync: 6.0.1
@@ -2905,7 +2921,7 @@ __metadata:
dependenciesMeta:
"@emotion/is-prop-valid":
optional: true
checksum: 2333b296a109ec0ef86421453f66a92b63e07930a491102f1007bbe48f40594d8c51a96ca937f8f3f013ba658147049bf1fa9feebc44487b8e7617bb674fb254
checksum: d761745e25c7c81c96e15c73b311afb1b732c31f8deb6dc9f71edff32f4b0495af28580707288ae3827a8c1b2a71e093b7b97746ddf73dc7aaecf5d2a29ce71c
languageName: node
linkType: hard
@@ -2999,22 +3015,6 @@ __metadata:
languageName: node
linkType: hard
"gauge@npm:~2.7.3":
version: 2.7.4
resolution: "gauge@npm:2.7.4"
dependencies:
aproba: ^1.0.3
console-control-strings: ^1.0.0
has-unicode: ^2.0.0
object-assign: ^4.1.0
signal-exit: ^3.0.0
string-width: ^1.0.1
strip-ansi: ^3.0.1
wide-align: ^1.1.0
checksum: a89b53cee65579b46832e050b5f3a79a832cc422c190de79c6b8e2e15296ab92faddde6ddf2d376875cbba2b043efa99b9e1ed8124e7365f61b04e3cee9d40ee
languageName: node
linkType: hard
"get-intrinsic@npm:^1.0.2, get-intrinsic@npm:^1.1.0, get-intrinsic@npm:^1.1.1":
version: 1.1.1
resolution: "get-intrinsic@npm:1.1.1"
@@ -3200,7 +3200,7 @@ __metadata:
languageName: node
linkType: hard
"has-unicode@npm:^2.0.0, has-unicode@npm:^2.0.1":
"has-unicode@npm:^2.0.1":
version: 2.0.1
resolution: "has-unicode@npm:2.0.1"
checksum: 1eab07a7436512db0be40a710b29b5dc21fa04880b7f63c9980b706683127e3c1b57cb80ea96d47991bdae2dfe479604f6a1ba410106ee1046a41d1bd0814400
@@ -3340,7 +3340,7 @@ __metadata:
languageName: node
linkType: hard
"inherits@npm:2, inherits@npm:^2.0.3, inherits@npm:^2.0.4, inherits@npm:~2.0.3":
"inherits@npm:2, inherits@npm:^2.0.3, inherits@npm:^2.0.4":
version: 2.0.4
resolution: "inherits@npm:2.0.4"
checksum: 4a48a733847879d6cf6691860a6b1e3f0f4754176e4d71494c41f3475553768b10f84b5ce1d40fbd0e34e6bfbb864ee35858ad4dd2cf31e02fc4a154b724d7f1
@@ -3446,15 +3446,6 @@ __metadata:
languageName: node
linkType: hard
"is-fullwidth-code-point@npm:^1.0.0":
version: 1.0.0
resolution: "is-fullwidth-code-point@npm:1.0.0"
dependencies:
number-is-nan: ^1.0.0
checksum: 4d46a7465a66a8aebcc5340d3b63a56602133874af576a9ca42c6f0f4bd787a743605771c5f246db77da96605fefeffb65fc1dbe862dcc7328f4b4d03edf5a57
languageName: node
linkType: hard
"is-fullwidth-code-point@npm:^3.0.0":
version: 3.0.0
resolution: "is-fullwidth-code-point@npm:3.0.0"
@@ -3547,13 +3538,6 @@ __metadata:
languageName: node
linkType: hard
"isarray@npm:~1.0.0":
version: 1.0.0
resolution: "isarray@npm:1.0.0"
checksum: f032df8e02dce8ec565cf2eb605ea939bdccea528dbcf565cdf92bfa2da9110461159d86a537388ef1acef8815a330642d7885b29010e8f7eac967c9993b65ab
languageName: node
linkType: hard
"isexe@npm:^2.0.0":
version: 2.0.0
resolution: "isexe@npm:2.0.0"
@@ -3621,6 +3605,16 @@ __metadata:
languageName: node
linkType: hard
"jsx-ast-utils@npm:^3.3.1":
version: 3.3.1
resolution: "jsx-ast-utils@npm:3.3.1"
dependencies:
array-includes: ^3.1.5
object.assign: ^4.1.2
checksum: 1d4b32fd24bbba561d5ca5c8d6ea095be646f83fc357d6f0cd2752f97f3ba0e0ffabc2f54b37a9d98258fc8ec0e1286cb7723cc1c9dc7af402d74fff72ae0a2b
languageName: node
linkType: hard
"language-subtag-registry@npm:~0.3.2":
version: 0.3.21
resolution: "language-subtag-registry@npm:0.3.21"
@@ -3731,22 +3725,22 @@ __metadata:
"@types/node": ^18.0.0
"@types/react": ^18.0.14
"@types/react-redux": ^7.1.24
"@typescript-eslint/eslint-plugin": <5.28.0
"@typescript-eslint/eslint-plugin": ^5.29.0
date-fns: ^2.28.0
eslint: ^8.18.0
eslint-config-next: ^12.1.6
eslint-config-prettier: ^8.5.0
eslint-plugin-jsx-a11y: ^6.5.1
eslint-plugin-react: ^7.30.0
eslint-plugin-jsx-a11y: ^6.6.0
eslint-plugin-react: ^7.30.1
eslint-plugin-react-hooks: <4.6.0
formik: ^2.2.9
framer-motion: ^6.3.11
framer-motion: ^6.3.15
next: 12.1.6
prettier: ^2.7.1
react: ^18.2.0
react-dom: ^18.2.0
react-redux: ^8.0.2
sharp: ^0.30.6
sharp: ^0.30.7
typescript: ^4.7.4
languageName: unknown
linkType: soft
@@ -4074,18 +4068,6 @@ __metadata:
languageName: node
linkType: hard
"npmlog@npm:^4.0.1":
version: 4.1.2
resolution: "npmlog@npm:4.1.2"
dependencies:
are-we-there-yet: ~1.1.2
console-control-strings: ~1.1.0
gauge: ~2.7.3
set-blocking: ~2.0.0
checksum: edbda9f95ec20957a892de1839afc6fb735054c3accf6fbefe767bac9a639fd5cea2baeac6bd2bcd50a85cb54924d57d9886c81c7fbc2332c2ddd19227504192
languageName: node
linkType: hard
"npmlog@npm:^6.0.0":
version: 6.0.2
resolution: "npmlog@npm:6.0.2"
@@ -4098,14 +4080,7 @@ __metadata:
languageName: node
linkType: hard
"number-is-nan@npm:^1.0.0":
version: 1.0.1
resolution: "number-is-nan@npm:1.0.1"
checksum: 13656bc9aa771b96cef209ffca31c31a03b507ca6862ba7c3f638a283560620d723d52e626d57892c7fff475f4c36ac07f0600f14544692ff595abff214b9ffb
languageName: node
linkType: hard
"object-assign@npm:^4.1.0, object-assign@npm:^4.1.1":
"object-assign@npm:^4.1.1":
version: 4.1.1
resolution: "object-assign@npm:4.1.1"
checksum: fcc6e4ea8c7fe48abfbb552578b1c53e0d194086e2e6bbbf59e0a536381a292f39943c6e9628af05b5528aa5e3318bb30d6b2e53cadaf5b8fe9e12c4b69af23f
@@ -4331,9 +4306,9 @@ __metadata:
languageName: node
linkType: hard
"prebuild-install@npm:^7.1.0":
version: 7.1.0
resolution: "prebuild-install@npm:7.1.0"
"prebuild-install@npm:^7.1.1":
version: 7.1.1
resolution: "prebuild-install@npm:7.1.1"
dependencies:
detect-libc: ^2.0.0
expand-template: ^2.0.3
@@ -4342,7 +4317,6 @@ __metadata:
mkdirp-classic: ^0.5.3
napi-build-utils: ^1.0.1
node-abi: ^3.3.0
npmlog: ^4.0.1
pump: ^3.0.0
rc: ^1.2.7
simple-get: ^4.0.0
@@ -4350,7 +4324,7 @@ __metadata:
tunnel-agent: ^0.6.0
bin:
prebuild-install: bin.js
checksum: 204f2d89c6d6179fa1039036514aa72f7d0b537e421ef72c40840286e318f41489f00f22c6acc725cce6e10d43825b69dcabeaadfc917db781c58cd56fc25f90
checksum: dbf96d0146b6b5827fc8f67f72074d2e19c69628b9a7a0a17d0fad1bf37e9f06922896972e074197fc00a52eae912993e6ef5a0d471652f561df5cb516f3f467
languageName: node
linkType: hard
@@ -4370,13 +4344,6 @@ __metadata:
languageName: node
linkType: hard
"process-nextick-args@npm:~2.0.0":
version: 2.0.1
resolution: "process-nextick-args@npm:2.0.1"
checksum: 1d38588e520dab7cea67cbbe2efdd86a10cc7a074c09657635e34f035277b59fbb57d09d8638346bf7090f8e8ebc070c96fa5fd183b777fff4f5edff5e9466cf
languageName: node
linkType: hard
"promise-inflight@npm:^1.0.1":
version: 1.0.1
resolution: "promise-inflight@npm:1.0.1"
@@ -4607,21 +4574,6 @@ __metadata:
languageName: node
linkType: hard
"readable-stream@npm:^2.0.6":
version: 2.3.7
resolution: "readable-stream@npm:2.3.7"
dependencies:
core-util-is: ~1.0.0
inherits: ~2.0.3
isarray: ~1.0.0
process-nextick-args: ~2.0.0
safe-buffer: ~5.1.1
string_decoder: ~1.1.1
util-deprecate: ~1.0.1
checksum: e4920cf7549a60f8aaf694d483a0e61b2a878b969d224f89b3bc788b8d920075132c4b55a7494ee944c7b6a9a0eada28a7f6220d80b0312ece70bbf08eeca755
languageName: node
linkType: hard
"readable-stream@npm:^3.1.1, readable-stream@npm:^3.4.0, readable-stream@npm:^3.6.0":
version: 3.6.0
resolution: "readable-stream@npm:3.6.0"
@@ -4777,7 +4729,7 @@ __metadata:
languageName: node
linkType: hard
"safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1":
"safe-buffer@npm:~5.1.1":
version: 5.1.2
resolution: "safe-buffer@npm:5.1.2"
checksum: f2f1f7943ca44a594893a852894055cf619c1fbcb611237fc39e461ae751187e7baf4dc391a72125e0ac4fb2d8c5c0b3c71529622e6a58f46b960211e704903c
@@ -4820,27 +4772,27 @@ __metadata:
languageName: node
linkType: hard
"set-blocking@npm:^2.0.0, set-blocking@npm:~2.0.0":
"set-blocking@npm:^2.0.0":
version: 2.0.0
resolution: "set-blocking@npm:2.0.0"
checksum: 6e65a05f7cf7ebdf8b7c75b101e18c0b7e3dff4940d480efed8aad3a36a4005140b660fa1d804cb8bce911cac290441dc728084a30504d3516ac2ff7ad607b02
languageName: node
linkType: hard
"sharp@npm:^0.30.6":
version: 0.30.6
resolution: "sharp@npm:0.30.6"
"sharp@npm:^0.30.7":
version: 0.30.7
resolution: "sharp@npm:0.30.7"
dependencies:
color: ^4.2.3
detect-libc: ^2.0.1
node-addon-api: ^5.0.0
node-gyp: latest
prebuild-install: ^7.1.0
prebuild-install: ^7.1.1
semver: ^7.3.7
simple-get: ^4.0.1
tar-fs: ^2.1.1
tunnel-agent: ^0.6.0
checksum: 2560b5769d78ee660d767e59f6fa56531c448d16383f9700e4ecb8016382104c1bb42991bdd4ea741c0f4d934ea5246c5d602fc5f39062bcc1c2c8786421fd5a
checksum: bbc63ca3c7ea8a5bff32cd77022cfea30e25a03f5bd031e935924bf6cf0e11e3388e8b0e22b3137bf8816aa73407f1e4fbeb190f3a35605c27ffca9f32b91601
languageName: node
linkType: hard
@@ -4871,7 +4823,7 @@ __metadata:
languageName: node
linkType: hard
"signal-exit@npm:^3.0.0, signal-exit@npm:^3.0.7":
"signal-exit@npm:^3.0.7":
version: 3.0.7
resolution: "signal-exit@npm:3.0.7"
checksum: a2f098f247adc367dffc27845853e9959b9e88b01cb301658cfe4194352d8d2bb32e18467c786a7fe15f1d44b233ea35633d076d5e737870b7139949d1ab6318
@@ -4963,17 +4915,6 @@ __metadata:
languageName: node
linkType: hard
"string-width@npm:^1.0.1":
version: 1.0.2
resolution: "string-width@npm:1.0.2"
dependencies:
code-point-at: ^1.0.0
is-fullwidth-code-point: ^1.0.0
strip-ansi: ^3.0.0
checksum: 5c79439e95bc3bd7233a332c5f5926ab2ee90b23816ed4faa380ce3b2576d7800b0a5bb15ae88ed28737acc7ea06a518c2eef39142dd727adad0e45c776cd37e
languageName: node
linkType: hard
"string-width@npm:^1.0.2 || 2 || 3 || 4, string-width@npm:^4.2.3":
version: 4.2.3
resolution: "string-width@npm:4.2.3"
@@ -5052,24 +4993,6 @@ __metadata:
languageName: node
linkType: hard
"string_decoder@npm:~1.1.1":
version: 1.1.1
resolution: "string_decoder@npm:1.1.1"
dependencies:
safe-buffer: ~5.1.0
checksum: 9ab7e56f9d60a28f2be697419917c50cac19f3e8e6c28ef26ed5f4852289fe0de5d6997d29becf59028556f2c62983790c1d9ba1e2a3cc401768ca12d5183a5b
languageName: node
linkType: hard
"strip-ansi@npm:^3.0.0, strip-ansi@npm:^3.0.1":
version: 3.0.1
resolution: "strip-ansi@npm:3.0.1"
dependencies:
ansi-regex: ^2.0.0
checksum: 9b974de611ce5075c70629c00fa98c46144043db92ae17748fb780f706f7a789e9989fd10597b7c2053ae8d1513fd707816a91f1879b2f71e6ac0b6a863db465
languageName: node
linkType: hard
"strip-ansi@npm:^6.0.1":
version: 6.0.1
resolution: "strip-ansi@npm:6.0.1"
@@ -5412,7 +5335,7 @@ __metadata:
languageName: node
linkType: hard
"util-deprecate@npm:^1.0.1, util-deprecate@npm:~1.0.1":
"util-deprecate@npm:^1.0.1":
version: 1.0.2
resolution: "util-deprecate@npm:1.0.2"
checksum: 474acf1146cb2701fe3b074892217553dfcf9a031280919ba1b8d651a068c9b15d863b7303cb15bd00a862b498e6cf4ad7b4a08fb134edd5a6f7641681cb54a2
@@ -5450,7 +5373,7 @@ __metadata:
languageName: node
linkType: hard
"wide-align@npm:^1.1.0, wide-align@npm:^1.1.5":
"wide-align@npm:^1.1.5":
version: 1.1.5
resolution: "wide-align@npm:1.1.5"
dependencies: