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

Added files and folders into /src directory.

Browse Source
This commit is contained in:
Lucid Kobold
2022-04-22 20:58:15 -05:00
parent 17d90ce958
commit 436f79b933
24 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/calender/CalenderNav.tsx Normal file
View File

@@ -0,0 +1,55 @@
import React, { useContext } from "react";
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 { CalenderContext } from "../../../contexts/CalenderContext";
const CalenderNav = (): JSX.Element => {
const { selectedDate } = useContext(CalenderContext);
const validDateRange = findValidDateRange();
const { start: validStart, end: validEnd } = validDateRange;
const router = useRouter();
const handleNavButtons = (direction: "next" | "prev") => {
if (direction === "next") {
const newMonth = addMonths(selectedDate, 1);
const year = format(newMonth, "y");
const month = format(newMonth, "L");
router.push(`/calendar/${year}/${month}`);
} else if (direction === "prev") {
const newMonth = subMonths(selectedDate, 1);
const year = format(newMonth, "y");
const month = format(newMonth, "L");
router.push(`/calendar/${year}/${month}`);
}
};
return (
<HStack spacing={10} as="nav" w="auto" h="10vh" textAlign="center">
<IconButton
isDisabled={isSameMonth(selectedDate, validStart)}
aria-label="Previous Month"
icon={<Icon icon="akar-icons:chevron-left" />}
onClick={() => handleNavButtons("prev")}
/>
<DatePicker />
<IconButton
isDisabled={isSameMonth(selectedDate, validEnd)}
aria-label="Next Month"
icon={<Icon icon="akar-icons:chevron-right" />}
onClick={() => handleNavButtons("next")}
/>
</HStack>
);
};
export default CalenderNav;

267
src/components/calender/DatePicker.tsx Normal file
View File

@@ -0,0 +1,267 @@
import React, { useContext, useRef, useState } from "react";
import { useRouter } from "next/router";
import {
Button,
FormControl,
FormErrorMessage,
FormLabel,
Heading,
HStack,
Input,
Popover,
PopoverBody,
PopoverCloseButton,
PopoverContent,
PopoverHeader,
PopoverTrigger,
VStack
} from "@chakra-ui/react";
import {
Formik,
// FormikHelpers,
FormikProps,
Form,
Field,
FieldProps
} from "formik";
import { format } from "date-fns";
import findValidDateRange from "../../../lib/findValidDateRange";
import FormValidateEmoji from "./FormValidateEmoji";
import { CalenderContext } from "../../../contexts/CalenderContext";
const DatePicker = (): JSX.Element => {
const { title } = useContext(CalenderContext);
const router = useRouter();
const [valid, setValid] = useState<boolean>(false);
const validDateRange = findValidDateRange();
const validateDate = (
dateString?: string | undefined
): string | undefined => {
let dateError;
if (dateString) {
const dateArr = dateString.split("-");
if (dateArr.length !== 3) {
dateError = "Please select a date.";
setValid(false);
} else if (dateArr.length === 3) {
const date: UpdateCalendarProps = {
year: parseInt(dateArr[0]),
month: parseInt(dateArr[1]),
day: parseInt(dateArr[2])
};
if (!/^(19|20)\d{2}$/.test(`${date.year}`)) {
dateError = "Please use a year between 1900 and 2099";
setValid(false);
}
if (date.month < 1 || date.month > 12) {
dateError = "Please use a month between 1 and 12";
setValid(false);
}
if (date.day < 1 || date.day > 31) {
dateError = "Please use a day between 1 and 31";
setValid(false);
}
setValid(true);
} else {
setValid(true);
}
} else if (dateString.length === 0) {
dateError = "Please select a date.";
setValid(false);
} else {
setValid(true);
}
return dateError;
};
const handleSubmit = (formInput?: { date?: string }): Promise<unknown> => {
return new Promise((resolve, reject) => {
if (formInput.date) {
if (!validateDate(formInput.date)) {
const dateArr = formInput.date.split("-");
const date: UpdateCalendarProps = {
year: parseInt(dateArr[0]),
month: parseInt(dateArr[1]),
day: parseInt(dateArr[2])
};
return resolve(router.push(`/calendar/${date.year}/${date.month}`));
} else {
return reject("Error validating date.");
}
} else {
return reject("Date not provided.");
}
});
};
// Field theme
const fieldTheme = {
width: "auto",
bg: "gray.900",
borderColor: "white",
_placeholder: {
color: "white"
},
_focus: {
bg: "#000",
color: "#FFF",
borderColor: "#63b3ed",
boxShadow: "0 0 0 1px #63b3ed",
zIndex: "1"
}
};
const initRef = useRef();
return (
<Popover placement="bottom" initialFocusRef={initRef}>
<PopoverTrigger>
<Button border="none" variant="outline">
<Heading w="100%" h="auto">
{title}
</Heading>
</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverHeader py={2} fontWeight="semibold">
<Heading size="md" as="h3">
{"Choose a Date"}
</Heading>
</PopoverHeader>
<PopoverCloseButton />
<PopoverBody textAlign="center">
<Formik
initialValues={{
date: ""
}}
onSubmit={(data, actions) => {
handleSubmit(data)
.then(() => {
actions.setSubmitting(false);
actions.resetForm({
values: {
date: ""
}
});
})
.catch(() => {
actions.setSubmitting(false);
});
}}
>
{(
formProps: FormikProps<{
date: string;
}>
) => (
<Form
style={{
width: "100%",
height: "auto"
}}
>
<VStack
alignItems="center"
alignContent="flex=start"
w="100%"
h="auto"
spacing={6}
py={4}
>
<Heading as="h4" size="sm" fontWeight="semibold">
{"Required fields indicated with"}
<FormValidateEmoji type="Required" />
</Heading>
<Field name="date" validate={validateDate}>
{({ field, form }: FieldProps) => (
<FormControl
isInvalid={
form.errors.date && form.touched.date ? true : false
}
>
<VStack
alignContent="center"
alignItems="center"
spacing={2}
w="100%"
h="auto"
>
<HStack
alignContent="center"
alignItems="center"
pl={4}
w="100%"
h="auto"
spacing={2}
>
<FormLabel fontWeight="semibold" htmlFor="date">
{"Date:"}
</FormLabel>
<Input
required
{...fieldTheme}
type="date"
isDisabled={formProps.isSubmitting}
{...field}
id="date"
textAlign="center"
min={format(validDateRange.start, "yyyy-MM-dd")}
max={format(validDateRange.end, "yyyy-MM-dd")}
{...(!form.errors.date && form.touched.date
? {
borderColor: "brand.valid",
boxShadow: "0 0 0 1px #00c17c",
_hover: {
borderColor: "brand.valid",
boxShadow: "0 0 0 1px #00c17c"
}
}
: "")}
/>
{!form.touched.date && (
<FormValidateEmoji type="Required" />
)}
{form.errors.name && form.touched.date && (
<FormValidateEmoji type="Error" />
)}
{!form.errors.name && form.touched.date && (
<FormValidateEmoji type="Valid" />
)}
</HStack>
<FormErrorMessage>
{form.errors.date}
</FormErrorMessage>
</VStack>
</FormControl>
)}
</Field>
<Button
isDisabled={!valid}
background={valid ? "brand.valid" : "brand.danger"}
isLoading={formProps.isSubmitting}
type="submit"
>
{"Select this date"}
</Button>
</VStack>
</Form>
)}
</Formik>
</PopoverBody>
</PopoverContent>
</Popover>
);
};
export default DatePicker;

