diff --git a/src/views/components/common/Button/Button.tsx b/src/views/components/common/Button/Button.tsx index 7091f90b2..b843acd2f 100644 --- a/src/views/components/common/Button/Button.tsx +++ b/src/views/components/common/Button/Button.tsx @@ -3,6 +3,7 @@ import { getThemeColorHexByName, getThemeColorRgbByName } from '@shared/util/the import Text from '@views/components/common/Text/Text'; import clsx from 'clsx'; import React from 'react'; +import { satisfies } from 'semver'; import type IconComponent from '~icons/material-symbols'; @@ -44,7 +45,7 @@ export function Button({ ...style, color: colorHex, backgroundColor: `rgb(${colorRgb} / var(--un-bg-opacity)`, - } as React.CSSProperties + } satisfies React.CSSProperties } className={clsx( 'btn', diff --git a/src/views/components/common/Chip/Chip.tsx b/src/views/components/common/Chip/Chip.tsx index c2c23d319..f21e20c3e 100644 --- a/src/views/components/common/Chip/Chip.tsx +++ b/src/views/components/common/Chip/Chip.tsx @@ -5,14 +5,14 @@ import React from 'react'; * A type that represents the flags that a course can have. */ export type Flag = 'WR' | 'QR' | 'GC' | 'CD' | 'E' | 'II'; -export const flagMap: Record = { +export const flagMap = { Writing: 'WR', 'Quantitative Reasoning': 'QR', 'Global Cultures': 'GC', 'Cultural Diversity in the United States': 'CD', Ethics: 'E', 'Independent Inquiry': 'II', -}; +} as const satisfies Record; interface Props { label: Flag; diff --git a/src/views/components/common/CourseCellColorPicker/ColorPatch.tsx b/src/views/components/common/CourseCellColorPicker/ColorPatch.tsx index d599a4d48..51619fcc4 100644 --- a/src/views/components/common/CourseCellColorPicker/ColorPatch.tsx +++ b/src/views/components/common/CourseCellColorPicker/ColorPatch.tsx @@ -1,6 +1,6 @@ +import type { ThemeColor } from '@shared/util/themeColors'; import { Button } from '@views/components/common/Button/Button'; import React from 'react'; -import type { ThemeColor } from 'src/shared/util/themeColors'; import CheckIcon from '~icons/material-symbols/check'; @@ -24,12 +24,12 @@ interface ColorPatchProps { * is passed from the parent and updates the necessary parent state when this color patch is selected. * @returns {JSX.Element} - the color patch component */ -const ColorPatch: React.FC = ({ +export default function ColorPatch({ color, index, selectedColor, handleSetSelectedColorPatch, -}: ColorPatchProps): JSX.Element => { +}: ColorPatchProps): JSX.Element { const isSelected = selectedColor === index; const handleClick = () => { handleSetSelectedColorPatch(isSelected ? -1 : index); @@ -45,6 +45,4 @@ const ColorPatch: React.FC = ({ {isSelected && } ); -}; - -export default ColorPatch; +} diff --git a/src/views/components/common/CourseCellColorPicker/CourseCellColorPicker.tsx b/src/views/components/common/CourseCellColorPicker/CourseCellColorPicker.tsx index adbed697d..33b16badc 100644 --- a/src/views/components/common/CourseCellColorPicker/CourseCellColorPicker.tsx +++ b/src/views/components/common/CourseCellColorPicker/CourseCellColorPicker.tsx @@ -1,7 +1,7 @@ +import type { ThemeColor } from '@shared/util/themeColors'; +import { getThemeColorHexByName } from '@shared/util/themeColors'; import { Button } from '@views/components/common/Button/Button'; import React from 'react'; -import type { ThemeColor } from 'src/shared/util/themeColors'; -import { getThemeColorHexByName } from 'src/shared/util/themeColors'; import InvertColorsOffIcon from '~icons/material-symbols/invert-colors-off'; @@ -16,228 +16,229 @@ interface Color { shades: ThemeColor[]; } -const colorPatches: Color[] = [ - { - baseColor: 'palette-slateBase', - shades: [ - 'palette-slate200', - 'palette-slate300', - 'palette-slate400', - 'palette-slateBase', - 'palette-slate600', - 'palette-slate700', - ], - }, - { - baseColor: 'palette-grayBase', - shades: [ - 'palette-gray200', - 'palette-gray300', - 'palette-gray400', - 'palette-grayBase', - 'palette-gray600', - 'palette-gray700', - ], - }, - { - baseColor: 'palette-stoneBase', - shades: [ - 'palette-stone200', - 'palette-stone300', - 'palette-stone400', - 'palette-stoneBase', - 'palette-stone600', - 'palette-stone700', - ], - }, - { - baseColor: 'palette-redBase', - shades: [ - 'palette-red200', - 'palette-red300', - 'palette-red400', - 'palette-redBase', - 'palette-red600', - 'palette-red700', - ], - }, - { - baseColor: 'palette-orangeBase', - shades: [ - 'palette-orange200', - 'palette-orange300', - 'palette-orange400', - 'palette-orangeBase', - 'palette-orange600', - 'palette-orange700', - ], - }, - { - baseColor: 'palette-amberBase', - shades: [ - 'palette-amber200', - 'palette-amber300', - 'palette-amber400', - 'palette-amberBase', - 'palette-amber600', - 'palette-amber700', - ], - }, - { - baseColor: 'palette-yellowBase', - shades: [ - 'palette-yellow200', - 'palette-yellow300', - 'palette-yellow400', - 'palette-yellowBase', - 'palette-yellow600', - 'palette-yellow700', - ], - }, - { - baseColor: 'palette-limeBase', - shades: [ - 'palette-lime200', - 'palette-lime300', - 'palette-lime400', - 'palette-limeBase', - 'palette-lime600', - 'palette-lime700', - ], - }, - { - baseColor: 'palette-greenBase', - shades: [ - 'palette-green200', - 'palette-green300', - 'palette-green400', - 'palette-greenBase', - 'palette-green600', - 'palette-green700', - ], - }, - { - baseColor: 'palette-emeraldBase', - shades: [ - 'palette-emerald200', - 'palette-emerald300', - 'palette-emerald400', - 'palette-emeraldBase', - 'palette-emerald600', - 'palette-emerald700', - ], - }, - { - baseColor: 'palette-tealBase', - shades: [ - 'palette-teal200', - 'palette-teal300', - 'palette-teal400', - 'palette-tealBase', - 'palette-teal600', - 'palette-teal700', - ], - }, - { - baseColor: 'palette-cyanBase', - shades: [ - 'palette-cyan200', - 'palette-cyan300', - 'palette-cyan400', - 'palette-cyanBase', - 'palette-cyan600', - 'palette-cyan700', - ], - }, - { - baseColor: 'palette-skyBase', - shades: [ - 'palette-sky200', - 'palette-sky300', - 'palette-sky400', - 'palette-skyBase', - 'palette-sky600', - 'palette-sky700', - ], - }, - { - baseColor: 'palette-blueBase', - shades: [ - 'palette-blue200', - 'palette-blue300', - 'palette-blue400', - 'palette-blueBase', - 'palette-blue600', - 'palette-blue700', - ], - }, - { - baseColor: 'palette-indigoBase', - shades: [ - 'palette-indigo200', - 'palette-indigo300', - 'palette-indigo400', - 'palette-indigoBase', - 'palette-indigo600', - 'palette-indigo700', - ], - }, - { - baseColor: 'palette-violetBase', - shades: [ - 'palette-violet200', - 'palette-violet300', - 'palette-violet400', - 'palette-violetBase', - 'palette-violet600', - 'palette-violet700', - ], - }, - { - baseColor: 'palette-purpleBase', - shades: [ - 'palette-purple200', - 'palette-purple300', - 'palette-purple400', - 'palette-purpleBase', - 'palette-purple600', - 'palette-purple700', - ], - }, - { - baseColor: 'palette-fuschiaBase', - shades: [ - 'palette-fuschia200', - 'palette-fuschia300', - 'palette-fuschia400', - 'palette-fuschiaBase', - 'palette-fuschia600', - 'palette-fuschia700', - ], - }, - { - baseColor: 'palette-pinkBase', - shades: [ - 'palette-pink200', - 'palette-pink300', - 'palette-pink400', - 'palette-pinkBase', - 'palette-pink600', - 'palette-pink700', - ], - }, - { - baseColor: 'palette-roseBase', - shades: [ - 'palette-rose200', - 'palette-rose300', - 'palette-rose400', - 'palette-roseBase', - 'palette-rose600', - 'palette-rose700', - ], - }, -]; +// TODO: Replace with UnoCSS theme +// const colorPatches: Color[] = [ +// { +// baseColor: 'palette-slateBase', +// shades: [ +// 'palette-slate200', +// 'palette-slate300', +// 'palette-slate400', +// 'palette-slateBase', +// 'palette-slate600', +// 'palette-slate700', +// ], +// }, +// { +// baseColor: 'palette-grayBase', +// shades: [ +// 'palette-gray200', +// 'palette-gray300', +// 'palette-gray400', +// 'palette-grayBase', +// 'palette-gray600', +// 'palette-gray700', +// ], +// }, +// { +// baseColor: 'palette-stoneBase', +// shades: [ +// 'palette-stone200', +// 'palette-stone300', +// 'palette-stone400', +// 'palette-stoneBase', +// 'palette-stone600', +// 'palette-stone700', +// ], +// }, +// { +// baseColor: 'palette-redBase', +// shades: [ +// 'palette-red200', +// 'palette-red300', +// 'palette-red400', +// 'palette-redBase', +// 'palette-red600', +// 'palette-red700', +// ], +// }, +// { +// baseColor: 'palette-orangeBase', +// shades: [ +// 'palette-orange200', +// 'palette-orange300', +// 'palette-orange400', +// 'palette-orangeBase', +// 'palette-orange600', +// 'palette-orange700', +// ], +// }, +// { +// baseColor: 'palette-amberBase', +// shades: [ +// 'palette-amber200', +// 'palette-amber300', +// 'palette-amber400', +// 'palette-amberBase', +// 'palette-amber600', +// 'palette-amber700', +// ], +// }, +// { +// baseColor: 'palette-yellowBase', +// shades: [ +// 'palette-yellow200', +// 'palette-yellow300', +// 'palette-yellow400', +// 'palette-yellowBase', +// 'palette-yellow600', +// 'palette-yellow700', +// ], +// }, +// { +// baseColor: 'palette-limeBase', +// shades: [ +// 'palette-lime200', +// 'palette-lime300', +// 'palette-lime400', +// 'palette-limeBase', +// 'palette-lime600', +// 'palette-lime700', +// ], +// }, +// { +// baseColor: 'palette-greenBase', +// shades: [ +// 'palette-green200', +// 'palette-green300', +// 'palette-green400', +// 'palette-greenBase', +// 'palette-green600', +// 'palette-green700', +// ], +// }, +// { +// baseColor: 'palette-emeraldBase', +// shades: [ +// 'palette-emerald200', +// 'palette-emerald300', +// 'palette-emerald400', +// 'palette-emeraldBase', +// 'palette-emerald600', +// 'palette-emerald700', +// ], +// }, +// { +// baseColor: 'palette-tealBase', +// shades: [ +// 'palette-teal200', +// 'palette-teal300', +// 'palette-teal400', +// 'palette-tealBase', +// 'palette-teal600', +// 'palette-teal700', +// ], +// }, +// { +// baseColor: 'palette-cyanBase', +// shades: [ +// 'palette-cyan200', +// 'palette-cyan300', +// 'palette-cyan400', +// 'palette-cyanBase', +// 'palette-cyan600', +// 'palette-cyan700', +// ], +// }, +// { +// baseColor: 'palette-skyBase', +// shades: [ +// 'palette-sky200', +// 'palette-sky300', +// 'palette-sky400', +// 'palette-skyBase', +// 'palette-sky600', +// 'palette-sky700', +// ], +// }, +// { +// baseColor: 'palette-blueBase', +// shades: [ +// 'palette-blue200', +// 'palette-blue300', +// 'palette-blue400', +// 'palette-blueBase', +// 'palette-blue600', +// 'palette-blue700', +// ], +// }, +// { +// baseColor: 'palette-indigoBase', +// shades: [ +// 'palette-indigo200', +// 'palette-indigo300', +// 'palette-indigo400', +// 'palette-indigoBase', +// 'palette-indigo600', +// 'palette-indigo700', +// ], +// }, +// { +// baseColor: 'palette-violetBase', +// shades: [ +// 'palette-violet200', +// 'palette-violet300', +// 'palette-violet400', +// 'palette-violetBase', +// 'palette-violet600', +// 'palette-violet700', +// ], +// }, +// { +// baseColor: 'palette-purpleBase', +// shades: [ +// 'palette-purple200', +// 'palette-purple300', +// 'palette-purple400', +// 'palette-purpleBase', +// 'palette-purple600', +// 'palette-purple700', +// ], +// }, +// { +// baseColor: 'palette-fuschiaBase', +// shades: [ +// 'palette-fuschia200', +// 'palette-fuschia300', +// 'palette-fuschia400', +// 'palette-fuschiaBase', +// 'palette-fuschia600', +// 'palette-fuschia700', +// ], +// }, +// { +// baseColor: 'palette-pinkBase', +// shades: [ +// 'palette-pink200', +// 'palette-pink300', +// 'palette-pink400', +// 'palette-pinkBase', +// 'palette-pink600', +// 'palette-pink700', +// ], +// }, +// { +// baseColor: 'palette-roseBase', +// shades: [ +// 'palette-rose200', +// 'palette-rose300', +// 'palette-rose400', +// 'palette-roseBase', +// 'palette-rose600', +// 'palette-rose700', +// ], +// }, +// ]; const hexCodeToBaseColorPatchIndex = new Map( colorPatches.map((color: Color, index: number) => [getThemeColorHexByName(color.baseColor), index]) @@ -278,9 +279,9 @@ export interface CourseCellColorPickerProps { * This component is available when a user hovers over a course cell in their calendar to * color for the course cell. The user can set any valid hex color they want. */ -const CourseCellColorPicker: React.FC = ({ +export default function CourseCellColorPicker({ setSelectedColor: setFinalColor, -}: CourseCellColorPickerProps): JSX.Element => { +}: CourseCellColorPickerProps): JSX.Element { const [selectedBaseColorPatch, setSelectedBaseColorPatch] = React.useState(-1); const [selectedShadeColorPatch, setSelectShadeColorPatch] = React.useState(-1); const [hexCode, setHexCode] = React.useState(''); @@ -387,7 +388,4 @@ const CourseCellColorPicker: React.FC = ({ /> )} - ); -}; - -export default CourseCellColorPicker; +} \ No newline at end of file diff --git a/src/views/components/common/CourseCellColorPicker/DivWrapper.tsx b/src/views/components/common/CourseCellColorPicker/DivWrapper.tsx index f5fc8e8b2..96060c8a3 100644 --- a/src/views/components/common/CourseCellColorPicker/DivWrapper.tsx +++ b/src/views/components/common/CourseCellColorPicker/DivWrapper.tsx @@ -15,8 +15,6 @@ interface ItemWrapperProps { * @param {React.ReactNode} props.children - the children to be wrapped in the div * @returns {JSX.Element} - the div wrapper component */ -const DivWrapper: React.FC = ({ children }: ItemWrapperProps) => ( -
{children}
-); - -export default DivWrapper; +export default function DivWrapper({ children }: ItemWrapperProps): JSX.Element { + return
{children}
; +} diff --git a/src/views/components/common/CourseCellColorPicker/HexColorEditor.tsx b/src/views/components/common/CourseCellColorPicker/HexColorEditor.tsx index 02c66c3f4..a815329ce 100644 --- a/src/views/components/common/CourseCellColorPicker/HexColorEditor.tsx +++ b/src/views/components/common/CourseCellColorPicker/HexColorEditor.tsx @@ -1,5 +1,5 @@ +import { getThemeColorHexByName } from '@shared/util/themeColors'; import React from 'react'; -import { getThemeColorHexByName } from 'src/shared/util/themeColors'; import TagIcon from '~icons/material-symbols/tag'; @@ -20,7 +20,7 @@ export interface HexColorEditorProps { * @param {React.Dispatch>} props.setHexCode - set state fn to control the hex color code from parent * @returns {JSX.Element} - the hex color editor component */ -const HexColorEditor: React.FC = ({ hexCode, setHexCode }: HexColorEditorProps): JSX.Element => { +export default function HexColorEditor({ hexCode, setHexCode }: HexColorEditorProps): JSX.Element { const baseColor = React.useMemo(() => getThemeColorHexByName('ut-gray'), []); const previewColor = hexCode.length === 6 ? `#${hexCode}` : baseColor; @@ -43,6 +43,4 @@ const HexColorEditor: React.FC = ({ hexCode, setHexCode }: ); -}; - -export default HexColorEditor; +} diff --git a/src/views/components/common/CourseCellColorPicker/HuePicker.tsx b/src/views/components/common/CourseCellColorPicker/HuePicker.tsx index a975fe33b..e89abc616 100644 --- a/src/views/components/common/CourseCellColorPicker/HuePicker.tsx +++ b/src/views/components/common/CourseCellColorPicker/HuePicker.tsx @@ -1,5 +1,5 @@ +import type { ThemeColor } from '@shared/util/themeColors'; import React from 'react'; -import type { ThemeColor } from 'src/shared/util/themeColors'; import ColorPatch from './ColorPatch'; import DivWrapper from './DivWrapper'; @@ -22,11 +22,7 @@ interface HuePickerProps { * @param {React.Dispatch>} props.setSelectedColor - set state fn to control the selected color patch from parent * @returns {JSX.Element} - the hue picker component */ -const HuePicker: React.FC = ({ - shades, - selectedColor, - setSelectedColor, -}: HuePickerProps): JSX.Element => { +export default function HuePicker({ shades, selectedColor, setSelectedColor }: HuePickerProps): JSX.Element { const numColumns = 6; return (
@@ -42,6 +38,4 @@ const HuePicker: React.FC = ({ ))}
); -}; - -export default HuePicker; +} diff --git a/src/views/components/common/Divider/Divider.tsx b/src/views/components/common/Divider/Divider.tsx index cbebca7e3..c4bc94f41 100644 --- a/src/views/components/common/Divider/Divider.tsx +++ b/src/views/components/common/Divider/Divider.tsx @@ -1,4 +1,3 @@ -import type { Color } from '@views/styles/colors.module.scss'; import clsx from 'clsx'; import React from 'react'; @@ -32,7 +31,7 @@ export type DividerProps = { * * ``` */ -export default function Divider({ className, testId, size, orientation }: DividerProps) { +export default function Divider({ className, testId, size, orientation }: DividerProps): JSX.Element { const style: React.CSSProperties = orientation === 'horizontal' ? { width: size, borderBottomWidth: '1px' } diff --git a/src/views/components/common/Dropdown/Dropdown.tsx b/src/views/components/common/Dropdown/Dropdown.tsx index e357f009e..f19e2387a 100644 --- a/src/views/components/common/Dropdown/Dropdown.tsx +++ b/src/views/components/common/Dropdown/Dropdown.tsx @@ -32,6 +32,7 @@ export default function Dropdown(props: Props) { const schedules = props.dummySchedules; if (schedules == null) { + // TODO // if no dummy values passed in // useSchedules hook here } @@ -40,6 +41,7 @@ export default function Dropdown(props: Props) { toggle(!expanded); }; + // TODO // WIP function to swap schedules. Prefer to use the hook when in production const switchSchedule = (index: number) => { const scheduleToSwitchTo = schedules[index]; @@ -91,12 +93,8 @@ export default function Dropdown(props: Props) { leave='transition duration-75 ease-out' leaveFrom='transform scale-100 opacity-100' leaveTo='transform scale-95 opacity-0' - beforeEnter={() => { - toggleSwitch(); - }} - afterLeave={() => { - toggleSwitch(); - }} + beforeEnter={toggleSwitch} + afterLeave={toggleSwitch} > ) { +export default function ExtensionRoot(props: React.PropsWithChildren): JSX.Element { return (
{props.children} diff --git a/src/views/components/common/Icon/Icon.tsx b/src/views/components/common/Icon/Icon.tsx index e9b9e4faf..b49ed42d0 100644 --- a/src/views/components/common/Icon/Icon.tsx +++ b/src/views/components/common/Icon/Icon.tsx @@ -9,7 +9,7 @@ import styles from './Icon.module.scss'; import type { MaterialIconCode } from './MaterialIcons'; /** - * + * Props for the Icon component. */ export type Props = { name: MaterialIconCode; @@ -27,7 +27,7 @@ export type Props = { * This is a reusable Icon component that uses the Material Icons Round font internally * You can find the list of icons here: https://fonts.google.com/icons?selected=Material+Icons+Round */ -export default function Icon(props: Props) { +export default function Icon(props: Props): JSX.Element { const style = props.style || {}; style.color ??= colors?.[props.color ?? 'charcoal']; diff --git a/src/views/components/common/InfoCard/InfoCard.tsx b/src/views/components/common/InfoCard/InfoCard.tsx index 6c80497a1..fae144992 100644 --- a/src/views/components/common/InfoCard/InfoCard.tsx +++ b/src/views/components/common/InfoCard/InfoCard.tsx @@ -10,7 +10,7 @@ interface Props { * A maybe reusable InfoCard component that follows the design system of the extension. * @returns */ -export function InfoCard({ titleText, bodyText }: React.PropsWithChildren): JSX.Element { +export default function InfoCard({ titleText, bodyText }: React.PropsWithChildren): JSX.Element { return (
& { /** * A reusable Text component with props that build on top of the design system for the extension */ -export default function Link(props: PropsWithChildren) { +export default function Link(props: PropsWithChildren): JSX.Element { let passedProps = { ...props, }; diff --git a/src/views/components/common/List/List.tsx b/src/views/components/common/List/List.tsx index 8c1675416..1f738ec8b 100644 --- a/src/views/components/common/List/List.tsx +++ b/src/views/components/common/List/List.tsx @@ -1,6 +1,7 @@ import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd'; import type { ReactElement } from 'react'; import React, { useCallback, useEffect, useState } from 'react'; +import { satisfies } from 'semver'; /* * Ctrl + f dragHandleProps on PopupCourseBlock.tsx for example implementation of drag handle (two lines of code) @@ -11,7 +12,7 @@ import React, { useCallback, useEffect, useState } from 'react'; * Props for the List component. */ export interface ListProps { - draggableElements: any[]; // Will later define draggableElements based on what types + draggableElements: any[]; // TODO: Will later define draggableElements based on what types // of components are draggable. itemHeight: number; listHeight: number; @@ -82,7 +83,13 @@ const Row: React.FC = React.memo(({ data: { items, gap }, index, style * @example * */ -const List: React.FC = ({ draggableElements, itemHeight, listHeight, listWidth, gap = 12 }: ListProps) => { +export default function List({ + draggableElements, + itemHeight, + listHeight, + listWidth, + gap = 12, +}: ListProps): JSX.Element { const [items, setItems] = useState(() => initial(0, draggableElements)); useEffect(() => { @@ -105,7 +112,7 @@ const List: React.FC = ({ draggableElements, itemHeight, listHeight, const newItems = reorder(items, result.source.index, result.destination.index); - setItems(newItems as { id: string; content: React.ReactElement }[]); + setItems(newItems satisfies { id: string; content: React.ReactElement }[]); }, [items] ); @@ -170,6 +177,4 @@ const List: React.FC = ({ draggableElements, itemHeight, listHeight,
); -}; - -export default List; +} diff --git a/src/views/components/common/Popup/Popup.tsx b/src/views/components/common/Popup/Popup.tsx index 99654c76c..948ecf2b1 100644 --- a/src/views/components/common/Popup/Popup.tsx +++ b/src/views/components/common/Popup/Popup.tsx @@ -15,9 +15,15 @@ interface Props { /** * A reusable popup component that can be used to display content on the page - * @returns */ -export default function Popup({ onClose, children, className, style, testId, overlay }: PropsWithChildren) { +export default function Popup({ + onClose, + children, + className, + style, + testId, + overlay, +}: PropsWithChildren): JSX.Element { const containerRef = React.useRef(null); const bodyRef = React.useRef(null); diff --git a/src/views/components/common/ScheduleListItem/ScheduleListItem.tsx b/src/views/components/common/ScheduleListItem/ScheduleListItem.tsx index 4889578a6..3a7d9c5dd 100644 --- a/src/views/components/common/ScheduleListItem/ScheduleListItem.tsx +++ b/src/views/components/common/ScheduleListItem/ScheduleListItem.tsx @@ -18,11 +18,9 @@ export type Props = { /** * This is a reusable dropdown component that can be used to toggle the visiblity of information */ -export default function ScheduleListItem(props: Props) { - const { dragHandleProps, onClick } = props; - +export default function ScheduleListItem({ style, active, name, dragHandleProps, onClick }: Props): JSX.Element { return ( -
+
  • - {props.name} + {name}
    • diff --git a/src/views/components/common/Spinner/Spinner.tsx b/src/views/components/common/Spinner/Spinner.tsx index e17b90352..9421bfd8b 100644 --- a/src/views/components/common/Spinner/Spinner.tsx +++ b/src/views/components/common/Spinner/Spinner.tsx @@ -12,6 +12,6 @@ type Props = { /** * A simple spinner component that can be used to indicate loading. */ -export default function Spinner({ className, testId, style }: Props) { +export default function Spinner({ className, testId, style }: Props): JSX.Element { return
    ; } diff --git a/src/views/components/common/Text/Text.tsx b/src/views/components/common/Text/Text.tsx index 5e738fe4c..16d089e86 100644 --- a/src/views/components/common/Text/Text.tsx +++ b/src/views/components/common/Text/Text.tsx @@ -5,7 +5,7 @@ import React from 'react'; import styles from './Text.module.scss'; /** - * + * Props for the Text component. */ export type TextProps = { variant?: Variant; @@ -21,7 +21,7 @@ type Variant = (typeof variants)[number]; /** * A reusable Text component with props that build on top of the design system for the extension */ -export default function Text({ variant, as, className, ...props }: PropsWithChildren) { +export default function Text({ variant, as, className, ...props }: PropsWithChildren): JSX.Element { const mergedClassName = clsx(styles.text, styles[variant], className); if (as === 'div') return
    ;