From 46299d93a1c33ebf25dbb887c043fe87ee360128 Mon Sep 17 00:00:00 2001 From: Pagebakers Date: Thu, 15 Feb 2024 15:36:10 -0300 Subject: [PATCH] feat: improved auth api --- .changeset/ninety-poems-type.md | 5 + .changeset/perfect-dragons-serve.md | 5 + .changeset/poor-apples-attend.md | 5 + .changeset/sweet-parrots-arrive.md | 5 + .../components/authentication/auth/usage.mdx | 119 +++++++++- .../saas-ui-auth/src/components/auth-form.tsx | 18 +- packages/saas-ui-auth/src/components/auth.tsx | 203 +++++++++++++++--- .../components/forms/forgot-password-form.tsx | 12 +- .../src/components/forms/magic-link-form.tsx | 10 +- .../src/components/forms/otp-form.tsx | 14 +- .../src/components/forms/password-form.tsx | 14 +- .../components/forms/update-password-form.tsx | 16 +- packages/saas-ui-auth/src/components/index.ts | 78 ++++--- .../src/components/login-button.tsx | 7 +- .../src/components/login-view.tsx | 54 +++-- .../saas-ui-auth/src/components/success.tsx | 4 +- .../saas-ui-auth/stories/auth.stories.tsx | 67 +++++- .../props-docs/dist/components/app-shell.json | 16 ++ tooling/props-docs/dist/components/auth.json | 95 +++----- .../props-docs/dist/components/banner.json | 17 ++ .../props-docs/dist/components/data-grid.json | 29 ++- .../dist/components/empty-state.json | 15 ++ .../props-docs/dist/components/filters.json | 7 +- tooling/props-docs/dist/components/forms.json | 46 +++- .../props-docs/dist/components/hotkeys.json | 42 ++-- .../dist/components/icon-badge.json | 19 +- .../dist/components/loading-overlay.json | 17 +- .../props-docs/dist/components/modals.json | 16 -- .../props-docs/dist/components/navbar.json | 15 ++ .../props-docs/dist/components/nprogress.json | 16 ++ .../props-docs/dist/components/persona.json | 16 ++ .../props-docs/dist/components/property.json | 15 ++ .../dist/components/search-input.json | 15 ++ .../props-docs/dist/components/sidebar.json | 49 +++++ tooling/props-docs/dist/components/src.json | 9 - .../dist/components/structured-list.json | 16 ++ .../props-docs/dist/components/timeline.json | 20 +- tooling/props-docs/dist/index.d.ts | 1 - tooling/props-docs/dist/index.js | 3 - tooling/props-docs/dist/index.mjs | 3 - tooling/props-docs/generated/auth.json | 95 +++----- tooling/props-docs/generated/filters.json | 6 +- tooling/props-docs/generated/forms.json | 12 +- tooling/props-docs/generated/src.json | 9 - 44 files changed, 848 insertions(+), 407 deletions(-) create mode 100644 .changeset/ninety-poems-type.md create mode 100644 .changeset/perfect-dragons-serve.md create mode 100644 .changeset/poor-apples-attend.md create mode 100644 .changeset/sweet-parrots-arrive.md delete mode 100644 tooling/props-docs/dist/components/src.json delete mode 100644 tooling/props-docs/generated/src.json diff --git a/.changeset/ninety-poems-type.md b/.changeset/ninety-poems-type.md new file mode 100644 index 000000000..d0e430a5c --- /dev/null +++ b/.changeset/ninety-poems-type.md @@ -0,0 +1,5 @@ +--- +'@saas-ui/auth': minor +--- + +onSuccess handler now receives the active view and can be used to redirect after succesful log in diff --git a/.changeset/perfect-dragons-serve.md b/.changeset/perfect-dragons-serve.md new file mode 100644 index 000000000..9ade54261 --- /dev/null +++ b/.changeset/perfect-dragons-serve.md @@ -0,0 +1,5 @@ +--- +'@saas-ui/auth': major +--- + +New translations api that allows to translate all labels and messages diff --git a/.changeset/poor-apples-attend.md b/.changeset/poor-apples-attend.md new file mode 100644 index 000000000..05dacd938 --- /dev/null +++ b/.changeset/poor-apples-attend.md @@ -0,0 +1,5 @@ +--- +'@saas-ui/props-docs': minor +--- + +Updated props diff --git a/.changeset/sweet-parrots-arrive.md b/.changeset/sweet-parrots-arrive.md new file mode 100644 index 000000000..f8fb06b81 --- /dev/null +++ b/.changeset/sweet-parrots-arrive.md @@ -0,0 +1,5 @@ +--- +'@saas-ui/auth': major +--- + +Removed deprecated props diff --git a/apps/website/src/pages/docs/components/authentication/auth/usage.mdx b/apps/website/src/pages/docs/components/authentication/auth/usage.mdx index db6ac51cb..afc94af30 100644 --- a/apps/website/src/pages/docs/components/authentication/auth/usage.mdx +++ b/apps/website/src/pages/docs/components/authentication/auth/usage.mdx @@ -177,6 +177,12 @@ export default function AuthPage() { Use the `redirectUrl` prop to redirect the user after login. + + This only works for social log in and magic link in case it's implemented in + the auth provider. For password login you need to handle the redirect + manually, eg using the `onSuccess` handler. + + ```jsx center=true height=550px import { SaasUILogo } from '@saas-ui/assets' import { Card, CardHeader, CardBody } from '@chakra-ui/react' @@ -213,6 +219,40 @@ export default function AuthPage() { } ``` +### Success handler + +The `Auth` component accepts an `onSuccess` prop that can be used to trigger actions after succesful login, like redirecting. + +```jsx center=true height=550px +import { SaasUILogo } from '@saas-ui/assets' +import { Card, CardHeader, CardBody } from '@chakra-ui/react' +import { useSnackbar } from '@saas-ui/react' +import { Auth } from '@saas-ui/auth' + +export default function AuthPage() { + const snackbar = useSnackbar() + + return ( + + + + + + { + if (view === 'login') { + snackbar.success('Welcome back!') + // redirect to '/' + } + }} + /> + + + ) +} +``` + ### Error handler The `Auth` component accepts an `onError` prop that can be used to handle errors. @@ -224,14 +264,9 @@ import { Card, CardHeader, CardBody } from '@chakra-ui/react' import { useSnackbar } from '@saas-ui/react' import { Auth } from '@saas-ui/auth' -const getAbsoluteUrl = (path: string) => { - if (typeof window === 'undefined') { - return path - } - return window.location.origin -} - export default function AuthPage() { + const snackbar = useSnackbar() + return ( @@ -284,6 +319,7 @@ export default function AuthPage() { fields={{ submit: { colorScheme: 'gray', + variant: 'outline', }, }} /> @@ -352,7 +388,11 @@ export default function LoginPage() { auth.logIn(data)} - submitLabel="Log in" + fields={{ + submit: { + children: 'Log in', + }, + }} /> @@ -431,3 +471,66 @@ export default function LoginPage() { ) } ``` + +### Translations + +The `Auth` component accepts a `translations` prop that can be used to translate the form fields and buttons. + +```jsx center=true height=550px +import { SaasUILogo } from '@saas-ui/assets' +import { Card, CardHeader, CardBody } from '@chakra-ui/react' +import { useSnackbar } from '@saas-ui/react' +import { Auth } from '@saas-ui/auth' + +export default function AuthPage() { + return ( + + + + + + + + + ) +} + +const translations = { + signup: 'Aanmelden', + signupSubmit: 'Aanmelden', + signupSuccess: 'Gelukt!', + signupSuccessDescription: + 'Controleer je mailbox om je account te verifiëren.', + login: 'Inloggen', + loginSubmit: 'Inloggen', + magicLinkSuccess: 'Controleer je mailbox', + magicLinkSuccessDescription: + 'We hebben een magic link naar {email} gestuurd.', + yourEmail: 'je e-mailadres', + forgotPassword: 'Wachtwoord vergeten?', + forgotPasswordSubmit: 'Stuur reset link', + updatePassword: 'Wachtwoord wijzigen', + updatePasswordSubmit: 'Wachtwoord opslaan', + backToLogin: 'Terug naar inloggen', + noAccount: 'Nog geen account?', + haveAccount: 'Reeds aangemeld?', + otp: 'Eenmalig wachtwoord', + otpSubmit: 'Verifiëren', + otpHelp: + 'Je kunt je eenmalig wachtwoord vinden in de Google Authenticator of Authy app.', + continueWith: 'Doorgaan met', + orContinueWith: 'of doorgaan met', + email: 'E-mail', + password: 'Wachtwoord', + newPassword: 'Nieuw wachtwoord', + confirmPassword: 'Bevestig wachtwoord', +} +``` diff --git a/packages/saas-ui-auth/src/components/auth-form.tsx b/packages/saas-ui-auth/src/components/auth-form.tsx index 0d05d299f..15e7c0eba 100644 --- a/packages/saas-ui-auth/src/components/auth-form.tsx +++ b/packages/saas-ui-auth/src/components/auth-form.tsx @@ -14,14 +14,16 @@ import { } from '@chakra-ui/react' import { cx } from '@chakra-ui/utils' -import { FieldErrors } from '@saas-ui/forms' +import { FieldErrors, FieldValues } from '@saas-ui/forms' import { AvailableProviders } from './forms/providers' import { AuthTypeEnum, AuthActionEnum } from '../provider' const [StylesProvider, useStyles] = createStylesContext('SuiAuthForm') -export interface AuthViewOptions { +export interface AuthViewOptions< + TFieldValues extends FieldValues = FieldValues, +> { /** * The submit action, `logIn` or `signUp` */ @@ -34,11 +36,6 @@ export interface AuthViewOptions { * The form title */ title?: React.ReactNode - /** - * Label for the submit button - * @default "Sign in" - */ - submitLabel?: string /** * Children are passed down to the underlying form */ @@ -58,7 +55,7 @@ export interface AuthViewOptions { /** * Callback executed when there are validation errors */ - onValidationError?: (errors: FieldErrors) => void + onValidationError?: (errors: FieldErrors) => void } export interface AuthFormOptions { @@ -74,11 +71,6 @@ export interface AuthFormOptions { * List of OAuth providers */ providers?: AvailableProviders - /** - * The redirect URL after successful OAuth login - * @deprecated Use `redirectUrl` instead - */ - oauthRedirectUrl?: string /** * The redirect URL after succesful OAuth or Magic link login */ diff --git a/packages/saas-ui-auth/src/components/auth.tsx b/packages/saas-ui-auth/src/components/auth.tsx index a4f6ce9e6..d192a0a2b 100644 --- a/packages/saas-ui-auth/src/components/auth.tsx +++ b/packages/saas-ui-auth/src/components/auth.tsx @@ -9,6 +9,7 @@ import { UpdatePasswordView } from './update-password-view' import { OtpView } from './otp-view' import { AvailableProviders } from './forms/providers' import { FormProps } from '@saas-ui/forms' +import { AuthFormSuccess } from './success' export const VIEWS = { LOGIN: 'login', @@ -71,48 +72,90 @@ export interface AuthProps */ backLink?: React.ReactNode /** - * Text shown before the signupLink - * @default "No account?" + * Internationalization options for the auth form. */ - noAccount?: React.ReactNode - /** - * Text shown before the loginLink - * @default "Already have an account?" - */ - haveAccount?: React.ReactNode + translations?: Partial /** * Called when a login or signup request fails. * @param view The current active view * @param error */ onError?: (view: ViewType, error: Error) => void + /** + * Called when a login or signup request succeeds. + * @param view The current active view + * @param data + */ + onSuccess?: (view: ViewType, data: any) => void /** * The redirect URL after succesful login - * This property is passed down to the auth service + * This will only redirect if implemented in the auth provider. */ redirectUrl?: string | ((view: RedirectViews) => string | undefined) } +const defaultTranslations = { + signup: 'Sign up', + signupSubmit: 'Sign up', + signupSuccess: 'Success!', + signupSuccessDescription: 'Check your mailbox to verify your account.', + login: 'Log in', + loginSubmit: 'Log in', + magicLinkSuccess: 'Check your mailbox', + magicLinkSuccessDescription: 'We have sent a magic link to {email}.', + yourEmail: 'your email address', + forgotPassword: 'Forgot password?', + forgotPasswordSubmit: 'Send reset link', + updatePassword: 'Update password', + updatePasswordSubmit: 'Update password', + backToLogin: 'Back to log in', + noAccount: 'No account yet?', + haveAccount: 'Already have an account?', + otp: 'One-time password', + otpSubmit: 'Verify', + otpHelp: + 'You can find your one-time password in the Google Authenticator or Authy app.', + continueWith: 'Continue with', + orContinueWith: 'or continue with', + verificationCode: 'Your verification code', + email: 'Email', + password: 'Password', + newPassword: 'New password', + confirmPassword: 'Confirm password', +} + +export type IntlTranslations = typeof defaultTranslations + +const tpl = (value: string, data: Record) => { + return value.replace(/{(\w*)}/g, function (m, key) { + return Object.prototype.hasOwnProperty.call(data, key) ? data[key] : '' + }) +} + export const Auth: React.FC = (props) => { const { - view = VIEWS.LOGIN, + view, onViewChange, providers, - signupLink = 'Sign up', - loginLink = 'Log in', - forgotLink = 'Forgot password?', - backLink = 'Back to log in', - noAccount = 'No account yet?', - haveAccount = 'Already have an account?', + title, + translations: translationsProp, + signupLink, + loginLink, + forgotLink, + backLink, onError, + onSuccess, redirectUrl, + fields, ...rest } = props + const translations = { ...defaultTranslations, ...translationsProp } + const { type } = rest const [authView, setAuthView] = useControllableState({ - defaultValue: 'login', + defaultValue: VIEWS.LOGIN, value: view, onChange: (view) => { onViewChange?.(view) @@ -128,6 +171,15 @@ export const Auth: React.FC = (props) => { [authView] ) + const successHandler = React.useCallback( + (view: ViewType) => (data: any) => { + if (authView === view && onSuccess) { + onSuccess(view, data) + } + }, + [authView] + ) + const getRedirectUrl = React.useCallback( (view: RedirectViews) => { if (typeof redirectUrl === 'function') { @@ -144,25 +196,52 @@ export const Auth: React.FC = (props) => { setAuthView(VIEWS.SIGNUP)} - label={noAccount} - link={signupLink} + label={translations.noAccount} + link={signupLink ?? translations.signup} /> } redirectUrl={getRedirectUrl(VIEWS.LOGIN)} + title={title ?? translations.login} + providerLabel={translations.continueWith} + dividerLabel={translations.orContinueWith} + fields={{ + email: { + label: translations.email, + }, + password: { + label: translations.password, + }, + submit: { + children: translations.loginSubmit, + }, + }} + renderSuccess={ + type === 'magiclink' + ? (data) => ( + + ) + : undefined + } {...rest} > {type === 'password' && - (typeof forgotLink === 'string' ? ( + (!forgotLink || typeof forgotLink === 'string' ? ( setAuthView(VIEWS.FORGOT_PASSWORD)} > - {forgotLink} + {forgotLink ?? translations.forgotPassword} ) : ( forgotLink @@ -174,14 +253,39 @@ export const Auth: React.FC = (props) => { setAuthView(VIEWS.LOGIN)} - label={haveAccount} - link={loginLink} + label={translations.haveAccount} + link={loginLink ?? translations.login} /> } redirectUrl={getRedirectUrl(VIEWS.SIGNUP)} + title={title ?? translations.signup} + providerLabel={translations.continueWith} + dividerLabel={translations.orContinueWith} + fields={{ + ...fields, + email: { + label: translations.email, + ...fields?.label, + }, + password: { + label: translations.password, + ...fields?.password, + }, + submit: { + children: translations.signupSubmit, + ...fields?.submit, + }, + }} + renderSuccess={() => ( + + )} {...rest} /> ) @@ -189,13 +293,26 @@ export const Auth: React.FC = (props) => { return ( setAuthView(VIEWS.LOGIN)} - link={backLink} + link={backLink ?? translations.backToLogin} /> } redirectUrl={getRedirectUrl(VIEWS.FORGOT_PASSWORD)} + title={title ?? translations.forgotPassword} + fields={{ + ...fields, + email: { + label: translations.email, + ...fields?.email, + }, + submit: { + children: translations.forgotPasswordSubmit, + ...fields?.submit, + }, + }} {...rest} /> ) @@ -203,11 +320,47 @@ export const Auth: React.FC = (props) => { return ( ) case VIEWS.OTP: - return + return ( + + ) } return null diff --git a/packages/saas-ui-auth/src/components/forms/forgot-password-form.tsx b/packages/saas-ui-auth/src/components/forms/forgot-password-form.tsx index 5cf6bdc14..4f638ecb3 100644 --- a/packages/saas-ui-auth/src/components/forms/forgot-password-form.tsx +++ b/packages/saas-ui-auth/src/components/forms/forgot-password-form.tsx @@ -10,18 +10,12 @@ export interface ForgotPasswordSubmitParams { } export interface ForgotPasswordFormProps< - Params extends FieldValues = ForgotPasswordSubmitParams + Params extends FieldValues = ForgotPasswordSubmitParams, > extends Omit, 'children'> { - emailLabel?: string - helpText?: string - submitLabel?: string children?: React.ReactNode } export const ForgotPasswordForm: React.FC = ({ - submitLabel = 'Reset password', - emailLabel = 'Your email address', - helpText, children, ...formProps }) => { @@ -30,7 +24,7 @@ export const ForgotPasswordForm: React.FC = ({ = ({ {children} - {submitLabel} + Reset password diff --git a/packages/saas-ui-auth/src/components/forms/magic-link-form.tsx b/packages/saas-ui-auth/src/components/forms/magic-link-form.tsx index f9ead15ce..b1156b448 100755 --- a/packages/saas-ui-auth/src/components/forms/magic-link-form.tsx +++ b/packages/saas-ui-auth/src/components/forms/magic-link-form.tsx @@ -4,10 +4,8 @@ import { Form, FormLayout, Field, FormProps, FieldValues } from '@saas-ui/forms' import { LoginButton } from '../login-button' export interface MagicLinkFormProps< - Params extends FieldValues = MagicLinkSubmitParams + Params extends FieldValues = MagicLinkSubmitParams, > extends Omit, 'children'> { - submitLabel?: string - emailLabel?: string children?: React.ReactNode } @@ -17,8 +15,6 @@ export interface MagicLinkSubmitParams { } export const MagicLinkForm: React.FC = ({ - submitLabel = 'Continue with Email', - emailLabel = 'Email', children, ...formProps }) => { @@ -27,7 +23,7 @@ export const MagicLinkForm: React.FC = ({ = ({ {children} - {submitLabel} + Continue with Email diff --git a/packages/saas-ui-auth/src/components/forms/otp-form.tsx b/packages/saas-ui-auth/src/components/forms/otp-form.tsx index ac34e2424..ccca7d61e 100644 --- a/packages/saas-ui-auth/src/components/forms/otp-form.tsx +++ b/packages/saas-ui-auth/src/components/forms/otp-form.tsx @@ -16,18 +16,12 @@ export interface OtpSubmitParams { } export interface OtpFormProps - extends Omit, 'chilren'> { - otpLabel?: string - helpText?: string + extends Omit, 'children'> { pinLength?: number - submitLabel?: string children?: React.ReactNode } export const OtpForm: React.FC = ({ - submitLabel = 'Verify', - otpLabel = 'Your verification code', - helpText = 'You can find your one-time password in the Google Authenticator or Authy app.', pinLength = 4, defaultValues, children, @@ -38,8 +32,8 @@ export const OtpForm: React.FC = ({ = ({ {children} - {submitLabel} + Verify diff --git a/packages/saas-ui-auth/src/components/forms/password-form.tsx b/packages/saas-ui-auth/src/components/forms/password-form.tsx index 73ed70511..e41283b4c 100755 --- a/packages/saas-ui-auth/src/components/forms/password-form.tsx +++ b/packages/saas-ui-auth/src/components/forms/password-form.tsx @@ -12,18 +12,12 @@ export interface PasswordSubmitParams { } export interface PasswordFormProps< - Params extends FieldValues = PasswordSubmitParams + Params extends FieldValues = PasswordSubmitParams, > extends Omit, 'children'> { - submitLabel?: string - emailLabel?: string - passwordLabel?: string children?: React.ReactNode } export const PasswordForm: React.FC = ({ - submitLabel = 'Log in', - emailLabel = 'Email', - passwordLabel = 'Password', defaultValues, children, ...formProps @@ -33,14 +27,14 @@ export const PasswordForm: React.FC = ({ = ({ {children} - {submitLabel} + Log in diff --git a/packages/saas-ui-auth/src/components/forms/update-password-form.tsx b/packages/saas-ui-auth/src/components/forms/update-password-form.tsx index 042636dc7..4ea4f03ac 100644 --- a/packages/saas-ui-auth/src/components/forms/update-password-form.tsx +++ b/packages/saas-ui-auth/src/components/forms/update-password-form.tsx @@ -18,20 +18,12 @@ export interface UpdatePasswordSubmitParams { } export interface UpdatePasswordFormProps< - Params extends FieldValues = UpdatePasswordSubmitParams + Params extends FieldValues = UpdatePasswordSubmitParams, > extends Omit, 'children'> { - passwordLabel?: string - confirmLabel?: string - helpText?: string - submitLabel?: string children?: React.ReactNode } export const UpdatePasswordForm: React.FC = ({ - submitLabel = 'Update password', - passwordLabel = 'New password', - confirmLabel = 'Confirm password', - helpText, children, ...formProps }) => { @@ -52,7 +44,7 @@ export const UpdatePasswordForm: React.FC = ({ = ({ = ({ {children} - {submitLabel} + Update password diff --git a/packages/saas-ui-auth/src/components/index.ts b/packages/saas-ui-auth/src/components/index.ts index 7a750d8e2..c4af7a8a3 100644 --- a/packages/saas-ui-auth/src/components/index.ts +++ b/packages/saas-ui-auth/src/components/index.ts @@ -1,42 +1,51 @@ -export { - ForgotPasswordForm, - type ForgotPasswordFormProps, +export { ForgotPasswordForm } from './forms/forgot-password-form' +export type { + ForgotPasswordFormProps, + ForgotPasswordSubmitParams, } from './forms/forgot-password-form' -export { - UpdatePasswordForm, - type UpdatePasswordFormProps, +export { UpdatePasswordForm } from './forms/update-password-form' +export type { + UpdatePasswordFormProps, + UpdatePasswordSubmitParams, } from './forms/update-password-form' -export { MagicLinkForm, type MagicLinkFormProps } from './forms/magic-link-form' - -export { OtpForm, type OtpFormProps } from './forms/otp-form' - -export { PasswordForm, type PasswordFormProps } from './forms/password-form' - -export { - Providers, - type ProvidersProps, - type Provider, - type AvailableProviders, +export { MagicLinkForm } from './forms/magic-link-form' +export type { + MagicLinkFormProps, + MagicLinkSubmitParams, +} from './forms/magic-link-form' + +export { OtpForm } from './forms/otp-form' +export type { OtpFormProps, OtpSubmitParams } from './forms/otp-form' + +export { PasswordForm } from './forms/password-form' +export type { + PasswordFormProps, + PasswordSubmitParams, +} from './forms/password-form' + +export { Providers } from './forms/providers' +export type { + ProvidersProps, + Provider, + AvailableProviders, } from './forms/providers' -export { - type AuthViewOptions, - type AuthFormOptions, - AuthFormContainer, - type AuthFormContainerProps, - AuthFormDivider, - type AuthFormDividerProps, - AuthFormTitle, +export { AuthFormContainer, AuthFormDivider, AuthFormTitle } from './auth-form' +export type { + AuthViewOptions, + AuthFormOptions, + AuthFormContainerProps, + AuthFormDividerProps, } from './auth-form' -export { Auth, type AuthProps, VIEWS } from './auth' +export { Auth, VIEWS } from './auth' + +export type { AuthProps, IntlTranslations, RedirectViews } from './auth' -export { - ForgotPasswordView, - type ForgotPasswordViewProps, -} from './forgot-password-view' +export { ForgotPasswordView } from './forgot-password-view' +export type { ForgotPasswordViewProps } from './forgot-password-view' export { LoginButton } from './login-button' @@ -46,9 +55,8 @@ export { OtpView } from './otp-view' export { ProviderButton } from './provider-button' -export { AuthFormSuccess, type AuthFormSuccessProps } from './success' +export { AuthFormSuccess } from './success' +export type { AuthFormSuccessProps } from './success' -export { - UpdatePasswordView, - type UpdatePasswordViewProps, -} from './update-password-view' +export { UpdatePasswordView } from './update-password-view' +export type { UpdatePasswordViewProps } from './update-password-view' diff --git a/packages/saas-ui-auth/src/components/login-button.tsx b/packages/saas-ui-auth/src/components/login-button.tsx index 9059eae66..988c46e0f 100644 --- a/packages/saas-ui-auth/src/components/login-button.tsx +++ b/packages/saas-ui-auth/src/components/login-button.tsx @@ -4,7 +4,6 @@ import { useTheme } from '@chakra-ui/react' import { SubmitButton, SubmitButtonProps } from '@saas-ui/forms' export const LoginButton: React.FC = (props) => { - const { children, ...rest } = props const theme = useTheme() const defaultProps = { @@ -14,11 +13,7 @@ export const LoginButton: React.FC = (props) => { ...theme.components?.LoginButton?.defaultProps, } - return ( - - {children} - - ) + return } LoginButton.displayName = 'LoginButton' diff --git a/packages/saas-ui-auth/src/components/login-view.tsx b/packages/saas-ui-auth/src/components/login-view.tsx index 92a100049..cdae02e97 100644 --- a/packages/saas-ui-auth/src/components/login-view.tsx +++ b/packages/saas-ui-auth/src/components/login-view.tsx @@ -1,5 +1,5 @@ import { HTMLChakraProps, ThemingProps } from '@chakra-ui/react' -import { SubmitHandler } from '@saas-ui/forms' +import { FormProps, SubmitHandler } from '@saas-ui/forms' import { useAuth, useLogin } from '../provider' import { AuthFormOptions, @@ -13,34 +13,31 @@ import { PasswordForm, PasswordSubmitParams } from './forms/password-form' import { Providers } from './forms/providers' import { AuthFormSuccess } from './success' -export const LoginView: React.FC = ( - props -) => { - const { title = 'Log in', submitLabel = 'Log in', ...rest } = props +export type LoginViewProps = PasswordViewProps | MagicLinkViewProps + +export const LoginView: React.FC = (props) => { + const { title = 'Log in', ...rest } = props if (props.type === 'password') { - return + return } - return + return } -export const SignupView: React.FC = ( - props -) => { - const { title = 'Sign up', submitLabel = 'Sign up', ...rest } = props - return ( - - ) +export const SignupView: React.FC = (props) => { + const { title = 'Sign up', ...rest } = props + return } SignupView.displayName = 'SignupView' -interface PasswordViewProps extends AuthViewOptions, AuthFormOptions { +interface PasswordViewProps + extends AuthViewOptions, + AuthFormOptions, + Omit< + FormProps, + 'title' | 'action' | 'defaultValues' | 'onSubmit' | 'onError' | 'children' + > { renderSuccess?: (data: any) => React.ReactElement } @@ -61,14 +58,13 @@ const PasswordView: React.FC = (props) => { dividerLabel, footer, redirectUrl, - oauthRedirectUrl, ...formProps } = props const [{ isResolved, data }, submit] = useLogin({ action }) const handleSubmit: SubmitHandler = (params) => { return submit(params, { - redirectTo: redirectUrl || oauthRedirectUrl, + redirectTo: redirectUrl, }) .then(onSuccess) .catch(onError) @@ -86,7 +82,6 @@ const PasswordView: React.FC = (props) => { providerLabel, dividerLabel, footer, - oauthRedirectUrl, redirectUrl, } @@ -101,7 +96,13 @@ const PasswordView: React.FC = (props) => { ) } -interface MagicLinkViewProps extends AuthViewOptions, AuthFormOptions { +interface MagicLinkViewProps + extends AuthViewOptions, + AuthFormOptions, + Omit< + FormProps, + 'title' | 'action' | 'defaultValues' | 'onSubmit' | 'onError' | 'children' + > { renderSuccess?: (data: any) => React.ReactElement } @@ -124,11 +125,10 @@ const MagicLinkView: React.FC = (props) => { dividerLabel, footer, redirectUrl, - oauthRedirectUrl, ...formProps } = props - const [{ isLoading, isResolved, data }, submit] = useLogin({ + const [{ isResolved, data }, submit] = useLogin({ action, }) @@ -150,7 +150,6 @@ const MagicLinkView: React.FC = (props) => { dividerLabel, footer, redirectUrl, - oauthRedirectUrl, } return ( @@ -179,7 +178,6 @@ const AuthFormWrapper: React.FC = (props) => { dividerLabel = 'or continue with', footer, children, - oauthRedirectUrl, redirectUrl, ...rest } = props diff --git a/packages/saas-ui-auth/src/components/success.tsx b/packages/saas-ui-auth/src/components/success.tsx index e7013c255..1df53b5c6 100644 --- a/packages/saas-ui-auth/src/components/success.tsx +++ b/packages/saas-ui-auth/src/components/success.tsx @@ -31,7 +31,9 @@ export const AuthFormSuccess: React.FC = ({ {title} - {description} + + {description} + ) } diff --git a/packages/saas-ui-auth/stories/auth.stories.tsx b/packages/saas-ui-auth/stories/auth.stories.tsx index d0e395138..8bc0d7b83 100644 --- a/packages/saas-ui-auth/stories/auth.stories.tsx +++ b/packages/saas-ui-auth/stories/auth.stories.tsx @@ -1,3 +1,4 @@ +import { Meta, StoryObj } from '@storybook/react' import { Container, Text } from '@chakra-ui/react' import * as React from 'react' @@ -8,6 +9,7 @@ import { User, AuthParams, AuthProviderProps, + AuthProps, } from '../src' import { Field } from '@saas-ui/forms' @@ -95,7 +97,9 @@ export default { ), ], -} +} as Meta + +type Story = StoryObj const availableProviders: AvailableProviders = { google: { @@ -108,15 +112,15 @@ const availableProviders: AvailableProviders = { }, } -export const Basic = {} +export const Basic: Story = {} -export const Providers = { +export const Providers: Story = { args: { providers: availableProviders, }, } -export const ButtonColor = { +export const ButtonColor: Story = { args: { providers: availableProviders, fields: { @@ -128,7 +132,7 @@ export const ButtonColor = { }, } -export const Password = { +export const Password: Story = { args: { type: 'password', fields: { @@ -150,20 +154,20 @@ export const Password = { }, } -export const Otp = { +export const Otp: Story = { args: { view: 'otp', }, } -export const Signup = { +export const Signup: Story = { args: { type: 'password', view: 'signup', }, } -export const SignupWithCustomFields = { +export const SignupWithCustomFields: Story = { render() { return ( @@ -176,19 +180,19 @@ export const SignupWithCustomFields = { }, } -export const ForgotPassword = { +export const ForgotPassword: Story = { args: { view: 'forgot_password', }, } -export const UpdatePassword = { +export const UpdatePassword: Story = { args: { view: 'update_password', }, } -export const ErrorHandler = { +export const ErrorHandler: Story = { render: () => { const snackbar = useSnackbar() @@ -204,3 +208,44 @@ export const ErrorHandler = { ) }, } + +export const SuccessHandler: Story = { + render: () => { + const snackbar = useSnackbar() + + return ( + { + if (view === 'login') { + snackbar.success('Login succesful') + } + }} + /> + ) + }, +} + +export const Translations: Story = { + args: { + type: 'password', + providers: availableProviders, + translations: { + signup: 'Aanmelden', + signupSubmit: 'Aanmelden', + login: 'Inloggen', + loginSubmit: 'Inloggen', + forgotPassword: 'Wachtwoord vergeten?', + forgotPasswordSubmit: 'Stuur reset link', + updatePassword: 'Wachtwoord wijzigen', + updatePasswordSubmit: 'Wachtwoord opslaan', + backToLogin: 'Terug naar inloggen', + noAccount: 'Nog geen account?', + haveAccount: 'Reeds aangemeld?', + otpSubmit: 'Verifiëren', + continueWith: 'Doorgaan met', + orContinueWith: 'of doorgaan met', + email: 'E-mail', + password: 'Wachtwoord', + }, + }, +} diff --git a/tooling/props-docs/dist/components/app-shell.json b/tooling/props-docs/dist/components/app-shell.json index 17d9002c9..769130deb 100644 --- a/tooling/props-docs/dist/components/app-shell.json +++ b/tooling/props-docs/dist/components/app-shell.json @@ -10,6 +10,11 @@ "required": false, "description": "The main content" }, + "colorScheme": { + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", + "required": false, + "description": "The visual color appearance of the component" + }, "footer": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "required": false, @@ -25,6 +30,17 @@ "type": "ReactElement>", "required": false, "description": "Main sidebar, positioned on the left" + }, + "size": { + "type": "string", + "required": false, + "description": "The size of the AppShell" + }, + "variant": { + "defaultValue": "fullscreen", + "type": "\"static\" | \"fullscreen\"", + "required": false, + "description": "The variant of the AppShell" } } } diff --git a/tooling/props-docs/dist/components/auth.json b/tooling/props-docs/dist/components/auth.json index 9413a5fc9..27b743a87 100644 --- a/tooling/props-docs/dist/components/auth.json +++ b/tooling/props-docs/dist/components/auth.json @@ -78,11 +78,6 @@ "required": false, "description": "Render custom elements under the submit button" }, - "oauthRedirectUrl": { - "type": "string", - "required": false, - "description": "The redirect URL after successful OAuth login" - }, "providerLabel": { "type": "string", "defaultValue": "Continue with", @@ -97,7 +92,7 @@ "redirectUrl": { "type": "string", "required": false, - "description": "The redirecet URL after succesful magic link or password login" + "description": "The redirect URL after succesful OAuth or Magic link login" }, "title": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", @@ -167,12 +162,6 @@ "required": false, "description": "The Hook Form state ref." }, - "haveAccount": { - "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", - "defaultValue": "Already have an account?", - "required": false, - "description": "Text shown before the loginLink" - }, "loginLink": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "defaultValue": "Log in", @@ -180,17 +169,6 @@ "description": "Customize the login link under the sign up form." }, "mode": { "type": "keyof ValidationMode", "required": false }, - "noAccount": { - "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", - "defaultValue": "No account?", - "required": false, - "description": "Text shown before the signupLink" - }, - "oauthRedirectUrl": { - "type": "string", - "required": false, - "description": "The redirect URL after successful OAuth login" - }, "onChange": { "type": "WatchObserver", "required": false, @@ -201,6 +179,16 @@ "required": false, "description": "Called when a login or signup request fails." }, + "onSuccess": { + "type": "(view: ViewType, data: any) => void", + "required": false, + "description": "Called when a login or signup request succeeds." + }, + "onViewChange": { + "type": "(view: ViewType) => void", + "required": false, + "description": "Called when the view changes." + }, "progressive": { "type": "boolean", "required": false }, "providerLabel": { "type": "string", @@ -214,9 +202,9 @@ "description": "The OAuth providers that are supported." }, "redirectUrl": { - "type": "string", + "type": "string | ((view: RedirectViews) => string | undefined)", "required": false, - "description": "The redirecet URL after succesful magic link or password login" + "description": "The redirect URL after succesful login\nThis will only redirect if implemented in the auth provider." }, "resetOptions": { "type": "Partial<{\n keepDirtyValues: boolean\n keepErrors: boolean\n keepDirty: boolean\n keepValues: boolean\n keepDefaultValues: boolean\n keepIsSubmitted: boolean\n keepTouched: boolean\n keepIsValid: boolean\n keepSubmitCount: boolean\n}>", @@ -246,6 +234,11 @@ "required": false, "description": "The form title" }, + "translations": { + "type": "Partial<{ signup: string; signupSubmit: string; signupSuccess: string; signupSuccessDescription: string; login: string; loginSubmit: string; magicLinkSuccess: string; magicLinkSuccessDescription: string; ... 17 more ...; confirmPassword: string; }>", + "required": false, + "description": "Internationalization options for the auth form." + }, "type": { "type": "AuthTypeEnum", "required": false, @@ -285,16 +278,10 @@ "description": "Callback executed after succesful login or signup" }, "onValidationError": { - "type": "(errors: FieldErrors) => void", + "type": "(errors: FieldErrors) => void", "required": false, "description": "Callback executed when there are validation errors" }, - "submitLabel": { - "type": "string", - "defaultValue": "Sign in", - "required": false, - "description": "Label for the submit button" - }, "title": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "required": false, @@ -323,7 +310,6 @@ "required": false }, "delayError": { "type": "number", "required": false }, - "emailLabel": { "type": "string", "required": false }, "fieldResolver": { "type": "FieldResolver", "required": false, @@ -339,7 +325,6 @@ "required": false, "description": "The Hook Form state ref." }, - "helpText": { "type": "string", "required": false }, "mode": { "type": "keyof ValidationMode", "required": false }, "onChange": { "type": "WatchObserver", @@ -369,7 +354,6 @@ "shouldFocusError": { "type": "boolean", "required": false }, "shouldUnregister": { "type": "boolean", "required": false }, "shouldUseNativeValidation": { "type": "boolean", "required": false }, - "submitLabel": { "type": "string", "required": false }, "values": { "type": "Params", "required": false } }, "ForgotPasswordView": { @@ -390,7 +374,6 @@ "required": false }, "delayError": { "type": "number", "required": false }, - "emailLabel": { "type": "string", "required": false }, "fieldResolver": { "type": "FieldResolver", "required": false, @@ -411,7 +394,6 @@ "required": false, "description": "The Hook Form state ref." }, - "helpText": { "type": "string", "required": false }, "mode": { "type": "keyof ValidationMode", "required": false }, "onChange": { "type": "WatchObserver", @@ -429,11 +411,16 @@ "description": "Callback executed after succesful login or signup" }, "onValidationError": { - "type": "(errors: FieldErrors) => void", + "type": "(errors: FieldErrors) => void", "required": false, "description": "Callback executed when there are validation errors" }, "progressive": { "type": "boolean", "required": false }, + "redirectUrl": { + "type": "string", + "required": false, + "description": "The URL where the user can save their new password." + }, "renderSuccess": { "type": "(\n data: any,\n) => ReactElement>", "required": false @@ -458,12 +445,6 @@ "shouldFocusError": { "type": "boolean", "required": false }, "shouldUnregister": { "type": "boolean", "required": false }, "shouldUseNativeValidation": { "type": "boolean", "required": false }, - "submitLabel": { - "type": "string", - "defaultValue": "Sign in", - "required": false, - "description": "Label for the submit button" - }, "title": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "required": false, @@ -493,7 +474,6 @@ "required": false }, "delayError": { "type": "number", "required": false }, - "emailLabel": { "type": "string", "required": false }, "fieldResolver": { "type": "FieldResolver", "required": false, @@ -538,7 +518,6 @@ "shouldFocusError": { "type": "boolean", "required": false }, "shouldUnregister": { "type": "boolean", "required": false }, "shouldUseNativeValidation": { "type": "boolean", "required": false }, - "submitLabel": { "type": "string", "required": false }, "values": { "type": "Params", "required": false } }, "OtpForm": { @@ -549,8 +528,7 @@ }, "children": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", - "required": false, - "description": "The form children, can be a render prop or a ReactNode." + "required": false }, "context": { "type": "object", "required": false }, "criteriaMode": { "type": "CriteriaMode", "required": false }, @@ -574,7 +552,6 @@ "required": false, "description": "The Hook Form state ref." }, - "helpText": { "type": "string", "required": false }, "mode": { "type": "keyof ValidationMode", "required": false }, "onChange": { "type": "WatchObserver", @@ -586,7 +563,6 @@ "required": false, "description": "Triggers when there are validation errors." }, - "otpLabel": { "type": "string", "required": false }, "pinLength": { "type": "number", "required": false }, "progressive": { "type": "boolean", "required": false }, "resetOptions": { @@ -606,7 +582,6 @@ "shouldFocusError": { "type": "boolean", "required": false }, "shouldUnregister": { "type": "boolean", "required": false }, "shouldUseNativeValidation": { "type": "boolean", "required": false }, - "submitLabel": { "type": "string", "required": false }, "values": { "type": "Params", "required": false } }, "PasswordForm": { @@ -626,7 +601,6 @@ "required": false }, "delayError": { "type": "number", "required": false }, - "emailLabel": { "type": "string", "required": false }, "fieldResolver": { "type": "FieldResolver", "required": false, @@ -653,7 +627,6 @@ "required": false, "description": "Triggers when there are validation errors." }, - "passwordLabel": { "type": "string", "required": false }, "progressive": { "type": "boolean", "required": false }, "resetOptions": { "type": "Partial<{\n keepDirtyValues: boolean\n keepErrors: boolean\n keepDirty: boolean\n keepValues: boolean\n keepDefaultValues: boolean\n keepIsSubmitted: boolean\n keepTouched: boolean\n keepIsValid: boolean\n keepSubmitCount: boolean\n}>", @@ -672,7 +645,6 @@ "shouldFocusError": { "type": "boolean", "required": false }, "shouldUnregister": { "type": "boolean", "required": false }, "shouldUseNativeValidation": { "type": "boolean", "required": false }, - "submitLabel": { "type": "string", "required": false }, "values": { "type": "Params", "required": false } }, "Providers": { @@ -703,7 +675,6 @@ "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "required": false }, - "confirmLabel": { "type": "string", "required": false }, "context": { "type": "object", "required": false }, "criteriaMode": { "type": "CriteriaMode", "required": false }, "defaultValues": { @@ -726,7 +697,6 @@ "required": false, "description": "The Hook Form state ref." }, - "helpText": { "type": "string", "required": false }, "mode": { "type": "keyof ValidationMode", "required": false }, "onChange": { "type": "WatchObserver", @@ -738,7 +708,6 @@ "required": false, "description": "Triggers when there are validation errors." }, - "passwordLabel": { "type": "string", "required": false }, "progressive": { "type": "boolean", "required": false }, "resetOptions": { "type": "Partial<{\n keepDirtyValues: boolean\n keepErrors: boolean\n keepDirty: boolean\n keepValues: boolean\n keepDefaultValues: boolean\n keepIsSubmitted: boolean\n keepTouched: boolean\n keepIsValid: boolean\n keepSubmitCount: boolean\n}>", @@ -757,7 +726,6 @@ "shouldFocusError": { "type": "boolean", "required": false }, "shouldUnregister": { "type": "boolean", "required": false }, "shouldUseNativeValidation": { "type": "boolean", "required": false }, - "submitLabel": { "type": "string", "required": false }, "values": { "type": "Params", "required": false } }, "UpdatePasswordView": { @@ -771,7 +739,6 @@ "required": false, "description": "Children are passed down to the underlying form" }, - "confirmLabel": { "type": "string", "required": false }, "context": { "type": "object", "required": false }, "criteriaMode": { "type": "CriteriaMode", "required": false }, "defaultValues": { @@ -799,7 +766,6 @@ "required": false, "description": "The Hook Form state ref." }, - "helpText": { "type": "string", "required": false }, "mode": { "type": "keyof ValidationMode", "required": false }, "onChange": { "type": "WatchObserver", @@ -817,11 +783,10 @@ "description": "Callback executed after succesful login or signup" }, "onValidationError": { - "type": "(errors: FieldErrors) => void", + "type": "(errors: FieldErrors) => void", "required": false, "description": "Callback executed when there are validation errors" }, - "passwordLabel": { "type": "string", "required": false }, "progressive": { "type": "boolean", "required": false }, "renderSuccess": { "type": "(\n data: any,\n) => ReactElement>", @@ -847,12 +812,6 @@ "shouldFocusError": { "type": "boolean", "required": false }, "shouldUnregister": { "type": "boolean", "required": false }, "shouldUseNativeValidation": { "type": "boolean", "required": false }, - "submitLabel": { - "type": "string", - "defaultValue": "Sign in", - "required": false, - "description": "Label for the submit button" - }, "title": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "required": false, diff --git a/tooling/props-docs/dist/components/banner.json b/tooling/props-docs/dist/components/banner.json index e3d7dcf81..2624257c1 100644 --- a/tooling/props-docs/dist/components/banner.json +++ b/tooling/props-docs/dist/components/banner.json @@ -135,6 +135,12 @@ "required": false }, "className": { "type": "string", "required": false }, + "colorScheme": { + "defaultValue": "blue", + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", + "required": false, + "description": "The visual color appearance of the component" + }, "content": { "type": "string", "required": false }, "contentEditable": { "type": "\"inherit\" | Booleanish", @@ -1023,6 +1029,11 @@ "rev": { "type": "string", "required": false }, "role": { "type": "AriaRole", "required": false }, "security": { "type": "string", "required": false }, + "size": { + "type": "string", + "required": false, + "description": "The size of the Banner" + }, "slot": { "type": "string", "required": false }, "spellCheck": { "type": "Booleanish", "required": false }, "status": { @@ -1052,6 +1063,12 @@ "translate": { "type": "\"yes\" | \"no\"", "required": false }, "typeof": { "type": "string", "required": false }, "unselectable": { "type": "\"on\" | \"off\"", "required": false }, + "variant": { + "defaultValue": "subtle", + "type": "\"subtle\" | \"solid\"", + "required": false, + "description": "The variant of the Banner" + }, "variants": { "type": "Variants", "required": false, diff --git a/tooling/props-docs/dist/components/data-grid.json b/tooling/props-docs/dist/components/data-grid.json index 550b98f7e..0e5666795 100644 --- a/tooling/props-docs/dist/components/data-grid.json +++ b/tooling/props-docs/dist/components/data-grid.json @@ -53,6 +53,11 @@ "required": false, "description": "Determines when the columnSizing state is updated. `onChange` updates the state when the user is dragging the resize handle. `onEnd` updates the state when the user releases the resize handle." }, + "columnVirtualizerOptions": { + "type": "VirtualizerOptions<\n HTMLDivElement,\n HTMLTableRowElement\n> & { enabled?: boolean | undefined }", + "required": false, + "description": "React Virtual options for the column virtualizer" + }, "debugAll": { "type": "boolean", "required": false, @@ -83,6 +88,11 @@ "required": false, "description": "Default column options to use for all column defs supplied to the table." }, + "emptyState": { + "type": "FC", + "required": false, + "description": "Empty state component, rendered when there is no data and no filters enabled." + }, "enableColumnFilters": { "type": "boolean", "required": false, @@ -335,7 +345,7 @@ "noResults": { "type": "FC", "required": false, - "description": "No results component" + "description": "No results component, rendered when filters are enabled and there are no results." }, "onColumnFiltersChange": { "type": "OnChangeFn", @@ -447,6 +457,11 @@ "required": false, "description": "Value used when the desired value is not found in the data." }, + "rowVirtualizerOptions": { + "type": "VirtualizerOptions<\n HTMLDivElement,\n HTMLTableRowElement\n> & { enabled?: boolean | undefined }", + "required": false, + "description": "React Virtual options for the row virtualizer" + }, "sortDescFirst": { "type": "boolean", "required": false, @@ -461,17 +476,17 @@ "required": false, "description": "The `state` option can be used to optionally _control_ part or all of the table state. The state you pass here will merge with and overwrite the internal automatically-managed state to produce the final state for the table. You can also listen to state changes via the `onStateChange` option.\n> Note: Any state passed in here will override both the internal state and any other `initialState` you provide." }, + "stickyHeader": { + "type": "boolean", + "defaultValue": true, + "required": false, + "description": "Set to false to disable sticky headers" + }, "sx": { "type": "SystemStyleObject", "required": false, "description": "Grid styles" }, - "tableLayout": { - "type": "\"auto\" | \"fixed\"", - "defaultValue": "fixed", - "required": false, - "description": "CSS table-layout property" - }, "virtualizerProps": { "type": "VirtualizerOptions", "required": false, diff --git a/tooling/props-docs/dist/components/empty-state.json b/tooling/props-docs/dist/components/empty-state.json index b29fdbed5..e09384bf8 100644 --- a/tooling/props-docs/dist/components/empty-state.json +++ b/tooling/props-docs/dist/components/empty-state.json @@ -8,6 +8,11 @@ "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "required": false }, + "colorScheme": { + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", + "required": false, + "description": "The visual color appearance of the component" + }, "description": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "required": false @@ -17,6 +22,11 @@ "required": false }, "icon": { "type": "As", "required": false }, + "size": { + "type": "string", + "required": false, + "description": "The size of the EmptyState" + }, "spacing": { "type": "ResponsiveValue", "required": false @@ -24,6 +34,11 @@ "title": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "required": false + }, + "variant": { + "type": "\"centered\"", + "required": false, + "description": "The variant of the EmptyState" } }, "EmptyStateContainer": { diff --git a/tooling/props-docs/dist/components/filters.json b/tooling/props-docs/dist/components/filters.json index 909f89fca..8c5a633a8 100644 --- a/tooling/props-docs/dist/components/filters.json +++ b/tooling/props-docs/dist/components/filters.json @@ -381,6 +381,7 @@ "description": "The value to used in controlled mode" } }, + "ActiveFilterRemove": {}, "ActiveFilter": { "id": { "type": "string", "required": true }, "defaultOperator": { "type": "FilterOperatorId", "required": false }, @@ -638,7 +639,7 @@ "title": { "type": "string", "required": false } }, "FilterOperatorId": { - "__@iterator@389453": { + "__@iterator@392252": { "type": "() => IterableIterator", "required": true, "description": "Iterator" @@ -890,7 +891,7 @@ } }, "FilterType": { - "__@iterator@389453": { + "__@iterator@392252": { "type": "() => IterableIterator", "required": true, "description": "Iterator" @@ -1142,7 +1143,7 @@ } }, "FilterOperator": { - "__@iterator@389453": { + "__@iterator@392252": { "type": "() => IterableIterator", "required": true, "description": "Iterator" diff --git a/tooling/props-docs/dist/components/forms.json b/tooling/props-docs/dist/components/forms.json index ae588e209..9e2bc1948 100644 --- a/tooling/props-docs/dist/components/forms.json +++ b/tooling/props-docs/dist/components/forms.json @@ -76,6 +76,11 @@ "required": false, "description": "Shorthand prop for `gridAutoRows`" }, + "colorScheme": { + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", + "required": false, + "description": "The visual color appearance of the component" + }, "column": { "type": "ResponsiveValue", "required": false, @@ -111,6 +116,11 @@ "required": false, "description": "Shorthand prop for `gridRowGap`" }, + "size": { + "type": "string", + "required": false, + "description": "The size of the FormLayout" + }, "spacing": { "type": "ResponsiveValue", "required": false, @@ -140,6 +150,11 @@ "type": "ResponsiveValue>", "required": false, "description": "Shorthand prop for `gridTemplateRows`" + }, + "variant": { + "type": "string", + "required": false, + "description": "The variant of the FormLayout" } }, "SubmitButton": { @@ -793,12 +808,12 @@ "values": { "type": "TFieldValues", "required": false } }, "StepsOptions": { - "__@iterator@40401": { + "__@iterator@40648": { "type": "() => IterableIterator<{\n name: TName\n schema?: TSchema | undefined\n}>", "required": true, "description": "Iterator" }, - "__@unscopables@41852": { + "__@unscopables@42099": { "type": "{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; ... 35 more ...; readonly [Symbol.unscopables]?: boolean | undefined; }", "required": true, "description": "Is an object whose properties have the value 'true'\nwhen they will be absent when used in a 'with' statement." @@ -1294,7 +1309,7 @@ "description": "If `true`, the menu will close when a menu item is\nclicked" }, "colorScheme": { - "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\"", + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", "required": false, "description": "The visual color appearance of the component" }, @@ -1531,12 +1546,12 @@ } }, "RadioOptions": { - "__@iterator@40401": { + "__@iterator@40648": { "type": "type ONLY_FOR_FORMAT =\n | (() => IterableIterator)\n | (() => IterableIterator)", "required": true, "description": "Iterator" }, - "__@unscopables@41852": { + "__@unscopables@42099": { "type": "{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; ... 35 more ...; readonly [Symbol.unscopables]?: boolean | undefined; } | { ...; }", "required": true, "description": "Is an object whose properties have the value 'true'\nwhen they will be absent when used in a 'with' statement." @@ -2606,12 +2621,12 @@ } }, "FieldOptions": { - "__@iterator@40401": { + "__@iterator@40648": { "type": "type ONLY_FOR_FORMAT =\n | (() => IterableIterator)\n | (() => IterableIterator)", "required": true, "description": "Iterator" }, - "__@unscopables@41852": { + "__@unscopables@42099": { "type": "{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; ... 35 more ...; readonly [Symbol.unscopables]?: boolean | undefined; } | { ...; }", "required": true, "description": "Is an object whose properties have the value 'true'\nwhen they will be absent when used in a 'with' statement." @@ -2836,6 +2851,11 @@ "required": false, "description": "The form children, can be a render prop or a ReactNode." }, + "colorScheme": { + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", + "required": false, + "description": "The visual color appearance of the component" + }, "context": { "type": "TContext", "required": false }, "criteriaMode": { "type": "CriteriaMode", "required": false }, "defaultValues": { @@ -2890,7 +2910,17 @@ "shouldFocusError": { "type": "boolean", "required": false }, "shouldUnregister": { "type": "boolean", "required": false }, "shouldUseNativeValidation": { "type": "boolean", "required": false }, - "values": { "type": "TFieldValues", "required": false } + "size": { + "type": "string", + "required": false, + "description": "The size of the Form" + }, + "values": { "type": "TFieldValues", "required": false }, + "variant": { + "type": "\"horizontal\"", + "required": false, + "description": "The variant of the Form" + } }, "CreateStepForm": { "fieldResolver": { "type": "GetFieldResolver", "required": false }, diff --git a/tooling/props-docs/dist/components/hotkeys.json b/tooling/props-docs/dist/components/hotkeys.json index f64921288..54a59f280 100644 --- a/tooling/props-docs/dist/components/hotkeys.json +++ b/tooling/props-docs/dist/components/hotkeys.json @@ -32,38 +32,30 @@ "description": "The element to attach the event listener to." } }, - "HotkeysGroupListOptions": {}, - "HotkeysGroupOptions": { - "hotkeys": { - "type": "HotkeysGroupListOptions", + "Hotkey": { + "callback": { + "type": "() => void", "required": true, - "description": "Hotkeys in this group" + "description": "Callback to be called when the key combination is pressed" + }, + "children": { + "type": "type ONLY_FOR_FORMAT =\n | string\n | ReactElement>\n | ((props: {\n keys: string | string[]\n ariaKeyshortcuts?: string | undefined\n }) => ReactNode)", + "required": true, + "description": "A single child or render prop function" }, - "title": { - "type": "string", - "required": false, - "description": "The group title" - } - }, - "HotkeysGroup": { "title": { "type": "string", "required": false } }, - "HotkeysItemOptions": { "command": { - "type": "string", + "type": "string | string[]", "required": true, "description": "The key combination.\nSupports shorthands: ⌥ ⇧ ⌃ ⌘\n\nShifted keys like ? and + are handled automatically" }, - "label": { - "type": "string", - "required": true, - "description": "Label describing the function of this keyboard shortcut" + "hotkeyOptions": { + "type": "UseHotkeysOptions", + "required": false, + "description": "Options for the useHotkeys hook" } }, + "HotkeysGroup": { "title": { "type": "string", "required": false } }, "HotkeysItem": { "command": { "type": "string", "required": true } }, - "HotkeysListOptions": {}, - "HotkeysList": { - "hotkeys": { "type": "HotkeysListOptions", "required": true } - }, - "HotkeysOptions": { - "hotkeys": { "type": "HotkeysListOptions", "required": true } - } + "HotkeysList": { "hotkeys": { "type": "HotkeysConfig", "required": true } }, + "HotkeysOptions": { "hotkeys": { "type": "HotkeysConfig", "required": true } } } diff --git a/tooling/props-docs/dist/components/icon-badge.json b/tooling/props-docs/dist/components/icon-badge.json index 4486d4a46..e234d8db0 100644 --- a/tooling/props-docs/dist/components/icon-badge.json +++ b/tooling/props-docs/dist/components/icon-badge.json @@ -5,6 +5,11 @@ "required": false, "description": "A11y: A label that describes the icon" }, + "colorScheme": { + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", + "required": false, + "description": "The visual color appearance of the component" + }, "icon": { "type": "ReactElement>", "required": false, @@ -16,6 +21,18 @@ "required": false, "description": "If `true`, the badge will be perfectly round. Else, it'll be slightly round" }, - "orientation": { "type": "Orientation", "required": false } + "orientation": { "type": "Orientation", "required": false }, + "size": { + "defaultValue": "md", + "type": "\"sm\" | \"md\" | \"lg\" | \"xl\"", + "required": false, + "description": "The size of the IconBadge" + }, + "variant": { + "defaultValue": "outline", + "type": "\"outline\" | \"solid\"", + "required": false, + "description": "The variant of the IconBadge" + } } } diff --git a/tooling/props-docs/dist/components/loading-overlay.json b/tooling/props-docs/dist/components/loading-overlay.json index f6e340287..5d69d98e1 100644 --- a/tooling/props-docs/dist/components/loading-overlay.json +++ b/tooling/props-docs/dist/components/loading-overlay.json @@ -1,5 +1,10 @@ { "LoadingOverlay": { + "colorScheme": { + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", + "required": false, + "description": "The visual color appearance of the component" + }, "isLoading": { "type": "boolean", "defaultValue": true, @@ -12,12 +17,22 @@ "required": false, "description": "The transition that should be used for the overlay" }, + "size": { + "type": "string", + "required": false, + "description": "The size of the LoadingOverlay" + }, "spacing": { "type": "ResponsiveValue", "required": false, "description": "Spacing between children" }, - "variant": { "type": "any", "defaultValue": "fill", "required": false } + "variant": { + "defaultValue": "fill", + "type": "\"fill\" | \"fullscreen\" | \"overlay\"", + "required": false, + "description": "The variant of the LoadingOverlay" + } }, "LoadingText": {}, "LoadingSpinner": { diff --git a/tooling/props-docs/dist/components/modals.json b/tooling/props-docs/dist/components/modals.json index 05a24ee9e..8865e11cd 100644 --- a/tooling/props-docs/dist/components/modals.json +++ b/tooling/props-docs/dist/components/modals.json @@ -384,11 +384,6 @@ "required": false, "description": "If `true`, the modal will close when the overlay is clicked" }, - "colorScheme": { - "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\"", - "required": false, - "description": "The visual color appearance of the component" - }, "contentProps": { "type": "ModalContentProps", "required": false, @@ -483,12 +478,6 @@ "required": false, "description": "If `true`, the modal will return focus to the element that triggered it when it closes." }, - "size": { - "defaultValue": "xs", - "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\"", - "required": false, - "description": "The size of the Drawer" - }, "title": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "required": false, @@ -505,11 +494,6 @@ "defaultValue": true, "required": false, "description": "A11y: If `true`, the siblings of the `modal` will have `aria-hidden`\nset to `true` so that screen readers can only see the `modal`.\n\nThis is commonly known as making the other elements **inert**" - }, - "variant": { - "type": "string", - "required": false, - "description": "The variant of the Drawer" } }, "BaseModal": { diff --git a/tooling/props-docs/dist/components/navbar.json b/tooling/props-docs/dist/components/navbar.json index 0493b18d5..c1343f56a 100644 --- a/tooling/props-docs/dist/components/navbar.json +++ b/tooling/props-docs/dist/components/navbar.json @@ -4,6 +4,11 @@ "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode\n | ReactNode[]", "required": false }, + "colorScheme": { + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", + "required": false, + "description": "The visual color appearance of the component" + }, "disableScrollHandler": { "type": "boolean", "defaultValue": false, @@ -58,10 +63,20 @@ "required": false, "description": "Whether the navbar should hide on scroll or not." }, + "size": { + "type": "string", + "required": false, + "description": "The size of the Navbar" + }, "style": { "type": "CSSProperties", "required": false, "description": "Style props to be applied to the navbar container." + }, + "variant": { + "type": "string", + "required": false, + "description": "The variant of the Navbar" } }, "NavbarBrand": { diff --git a/tooling/props-docs/dist/components/nprogress.json b/tooling/props-docs/dist/components/nprogress.json index 646b59e93..c6dc8c32d 100644 --- a/tooling/props-docs/dist/components/nprogress.json +++ b/tooling/props-docs/dist/components/nprogress.json @@ -4,6 +4,22 @@ "type": "boolean", "required": true, "description": "Set to true to start the progress animation." + }, + "colorScheme": { + "defaultValue": "primary", + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", + "required": false, + "description": "The visual color appearance of the component" + }, + "size": { + "type": "string", + "required": false, + "description": "The size of the NProgress" + }, + "variant": { + "type": "string", + "required": false, + "description": "The variant of the NProgress" } } } diff --git a/tooling/props-docs/dist/components/persona.json b/tooling/props-docs/dist/components/persona.json index 45b920ab9..ff6547bc7 100644 --- a/tooling/props-docs/dist/components/persona.json +++ b/tooling/props-docs/dist/components/persona.json @@ -5,6 +5,11 @@ "required": false, "description": "The badge size. Defaults to 1em. Use em value to keep the size relative to the avatar." }, + "colorScheme": { + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", + "required": false, + "description": "The visual color appearance of the component" + }, "crossOrigin": { "type": "\"\" | \"anonymous\" | \"use-credentials\"", "required": false @@ -87,6 +92,12 @@ "required": false, "description": "If `true`, the `Avatar` will show a border around it.\n\nBest for a group of avatars" }, + "size": { + "defaultValue": "md", + "type": "\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"", + "required": false, + "description": "The size of the Persona" + }, "src": { "type": "string", "required": false, @@ -101,6 +112,11 @@ "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "required": false, "description": "Tertiary label, usually the status of the person.\nOnly visible from lg size and up." + }, + "variant": { + "type": "string", + "required": false, + "description": "The variant of the Persona" } }, "PersonaContainer": {}, diff --git a/tooling/props-docs/dist/components/property.json b/tooling/props-docs/dist/components/property.json index 6be94e642..1d6389c32 100644 --- a/tooling/props-docs/dist/components/property.json +++ b/tooling/props-docs/dist/components/property.json @@ -18,6 +18,11 @@ } }, "Property": { + "colorScheme": { + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", + "required": false, + "description": "The visual color appearance of the component" + }, "label": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "required": false @@ -26,6 +31,11 @@ "type": "ResponsiveValue", "required": false }, + "size": { + "type": "string", + "required": false, + "description": "The size of the Property" + }, "spacing": { "type": "ResponsiveValue", "required": false @@ -33,6 +43,11 @@ "value": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "required": false + }, + "variant": { + "type": "string", + "required": false, + "description": "The variant of the Property" } }, "PropertyValue": {} diff --git a/tooling/props-docs/dist/components/search-input.json b/tooling/props-docs/dist/components/search-input.json index 4e05ba762..ab3918577 100644 --- a/tooling/props-docs/dist/components/search-input.json +++ b/tooling/props-docs/dist/components/search-input.json @@ -1,5 +1,10 @@ { "SearchInput": { + "colorScheme": { + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", + "required": false, + "description": "The visual color appearance of the component" + }, "errorBorderColor": { "type": "string", "required": false, @@ -64,6 +69,16 @@ "type": "ReactElement>", "required": false, "description": "Right element rendered when the value is empty" + }, + "size": { + "type": "\"sm\" | \"lg\"", + "required": false, + "description": "The size of the SearchInput" + }, + "variant": { + "type": "string", + "required": false, + "description": "The variant of the SearchInput" } } } diff --git a/tooling/props-docs/dist/components/sidebar.json b/tooling/props-docs/dist/components/sidebar.json index 2c4a8bd5e..9d013e1c1 100644 --- a/tooling/props-docs/dist/components/sidebar.json +++ b/tooling/props-docs/dist/components/sidebar.json @@ -34,6 +34,11 @@ }, "SidebarOverlay": {}, "Sidebar": { + "colorScheme": { + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", + "required": false, + "description": "The visual color appearance of the component" + }, "isOpen": { "type": "boolean", "required": false, @@ -74,6 +79,11 @@ "required": false, "description": "Callback invoked when the sidebar is opened." }, + "size": { + "type": "string", + "required": false, + "description": "The size of the Sidebar" + }, "spacing": { "type": "ResponsiveValue", "required": false, @@ -84,6 +94,12 @@ "defaultValue": "lg", "required": false, "description": "Define the for the mobile nav. Use `false` to disable the mobile nav." + }, + "variant": { + "defaultValue": "default", + "type": "\"default\" | \"compact\"", + "required": false, + "description": "The variant of the Sidebar" } }, "SidebarSection": { @@ -135,6 +151,11 @@ } }, "NavGroup": { + "colorScheme": { + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", + "required": false, + "description": "The visual color appearance of the component" + }, "defaultIsOpen": { "type": "boolean", "required": false }, "icon": { "type": "ReactElement>", @@ -143,9 +164,19 @@ "isCollapsible": { "type": "boolean", "required": false }, "onClose": { "type": "() => void", "required": false }, "onOpen": { "type": "() => void", "required": false }, + "size": { + "type": "string", + "required": false, + "description": "The size of the NavGroup" + }, "title": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "required": false + }, + "variant": { + "type": "string", + "required": false, + "description": "The variant of the NavGroup" } }, "NavGroupTitle": { @@ -161,6 +192,12 @@ }, "NavItemLabel": {}, "NavItem": { + "colorScheme": { + "defaultValue": "primary", + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", + "required": false, + "description": "The visual color appearance of the component" + }, "href": { "type": "string", "required": false, @@ -181,10 +218,22 @@ "required": false, "description": "If `true`, the nav item will be active" }, + "size": { + "defaultValue": "sm", + "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"", + "required": false, + "description": "The size of the NavItem" + }, "tooltipProps": { "type": "Omit", "required": false, "description": "Props to be passed to the tooltip" + }, + "variant": { + "defaultValue": "neutral", + "type": "\"neutral\" | \"subtle\" | \"solid\" | \"left-accent\"", + "required": false, + "description": "The variant of the NavItem" } } } diff --git a/tooling/props-docs/dist/components/src.json b/tooling/props-docs/dist/components/src.json deleted file mode 100644 index 646b59e93..000000000 --- a/tooling/props-docs/dist/components/src.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "NProgress": { - "isAnimating": { - "type": "boolean", - "required": true, - "description": "Set to true to start the progress animation." - } - } -} diff --git a/tooling/props-docs/dist/components/structured-list.json b/tooling/props-docs/dist/components/structured-list.json index 93de33d44..9cd8d4e09 100644 --- a/tooling/props-docs/dist/components/structured-list.json +++ b/tooling/props-docs/dist/components/structured-list.json @@ -1,9 +1,25 @@ { "StructuredList": { + "colorScheme": { + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", + "required": false, + "description": "The visual color appearance of the component" + }, "items": { "type": "StructuredListItemProps[]", "required": false, "description": "An array of list items" + }, + "size": { + "defaultValue": "md", + "type": "\"sm\" | \"md\"", + "required": false, + "description": "The size of the StructuredList" + }, + "variant": { + "type": "string", + "required": false, + "description": "The variant of the StructuredList" } }, "StructuredListHeader": { diff --git a/tooling/props-docs/dist/components/timeline.json b/tooling/props-docs/dist/components/timeline.json index 5520f5710..e11799e02 100644 --- a/tooling/props-docs/dist/components/timeline.json +++ b/tooling/props-docs/dist/components/timeline.json @@ -3,7 +3,25 @@ "TimelineDot": {}, "TimelineIcon": {}, "TimelineItem": {}, - "Timeline": {}, + "Timeline": { + "colorScheme": { + "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\" | \"primary\" | \"secondary\" | \"indigo\"", + "required": false, + "description": "The visual color appearance of the component" + }, + "size": { + "defaultValue": "sm", + "type": "\"sm\"", + "required": false, + "description": "The size of the Timeline" + }, + "variant": { + "defaultValue": "solid", + "type": "\"solid\" | \"outline\"", + "required": false, + "description": "The variant of the Timeline" + } + }, "TimelineSeparator": {}, "TimelineTrack": {} } diff --git a/tooling/props-docs/dist/index.d.ts b/tooling/props-docs/dist/index.d.ts index 1789d04f7..ee77020f0 100644 --- a/tooling/props-docs/dist/index.d.ts +++ b/tooling/props-docs/dist/index.d.ts @@ -16,7 +16,6 @@ export declare const Toggle: PropDoc export declare const Timeline: PropDoc export declare const StructuredList: PropDoc export declare const Stepper: PropDoc -export declare const Src: PropDoc export declare const Snackbar: PropDoc export declare const Sidebar: PropDoc export declare const SearchInput: PropDoc diff --git a/tooling/props-docs/dist/index.js b/tooling/props-docs/dist/index.js index 054dbaef5..393b340b2 100644 --- a/tooling/props-docs/dist/index.js +++ b/tooling/props-docs/dist/index.js @@ -5,7 +5,6 @@ const Toggle = require('./components/toggle.json') const Timeline = require('./components/timeline.json') const StructuredList = require('./components/structured-list.json') const Stepper = require('./components/stepper.json') -const Src = require('./components/src.json') const Snackbar = require('./components/snackbar.json') const Sidebar = require('./components/sidebar.json') const SearchInput = require('./components/search-input.json') @@ -49,7 +48,6 @@ const json = { Timeline, StructuredList, Stepper, - Src, Snackbar, Sidebar, SearchInput, @@ -102,7 +100,6 @@ module.exports = { Timeline, StructuredList, Stepper, - Src, Snackbar, Sidebar, SearchInput, diff --git a/tooling/props-docs/dist/index.mjs b/tooling/props-docs/dist/index.mjs index e6687c6b5..2671e10b3 100644 --- a/tooling/props-docs/dist/index.mjs +++ b/tooling/props-docs/dist/index.mjs @@ -5,7 +5,6 @@ import ToggleJson from './components/toggle.json' import TimelineJson from './components/timeline.json' import StructuredListJson from './components/structured-list.json' import StepperJson from './components/stepper.json' -import SrcJson from './components/src.json' import SnackbarJson from './components/snackbar.json' import SidebarJson from './components/sidebar.json' import SearchInputJson from './components/search-input.json' @@ -48,7 +47,6 @@ export const Toggle = ToggleJson export const Timeline = TimelineJson export const StructuredList = StructuredListJson export const Stepper = StepperJson -export const Src = SrcJson export const Snackbar = SnackbarJson export const Sidebar = SidebarJson export const SearchInput = SearchInputJson @@ -92,7 +90,6 @@ Toggle, Timeline, StructuredList, Stepper, -Src, Snackbar, Sidebar, SearchInput, diff --git a/tooling/props-docs/generated/auth.json b/tooling/props-docs/generated/auth.json index 9413a5fc9..27b743a87 100644 --- a/tooling/props-docs/generated/auth.json +++ b/tooling/props-docs/generated/auth.json @@ -78,11 +78,6 @@ "required": false, "description": "Render custom elements under the submit button" }, - "oauthRedirectUrl": { - "type": "string", - "required": false, - "description": "The redirect URL after successful OAuth login" - }, "providerLabel": { "type": "string", "defaultValue": "Continue with", @@ -97,7 +92,7 @@ "redirectUrl": { "type": "string", "required": false, - "description": "The redirecet URL after succesful magic link or password login" + "description": "The redirect URL after succesful OAuth or Magic link login" }, "title": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", @@ -167,12 +162,6 @@ "required": false, "description": "The Hook Form state ref." }, - "haveAccount": { - "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", - "defaultValue": "Already have an account?", - "required": false, - "description": "Text shown before the loginLink" - }, "loginLink": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "defaultValue": "Log in", @@ -180,17 +169,6 @@ "description": "Customize the login link under the sign up form." }, "mode": { "type": "keyof ValidationMode", "required": false }, - "noAccount": { - "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", - "defaultValue": "No account?", - "required": false, - "description": "Text shown before the signupLink" - }, - "oauthRedirectUrl": { - "type": "string", - "required": false, - "description": "The redirect URL after successful OAuth login" - }, "onChange": { "type": "WatchObserver", "required": false, @@ -201,6 +179,16 @@ "required": false, "description": "Called when a login or signup request fails." }, + "onSuccess": { + "type": "(view: ViewType, data: any) => void", + "required": false, + "description": "Called when a login or signup request succeeds." + }, + "onViewChange": { + "type": "(view: ViewType) => void", + "required": false, + "description": "Called when the view changes." + }, "progressive": { "type": "boolean", "required": false }, "providerLabel": { "type": "string", @@ -214,9 +202,9 @@ "description": "The OAuth providers that are supported." }, "redirectUrl": { - "type": "string", + "type": "string | ((view: RedirectViews) => string | undefined)", "required": false, - "description": "The redirecet URL after succesful magic link or password login" + "description": "The redirect URL after succesful login\nThis will only redirect if implemented in the auth provider." }, "resetOptions": { "type": "Partial<{\n keepDirtyValues: boolean\n keepErrors: boolean\n keepDirty: boolean\n keepValues: boolean\n keepDefaultValues: boolean\n keepIsSubmitted: boolean\n keepTouched: boolean\n keepIsValid: boolean\n keepSubmitCount: boolean\n}>", @@ -246,6 +234,11 @@ "required": false, "description": "The form title" }, + "translations": { + "type": "Partial<{ signup: string; signupSubmit: string; signupSuccess: string; signupSuccessDescription: string; login: string; loginSubmit: string; magicLinkSuccess: string; magicLinkSuccessDescription: string; ... 17 more ...; confirmPassword: string; }>", + "required": false, + "description": "Internationalization options for the auth form." + }, "type": { "type": "AuthTypeEnum", "required": false, @@ -285,16 +278,10 @@ "description": "Callback executed after succesful login or signup" }, "onValidationError": { - "type": "(errors: FieldErrors) => void", + "type": "(errors: FieldErrors) => void", "required": false, "description": "Callback executed when there are validation errors" }, - "submitLabel": { - "type": "string", - "defaultValue": "Sign in", - "required": false, - "description": "Label for the submit button" - }, "title": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "required": false, @@ -323,7 +310,6 @@ "required": false }, "delayError": { "type": "number", "required": false }, - "emailLabel": { "type": "string", "required": false }, "fieldResolver": { "type": "FieldResolver", "required": false, @@ -339,7 +325,6 @@ "required": false, "description": "The Hook Form state ref." }, - "helpText": { "type": "string", "required": false }, "mode": { "type": "keyof ValidationMode", "required": false }, "onChange": { "type": "WatchObserver", @@ -369,7 +354,6 @@ "shouldFocusError": { "type": "boolean", "required": false }, "shouldUnregister": { "type": "boolean", "required": false }, "shouldUseNativeValidation": { "type": "boolean", "required": false }, - "submitLabel": { "type": "string", "required": false }, "values": { "type": "Params", "required": false } }, "ForgotPasswordView": { @@ -390,7 +374,6 @@ "required": false }, "delayError": { "type": "number", "required": false }, - "emailLabel": { "type": "string", "required": false }, "fieldResolver": { "type": "FieldResolver", "required": false, @@ -411,7 +394,6 @@ "required": false, "description": "The Hook Form state ref." }, - "helpText": { "type": "string", "required": false }, "mode": { "type": "keyof ValidationMode", "required": false }, "onChange": { "type": "WatchObserver", @@ -429,11 +411,16 @@ "description": "Callback executed after succesful login or signup" }, "onValidationError": { - "type": "(errors: FieldErrors) => void", + "type": "(errors: FieldErrors) => void", "required": false, "description": "Callback executed when there are validation errors" }, "progressive": { "type": "boolean", "required": false }, + "redirectUrl": { + "type": "string", + "required": false, + "description": "The URL where the user can save their new password." + }, "renderSuccess": { "type": "(\n data: any,\n) => ReactElement>", "required": false @@ -458,12 +445,6 @@ "shouldFocusError": { "type": "boolean", "required": false }, "shouldUnregister": { "type": "boolean", "required": false }, "shouldUseNativeValidation": { "type": "boolean", "required": false }, - "submitLabel": { - "type": "string", - "defaultValue": "Sign in", - "required": false, - "description": "Label for the submit button" - }, "title": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "required": false, @@ -493,7 +474,6 @@ "required": false }, "delayError": { "type": "number", "required": false }, - "emailLabel": { "type": "string", "required": false }, "fieldResolver": { "type": "FieldResolver", "required": false, @@ -538,7 +518,6 @@ "shouldFocusError": { "type": "boolean", "required": false }, "shouldUnregister": { "type": "boolean", "required": false }, "shouldUseNativeValidation": { "type": "boolean", "required": false }, - "submitLabel": { "type": "string", "required": false }, "values": { "type": "Params", "required": false } }, "OtpForm": { @@ -549,8 +528,7 @@ }, "children": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", - "required": false, - "description": "The form children, can be a render prop or a ReactNode." + "required": false }, "context": { "type": "object", "required": false }, "criteriaMode": { "type": "CriteriaMode", "required": false }, @@ -574,7 +552,6 @@ "required": false, "description": "The Hook Form state ref." }, - "helpText": { "type": "string", "required": false }, "mode": { "type": "keyof ValidationMode", "required": false }, "onChange": { "type": "WatchObserver", @@ -586,7 +563,6 @@ "required": false, "description": "Triggers when there are validation errors." }, - "otpLabel": { "type": "string", "required": false }, "pinLength": { "type": "number", "required": false }, "progressive": { "type": "boolean", "required": false }, "resetOptions": { @@ -606,7 +582,6 @@ "shouldFocusError": { "type": "boolean", "required": false }, "shouldUnregister": { "type": "boolean", "required": false }, "shouldUseNativeValidation": { "type": "boolean", "required": false }, - "submitLabel": { "type": "string", "required": false }, "values": { "type": "Params", "required": false } }, "PasswordForm": { @@ -626,7 +601,6 @@ "required": false }, "delayError": { "type": "number", "required": false }, - "emailLabel": { "type": "string", "required": false }, "fieldResolver": { "type": "FieldResolver", "required": false, @@ -653,7 +627,6 @@ "required": false, "description": "Triggers when there are validation errors." }, - "passwordLabel": { "type": "string", "required": false }, "progressive": { "type": "boolean", "required": false }, "resetOptions": { "type": "Partial<{\n keepDirtyValues: boolean\n keepErrors: boolean\n keepDirty: boolean\n keepValues: boolean\n keepDefaultValues: boolean\n keepIsSubmitted: boolean\n keepTouched: boolean\n keepIsValid: boolean\n keepSubmitCount: boolean\n}>", @@ -672,7 +645,6 @@ "shouldFocusError": { "type": "boolean", "required": false }, "shouldUnregister": { "type": "boolean", "required": false }, "shouldUseNativeValidation": { "type": "boolean", "required": false }, - "submitLabel": { "type": "string", "required": false }, "values": { "type": "Params", "required": false } }, "Providers": { @@ -703,7 +675,6 @@ "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "required": false }, - "confirmLabel": { "type": "string", "required": false }, "context": { "type": "object", "required": false }, "criteriaMode": { "type": "CriteriaMode", "required": false }, "defaultValues": { @@ -726,7 +697,6 @@ "required": false, "description": "The Hook Form state ref." }, - "helpText": { "type": "string", "required": false }, "mode": { "type": "keyof ValidationMode", "required": false }, "onChange": { "type": "WatchObserver", @@ -738,7 +708,6 @@ "required": false, "description": "Triggers when there are validation errors." }, - "passwordLabel": { "type": "string", "required": false }, "progressive": { "type": "boolean", "required": false }, "resetOptions": { "type": "Partial<{\n keepDirtyValues: boolean\n keepErrors: boolean\n keepDirty: boolean\n keepValues: boolean\n keepDefaultValues: boolean\n keepIsSubmitted: boolean\n keepTouched: boolean\n keepIsValid: boolean\n keepSubmitCount: boolean\n}>", @@ -757,7 +726,6 @@ "shouldFocusError": { "type": "boolean", "required": false }, "shouldUnregister": { "type": "boolean", "required": false }, "shouldUseNativeValidation": { "type": "boolean", "required": false }, - "submitLabel": { "type": "string", "required": false }, "values": { "type": "Params", "required": false } }, "UpdatePasswordView": { @@ -771,7 +739,6 @@ "required": false, "description": "Children are passed down to the underlying form" }, - "confirmLabel": { "type": "string", "required": false }, "context": { "type": "object", "required": false }, "criteriaMode": { "type": "CriteriaMode", "required": false }, "defaultValues": { @@ -799,7 +766,6 @@ "required": false, "description": "The Hook Form state ref." }, - "helpText": { "type": "string", "required": false }, "mode": { "type": "keyof ValidationMode", "required": false }, "onChange": { "type": "WatchObserver", @@ -817,11 +783,10 @@ "description": "Callback executed after succesful login or signup" }, "onValidationError": { - "type": "(errors: FieldErrors) => void", + "type": "(errors: FieldErrors) => void", "required": false, "description": "Callback executed when there are validation errors" }, - "passwordLabel": { "type": "string", "required": false }, "progressive": { "type": "boolean", "required": false }, "renderSuccess": { "type": "(\n data: any,\n) => ReactElement>", @@ -847,12 +812,6 @@ "shouldFocusError": { "type": "boolean", "required": false }, "shouldUnregister": { "type": "boolean", "required": false }, "shouldUseNativeValidation": { "type": "boolean", "required": false }, - "submitLabel": { - "type": "string", - "defaultValue": "Sign in", - "required": false, - "description": "Label for the submit button" - }, "title": { "type": "type ONLY_FOR_FORMAT =\n | string\n | number\n | boolean\n | ReactElement>\n | Iterable\n | ReactPortal\n | PromiseLikeOfReactNode", "required": false, diff --git a/tooling/props-docs/generated/filters.json b/tooling/props-docs/generated/filters.json index e401f40a3..8c5a633a8 100644 --- a/tooling/props-docs/generated/filters.json +++ b/tooling/props-docs/generated/filters.json @@ -639,7 +639,7 @@ "title": { "type": "string", "required": false } }, "FilterOperatorId": { - "__@iterator@392178": { + "__@iterator@392252": { "type": "() => IterableIterator", "required": true, "description": "Iterator" @@ -891,7 +891,7 @@ } }, "FilterType": { - "__@iterator@392178": { + "__@iterator@392252": { "type": "() => IterableIterator", "required": true, "description": "Iterator" @@ -1143,7 +1143,7 @@ } }, "FilterOperator": { - "__@iterator@392178": { + "__@iterator@392252": { "type": "() => IterableIterator", "required": true, "description": "Iterator" diff --git a/tooling/props-docs/generated/forms.json b/tooling/props-docs/generated/forms.json index 34ad25564..9e2bc1948 100644 --- a/tooling/props-docs/generated/forms.json +++ b/tooling/props-docs/generated/forms.json @@ -808,12 +808,12 @@ "values": { "type": "TFieldValues", "required": false } }, "StepsOptions": { - "__@iterator@40623": { + "__@iterator@40648": { "type": "() => IterableIterator<{\n name: TName\n schema?: TSchema | undefined\n}>", "required": true, "description": "Iterator" }, - "__@unscopables@42074": { + "__@unscopables@42099": { "type": "{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; ... 35 more ...; readonly [Symbol.unscopables]?: boolean | undefined; }", "required": true, "description": "Is an object whose properties have the value 'true'\nwhen they will be absent when used in a 'with' statement." @@ -1546,12 +1546,12 @@ } }, "RadioOptions": { - "__@iterator@40623": { + "__@iterator@40648": { "type": "type ONLY_FOR_FORMAT =\n | (() => IterableIterator)\n | (() => IterableIterator)", "required": true, "description": "Iterator" }, - "__@unscopables@42074": { + "__@unscopables@42099": { "type": "{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; ... 35 more ...; readonly [Symbol.unscopables]?: boolean | undefined; } | { ...; }", "required": true, "description": "Is an object whose properties have the value 'true'\nwhen they will be absent when used in a 'with' statement." @@ -2621,12 +2621,12 @@ } }, "FieldOptions": { - "__@iterator@40623": { + "__@iterator@40648": { "type": "type ONLY_FOR_FORMAT =\n | (() => IterableIterator)\n | (() => IterableIterator)", "required": true, "description": "Iterator" }, - "__@unscopables@42074": { + "__@unscopables@42099": { "type": "{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; ... 35 more ...; readonly [Symbol.unscopables]?: boolean | undefined; } | { ...; }", "required": true, "description": "Is an object whose properties have the value 'true'\nwhen they will be absent when used in a 'with' statement." diff --git a/tooling/props-docs/generated/src.json b/tooling/props-docs/generated/src.json deleted file mode 100644 index 646b59e93..000000000 --- a/tooling/props-docs/generated/src.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "NProgress": { - "isAnimating": { - "type": "boolean", - "required": true, - "description": "Set to true to start the progress animation." - } - } -}