185
src/components/calender/Day.tsx Normal file
View File

@@ -0,0 +1,185 @@
import { Box, Text, VStack } from "@chakra-ui/react";
import {
add,
getYear,
getMonth,
sub,
getDate,
isSameDay,
isBefore,
endOfDay
} from "date-fns";
import router from "next/router";
import React, { Fragment, useState } from "react";
import { StickersContextProvider } from "../../../contexts/StickerContext";
import AddUpdateSticker from "./modals/AddUpdateSticker";
import DemoStickers from "./stickers/DemoStickers";
interface DayProps {
isOverflow?: boolean;
overflowDirection?: "next" | "prev" | null;
sticker: StickerVal;
date: Date;
selectedDate: Date;
}
/**
* The individual days in the calender component.
* @param props the props for this component.
* @param {boolean} props.isOverflow is the current date being given before or after the current month.
* @param {"next" | "prev" | null} props.overflowDirection the direction the overflow is. This will navigate the calender forward or backwards 1 month.
* @param {StickerVal} props.sticker the sticker for this date.
* @param {date} props.date the date for this day.
* @param {date} props.selectedDate the date for the selected month.
*/
const Day = ({
isOverflow,
overflowDirection,
sticker,
date,
selectedDate
}: DayProps): JSX.Element => {
const handleNav = (direction: "next" | "prev") => {
if (direction === "next") {
console.log(overflowDirection);
const newMonth = add(selectedDate, { months: 1 });
const year = getYear(newMonth);
const month = getMonth(newMonth) + 1;
router.push(`/calendar/${year}/${month}`);
} else if (direction === "prev") {
const newMonth = sub(selectedDate, { months: 1 });
const year = getYear(newMonth);
const month = getMonth(newMonth) + 1;
router.push(`/calendar/${year}/${month}`);
}
};
// This handles the modal for the day.
const [isOpen, setIsOpen] = useState<boolean>(false);
// The current sticker to be displayed on the current date.
// * This is temporary. There should be no need for this once persistent storage is used. This is being used as a workaround to a bug.
const [stickerState, setStickerState] = useState<StickerVal>(sticker);
// The step the modal is at.
const [step, setStep] = useState<number>(0);
// The current selected sticker. (To be added or updated)
const [selectedSticker, setSelectedSticker] = useState<StickerVal>(null);
/**
* TODO: Add logic to remove the onClick within overflow dates.
* Do not give dates for the next month an onClick.
* Do not give dates in the past an onClick there is nothing before that month.
* (Creation date of a chart)
*/
// 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(date, endOfDay(new Date()))
? "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(date)}`}
</Text>
<Box
key={stickerState === null ? Math.random() : stickerState}
fontSize="1.5rem"
>
<DemoStickers
stickerVal={stickerState === null ? null : stickerState}
/>
</Box>
</VStack>
)}
{!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(date, endOfDay(new Date()))
? "pointer"
: "default",
background: "gray.700",
border: "1px solid #FFF"
}}
>
<Text
p={
isSameDay(new Date(), date)
? getDate(date) > 10
? "0px 6px 3px 6px"
: "0px 9px 3px 9px"
: "auto"
}
h="auto"
w="auto"
border={isSameDay(new Date(), date) ? "1px solid #0068ff" : "0px"}
borderRadius={isSameDay(new Date(), date) ? "100px" : "0px"}
>
{`${getDate(date)}`}
</Text>
<Box
key={stickerState === null ? Math.random() : stickerState}
fontSize="1.5rem"
>
<DemoStickers
stickerVal={stickerState === null ? null : stickerState}
/>
</Box>
<StickersContextProvider>
{isBefore(date, endOfDay(new Date())) && (
<AddUpdateSticker
date={date}
isOpen={isOpen}
updateIsOpen={setIsOpen}
updateSticker={setStickerState}
currSticker={stickerState}
step={step}
updateStep={setStep}
selectedSticker={selectedSticker}
updateSelectedSticker={setSelectedSticker}
/>
)}
</StickersContextProvider>
</VStack>
)}
</Fragment>
);
};
export default Day;

35
src/components/calender/FormValidateEmoji.tsx Normal file
View File

@@ -0,0 +1,35 @@
import React, { FC } from "react";
interface FormValidateEmojiProps {
type: string;
}
const FormValidateEmoji: FC<FormValidateEmojiProps> = ({
type
}: FormValidateEmojiProps) => {
interface Validations {
[key: string]: JSX.Element;
}
const validations: Validations = {
Required: (
<span role="img" aria-label="Explication Mark">
❗
</span>
),
Error: (
<span role="img" aria-label="X">
❌
</span>
),
Valid: (
<span role="img" aria-label="Check">
✔
</span>
)
};
return validations[`${type}`];
};
export default FormValidateEmoji;

110
src/components/calender/index.tsx Normal file
View File

