pixel-react-excel-sheet 1.2.0

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}
+      />
+    );
+  },
+};

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react';
+import './Checkbox.scss';
+import classNames from 'classnames';
+import Icon from '../Icon';
+import { CheckboxProps } from './types';
+import '../../assets/styles/_colors.scss';
+import Typography from '../Typography';
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  id,
+  name,
+  label,
+  disabled = false,
+  checked: initialChecked = false,
+  partial = false,
+  onChange,
+}) => {
+  const [checked, setChecked] = useState(initialChecked);
+
+  useEffect(() => {
+    setChecked(initialChecked);
+  }, [initialChecked]);
+
+  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!disabled) {
+      setChecked((prev) => !prev), onChange?.(event);
+    }
+  };
+
+  return (
+    <label className="ff-checkbox--overlay" htmlFor={id}>
+      <input
+        type="checkbox"
+        className="ff-checkbox-input"
+        id={id}
+        name={name}
+        checked={checked}
+        onChange={handleCheckboxChange}
+        disabled={disabled}
+      />
+      <span
+        className={classNames('ff-checkbox-custom', {
+          'ff-checkbox-checked': checked,
+          'ff-storybook-checkbox--partial': partial && !checked,
+        })}
+      >
+        {checked && (
+          <Icon
+            name="tick"
+            height={6}
+            width={8}
+            color="var(--primary-icon-color)"
+          />
+        )}
+      </span>
+      <Typography as="label">{label}</Typography>
+    </label>
+  );
+};
+
+export default Checkbox;

package/src/components/Checkbox/index.ts

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

package/src/components/Checkbox/types.ts

@@ -0,0 +1,30 @@
+export interface CheckboxProps {
+  /**
+   * Unique ID for the checkbox input
+   */
+  id?: string;
+  /**
+   * Name attribute for the checkbox input
+   */
+  name?: string;
+  /**
+   * Optional side label
+   */
+  label?: string;
+  /**
+   * Optional disable attribute
+   */
+  disabled?: boolean;
+  /**
+   * Optional checked attribute to prefill
+   */
+  checked?: boolean;
+  /**
+   * Optional onChange function
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * For partially checked checkbox
+   */
+  partial?: boolean;
+}

package/src/components/Chip/Chip.scss

@@ -0,0 +1,71 @@
+@use '../../assets/styles/fonts' as *;
+
+@mixin chip-variant-background($color) {
+  background-color: $color;
+  color: var(--ff-chip-bg);
+}
+
+.ff-chip-wrapper {
+  display: inline-flex;
+  margin: 5px;
+  justify-content: center;
+  align-items: center;
+
+  .ff-default-chip-style {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: fit-content;
+    gap: 5px;
+    height: 17px;
+    border-radius: 25px;
+    padding: 1px 6px;
+    line-height: 15px;
+    border: none;
+    transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;
+    box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset,
+      -1px -1px 2px 0px var(--ff-chip-bg) inset,
+      1px -1px 2px 0px var(--ff-chips-blur-color) inset,
+      1px 1px 2px 0px var(--ff-chip-bg);
+    &--fullText:hover {
+      box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset,
+        -1px -1px 2px 0px var(--ff-chip-bg) inset,
+        1px -1px 2px 0px var(--ff-chips-blur-color) inset,
+        1px 1px 2px 0px var(--ff-chip-bg);
+      padding-right: 12px;
+    }
+    @extend .fontXs;
+
+    &--primary {
+      @include chip-variant-background(var(--ff-chips-fill-color));
+      color: var(--ff-chip-text-color);
+    }
+
+    &--success {
+      @include chip-variant-background(var(--ff-success));
+    }
+
+    &--error {
+      @include chip-variant-background(var(--ff-error-light));
+    }
+
+    &--warning {
+      @include chip-variant-background(var(--ff-warning));
+    }
+    &--custom {
+      @extend .fontSm;
+      background: #610b861a; //TODO: add color code name
+      color: #610b86; //TODO: add color code name
+      padding: 2px 8px;
+      border-radius: 12px;
+      cursor: pointer;
+      white-space: nowrap;
+      box-shadow: none;
+      transition: background-color 0.3s ease, color 0.3s ease;
+      &:hover {
+        background-color: #610b86; //TODO: add color code name
+        color: #fdfaff; //TODO: add color code name
+      }
+    }
+  }
+}

package/src/components/Chip/Chip.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Chip from './Chip';
+import '../../assets/styles/_colors.scss';
+import './Chip.scss';
+import Typography from '../Typography';
+const meta: Meta<typeof Chip> = {
+  title: 'Components/Chip',
+  component: Chip,
+  parameters: {
+    layout: 'left',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Chip>;
+
+const defaultArgs = {
+  label: 'SM 0',
+};
+
+export const Primary: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'primary',
+    fullText: 'Sub Modules 0',
+  },
+};
+
+export const withoutExpand: Story = {
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export const Group: Story = {
+  render: () => {
+    const items = ['Item 1', 'Item 2', 'Item 3'];
+
+    return (
+      <Typography as="div">
+        {items.map((item) => (
+          <Chip
+            key={item}
+            label={item}
+            variant="primary"
+            fullText="hover item"
+          />
+        ))}
+      </Typography>
+    );
+  },
+};
+export const CustomChip: Story = {
+  render: () => {
+    const items = ['Item 1', 'Item 2', 'Item 3'];
+
+    return (
+      <Typography as="div">
+        {items.map((item) => (
+          <Chip key={item} label={item} variant="custom" />
+        ))}
+      </Typography>
+    );
+  },
+};
+
+export const Success: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'success',
+    fullText: 'Sub Modules 0',
+  },
+};
+export const Errors: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'error',
+    fullText: 'Sub Modules 0',
+  },
+};
+export const Warning: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'warning',
+    fullText: 'Sub Modules 0',
+  },
+};
+export default meta;

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import './Chip.scss';
+import classNames from 'classnames';
+import { ChipsProps } from './types';
+import Typography from '../Typography';
+
+const Chip = ({
+  label = '',
+  fullText = '',
+  variant = 'primary',
+  onClick = () => {},
+}: ChipsProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const labelText = isHovered && fullText ? fullText : label;
+  const handleOnMouseEnter = () => setIsHovered(true);
+  const handleOnMouseLeave = () => setIsHovered(false);
+
+  return (
+    <div className="ff-chip-wrapper">
+      <button
+        onMouseEnter={handleOnMouseEnter}
+        onMouseLeave={handleOnMouseLeave}
+        onClick={onClick}
+        className={classNames(
+          `ff-default-chip-style ff-default-chip-style--${variant}`,
+          { ['ff-default-chip-style--fullText']: !!fullText }
+        )}
+      >
+        {labelText && <Typography as="p">{labelText}</Typography>}
+      </button>
+    </div>
+  );
+};
+
+export default Chip;

package/src/components/Chip/index.ts

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

package/src/components/Chip/types.ts

@@ -0,0 +1,19 @@
+export interface ChipsProps {
+  /**
+   * The text to be displayed on the Chip.
+   */
+  label: string;
+  /**
+   * The text to be displayed on hover.
+   */
+  fullText?: string;
+  /**
+   * The variant of the Chip.
+   */
+  variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom';
+
+  /**
+   * The callback function to be executed when the Chip is clicked.
+   */
+  onClick?: () => void;
+}