feat: Update color scheme and component styling

- Change primary color from indigo (#4f46e5) to golden yellow (#ffb900)
- Update Storybook theme colors
- Modify Avatar default colors
- Enhance Card component with image support and styling improvements
- Update Tag and Tiptap link styles to use new primary color
- Bump package version to 1.0.204

Author: agjs

.storybook/theme.ts

@@ -10,12 +10,12 @@ export default create({
   appBg: "#1b1f23",
   appContentBg: "#1b1f23",
   appBorderColor: "#1b1f23",
-  colorPrimary: "#4f46e5",
+  colorPrimary: "#ffb900",
   textColor: "#9ca3af",
   barBg: "#1b1f23",
-  barTextColor: "#4f46e5",
+  barTextColor: "#ffb900",
   barSelectedColor: "#4338ca",
   barHoverColor: "#4338ca",
   appBorderRadius: 0,
-  colorSecondary: "#4f46e5"
+  colorSecondary: "#ffb900"
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.202",
+  "version": "1.0.204",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/Avatar/__snapshots__/Avatar.test.tsx.snap

@@ -34,12 +34,12 @@ exports[`Avatar component > renders correctly - snapshot test 1`] = `
         mask="url(#:r2:)"
       >
         <rect
-          fill="#6366f1"
+          fill="#ad46ff"
           height="36"
           width="36"
         />
         <rect
-          fill="#bae6fd"
+          fill="#ffb900"
           height="36"
           rx="6"
           transform="translate(7 1) rotate(73 18 18) scale(1.1)"

src/Components/Avatar/index.tsx

@@ -9,7 +9,7 @@ const Avatar: FC<IAvatarProps> = ({
   src,
   alt = "John Doe",
   size = 50,
-  colors = ["#6366f1", "#bae6fd"],
+  colors = ["#ad46ff", "#ffb900"],
   className
 }) => {
   const classes = classNames(

src/Components/Card/Card.stories.tsx

@@ -1,11 +1,10 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { NavLink } from "react-router-dom";
 import { withRouter } from "storybook-addon-remix-react-router";
 
 import Card from ".";
-import { ICard } from "./types";
 
-const CardStories: Meta<ICard> = {
+const CardStories: Meta<typeof Card> = {
   title: "Components/Card",
   decorators: [withRouter],
   component: Card,
@@ -14,6 +13,8 @@ const CardStories: Meta<ICard> = {
   }
 };
 
+type Story = StoryObj<typeof Card>;
+
 export const Default = () => {
   return (
     <div className='yl-mt-8'>
@@ -25,6 +26,7 @@ export const Default = () => {
           description:
             "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum, nesciunt.",
           author: "John Doe",
+          authorUrl: "/john-doe",
           date: "2021-10-10T00:00:00.000Z",
           tags: [
             { name: "Tag 1", url: "/" },
@@ -58,4 +60,30 @@ export const WithExternalLink = () => {
   );
 };
 
+export const WithImage: Story = {
+  args: {
+    NavLink,
+    data: {
+      title: "Beautiful Mountain Landscape",
+      titleUrl: "/mountain-landscape",
+      description:
+        "A stunning view of snow-capped mountains at sunrise, showcasing nature's raw beauty and majesty.",
+      author: "John Doe",
+      authorUrl: "/authors/john-doe",
+      date: "2024-02-15",
+      image: "https://images.unsplash.com/photo-1706463629335-d92264bbfd6f",
+      tags: [
+        { name: "nature", url: "/tags/nature" },
+        { name: "landscape", url: "/tags/landscape" },
+        { name: "mountains", url: "/tags/mountains" },
+        { name: "sunrise", url: "/tags/sunrise" },
+        { name: "nature", url: "/tags/nature" },
+        { name: "landscape", url: "/tags/landscape" },
+        { name: "mountains", url: "/tags/mountains" },
+        { name: "sunrise", url: "/tags/sunrise" }
+      ]
+    }
+  }
+};
+
 export default CardStories;

src/Components/Card/index.tsx

@@ -8,29 +8,40 @@ import URLUtils from "Utils/URL";
 import { ICard } from "./types";
 
 const Card: FC<ICard> = ({ data, className, NavLink }) => {
-  const { title, description, author, date, tags, titleUrl, authorUrl } = data;
+  const { title, description, author, date, tags, titleUrl, authorUrl, image } =
+    data;
 
   return (
     <div
       className={classNames(
-        "group yl-flex yl-flex-col yl-justify-between yl-border-2 yl-border-border yl-rounded-lg yl-p-6",
+        "yl-flex yl-flex-col yl-justify-between yl-border yl-border-border/30 yl-rounded-lg yl-overflow-hidden",
         className
       )}
     >
-      <div>
+      {image && (
+        <div className='yl-w-full yl-h-48 yl-relative'>
+          <img
+            src={image}
+            alt={title}
+            className='yl-w-full yl-h-full yl-object-cover'
+          />
+        </div>
+      )}
+      <div className='yl-p-6'>
         <div className='yl-flex yl-items-center'>
           <div className='yl-flex yl-flex-1 yl-justify-between yl-gap-2 md:yl-my-1'>
             <div className='yl-flex yl-flex-col md:yl-flex-row md:yl-items-center md:yl-gap-2'>
               {author && (
                 <>
                   {authorUrl ? (
-                    <NavLink to={authorUrl}>
-                      <span className='yl-flex yl-items-center yl-gap-2 yl-text-secondary hover:yl-text-primary yl-cursor-pointer'>
-                        {author}
-                      </span>
+                    <NavLink
+                      to={authorUrl}
+                      className='yl-flex yl-items-center yl-gap-2 yl-text-primary yl-cursor-pointer'
+                    >
+                      {author}
                     </NavLink>
                   ) : (
-                    <span className='yl-flex yl-items-center yl-gap-2 yl-text-secondary hover:yl-text-primary'>
+                    <span className='yl-flex yl-items-center yl-gap-2 yl-text-primary hover:yl-text-primary'>
                       {author}
                     </span>
                   )}
@@ -60,12 +71,12 @@ const Card: FC<ICard> = ({ data, className, NavLink }) => {
         <Paragraph className='yl-py-4'>{description}</Paragraph>
       </div>
       {tags && tags.length > 0 && (
-        <div className='yl-mt-2 yl-flex yl-items-center yl-gap-2'>
+        <div className='yl-mt-2 yl-flex yl-items-center yl-gap-2 !yl-px-6 yl-pb-4 yl-flex-wrap'>
           {tags.map((tag, index) => (
             <NavLink
               key={index}
               to={tag.url}
-              className='hover:yl-text-stroke yl-text-secondary hover:yl-underline hover:yl-opacity-80 active:yl-opacity-50'
+              className='hover:yl-text-stroke yl-text-primary hover:yl-underline hover:yl-opacity-80 active:yl-opacity-50'
             >
               #{tag.name}
             </NavLink>

src/Components/Card/types.ts

@@ -11,6 +11,7 @@ export interface ICardData {
     name: string;
     url: string;
   }[];
+  image?: string;
 }
 
 export interface ICard {

src/Components/Cards/index.tsx

@@ -5,7 +5,13 @@ import Card from "Components/Card";
 
 import { ICardsProps } from "./types";
 
-const Cards: FC<ICardsProps> = ({ className, cards, columns, NavLink }) => {
+const Cards: FC<ICardsProps> = ({
+  className,
+  cardClassName,
+  cards,
+  columns,
+  NavLink
+}) => {
   return (
     <div
       data-testid='cards'
@@ -25,7 +31,14 @@ const Cards: FC<ICardsProps> = ({ className, cards, columns, NavLink }) => {
       })}
     >
       {cards.map((card, index) => {
-        return <Card key={index} data={card} NavLink={NavLink} />;
+        return (
+          <Card
+            key={index}
+            data={card}
+            NavLink={NavLink}
+            className={cardClassName}
+          />
+        );
       })}
     </div>
   );

src/Components/Cards/types.ts

@@ -9,4 +9,5 @@ export interface ICardsProps {
   >;
   columns: number;
   className?: string;
+  cardClassName?: string;
 }

src/Components/Inputs/Tiptap/constants.ts

@@ -64,7 +64,7 @@ export const typograyClassNames = {
     ),
   a: (className?: string) =>
     classNames(
-      "hover:yl-text-stroke yl-text-primary hover:yl-underline hover:yl-opacity-80 active:yl-opacity-50",
+      "yl-break-all hover:yl-text-stroke yl-text-primary hover:yl-underline hover:yl-opacity-80 active:yl-opacity-50",
       className
     ),
   ul: (className?: string) =>

src/Components/Tag/__snapshots__/Tag.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Tag component > renders correctly - snapshot test 1`] = `
 <DocumentFragment>
   <div
-    class="yl-rounded-md yl-bg-transparent yl-text-base yl-text-text last:yl-mr-0 hover:yl-border-border hover:yl-text-text"
+    class="yl-rounded-md yl-bg-transparent yl-text-base yl-text-primary last:yl-mr-0 hover:yl-border-border hover:yl-text-text"
   >
     <span>
       #example

src/Components/Tag/index.tsx

@@ -8,7 +8,7 @@ const Tag: FC<ITagProps> = ({ name, className = null, onClick }) => {
     <div
       onClick={onClick}
       className={classNames(
-        "yl-rounded-md yl-bg-transparent yl-text-base yl-text-text last:yl-mr-0 hover:yl-border-border hover:yl-text-text",
+        "yl-rounded-md yl-bg-transparent yl-text-base yl-text-primary last:yl-mr-0 hover:yl-border-border hover:yl-text-text",
         className,
         {
           "yl-cursor-pointer": onClick

src/tailwind.css

@@ -4,7 +4,7 @@
 
 @layer base {
   :root {
-    --color-primary: 79 57 246;
+    --color-primary: 255 185 0;
     --color-secondary: 156 163 175;
     --color-background: 18 20 22;
     --color-text: 212 212 212;