@@ -0,0 +1,110 @@
import React, { useContext, useEffect } from "react";
import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
import { isSameDay, format } from "date-fns";
import { CalenderContext } from "../../../contexts/CalenderContext";
import { StickersContext } from "../../../contexts/StickerContext";
import CalenderNav from "./CalenderNav";
import Day from "./Day";
const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
const { selectedDate, layout, updateDate } = useContext(CalenderContext);
const { stickersMonth } = useContext(StickersContext);
useEffect(() => {
if (newDate && newDate.year && newDate.month && newDate.day) {
const { year, month, day } = newDate;
if (year > 0 && month > 0 && day > 0) {
updateDate(newDate);
} else {
console.warn("Invalid date format: ", newDate);
}
}
}, [newDate, updateDate]);
// Simulated user settings context
const userSettings = {
theme: "default",
startOfWeek: "Sunday"
};
const currMonth: WeekLayout =
layout[`${userSettings.startOfWeek.toLowerCase()}`];
const { month, weekdays } = currMonth;
// TODO: Move the weekdays into it's own component for responsiveness.
return (
<VStack h="91vh" w="100%">
<CalenderNav />
<VStack h="100%" w="100%" spacing={0}>
<HStack
px={6}
spacing={0}
w="100%"
h="auto"
alignContent="center"
alignItems="center"
>
{weekdays.map((weekDay) => {
return (
<Box
d="flex"
alignContent="center"
alignItems="center"
bg="transparent"
border="1px solid #0068ff"
w="100%"
h={10}
key={weekDay}
>
<Text w="100%" h="auto">
{weekDay}
</Text>
</Box>
);
})}
</HStack>
<SimpleGrid px={6} w="100%" h="100%" columns={7} alignItems="center">
{Object.keys(month).map((week) => {
const thisWeek = month[week];
return thisWeek.map((day: MonthDay) => {
const { date, isOverflow, overflowDirection } = day;
let sticker = null;
let id = "";
stickersMonth.map((stickerDay) => {
if (isSameDay(stickerDay.date, date)) {
sticker = stickerDay.sticker;
id = stickerDay.id;
}
});
return (
<Day
isOverflow={isOverflow}
overflowDirection={overflowDirection}
sticker={sticker}
date={date}
selectedDate={selectedDate}
key={
id.length
? id
: format(date, "yyyyddLL") +
`/${sticker === null ? 0 : sticker}`
}
/>
);
});
})}
</SimpleGrid>
</VStack>
</VStack>
);
};
export default Calender;

270
src/components/calender/modals/AddUpdateSticker.tsx Normal file
View File

@@ -0,0 +1,270 @@
import {
Button,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalBody,
ModalFooter,
Heading,
HStack,
Text,
VStack,
SimpleGrid,
Box
} from "@chakra-ui/react";
import React, { useState, useContext, useRef } from "react";
import { format, isSameDay } from "date-fns";
import { Icon } from "@iconify/react";
import { StickersContext } from "../../../../contexts/StickerContext";
import StickerSelector from "./StickerSelector";
import DemoStickers from "../stickers/DemoStickers";
interface AddStickerProps {
isOpen: boolean;
updateIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
date: Date;
updateSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
currSticker: StickerVal;
step: number;
updateStep: React.Dispatch<React.SetStateAction<number>>;
selectedSticker: StickerVal;
updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
}
/**
* Handles adding and modifying the stickers for the given month.
* @param {boolean} isOpen Tells the component when the modal should be open.
* @param {React.Dispatch<React.SetStateAction<boolean>>} updateIsOpen Used to close the modal.
* @param {date} date The date for which the sticker will be added or modified.
* @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSticker The react state function to update the sticker.
* @param {StickerVal} currSticker The current sticker for the date.
* @param {number} step A numerical variable that represents the page the modal should be at.
* @param {React.Dispatch<React.SetStateAction<number>>} updateStep Used to navigate the pages of the modal by updating the step the modal is on.
* @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSticker The react state function to update the selected sticker that will be added or updated.
*/
const AddUpdateSticker = ({
isOpen,
updateIsOpen,
date,
updateSticker,
currSticker,
step,
updateStep,
selectedSticker,
updateSelectedSticker
}: AddStickerProps): JSX.Element => {
// TODO: Import the stickers array from the calender context.
const { addEditSticker } = useContext(StickersContext);
// ! Update these states to say "add" and "edit" for easier reading.
const [modalVariant] = useState<"currDate" | "notCurrDate">(
isSameDay(date, new Date()) ? "currDate" : "notCurrDate"
);
const handleClose = () => {
updateIsOpen(false);
};
// TODO: Validate that the provided sticker is not the current sticker. Throw an error if the same sticker is attempted.
const handleSubmit = (sticker) => {
const newSticker: Sticker = addEditSticker(date, sticker);
updateSticker(newSticker.sticker);
handleClose();
};
// The first sticker to have focus when the modal opens.
const initialRef = useRef();
// * Double check that the submit button is disabled if the selected sticker is the same as the current sticker.
const variants = {
currDate: [
{
header: `Which sticker did you earn for ${format(date, "LLL d, y")}?`,
body: (
<VStack
w="100%"
h="auto"
justifyContent="space-between"
alignContent="center"
spacing="4"
>
<Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
{"Select a sticker"}
</Heading>
<StickerSelector
stickerSet="Demo"
currSticker={currSticker}
selectedSticker={selectedSticker}
updateSelectedSticker={updateSelectedSticker}
initialSticker={initialRef}
/>
</VStack>
),
footer: (
<Button
variant="submit"
isDisabled={
selectedSticker === null || selectedSticker === currSticker
}
onClick={() => handleSubmit(selectedSticker)}
>
{"Submit"}
</Button>
)
}
],
notCurrDate: [
{
header: `Which sticker did you want to update for ${format(
date,
"LLL d, y"
)}?`,
body: (
<VStack
w="100%"
h="auto"
justifyContent="space-between"
alignContent="center"
>
<Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
{"Current Sticker"}
</Heading>
<Text fontSize="4rem">
<DemoStickers stickerVal={currSticker} />
</Text>
<Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
{"Select your new sticker"}
</Heading>
<StickerSelector
stickerSet="Demo"
currSticker={currSticker}
selectedSticker={selectedSticker}
updateSelectedSticker={updateSelectedSticker}
initialSticker={initialRef}
/>
</VStack>
),
footer: (
<Button
variant="primary"
isDisabled={
selectedSticker === null || selectedSticker === currSticker
}
onClick={() => updateStep(step + 1)}
>
{"Next"}
</Button>
)
},
{
header: `Are you sure you want to change the sticker for ${format(
date,
"M/d/y"
)}?`,
body: (
<SimpleGrid
my={{ base: "0px", sm: "6" }}
mx={{ base: "0px", sm: "10", md: "16" }}
w="auto"
h="100%"
columns={3}
>
<Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
{"Previous Sticker"}
</Heading>
<Box></Box>
<Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
{"New Sticker"}
</Heading>
<Text textAlign="center" w="100%" fontSize="4rem">
<DemoStickers stickerVal={currSticker} />
</Text>
<Box fontSize="4rem" m="auto">
<Icon fontSize="4rem" icon="bi:arrow-right" />
</Box>
<Text textAlign="center" w="100%" fontSize="4rem">
<DemoStickers stickerVal={selectedSticker} />
</Text>
</SimpleGrid>
),
footer: (
<HStack
w="100%"
h="auto"
justifyContent="space-between"
alignContent="center"
>
<Button variant="primary" onClick={() => updateStep(step - 1)}>
{"Previous"}
</Button>
<HStack w="auto" h="auto" alignContent="center" spacing={6}>
<Button
backgroundColor="transparent"
_hover={{ backgroundColor: "brand.danger" }}
onClick={() => updateIsOpen(!isOpen)}
>
{"Cancel"}
</Button>
<Button
variant="submit"
isDisabled={
selectedSticker === null || selectedSticker === currSticker
}
onClick={() => handleSubmit(selectedSticker)}
>
{"Confirm"}
</Button>
</HStack>
</HStack>
)
}
]
};
return (
<Modal
isCentered
initialFocusRef={initialRef}
isOpen={isOpen}
onClose={() => handleClose()}
motionPreset="slideInBottom"
scrollBehavior="inside"
size={modalVariant === "currDate" ? "xl" : "2xl"}
>
<ModalOverlay />
<ModalContent>
<ModalHeader>
<HStack
w="100%"
h="auto"
justifyContent="space-between"
alignContent="center"
>
<Heading textAlign="center" as="h2" size="md" w="100%" h="auto">
{modalVariant && variants[modalVariant][step].header}
</Heading>
<Button
fontSize="2rem"
px="1"
onClick={() => updateIsOpen(!isOpen)}
>
<Icon icon="bi:x" />
</Button>
</HStack>
</ModalHeader>
<ModalBody>
{modalVariant && variants[modalVariant][step].body}
</ModalBody>
<ModalFooter>
{modalVariant && variants[modalVariant][step].footer}
</ModalFooter>
</ModalContent>
</Modal>
);
};
export default AddUpdateSticker;

