style: 💄 eslint rule for sorting ts keys and update docs

.eslintrc.js

@@ -13,8 +13,10 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
-  plugins: ['react', '@typescript-eslint'],
+  plugins: ['react', '@typescript-eslint', 'typescript-sort-keys'],
   rules: {
+    'typescript-sort-keys/interface': 'error',
+    'typescript-sort-keys/string-enum': 'error',
     'react/jsx-filename-extension': 'off',
     'react/jsx-props-no-spreading': 'off',
     'react/function-component-definition': 'off',

README.md

@@ -73,116 +73,116 @@ Below is a simple customization to change the way buttons appear globally, provi
 
 ```tsx
 export type NextAuthDialogProps = AuthDialogProps & {
-  /**
-   * The endpoint of NextAuth server. Defaults to `/api/auth/providers`.
-   */
-  url?: string;
   /**
    * Disable sorting of providers by name when rendering their buttons.
    */
   disableSortByName?: boolean;
+  /**
+   * The endpoint of NextAuth server. Defaults to `/api/auth/providers`.
+   */
+  url?: string;
 }
 
 export type AuthDialogProps = PropsWithChildren<{
   /**
-   * Controls width of dialog.
-   * When breakpoint >= viewport the dialog will be rendered in mobile mode.
-   * Defaults to `xs`.
-   */
-  breakpoint?: Breakpoint
-  /**
-   * When true the dialog will be open.
-   */
-  open: boolean
-  /**
-   * Callback for closing the dialog.
+   * See @mui/material documentation
    */
-  onClose?: () => void;
+  ButtonProps?: ButtonProps,
   /**
    * See @mui/material documentation
    */
-  DialogContentTextProps?: DialogContentTextProps
+  ButtonTypographyProps?: TypographyProps,
   /**
    * See @mui/material documentation
    */
   DialogContentProps?: DialogContentProps;
   /**
    * See @mui/material documentation
    */
-  DialogTitleProps?: DialogTitleProps;
+  DialogContentTextProps?: DialogContentTextProps
   /**
    * See @mui/material documentation
    */
   DialogProps?: DialogProps;
   /**
    * See @mui/material documentation
    */
-  ButtonProps?: ButtonProps
+  DialogTitleProps?: DialogTitleProps;
   /**
-   * An object mapping of provider id to provider config.
+   * Props to pass to the default loading indicator. See @mui/material documentation
    */
-  providers?: Record<string, ProviderConfig>;
+  LinearProgressProps?: LinearProgressProps;
   /**
-   * Hide the dialog title. In mobile mode this will hide the close "x" icon.
+   * A custom loading indicator.
    */
-  hideTitle?: boolean;
+  Progress?: React.ReactNode;
   /**
-   * Text to display in the dialog title. Empty by default.
+   * Props passed to the email input field. See @mui/material documentation
    */
-  titleText?: string | React.ReactNode;
+  TextFieldProps?: TextFieldProps;
+  /**
+   * Controls width of dialog.
+   * When breakpoint >= viewport the dialog will be rendered in mobile mode.
+   * Defaults to `xs`.
+   */
+  breakpoint?: Breakpoint,
   /**
    * Text to display between email field and oauth buttons. Defaults to "or".
    */
   dividerText?: string | React.ReactNode;
   /**
-   * If true a loading indicator will be displayed in the dialog.
+   * Hide the provider icons on their buttons.
    */
-  loading?: boolean;
+  hideProviderIcon?: boolean;
   /**
-   * A custom loading indicator.
+   * Hide the provider names on their buttons.
    */
-  Progress?: React.ReactNode;
+  hideProviderName?: boolean;
   /**
-   * Props to pass to the default loading indicator. See @mui/material documentation
+   * Hide the dialog title. In mobile mode this will hide the close "x" icon.
    */
-  LinearProgressProps?: LinearProgressProps;
+  hideTitle?: boolean;
   /**
-   * See @mui/material documentation
+   * Custom email validation function.
    */
-  ButtonTypographyProps?: TypographyProps
+  isValidEmail?: (email: string) => boolean;
   /**
-   * Callback runs on a successful sign in.
+   * If true a loading indicator will be displayed in the dialog.
    */
-  onOAuthSignInSuccess?: (response: SignInResponse | undefined) => void;
+  loading?: boolean;
   /**
-   * Callback runs on a failed sign in.
+   * Callback for closing the dialog.
    */
-  onOAuthSignInError?: (error: Error) => void;
+  onClose?: () => void;
   /**
-   * Props passed to the email input field. See @mui/material documentation
+   * Callback runs on a failed sign in.
    */
-  TextFieldProps?: TextFieldProps;
+  onOAuthSignInError?: (error: Error) => void;
   /**
-   * Custom email validation function.
+   * Callback runs on a successful sign in.
    */
-  isValidEmail?: (email: string) => boolean;
+  onOAuthSignInSuccess?: (response: SignInResponse | undefined) => void;
   /**
    * Override default email submission function.
    * This is useful for implementing authentication with a 3rd party API like MagicLink.
    */
   onSubmitEmail?: (email: string) => Promise<void>;
   /**
-   * Additional sign in options to be passed when calling `signIn`.  See next-auth for documentation
+   * When true the dialog will be open.
    */
-  signInOptions?: SignInOptions;
+  open: boolean,
   /**
-   * Hide the provider names on their buttons.
+   * An object mapping of provider id to provider config.
    */
-  hideProviderName?: boolean;
+  providers?: Record<string, ProviderConfig>;
   /**
-   * Hide the provider icons on their buttons.
+   * Additional sign in options to be passed when calling `signIn`.  See next-auth for documentation
    */
-  hideProviderIcon?: boolean;
+  signInOptions?: SignInOptions;
+  /**
+   * Text to display in the dialog title. Empty by default.
+   */
+  titleText?: string | React.ReactNode;
 }>
 
 export type OauthProviderConfig = {
@@ -195,40 +195,36 @@ export type OauthProviderConfig = {
    */
   ButtonTypographyProps?: TypographyProps
   /**
-   * Override the provider's name when rendering the button.
-   */
-  label?: string;
-  /**
-   * Hide the provider names button.
+   * Override props passed to provider's icon. See @iconify/react documentation.
    */
-  hideProviderName?: boolean;
+  IconProps?: IconProps;
   /**
    * Hide the provider icon on button.
    */
   hideProviderIcon?: boolean;
   /**
-   * Override props passed to provider's icon. See @iconify/react documentation.
+   * Hide the provider names button.
    */
-  IconProps?: IconProps;
+  hideProviderName?: boolean;
   /**
    * Override the provider's icon. Can be a @iconify/react icon name or a custom component.
    */
   icon?: string | React.ReactNode;
+  /**
+   * Override the provider's name when rendering the button.
+   */
+  label?: string;
 }
 
 export type EmailProviderConfig = {
   /**
-   * Override start icon rendered in the email input field
+   * Override props passed to the email's input field. See @mui/material documentation.
    */
-  startIcon?: React.ReactNode;
+  TextFieldProps?: TextFieldProps,
   /**
    * Override end icon rendered in the email input field
    */
   endIcon?: React.ReactNode;
-  /**
-   * Override props passed to the email's input field. See @mui/material documentation.
-   */
-  TextFieldProps?: TextFieldProps
   /**
    * Override text rendered below the email input field.
    */
@@ -237,6 +233,10 @@ export type EmailProviderConfig = {
    * Override the placeholder text rendered in the email input field.
    */
   placeholder?: string;
+  /**
+   * Override start icon rendered in the email input field
+   */
+  startIcon?: React.ReactNode;
 }
 
 export type ProviderConfig = OauthProviderConfig & EmailProviderConfig & {
@@ -248,15 +248,14 @@ export type ProviderConfig = OauthProviderConfig & EmailProviderConfig & {
    * Name of the provider. Will be used as the button's label and used when sorting providers.
    */
   name: string;
+  /**
+   * Override sign in options to be passed when calling `signIn`.  See next-auth for documentation
+   */
+  signInOptions?: SignInOptions;
   /**
    * Type of the provider.
    * Only `email` and `oauth` are supported, all other types will be ignored when rendering fields.
    */
   type: 'oauth' | 'email' | string;
-  /**
-   * Override sign in options to be passed when calling `signIn`.  See next-auth for documentation
-   */
-  signInOptions?: SignInOptions;
 };
-
 ```

package.json

@@ -104,6 +104,7 @@
     "eslint-plugin-react": "7.30.0",
     "eslint-plugin-react-hooks": "4.5.0",
     "eslint-plugin-storybook": "0.5.12",
+    "eslint-plugin-typescript-sort-keys": "2.1.0",
     "husky": "8.0.1",
     "lint-staged": "12.4.2",
     "next-auth": "4.3.4",