Merge pull request #7 from bootwindproject/feat/classnames

feat: allow additional classname to components

packages/alert/src/lib/alert.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode, useState } from 'react';
+import { cn } from "@bootwind/common"
 import { GoInfo, GoXCircle, GoCheckCircle } from 'react-icons/go';
 
 export interface AlertProps {
@@ -7,6 +8,7 @@ export interface AlertProps {
   title?: string;
   description?: string | ReactNode;
   actions?: React.ReactNode;
+  className?: string
   border?: "left" | "right" | "all" | "none"
   link?: {
     url: string;
@@ -60,6 +62,7 @@ export const Alert: React.FC<AlertProps> = ({
   description,
   actions,
   border = "none",
+  className,
   link,
   dismissButton = false,
 }) => {
@@ -104,7 +107,7 @@ export const Alert: React.FC<AlertProps> = ({
 
   return (
     <div
-      className={`rounded-md p-4 ${classes[variant].bg} ${borders[border]}`}
+      className={cn(`rounded-md p-4`,classes[variant].bg,borders[border])}
     >
       <div className="flex flex-col md:flex-row">
         {icon && (

packages/avatar/src/lib/avatar.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
+import { cn } from "@bootwind/common"
 
 export interface AvatarProps {
-  src?: string;
-  alt: string;
-  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
-  notificationDot?: 'gray' | 'red' | 'green';
-  showPlaceholder?: boolean; // Tambahkan properti showPlaceholder
+  src?: string
+  alt: string
+  className?: string
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
+  notificationDot?: 'gray' | 'red' | 'green'
+  showPlaceholder?: boolean // Tambahkan properti showPlaceholder
 }
 
 export const Avatar: React.FC<AvatarProps> = ({
   src,
   alt,
   rounded = 'md',
+  className,
   notificationDot,
   showPlaceholder = false, // Defaultnya tidak menampilkan placeholder
 }) => {
@@ -32,7 +35,7 @@ export const Avatar: React.FC<AvatarProps> = ({
   const shouldShowPlaceholder = !src && showPlaceholder;
 
   return (
-    <span className="relative inline-block">
+    <span className={cn("relative inline-block", className)}>
       {notificationDot && (
         <span
           className={`absolute bottom-0 right-0 block ${

packages/badges/src/lib/badges.tsx

@@ -1,11 +1,13 @@
 import React, { ReactNode } from 'react';
+import { cn } from "@bootwind/common"
 
 export interface BadgeProps {
   variant: 'primary' | 'neutral' | 'warning' | 'success' | 'error';
   size?: 'small' | 'large';
   withIcon?: ReactNode;
   withDot?: boolean;
   children: string;
+  className?: string
 }
 
 interface DotSvgProps {
@@ -47,6 +49,7 @@ export const Badge: React.FC<BadgeProps> = ({
   withIcon = null,
   withDot = false,
   children,
+  className
 }) => {
   const baseClasses = `inline-flex items-center rounded-md px-2.5 py-0.5 font-medium`;
 
@@ -81,7 +84,7 @@ export const Badge: React.FC<BadgeProps> = ({
   };
 
   return (
-    <span className={`${baseClasses} ${sizeClasses[size]} ${getVariantClasses()}`}>
+    <span className={cn(baseClasses, sizeClasses[size], getVariantClasses(), className)}>
       {badgeContent}
     </span>
   );

packages/breadcrumb/src/lib/breadcrumb.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import { GoChevronRight, GoHome } from 'react-icons/go';
+import { cn } from "@bootwind/common"
 
 export interface BreadcrumbsProps {
   children: React.ReactNode
   items?: BreadcrumbItemProps[]
+  className?: string
 }
 
-export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children, items }) => {
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children, items, className }) => {
   return (
-    <nav className="flex" aria-label="Breadcrumb">
+    <nav className={cn("flex", className)} aria-label="Breadcrumb">
       <ol role="list" className="flex items-center space-x-2">
         {items?.map((item,index) => (
           <li key={index}>
@@ -46,13 +48,15 @@ interface BreadcrumbItemProps {
   children?: React.ReactNode;
   icon?: React.ReactNode;
   isActive?: boolean;
+  className?: string
 }
 
 export const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
   href,
   children,
   icon,
   isActive = false,
+  className
 }) => {
   const content = href ? (
     <a
@@ -74,14 +78,14 @@ export const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
   );
 
   return (
-    <>
+    <div className={cn("breadcrumb", className)}>
       {icon &&
         React.cloneElement(icon as React.ReactElement, {
           className: `${isActive ? 'text-indigo-600' : 'text-gray-500'} ${
             children ? 'mr-2' : ''
           }`,
         })}
       {content}
-    </>
+    </div>
   );
 };

packages/button/src/lib/button.tsx

@@ -1,21 +1,24 @@
 import React, { ReactElement } from 'react';
+import { cn } from "@bootwind/common"
 import { ReactNode } from 'react';
 
 type ButtonVariant = 'primary' | 'secondary' | 'text-only';
 type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  leftIcon?: ReactNode;
-  rightIcon?: ReactNode;
+  variant?: ButtonVariant
+  size?: ButtonSize
+  leftIcon?: ReactNode
+  rightIcon?: ReactNode
   children?: ReactNode
+  className?: string
 }
 
 export const Button = ({
   variant = 'primary',
   size = 'md',
+  className,
   leftIcon,
   rightIcon,
   children,
@@ -44,7 +47,7 @@ export const Button = ({
     'text-only': 'text-black',
   };
 
-  const buttonStyles = `${baseStyles} ${sizeStyles[size]} ${colorStyles[variant]}`;
+  const buttonStyles = cn(baseStyles, sizeStyles[size], colorStyles[variant], className);
 
   return (
     <>

packages/forms/src/lib/checkbox/index.tsx

@@ -1,16 +1,19 @@
 import React from 'react';
 import { useState } from 'react';
+import { cn } from "@bootwind/common"
 
 export interface CheckboxProps {
-  id: string;
-  label: string;
-  isRounded?: boolean;
-  indeterminate?: boolean;
+  id: string
+  label: string
+  className?: string
+  isRounded?: boolean
+  indeterminate?: boolean
 }
 
 export const Checkbox: React.FC<CheckboxProps> = ({
   id,
   label,
+  className,
   isRounded = false,
   indeterminate = false,
 }) => {
@@ -28,7 +31,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
     : 'h-4 w-4 rounded border-primary text-primary focus:ring-primary';
 
   return (
-    <div className="flex items-center">
+    <div className={cn("flex items-center", className)}>
       <input
         id={id}
         name={id}

packages/forms/src/lib/input/index.tsx

@@ -1,10 +1,11 @@
 import React, { ReactNode, useId } from 'react';
-import { useState } from 'react';
+import { cn } from "@bootwind/common"
 
 type InputVariant = "default" | "error" | "warning" | "success"
 export interface InputProps {
   id?: string
   type?: string
+  className?: string
   name?: string
   variant?: InputVariant
   label?: string
@@ -18,6 +19,7 @@ export const Input: React.FC<InputProps> = ({
   id = useId(),
   label,
   type = "text",
+  className,
   variant = "default",
   description,
   name,
@@ -59,7 +61,7 @@ export const Input: React.FC<InputProps> = ({
                         ${rightSection ? 'pr-14' : ''}
                         `
   return (
-    <div className="input-group mb-3">
+    <div className={cn("input-group mb-3", className)}>
       { label && (
         <div className='bootwind-label mb-2'>
           <label className='text-neutral-600 leading-tight font-medium' htmlFor={id}>{label}</label>

packages/forms/src/lib/toggle/index.tsx

@@ -1,18 +1,16 @@
 import React, { useState } from 'react';
 import { Switch } from '@headlessui/react';
-
-function classNames(...classes: string[]) {
-  return classes.filter(Boolean).join(' ');
-}
+import { cn } from "@bootwind/common"
 
 export interface ToggleProps {
   onToggle?: (isEnabled: boolean) => void
   color: 'primary' | 'secondary'
+  className?: string
   iconOn?: React.ReactNode
   iconOff?: React.ReactNode
 }
 
-export const Toggle: React.FC<ToggleProps> = ({ color, iconOn, iconOff }) => {
+export const Toggle: React.FC<ToggleProps> = ({ color, iconOn, iconOff, className }) => {
   const [enabled, setEnabled] = useState(false);
 
   const toggleStyles = {
@@ -24,14 +22,15 @@ export const Toggle: React.FC<ToggleProps> = ({ color, iconOn, iconOff }) => {
     <Switch
       checked={enabled}
       onChange={setEnabled}
-      className={classNames(
+      className={cn(
         toggleStyles[color],
+        className,
         'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-1'
       )}
     >
       <span
         aria-hidden="true"
-        className={classNames(
+        className={cn(
           enabled ? 'translate-x-5' : 'translate-x-0',
           'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out '
         )}

packages/pagination/src/lib/pagination.tsx

@@ -6,9 +6,12 @@ import {
   HiArrowRight,
 } from 'react-icons/hi2';
 
+import {cn} from '@bootwind/common'
+
 export interface PaginationProps {
   type?: 'card' | 'centered' | 'simple';
   currentPage: number;
+  className?: string
   totalResults: number;
   resultsPerPage: number;
   onPrevClick: () => void;
@@ -21,6 +24,7 @@ export const Pagination: React.FC<PaginationProps> = ({
   currentPage,
   totalResults,
   resultsPerPage,
+  className,
   onPrevClick,
   onNextClick,
   onPageClick,
@@ -33,7 +37,7 @@ export const Pagination: React.FC<PaginationProps> = ({
   switch (type) {
     case 'card':
       return (
-        <div className="flex items-center justify-between border-t border-gray-200 bg-white py-3">
+        <div className={cn("flex items-center justify-between border-t border-gray-200 bg-white py-3", className)}>
           <div className="flex flex-1 justify-between sm:hidden">
             <button
               type="button"

packages/toast/src/lib/toast.tsx

@@ -1,12 +1,13 @@
 /* eslint-disable-next-line */
 import Alert, { AlertProps } from "@bootwind/alert"
-
+import { cn } from "@bootwind/common"
 export interface ToastProps extends AlertProps {
   id?: string
+  className?: string,
 }
 export function Toast(props: ToastProps) {
   return (
-    <div className={`toast`}>
+    <div className={cn('toast', props.className)}>
       <Alert {...props}></Alert>
     </div>
   );

packages/toast/src/stories/Toast.stories.tsx

@@ -2,9 +2,6 @@ import { Toast, ToastProps } from "..";
 import { Meta, StoryObj } from '@storybook/react';
 import { ToastProvider, useToastContext } from "../lib/ToastProvider";
 import { Button } from "@bootwind/button"
-import { useToast } from "../lib/useToast";
-import { useEffect } from "react";
-import { AlertProps } from "@bootwind/alert";
 
 export default {
     tags: ['autodocs'],

packages/typography/src/lib/text.tsx

@@ -81,6 +81,7 @@ export interface TextProps {
   color?: string
   weight?: TextFontWeight
   children?: ReactNode
+  className?: string
 }
 
 export const Text: React.FC<TextProps> = ({