@yusufalperendumlu/component-library 0.0.9 → 0.0.11

package/dist/index.d.ts

@@ -31,7 +31,7 @@ type IButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     variant: 'primary' | 'secondary' | 'outline' | 'danger';
     size?: 'small' | 'medium' | 'large';
     border?: 'primary' | 'secondary' | 'outline' | 'danger';
-    title: string;
+    title: string | React.ReactNode;
 };
 
 declare const Button: ({ variant, size, border, title, className, ...props }: IButtonProps) => react_jsx_runtime.JSX.Element;
@@ -82,12 +82,15 @@ declare function Table<T extends Record<string, any>>({ columns, data, onRowClic
 
 type ToastProps = {
     title: string;
-    description: string;
+    description?: string;
     duration?: number;
     type: 'success' | 'error';
     position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 };
 
-declare const Toast: React$1.FC<ToastProps>;
+declare const Toastr: {
+    success: (title: string, description?: string, duration?: number, position?: ToastProps["position"]) => void;
+    error: (title: string, description?: string, duration?: number) => void;
+};
 
-export { Autocomplete, Badge, Button, Dialog, Input, Table, Toast };
+export { Autocomplete, Badge, Button, Dialog, Input, Table, Toastr };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yusufalperendumlu/component-library",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",

package/src/components/Button/Button.types.ts

@@ -3,5 +3,5 @@ export type IButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   variant: 'primary' | 'secondary' | 'outline' | 'danger';
   size?: 'small' | 'medium' | 'large';
   border?: 'primary' | 'secondary' | 'outline' | 'danger';
-  title: string;
+  title: string | React.ReactNode;
 };

package/src/components/Input/Input.tsx

@@ -1,31 +1,31 @@
-import { cva } from 'class-variance-authority';
-import clsx from 'clsx';
-import React from 'react';
-
-import { InputProps } from './Input.types';
-
-const inputStyles = cva(
-  'outline-none font-inter bg-transparent min-w-[160px] px-4 py-2 placeholder:text-[#3f3f3f] rounded-md border border-[#424242] focus:outline-none  transition-colors duration-200 ease-in-out rounded-md disabled:cursor-not-allowed disabled:opacity-50'
-);
-
-const Input: React.FC<InputProps> = ({
-  placeholder,
-  type,
-  className,
-  label,
-  ...props
-}) => {
-  return (
-    <div className={clsx('flex flex-col', className)}>
-      {label && <label className='mb-1 text-sm text-[#424242]'>{label}</label>}
-      <input
-        type={type}
-        className={clsx(inputStyles(), className)}
-        placeholder={placeholder}
-        {...props}
-      />
-    </div>
-  );
-};
-
-export default Input;
+import { cva } from 'class-variance-authority';
+import clsx from 'clsx';
+import React from 'react';
+
+import { InputProps } from './Input.types';
+
+const inputStyles = cva(
+  'outline-none font-inter bg-transparent min-w-[160px] px-4 py-2 placeholder:text-[#3f3f3f] rounded-md border border-[#424242] focus:outline-none  transition-colors duration-200 ease-in-out rounded-md disabled:cursor-not-allowed disabled:opacity-50'
+);
+
+const Input: React.FC<InputProps> = ({
+  placeholder,
+  type,
+  className,
+  label,
+  ...props
+}) => {
+  return (
+    <div className={clsx('flex flex-col', className)}>
+      {label && <label className='mb-1 text-sm text-[#424242]'>{label}</label>}
+      <input
+        type={type}
+        className={clsx(inputStyles(), className)}
+        placeholder={placeholder}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default Input;

package/src/components/Toast/Toast.types.ts

@@ -1,6 +1,6 @@
 export type ToastProps = {
   title: string;
-  description: string;
+  description?: string;
   duration?: number;
   type: 'success' | 'error';
   position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

package/src/components/Toast/Toastr.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Toast from './Toast';
+import type { ToastProps } from './Toast.types';
+
+const showToast = (props: ToastProps) => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+
+  const root = ReactDOM.createRoot(container);
+
+  const remove = () => {
+    root.unmount();
+    container.remove();
+  };
+
+  root.render(<Toast {...props} duration={props.duration ?? 3000} />);
+
+  setTimeout(remove, props.duration ?? 3000);
+};
+
+export const Toastr = {
+  success: (
+    title: string,
+    description?: string,
+    duration?: number,
+    position: ToastProps['position'] = 'top-right'
+  ) => showToast({ type: 'success', title, description, duration, position }),
+
+  error: (title: string, description?: string, duration?: number) =>
+    showToast({
+      type: 'error',
+      title,
+      description,
+      duration,
+      position: 'top-right',
+    }),
+};

package/src/components/Toast/index.ts

@@ -1,3 +1,3 @@
-import Toast from "./Toast";
+import { Toastr } from "./Toastr";
 
-export default Toast;
+export default Toastr;

package/src/components/index.ts

@@ -4,4 +4,4 @@ export { default as Button } from './Button';
 export { default as Dialog } from './Dialog';
 export { default as Input } from './Input';
 export { default as Table } from './Table';
-export { default as Toast } from './Toast';
+export { default as Toastr } from './Toast';

package/src/tests/Badge.test.tsx

@@ -24,7 +24,7 @@ describe('Badge component', () => {
     const html = ReactDOMServer.renderToStaticMarkup(
       <Badge size='lg'>Large Badge</Badge>
     );
-    expect(html).toMatch('/text-base/');
+    expect(html).toMatch(/text-base/);
   });
 
   it('merges className prop correctly', () => {