fix type errors

nulogy · Sep 4, 2024 · 3493f05 · 3493f05
1 parent e36157c
commit 3493f05
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 81 deletions.
diff --git a/src/BrandedNavBar/MobileMenu.tsx b/src/BrandedNavBar/MobileMenu.tsx
@@ -8,7 +8,6 @@ import { BrandingText } from "../Branding";
 import { DropdownLink, DropdownText } from "../DropdownMenu";
 import { Icon } from "../Icon";
 import { Link } from "../Link";
-import { LinkProps } from "../Link/Link";
 import { addStyledProps } from "../StyledProps";
 import NulogyLogo from "./NulogyLogo";
 import { TriggerFunctionProps } from "./TriggerFunctionProps";
@@ -163,7 +162,7 @@ const getSubMenuHeading = (layer, name) =>
 type ThemeColorObject = {
   textColor?: string;
   background?: string;
-  logoColor?: string;
+  logoColor?: "white" | "blue";
 };
 
 type MenuItem = {
@@ -237,7 +236,7 @@ const BaseMobileMenu: React.FC<React.PropsWithChildren<BaseMobileMenuProps>> = (
 }) => (
   <Nav backgroundColor={themeColorObject && themeColorObject.background} {...props}>
     <BrandingWrap>
-      <BrandingText logoColor={themeColorObject && themeColorObject.logoColor} />
+      <BrandingText logoColor={themeColorObject.logoColor} />
     </BrandingWrap>
     <Menu>
       {menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject)}