73
src/components/calender/modals/StickerSelector.tsx Normal file
View File

@@ -0,0 +1,73 @@
import { HStack, Button } from "@chakra-ui/react";
import React from "react";
import DemoStickers from "../stickers/DemoStickers";
interface StickerSelectorProps {
stickerSet: "Demo";
currSticker: StickerVal;
selectedSticker: StickerVal;
updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
initialSticker: React.MutableRefObject<undefined>;
}
/**
* Handles displaying a list of dynamic stickers to be selected.
* @param {string} stickerSet The name of the stickers that should be displayed.
* @param {StickerVal} currSticker The current sticker for the date.
* @param {StickerVal} selectedSticker The selected sticker for the current. date
* @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSelectedSticker TThe react state function to update the selected sticker that will be added or updated.
*/
const StickerSelector = ({
stickerSet,
currSticker,
selectedSticker,
updateSelectedSticker,
initialSticker
}: StickerSelectorProps): JSX.Element => {
const stickers = {
Demo: (
<HStack
w="100%"
h="auto"
justifyContent="center"
alignContent="center"
spacing={14}
>
<Button
isDisabled={currSticker >= 1}
ref={currSticker <= 1 ? initialSticker : null}
border={selectedSticker === 1 ? "1px solid #FFF" : "opx"}
bg={selectedSticker === 1 && "gray.800"}
onClick={() => updateSelectedSticker(1)}
variant="stickerButton"
>
<DemoStickers stickerVal={1} />
</Button>
<Button
isDisabled={currSticker === 0}
ref={currSticker >= 1 ? initialSticker : null}
border={selectedSticker === 0 ? "1px solid #FFF" : "opx"}
bg={selectedSticker === 0 && "gray.800"}
onClick={() => updateSelectedSticker(0)}
variant="stickerButton"
>
<DemoStickers stickerVal={0} />
</Button>
<Button
isDisabled={currSticker <= -1}
border={selectedSticker === -1 ? "1px solid #FFF" : "opx"}
bg={selectedSticker === -1 && "gray.800"}
onClick={() => updateSelectedSticker(-1)}
variant="stickerButton"
>
<DemoStickers stickerVal={-1} />
</Button>
</HStack>
)
};
return stickers[stickerSet];
};
export default StickerSelector;

48
src/components/calender/stickers/DemoStickers.tsx Normal file
View File

@@ -0,0 +1,48 @@
import React, { FC } from "react";
// TODO: When themes are made import the theme from user settings context. Refactor to use whatever those SVGs are.
interface DemoStickersProps {
stickerVal: StickerVal;
}
const DemoStickers: FC<DemoStickersProps> = ({
stickerVal
}: DemoStickersProps) => {
if (stickerVal === null) {
return <span aria-label="spacer">&nbsp;</span>;
}
interface StickerToEmoji {
[key: string]: JSX.Element;
}
let key = "0";
if (stickerVal > 0) {
key = "1";
} else if (stickerVal < 0) {
key = "-1";
}
const stickerToEmoji: StickerToEmoji = {
"1": (
<span role="img" aria-label="Sun">
☀️
</span>
),
"0": (
<span role="img" aria-label="Cloud">
☁️
</span>
),
"-1": (
<span role="img" aria-label="Raining Cloud">
🌧️
</span>
)
};
return stickerToEmoji[`${key}`];
};
export default DemoStickers;

37
src/components/loading/LoadingOverlay.tsx Normal file
View File

@@ -0,0 +1,37 @@
import {
Box,
Modal,
ModalBody,
ModalContent,
ModalOverlay
} from "@chakra-ui/react";
import React from "react";
import LoadingSpinner from "./LoadingSpinner";
const LoadingOverlay = (): JSX.Element => {
return (
<Modal
isCentered
isOpen
onClose={() => null}
motionPreset="slideInBottom"
scrollBehavior="inside"
size="xs"
>
<ModalOverlay bg="loading.overlayBg" />
<ModalContent bg="transparent" boxShadow="none">
{/* <ModalHeader>
</ModalHeader> */}
<ModalBody border="0px">
<Box h="100%" w="100%" textAlign="center">
<LoadingSpinner />
</Box>
</ModalBody>
{/* <ModalFooter>
</ModalFooter> */}
</ModalContent>
</Modal>
);
};
export default LoadingOverlay;

