pixel-react 1.10.15 → 1.10.16

package/src/components/Charts/PieChart/PieChart.tsx

@@ -1,192 +0,0 @@
-import React, { useState } from 'react';
-import './PieChart.scss';
-import { PieChartProps, ArcParams, ArcResult, ArcAnglesResult } from './types';
-import Typography from '../../Typography';
-
-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} L ${x} ${y} Z`;
-};
-
-const calculateArcAngles = (
-  value: number,
-  total: number,
-  currentAngle: number,
-  radius: number
-): ArcAnglesResult => {
-  if (total === 0) {
-    return {
-      endAngle: currentAngle,
-      backgroundArcPath: '',
-      foregroundArcPath: '',
-      percentage: 0,
-    };
-  }
-
-  const percentage = value / total;
-  const angleIncrement = percentage * 2 * Math.PI;
-  const startAngle = currentAngle;
-  const endAngle = startAngle + angleIncrement;
-
-  const path = calculateArc({
-    x: 0,
-    y: 0,
-    radius,
-    startAngle,
-    endAngle,
-  });
-
-  return {
-    endAngle,
-    backgroundArcPath: path,
-    foregroundArcPath: path,
-    percentage,
-  };
-};
-
-type Tooltip = {
-  label: string;
-  value: number;
-  color: string;
-};
-
-const PieChart: React.FC<PieChartProps> = ({
-  radius = 15,
-  colors = [],
-  data = [],
-  chartBorder = false,
-}) => {
-  const [tooltip, setTooltip] = useState<Tooltip | null>(null);
-  const [tooltipPosition, setTooltipPosition] = useState<{
-    x: number;
-    y: number;
-  }>({ x: 0, y: 0 });
-
-  const total = data.reduce((acc, item) => acc + item.value, 0);
-  let currentAngle = -Math.PI / 2;
-  const svgSize = 2 * (radius + 5);
-
-  const chartData =
-    chartBorder && data.length > 0
-      ? [
-          {
-            label: data[0]?.label || '',
-            value: data.slice(1).reduce((acc, item) => acc + item.value, 0),
-          },
-          ...data.slice(1),
-        ]
-      : data;
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    const { clientX: x, clientY: y } = e;
-    setTooltipPosition({ x, y });
-  };
-
-  const handleMouseEnter = (
-    item: { label: string; value: number },
-    color: string
-  ) => {
-    setTooltip({ label: item.label, value: item.value, color });
-  };
-
-  const handleMouseLeave = () => {
-    setTooltip(null);
-  };
-  const legendItems = chartData.map((item, index) => (
-    <div key={item.label} className="ff-pie-chart-legend-item">
-      <Typography
-        as="div"
-        fontSize={24}
-        fontWeight="semi-bold"
-        lineHeight="36px"
-        color={colors[index % colors.length] || ''}
-      >
-        {item.value}
-      </Typography>
-      <Typography
-        as="div"
-        fontSize={10}
-        fontWeight="regular"
-        lineHeight="18px"
-        className="ff-pie-chart-legend-value"
-      >
-        {item.label}
-      </Typography>
-    </div>
-  ));
-
-  return (
-    <div className="ff-pie-chart-container" onMouseMove={handleMouseMove}>
-      <div
-        className={` ${chartBorder ? 'ff-pie-chart-border' : ''}`}
-        style={{ width: svgSize, height: svgSize }}
-      >
-        <svg
-          width={svgSize}
-          height={svgSize}
-          viewBox={`0 0 ${svgSize} ${svgSize}`}
-        >
-          <g transform={`translate(${radius + 5}, ${radius + 5})`}>
-            {chartData.map((item, index) => {
-              const { endAngle, backgroundArcPath } = calculateArcAngles(
-                item.value,
-                total,
-                currentAngle,
-                radius
-              );
-              currentAngle = endAngle;
-              const color = colors[index % colors.length] || '';
-
-              return (
-                <g key={item.label}>
-                  <path
-                    d={backgroundArcPath}
-                    fill={color}
-                    stroke="white"
-                    strokeWidth={0.5}
-                    onMouseEnter={() => handleMouseEnter(item, color)}
-                    onMouseLeave={handleMouseLeave}
-                  />
-                  <text
-                    x={(radius / 2) * Math.cos((currentAngle + endAngle) / 2)}
-                    y={(radius / 2) * Math.sin((currentAngle + endAngle) / 2)}
-                    fill="white"
-                    textAnchor="middle"
-                    dominantBaseline="central"
-                  ></text>
-                </g>
-              );
-            })}
-          </g>
-        </svg>
-      </div>
-
-      {tooltip && (
-        <div
-          className="ff-pie-chart-tooltip"
-          style={{
-            top: tooltipPosition.y,
-            left: tooltipPosition.x,
-          }}
-        >
-          {tooltip.label} : {tooltip.value}
-        </div>
-      )}
-
-      <div className="ff-pie-chart-legend">{legendItems}</div>
-    </div>
-  );
-};
-
-export default PieChart;

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

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

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

@@ -1,28 +0,0 @@
-export type Status = {
-  status: 'Passed';
-  value: number;
-};
-
-export interface PieChartProps {
-  radius: number;
-  data: Array<{ label: string; value: number }>; 
-  colors: string[]; 
-  chartBorder: boolean;
-}
-
-export type ArcParams = {
-  x: number;
-  y: number;
-  radius: number;
-  startAngle: number;
-  endAngle: number;
-};
-
-export type ArcResult = string;
-
-export type ArcAnglesResult = {
-  endAngle: number;
-  backgroundArcPath: string;
-  foregroundArcPath: string;
-  percentage: number;
-};

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

@@ -1,36 +0,0 @@
-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

@@ -1,180 +0,0 @@
-import React, { useMemo } from 'react';
-import './RadialChart.scss';
-import {
-  RadialChartProps,
-  ArcParams,
-  ArcResult,
-  ArcAnglesResult,
-} from './types';
-import Tooltip from '../../Tooltip';
-
-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 (
-          <Tooltip
-            title={`${status.status}: ${Math.round(percentage * 100)}%`}
-            zIndex={1000}
-          >
-            <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>
-          </Tooltip>
-        );
-      })}
-    </div>
-  );
-};
-
-export default RadialChart;

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

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

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

@@ -1,32 +0,0 @@
-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.stories.tsx

@@ -1,108 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import Checkbox from './Checkbox';
-import { useState } from 'react';
-import React 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 = {
-  render: () => {
-    const [checked, setChecked] = useState(true);
-
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setChecked(event.target.checked);
-    };
-
-    return (
-      <Checkbox
-        label="Default Checkbox"
-        id="default-checkbox"
-        name="default"
-        checked={checked}
-        onChange={handleChange}
-      />
-    );
-  },
-};
-
-export const Partial: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(true);
-
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setChecked(event.target.checked);
-    };
-
-    return (
-      <>
-        <Checkbox
-          label="Partial Checkbox"
-          id="partial-checkbox"
-          name="partial"
-          partial={true}
-          checked={checked}
-          onChange={handleChange}
-        />
-      </>
-    );
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setChecked(event.target.checked);
-    };
-
-    return (
-      <Checkbox
-        label={checked ? 'Checked! Click to uncheck.' : 'Click here to check.'}
-        id="controlled-checkbox"
-        name="controlled"
-        checked={checked}
-        onChange={handleChange}
-      />
-    );
-  },
-};
-
-export const Varient: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setChecked(event.target.checked);
-    };
-
-    return (
-      <>
-        {['passed', 'failed', 'warning', 'skipped', 'flaky'].map((varient) => (
-          <Checkbox
-            key={varient}
-            label={
-              checked ? 'Checked! Click to uncheck.' : 'Click here to check.'
-            }
-            id="controlled-checkbox"
-            name="controlled"
-            checked={checked}
-            onChange={handleChange}
-            variant={varient as any}
-          />
-        ))}
-      </>
-    );
-  },
-};

package/src/components/Checkbox/Checkbox.tsx

@@ -1,57 +0,0 @@
-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,
-  variant,
-}) => {
-  const [checked, setChecked] = useState(initialChecked);
-
-  useEffect(() => {
-    setChecked(initialChecked);
-  }, [initialChecked]);
-
-  return (
-    <label className="ff-checkbox--overlay" htmlFor={id}>
-      <input
-        type="checkbox"
-        className="ff-checkbox-input"
-        id={id}
-        name={name}
-        checked={checked}
-        onChange={onChange}
-        disabled={disabled}
-      />
-      <span
-        className={classNames('ff-checkbox-custom', {
-          'ff-checkbox-checked': checked,
-          'ff-storybook-checkbox--partial': partial && !checked,
-          [`ff-checkbox--${variant}`]: variant,
-          [`ff-checkbox-checked--${variant}`]: checked && variant,
-        })}
-      >
-        {checked && (
-          <Icon
-            name="tick"
-            color="var(--primary-icon-color)"
-            className="ff-tick-icon"
-          />
-        )}
-      </span>
-      <Typography as="span">{label}</Typography>
-    </label>
-  );
-};
-
-export default Checkbox;

package/src/components/Checkbox/index.ts

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

package/src/components/Checkbox/types.ts

@@ -1,34 +0,0 @@
-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;
-  /**
-   * For variant color
-   */
-  variant?: 'passed' | 'failed' | 'warning' | 'skipped' | 'flaky';
-}