From be1a32181e3e0c85ad2c85b4b9b367bd11957aed Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 3 Jul 2022 14:34:00 +0200 Subject: [PATCH] Now using expression function style + some sections --- .eslintrc.js | 2 +- CONTRIBUTING.md | 80 +++++ src/components/AppLayout.tsx | 48 +-- src/components/Chip.tsx | 29 +- src/components/HorizontalLine.tsx | 26 +- src/components/Ico.tsx | 38 ++- src/components/Img.tsx | 24 +- src/components/Inputs/Button.tsx | 54 ++-- src/components/Inputs/ButtonGroup.tsx | 76 ++--- src/components/Inputs/LanguageSwitcher.tsx | 60 ++-- src/components/Inputs/OrderableList.tsx | 26 +- src/components/Inputs/PageSelector.tsx | 52 ++-- src/components/Inputs/Select.tsx | 19 +- src/components/Inputs/Switch.tsx | 18 +- src/components/Inputs/TextInput.tsx | 66 +++-- src/components/Inputs/WithLabel.tsx | 47 +-- src/components/InsetBox.tsx | 31 +- src/components/Library/PreviewCardCTAs.tsx | 122 ++++---- src/components/Library/ScanSet.tsx | 21 +- src/components/Library/ScanSetCover.tsx | 17 +- src/components/LightBox.tsx | 26 +- src/components/Markdown/Markdawn.tsx | 279 +++++++++++++++--- src/components/Markdown/TOC.tsx | 168 ----------- .../PanelComponents/ContentPlaceholder.tsx | 37 +-- src/components/PanelComponents/NavOption.tsx | 29 +- .../PanelComponents/PanelHeader.tsx | 34 ++- .../PanelComponents/ReturnButton.tsx | 19 +- src/components/Panels/ContentPanel.tsx | 47 +-- src/components/Panels/MainPanel.tsx | 12 +- src/components/Panels/SubPanel.tsx | 19 +- src/components/Popup.tsx | 26 +- src/components/PostPage.tsx | 49 +-- src/components/PreviewCard.tsx | 173 ++++++----- src/components/PreviewLine.tsx | 123 ++++---- src/components/RecorderChip.tsx | 97 +++--- src/components/ThumbnailHeader.tsx | 32 +- src/components/ToolTip.tsx | 38 ++- .../Chronology/ChronologyItemComponent.tsx | 49 ++- .../Chronology/ChronologyYearComponent.tsx | 38 +-- src/components/Wiki/DefinitionCard.tsx | 16 +- src/contexts/AppLayoutContext.tsx | 44 ++- src/graphql/getAppStaticProps.ts | 6 +- src/graphql/getPostStaticProps.ts | 12 +- .../operations/getWebsiteInterface.graphql | 5 + src/graphql/sdk.ts | 4 +- src/helpers/className.ts | 10 +- src/helpers/component.tsx | 15 +- src/helpers/description.ts | 19 +- src/helpers/formatters.ts | 62 ++-- src/helpers/img.ts | 26 +- src/helpers/libraryItem.ts | 22 +- src/helpers/numbers.ts | 18 +- src/helpers/others.ts | 80 +++-- src/helpers/videos.ts | 10 +- src/hooks/useDarkMode.ts | 8 +- src/hooks/useLightBox.tsx | 6 +- src/hooks/useMediaQuery.ts | 33 +-- src/hooks/useScrollTopOnChange.ts | 4 +- src/hooks/useSmartLanguage.ts | 25 +- src/hooks/useSmartLanguage.tsx | 84 ------ src/hooks/useStateWithLocalStorage.ts | 6 +- src/hooks/useToggle.ts | 5 +- src/pages/404.tsx | 37 ++- src/pages/500.tsx | 37 ++- src/pages/_app.tsx | 13 +- src/pages/about-us/accords-handbook.tsx | 43 ++- src/pages/about-us/contact.tsx | 20 +- src/pages/about-us/index.tsx | 39 +-- src/pages/about-us/legality.tsx | 43 ++- src/pages/about-us/sharing-policy.tsx | 43 ++- src/pages/api/mail.ts | 7 +- src/pages/api/revalidate.ts | 7 +- src/pages/archives/index.tsx | 31 +- src/pages/archives/videos/c/[uid].tsx | 39 +-- src/pages/archives/videos/index.tsx | 41 ++- src/pages/archives/videos/v/[uid].tsx | 39 +-- src/pages/chronicles/index.tsx | 31 +- src/pages/contents/[slug]/index.tsx | 101 ++++--- src/pages/contents/index.tsx | 97 +++--- src/pages/dev/checkup/contents.tsx | 40 ++- src/pages/dev/checkup/libraryitems.tsx | 42 ++- src/pages/dev/editor.tsx | 33 ++- src/pages/dev/transcript.tsx | 247 +++++++++++++--- src/pages/index.tsx | 62 ++-- src/pages/library/[slug]/index.tsx | 108 ++++--- src/pages/library/[slug]/scans.tsx | 45 +-- src/pages/library/index.tsx | 98 +++--- src/pages/merch/index.tsx | 37 ++- src/pages/news/[slug].tsx | 56 ++-- src/pages/news/index.tsx | 72 +++-- src/pages/wiki/[slug]/index.tsx | 34 +-- src/pages/wiki/chronology.tsx | 33 ++- src/pages/wiki/index.tsx | 86 ++++-- tailwind.config.js | 16 +- 94 files changed, 2537 insertions(+), 1811 deletions(-) create mode 100644 CONTRIBUTING.md delete mode 100644 src/components/Markdown/TOC.tsx delete mode 100644 src/hooks/useSmartLanguage.tsx diff --git a/.eslintrc.js b/.eslintrc.js index ee57632..29118c6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -41,7 +41,7 @@ module.exports = { eqeqeq: "error", "func-name-matching": "warn", "func-names": "warn", - "func-style": ["warn", "declaration"], + "func-style": ["warn", "expression"], "grouped-accessor-pairs": "warn", "guard-for-in": "warn", "id-denylist": ["error", "data", "err", "e", "cb", "callback", "i"], diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..306ca62 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,80 @@ +# CONTRIBUTING + +## Styling choices + +### Pages + +```tsx +import ... + +/* + * ╭─────────────╮ + * ────────────────────────────────────────╯ CONSTANTS ╰────────────────────────────────────────── + */ + +const MY_CONSTANT = "value" +const DEFAULT_FILTERS_STATE = {} + +/* + * ╭────────╮ + * ──────────────────────────────────────────╯ PAGE ╰───────────────────────────────────────────── + */ + +interface Props {} + +const PageName = () => {} +export default PageName; + +/* + * ╭──────────────────────╮ + * ───────────────────────────────────╯ NEXT DATA FETCHING ╰────────────────────────────────────── + */ + +export const getStaticProps: GetStaticProps = async (context) => {} + +// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ + +export const getStaticPaths: GetStaticPaths = async (context) => {} + +/* + * ╭───────────────────╮ + * ─────────────────────────────────────╯ PRIVATE METHODS ╰─────────────────────────────────────── + */ + +/* + * ╭──────────────────────╮ + * ───────────────────────────────────╯ PRIVATE COMPONENTS ╰────────────────────────────────────── + */ + +interface Component1Interface {} +const Component1 = () => {} + +// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ + +interface Component2Interface {} +const Component2 = () => {} + +``` + +### Components + +```tsx +/* + * ╭─────────────╮ + * ────────────────────────────────────────╯ CONSTANTS ╰────────────────────────────────────────── + */ + +const MY_CONSTANT = "value"; +const DEFAULT_FILTERS_STATE = {}; + +/* + * ╭─────────────╮ + * ───────────────────────────────────────╯ COMPONENT ╰─────────────────────────────────────────── + */ + +interface ComponentProps {} + +// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ + +export const Component = () => {}; +``` diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 40c7d35..2d44daf 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -27,6 +27,19 @@ import { ContentPlaceholder } from "./PanelComponents/ContentPlaceholder"; import { MainPanel } from "./Panels/MainPanel"; import { Popup } from "./Popup"; +/* + * ╭─────────────╮ + * ────────────────────────────────────────╯ CONSTANTS ╰────────────────────────────────────────── + */ + +const SENSIBILITY_SWIPE = 1.1; +const TITLE_PREFIX = "Accord’s Library"; + +/* + * ╭─────────────╮ + * ───────────────────────────────────────╯ COMPONENT ╰─────────────────────────────────────────── + */ + interface Props extends AppStaticProps { subPanel?: React.ReactNode; subPanelIcon?: Icon; @@ -38,24 +51,21 @@ interface Props extends AppStaticProps { contentPanelScroolbar?: boolean; } -const SENSIBILITY_SWIPE = 1.1; -const TITLE_PREFIX = "Accord’s Library"; - -export function AppLayout(props: Props): JSX.Element { - const { - langui, - currencies, - languages, - subPanel, - contentPanel, - thumbnail, - title, - navTitle, - description, - subPanelIcon = Icon.Tune, - contentPanelScroolbar = true, - } = props; +// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ +export const AppLayout = ({ + langui, + currencies, + languages, + subPanel, + contentPanel, + thumbnail, + title, + navTitle, + description, + subPanelIcon = Icon.Tune, + contentPanelScroolbar = true, +}: Props): JSX.Element => { const { configPanelOpen, currency, @@ -396,7 +406,7 @@ export function AppLayout(props: Props): JSX.Element { insertLabels={ new Map([ [0, langui.primary_language], - [1, langui.secondary_language], + [1, langui.secondary_language], ]) } onChange={(items) => { @@ -517,4 +527,4 @@ export function AppLayout(props: Props): JSX.Element { ); -} +}; diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx index 565fc4d..9ab8bb9 100644 --- a/src/components/Chip.tsx +++ b/src/components/Chip.tsx @@ -1,21 +1,26 @@ import { cJoin } from "helpers/className"; +/* + * ╭─────────────╮ + * ───────────────────────────────────────╯ COMPONENT ╰─────────────────────────────────────────── + */ + interface Props { className?: string; children: React.ReactNode; } -export function Chip(props: Props): JSX.Element { - return ( -
( +
- {props.children} -
- ); -} + className + )} + > + {children} +
+); diff --git a/src/components/HorizontalLine.tsx b/src/components/HorizontalLine.tsx index df9d294..95594b4 100644 --- a/src/components/HorizontalLine.tsx +++ b/src/components/HorizontalLine.tsx @@ -1,17 +1,21 @@ import { cJoin } from "helpers/className"; +/* + * ╭─────────────╮ + * ───────────────────────────────────────╯ COMPONENT ╰─────────────────────────────────────────── + */ + interface Props { className?: string; } -export function HorizontalLine(props: Props): JSX.Element { - const { className } = props; - return ( -
- ); -} +// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ + +export const HorizontalLine = ({ className }: Props): JSX.Element => ( +
+); diff --git a/src/components/Ico.tsx b/src/components/Ico.tsx index 9431881..2c9c670 100644 --- a/src/components/Ico.tsx +++ b/src/components/Ico.tsx @@ -1,27 +1,35 @@ import { cJoin } from "helpers/className"; - import { MouseEventHandler } from "react"; +/* + * ╭─────────────╮ + * ───────────────────────────────────────╯ COMPONENT ╰─────────────────────────────────────────── + */ + interface Props { className?: string; onClick?: MouseEventHandler | undefined; icon: Icon; } -export function Ico(props: Props): JSX.Element { - const { onClick, icon, className } = props; - return ( - - {icon} - - ); -} +// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ + +export const Ico = ({ onClick, icon, className }: Props): JSX.Element => ( + + {icon} + +); + +/* + * ╭─────────╮ + * ─────────────────────────────────────────╯ OTHER ╰───────────────────────────────────────────── + */ export enum Icon { Onek = "1k", diff --git a/src/components/Img.tsx b/src/components/Img.tsx index 9c7ee00..c38c641 100644 --- a/src/components/Img.tsx +++ b/src/components/Img.tsx @@ -1,9 +1,13 @@ import { UploadImageFragment } from "graphql/generated"; import { getAssetURL, getImgSizesByQuality, ImageQuality } from "helpers/img"; - import { ImageProps } from "next/image"; import { MouseEventHandler } from "react"; +/* + * ╭─────────────╮ + * ────────────────────────────────────────╯ CONSTANTS ╰────────────────────────────────────────── + */ + interface Props { className?: string; image?: UploadImageFragment | string; @@ -12,15 +16,15 @@ interface Props { onClick?: MouseEventHandler; } -export function Img(props: Props): JSX.Element { - const { - className, - image, - quality = ImageQuality.Small, - alt, - onClick, - } = props; +// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ +export const Img = ({ + className, + image, + quality = ImageQuality.Small, + alt, + onClick, +}: Props): JSX.Element => { if (typeof image === "string") { return ( {alt @@ -40,4 +44,4 @@ export function Img(props: Props): JSX.Element { ); } return <>; -} +}; diff --git a/src/components/Inputs/Button.tsx b/src/components/Inputs/Button.tsx index 4140312..d13f74e 100644 --- a/src/components/Inputs/Button.tsx +++ b/src/components/Inputs/Button.tsx @@ -1,11 +1,15 @@ import { Ico, Icon } from "components/Ico"; import { cIf, cJoin } from "helpers/className"; import { ConditionalWrapper, Wrapper } from "helpers/component"; - import { isDefined, isDefinedAndNotEmpty } from "helpers/others"; import { useRouter } from "next/router"; import React, { MouseEventHandler } from "react"; +/* + * ╭─────────────╮ + * ───────────────────────────────────────╯ COMPONENT ╰─────────────────────────────────────────── + */ + interface Props { id?: string; className?: string; @@ -20,21 +24,21 @@ interface Props { badgeNumber?: number; } -export function Button(props: Props): JSX.Element { - const { - draggable, - id, - onClick, - active, - className, - icon, - text, - target, - href, - locale, - badgeNumber, - } = props; +// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ +export const Button = ({ + draggable, + id, + onClick, + active, + className, + icon, + text, + target, + href, + locale, + badgeNumber, +}: Props): JSX.Element => { const router = useRouter(); return ( @@ -87,17 +91,19 @@ export function Button(props: Props): JSX.Element { ); -} +}; + +/* + * ╭──────────────────────╮ + * ───────────────────────────────────╯ PRIVATE COMPONENTS ╰────────────────────────────────────── + */ interface LinkWrapperProps { href?: string; } -function LinkWrapper(props: LinkWrapperProps & Wrapper) { - const { children, href } = props; - return ( - - {children} - - ); -} +const LinkWrapper = ({ children, href }: LinkWrapperProps & Wrapper) => ( + + {children} + +); diff --git a/src/components/Inputs/ButtonGroup.tsx b/src/components/Inputs/ButtonGroup.tsx index bb5e0db..5eea5ba 100644 --- a/src/components/Inputs/ButtonGroup.tsx +++ b/src/components/Inputs/ButtonGroup.tsx @@ -4,6 +4,11 @@ import { ConditionalWrapper, Wrapper } from "helpers/component"; import { isDefinedAndNotEmpty } from "helpers/others"; import { Button } from "./Button"; +/* + * ╭─────────────╮ + * ───────────────────────────────────────╯ COMPONENT ╰─────────────────────────────────────────── + */ + interface Props { className?: string; buttonsProps: (Parameters[0] & { @@ -11,43 +16,46 @@ interface Props { })[]; } -export function ButtonGroup(props: Props): JSX.Element { - const { buttonsProps, className } = props; +// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ - return ( -
- {buttonsProps.map((buttonProps, index) => ( - -
- ); -} +export const ButtonGroup = ({ + buttonsProps, + className, +}: Props): JSX.Element => ( +
+ {buttonsProps.map((buttonProps, index) => ( + +
+); + +/* + * ╭──────────────────────╮ + * ───────────────────────────────────╯ PRIVATE COMPONENTS ╰────────────────────────────────────── + */ interface ToolTipWrapperProps { text: string; } -function ToolTipWrapper(props: ToolTipWrapperProps & Wrapper) { - const { text, children } = props; - return ( - - <>{children} - - ); -} +const ToolTipWrapper = ({ text, children }: ToolTipWrapperProps & Wrapper) => ( + + <>{children} + +); diff --git a/src/components/Inputs/LanguageSwitcher.tsx b/src/components/Inputs/LanguageSwitcher.tsx index ff93e0d..828a0c1 100644 --- a/src/components/Inputs/LanguageSwitcher.tsx +++ b/src/components/Inputs/LanguageSwitcher.tsx @@ -3,11 +3,15 @@ import { AppStaticProps } from "graphql/getAppStaticProps"; import { cJoin } from "helpers/className"; import { prettyLanguage } from "helpers/formatters"; import { iterateMap } from "helpers/others"; - import { Fragment } from "react"; import { ToolTip } from "../ToolTip"; import { Button } from "./Button"; +/* + * ╭─────────────╮ + * ───────────────────────────────────────╯ COMPONENT ╰─────────────────────────────────────────── + */ + interface Props { className?: string; languages: AppStaticProps["languages"]; @@ -16,29 +20,33 @@ interface Props { onLanguageChanged: (index: number) => void; } -export function LanguageSwitcher(props: Props): JSX.Element { - const { locales, className, localesIndex, onLanguageChanged } = props; +// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ - return ( - - {iterateMap(locales, (locale, value, index) => ( - -