⚡️ feat: create button component
This commit is contained in:
Wahyu Kurniawan
parent
082353e9bc
commit
e850435c2d
137
packages/frontend/src/components/shared/Button/Button.theme.ts
Normal file
137
packages/frontend/src/components/shared/Button/Button.theme.ts
Normal file
@ -0,0 +1,137 @@
|
||||
import { tv } from 'tailwind-variants';
|
||||
import type { VariantProps } from 'tailwind-variants';
|
||||
|
||||
/**
|
||||
* Defines the theme for a button component.
|
||||
*/
|
||||
export const buttonTheme = tv(
|
||||
{
|
||||
base: [
|
||||
'inline-flex',
|
||||
'items-center',
|
||||
'justify-center',
|
||||
'font-medium',
|
||||
'whitespace-nowrap',
|
||||
'focus-ring',
|
||||
'disabled:cursor-not-allowed',
|
||||
],
|
||||
variants: {
|
||||
size: {
|
||||
lg: ['gap-3', 'py-4', 'px-6', 'rounded-lg', 'text-lg'],
|
||||
md: ['gap-2', 'py-3', 'px-4', 'rounded-lg', 'text-base'],
|
||||
sm: ['gap-1', 'py-2', 'px-2', 'rounded-md', 'text-xs'],
|
||||
xs: ['gap-1', 'py-1', 'px-2', 'rounded-md', 'text-xs'],
|
||||
},
|
||||
fullWidth: {
|
||||
true: 'w-full',
|
||||
},
|
||||
shape: {
|
||||
default: '',
|
||||
rounded: 'rounded-full',
|
||||
},
|
||||
variant: {
|
||||
primary: [
|
||||
'text-elements-on-primary',
|
||||
'border',
|
||||
'border-primary-700',
|
||||
'bg-controls-primary',
|
||||
'shadow-button',
|
||||
'hover:bg-controls-primary-hovered',
|
||||
'focus-visible:bg-controls-primary-hovered',
|
||||
'disabled:text-elements-on-disabled',
|
||||
'disabled:bg-controls-disabled',
|
||||
'disabled:border-transparent',
|
||||
'disabled:shadow-none',
|
||||
],
|
||||
secondary: [
|
||||
'text-components-buttons-secondary-foreground',
|
||||
'border',
|
||||
'border-primary-500',
|
||||
'bg-components-buttons-secondary-background',
|
||||
'hover:text-components-buttons-secondary-foreground-hover',
|
||||
'hover:bg-components-buttons-secondary-background-hover',
|
||||
'focus-visible:text-components-buttons-secondary-foreground-focus',
|
||||
'focus-visible:bg-components-buttons-secondary-background-focus',
|
||||
'disabled:text-components-buttons-secondary-foreground-disabled',
|
||||
'disabled:bg-components-buttons-secondary-background-disabled ',
|
||||
'disabled:border-transparent',
|
||||
],
|
||||
tertiary: [
|
||||
'text-components-buttons-tertiary-background',
|
||||
'border',
|
||||
'border-components-buttons-tertiary-background',
|
||||
'bg-transparent',
|
||||
'hover:text-components-buttons-tertiary-hover',
|
||||
'hover:border-components-buttons-tertiary-hover',
|
||||
'focus-visible:text-components-buttons-tertiary-focus',
|
||||
'focus-visible:border-components-buttons-tertiary-focus',
|
||||
'disabled:text-components-buttons-tertiary-disabled',
|
||||
'disabled:border-components-buttons-tertiary-disabled',
|
||||
],
|
||||
'text-only': [
|
||||
'text-components-buttons-text-only-background',
|
||||
'border',
|
||||
'border-transparent',
|
||||
'bg-transparent',
|
||||
'hover:text-components-buttons-text-only-foreground-hover',
|
||||
'hover:bg-components-buttons-text-only-background-hover',
|
||||
'focus-visible:text-components-buttons-text-only-foreground-focus',
|
||||
'focus-visible:bg-components-buttons-text-only-background-focus',
|
||||
'disabled:text-components-buttons-tertiary-disabled',
|
||||
'disabled:bg-transparent',
|
||||
],
|
||||
danger: [
|
||||
'text-components-button-icon-alert-foreground',
|
||||
'border',
|
||||
'border-transparent',
|
||||
'bg-components-buttons-alert-background',
|
||||
'hover:text-components-buttons-alert-foreground-hover',
|
||||
'hover:bg-components-buttons-alert-background-hover',
|
||||
'focus-visible:text-components-buttons-alert-foreground-focus',
|
||||
'focus-visible:bg-components-buttons-alert-background-focus',
|
||||
'disabled:text-components-button-icon-alert-foreground-disabled',
|
||||
'disabled:bg-components-button-icon-alert-background-disabled',
|
||||
],
|
||||
'icon-only': [
|
||||
'p-0 flex items-center justify-center',
|
||||
'text-components-button-icon-text-only-foreground',
|
||||
'border',
|
||||
'border-transparent',
|
||||
'bg-transparent',
|
||||
'hover:text-components-button-icon-text-only-foreground-hover',
|
||||
'hover:bg-components-button-icon-text-only-background-hover',
|
||||
'focus-visible:text-components-button-icon-low-emphasis-foreground-focus',
|
||||
'focus-visible:bg-components-button-icon-low-emphasis-background-focus',
|
||||
'disabled:text-components-button-icon-low-emphasis-outlined-foreground-disabled',
|
||||
'disabled:bg-transparent',
|
||||
],
|
||||
unstyled: [],
|
||||
},
|
||||
},
|
||||
compoundVariants: [
|
||||
{
|
||||
size: 'md',
|
||||
variant: 'icon-only',
|
||||
class: ['h-11', 'w-11', 'rounded-lg'],
|
||||
},
|
||||
{
|
||||
size: 'sm',
|
||||
variant: 'icon-only',
|
||||
class: ['h-8', 'w-8', 'rounded-md'],
|
||||
},
|
||||
],
|
||||
defaultVariants: {
|
||||
size: 'md',
|
||||
variant: 'primary',
|
||||
fullWidth: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
responsiveVariants: true,
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* Represents the type of a button theme, which is derived from the `buttonTheme` variant props.
|
||||
*/
|
||||
export type ButtonTheme = VariantProps<typeof buttonTheme>;
|
||||
150
packages/frontend/src/components/shared/Button/Button.tsx
Normal file
150
packages/frontend/src/components/shared/Button/Button.tsx
Normal file
@ -0,0 +1,150 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import type { ComponentPropsWithoutRef, ReactNode } from 'react';
|
||||
|
||||
import { buttonTheme } from './Button.theme';
|
||||
import type { ButtonTheme } from './Button.theme';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
/**
|
||||
* Represents the properties of a base button component.
|
||||
*/
|
||||
interface ButtonBaseProps {
|
||||
/**
|
||||
* The optional left icon element for a component.
|
||||
* @type {ReactNode}
|
||||
*/
|
||||
leftIcon?: ReactNode;
|
||||
/**
|
||||
* The optional right icon element to display.
|
||||
* @type {ReactNode}
|
||||
*/
|
||||
rightIcon?: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface for the props of a button link component.
|
||||
*/
|
||||
export interface ButtonLinkProps
|
||||
extends Omit<ComponentPropsWithoutRef<'a'>, 'color'> {
|
||||
/**
|
||||
* Specifies the optional property `as` with a value of `'a'`.
|
||||
* @type {'a'}
|
||||
*/
|
||||
as?: 'a';
|
||||
/**
|
||||
* Indicates whether the item is external or not.
|
||||
* @type {boolean}
|
||||
*/
|
||||
external?: boolean;
|
||||
/**
|
||||
* The URL of a web page or resource.
|
||||
* @type {string}
|
||||
*/
|
||||
href: string;
|
||||
}
|
||||
|
||||
export interface ButtonProps
|
||||
extends Omit<ComponentPropsWithoutRef<'button'>, 'color'> {
|
||||
/**
|
||||
* Specifies the optional property `as` with a value of `'button'`.
|
||||
* @type {'button'}
|
||||
*/
|
||||
as?: 'button';
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface representing the props for a button component.
|
||||
* Extends the ComponentPropsWithoutRef<'button'> and ButtonTheme interfaces.
|
||||
*/
|
||||
export type ButtonOrLinkProps = (ButtonLinkProps | ButtonProps) &
|
||||
ButtonBaseProps &
|
||||
ButtonTheme;
|
||||
|
||||
/**
|
||||
* A custom button component that can be used in React applications.
|
||||
*/
|
||||
const Button = ({
|
||||
children,
|
||||
className,
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
fullWidth,
|
||||
shape,
|
||||
variant,
|
||||
...props
|
||||
}: ButtonOrLinkProps) => {
|
||||
// Conditionally render between <NextLink>, <a> or <button> depending on props
|
||||
// useCallback to prevent unnecessary re-rendering
|
||||
const Component = useCallback(
|
||||
({ children: _children, ..._props }: ButtonOrLinkProps) => {
|
||||
if (_props.as === 'a') {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { external, href, as, ...baseLinkProps } = _props;
|
||||
|
||||
// External link
|
||||
if (external) {
|
||||
const externalLinkProps = {
|
||||
target: '_blank',
|
||||
rel: 'noopener',
|
||||
href,
|
||||
...baseLinkProps,
|
||||
};
|
||||
return <a {...externalLinkProps}>{_children}</a>;
|
||||
}
|
||||
|
||||
// Internal link
|
||||
return (
|
||||
<Link {...baseLinkProps} to={href}>
|
||||
{_children}
|
||||
</Link>
|
||||
);
|
||||
} else {
|
||||
const { ...buttonProps } = _props;
|
||||
// @ts-expect-error - as prop is not a valid prop for button elements
|
||||
return <button {...buttonProps}>{_children}</button>;
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
/**
|
||||
* Extracts specific style properties from the given props object and returns them as a new object.
|
||||
*/
|
||||
const styleProps = (({
|
||||
variant = 'primary',
|
||||
size = 'md',
|
||||
fullWidth = false,
|
||||
shape = 'rounded',
|
||||
as,
|
||||
}) => ({
|
||||
variant,
|
||||
size,
|
||||
fullWidth,
|
||||
shape,
|
||||
as,
|
||||
}))({ ...props, fullWidth, shape, variant });
|
||||
|
||||
/**
|
||||
* Validates that a button component has either children or an aria-label prop.
|
||||
*/
|
||||
if (typeof children === 'undefined' && !props['aria-label']) {
|
||||
throw new Error(
|
||||
'Button components must have either children or an aria-label prop',
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Component
|
||||
{...props}
|
||||
className={buttonTheme({ ...styleProps, class: className })}
|
||||
>
|
||||
{leftIcon}
|
||||
{children}
|
||||
{rightIcon}
|
||||
</Component>
|
||||
);
|
||||
};
|
||||
|
||||
Button.displayName = 'Button';
|
||||
|
||||
export { Button };
|
||||
2
packages/frontend/src/components/shared/Button/index.ts
Normal file
2
packages/frontend/src/components/shared/Button/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from './Button';
|
||||
export * from './Button.theme';
|
||||
Loading…
Reference in New Issue
Block a user