16
src/components/loading/LoadingSpinner.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { Spinner } from "@chakra-ui/react";
import React from "react";
const LoadingSpinner = (): JSX.Element => {
return (
<Spinner
thickness="4px"
speed="0.50s"
emptyColor="loading.spinnerEmptySpace"
color="loading.spinnerColor"
size="xl"
/>
);
};
export default LoadingSpinner;

25
src/pages/_app.tsx Normal file
View File

@@ -0,0 +1,25 @@
import type { AppProps } from "next/app";
import React from "react";
import { ChakraProvider } from "@chakra-ui/react";
import AppTheme from "../theme/AppTheme";
import Layout from "../theme/layout/Layout";
import Head from "next/head";
function LCMPottyChart({ Component, pageProps }: AppProps): JSX.Element {
return (
<ChakraProvider theme={AppTheme}>
<Layout {...pageProps}>
<Head>
<title>{"LCM Potty Chart"}</title>
<meta
name="viewport"
content="width=device-width, user-scalable=yes, initial-scale=1.0"
/>
</Head>
<Component {...pageProps} />
</Layout>
</ChakraProvider>
);
}
export default LCMPottyChart;

61
src/pages/_document.tsx Normal file
View File

@@ -0,0 +1,61 @@
import React from "react";
import NextDocument, { Html, Head, Main, NextScript } from "next/document";
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.";
const logo = "images/logo.svg";
const logoOG = "/images/logo.png";
class Document extends NextDocument {
render(): JSX.Element {
return (
<Html>
<Head>
<meta name="theme-color" content="#3138dc" />
<link rel="icon" href={logo} sizes="32x32 192x192" />
<link rel="apple-touch-icon" href={logo} />
<meta property="og:title" content="LCM Potty Chart" />
<meta name="og:description" content={description} />
<meta property="og:type" content="Progress Tracking" />
<meta property="og:image" content={logoOG} />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="LCM Potty Chart Logo" />
<meta property="og:url" content="https://lucidcreations.media" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="title" content="LCM Potty Chart" />
<meta name="description" content={description} />
<meta property="type" content="Progress Tracking" />
<meta property="image" content={logoOG} />
<meta property="image:type" content="image/png" />
<meta property="image:alt" content="LCM Potty Chart Logo" />
<meta property="url" content="https://https://lucidcreations.media" />
<meta httpEquiv="content-language" content="en_US" />
<meta charSet="UTF-8" />
<meta
name="keywords"
content="ABDL Adult Baby Diaper Lover Furry Babyfur ab/dl AB/DL potty chart training progress behavior tracker habbit"
/>
<meta name="copyright" content="Lucid Creations Media" />
<meta name="page-topic" content="Progress Tracking" />
<meta name="page-type" content="Calender" />
<meta name="audience" content="18+" />
<meta name="robots" content="index, follow" />
</Head>
<html lang="en" />
<body>
<ColorModeScript
initialColorMode={AppTheme.config.initialColorMode}
/>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default Document;

211
src/pages/calendar/[...date].tsx Normal file
View File

@@ -0,0 +1,211 @@
import React, { useEffect, useState } from "react";
import { Box } from "@chakra-ui/react";
import { useRouter } from "next/router";
import {
endOfMonth,
getDate
// getMonth,
// getYear,
// isAfter,
// isBefore,
// isSameMonth
} from "date-fns";
// import findValidDateRange from "../../lib/findValidDateRange";
import ErrorPage from "next/error";
import Calender from "../../components/calender";
import { CalenderContextProvider } from "../../contexts/CalenderContext";
import { StickersContextProvider } from "../../contexts/StickerContext";
const DateRoute: React.FC<unknown> = () => {
const router = useRouter();
const { date: slug } = router.query;
const [date, setDate] = useState<UpdateCalendarProps | null>(null);
const [error, setError] = useState<boolean>(false);
// const dateRange = useRef(findValidDateRange());
// const validDateRange = Object.assign({}, dateRange.current);
const validateDateInput = (dateArr: number[]): UpdateCalendarProps => {
if (!(dateArr.length >= 2) && !(dateArr.length <= 3)) {
return {
year: 0,
month: 0,
day: 0
};
}
const date = {
year: 0,
month: 0,
day: 0
};
if (/^(19|20)\d{2}$/.test(`${dateArr[0]}`)) {
date.year = dateArr[0];
}
if (dateArr[1] > 0 && dateArr[1] <= 12) {
date.month = dateArr[1];
}
if (date.month && date.year) {
const lastDay = getDate(
endOfMonth(new Date(date.year, date.month - 1, 1))
);
if (dateArr[2] && dateArr[2] > 0 && dateArr[2] <= lastDay) {
date.day = dateArr[2];
} else if (!dateArr[2]) {
date.day = 1;
}
} else {
return date;
}
return date;
};
/**
* ! This function does not work as is. It is causing infinite loops whe used within the useEffect.
*/
// const validateDateRange = (
// slugDate: Date
// ): [Date, "after" | "before" | "valid"] => {
// const { start: validStart, end: validEnd } = validDateRange;
// // Check if the slug date is beyond the valid end date.
// if (isAfter(slugDate, validEnd)) {
// // router.push("/calender/now");
// console.warn(
// "Slug date is after the valid date range for this calendar!!!"
// );
// return [validEnd, "after"];
// // Check if the slug is before the valid start date.
// } else if (isBefore(slugDate, validStart)) {
// console.warn(
// "Slug date is before the valid date range for this calendar!!!"
// );
// return [validStart, "before"];
// // router.push(`/${getYear(validStart)}/${getMonth(validStart) + 1}`);
// } else {
// console.info(
// "Slug date is within the valid date range for this calendar."
// );
// return [slugDate, "valid"];
// }
// };
useEffect(() => {
// Checking if the slug exists and is an array.
if (slug && Array.isArray(slug)) {
console.log(slug);
// Grabbing the slug length
const length = slug.length;
// Parsing the slug to convert it from strings to numbers.
const parsedSlug = slug.map((e) => {
return parseInt(e);
});
// Checking if the slug has 2 to 3 numbers within the array. year/month/day.
if (length >= 2 && length <= 3) {
// Validate that the date is valid.
const newDate = validateDateInput(parsedSlug);
// If anything is invalid the year/day/month would be set to 0. This checks for the invalid condition.
if (newDate.year === 0 || newDate.month === 0 || newDate.day === 0) {
setError(true);
// Set the date to the valid date.
} else {
// TODO: Make sure the date is within the valid range using the validateDateRange function.
// const validDate = new Date(
// newDate.year,
// newDate.month - 1,
// newDate.day
// );
// const validDateWithinRange = validateDateRange(validDate)[0];
// setDate({
// ...{
// year: getYear(validDateWithinRange),
// month: getMonth(validDateWithinRange) + 1,
// day: getDate(validDateWithinRange)
// }
// });
setDate({
...newDate
});
}
} else if (length === 1) {
// Checking if the slug is not "now".
// ! Update this to include a check for "today".
if (slug[0] !== "now") {
setError(true);
return console.warn("improper date input:", slug);
}
}
}
}, [slug]);
/**
* ? Pushing into the router within the use effect does not create the infinite loop.
* ? The way the validate date range or the way it is being used within a useEffect is what is creating the infinite loop.
*/
// useEffect(() => {
// // Check is slug and date are valid.
// if (slug && date && date !== null) {
// // Check if the slug is an array and has a length of 2.
// if (Array.isArray(slug) && slug.length === 2) {
// const dateState = new Date(date.year, date.month - 1, date.day);
// const parsedSlug = slug.map((e) => {
// return parseInt(e);
// });
// const slugDate = new Date(parsedSlug[0], parsedSlug[1] - 1, 1);
// if (!isSameMonth(dateState, slugDate)) {
// const validDateWithinRange = validateDateRange(dateState);
// if (validDateRange[1] === "after") {
// router.push("/now");
// } else {
// router.push(
// `/${getYear(validDateWithinRange[0])}/${getMonth(
// validDateWithinRange[0]
// )}`
// );
// }
// }
// }
// }
// }, [date]);
if (router.isFallback) {
return <ErrorPage statusCode={404} />;
}
/**
* TODO: Update to disallow navigation in the future and too far in the past.
* Update so that a date given in the future take the user to /now to today's date.
* Update so that a date given beyond the last valid date will bring the user to the
* last month that has stickers within it (When filter is enabled) or to the creation date of the chart..
*/
return error ? (
<ErrorPage statusCode={404} />
) : (
<Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
<CalenderContextProvider>
<StickersContextProvider>
<Calender {...date} />
</StickersContextProvider>
</CalenderContextProvider>
</Box>
);
};
export default DateRoute;

23
src/pages/calendar/index.tsx Normal file
View File

@@ -0,0 +1,23 @@
import React, { useEffect } from "react";
import { useRouter } from "next/router";
import { Box, Heading } from "@chakra-ui/react";
const DateIndex = () => {
const router = useRouter();
useEffect(() => {
if (router) {
router.push("calendar/now");
}
}, [router]);
return (
<Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
<Heading as="h2" size="xl">
Loading
</Heading>
</Box>
);
};
export default DateIndex;

26
src/pages/index.tsx Normal file
View File

@@ -0,0 +1,26 @@
import React, { useRef } from "react";
import { Box } from "@chakra-ui/react";
import Calender from "../components/calender";
import { StickersContextProvider } from "../../contexts/StickerContext";
import { CalenderContextProvider } from "../../contexts/CalenderContext";
import { format } from "date-fns";
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"))
});
return (
<Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
<StickersContextProvider>
<CalenderContextProvider>
<Calender {...date.current} />
</CalenderContextProvider>
</StickersContextProvider>
</Box>
);
};
export default IndexPage;