diff --git a/src/Checkbox/CheckboxGroup.tsx b/src/Checkbox/CheckboxGroup.tsx
@@ -6,6 +6,7 @@ import { Fieldset } from "../Form";
 import Checkbox from "./Checkbox";
 
 interface CheckboxGroupProps {
+  children: React.ReactNode;
   errorMessage?: string;
   errorList?: string[];
   labelText: string;
@@ -21,6 +22,32 @@ interface CheckboxGroupProps {
   disabled?: boolean;
 }
 
+export default function CheckboxGroup({
+  className,
+  id,
+  labelText,
+  helpText,
+  requirementText,
+  disabled = false,
+  errorMessage,
+  errorList,
+  ...props
+}: CheckboxGroupProps) {
+  const otherProps = { ...props, errorMessage, errorList, disabled };
+
+  return (
+    <Fieldset className={className} id={id} hasHelpText={!!helpText}>
+      <Legend>
+        <LabelText>{labelText}</LabelText>
+        {requirementText && <RequirementText>{requirementText}</RequirementText>}
+      </Legend>
+      {helpText && <HelpText>{helpText}</HelpText>}
+      {getCheckboxButtons(otherProps)}
+      <InlineValidation mt="x1" errorMessage={errorMessage} errorList={errorList} />
+    </Fieldset>
+  );
+}
+
 const getCheckboxButtons = (props) => {
   const checkboxButtons = React.Children.map(props.children, (checkbox) => {
     const { value, disabled, required, onChange, ...checkboxProps } = checkbox.props;
@@ -41,7 +68,7 @@ const getCheckboxButtons = (props) => {
   return checkboxButtons;
 };
 
-const LabelText = styled.span<any>(({ theme }) => ({
+const LabelText = styled.span(({ theme }) => ({
   fontSize: theme.fontSizes.small,
   fontWeight: theme.fontWeights.bold,
   lineHeight: theme.lineHeights.smallTextBase,
@@ -50,30 +77,3 @@ const LabelText = styled.span<any>(({ theme }) => ({
 const Legend = styled.legend(({ theme }) => ({
   marginBottom: theme.space.x1,
 }));
-
-const CheckboxGroup = ({
-  className,
-  id,
-  errorMessage,
-  errorList,
-  labelText,
-  helpText,
-  requirementText,
-  disabled = false,
-  ...props
-}: CheckboxGroupProps) => {
-  const otherProps = { ...props, errorMessage, errorList };
-  return (
-    <Fieldset className={className} id={id} hasHelpText={!!helpText}>
-      <Legend>
-        <LabelText>{labelText}</LabelText>
-        {requirementText && <RequirementText>{requirementText}</RequirementText>}
-      </Legend>
-      {helpText && <HelpText>{helpText}</HelpText>}
-      {getCheckboxButtons(otherProps)}
-      <InlineValidation mt="x1" errorMessage={errorMessage} errorList={errorList} />
-    </Fieldset>
-  );
-};
-
-export default CheckboxGroup;
diff --git a/src/FieldLabel/FieldLabel.tsx b/src/FieldLabel/FieldLabel.tsx
@@ -5,15 +5,9 @@ import HelpText from "./HelpText";
 import Label from "./Label";
 import LabelText from "./LabelText";
 import RequirementText from "./RequirementText";
+import { FieldLabelProps } from "./FieldLabel.type";
 import FramedIcon from "./FramedIcon";
 
-export interface FieldLabelProps extends LabelProps {
-  hint?: string;
-  labelText: string;
-  requirementText?: string;
-  helpText?: React.ReactNode;
-}
-
 export default function FieldLabel({
   labelText,
   requirementText,

diff --git a/src/Popper/Popper.tsx b/src/Popper/Popper.tsx
@@ -14,6 +14,7 @@ const makeArray = (children) => {
 const wrapInFunction = (x: unknown) => (typeof x === "function" ? x : () => x);
 
 type PopperProps = {
+  children: React.ReactNode;
   popperPlacement?: string;
   defaultOpen?: boolean;
   showDelay?: string | number;

diff --git a/src/Radio/RadioGroup.tsx b/src/Radio/RadioGroup.tsx
@@ -1,38 +1,11 @@
 import React, { useContext } from "react";
 import { CSSObject, ThemeContext } from "styled-components";
-
 import { HelpText, RequirementText } from "../FieldLabel";
 import { InlineValidation } from "../Validation";
 import { Fieldset } from "../Form";
 import { DefaultNDSThemeType } from "../theme.type";
 import Radio from "./Radio";
 
-const labelTextStyles = (theme: DefaultNDSThemeType): CSSObject => ({
-  fontSize: theme.fontSizes.small,
-  fontWeight: Number(theme.fontWeights.bold),
-  lineHeight: theme.lineHeights.smallTextBase,
-});
-
-const getRadioButtons = (props: any) => {
-  const radioButtons = React.Children.map(props.children, (radio) => {
-    const { value, disabled, required, onChange, ...radioProps } = radio.props;
-    return (
-      <Radio
-        {...radioProps}
-        value={value}
-        disabled={props.disabled || disabled}
-        error={!!(props.errorMessage || props.errorList)}
-        required={props.required || required}
-        name={props.name}
-        defaultChecked={value === props.defaultValue ? true : undefined}
-        checked={props.checkedValue && value === props.checkedValue}
-        onChange={props.onChange || onChange}
-      />
-    );
-  });
-  return radioButtons;
-};
-
 interface RadioGroupProps {
   className?: string;
   id?: string;
@@ -45,9 +18,13 @@ interface RadioGroupProps {
   children?: any;
   name?: string;
   disabled?: boolean;
+  defaultValue?: string;
+  checkedValue?: string;
+  default?: boolean;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const RadioGroup = ({
+export default function RadioGroup({
   className,
   id,
   errorMessage,
@@ -56,7 +33,7 @@ const RadioGroup = ({
   helpText,
   requirementText,
   ...props
-}: RadioGroupProps) => {
+}: RadioGroupProps) {
   const otherProps = { ...props, errorMessage, errorList };
   const themeContext = useContext(ThemeContext);
 
@@ -71,6 +48,31 @@ const RadioGroup = ({
       <InlineValidation mt="x1" errorMessage={errorMessage} errorList={errorList} />
     </Fieldset>
   );
-};
+}
+
+const labelTextStyles = (theme: DefaultNDSThemeType): CSSObject => ({
+  fontSize: theme.fontSizes.small,
+  fontWeight: Number(theme.fontWeights.bold),
+  lineHeight: theme.lineHeights.smallTextBase,
+});
 
-export default RadioGroup;
+const getRadioButtons = (props: any) => {
+  const radioButtons = React.Children.map(props.children, (radio) => {
+    const { value, disabled, required, onChange, ...radioProps } = radio.props;
+    return (
+      <Radio
+        {...radioProps}
+        value={value}
+        disabled={props.disabled || disabled}
+        error={!!(props.errorMessage || props.errorList)}
+        required={props.required || required}
+        name={props.name}
+        defaultChecked={value === props.defaultValue ? true : undefined}
+        checked={props.checkedValue && value === props.checkedValue}
+        onChange={props.onChange || onChange}
+      />
+    );
+  });
+
+  return radioButtons;
+};
diff --git a/src/Table/SortingColumnHeader.tsx b/src/Table/SortingColumnHeader.tsx
@@ -12,15 +12,16 @@ interface SortingColumnHeaderProps {
   active?: boolean;
 }
 
-const SortingColumnHeader = ({
+function SortingColumnHeader({
   onChange,
   label,
   ariaLabel,
   ascending = false,
   active = false,
-}: SortingColumnHeaderProps) => {
+}: SortingColumnHeaderProps) {
   const { t } = useTranslation();
   const defaultAriaLabel = ascending ? t("sort descending") : t("sort ascending");
+
   return (
     <Flex alignItems="center">
       <Text mr="x1">{label}</Text>
@@ -33,6 +34,6 @@ const SortingColumnHeader = ({
       />
     </Flex>
   );
-};
+}
 
 export default SortingColumnHeader;
diff --git a/src/Table/StatefulTable.tsx b/src/Table/StatefulTable.tsx
@@ -1,9 +1,12 @@
 import React, { Component } from "react";
+import propTypes from "@styled-system/prop-types";
+import PropTypes from "prop-types";
 import { Pagination } from "../Pagination";
 import { getSubset } from "../utils/subset";
 import BaseTable, { BaseTableProps } from "./BaseTable";
 import { addExpandableControl } from "./addExpandableControl";
 import { addSelectableControl } from "./addSelectableControl";
+import { rowsPropType } from "./Table.types";
 
 export type StatefulTableProps<ColumnMetaData> = BaseTableProps<ColumnMetaData> & {
   selectedRows?: string[];
@@ -36,9 +39,20 @@ type StatefulTableState = {
   currentPage: number;
   paginatedRows: any;
 };
+
 class StatefulTable<ColumnMetaData> extends Component<StatefulTableProps<ColumnMetaData>, StatefulTableState> {
   static defaultProps = {
-    ...BaseTable.defaultProps,
+    noRowsContent: "No records have been created for this table.",
+    keyField: "id",
+    id: undefined,
+    loading: false,
+    footerRows: [],
+    rowHovers: true,
+    compact: false,
+    className: undefined,
+    stickyHeader: false,
+    onRowMouseEnter: () => {},
+    onRowMouseLeave: () => {},
     hasSelectableRows: false,
     selectedRows: [],
     isHeaderSelected: false,
@@ -88,7 +102,7 @@ class StatefulTable<ColumnMetaData> extends Component<StatefulTableProps<ColumnM
       {
         expandedRows: newExpandedRows,
       },
-      onRowExpansionChange(newExpandedRows),
+      onRowExpansionChange(newExpandedRows)
     );
   };
   removeRowFromExpandedRows = (rowKeyToRemove) => {
@@ -118,7 +132,7 @@ class StatefulTable<ColumnMetaData> extends Component<StatefulTableProps<ColumnM
         selectedRows: newRowSelections,
         isHeaderSelected: this.areAllRowsSelectedOnPage(newRowSelections, currentPage),
       },
-      this.onRowSelectionChangeHandler,
+      this.onRowSelectionChangeHandler
     );
   };
   onSelectHeader = () => {
@@ -132,7 +146,7 @@ class StatefulTable<ColumnMetaData> extends Component<StatefulTableProps<ColumnM
           ? this.removeRowsFromSelection(currentRowKeys)
           : this.addRowsToSelection(currentRowKeys),
       },
-      this.onRowSelectionChangeHandler,
+      this.onRowSelectionChangeHandler
     );
   };
   removeRowFromSelection = (rowKeyToRemove) => {
@@ -165,7 +179,7 @@ class StatefulTable<ColumnMetaData> extends Component<StatefulTableProps<ColumnM
           isHeaderSelected: this.areAllRowsSelectedOnPage(selectedRows, pageNumber),
         }),
       },
-      this.onPageSelectionChangeHandler,
+      this.onPageSelectionChangeHandler
     );
   };
   currentRowsByPageSelector = (rows, pageNumber) => {
@@ -224,7 +238,7 @@ class StatefulTable<ColumnMetaData> extends Component<StatefulTableProps<ColumnM
   render() {
     const { paginatedRows, currentPage } = this.state;
     const { rowsPerPage, paginationProps, paginationCss } = this.props;
-    const baseTableProps = getSubset(this.getControlProps(), BaseTable.propTypes);
+    const baseTableProps = getSubset(this.getControlProps(), BaseTablePropTypes);
     return (
       <>
         <BaseTable {...baseTableProps} />
@@ -247,4 +261,21 @@ class StatefulTable<ColumnMetaData> extends Component<StatefulTableProps<ColumnM
   }
 }
 
+const BaseTablePropTypes = {
+  ...propTypes.space,
+  columns: PropTypes.any,
+  rows: PropTypes.any,
+  noRowsContent: PropTypes.string,
+  keyField: PropTypes.string,
+  id: PropTypes.string,
+  loading: PropTypes.bool,
+  footerRows: rowsPropType,
+  rowHovers: PropTypes.bool,
+  compact: PropTypes.bool,
+  className: PropTypes.string,
+  stickyHeader: PropTypes.bool,
+  onRowMouseEnter: PropTypes.func,
+  onRowMouseLeave: PropTypes.func,
+};
+
 export default StatefulTable;
diff --git a/src/Table/Table.tsx b/src/Table/Table.tsx
@@ -43,6 +43,7 @@ function Table<ColumnMetadata>({
     <BaseTable {...props} />
   );
 }
+
 Table.SortingHeader = SortingColumnHeader;
 
 export default Table;
diff --git a/src/utils/localized-date-fns.ts b/src/utils/localized-date-fns.ts
@@ -1,8 +1,6 @@
 import { format } from "date-fns";
 import { NDS_TO_DATE_FN_LOCALES_MAP } from "../locales.const";
 
-type NDSLocale = keyof typeof NDS_TO_DATE_FN_LOCALES_MAP;
-
-export function localizedFormat(date: number, dateFormat: string, ndsLocale: NDSLocale): string {
+export function localizedFormat(date: number, dateFormat: string, ndsLocale: string): string {
   return format(date, dateFormat, { locale: NDS_TO_DATE_FN_LOCALES_MAP[ndsLocale] });
 }