v83

- remove dsr- prefix - use tailwind merge - bug fixes - use remix instead of svg
traboda · Mar 29, 2024 · 5f48e3e · 5f48e3e
1 parent e879f24
commit 5f48e3e
Show file tree

Hide file tree

Showing 110 changed files with 1,554 additions and 1,493 deletions.
diff --git a/.storybook/utils/ThemeContextDecorator.tsx b/.storybook/utils/ThemeContextDecorator.tsx
@@ -26,7 +26,7 @@ const ThemeContextDecorator = ({ children }: { children: ReactNode }) => {
     const theme = useDarkMode() ? darkTheme : defaultTheme;
 
     return (
-        <div key={nanoid()} className="dsr-p-4">
+        <div key={nanoid()} className="p-4">
             <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet" />
             <DSRContextProvider
                 theme={theme}

diff --git a/README.MD b/README.MD
@@ -130,7 +130,7 @@ npm run type-check
 
 ## Credits
 
-- Icons used in the package are from [Adobe Spectrum-CSS Workflow Icons](https://github.com/adobe/spectrum-css-workflow-icons).
+- Icons used in the package are from [Remix Icons](https://remixicons.com).
 
 ## Contributions
 

diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx
@@ -3,8 +3,7 @@ import React, { useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { nanoid } from 'nanoid';
 
-import ChevronUp from '../utils/icons/chevron-up';
-import Lock from '../utils/icons/lock';
+import mcs from '../utils/merge';
 
 export type AccordionProps = {
   title: string | React.ReactNode,
@@ -32,19 +31,19 @@ const Accordion = ({
   return (
     <div
       id={id}
-      className={clsx([
-        'accordion dsr-p-2 dsr-rounded-lg dark:dsr-bg-gray-500/20 dsr-bg-gray-500/10',
-        'dsr-border dark:dsr-border-neutral-500/70 dsr-border-neutral-500/10',
+      className={mcs([
+        'accordion p-2 rounded-lg dark:bg-gray-500/20 bg-gray-500/10',
+        'border dark:border-neutral-500/70 border-neutral-500/10',
         className,
       ])}
     >
       <button
-        className={clsx([
-          'accordion-button dsr-w-full dsr-px-3 dsr-py-2 dsr-font-semibold dsr-flex dsr-rounded-lg dsr-text-lg',
-          'dsr-justify-between dsr-text-color dsr-items-center dsr-bg-white/90 dark:dsr-bg-black/20 dsr-shadow-sm',
-          'dsr-border dark:dsr-border-neutral-500/70 dsr-border-neutral-500/10',
-          (isDisabled || isLocked) && 'dsr-cursor-not-allowed',
+        className={mcs([
+          'accordion-button w-full px-3 py-2 font-semibold flex rounded-lg text-lg',
+          'justify-between text-color items-center bg-white/90 dark:bg-black/20 shadow-sm',
+          'border dark:border-neutral-500/70 border-neutral-500/10',
           titleClassName,
+          (isDisabled || isLocked) && 'cursor-not-allowed',
         ])}
         aria-expanded={isOpen}
         aria-controls={`${id}_content`}
@@ -59,20 +58,20 @@ const Accordion = ({
         {(!isDisabled) ? (
           <div
             className={clsx([
-              'dsr-transition dsr-transform dsr-duration-200',
-              isOpen ? 'dsr-rotate-180' : '',
+              'transition transform duration-200',
+              isOpen ? 'rotate-180' : '',
             ])}
           >
-            {isLocked ? <Lock /> : <ChevronUp size={24} />}
+            {isLocked ? <i className="ri-lock-2-line" /> : <i className="ri-arrow-up-s-line" />}
           </div>
         ) : null}
       </button>
       <div
         id={`${id}_content`}
         aria-hidden={!isOpen}
         className={clsx([
-          'accordion-content dsr-transition-all dsr-opacity-0 dsr-h-0 dsr-text-color dsr-px-3',
-          isOpen ? clsx([bodyClassName, 'dsr-opacity-100 dsr-h-auto dsr-py-3']) : '',
+          'accordion-content transition-all opacity-0 h-0 text-color px-3',
+          isOpen ? mcs(['opacity-100 h-auto py-3', bodyClassName]) : '',
         ])}
       >
         {isOpen && renderer ? renderer() : text}

diff --git a/src/components/AccordionGroup.tsx b/src/components/AccordionGroup.tsx
@@ -2,6 +2,8 @@
 import React, { ReactNode, useState } from 'react';
 import clsx from 'clsx';
 
+import mcs from '../utils/merge';
+
 import Accordion from './Accordion';
 
 export type AccordionGroupProps = {
@@ -39,20 +41,20 @@ const AccordionGroup = ({
           id={id ? `${id}_accordion_${index + 1}` : undefined}
           isOpen={!keepExpanded ? active === index : (initialIndex === index || item?.isOpen)}
           key={index}
-          className={clsx(['dsr-mb-2', accordionClassName])}
+          className={mcs(['mb-2', accordionClassName])}
           titleClassName={titleClassName}
           bodyClassName={bodyClassName}
           onChange={() => {
             if (!keepExpanded) setActive(active === index ? -1 : index);
           }}
           title={numberItems || item.isCompleted ? (
-            <div className="dsr-flex dsr-items-center dsr-gap-2">
+            <div className="flex items-center gap-2">
               <div
                 className={clsx([
-                  'dsr-p-1 dsr-rounded-full dsr-h-[36px] dsr-w-[36px] border dsr-border-neutral-200/50',
-                  'dsr-flex dsr-justify-center dsr-text-base dsr-items-center',
-                  activeIndex === index || item?.isCompleted ? '' : 'dsr-border dark:dsr-border-neutral-500/80 dsr-border-neutral-500/20',
-                  activeIndex === index ? 'dsr-bg-primary dsr-text-primaryTextColor' : item.isCompleted ? 'dsr-bg-green-500 dsr-text-white' : 'dsr-bg-gray-200/80 dark:dsr-bg-gray-600/80',
+                  'p-1 rounded-full h-[36px] w-[36px] border border-neutral-200/50',
+                  'flex justify-center text-base items-center',
+                  activeIndex === index || item?.isCompleted ? '' : 'border dark:border-neutral-500/80 border-neutral-500/20',
+                  activeIndex === index ? 'bg-primary text-primaryTextColor' : item.isCompleted ? 'bg-green-500 text-white' : 'bg-gray-200/80 dark:bg-gray-600/80',
                 ])}
               >
                 {item.isCompleted ? (

diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
@@ -1,12 +1,12 @@
 'use client';
 import React, { useState } from 'react';
-import clsx from 'clsx';
 
 import { cva } from '../utils/cva';
 import {
   ChayaColorType, colorVariantMapper,
   EMPTY_COLOR_MAP, MINIMAL_BG_COLOR_MAP, TEXT_COLOR_MAP, BORDER_COLOR_MAP,
 } from '../utils/classMaps/colors';
+import mcs from '../utils/merge';
 
 import Button, { ButtonProps } from './Button';
 import Icon, { IconInputType } from './Icon';
@@ -30,23 +30,23 @@ export type AlertProps = {
 
 const alertClassName = cva({
   base: [
-    'alert dsr-relative dsr-rounded-lg dsr-px-3 dsr-flex dsr-flex-col dsr-gap-0.5 dsr-border',
+    'alert relative rounded-lg px-3 flex flex-col gap-0.5 border',
   ],
   variants: {
     variant: {
-      solid: 'dark:dsr-border-opacity-70 dsr-border-opacity-20',
-      outline: 'dark:dsr-border-opacity-80 dsr-border-opacity-60',
+      solid: 'dark:border-opacity-70 border-opacity-20',
+      outline: 'dark:border-opacity-80 border-opacity-60',
     },
     color: EMPTY_COLOR_MAP,
   },
   compoundVariants: [
     ...colorVariantMapper<AlertVariantsType>([MINIMAL_BG_COLOR_MAP, TEXT_COLOR_MAP, BORDER_COLOR_MAP], 'solid'),
     ...colorVariantMapper<AlertVariantsType>([BORDER_COLOR_MAP, TEXT_COLOR_MAP], 'outline'),
-    { variant: 'solid', color: 'black', className: 'dark:dsr-bg-neutral-800' },
-    { variant: 'solid', color: 'white', className: 'dsr-bg-white dsr-border dsr-border-neutral-200 dsr-border-opacity-100' },
-    { variant: 'outline', color: 'black', className: 'dsr-text-black dark:dsr-text-black' },
-    { variant: 'outline', color: 'white', className: 'dsr-text-white dark:dsr-text-white dsr-border-white' },
-    { variant: 'outline', color: 'contrast', className: 'dsr-text-neutral-800 dark:dsr-text-white' },
+    { variant: 'solid', color: 'black', className: 'dark:bg-neutral-800' },
+    { variant: 'solid', color: 'white', className: 'bg-white border border-neutral-200 border-opacity-100' },
+    { variant: 'outline', color: 'black', className: 'text-black dark:text-black' },
+    { variant: 'outline', color: 'white', className: 'text-white dark:text-white border-white' },
+    { variant: 'outline', color: 'contrast', className: 'text-neutral-800 dark:text-white' },
   ],
 });
 
@@ -60,38 +60,38 @@ const Alert = ({
   return !hide ? (
     <div
       id={id}
-      className={clsx([
+      className={mcs([
         alertClassName({ variant, color: type }),
-        description ? 'dsr-py-4' : 'dsr-py-3',
+        description ? 'py-4' : 'py-3',
         className,
       ])}
     >
       {allowDismissal && (
-      <div className="dsr-absolute dsr-top-0 dsr-right-0 dsr-pr-3 dsr-pt-2">
+      <div className="absolute top-0 right-0 pr-3 pt-2">
         <button
           title="dismiss"
-          className="alert-dismiss-button dsr-font-mono dsr-outline-none dsr-font-bold dsr-text-lg"
+          className="alert-dismiss-button font-mono outline-none font-bold text-lg"
           onClick={() => { setHide(true); onDismiss(); }}
         >
           <Icon icon="times" size={16} />
         </button>
       </div>
       )}
       {title && (
-      <h4 className={description ? 'dsr-text-lg dsr-font-semibold' : ''}>
+      <h4 className={description ? 'text-lg font-semibold' : ''}>
         {titleIcon ? <Icon icon={titleIcon} /> : null}
         {title}
       </h4>
       )}
       {description && <p>{description}</p>}
       {children}
       {(primaryButton || secondaryButton) && (
-      <div className="dsr-flex dsr-items-center dsr-mt-2">
+      <div className="flex items-center mt-2">
         {primaryButton && (
-        <div className="dsr-mr-2">
+        <div className="mr-2">
           <Button
             color="primary"
-            className="dsr-text-base"
+            className="text-base"
             {...primaryButton}
           />
         </div>
@@ -100,7 +100,7 @@ const Alert = ({
         <div>
           <Button
             color="secondary"
-            className="dsr-text-base"
+            className="text-base"
             {...secondaryButton}
           />
         </div>

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
@@ -1,6 +1,7 @@
 'use client';
 import React, { useState } from 'react';
-import clsx from 'clsx';
+
+import mcs from '../utils/merge';
 
 export type AvatarProps = {
   alt: string,
@@ -26,7 +27,7 @@ const Avatar = ({ alt, src, size = 64, id, className = '', title }: AvatarProps)
   const renderPlaceholder = () => (
     <svg
       id={id}
-      className={clsx('avatar-placeholder dsr-rounded-lg', className)}
+      className={mcs('avatar-placeholder rounded-lg', className)}
       width={size}
       height={size}
       viewBox="0 0 75 75"
@@ -51,7 +52,7 @@ const Avatar = ({ alt, src, size = 64, id, className = '', title }: AvatarProps)
 
   return !(src?.length) || show ? renderPlaceholder() : (
     <img
-      className={clsx('avatar dsr-rounded-lg dsr-border dark:dsr-border-gray-500/70 dsr-border-gray-500/10', className)}
+      className={mcs('avatar rounded-lg border dark:border-gray-500/70 border-gray-500/10', className)}
       height={size}
       width={size}
       title={title}

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import clsx from 'clsx';
 import { cva } from 'cva';
 
 import {
   colorVariantMapper, ChayaColorType,
   BORDER_COLOR_MAP, MINIMAL_BG_COLOR_MAP, SOLID_BG_COLOR_MAP,
   SOLID_TEXT_COLOR_MAP, TEXT_COLOR_MAP, TRANSPARENT_BG_TEXT_COLOR_MAP,
 } from '../utils/classMaps/colors';
+import mcs from '../utils/merge';
 
 import Icon, { IconInputType } from './Icon';
 
@@ -30,30 +30,30 @@ export type BadgeProps = BaseBadgeProps & {
 };
 
 const iconSizes = {
-  xs: [12, 'dsr-mr-1', 'dsr-ml-1'],
-  sm: [14, 'dsr-mr-1', 'dsr-ml-1'],
-  md: [16, 'dsr-mr-2', 'dsr-ml-2'],
-  lg: [18, 'dsr-mr-2', 'dsr-ml-2'],
-  xl: [20, 'dsr-mr-2', 'dsr-ml-2'],
+  xs: [12, 'mr-1', 'ml-1'],
+  sm: [14, 'mr-1', 'ml-1'],
+  md: [16, 'mr-2', 'ml-2'],
+  lg: [18, 'mr-2', 'ml-2'],
+  xl: [20, 'mr-2', 'ml-2'],
 } as const;
 
 const badgeStyling = cva({
   base: [
-    'badge dsr-relative dsr-transition dsr-overflow-hidden dsr-border',
-    'dsr-inline-flex  dsr-items-center dsr-justify-center dsr-text-center',
+    'badge relative transition overflow-hidden border',
+    'inline-flex  items-center justify-center text-center',
   ],
   variants: {
     size: {
-      xs: 'dsr-px-1.5 dsr-py-0.5 dsr-text-xs',
-      sm: 'dsr-px-2.5 dsr-py-1 dsr-text-sm',
-      md: 'dsr-px-3.5 dsr-py-2 dsr-text-base',
-      lg: 'dsr-px-5 dsr-py-3 dsr-text-lg',
-      xl: 'dsr-px-6 dsr-py-4 dsr-text-xl',
+      xs: 'px-1.5 py-0.5 text-xs',
+      sm: 'px-2.5 py-1 text-sm',
+      md: 'px-3.5 py-2 text-base',
+      lg: 'px-5 py-3 text-lg',
+      xl: 'px-6 py-4 text-xl',
     },
     variant: {
       solid: '',
-      outline: 'dsr-border-2',
-      minimal: 'dsr-border-0',
+      outline: 'border-2',
+      minimal: 'border-0',
       link: '', // @todo added for using with colorVariantMapper
     },
     color: BORDER_COLOR_MAP,
@@ -71,10 +71,10 @@ const Badge = ({
   id, className = '', style, circular = false, leftIcon, rightIcon,
 }: BadgeProps) => {
 
-  const computedClassName = clsx([
-    className,
+  const computedClassName = mcs([
     badgeStyling({ variant, size, color }),
-    circular ? 'dsr-rounded-full' : 'dsr-rounded',
+    circular ? 'rounded-full' : 'rounded',
+    className,
   ]);
 
   return (