pixel-react 1.0.0

package/src/components/Charts/DonutChart/DonutChart.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import DonutChart from './DonutChart';
+
+const meta: Meta<typeof DonutChart> = {
+  title: 'Components/DonutChart',
+  component: DonutChart,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof DonutChart>;
+
+export const Default: Story = {
+  args: {
+    radius: 70,
+    lineWidth: 15,
+    legendDetailsType: 'Scripts',
+    isLegendDetails: true,
+    statusValues: [
+      { status: 'Passed', value: 60 },
+      { status: 'failed', value: 20 },
+      { status: 'Warning', value: 10 },
+      { status: 'skipped', value: 10 },
+    ],
+    gapAngle: 0.06,
+  },
+};

package/src/components/Charts/DonutChart/DonutChart.tsx

@@ -0,0 +1,241 @@
+import React, { useState } from 'react';
+import './DonutChart.scss';
+import { Status, DonutChartProps, StatusValue } from './type';
+
+const calculateArc = (
+  x: number,
+  y: number,
+  radius: number,
+  startAngle: number,
+  endAngle: number
+): string => {
+  const startX = x + radius * Math.cos(startAngle);
+  const startY = y + radius * Math.sin(startAngle);
+  const endX = x + radius * Math.cos(endAngle);
+  const endY = y + radius * Math.sin(endAngle);
+  const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
+
+  return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
+};
+
+const useColorMappings = () => ({
+  colorMapping: {
+    passed: 'var(--status-success-text-color)',
+    failed: 'var(--status-rejected-text-color)',
+    warning: 'var(--status-warning-text-color)',
+    skipped: 'var(--status-skipped-text-color)',
+    default: 'var(--brand-color)',
+  },
+  hoverMapping: {
+    passed: 'var(--status-success-bg-color)',
+    failed: 'var(--status-rejected-bg-color)',
+    warning: 'var(--status-warning-bg-color)',
+    skipped: 'var(--status-skipped-bg-color)',
+    default: 'var(--status-percentage-growth-bg-color)',
+  },
+});
+
+const DonutChart: React.FC<DonutChartProps> = ({
+  radius = 60,
+  lineWidth = 15,
+  statusValues = [],
+  gapAngle = 0.06,
+  legendDetailsType = '',
+  isLegendDetails = true,
+}) => {
+  const [hoveredStatus, setHoveredStatus] = useState<Status | null>(null);
+  const { colorMapping, hoverMapping } = useColorMappings();
+  const total = statusValues?.reduce((acc, { value }) => acc + value, 0);
+  const nonZeroValues = statusValues?.filter(({ value }) => value > 0);
+  const statusColors = ['passed', 'failed', 'warning', 'skipped'];
+  // Calculate angles and gaps
+  const TOTAL_GAP_ANGLE = gapAngle * nonZeroValues.length;
+  let remainingAngle = 2 * Math.PI - TOTAL_GAP_ANGLE;
+  let currentAngle = Math.PI / 2;
+
+  const MIN_PERCENTAGE = 1;
+  const MIN_ANGLE = (MIN_PERCENTAGE / 100) * (2 * Math.PI);
+  let minAngleTotal = 0;
+
+  // Adjust for small angles
+  nonZeroValues.forEach(({ value }) => {
+    const valuePercentage = value / total;
+    const angle = Math.max(valuePercentage * (2 * Math.PI), MIN_ANGLE);
+    minAngleTotal += angle;
+    remainingAngle -= angle;
+  });
+
+  const handleMouseEnter = (status: Status) => setHoveredStatus(status);
+  const handleMouseLeave = () => setHoveredStatus(null);
+
+  const SVG_PADDING = 4;
+  const DONUT_SVG_SIZE = (radius + lineWidth) * 2 + SVG_PADDING * 2;
+
+  const renderArc = (statusValue: StatusValue, endAngle: number, i: number) => {
+    const normalizedStatus = statusValue?.status?.toLowerCase() as Status;
+    const isFullCircle = nonZeroValues.length === 1;
+
+    // Full circle handling
+    const foregroundArcPath = isFullCircle
+      ? calculateArc(0, 0, radius, 0, 2 * Math.PI)
+      : calculateArc(0, 0, radius, currentAngle, endAngle);
+
+    // Outer arc for hover effect
+    const outerArcRadius = radius + lineWidth - 1;
+    const outerArcPath = isFullCircle
+      ? calculateArc(0, 0, outerArcRadius, 0, 2 * Math.PI)
+      : calculateArc(0, 0, outerArcRadius, currentAngle, endAngle);
+
+    currentAngle = endAngle + gapAngle;
+
+    return (
+      <g key={i}>
+        {/* Main arc */}
+        <path
+          d={foregroundArcPath}
+          fill="none"
+          stroke={colorMapping[normalizedStatus as keyof typeof colorMapping]}
+          strokeWidth={lineWidth}
+          onMouseEnter={() => handleMouseEnter(normalizedStatus)}
+          onMouseLeave={handleMouseLeave}
+          strokeOpacity={0.8}
+        />
+        {/* Hover effect */}
+        {hoveredStatus === normalizedStatus && (
+          <path
+            d={outerArcPath}
+            fill="none"
+            stroke={colorMapping[normalizedStatus as keyof typeof colorMapping]}
+            strokeWidth={4}
+            strokeOpacity={0.3}
+          />
+        )}
+      </g>
+    );
+  };
+
+  const renderLegendItem = (statusKey: Status) => {
+    const statusData = statusValues?.find(
+      (s) => s.status?.toLowerCase() === statusKey?.toLowerCase()
+    );
+    const value = Math.round(statusData?.value || 0);
+    const percentage = ((statusData?.value || 0) / total) * 100;
+
+    return (
+      <div
+        key={statusKey}
+        className={`ff-status-item ${
+          hoveredStatus === null || hoveredStatus === statusKey
+            ? 'ff-highlighted'
+            : 'ff-fade'
+        }`}
+      >
+        <div className="ff-status-label">
+          <div
+            className="ff-status-color"
+            style={{
+              backgroundColor:
+                colorMapping[statusKey as keyof typeof colorMapping],
+            }}
+          />
+          <div className="ff-status-text">
+            {statusKey?.charAt(0)?.toUpperCase() +
+              statusKey?.slice(1)?.toLowerCase()}
+          </div>
+        </div>
+        <div className="ff-status-details">
+          <div className="ff-status-details-script-count">
+            {value}
+            <span>{legendDetailsType}</span>
+          </div>
+          <div className="ff-status-details-script-percentage">
+            ({percentage?.toFixed(2)}%)
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="ff-donut-chart-section">
+      <div className="ff-donut-chart-svg-container">
+        <svg
+          width={DONUT_SVG_SIZE}
+          height={DONUT_SVG_SIZE}
+          viewBox={`0 0 ${DONUT_SVG_SIZE} ${DONUT_SVG_SIZE}`}
+        >
+          <g
+            transform={`translate(${radius + lineWidth + SVG_PADDING}, ${
+              radius + lineWidth + SVG_PADDING
+            })`}
+          >
+            {nonZeroValues?.map((status, i) => {
+              const valuePercentage = status.value / total;
+              let angle = Math.max(valuePercentage * (2 * Math.PI), MIN_ANGLE);
+              angle += remainingAngle * (valuePercentage / (total / total));
+              const endAngle = currentAngle + angle;
+
+              return renderArc(status, endAngle, i);
+            })}
+            <text x="0" y="-18" textAnchor="middle" fill={colorMapping.default}>
+              {hoveredStatus ? hoveredStatus?.toUpperCase() : 'TOTAL'}
+            </text>
+            <text x="0" y="5" textAnchor="middle" fill={colorMapping.skipped}>
+              {hoveredStatus
+                ? `${
+                    statusValues?.find(
+                      (s) => s?.status?.toLowerCase() === hoveredStatus
+                    )?.value
+                  } ${legendDetailsType}`
+                : `${total} ${legendDetailsType}`}
+            </text>
+            <rect
+              x={-17}
+              y={14}
+              width={34}
+              height={18}
+              fill={
+                hoveredStatus
+                  ? hoverMapping[
+                      hoveredStatus?.toLowerCase() as keyof typeof hoverMapping
+                    ]
+                  : hoverMapping.default
+              }
+              rx="5"
+              ry="5"
+            />
+            <text
+              x="0"
+              y="26"
+              textAnchor="middle"
+              fill={
+                hoveredStatus
+                  ? colorMapping[
+                      hoveredStatus?.toLowerCase() as keyof typeof colorMapping
+                    ]
+                  : colorMapping['default' as keyof typeof colorMapping]
+              }
+            >
+              {hoveredStatus
+                ? `${(
+                    ((statusValues?.find(
+                      (s) => s?.status?.toLowerCase() === hoveredStatus
+                    )?.value || 0) /
+                      total) *
+                    100
+                  )?.toFixed(2)}%`
+                : '100%'}
+            </text>
+          </g>
+        </svg>
+      </div>
+      {isLegendDetails && (
+        <div className="ff-status-container">
+          {statusColors?.map((status) => renderLegendItem(status as Status))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DonutChart;

package/src/components/Charts/DonutChart/index.ts

@@ -0,0 +1 @@
+export { default } from './DonutChart';

package/src/components/Charts/DonutChart/type.ts

@@ -0,0 +1,23 @@
+export type Status =
+  | 'passed'
+  | 'failed'
+  | 'warning'
+  | 'skipped'
+  | 'Passed'
+  | 'Failed'
+  | 'Skipped'
+  | 'Warning';
+
+export type StatusValue = {
+  status: Status;
+  value: number;
+};
+
+export type DonutChartProps = {
+  radius: number;
+  lineWidth: number;
+  statusValues: StatusValue[];
+  legendDetailsType: string;
+  isLegendDetails: boolean;
+  gapAngle?: number;
+};

package/src/components/Charts/RadialChart/RadialChart.scss

@@ -0,0 +1,12 @@
+@import '../../../assets/styles/fonts';
+
+.ff-radial-chart-container {
+  cursor: pointer;
+  svg {
+    text {
+      @extend .font-size-8;
+      font-size: var(--fontSize) !important;
+      font-weight: 400;
+    }
+  }
+}

package/src/components/Charts/RadialChart/RadialChart.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+import RadialChart from './RadialChart';
+
+const meta: Meta<typeof RadialChart> = {
+  title: 'Components/RadialChart',
+  component: RadialChart,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    radius: { control: 'number' },
+    lineWidth: { control: 'number' },
+    statusValues: { control: 'object' },
+    onClick: { action: 'clicked' },
+    fontSize: { control: 'number' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RadialChart>;
+
+export const ChartWithStatus: Story = {
+  args: {
+    radius: 15,
+    lineWidth: 5,
+    statusValues: [
+      { status: 'Passed', value: 40 },
+      { status: 'Failed', value: 20 },
+      { status: 'Warning', value: 20 },
+      { status: 'Skipped', value: 20 },
+    ],
+    onClick: () => {},
+    fontSize: 8,
+  },
+};

package/src/components/Charts/RadialChart/RadialChart.tsx

@@ -0,0 +1,174 @@
+import React, { useMemo } from 'react';
+import './RadialChart.scss';
+import {
+  RadialChartProps,
+  ArcParams,
+  ArcResult,
+  ArcAnglesResult,
+} from './types';
+
+const useColorMappings = () =>
+  useMemo(() => {
+    return {
+      colorMapping: {
+        passed: 'var(--status-success-text-color)',
+        failed: 'var(--status-rejected-text-color)',
+        warning: 'var(--status-warning-text-color)',
+        skipped: 'var(--status-skipped-text-color)',
+      },
+      backgroundColorMapping: {
+        passed: 'var(--status-success-bg-color)',
+        failed: 'var(--status-rejected-bg-color)',
+        warning: 'var(--status-warning-bg-color)',
+        skipped: 'var(--status-skipped-bg-color)',
+      },
+    };
+  }, []);
+
+// Function to generate SVG arc paths
+const calculateArc = ({
+  x,
+  y,
+  radius,
+  startAngle,
+  endAngle,
+}: ArcParams): ArcResult => {
+  const startX = x + radius * Math.cos(startAngle);
+  const startY = y + radius * Math.sin(startAngle);
+  const endX = x + radius * Math.cos(endAngle);
+  const endY = y + radius * Math.sin(endAngle);
+  const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
+
+  return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
+};
+
+// Function to calculate arc paths and angles
+const calculateArcAngles = (
+  statusValue: number,
+  total: number,
+  currentAngle: number,
+  radius: number
+): ArcAnglesResult => {
+  if (total === 0) {
+    const backgroundArcPath = calculateArc({
+      x: 0,
+      y: 0,
+      radius,
+      startAngle: 0,
+      endAngle: 2 * Math.PI,
+    });
+    return {
+      endAngle: currentAngle,
+      backgroundArcPath,
+      foregroundArcPath: '',
+      percentage: 0,
+    };
+  }
+
+  const percentage = statusValue / total;
+  const angleIncrement = percentage * 2 * Math.PI;
+  let startAngle = currentAngle;
+  let endAngle = startAngle + angleIncrement;
+
+  // Scenario when statusValue is equal to total
+  if (statusValue === total) {
+    startAngle = 0;
+    endAngle = 2 * Math.PI;
+  }
+
+  const backgroundArcPath = calculateArc({
+    x: 0,
+    y: 0,
+    radius,
+    startAngle: 0,
+    endAngle: 2 * Math.PI,
+  });
+  const foregroundArcPath = calculateArc({
+    x: 0,
+    y: 0,
+    radius,
+    startAngle,
+    endAngle,
+  });
+
+  return { endAngle, backgroundArcPath, foregroundArcPath, percentage };
+};
+
+// RadialChart component
+const RadialChart: React.FC<RadialChartProps> = ({
+  radius = 15,
+  lineWidth = 5,
+  statusValues = [],
+  onClick = () => {},
+  fontSize = 6,
+}) => {
+  const { colorMapping, backgroundColorMapping } = useColorMappings();
+  const total = statusValues.reduce((acc, status) => acc + status.value, 0);
+  let currentAngle = -Math.PI / 2;
+  const svgSize = 2 * (radius + lineWidth);
+  return (
+    <div
+      className="ff-radial-chart-container"
+      style={{ '--fontSize': `${fontSize}px` } as React.CSSProperties}
+    >
+      {statusValues.map((status) => {
+        const normalizedStatus = status.status.toLowerCase();
+        const { endAngle, backgroundArcPath, foregroundArcPath, percentage } =
+          calculateArcAngles(status.value, total, currentAngle, radius);
+        currentAngle = endAngle;
+        return (
+          <svg
+            key={status.status}
+            width={svgSize}
+            height={svgSize}
+            viewBox={`0 0 ${svgSize} ${svgSize}`}
+            onClick={() => onClick(status)}
+            role="img"
+            aria-label={`${status.status}: ${Math.round(percentage * 100)}%`}
+          >
+            <g
+              transform={`translate(${radius + lineWidth}, ${
+                radius + lineWidth
+              })`}
+            >
+              {/* Background Circle */}
+              <path
+                d={backgroundArcPath}
+                fill="none"
+                stroke={
+                  backgroundColorMapping[
+                    normalizedStatus as keyof typeof colorMapping
+                  ]
+                }
+                strokeWidth={lineWidth}
+              />
+              {/* Status Arc */}
+              <path
+                d={foregroundArcPath}
+                fill="none"
+                stroke={
+                  colorMapping[normalizedStatus as keyof typeof colorMapping]
+                }
+                strokeWidth={lineWidth}
+              />
+              {/* Percentage Text */}
+              <text
+                x="0"
+                y="0"
+                fill={
+                  colorMapping[normalizedStatus as keyof typeof colorMapping]
+                }
+                textAnchor="middle"
+                dominantBaseline="central"
+              >
+                {`${Math.round(percentage * 100)}%`}
+              </text>
+            </g>
+          </svg>
+        );
+      })}
+    </div>
+  );
+};
+
+export default RadialChart;

package/src/components/Charts/RadialChart/index.ts

@@ -0,0 +1 @@
+export { default } from './RadialChart';

package/src/components/Charts/RadialChart/types.ts

@@ -0,0 +1,32 @@
+export type Status = {
+  status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'passed' | 'failed' | 'warning' | 'skipped';
+  value: number;
+};
+//main component type
+export interface RadialChartProps {
+  radius: number;
+  lineWidth: number;
+  statusValues: Status[];
+  onClick?: (status: Status) => void;
+  fontSize: number;
+}
+
+//type for the calculateArc function
+export type ArcParams = {
+  x: number;
+  y: number;
+  radius: number;
+  startAngle: number;
+  endAngle: number;
+};
+
+// type for the calculateArc function
+export type ArcResult = string;
+
+// type for the calculateArcAngles function
+export type ArcAnglesResult = {
+  endAngle: number;
+  backgroundArcPath: string;
+  foregroundArcPath: string;
+  percentage: number;
+};

package/src/components/Checkbox/Checkbox.scss

@@ -0,0 +1,89 @@
+@use '../../assets/styles/fonts';
+@use '../../assets/styles/mixins';
+
+.ff-checkbox--overlay {
+  @include mixins.center-content();
+  cursor: pointer;
+  position: relative;
+
+  .ff-checkbox-input {
+    display: none;
+  }
+
+  .ff-checkbox-custom {
+    @include mixins.box(16px, 1px solid var(--checkbox-border-color));
+    box-sizing: border-box;
+    border-radius: 2px;
+    margin-right: 8px;
+    background-color: var(--checkbox-bg-color);
+    position: relative;
+    @include mixins.center-content;
+    @include mixins.transition(border-color, background-color);
+
+    &::before {
+      content: '';
+      width: 9px;
+      height: 2px;
+      background-color: var(--checkbox-partial-color);
+      border-radius: 2px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(180deg);
+      opacity: 0;
+      @include mixins.transition(border-color, background-color);
+    }
+
+    &::after {
+      content: '';
+      @include mixins.box(16px, 4px solid var(--checkbox-hover-color));
+      border-radius: 4px;
+      position: absolute;
+      opacity: 0;
+      background-color: var(--checkbox-hover-color);
+      z-index: -1;
+      @include mixins.transition(border-color, background-color);
+    }
+    &:hover {
+      border-color: var(--brand-color);
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+
+  .ff-checkbox-input:checked + .ff-checkbox-custom {
+    background: var(--brand-color);
+    border-color: var(--brand-color);
+  }
+
+  .ff-checkbox-input:checked:hover + .ff-checkbox-custom {
+    background: var(--brand-color);
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  .ff-checkbox-input:disabled + .ff-checkbox-custom {
+    opacity: 0.5;
+    cursor: not-allowed;
+    border: 1px solid var(--checkbox-border-color);
+    &::after {
+      opacity: 0;
+    }
+  }
+  .ff-storybook-checkbox--partial {
+    background-color: var(--brand-color);
+    border: none;
+    &::before {
+      opacity: 1;
+    }
+
+    &:hover {
+      background-color: var(--brand-color);
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+}

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,47 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Checkbox from './Checkbox';
+import { useState } from 'react';
+
+const meta: Meta<typeof Checkbox> = {
+  component: Checkbox,
+  title: 'Components/Checkbox',
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Enter label',
+  },
+};
+
+export const Partial: Story = {
+  args: {
+    label: 'Enter label',
+    partial: true,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setChecked((event.target as HTMLInputElement).checked);
+    };
+
+    return (
+      <Checkbox
+        label="click here to proceed with controlled component"
+        disabled={false}
+        checked={checked}
+        onChange={handleChange}
+      />
+    );
+  },
+};