pixel-react-excel-sheet 1.2.0

package/src/components/Button/Button.scss

@@ -0,0 +1,152 @@
+@use '../../assets/styles/colors' as *;
+@use '../../assets/styles/fonts';
+
+.ff-button {
+  width: auto;
+  background-color: $primary-button-text-color;
+  border-radius: 4px;
+  padding: 4px 8px;
+  text-align: center;
+  text-decoration: none;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+  align-items: center;
+  @extend .fontXs;
+  border: 2px solid transparent;
+  &--transparent {
+    background-color: transparent;
+  }
+
+  &--primary,
+  &--delete,
+  &--secondary {
+    position: relative;
+    cursor: pointer;
+    border-radius: 4px;
+    z-index: 1;
+    border: none;
+    overflow: hidden;
+
+    &:before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 4px;
+      padding: 0.6px;
+
+      background: $primary-button-border;
+      mask: linear-gradient($primary-button-text-color 0 0) content-box,
+        linear-gradient($primary-button-text-color 0 0);
+      mask-composite: exclude;
+      -webkit-mask: linear-gradient($primary-button-text-color 0 0) content-box,
+        linear-gradient($primary-button-text-color 0 0);
+      -webkit-mask-composite: destination-out;
+      z-index: -1;
+    }
+
+    &:hover {
+      background: $primary-button-hover;
+    }
+
+    &:disabled {
+      opacity: 50%;
+      cursor: no-drop;
+
+      &:before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: 4px;
+        padding: 0.6px;
+        -webkit-mask-composite: destination-out;
+        mask-composite: exclude;
+        z-index: -1;
+      }
+    }
+  }
+
+  &--primary {
+    background: $primary-button-color;
+
+    &:before {
+      background: $primary-button-border;
+    }
+
+    &:hover {
+      background: $primary-button-hover;
+    }
+  }
+
+  &--delete {
+    background: $delete-button-color;
+    color: $primary-button-text-color;
+
+    &:before {
+      background: $delete-button-border;
+    }
+
+    &:hover {
+      background: $delete-button-hover;
+    }
+  }
+  &--warning {
+    background: var(--warning-button-color);
+    border: var(--warning-button-border);
+  }
+
+  &--secondary {
+    &:before {
+      background: $primary-button-border;
+    }
+
+    &:hover {
+      background: $secondary-button-hover;
+    }
+  }
+
+  &--tertiary {
+    border: none;
+    background: $tertiary-button-color;
+
+    &:hover {
+      background: $tertiary-button-hover;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: no-drop;
+    }
+  }
+
+  &--small {
+    @extend .fontXs;
+    font-weight: 500;
+    padding: 4.5px 8px;
+  }
+
+  &--medium {
+    @extend .fontXs;
+    font-weight: 500;
+    padding: 6px 12px;
+  }
+
+  &--large {
+    @extend .fontMd;
+    padding: 8px 16px;
+  }
+
+  &-primary--text {
+    color: $primary-button-text-color;
+  }
+
+  &-secondary--text,
+  &-tertiary--text {
+    background: $secondary-button-color-text;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+}

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Button>;
+
+const defaultArgs = {
+  disabled: false,
+};
+
+export const Primary: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Primary Button',
+    variant: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Secondary Button',
+    variant: 'secondary',
+  },
+};
+export const Tertiary: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Tertiary Button',
+    variant: 'tertiary',
+  },
+};
+export const Delete: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Delete',
+    variant: 'delete',
+  },
+};
+export const Warning: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Warning',
+    variant: 'warning',
+  },
+};
+export const PrimaryWithIcon: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Primary Button',
+    variant: 'primary',
+    iconName: 'manage_apps',
+  },
+};
+
+export const SecondaryWithIcon: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Secondary Button',
+    variant: 'secondary',
+    iconName: 'manage_apps',
+  },
+};
+export const TertiaryWithIcon: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Tertiary Button',
+    variant: 'tertiary',
+    iconName: 'manage_apps',
+  },
+};
+
+export default meta;

package/src/components/Button/Button.tsx

@@ -0,0 +1,66 @@
+import { forwardRef } from 'react';
+import './Button.scss';
+import '../../assets/styles/_colors.scss';
+import Icon from '../Icon';
+import { ButtonProps } from './types';
+import classNames from 'classnames';
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = 'primary',
+      backgroundColor,
+      size = 'small',
+      onClick,
+      label,
+      disabled = false,
+      children = null,
+      type = 'button',
+      className = '',
+      style = {},
+      iconName,
+      iconPosition = 'left',
+      ...props
+    }: ButtonProps,
+    ref
+  ) => {
+    const renderIcon = () =>
+      iconName && (
+        <div>
+          <Icon
+            height={8}
+            width={8}
+            color={
+              variant === 'primary'
+                ? `var(--primary-icon-color)`
+                : `var(--secondary-icon-color)`
+            }
+            name={iconName}
+          />
+        </div>
+      );
+    return (
+      <button
+        type={type}
+        ref={ref}
+        className={classNames(
+          'ff-button',
+          `ff-button--${size}`,
+          `ff-button--${variant}`,
+          `${className}`,
+          'button'
+        )}
+        style={{ backgroundColor, ...style }}
+        onClick={onClick}
+        disabled={disabled}
+        {...props}
+      >
+        {iconPosition === 'left' && renderIcon()}
+        <div className={classNames(`ff-button-${variant}--text`)}>{label}</div>
+        {iconPosition === 'right' && renderIcon()}
+        {children}
+      </button>
+    );
+  }
+);
+export default Button;

