feat: export common components (#1053)

StaticJsCMS · Jan 4, 2024 · cafb8c4 · cafb8c4
1 parent 99e6a3c
commit cafb8c4
Show file tree

Hide file tree

Showing 63 changed files with 265 additions and 115 deletions.
diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md
@@ -0,0 +1,2 @@
+- Field class names updated to FieldWrapper
+- TextField class names updated to TextInput
diff --git a/packages/core/src/components/common/alert/Alert.tsx b/packages/core/src/components/common/alert/Alert.tsx
@@ -19,7 +19,7 @@ export const classes = generateClassNames('Alert', [
   'confirm-button',
 ]);
 
-interface AlertProps {
+export interface AlertProps {
   title: string | { key: string; options?: Record<string, unknown> };
   body: string | { key: string; options?: Record<string, unknown> };
   okay?: string | { key: string; options?: Record<string, unknown> };

diff --git a/packages/core/src/components/common/alert/index.ts b/packages/core/src/components/common/alert/index.ts
@@ -0,0 +1,2 @@
+export { Alert, default as alert } from './Alert';
+export type { AlertDialogProps, AlertProps } from './Alert';
diff --git a/packages/core/src/components/common/autocomplete/Autocomplete.tsx b/packages/core/src/components/common/autocomplete/Autocomplete.tsx
@@ -35,12 +35,12 @@ export const classes = generateClassNames('Autocomplete', [
   'checkmark-icon',
 ]);
 
-export interface Option {
+export interface AutocompleteOption {
   label: string;
   value: string;
 }
 
-function getOptionLabelAndValue(option: string | Option): Option {
+function getOptionLabelAndValue(option: string | AutocompleteOption): AutocompleteOption {
   if (option && typeof option === 'object' && 'label' in option && 'value' in option) {
     return option;
   }
@@ -53,7 +53,7 @@ export type AutocompleteChangeEventHandler = (value: string | string[]) => void;
 export interface AutocompleteProps {
   label: ReactNode | ReactNode[];
   value: string | string[] | null;
-  options: string[] | Option[];
+  options: string[] | AutocompleteOption[];
   disabled?: boolean;
   required?: boolean;
   inputRef?: Ref<HTMLInputElement>;
@@ -87,7 +87,7 @@ const Autocomplete: FC<AutocompleteProps> = ({
   );
 
   const handleChange = useCallback(
-    (selectedValue: Option | readonly Option[] | null) => {
+    (selectedValue: AutocompleteOption | readonly AutocompleteOption[] | null) => {
       if (selectedValue === null) {
         if (Array.isArray(value)) {
           onChange([]);
@@ -127,7 +127,7 @@ const Autocomplete: FC<AutocompleteProps> = ({
 
           return acc;
         },
-        {} as Record<string, Option>,
+        {} as Record<string, AutocompleteOption>,
       ),
     [finalOptions],
   );
@@ -238,7 +238,7 @@ const Autocomplete: FC<AutocompleteProps> = ({
             {groupedOptions.length > 0 ? (
               groupedOptions.map((option, index) => {
                 const { label: optionLabel, value: optionValue } = getOptionLabelAndValue(
-                  option as Option,
+                  option as AutocompleteOption,
                 );
 
                 const selected = Array.isArray(value)
@@ -248,7 +248,7 @@ const Autocomplete: FC<AutocompleteProps> = ({
                 return (
                   <li
                     key={index}
-                    {...getOptionProps({ option: option as Option, index })}
+                    {...getOptionProps({ option: option as AutocompleteOption, index })}
                     className={classNames(classes.option, selected && classes['option-selected'])}
                     data-testid={`autocomplete-option-${optionValue}`}
                   >

diff --git a/packages/core/src/components/common/autocomplete/index.ts b/packages/core/src/components/common/autocomplete/index.ts
@@ -0,0 +1,6 @@
+export { default as Autocomplete } from './Autocomplete';
+export type {
+  AutocompleteChangeEventHandler,
+  AutocompleteProps,
+  AutocompleteOption,
+} from './Autocomplete';
diff --git a/packages/core/src/components/common/button/Button.tsx b/packages/core/src/components/common/button/Button.tsx
@@ -8,7 +8,7 @@ import type { CSSProperties, FC, MouseEventHandler, ReactNode, Ref } from 'react
 
 import './Button.css';
 
-export interface BaseBaseProps {
+export interface ButtonBaseProps {
   variant?: 'contained' | 'outlined' | 'text';
   color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
   size?: 'medium' | 'small';
@@ -23,27 +23,27 @@ export interface BaseBaseProps {
   onClick?: MouseEventHandler;
 }
 
-export interface ButtonProps extends BaseBaseProps {
+export interface ButtonProps extends ButtonBaseProps {
   disabled?: boolean;
   buttonRef?: Ref<HTMLButtonElement>;
   'aria-label'?: string;
 }
 
-export interface ButtonInternalLinkProps extends BaseBaseProps {
+export interface ButtonInternalLinkProps extends ButtonBaseProps {
   to: string;
   linkRef?: Ref<HTMLAnchorElement>;
 }
 
-export interface ButtonExternalLinkProps extends BaseBaseProps {
+export interface ButtonExternalLinkProps extends ButtonBaseProps {
   href: string;
   linkRef?: Ref<HTMLAnchorElement>;
 }
 
-export type LinkProps = ButtonInternalLinkProps | ButtonExternalLinkProps;
+export type ButtonLinkProps = ButtonInternalLinkProps | ButtonExternalLinkProps;
 
-export type ButtonLinkProps = ButtonProps | LinkProps;
+export type ButtonOrButtonLinkProps = ButtonProps | ButtonLinkProps;
 
-const Button: FC<ButtonLinkProps> = ({
+const Button: FC<ButtonOrButtonLinkProps> = ({
   variant = 'contained',
   color = 'primary',
   size = 'medium',

diff --git a/packages/core/src/components/common/button/IconButton.tsx b/packages/core/src/components/common/button/IconButton.tsx
@@ -25,11 +25,11 @@ export type IconButtonInternalLinkProps = Omit<ButtonInternalLinkProps, 'childre
 export type IconButtonExternalLinkProps = Omit<ButtonExternalLinkProps, 'children' | 'className'> &
   BaseIconButtonProps;
 
-export type IconLinkProps = IconButtonInternalLinkProps | IconButtonExternalLinkProps;
+export type IconButtonLinkProps = IconButtonInternalLinkProps | IconButtonExternalLinkProps;
 
-export type IconButtonLinkProps = IconButtonProps | IconLinkProps;
+export type IconButtonOrIconButtonLinkProps = IconButtonProps | IconButtonLinkProps;
 
-const IconButton: FC<IconButtonLinkProps> = ({
+const IconButton: FC<IconButtonOrIconButtonLinkProps> = ({
   icon: Icon,
   size = 'medium',
   rootClassName,

diff --git a/packages/core/src/components/common/button/index.ts b/packages/core/src/components/common/button/index.ts
@@ -0,0 +1,21 @@
+export { default as Button } from './Button';
+export type {
+  ButtonBaseProps,
+  ButtonProps,
+  ButtonInternalLinkProps,
+  ButtonExternalLinkProps,
+  ButtonLinkProps,
+  ButtonOrButtonLinkProps,
+} from './Button';
+
+export { default as IconButton } from './IconButton';
+export type {
+  BaseIconButtonProps,
+  IconButtonProps,
+  IconButtonInternalLinkProps,
+  IconButtonExternalLinkProps,
+  IconButtonLinkProps,
+  IconButtonOrIconButtonLinkProps,
+} from './IconButton';
+
+export { default as useButtonClassNames, buttonClasses } from './useButtonClassNames';
diff --git a/packages/core/src/components/common/button/useButtonClassNames.tsx b/packages/core/src/components/common/button/useButtonClassNames.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import { generateClassNames } from '@staticcms/core/lib/util/theming.util';
 
-import type { BaseBaseProps } from './Button';
+import type { ButtonBaseProps } from './Button';
 
 export const buttonClasses = generateClassNames('Button', [
   'root-sm',
@@ -30,8 +30,8 @@ export const buttonClasses = generateClassNames('Button', [
 ]);
 
 const classes: Record<
-  Required<BaseBaseProps>['variant'],
-  Record<Required<BaseBaseProps>['color'], string>
+  Required<ButtonBaseProps>['variant'],
+  Record<Required<ButtonBaseProps>['color'], string>
 > = {
   contained: {
     primary: 'CMS_Button_contained-primary',
@@ -59,10 +59,10 @@ const classes: Record<
   },
 };
 
-export default function useButtonClassNames(
-  variant: Required<BaseBaseProps>['variant'],
-  color: Required<BaseBaseProps>['color'],
-  size: Required<BaseBaseProps>['size'],
+function useButtonClassNames(
+  variant: Required<ButtonBaseProps>['variant'],
+  color: Required<ButtonBaseProps>['color'],
+  size: Required<ButtonBaseProps>['size'],
   rounded: boolean | 'no-padding',
 ) {
   let mainClass = size === 'small' ? 'CMS_Button_root-sm' : 'CMS_Button_root';
@@ -74,3 +74,5 @@ export default function useButtonClassNames(
 
   return useMemo(() => `${mainClass} ${classes[variant][color]}`, [color, mainClass, variant]);
 }
+
+export default useButtonClassNames;
diff --git a/packages/core/src/components/common/card/Card.tsx b/packages/core/src/components/common/card/Card.tsx
@@ -7,7 +7,7 @@ import type { FC, ReactNode } from 'react';
 
 import './Card.css';
 
-interface CardProps {
+export interface CardProps {
   children: ReactNode | ReactNode[];
   className?: string;
   title?: string;

diff --git a/packages/core/src/components/common/card/CardActionArea.tsx b/packages/core/src/components/common/card/CardActionArea.tsx
@@ -6,16 +6,16 @@ import cardClasses from './Card.classes';
 
 import type { FC, MouseEvent, ReactNode } from 'react';
 
-interface BaseCardActionAreaProps {
+export interface BaseCardActionAreaProps {
   children: ReactNode;
   className?: string;
 }
 
-interface CardActionAreaPropsLink extends BaseCardActionAreaProps {
+export interface CardActionAreaPropsLink extends BaseCardActionAreaProps {
   to: string;
 }
 
-interface CardActionAreaPropsButton extends BaseCardActionAreaProps {
+export interface CardActionAreaPropsButton extends BaseCardActionAreaProps {
   onClick: (event: MouseEvent) => void;
 }
 

diff --git a/packages/core/src/components/common/card/CardContent.tsx b/packages/core/src/components/common/card/CardContent.tsx
@@ -4,7 +4,7 @@ import cardClasses from './Card.classes';
 
 import type { FC, ReactNode } from 'react';
 
-interface CardContentProps {
+export interface CardContentProps {
   children: ReactNode;
 }
 

diff --git a/packages/core/src/components/common/card/CardHeader.tsx b/packages/core/src/components/common/card/CardHeader.tsx
@@ -4,7 +4,7 @@ import cardClasses from './Card.classes';
 
 import type { FC, ReactNode } from 'react';
 
-interface CardHeaderProps {
+export interface CardHeaderProps {
   children: ReactNode;
 }
 

diff --git a/packages/core/src/components/common/card/CardMedia.tsx b/packages/core/src/components/common/card/CardMedia.tsx
@@ -11,7 +11,7 @@ import type {
   UnknownField,
 } from '@staticcms/core';
 
-interface CardMediaProps<EF extends BaseField> {
+export interface CardMediaProps<EF extends BaseField> {
   image: string;
   width?: string | number;
   height?: string | number;

diff --git a/packages/core/src/components/common/card/index.ts b/packages/core/src/components/common/card/index.ts
@@ -0,0 +1,19 @@
+export { default as Card } from './Card';
+export type { CardProps } from './Card';
+
+export { default as CardActionArea } from './CardActionArea';
+export type {
+  BaseCardActionAreaProps,
+  CardActionAreaProps,
+  CardActionAreaPropsButton,
+  CardActionAreaPropsLink,
+} from './CardActionArea';
+
+export { default as CardContent } from './CardContent';
+export type { CardContentProps } from './CardContent';
+
+export { default as CardHeader } from './CardHeader';
+export type { CardHeaderProps } from './CardHeader';
+
+export { default as CardMedia } from './CardMedia';
+export type { CardMediaProps } from './CardMedia';
diff --git a/packages/core/src/components/common/checkbox/index.ts b/packages/core/src/components/common/checkbox/index.ts
@@ -0,0 +1,2 @@
+export { default as Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
diff --git a/packages/core/src/components/common/confirm/Confirm.tsx b/packages/core/src/components/common/confirm/Confirm.tsx
@@ -20,7 +20,7 @@ export const classes = generateClassNames('Confirm', [
   'cancel-button',
 ]);
 
-interface ConfirmProps {
+export interface ConfirmProps {
   title: string | { key: string; options?: Record<string, unknown> };
   body: string | { key: string; options?: Record<string, unknown> };
   cancel?: string | { key: string; options?: Record<string, unknown> };

diff --git a/packages/core/src/components/common/confirm/index.ts b/packages/core/src/components/common/confirm/index.ts
@@ -0,0 +1,2 @@
+export { Confirm, default as confirm } from './Confirm';
+export type { ConfirmDialogProps, ConfirmProps } from './Confirm';