From ac9b2767b68a06c354dd0cee9c50c55562816f9e Mon Sep 17 00:00:00 2001 From: Christian Schlensker Date: Thu, 20 Jul 2023 11:13:56 -0700 Subject: [PATCH] build: update eslint prettier config and setup commit hooks (#1396) --- .eslintrc.json | 5 +- .husky/.gitignore | 1 + .husky/pre-commit | 5 + components/atoms/Avatar/avatar.tsx | 8 +- components/atoms/Card/card.tsx | 35 +- .../ContextThumbnail/context-thumbnail.tsx | 14 +- .../atoms/EChartWrapper/echart-wrapper.tsx | 12 +- components/atoms/Error/Error.tsx | 14 +- components/atoms/FilterCard/filter-card.tsx | 61 +- components/atoms/Icon/icon.tsx | 15 +- components/atoms/IconButton/icon-button.tsx | 18 +- .../atoms/LanguagePill/LanguagePill.tsx | 4 +- .../NotificationsCard/notification-card.tsx | 8 +- components/atoms/Pill/pill.tsx | 32 +- .../atoms/PillSelector/pill-selector.tsx | 2 +- components/atoms/ProgressPie/progress-pie.tsx | 31 +- .../pull-request-overview-chart.tsx | 18 +- components/atoms/ScrollArea/scroll-area.tsx | 30 +- components/atoms/Select/select.tsx | 6 +- components/atoms/Sparkline/sparkline.tsx | 11 +- components/atoms/Toast/toast.tsx | 8 +- components/atoms/ToggleGroup/toggle-group.tsx | 47 +- .../ToggleGroupItem/toggle-group-item.tsx | 26 +- .../atoms/ToggleSwitch/toggle-switch.tsx | 2 +- components/atoms/Typography/text.tsx | 2 +- components/atoms/Typography/title.tsx | 5 +- .../molecules/AlertDialog/alert-dialog.tsx | 2 +- .../auth-content-wrapper.tsx | 13 +- .../molecules/AuthSection/auth-section.tsx | 4 +- .../molecules/AvatarRoll/avatar-roll.tsx | 24 +- components/molecules/Calendar/calendar.tsx | 4 +- .../card-horizontal-bar-chart.tsx | 4 +- .../ComponentGradient/component-gradient.tsx | 4 +- .../contributor-filter-dropdown.tsx | 2 +- components/molecules/DevCard/dev-card.tsx | 10 +- .../molecules/DropdownList/dropdown-list.tsx | 26 +- .../FavoriteRepos/favorite-repos.tsx | 18 +- .../FilterCardSelect/filter-card-select.tsx | 12 +- .../molecules/FilterHeader/filter-header.tsx | 5 +- .../HighlightCard/highlight-card.tsx | 50 +- .../HighlightInput/highlight-input-form.tsx | 6 +- .../HoverCardWrapper/hover-card-wrapper.tsx | 1 - .../InsightPageCard/insight-page-card.tsx | 10 +- .../molecules/InsightRow/insight-row.tsx | 9 +- .../insights-page-list-dropdown.tsx | 2 +- .../LatestPrTableRow/latest-pr-table-row.tsx | 5 +- .../NivoScatterChart/nivo-scatter-chart.tsx | 18 +- .../molecules/Pagination/pagination.tsx | 4 +- .../PaginationResults/pagination-result.tsx | 6 +- components/molecules/PieChart/pie-chart.tsx | 4 +- .../pull-request-overview.tsx | 18 +- .../pull-request-social-card.tsx | 2 +- .../PullRequestTable/pull-request-table.tsx | 13 +- .../molecules/ReportsHistory/csv-download.tsx | 2 +- .../StackedAvatar/stacked-avatar.tsx | 26 +- .../superlative-selector.tsx | 3 +- .../molecules/TableHeader/table-header.tsx | 8 +- .../TeamMemberRow/team-member-row.tsx | 4 +- .../TeamMembersConfig/team-members-config.tsx | 2 +- components/molecules/Toaster/toaster.tsx | 2 +- .../organisms/Contributors/contributors.tsx | 18 +- .../DevCardCarousel/dev-card-carousel.tsx | 2 - components/organisms/Footer/footer.tsx | 30 +- components/organisms/Header/header.tsx | 8 +- .../InsightPage/DeleteInsightPageModal.tsx | 2 +- .../organisms/InsightPage/InsightPage.tsx | 16 +- .../organisms/LoginTopNav/login-top-nav.tsx | 1 - components/organisms/Reports/reports.tsx | 8 +- .../organisms/Repositories/repositories.tsx | 18 +- .../Repositories/repository-not-indexed.tsx | 6 +- .../RepositoriesCart/repositories-cart.tsx | 2 +- .../RepositoriesTable/repositories-table.tsx | 21 +- .../stripe-checkout-button.tsx | 4 +- components/organisms/ToolList/nav-item.tsx | 27 +- .../organisms/ToolsDisplay/tools-display.tsx | 22 +- .../UserSettingsPage/user-settings-page.tsx | 9 +- components/templates/Loader/loader.tsx | 10 +- lib/hooks/api/useContributorPullRequests.ts | 4 +- lib/hooks/api/useInsights.ts | 8 +- lib/hooks/api/usePullRequests.ts | 4 +- lib/hooks/api/useRepositories.ts | 4 +- lib/hooks/authSession.ts | 4 +- lib/hooks/createHighlights.ts | 5 +- lib/hooks/deleteHighlight.ts | 4 +- lib/hooks/fetchGithubPRInfo.ts | 6 +- lib/hooks/update-user.ts | 4 +- lib/hooks/updateEmailPreference.ts | 4 +- lib/hooks/updateHighlight.ts | 4 +- lib/hooks/useFetchAllEmojis.ts | 2 +- lib/hooks/useFetchAllHighlights.ts | 2 +- lib/hooks/useFetchHiglightRepos.ts | 2 +- lib/hooks/useFetchSingleHighlight.ts | 2 +- lib/hooks/useFetchUserHighlights.ts | 2 +- lib/hooks/useFilterOptions.ts | 4 +- lib/hooks/useFilterPrefetch.ts | 10 +- lib/hooks/useHighlightReactions.ts | 2 +- lib/hooks/useInsight.ts | 2 +- lib/hooks/useInsightMembers.ts | 14 +- lib/hooks/useMediaQuery.ts | 4 +- lib/hooks/useNav.ts | 14 +- lib/hooks/useSession.ts | 14 +- lib/hooks/useToast.ts | 130 ++-- lib/hooks/useUserInsights.ts | 2 +- lib/store/index.ts | 39 +- lib/utils/analytics.ts | 13 +- lib/utils/change-capitalization.ts | 4 +- lib/utils/date-utils.ts | 6 +- lib/utils/get-current-date.ts | 19 +- lib/utils/get-filter-key.ts | 2 +- lib/utils/get-filter-query.ts | 2 +- lib/utils/get-pr-contributors.ts | 22 +- lib/utils/get-prs-to-days.ts | 6 +- lib/utils/get-recent-commits.ts | 4 +- lib/utils/get-repo-insights.ts | 47 +- lib/utils/getInterestOptions.ts | 4 +- lib/utils/getTopicThumbnail.ts | 2 +- lib/utils/github.ts | 4 +- lib/utils/public-api-fetcher.ts | 4 +- lib/utils/recommendations.ts | 3 +- lib/utils/timezones.ts | 268 +++---- lib/utils/topic-name-formatting.ts | 14 +- lib/utils/truncate-string.ts | 2 +- lib/utils/uppercase-first.ts | 2 +- lib/utils/urls.ts | 2 - lib/utils/validate-is-string-github-pat.ts | 2 +- lib/utils/validate-twitter-username.ts | 22 +- npm-shrinkwrap.json | 661 +++++++++++++++++- package.json | 16 +- pages/[filterName]/[toolName].tsx | 8 +- .../[toolName]/filter/[...selectedFilter].tsx | 4 +- pages/[filterName]/index.tsx | 4 +- pages/_app.tsx | 2 +- pages/api/card.png.tsx | 17 +- pages/hub/insights/[insightId]/accept.tsx | 6 +- pages/hub/insights/[insightId]/edit.tsx | 2 +- pages/hub/insights/index.tsx | 8 +- pages/hub/insights/new.tsx | 3 +- pages/start.tsx | 14 +- pages/user/[username]/card.tsx | 17 +- pages/user/[username]/contributions.tsx | 2 - pages/user/[username]/highlights.tsx | 1 - pages/user/settings.tsx | 2 +- 142 files changed, 1556 insertions(+), 908 deletions(-) create mode 100644 .husky/.gitignore create mode 100755 .husky/pre-commit diff --git a/.eslintrc.json b/.eslintrc.json index de44454ad1..8327af5ff1 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,11 +1,8 @@ { - "extends": ["next/core-web-vitals", "prettier", "plugin:storybook/recommended"], + "extends": ["next/core-web-vitals", "plugin:prettier/recommended", "plugin:storybook/recommended"], "plugins": ["unused-imports"], "rules": { - "quotes": "error", "jsx-quotes": "error", - "semi": "error", - "indent": ["error", 2], "unused-imports/no-unused-imports": "error", "import/order": [ "error", diff --git a/.husky/.gitignore b/.husky/.gitignore new file mode 100644 index 0000000000..31354ec138 --- /dev/null +++ b/.husky/.gitignore @@ -0,0 +1 @@ +_ diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000000..6aeb8f2a14 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,5 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +npx lint-staged +npx lint-staged diff --git a/components/atoms/Avatar/avatar.tsx b/components/atoms/Avatar/avatar.tsx index a5c6697b72..3925603e2e 100644 --- a/components/atoms/Avatar/avatar.tsx +++ b/components/atoms/Avatar/avatar.tsx @@ -33,10 +33,10 @@ const Avatar = (props: AvatarProps): JSX.Element => { } switch (typeof props.size) { - case "string": - return ; - case "number": - return ; + case "string": + return ; + case "number": + return ; } }; diff --git a/components/atoms/Card/card.tsx b/components/atoms/Card/card.tsx index 44461dcf09..1da8e550c3 100644 --- a/components/atoms/Card/card.tsx +++ b/components/atoms/Card/card.tsx @@ -1,29 +1,26 @@ import React from "react"; interface CardProps { - className?: string; - heading?: JSX.Element | string; - children: JSX.Element; + className?: string; + heading?: JSX.Element | string; + children: JSX.Element; } const Card: React.FC = ({ className, children, heading }) => { return ( -
- { - heading ? - <> -
- {heading} -
-
- {children} -
- - - : - - children - } +
+ {heading ? ( + <> +
{heading}
+
{children}
+ + ) : ( + children + )}
); }; diff --git a/components/atoms/ContextThumbnail/context-thumbnail.tsx b/components/atoms/ContextThumbnail/context-thumbnail.tsx index 685b8a42bb..0904574786 100644 --- a/components/atoms/ContextThumbnail/context-thumbnail.tsx +++ b/components/atoms/ContextThumbnail/context-thumbnail.tsx @@ -3,17 +3,21 @@ import Image, { StaticImageData } from "next/image"; import ContextThumbnailImage from "../../../img/open-sourced-with-bg-icon.png"; interface ContextThumbnailProps { - className?: string; - ContextThumbnailURL?: string | StaticImageData; - alt?: string; - size?: string | number; + className?: string; + ContextThumbnailURL?: string | StaticImageData; + alt?: string; + size?: string | number; } const ContextThumbnail: React.FC = ({ className, ContextThumbnailURL, alt, size }) => { return ( {alt + alt={alt ? alt : "ContextThumbnail"} + width={size as number} + height={size as number} + src={ContextThumbnailURL ? ContextThumbnailURL : ContextThumbnailImage} + /> ); }; diff --git a/components/atoms/EChartWrapper/echart-wrapper.tsx b/components/atoms/EChartWrapper/echart-wrapper.tsx index a1069771c2..fdba83265e 100644 --- a/components/atoms/EChartWrapper/echart-wrapper.tsx +++ b/components/atoms/EChartWrapper/echart-wrapper.tsx @@ -8,19 +8,13 @@ Docs for ReactECharts: https://github.com/hustcc/echarts-for-react */ interface EChartWrapperProps { - option: Object; - className?: string; + option: Object; + className?: string; } const EChartWrapper: React.FC = ({ option, className }) => { return ( - + ); }; diff --git a/components/atoms/Error/Error.tsx b/components/atoms/Error/Error.tsx index 7bc9548e82..c0182e791a 100644 --- a/components/atoms/Error/Error.tsx +++ b/components/atoms/Error/Error.tsx @@ -9,22 +9,16 @@ interface ErrorProps { fullWidth?: boolean; } -const Error:React.FC = ({ - errorMessage, - fullWidth = false -}) => { +const Error: React.FC = ({ errorMessage, fullWidth = false }) => { const wideStyle = fullWidth ? "flex" : "inline-flex "; return ( -
+
- - {errorMessage || "Something went wrong!"} - + {errorMessage || "Something went wrong!"}
); }; -export default Error; \ No newline at end of file +export default Error; diff --git a/components/atoms/FilterCard/filter-card.tsx b/components/atoms/FilterCard/filter-card.tsx index 047ac9c27d..4991f3ce7c 100644 --- a/components/atoms/FilterCard/filter-card.tsx +++ b/components/atoms/FilterCard/filter-card.tsx @@ -8,48 +8,67 @@ import repoIcon from "../../../img/icons/repo.svg"; import cancelIcon from "../../../img/x-circle.svg"; interface FilterCardProps { - filterName: string; - bgColor?: string; - isRemovable?: boolean; - icon?: "topic" | "repo" | "org" | "contributor"; + filterName: string; + bgColor?: string; + isRemovable?: boolean; + icon?: "topic" | "repo" | "org" | "contributor"; } const icons = { topic: { src: hashIcon.src, - alt: "Topic" + alt: "Topic", }, org: { src: orgIcon.src, - alt: "Organization" + alt: "Organization", }, contributor: { src: personIcon.src, - alt: "Contributor" + alt: "Contributor", }, repo: { src: repoIcon.src, - alt: "Repository" - } + alt: "Repository", + }, }; const FilterCard: React.FC = ({ filterName, bgColor, icon, isRemovable }) => { return (
+ className={`inline-block py-1 px-2 border border-slate-300 outline-none hover:bg-slate-50 focus:ring-2 ${ + bgColor && `bg-${bgColor}` + } ${isRemovable ? "focus:ring-orange-500" : "bg-slate-100 focus:ring-slate-300"} rounded-lg`} + >
{icon - - {filterName} - - { isRemovable ? - Cancel Icon - : - false - } + width={14} + height={14} + alt={ + icon === "topic" + ? icons.topic.alt + : icon === "org" + ? icons.org.alt + : icon === "contributor" + ? icons.contributor.alt + : icon === "repo" + ? icons.repo.alt + : "Icon" + } + src={ + icon === "topic" + ? icons.topic.src + : icon === "org" + ? icons.org.src + : icon === "contributor" + ? icons.contributor.src + : icon === "repo" + ? icons.repo.src + : icons.topic.src + } + /> + {filterName} + {isRemovable ? Cancel Icon : false}
); diff --git a/components/atoms/Icon/icon.tsx b/components/atoms/Icon/icon.tsx index 719b521392..c0cf4d282f 100644 --- a/components/atoms/Icon/icon.tsx +++ b/components/atoms/Icon/icon.tsx @@ -2,11 +2,11 @@ import React from "react"; import Image, { StaticImageData } from "next/image"; interface IconProps { - IconImage: StaticImageData | string; - className?: string; - alt?: string; - size?: number; - onClick?: (...args: any) => any; + IconImage: StaticImageData | string; + className?: string; + alt?: string; + size?: number; + onClick?: (...args: any) => any; } const Icon: React.FC = ({ onClick, className, IconImage, alt, size = 16 }) => { @@ -21,8 +21,9 @@ const Icon: React.FC = ({ onClick, className, IconImage, alt, size = src={IconImage} style={{ maxWidth: "100%", - height: "auto" - }} /> + height: "auto", + }} + />
); }; diff --git a/components/atoms/IconButton/icon-button.tsx b/components/atoms/IconButton/icon-button.tsx index a1e8874aec..711392b5a7 100644 --- a/components/atoms/IconButton/icon-button.tsx +++ b/components/atoms/IconButton/icon-button.tsx @@ -3,17 +3,25 @@ import Image, { StaticImageData } from "next/image"; import SettingsIcon from "../../../img/settings-icon.svg"; interface IconButtonProps { - IconButtonImage?: StaticImageData; - className?: string; - alt?: string; + IconButtonImage?: StaticImageData; + className?: string; + alt?: string; } const IconButton: React.FC = ({ className, IconButtonImage = SettingsIcon, alt }) => { return ( -
+
{alt + alt={alt ? alt : "IconButton"} + width={16} + height={16} + src={IconButtonImage} + />
); }; diff --git a/components/atoms/LanguagePill/LanguagePill.tsx b/components/atoms/LanguagePill/LanguagePill.tsx index 9a43314567..9c542288f5 100644 --- a/components/atoms/LanguagePill/LanguagePill.tsx +++ b/components/atoms/LanguagePill/LanguagePill.tsx @@ -1,6 +1,5 @@ import Image, { StaticImageData } from "next/image"; - import JavascriptIcon from "img/icons/interests/javascript.svg"; import ReactIcon from "/img/icons/interests/react.svg"; import PythonIcon from "/img/icons/interests/python.svg"; @@ -20,7 +19,6 @@ import KubernetesIcon from "img/icons/interests/kubernetes.svg"; import topicNameFormatting from "lib/utils/topic-name-formatting"; - interface LanguagePillProps { topic: | "react" @@ -61,7 +59,7 @@ const LanguagePill = ({ topic, classNames, onClick }: LanguagePillProps) => { java: JavaIcon, golang: GolangIcon, vue: VueIcon, - kubernetes: KubernetesIcon + kubernetes: KubernetesIcon, }; return iconMap[name] || ""; diff --git a/components/atoms/NotificationsCard/notification-card.tsx b/components/atoms/NotificationsCard/notification-card.tsx index bc05f16b12..4324dcfde0 100644 --- a/components/atoms/NotificationsCard/notification-card.tsx +++ b/components/atoms/NotificationsCard/notification-card.tsx @@ -10,10 +10,10 @@ interface NotificationCard { const getSourceURL = (type: string, id: string) => { switch (type) { - case "highlight_reaction": - return `/feed/${id}`; - case "follow": - return `/user/${id}`; + case "highlight_reaction": + return `/feed/${id}`; + case "follow": + return `/user/${id}`; } }; diff --git a/components/atoms/Pill/pill.tsx b/components/atoms/Pill/pill.tsx index c982da8c6a..58bd6b19c8 100644 --- a/components/atoms/Pill/pill.tsx +++ b/components/atoms/Pill/pill.tsx @@ -13,16 +13,16 @@ const Pill: React.FC = ({ className, text, color = "slate", size = "b
@@ -31,16 +31,16 @@ const Pill: React.FC = ({ className, text, color = "slate", size = "b
{text} diff --git a/components/atoms/PillSelector/pill-selector.tsx b/components/atoms/PillSelector/pill-selector.tsx index f0ab0f040b..4afbbfd7d7 100644 --- a/components/atoms/PillSelector/pill-selector.tsx +++ b/components/atoms/PillSelector/pill-selector.tsx @@ -45,7 +45,7 @@ const PillSelector: React.FC = ({ handlePillClick, handleCancelClick, className, - selected + selected, }) => { const [isOpen, setIsOpen] = useState(false); const show = isOpen ? "flex" : "hidden"; diff --git a/components/atoms/ProgressPie/progress-pie.tsx b/components/atoms/ProgressPie/progress-pie.tsx index 3204aeac97..0777369462 100644 --- a/components/atoms/ProgressPie/progress-pie.tsx +++ b/components/atoms/ProgressPie/progress-pie.tsx @@ -1,22 +1,33 @@ import React from "react"; interface ProgressPieProps { - className?: string; - percentage?: number; - svgStyles?: string; - circleStyles?: string; + className?: string; + percentage?: number; + svgStyles?: string; + circleStyles?: string; } - -const ProgressPie: React.FC = ({ className, percentage, svgStyles, circleStyles}) => { - +const ProgressPie: React.FC = ({ className, percentage, svgStyles, circleStyles }) => { return ( -
+
- +
); }; -export default ProgressPie; \ No newline at end of file +export default ProgressPie; diff --git a/components/atoms/PullRequestOverviewChart/pull-request-overview-chart.tsx b/components/atoms/PullRequestOverviewChart/pull-request-overview-chart.tsx index e34d80233c..0141c51d05 100644 --- a/components/atoms/PullRequestOverviewChart/pull-request-overview-chart.tsx +++ b/components/atoms/PullRequestOverviewChart/pull-request-overview-chart.tsx @@ -15,16 +15,16 @@ const PullRequestOverviewChartBar: React.FC = ({ closed, draft, totalPullRequests, - setOverviewDetails + setOverviewDetails, }) => { const getPercentage = (PullRequestType: number | undefined) => { return ((!!PullRequestType ? PullRequestType : 0) * 100) / (!!totalPullRequests ? totalPullRequests : 0); diff --git a/components/atoms/ScrollArea/scroll-area.tsx b/components/atoms/ScrollArea/scroll-area.tsx index ce46f91054..41bd826387 100644 --- a/components/atoms/ScrollArea/scroll-area.tsx +++ b/components/atoms/ScrollArea/scroll-area.tsx @@ -7,17 +7,8 @@ const ScrollArea = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( - - - {children} - + + {children} )); ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName; @@ -27,14 +18,7 @@ const ScrollViewport = React.forwardRef< React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( <> - + {children} @@ -51,10 +35,8 @@ const ScrollBar = React.forwardRef< ref={ref} className={clsx( "flex touch-none select-none p-0.5 transition-colors duration-[160ms] ease-out", - orientation === "vertical" && - "h-full w-2 border-l border-l-transparent", - orientation === "horizontal" && - "h-2 border-t border-t-transparent", + orientation === "vertical" && "h-full w-2 border-l border-l-transparent", + orientation === "horizontal" && "h-2 border-t border-t-transparent", className )} orientation={orientation} @@ -65,4 +47,4 @@ const ScrollBar = React.forwardRef< )); ScrollBar.displayName = ScrollAreaPrimitive.Scrollbar.displayName; -export { ScrollArea, ScrollViewport, ScrollBar }; \ No newline at end of file +export { ScrollArea, ScrollViewport, ScrollBar }; diff --git a/components/atoms/Select/select.tsx b/components/atoms/Select/select.tsx index 3b73cd2a5e..422d81d069 100644 --- a/components/atoms/Select/select.tsx +++ b/components/atoms/Select/select.tsx @@ -47,13 +47,13 @@ const SelectContent = React.forwardRef< > + > {children} @@ -103,4 +103,4 @@ const SelectSeparator = React.forwardRef< )); SelectSeparator.displayName = SelectPrimitive.Separator.displayName; -export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator }; \ No newline at end of file +export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator }; diff --git a/components/atoms/Sparkline/sparkline.tsx b/components/atoms/Sparkline/sparkline.tsx index 4c55d0451f..d7476d41ce 100644 --- a/components/atoms/Sparkline/sparkline.tsx +++ b/components/atoms/Sparkline/sparkline.tsx @@ -7,10 +7,9 @@ interface SparklineProps { data?: Serie[]; } - const Sparkline: React.FC = ({ width = 120, height = 40, data = [] }) => { return ( -
+
= ({ width = 120, height = 40, data = min: "auto", max: "auto", stacked: true, - reverse: false + reverse: false, }} yFormat=" >-.2f" curve="cardinal" @@ -37,10 +36,10 @@ const Sparkline: React.FC = ({ width = 120, height = 40, data = pointBorderColor={{ from: "serieColor" }} pointLabelYOffset={-12} isInteractive={false} - legends={[]} /> + legends={[]} + />
); }; - -export default Sparkline; \ No newline at end of file +export default Sparkline; diff --git a/components/atoms/Toast/toast.tsx b/components/atoms/Toast/toast.tsx index 6322a82dab..23b1a63ae8 100644 --- a/components/atoms/Toast/toast.tsx +++ b/components/atoms/Toast/toast.tsx @@ -23,14 +23,12 @@ ToastViewport.displayName = ToastPrimitives.Viewport.displayName; const Toast = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef &{variant? : "success" | "warning" | "danger" } + React.ComponentPropsWithoutRef & { variant?: "success" | "warning" | "danger" } >(({ className, variant, ...props }, ref) => { - return ( ); @@ -98,5 +96,5 @@ export { ToastTitle, ToastDescription, ToastClose, - ToastAction + ToastAction, }; diff --git a/components/atoms/ToggleGroup/toggle-group.tsx b/components/atoms/ToggleGroup/toggle-group.tsx index ffc5b1d77e..e67ad7f39a 100644 --- a/components/atoms/ToggleGroup/toggle-group.tsx +++ b/components/atoms/ToggleGroup/toggle-group.tsx @@ -3,14 +3,14 @@ import { useState } from "react"; import ToggleGroupItem from "../ToggleGroupItem/toggle-group-item"; interface ToggleGroupProps { - children: React.ReactNode, - /** Allows the user to deselect an option, resulting in none being selected. */ - allowNone?: boolean, - /** Decides which option will be selected by default. Provide the position of the element to be selected starting from 0. */ - defaultSelection?: string | number, - /** Callback function that is called when the user selects an option, and the position of the selected element is passed into as string, starting with '0'. */ - handleChange?: (value: string) => void, - className?: string + children: React.ReactNode; + /** Allows the user to deselect an option, resulting in none being selected. */ + allowNone?: boolean; + /** Decides which option will be selected by default. Provide the position of the element to be selected starting from 0. */ + defaultSelection?: string | number; + /** Callback function that is called when the user selects an option, and the position of the selected element is passed into as string, starting with '0'. */ + handleChange?: (value: string) => void; + className?: string; } /** A ToggleGroup component that allows the user to select one option from a list of options. @@ -28,34 +28,39 @@ const ToggleGroup = ({ allowNone = false, defaultSelection = "0", handleChange, - className + className, }: ToggleGroupProps) => { - const [value, setValue] = useState(defaultSelection+""); + const [value, setValue] = useState(defaultSelection + ""); const handleValueChange = (value: string) => { - if(value || allowNone) { + if (value || allowNone) { setValue(value); handleChange && handleChange(value); } }; - if(!children) return null; + if (!children) return null; return ( - - { - Array.isArray(children) ? children.map((child, index) => ( - + + {Array.isArray(children) ? ( + children.map((child, index) => ( + {child} )) - : - {children} - - } + ) : ( + + {children} + + )} ); - }; export default ToggleGroup; diff --git a/components/atoms/ToggleGroupItem/toggle-group-item.tsx b/components/atoms/ToggleGroupItem/toggle-group-item.tsx index 3ede2dcc7e..e2b988a096 100644 --- a/components/atoms/ToggleGroupItem/toggle-group-item.tsx +++ b/components/atoms/ToggleGroupItem/toggle-group-item.tsx @@ -2,25 +2,23 @@ import * as GroupToggle from "@radix-ui/react-toggle-group"; import clsx from "clsx"; interface ToggleGroupItemProps { - checked: boolean; - value: string, - children: React.ReactNode + checked: boolean; + value: string; + children: React.ReactNode; } -const ToggleGroupItem = ({ - checked, - value, - children -}: ToggleGroupItemProps) => { - +const ToggleGroupItem = ({ checked, value, children }: ToggleGroupItemProps) => { return ( - + {children} ); }; -export default ToggleGroupItem -; +export default ToggleGroupItem; diff --git a/components/atoms/ToggleSwitch/toggle-switch.tsx b/components/atoms/ToggleSwitch/toggle-switch.tsx index f2dcdc7710..c26826ee5a 100644 --- a/components/atoms/ToggleSwitch/toggle-switch.tsx +++ b/components/atoms/ToggleSwitch/toggle-switch.tsx @@ -14,7 +14,7 @@ const ToggleSwitch = ({ checked = false, handleToggle, size = "base", - classNames + classNames, }: ToggleSwitchProps): JSX.Element => { return ( { //Add additional prop definitions here - title?: string + title?: string; } const Text: React.FC = (props) => { diff --git a/components/atoms/Typography/title.tsx b/components/atoms/Typography/title.tsx index 25e203f629..061840822b 100644 --- a/components/atoms/Typography/title.tsx +++ b/components/atoms/Typography/title.tsx @@ -7,8 +7,7 @@ interface TitleProps extends React.ComponentProps //Add additional prop definitions here } -const Title: React.FC = ( props ) => { - +const Title: React.FC = (props) => { return ( {props.children} @@ -16,4 +15,4 @@ const Title: React.FC = ( props ) => { ); }; -export default Title; \ No newline at end of file +export default Title; diff --git a/components/molecules/AlertDialog/alert-dialog.tsx b/components/molecules/AlertDialog/alert-dialog.tsx index dde6b1a621..394b081c9a 100644 --- a/components/molecules/AlertDialog/alert-dialog.tsx +++ b/components/molecules/AlertDialog/alert-dialog.tsx @@ -117,5 +117,5 @@ export { AlertDialogTitle, AlertDialogDescription, AlertDialogAction, - AlertDialogCancel + AlertDialogCancel, }; diff --git a/components/molecules/AuthContentWrapper/auth-content-wrapper.tsx b/components/molecules/AuthContentWrapper/auth-content-wrapper.tsx index d73d0a19bf..d198aefdb1 100644 --- a/components/molecules/AuthContentWrapper/auth-content-wrapper.tsx +++ b/components/molecules/AuthContentWrapper/auth-content-wrapper.tsx @@ -30,24 +30,19 @@ const AuthContentWrapper: React.FC = ({ children }) =>
{!isAuthed && (
-
)} -
- {children} -
+
{children}
); }; diff --git a/components/molecules/AuthSection/auth-section.tsx b/components/molecules/AuthSection/auth-section.tsx index 7daa103bc3..e129c57f99 100644 --- a/components/molecules/AuthSection/auth-section.tsx +++ b/components/molecules/AuthSection/auth-section.tsx @@ -97,11 +97,11 @@ const AuthSection: React.FC = ({}) => { onClick={async () => { const pageHref = window.location.href; const searchParams = new URLSearchParams(pageHref.substring(pageHref.indexOf("?"))); - if (searchParams.has("login")){ + if (searchParams.has("login")) { searchParams.delete("login"); router.replace(`${pageHref.substring(0, pageHref.indexOf("?"))}?${searchParams.toString()}`); } - + await signOut(); }} key="authorized" diff --git a/components/molecules/AvatarRoll/avatar-roll.tsx b/components/molecules/AvatarRoll/avatar-roll.tsx index 678e1ec0ab..053fdcd9bd 100644 --- a/components/molecules/AvatarRoll/avatar-roll.tsx +++ b/components/molecules/AvatarRoll/avatar-roll.tsx @@ -16,12 +16,12 @@ const AvatarRoll = ({ avatarCount = 9 }: AvatarRollProps): JSX.Element => { index === 0 || index === 8 ? "opacity-20" : index === 1 || index === 7 - ? "opacity-40" - : index === 2 || index === 6 - ? "opacity-60" - : index === 3 || index === 5 - ? "opacity-80" - : "opacity-100" + ? "opacity-40" + : index === 2 || index === 6 + ? "opacity-60" + : index === 3 || index === 5 + ? "opacity-80" + : "opacity-100" }`} > { index === 0 || index === 8 ? 24 : index === 1 || index === 7 - ? 32 - : index === 2 || index === 6 - ? 40 - : index === 3 || index === 5 - ? 44 - : 48 + ? 32 + : index === 2 || index === 6 + ? 40 + : index === 3 || index === 5 + ? 44 + : 48 } avatarURL="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80" /> diff --git a/components/molecules/Calendar/calendar.tsx b/components/molecules/Calendar/calendar.tsx index d89228dd16..0ebd438326 100644 --- a/components/molecules/Calendar/calendar.tsx +++ b/components/molecules/Calendar/calendar.tsx @@ -35,11 +35,11 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C day_disabled: "opacity-50", day_range_middle: "aria-selected:bg-light-slate-3 ", day_hidden: "invisible", - ...classNames + ...classNames, }} components={{ IconLeft: ({ ...props }) => , - IconRight: ({ ...props }) => + IconRight: ({ ...props }) => , }} {...props} /> diff --git a/components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx b/components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx index 37613f4fc7..6db0d97dcc 100644 --- a/components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx +++ b/components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx @@ -60,7 +60,7 @@ const CardHorizontalBarChart = ({ languageList, withDescription }: CardHorizonta width: `${percentageUsed < 20 ? (percentageUsed / percentage) * 100 : percentageUsed}%`, backgroundColor: languageToColor[languageName] ? (languageToColor[languageName].color as string) - : NOTSUPPORTED + : NOTSUPPORTED, }} /> ) @@ -74,7 +74,7 @@ const CardHorizontalBarChart = ({ languageList, withDescription }: CardHorizonta style={{ backgroundColor: languageToColor[descriptText] ? (languageToColor[descriptText].color as string) - : NOTSUPPORTED + : NOTSUPPORTED, }} /> diff --git a/components/molecules/ComponentGradient/component-gradient.tsx b/components/molecules/ComponentGradient/component-gradient.tsx index 9aec0bca60..a3061baee2 100644 --- a/components/molecules/ComponentGradient/component-gradient.tsx +++ b/components/molecules/ComponentGradient/component-gradient.tsx @@ -7,11 +7,9 @@ interface ComponentGradientProps { const ComponentGradient = ({ children, css }: ComponentGradientProps) => { return ( -
{/* orange gradient overlay */} -
-
+
{children}
); diff --git a/components/molecules/ContributorFilterDropdown/contributor-filter-dropdown.tsx b/components/molecules/ContributorFilterDropdown/contributor-filter-dropdown.tsx index b96ef360a0..60774d5191 100644 --- a/components/molecules/ContributorFilterDropdown/contributor-filter-dropdown.tsx +++ b/components/molecules/ContributorFilterDropdown/contributor-filter-dropdown.tsx @@ -14,7 +14,7 @@ const filterOptions: { name: string; value: string }[] = [ { name: "Contribution", value: "contribution" }, { name: "Last 30 Days", value: "last-30-days" }, { name: "Activities", value: "activities" }, - { name: "Seniority", value: "seniority" } + { name: "Seniority", value: "seniority" }, ]; const ContributorFilterDropdown = () => { diff --git a/components/molecules/DevCard/dev-card.tsx b/components/molecules/DevCard/dev-card.tsx index 9c75b741fa..89846f8479 100644 --- a/components/molecules/DevCard/dev-card.tsx +++ b/components/molecules/DevCard/dev-card.tsx @@ -73,7 +73,7 @@ export default function DevCard(props: DevCardProps) { "h-full", "absolute", "left-0", - "top-0", + "top-0" ); const faceStyle: React.CSSProperties = { @@ -98,13 +98,7 @@ export default function DevCard(props: DevCardProps) { trackOnWindow={isInteractive} glareBorderRadius="1.5rem" flipHorizontally={isFlipped} - className={clsx( - "DevCard-card", - "relative", - "rounded-3x", - "w-full", - "h-full", - )} + className={clsx("DevCard-card", "relative", "rounded-3x", "w-full", "h-full")} style={{ transformStyle: "preserve-3d", }} diff --git a/components/molecules/DropdownList/dropdown-list.tsx b/components/molecules/DropdownList/dropdown-list.tsx index 38ec96f7fc..6f108b0726 100644 --- a/components/molecules/DropdownList/dropdown-list.tsx +++ b/components/molecules/DropdownList/dropdown-list.tsx @@ -9,17 +9,23 @@ interface DropdownListProps { menuButtonClassName?: string; } -const DropdownList: React.FC = ({ children, menuContent, className, menuContentClassName, menuButtonClassName }) => ( +const DropdownList: React.FC = ({ + children, + menuContent, + className, + menuContentClassName, + menuButtonClassName, +}) => ( - - {children} - - - {menuContent.map((menuItemContent, index) => - - {menuItemContent} - - )} + {children} + + {menuContent.map((menuItemContent, index) => ( + {menuItemContent} + ))} ); diff --git a/components/molecules/FavoriteRepos/favorite-repos.tsx b/components/molecules/FavoriteRepos/favorite-repos.tsx index 2565ab6d71..af724dce70 100644 --- a/components/molecules/FavoriteRepos/favorite-repos.tsx +++ b/components/molecules/FavoriteRepos/favorite-repos.tsx @@ -5,17 +5,21 @@ interface FavoriteReposProps { repos: FavoriteRepoCardProps[]; } -const FavoriteRepos = ({repos}: FavoriteReposProps) => { - +const FavoriteRepos = ({ repos }: FavoriteReposProps) => { return (
Favorite Repositories
- { - repos.map((repo) => ( - - )) - } + {repos.map((repo) => ( + + ))}
); diff --git a/components/molecules/FilterCardSelect/filter-card-select.tsx b/components/molecules/FilterCardSelect/filter-card-select.tsx index f26fae35f5..bddf767938 100644 --- a/components/molecules/FilterCardSelect/filter-card-select.tsx +++ b/components/molecules/FilterCardSelect/filter-card-select.tsx @@ -19,27 +19,27 @@ interface FilterCardSelectProps { const icons = { topic: { src: hashIcon.src, - alt: "Topic" + alt: "Topic", }, org: { src: orgIcon.src, - alt: "Organization" + alt: "Organization", }, contributor: { src: personIcon.src, - alt: "Contributor" + alt: "Contributor", }, repo: { src: repoIcon.src, - alt: "Repository" - } + alt: "Repository", + }, }; const FilterCardSelect: React.FC = ({ selected: filterName, icon = "topic", options, - handleFilterClick + handleFilterClick, }) => { return (