myshell-react-lib 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myshell-react-lib",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "description": "React component library with Tailwind CSS integration",
   "main": "./dist/index.cjs",

package/src/components/icon.tsx

@@ -46,6 +46,12 @@ const iconVariants = cva('inline-flex shrink-0', {
       bolder: 'text-Colors-Foreground-Bolder',
       inverse: 'text-Colors-Foreground-Static-White',
       critical: 'text-Colors-Foreground-Critical-Default',
+      brand: 'text-Colors-Text-Brand-Default',
+      'critical-bolder': 'text-Colors-Text-Critical-Bolder',
+      warning: 'text-Colors-Text-Warning-Default',
+      'warning-bolder': 'text-Colors-Text-Warning-Bolder',
+      success: 'text-Colors-Text-Success-Default',
+      'success-bolder': 'text-Colors-Text-Success-Bolder',
     },
     rotate: {
       '45': 'rotate-45',

package/src/components/icons/outline/FilterIcon.tsx

@@ -12,7 +12,6 @@ function FilterIcon({ className }: { className?: string }) {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M10.0278 2.84729C7.67712 2.84729 5.37221 3.04531 3.12895 3.42572C2.37055 3.55432 1.83336 4.2145 1.83336 4.96859V5.84598C1.83336 6.51468 2.099 7.15598 2.57185 7.62882L7.13715 12.1941C7.37358 12.4305 7.5064 12.7511 7.5064 13.0855V18.6055C7.5064 18.8239 7.61951 19.0268 7.80535 19.1417C7.99118 19.2565 8.22323 19.267 8.41863 19.1693L11.1553 17.8009C12.0095 17.3738 12.5491 16.5008 12.5491 15.5458V13.0855C12.5491 12.7511 12.6819 12.4305 12.9183 12.1941L17.4837 7.62882C17.9565 7.15598 18.2221 6.51468 18.2221 5.84598V4.96857C18.2221 4.21448 17.6849 3.5543 16.9265 3.4257C14.6833 3.0453 12.3784 2.84729 10.0278 2.84729ZM3.33973 4.66863C5.51363 4.29998 7.74805 4.10794 10.0278 4.10794C12.3075 4.10794 14.5419 4.29998 16.7158 4.66861C16.8531 4.69189 16.9615 4.8142 16.9615 4.96857V5.84598C16.9615 6.18033 16.8286 6.50098 16.5922 6.7374L12.0269 11.3026C11.5541 11.7755 11.2884 12.4168 11.2884 13.0855V15.5458C11.2884 16.0233 11.0186 16.4598 10.5915 16.6734L8.76707 17.5856V13.0855C8.76707 12.4168 8.50143 11.7755 8.02859 11.3026L3.46328 6.7374C3.22685 6.50098 3.09403 6.18033 3.09403 5.84598V4.96859C3.09403 4.81422 3.20244 4.69191 3.33973 4.66863ZM15.1424 12.0035C14.9222 11.7833 14.5651 11.7833 14.3448 12.0035C14.1246 12.2238 14.1246 12.5809 14.3448 12.8011L16.3756 14.8318L14.3448 16.8625C14.1246 17.0828 14.1246 17.4399 14.3448 17.6601C14.5651 17.8804 14.9222 17.8804 15.1424 17.6601L17.1732 15.6294L19.2039 17.6601C19.4242 17.8804 19.7813 17.8804 20.0015 17.6601C20.2218 17.4399 20.2218 17.0828 20.0015 16.8625L17.9708 14.8318L20.0015 12.8011C20.2218 12.5809 20.2218 12.2238 20.0015 12.0035C19.7813 11.7833 19.4242 11.7833 19.2039 12.0035L17.1732 14.0342L15.1424 12.0035Z"
-        fill="#3E5CFA"
       />
     </svg>
   );

package/src/components/secondary-navigation-bar.tsx

@@ -4,12 +4,11 @@ import { LucideIcon } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 
-import { HeroIcon } from '../common/constants/types/common';
+import { HeroIcon } from '@/common/constants/types/common';
 import { cn } from '@/lib/utils';
 
 import { Avatar } from './avatar';
-import { Button } from './button/button';
-import { Icon, IconComponent } from './icon';
+import { Button } from './button';
 import { IconButton } from './button/icon-button';
 import { Link } from './link';
 import { SearchBar } from './search-bar';
@@ -18,15 +17,22 @@ import { Display, Text } from './typography';
 import FilterIcon from './icons/outline/FilterIcon';
 
 type IIcons = {
-  icon: HeroIcon | LucideIcon | IconComponent | React.ElementType;
+  icon: HeroIcon | LucideIcon | React.ElementType;
   onClick?: () => void;
 };
 type IActions = {
   label: string;
   onClick?: () => void;
-  icon?: HeroIcon | LucideIcon | IconComponent | React.ElementType;
-  variant?: 'primary' | 'secondary' | 'static' | 'link' | 'plain';
-  color?: 'default' | 'brand' | 'error' | 'chat';
+  icon?: HeroIcon | LucideIcon | React.ElementType;
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'static'
+    | 'link'
+    | 'plain'
+    | 'solid';
+  color?: 'default' | 'brand' | 'error';
 };
 type ISecondaryNavigationBar = {
   /**
@@ -109,6 +115,7 @@ type ISecondaryNavigationBar = {
   };
   onSearchChange?: (value: string) => void;
   onClear?: () => void;
+  onBack?: () => void;
 };
 
 function SecondaryNavigationBar({
@@ -127,6 +134,7 @@ function SecondaryNavigationBar({
   avatar,
   onSearchChange,
   onClear,
+  onBack,
 }: ISecondaryNavigationBar) {
   const isMobile = useMedia('(max-width: 768px)');
   const navbarRef = useRef<HTMLDivElement>(null);
@@ -150,14 +158,13 @@ function SecondaryNavigationBar({
 
     return () => window.removeEventListener('scroll', handleScroll);
   }, [hasBackground]);
-  const currentClearText = clearText || 'Clear Filters';
 
   return (
     <div
       ref={navbarRef}
       className={cn(
         'w-full flex flex-col md:flex-row justify-center items-center px-4 md:px-6',
-        !isMobile && border && 'border-b border-Colors-Border-Default',
+        !isMobile && border && 'border-b border-default',
         showBackground && 'bg-Colors-Background-Normal-Primary-Default'
       )}
     >
@@ -169,16 +176,30 @@ function SecondaryNavigationBar({
         <div
           className={cn('flex items-center', avatar?.logo && 'min-w-[76px]')}
         >
-          {backUrl && (
+          {(backUrl || onBack) && (
             <div className="flex justify-start items-center">
-              <Link href={backUrl} className="flex justify-center items-center">
+              {backUrl ? (
+                <Link
+                  href={backUrl}
+                  className="flex justify-center items-center"
+                >
+                  <IconButton
+                    variant={!hasBackground ? 'primary' : 'plain'}
+                    color={!hasBackground ? 'gray' : 'brand'}
+                    size="md"
+                    icon={ArrowLeftIcon}
+                  />
+                </Link>
+              ) : (
                 <IconButton
                   variant={!hasBackground ? 'primary' : 'plain'}
                   color={!hasBackground ? 'gray' : 'brand'}
                   size="md"
                   icon={ArrowLeftIcon}
+                  onClick={onBack}
                 />
-              </Link>
+              )}
+
               {!isMobile && title && (
                 <Separator orientation="vertical" className="h-5 ml-1.5 mr-3" />
               )}
@@ -234,8 +255,8 @@ function SecondaryNavigationBar({
                     icons.map((icon, index) => (
                       <IconButton
                         key={index}
-                        variant={!hasBackground ? 'primary' : 'plain'}
-                        color={!hasBackground ? 'gray' : 'brand'}
+                        variant={!hasBackground ? 'tertiary' : 'plain'}
+                        color={!hasBackground ? 'default' : 'brand'}
                         size="md"
                         icon={icon.icon}
                         onClick={icon.onClick}
@@ -252,18 +273,18 @@ function SecondaryNavigationBar({
                 <>
                   {showClear && !isMobile && (
                     <Button
-                      aria-label={currentClearText}
+                      aria-label={clearText || 'Clear Filters'}
                       size="md"
-                      variant="primary"
+                      variant="secondary"
                       color="default"
-                      className="hidden md:flex relative text-sm blue-30 text-blue-30 font-medium ml-2 mr-3 px-4 justify-center items-center"
+                      className="hidden md:flex relative text-sm font-medium ml-2 mr-3 px-4 justify-center items-center"
                       onClick={onClear}
                     >
                       <div className="relative mr-1.5">
-                        <FilterIcon className="w-5 h-5" />
+                        <FilterIcon className="w-5 h-5 fill-cc-Button-Secondary-fg-default" />
                       </div>
                       <span className="hidden md:block">
-                        {currentClearText}
+                        {clearText || 'Clear Filters'}
                       </span>
                     </Button>
                   )}
@@ -283,7 +304,7 @@ function SecondaryNavigationBar({
                   {showClear && isMobile && (
                     <IconButton
                       className="flex-shrink-0 flex relative text-sm font-medium px-4 justify-center items-center ml-3"
-                      aria-label={currentClearText}
+                      aria-label={clearText || 'Clear Filters'}
                       size="md"
                       variant="primary"
                       color="default"

package/src/stories/SecondaryNavigationBar.stories.tsx

@@ -106,8 +106,8 @@ export const SecondaryNavigationBarDemo: Story = {
             actions={[
               {
                 label: 'Cancel',
-                variant: 'primary',
-                color: 'gray',
+                variant: 'tertiary',
+                color: 'default',
                 onClick: () => {
                   console.log('click');
                 },
@@ -115,7 +115,7 @@ export const SecondaryNavigationBarDemo: Story = {
               {
                 label: 'Cancel',
                 variant: 'primary',
-                color: 'brand',
+                color: 'default',
                 onClick: () => {
                   console.log('click');
                 },
@@ -131,7 +131,7 @@ export const SecondaryNavigationBarDemo: Story = {
               {
                 label: 'Label',
                 variant: 'plain',
-                color: 'brand',
+                color: 'default',
                 onClick: () => {
                   console.log('click');
                 },