53
src/theme/AppTheme.ts Normal file
View File

@@ -0,0 +1,53 @@
import { extendTheme, ThemeConfig } from "@chakra-ui/react";
// import { createBreakpoints } from "@chakra-ui/theme-tools";
import buttons from "./components/buttonStyles";
const config: ThemeConfig = {
initialColorMode: "dark",
useSystemColorMode: false
};
// const breakpoints = createBreakpoints({
// sm: "30em",
// md: "48em",
// lg: "75em",
// xl: "85em",
// "2xl": "100em",
// });
const AppTheme = extendTheme({
config,
colors: {
brand: {
main: "#3138dc",
primary: "#0068ff",
secondary: "#0086ff",
hover: "#00aec1",
warning: "#ffbd48",
danger: "#FC8181",
valid: "#00c17c",
footer: "#0097a7",
footerText: "black",
content: "#2d3748",
patreon: "#FF424D"
},
loading: {
overlayBg: "#171923cb",
spinnerColor: "#0088ff",
spinnerEmptySpace: "#2D374860"
}
},
styles: {
global: {
body: {
bg: "gray.900"
}
}
},
components: {
Button: buttons
}
// breakpoints,
});
export default AppTheme;

189
src/theme/components/buttonStyles.ts Normal file
View File

@@ -0,0 +1,189 @@
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import {
darken,
mode,
StyleFunctionProps,
whiten
} from "@chakra-ui/theme-tools";
import { Dict } from "@chakra-ui/utils";
const buttonStyles = {
// style object for base or default style
baseStyle: {},
// styles for different sizes ("sm", "md", "lg")
sizes: {},
// styles for different visual variants ("outline", "solid")
variants: {
primary: (props: Dict<never> | StyleFunctionProps) => ({
bg: "rgba(255, 255, 255, .15)",
fontSize: "xl",
p: "2",
_hover: {
bg: mode(
whiten("brand.primary", 20),
darken("brand.primary", 20)
)(props)
}
}),
secondary: (props: Dict<never> | StyleFunctionProps) => ({
bg: "brand.primary",
fontSize: "xl",
p: "2",
_hover: {
bg: mode(
whiten("brand.primary", 20),
darken("brand.primary", 20)
)(props)
}
}),
stickerButton: (props: Dict<never> | StyleFunctionProps) => ({
bg: "transparent",
fontSize: "4rem",
px: 2,
py: 14,
_hover: {
bg: mode(
whiten("brand.secondary", 20),
darken("brand.secondary", 20)
)(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",
_hover: {
bg: mode(
whiten("brand.secondary", 20),
darken("brand.secondary", 20)
)(props)
}
}),
stickyNav: (/* props: Dict<never> | StyleFunctionProps */) => ({
bg: "transparent",
fontSize: "md",
px: "2",
_hover: {
textDecoration: "underline"
}
}),
credits: (props: Dict<never> | StyleFunctionProps) => ({
bg: "brand.main",
fontSize: "lg",
p: 3,
color: "whiteAlpha",
_hover: {
bg: mode(whiten("brand.main", 20), darken("brand.main", 20))(props)
}
}),
backToTop: (props: Dict<never> | StyleFunctionProps) => ({
bg: "rgba(23, 25, 35, 0.5)",
fontSize: "lg",
py: 2,
px: 4,
color: "rgba(0, 134, 255, 0.6)",
boxShadow:
"rgba(0, 134, 255, 0.05) 0px 0px 15px, rgba(0, 134, 255, 0.1) 0px 0px 3px 1px",
border: "1px solid rgba(0, 134, 255, 0.15)",
_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",
color: "whiteAlpha.900",
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,
px: 4,
type: "submit",
_hover: {
color: "whiteAlpha.900",
bg: mode(whiten("brand.valid", 20), darken("brand.valid", 20))(props),
_disabled: {
color: mode(
whiten("brand.danger", 20),
darken("brand.danger", 20)
)(props),
boxShadow:
"rgba(252, 129, 129, .95) 0px 0px 15px, rgba(252, 129, 129, 0.75) 0px 0px 3px 1px",
border: "1px solid #FC8181"
}
}
}),
mobileNav: (props: Dict<never> | StyleFunctionProps) => ({
// bg: "transparent",
fontSize: "md",
px: "2",
boxShadow:
"rgba(0, 134, 255, 0.30) 0px 0px 15px, rgba(0, 134, 255, 0.15) 0px 0px 3px 1px",
_hover: {
bg: mode(
whiten("brand.secondary", 20),
darken("brand.secondary", 20)
)(props),
boxShadow:
"rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px"
},
_expanded: {
bg: "brand.primary",
boxShadow:
"rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px",
border: "1px solid #0068ff"
}
}),
patreon: (props: Dict<never> | StyleFunctionProps) => ({
bg: "brand.patreon",
fontSize: "lg",
p: 3,
color: "whiteAlpha",
_hover: {
bg: mode(
whiten("brand.patreon", 20),
darken("brand.patreon", 20)
)(props)
}
})
},
// default values for `size` and `variant`
defaultProps: {}
};
export default buttonStyles;

32
src/theme/layout/BackToTopButton.tsx Normal file
View File

@@ -0,0 +1,32 @@
import React, { FC } from "react";
import { Button, Flex, Link } from "@chakra-ui/react";
import { Icon } from "@iconify/react";
interface BackToTopButtonProps {
show: boolean;
}
const BackToTopButton: FC<BackToTopButtonProps> = ({
show
}: BackToTopButtonProps) => {
return (
<Flex
d={show ? "flex" : "none"}
pos="fixed"
top="85vh"
right={{
base: "1.25rem",
sm: "2rem",
md: "3rem"
}}
>
<Link href="/#top">
<Button variant="backToTop">
<Icon icon="akar-icons:chevron-up" />
</Button>
</Link>
</Flex>
);
};
export default BackToTopButton;

29
src/theme/layout/DesktopNav.tsx Normal file
View File

@@ -0,0 +1,29 @@
import React from "react";
import { Button, HStack, Link } from "@chakra-ui/react";
import navItems, { NavItem } from "./navItems";
const DesktopNav = (): JSX.Element => {
return (
<HStack
as="nav"
d={{ base: "none", lg: "flex" }}
h="auto"
w="auto"
spacing={4}
// m="auto"
justifyContent="center"
alignContent="center"
alignItems="center"
>
{navItems.map((navItem: NavItem) => {
return (
<Link id={"dekstop-" + navItem[0]} key={navItem[0]} href={navItem[1]}>
<Button variant="nav">{navItem[0]}</Button>
</Link>
);
})}
</HStack>
);
};
export default DesktopNav;

114
src/theme/layout/Footer.tsx Normal file
View File

@@ -0,0 +1,114 @@
import React /*, { useEffect, useRef, useState }*/ from "react";
import {
Box,
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";
export const MotionBox = motion<BoxProps>(Box);
const Footer = (): JSX.Element => {
// const [showBackToTop, setShowBackToTop] = useState<boolean>(false);
// const lastScroll = useRef<number>(0);
// const handleScroll = (): void => {
// if (window.scrollY >= 500) {
// setShowBackToTop(true);
// } else {
// setShowBackToTop(false);
// }
// const currentScroll =
// window.pageYOffset || document.documentElement.scrollTop;
// lastScroll.current = currentScroll <= 0 ? 0 : currentScroll;
// };
// useEffect(() => {
// if (!window) {
// console.log("waiting for mount");
// } else if (window) {
// window.addEventListener("scroll", handleScroll);
// }
// return () => window.removeEventListener("scroll", handleScroll);
// }, []);
return (
<Box bg="brand.footer" as="footer" w="100%" h="auto">
{/* <BackToTopButton show={showBackToTop} /> */}
<VStack
h="auto"
w="auto"
py={12}
spacing={5}
justifyItems="center"
justifyContent="center"
>
<VStack spacing={4}>
{/* <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
<Link
href="https://github.com/LucidCreationsMedia"
target="_blank"
rel="noopener"
>
<Button
color="whiteAlpha"
variant="credits"
leftIcon={<Icon icon="akar-icons:github-fill" />}
>
View Codebase
</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>
<Text color="brand.footerText" fontSize="xs">
&copy;
{` 2021 - ${new Date().getFullYear()} `}
<Link
href="https://lucidcreations.media"
rel="noopener"
target="_blank"
>
{"Lucid Creations Media"}
</Link>
</Text>
</VStack>
</VStack>
</Box>
);
};
export default Footer;

189
src/theme/layout/Header.tsx Normal file
View File

@@ -0,0 +1,189 @@
import React, { useEffect, useRef, useState } from "react";
import Image from "next/image";
import {
Heading,
HStack,
Box,
IconButton,
Menu,
MenuButton
} from "@chakra-ui/react";
import { Icon } from "@iconify/react";
import DesktopNav from "./DesktopNav";
import MobileNav from "./MobileNav";
import appLogo from "../../../public/images/logo.svg";
const Header = (): JSX.Element => {
const appName = "LCM Potty Chart";
const appVersion = "v0.0.9.6-alpha";
// Add transparency while not at the top of the page.
const [transparentNavbar, setTransparentNavbar] = useState<boolean>(false);
const lastScroll = useRef<number>(0);
const handleScroll = (): void => {
// Sticky Nav
if (window.scrollY >= 20) {
setTransparentNavbar(true);
} else {
setTransparentNavbar(false);
}
// Scroll Position.
const currentScroll =
window.scrollY || window.pageYOffset || document.body.scrollTop;
// Update Scroll Position Reference
lastScroll.current = currentScroll <= 0 ? 0 : currentScroll;
// setScroll(lastScroll.current = currentScroll <= 0 ? 0 : currentScroll)
};
useEffect(() => {
if (!window) {
console.log("waiting for mount");
} else if (window) {
window.addEventListener("scroll", handleScroll);
}
return () => window.removeEventListener("scroll", handleScroll);
}, []);
// Mobile Menu Icon && Open/Close
const [open, setOpen] = useState<boolean>(false);
const [hover, setHover] = useState<boolean>(false);
const menuIcon = (): JSX.Element => {
const iconType = {
default: <Icon icon="bx:bx-menu-alt-right" />,
hover: <Icon icon="bx:bx-menu" />,
open: <Icon icon="bx:bx-x" />
};
if (open) {
return iconType.open;
} else if (hover) {
return iconType.hover;
} else {
return iconType.default;
}
};
return (
<Box
zIndex={1}
w="100%"
pos="fixed"
top={0}
alignItems="center"
boxShadow={
open
? "none"
: "rgba(0, 134, 255, 0.75) 0px 0px 15px, rgba(0, 134, 255, 0.5) 0px 0px 3px 1px"
}
bg={
open
? "brand.main"
: transparentNavbar
? "rgba(49, 56, 220, 0.9)"
: "brand.main"
}
transition=".5s ease"
borderRadius="0px 0px 10px 10px"
_hover={{
bg: "brand.main",
boxShadow: open
? "none"
: "rgba(0, 134, 255, 0.9) 0px 0px 15px, rgba(0, 134, 255, 0.7) 0px 0px 3px 1px"
}}
h={open ? "125px" : "auto"}
>
{/* Logo | Site Name */}
<HStack
width="100%"
justifyContent={{
base: "flex-start",
sm: "center"
}}
alignItems="center"
height={12}
top={0}
position="absolute"
ml={4}
d={{ base: "flex", lg: "none" }}
spacing="5px"
_hover={{
cursor: "default"
}}
>
<Image height="30px" width="30px" src={appLogo} alt="App Logo" />
<Heading as="h1" size="md">
{appName}
</Heading>
<Heading color="whiteAlpha.500" as="h2" size="sm">
{appVersion}
</Heading>
</HStack>
{/* Desktop Nav Items and Mobile Menu Button */}
<HStack
w="100%"
px={4}
h={12}
alignItems="center"
justifyContent="space-between"
>
<HStack
w="100%"
h="auto"
alignItems="center"
justifyContent="space-between"
>
<Box w="auto" d={{ base: "flex", lg: "none " }}></Box>
<Box w="100%" d={{ base: "none", lg: "flex" }} m="auto">
<HStack
width="100%"
alignItems="center"
height="auto"
spacing="5px"
_hover={{
cursor: "default"
}}
>
<Image height="30px" width="30px" src={appLogo} alt="App Logo" />
<Heading as="h1" size="md">
{appName}
</Heading>
<Heading color="whiteAlpha.500" as="h2" size="sm">
{appVersion}
</Heading>
</HStack>
</Box>
<DesktopNav />
</HStack>
<Menu isLazy lazyBehavior="unmount" isOpen={open}>
<MenuButton
as={IconButton}
aria-label="Mobile Menu"
icon={menuIcon()}
onClick={() => setOpen(!open)}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
d={{
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"
/>
<MobileNav updateOpen={setOpen} />
</Menu>
</HStack>
</Box>
);
};
export default Header;

25
src/theme/layout/Layout.tsx Normal file
View File

@@ -0,0 +1,25 @@
import React, { FC, ReactNode } from "react";
import type { AppProps } from "next/app";
import Header from "../layout/Header";
import { Box } from "@chakra-ui/layout";
import Footer from "./Footer";
interface LayoutProps {
children: ReactNode;
elementType?: string;
}
const Layout: FC<LayoutProps> = (
{ children }: LayoutProps,
{ pageProps }: AppProps
) => {
return (
<Box w="100%">
<Header {...pageProps} />
<main>{children}</main>
<Footer />
</Box>
);
};
export default Layout;

56
src/theme/layout/MobileNav.tsx Normal file
View File

@@ -0,0 +1,56 @@
import React, { FC, Fragment } from "react";
import {
Button,
Link,
MenuDivider,
MenuItem,
MenuList
} from "@chakra-ui/react";
import navItems, { NavItem } from "./navItems";
interface MobileNavProps {
updateOpen: React.Dispatch<React.SetStateAction<boolean>>;
}
const MobileNav: FC<MobileNavProps> = ({ updateOpen }: MobileNavProps) => {
return (
<MenuList
as="nav"
d={{ base: "block", lg: "none" }}
bg="brand.main"
h="auto"
w="100%"
p={0}
border="none"
boxShadow="none"
>
{navItems.map((navItem: NavItem, index: number) => {
return (
<MenuItem
id={"mobile-" + navItem[0]}
key={navItem[0]}
w="auto"
h="auto"
p={0}
_hover={{
backgroundColor: "none"
}}
_focus={{
backgroundColor: "none"
}}
>
<Link onClick={() => updateOpen(false)} href={navItem[1]}>
{index === 0 ? <MenuDivider /> : <Fragment></Fragment>}
<Button w="100vw" variant={"nav"} p={0} m="auto">
{navItem[0]}
</Button>
<MenuDivider />
</Link>
</MenuItem>
);
})}
</MenuList>
);
};
export default MobileNav;

6
src/theme/layout/navItems.ts Normal file
View File

@@ -0,0 +1,6 @@
export type NavItem = [string, string];
export type NavItems = NavItem[];
const navItems: NavItems = [["Home", "/"]];
export default navItems;