adds checker icon labels (#11)

added checker icon labels

Author: nijoe1

src/features/checker/components/IconLabels/CheckerAILabel/CheckerAILabel.mdx

@@ -0,0 +1,37 @@
+import { Meta, Title, Primary, Stories, Controls, Story } from "@storybook/blocks";
+import * as CheckerAILabelStories from "./CheckerAILabel.stories";
+import { CheckerAILabel } from "./CheckerAILabel";
+
+# CheckerAILabel
+
+<Meta of={CheckerAILabelStories} />
+
+The `CheckerAILabel` component is designed to visually represent the evaluation of a given percentage. It displays an icon alongside a label that indicates whether the percentage is considered "Approve", "Uncertain", or "Reject".
+
+## Props
+
+- **`percent`**: A number representing the percentage to evaluate. The component will display:
+  - "Approve" if the percentage is greater than or equal to 60.
+  - "Uncertain" if the percentage is between 41 and 59.
+  - "Reject" if the percentage is 40 or below.
+- **`className`**: An optional string to apply additional CSS classes for styling.
+
+## Example
+
+### Default Usage
+
+<Story of={CheckerAILabelStories.Default} />
+
+This example demonstrates the default usage of the `CheckerAILabel` component, showcasing how it dynamically updates the label based on the `percent` prop.
+
+## Controls
+
+<Controls />
+
+Use the controls to dynamically adjust the `percent` prop and observe how the component's output changes.
+
+## Other Variations
+
+<Stories />
+
+Explore other variations and use cases of the `CheckerAILabel` component to see how it can be integrated into different scenarios.

src/features/checker/components/IconLabels/CheckerAILabel/CheckerAILabel.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CheckerAILabel } from "./CheckerAILabel";
+
+const meta = {
+  title: "Features/Checker/components/CheckerAILabel",
+  component: CheckerAILabel,
+  args: {
+    percent: 77,
+  },
+  argTypes: {
+    percent: {
+      control: "number",
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof CheckerAILabel>;
+
+export const Default: Story = {};

src/features/checker/components/IconLabels/CheckerAILabel/CheckerAILabel.tsx

@@ -0,0 +1,37 @@
+import { Icon, IconType } from "@/primitives/Icon";
+import { cn } from "@/lib/utils";
+
+export type CheckerAILabelProps = React.HTMLAttributes<HTMLDivElement> & {
+  percent: number;
+};
+
+export const CheckerAILabelComponents: React.FC<CheckerAILabelProps> = ({ className, percent }) => {
+  const evaluationMessage = getEvaluationMessage(percent);
+  return (
+    <div className={cn("flex items-center gap-1", className)}>
+      <Icon type={IconType.SPARKLES} className={"size-5 fill-green-600"} />
+      <span className="text-[16px]/[24px]">{`${evaluationMessage}`}</span>
+    </div>
+  );
+};
+export const CheckerAILabel: React.FC<CheckerAILabelProps> = ({ percent, className, ...props }) => {
+  return <CheckerAILabelComponents className={className} percent={percent} {...props} />;
+};
+
+function getEvaluationMessage(percent: number): string {
+  if (percent > 100) {
+    percent = 100;
+  }
+  if (percent < 0) {
+    percent = 0;
+  }
+  if (percent > 60) {
+    return `Approve (${percent}%)`;
+  } else if (percent > 50 && percent <= 60) {
+    return `Uncertain (${percent}%)`;
+  } else if (percent > 40 && percent <= 50) {
+    return `Uncertain (${percent}%)`;
+  } else {
+    return `Reject (${percent}%)`;
+  }
+}

src/features/checker/components/IconLabels/CheckerDateLabel/CheckerDateLabel.mdx

@@ -0,0 +1,34 @@
+import { Meta, Title, Primary, Stories, Controls, Story } from "@storybook/blocks";
+import * as CheckerDateLabelStories from "./CheckerDateLabel.stories";
+import { CheckerDateLabel } from "./CheckerDateLabel";
+
+# CheckerDateLabel
+
+<Meta of={CheckerDateLabelStories} />
+
+The `CheckerDateLabel` component is designed to display a formatted date alongside a clock icon.
+
+## Props
+
+- **`date`**: A `Date` object representing the date to be displayed. The date is formatted using a default date format.
+- **`className`**: An optional string to apply additional CSS classes for styling.
+
+## Example
+
+### Default Usage
+
+<Story of={CheckerDateLabelStories.Default} />
+
+This example demonstrates the default usage of the `CheckerDateLabel` component, showing how it formats and displays a date.
+
+## Controls
+
+<Controls />
+
+Use the controls to dynamically adjust the `date` prop and observe how the component's output changes.
+
+## Other Variations
+
+<Stories />
+
+Explore other variations and use cases of the `CheckerDateLabel` component to see how it can be integrated into different scenarios.

src/features/checker/components/IconLabels/CheckerDateLabel/CheckerDateLabel.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CheckerDateLabel } from "./CheckerDateLabel";
+
+const meta = {
+  title: "Features/Checker/components/CheckerDateLabel",
+  component: CheckerDateLabel,
+  args: {
+    date: new Date(),
+  },
+  argTypes: {
+    date: {
+      control: "date",
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof CheckerDateLabel>;
+
+export const Default: Story = {};

src/features/checker/components/IconLabels/CheckerDateLabel/CheckerDateLabel.tsx

@@ -0,0 +1,27 @@
+import { Icon, IconType } from "@/primitives/Icon";
+import { cn } from "@/lib/utils";
+import { formatDate, DateFormat } from "@/lib/dates/formatDate";
+
+export type CheckerDateLabelProps = React.HTMLAttributes<HTMLDivElement> & {
+  date: Date;
+};
+
+export const CheckerDateLabelComponents: React.FC<CheckerDateLabelProps> = ({
+  className,
+  date,
+}) => {
+  const formattedDate = formatDate(date, DateFormat["Default"]);
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <Icon type={IconType.CLOCK} className={"size-5"} />
+      <span className="text-[16px]/[24px]">{formattedDate}</span>
+    </div>
+  );
+};
+export const CheckerDateLabel: React.FC<CheckerDateLabelProps> = ({
+  date,
+  className,
+  ...props
+}) => {
+  return <CheckerDateLabelComponents className={className} date={date} {...props} />;
+};

src/features/checker/components/IconLabels/CheckerReviewsLabel/CheckerReviewsLabel.mdx

@@ -0,0 +1,40 @@
+import { Meta, Title, Primary, Stories, Controls, Story } from "@storybook/blocks";
+import * as CheckerReviewsLabelStories from "./CheckerReviewsLabel.stories";
+import { CheckerReviewsLabel } from "./CheckerReviewsLabel";
+
+# CheckerReviewsLabel
+
+<Meta of={CheckerReviewsLabelStories} />
+
+The `CheckerReviewsLabel` component is designed to visually represent the number of positive and negative reviews using icons. It provides a quick visual summary of reviews.
+
+## Props
+
+- **`posReviews`**: A number representing the count of positive reviews. If the value is negative, it will be treated as zero.
+- **`negReviews`**: A number representing the count of negative reviews. If the value is negative, it will be treated as zero.
+- **`className`**: An optional string to apply additional CSS classes for styling.
+
+## Icon Representation
+
+- **Positive Reviews**: Represented by check icons with a green fill.
+- **Negative Reviews**: Represented by cross icons with an orange fill.
+
+## Example
+
+### Default Usage
+
+<Story of={CheckerReviewsLabelStories.Default} />
+
+This example demonstrates the default usage of the `CheckerReviewsLabel` component, showing how it displays the total number of reviews and the breakdown of positive and negative reviews.
+
+## Controls
+
+<Controls />
+
+Use the controls to dynamically adjust the `posReviews` and `negReviews` props and observe how the component's output changes.
+
+## Other Variations
+
+<Stories />
+
+Explore other variations and use cases of the `CheckerReviewsLabel` component to see how it can be integrated into different scenarios.

src/features/checker/components/IconLabels/CheckerReviewsLabel/CheckerReviewsLabel.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CheckerReviewsLabel } from "./CheckerReviewsLabel";
+
+const meta = {
+  title: "Features/Checker/components/CheckerReviewsLabel",
+  component: CheckerReviewsLabel,
+  args: {
+    posReviews: 2,
+    negReviews: 2,
+  },
+  argTypes: {
+    posReviews: {
+      control: "number",
+    },
+    negReviews: {
+      control: "number",
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof CheckerReviewsLabel>;
+
+export const Default: Story = {};

src/features/checker/components/IconLabels/CheckerReviewsLabel/CheckerReviewsLabel.tsx

@@ -0,0 +1,68 @@
+import { Icon, IconType } from "@/primitives/Icon";
+import { cn } from "@/lib/utils";
+
+export type CheckerReviewsLabelProps = React.SVGProps<SVGSVGElement> & {
+  posReviews: number;
+  negReviews: number;
+};
+
+const ICON_CLASSES = {
+  base: "size-7 bg-white",
+  positive: " fill-green-600",
+  negative: "fill-orange-200",
+  border: "border border-gray-100 rounded-full",
+};
+
+const renderIcons = (countPos: number, countNeg: number, props: React.SVGProps<SVGSVGElement>) => {
+  const negProps = { ...props, type: IconType.X };
+  const posProps = { ...props, type: IconType.CHECK };
+  const totalReviews = countPos + countNeg;
+
+  return Array.from({ length: totalReviews }).map((_, index) => (
+    <Icon
+      key={index}
+      {...(index < countPos ? posProps : negProps)}
+      className={cn(
+        ICON_CLASSES.base,
+        ICON_CLASSES.border,
+        index >= countPos ? ICON_CLASSES.negative : ICON_CLASSES.positive,
+        index !== 0 ? "-ml-2" : "",
+      )}
+    />
+  ));
+};
+
+export const CheckerReviewsLabelComponents: React.FC<CheckerReviewsLabelProps> = ({
+  className,
+  posReviews,
+  negReviews,
+  ...props
+}) => {
+  if (posReviews < 0) {
+    posReviews = 0;
+  }
+  if (negReviews < 0) {
+    negReviews = 0;
+  }
+  const totalReviews = posReviews + negReviews;
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <div className="flex items-center">{renderIcons(posReviews, negReviews, { ...props })}</div>
+      <span className="text-[16px]/[24px]">{`${totalReviews} Reviews`}</span>
+    </div>
+  );
+};
+
+export const CheckerReviewsLabel: React.FC<CheckerReviewsLabelProps> = ({
+  posReviews,
+  negReviews,
+  className,
+  ...props
+}) => (
+  <CheckerReviewsLabelComponents
+    className={className}
+    posReviews={posReviews}
+    negReviews={negReviews}
+    {...props}
+  />
+);

src/features/checker/pages/OverviewPage/components/OverviewPageTitle/OverviewPageTitle.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { OverviewPageTitle } from "@/features/checker/pages/OverviewPage/components";
 
 const meta = {
-  title: "Features/Checker/Components",
+  title: "Features/Checker/Components/OverviewPageTitle",
   component: OverviewPageTitle,
 } satisfies Meta;
 

src/lib/dates/formatDate.ts

@@ -0,0 +1,21 @@
+export enum DateFormat {
+  Default = "default",
+}
+
+export const formatDate = (date: Date, format: DateFormat): string => {
+  switch (format) {
+    case DateFormat.Default:
+      const options = {
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+      } as Intl.DateTimeFormatOptions;
+      const formattedDate = date.toLocaleString("en-GB", options);
+      return formattedDate.replace(/ at /, " ").trim();
+    default:
+      return date.toISOString(); // Default format
+  }
+};

src/tokens/colors.ts

@@ -3,9 +3,16 @@ import { Colors } from "./types";
 export const colors: Colors = {
   grey: {
     "50": "#f7f7f7",
+    "100": "#EBEBEB",
     "400": "#555555",
     "500": "#000000",
   },
   white: "#ffffff",
   black: "#000000",
+  orange: {
+    "200": "#F68561",
+  },
+  green: {
+    "600": "#558A17",
+  },
 };