Zen components conversion.

src/components/common/Breadcrumb.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { Flexbox, Icon, Icons, Text } from 'react-basics';
+import { Flexbox, Icon, Icons, Text } from '@umami/react-zen';
 import styles from './Breadcrumb.module.css';
 import { Fragment } from 'react';
 
@@ -25,7 +25,7 @@ export function Breadcrumb({ data }: BreadcrumbProps) {
             )}
             {i !== data.length - 1 ? (
               <Icon rotate={270}>
-                <Icons.ChevronDown />
+                <Icons.Chevron />
               </Icon>
             ) : null}
           </Fragment>

src/components/common/EmptyPlaceholder.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Icon, Text, Flexbox } from 'react-basics';
+import { Icon, Text, Flexbox } from '@umami/react-zen';
 import { Icons } from '@/components/icons';
 
 export interface EmptyPlaceholderProps {

src/components/common/ErrorBoundary.tsx

@@ -1,6 +1,6 @@
 import { ErrorInfo, ReactNode } from 'react';
 import { ErrorBoundary as Boundary } from 'react-error-boundary';
-import { Button } from 'react-basics';
+import { Button } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
 import styles from './ErrorBoundary.module.css';
 

src/components/common/ErrorMessage.tsx

@@ -1,4 +1,4 @@
-import { Icon, Icons, Text } from 'react-basics';
+import { Icon, Icons, Text } from '@umami/react-zen';
 import styles from './ErrorMessage.module.css';
 import { useMessages } from '@/components/hooks';
 

src/components/common/FilterButtons.tsx

@@ -1,5 +1,5 @@
 import { Key } from 'react';
-import { ButtonGroup, Button, Flexbox } from 'react-basics';
+import { Row, Button, Flexbox } from '@umami/react-zen';
 
 export interface FilterButtonsProps {
   items: any[];
@@ -10,9 +10,11 @@ export interface FilterButtonsProps {
 export function FilterButtons({ items, selectedKey, onSelect }: FilterButtonsProps) {
   return (
     <Flexbox justifyContent="center">
-      <ButtonGroup items={items} selectedKey={selectedKey as any} onSelect={onSelect}>
-        {({ key, label }) => <Button key={key}>{label}</Button>}
-      </ButtonGroup>
+      <Row>
+        {items.map(({ key, label }) => (
+          <Button key={key}>{label}</Button>
+        ))}
+      </Row>
     </Flexbox>
   );
 }

src/components/common/FilterLink.tsx

@@ -1,8 +1,8 @@
-import classNames from 'classnames';
-import { useMessages, useNavigation } from '@/components/hooks';
-import Link from 'next/link';
 import { ReactNode } from 'react';
-import { Icon, Icons } from 'react-basics';
+import classNames from 'classnames';
+import Link from 'next/link';
+import { Icon, Icons } from '@umami/react-zen';
+import { useMessages, useNavigation } from '@/components/hooks';
 import styles from './FilterLink.module.css';
 
 export interface FilterLinkProps {
@@ -44,7 +44,7 @@ export function FilterLink({
       {externalUrl && (
         <a className={styles.link} href={externalUrl} target="_blank" rel="noreferrer noopener">
           <Icon className={styles.icon}>
-            <Icons.External />
+            <Icons.ExternalLink />
           </Icon>
         </a>
       )}

src/components/common/HamburgerButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Icon, Icons } from 'react-basics';
+import { Button, Icon, Icons } from '@umami/react-zen';
 import { useState } from 'react';
 import { MobileMenu } from './MobileMenu';
 

src/components/common/HoverTooltip.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useEffect, useState } from 'react';
-import { Tooltip } from 'react-basics';
+import { Tooltip } from '@umami/react-zen';
 import styles from './HoverTooltip.module.css';
 
 export function HoverTooltip({ children }: { children: ReactNode }) {

src/components/common/LinkButton.tsx

@@ -1,29 +1,29 @@
 import { ReactNode } from 'react';
-import classNames from 'classnames';
 import Link from 'next/link';
+import { Button } from '@umami/react-zen';
 import { useLocale } from '@/components/hooks';
-// eslint-disable-next-line css-modules/no-unused-class
-import styles from './LinkButton.module.css';
 
 export interface LinkButtonProps {
   href: string;
-  className?: string;
-  variant?: string;
   scroll?: boolean;
+  variant?: any;
   children?: ReactNode;
 }
 
-export function LinkButton({ href, className, variant, scroll = true, children }: LinkButtonProps) {
+export function LinkButton({
+  href,
+  variant = 'quiet',
+  scroll = true,
+  children,
+  ...props
+}: LinkButtonProps) {
   const { dir } = useLocale();
 
   return (
-    <Link
-      className={classNames(styles.button, className, { [styles[variant]]: true })}
-      href={href}
-      dir={dir}
-      scroll={scroll}
-    >
-      {children}
-    </Link>
+    <Button {...props} variant={variant} asChild>
+      <Link href={href} dir={dir} scroll={scroll}>
+        {children}
+      </Link>
+    </Button>
   );
 }

src/components/common/TypeConfirmationForm.tsx

@@ -2,11 +2,10 @@ import {
   Button,
   Form,
   FormButtons,
-  FormRow,
-  FormInput,
+  FormField,
   TextField,
-  SubmitButton,
-} from 'react-basics';
+  FormSubmitButton,
+} from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
 
 export function TypeConfirmationForm({
@@ -20,7 +19,7 @@ export function TypeConfirmationForm({
 }: {
   confirmationValue: string;
   buttonLabel?: string;
-  buttonVariant?: 'none' | 'primary' | 'secondary' | 'quiet' | 'danger';
+  buttonVariant?: 'primary' | 'secondary' | 'outline' | 'quiet' | 'danger' | 'none';
   isLoading?: boolean;
   error?: string | Error;
   onConfirm?: () => void;
@@ -35,18 +34,22 @@ export function TypeConfirmationForm({
   return (
     <Form onSubmit={onConfirm} error={error}>
       <p>
-        {formatMessage(messages.actionConfirmation, { confirmation: <b>{confirmationValue}</b> })}
+        {formatMessage(messages.actionConfirmation, {
+          confirmation: <b key="value">{confirmationValue}</b>,
+        })}
       </p>
-      <FormRow label={formatMessage(labels.confirm)}>
-        <FormInput name="confirm" rules={{ validate: value => value === confirmationValue }}>
-          <TextField autoComplete="off" />
-        </FormInput>
-      </FormRow>
-      <FormButtons flex>
-        <SubmitButton isLoading={isLoading} variant={buttonVariant}>
+      <FormField
+        label={formatMessage(labels.confirm)}
+        name="confirm"
+        rules={{ validate: value => value === confirmationValue }}
+      >
+        <TextField autoComplete="off" />
+      </FormField>
+      <FormButtons>
+        <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
+        <FormSubmitButton isLoading={isLoading} variant={buttonVariant}>
           {buttonLabel || formatMessage(labels.ok)}
-        </SubmitButton>
-        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+        </FormSubmitButton>
       </FormButtons>
     </Form>
   );