package/src/components/Button/index.ts

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

package/src/components/Button/types.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+
+export interface ButtonProps {
+  /**
+   * Variant of the button
+   */
+  variant: 'primary' | 'secondary' | 'tertiary' | 'delete'| 'warning';
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label?: string;
+  /**
+   * Type of the button
+   */
+
+  type?: 'button' | 'submit';
+
+  disabled?: boolean;
+  /**
+   * Optional click handler
+   */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /**
+   * Button content
+   */
+  children?: ReactNode;
+  /**
+   * Button id
+   */
+  id?: string;
+  /**
+   * onSubmit function handler
+   */
+  onSubmit?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /**
+   * react ref for the button
+   */
+  ref?: any;
+  /**
+   * Classname for the button
+   */
+  className?: string;
+  /**
+   * Additional styles for the button
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Give icon name availble in storybook that to be on left side of button
+   */
+  iconName?: string;
+  /**
+   * Give icon name availble in storybook that to be on left side of button
+   */
+  iconPosition?: 'left' | 'right';
+  transparentBackground?: boolean;
+}

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss

@@ -0,0 +1,145 @@
+@use '../../../assets/styles/fonts';
+
+.ff-dashboard-donut-chart-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &-table-legend {
+    flex-direction: row;
+  }
+
+  .ff-dashboard-donut-chart-svg-container {
+    text-align: center;
+    svg {
+      text:nth-of-type(1) {
+        @extend .font2Xl;
+        font-weight: 600;
+      }
+      text:nth-of-type(2) {
+        @extend .fontMd;
+        font-weight: 500;
+      }
+    }
+
+    .ff-donut-chart-tooltip {
+      position: fixed;
+      padding: 5px;
+      border-radius: 4px;
+      pointer-events: none;
+      background-color: var(--tooltip-bg-color);
+      color: var(--tooltip-text-color);
+    }
+  }
+
+  .ff-legend-container {
+    display: grid;
+    gap: 10px;
+
+    &.numberLegend {
+      grid-template-columns: repeat(3, 1fr);
+      .ff-legend-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    }
+
+    &.pillLegend {
+      grid-template-columns: repeat(2, 1fr);
+      .ff-legend-item {
+        display: flex;
+        align-items: center;
+
+        .ff-legend-capsule {
+          background-color: var(--status-success-text-color);
+          color: var(--tooltip-text-color);
+          border-radius: 15px;
+          min-width: 25px;
+          height: 18px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .ff-legend-key {
+          margin-left: 8px;
+        }
+      }
+    }
+
+    &.memoryLegend {
+      grid-template-columns: repeat(2, 1fr);
+      .ff-legend-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        padding-right: 10px;
+        border-right: 1px solid var(--border-color);
+
+        // Remove the right border for the last item in each row
+        &:nth-child(2n) {
+          border-right: none;
+        }
+      }
+    }
+  }
+
+  .ff-legend-table-wrapper {
+    overflow: hidden;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    margin-left: 1rem;
+  }
+
+  .ff-legend-table {
+    width: 100%;
+    min-width: 300px;
+    border-collapse: collapse;
+    text-align: left;
+
+    .ff-table-header {
+      @extend .fontXs;
+      font-weight: bold;
+      background-color: var(--tabs-bg-color);
+      color: var(--input-hover-border-color);
+      padding: 0.5rem;
+
+      &:last-child {
+        text-align: right;
+      }
+    }
+
+    .ff-legend-capsule {
+      background-color: var(--status-success-text-color);
+      color: var(--tooltip-text-color);
+      border-radius: 1rem;
+      min-width: 22px;
+      height: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .ff-legend-item {
+      .ff-legend-name,
+      .ff-legend-percentage,
+      .ff-legend-count {
+        padding: 0.5rem;
+        @extend .fontXs;
+        color: var(--input-hover-border-color);
+      }
+
+      .ff-legend-name {
+        display: flex;
+        align-items: baseline;
+        gap: 5px;
+        color: var(--input-hover-border-color);
+      }
+      .ff-legend-count {
+        text-align: right;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import DashboardDonutChart from './DashboardDonutChart';
+
+const meta: Meta<typeof DashboardDonutChart> = {
+  title: 'Components/DashboardDonutChart',
+  component: DashboardDonutChart,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof DashboardDonutChart>;
+
+export const Default: Story = {
+  args: {
+    radius: 70,
+    lineWidth: 15,
+    legendDetailsType: 'Scripts',
+    isLegendDetails: true,
+    statusValues: [
+      { key: 'Passed', value: 60, color: 'var(--status-success-text-color)' },
+      { key: 'failed', value: 20, color: 'var(--status-rejected-text-color)' },
+      { key: 'Warning', value: 10, color: 'var(--status-warning-text-color)' },
+      { key: 'skipped', value: 10, color: 'var(--status-skipped-text-color)' },
+    ],
+    gapAngle: 0,
+    legendType: 'numberLegend',
+    showOnlyLabel: false,
+  },
+};
+
+export const MemoryLegend: Story = {
+  args: {
+    radius: 65,
+    lineWidth: 15,
+    legendDetailsType: 'Memory',
+    isLegendDetails: true,
+    statusValues: [
+      {
+        key: 'Available Memory',
+        value: 37.5,
+        color: 'var(--status-warning-text-color)',
+      },
+      { key: 'Used Memory', value: 72.5, color: 'var(--brand-color)' },
+    ],
+    gapAngle: 0,
+    legendType: 'memoryLegend',
+    showOnlyLabel: true,
+  },
+};