pixel-react 1.10.15 → 1.10.16

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

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

@@ -1,92 +0,0 @@
-import { forwardRef } from 'react';
-import './Button.scss';
-import '../../assets/styles/_colors.scss';
-import Icon from '../Icon';
-import { ButtonProps } from './types';
-import classNames from 'classnames';
-import Typography from '../Typography';
-
-
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      variant = 'primary',
-      backgroundColor,
-      size = 'small',
-      onClick,
-      label,
-      disabled = false,
-      children = null,
-      type = 'button',
-      className = '',
-      style = {},
-      iconName,
-      iconPosition = 'left',
-      isChooseFile = false,
-      buttonWidth = 'auto',
-      handleCloseIcon,
-      selectedFile,
-      ...props
-    }: ButtonProps,
-    ref
-  ) => {
-    const renderIcon = () =>
-      iconName && (
-        <div
-          onClick={(e) => {
-            if (iconName === 'close') {
-              e.stopPropagation();
-              handleCloseIcon?.();
-            }
-          }}
-        >
-          <Icon
-            height={isChooseFile ? 14 : 8}
-            width={isChooseFile ? 14 : 8}
-            color={
-              iconName === 'close'
-                ? 'var(--ff-delete-button-attachment)'
-                : variant === 'primary'
-                ? `var(--primary-icon-color)`
-                : `var(--secondary-icon-color)`
-            }
-            name={iconName}
-            className="ff-button-icon"
-          />
-        </div>
-      );
-    return (
-      <button
-        type={type}
-        ref={ref}
-        className={classNames(
-          'ff-button',
-          `ff-button--${size}`,
-          `ff-button--${variant}`,
-          `${className}`,
-          { 'ff-button-choose-file': isChooseFile },
-          { 'ff-button-choose-file-text': selectedFile }
-        )}
-        style={{ backgroundColor, ...style, width: buttonWidth }}
-        onClick={onClick}
-        disabled={disabled}
-        {...props}
-      >
-        {iconPosition === 'left' && renderIcon()}
-        <Typography
-          fontSize={10}
-          fontWeight="semi-bold"
-          className={classNames(`ff-button-${variant}--text`, {
-            'ff-button-choose-file-text': selectedFile,
-          })}
-        >
-          {label}
-        </Typography>
-        {iconPosition === 'right' && renderIcon()}
-        {children}
-      </button>
-    );
-  }
-);
-export default Button;

package/src/components/Button/index.ts

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

package/src/components/Button/types.ts

@@ -1,90 +0,0 @@
-import { ReactNode } from 'react';
-import { DynamicObj } from '../CreateVariable/types';
-
-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;
-  /**
-   * form to accept form id in string
-   */
-  form?: string;
-
-  /**
-   * Is the Type ChooseFile for the button
-   */
-  isChooseFile?: boolean;
-
-  /**
-   * Custom Width for the button
-   */
-  buttonWidth?: string;
-
-  /**
-   * selectedfile object will be send.
-   */
-  selectedFile?: File | DynamicObj | null;
-
-  /**
-   * handleCloseIcon function will set to the initial state .
-   */
-  handleCloseIcon?: () => void;
-}

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

@@ -1,161 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import BarChart from './BarChart';
-import React from 'react';
-
-const meta: Meta<typeof BarChart> = {
-  title: 'Components/BarChart',
-  component: BarChart,
-  parameters: {
-    layout: 'bottom',
-  },
-  argTypes: {
-    barWidth: { control: 'number' },
-    height: { control: 'number' },
-    data: { control: 'object' },
-    colors: { control: 'object' },
-    xAxisLabel: { control: 'text' },
-    yAxisLabel: { control: 'text' },
-    barGap: { control: 'number' },
-    barBorderRadius: { control: 'number' },
-    legend: { control: 'boolean' },
-    showXAxisLabels: { control: 'boolean' },
-    iconSize: { control: 'number' },
-    isTruncateText: { control: 'boolean' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof BarChart>;
-
-export const BarChartDashboard: Story = {
-  args: {
-    data: [
-      { label: 'FireFox', value: 10 },
-      { label: 'Edge', value: 20 },
-      { label: 'Chrome', value: 25 },
-      { label: 'Safari', value: 10 },
-      { label: 'IE', value: 1 },
-      { label: 'Opera', value: 15 },
-    ],
-    barWidth: 20,
-    height: 250,
-    colors: [
-      ['#FFC300', '#FF5733'],
-      ['#01D34F', '#013E7C'],
-      ['#FFC107', '#E4AD09'],
-      ['#5FC2F5', '#3061C5'],
-      ['#00BBEF', '#0FA2CB'],
-      ['#9C0000', '#9C0000'],
-    ],
-    isTruncateText: true,
-    xAxisLabel: 'Status',
-    yAxisLabel: 'Count',
-    padding: 30,
-    barGap: 40,
-    barBorderRadius: 0,
-    legend: false,
-    showXAxisLabels: true,
-    legendPosition: 'top',
-    icons: [
-      'fire_fox',
-      'edge',
-      'chrome_icon',
-      'safari_icon',
-      'internet_explorer',
-      'opera',
-    ],
-    iconSize: 20,
-    onSelectedBar: (label) => {
-      console.log(label);
-    },
-  },
-};
-
-export const FailureAnalysis: Story = {
-  render: () => {
-    return (
-      <div style={{ width: '500px' }}>
-        <BarChart
-          data={[
-            {
-              label: 'Known Failures',
-              value: 25,
-            },
-            {
-              label: 'Unknown Failures',
-              value: 45,
-            },
-            {
-              label: 'Partially Analysed Failures',
-              value: 20,
-            },
-          ]}
-          height={137}
-          barBorderRadius={4}
-          barGap={156}
-          colors={[
-            ['#FFEB3B', '#FFEB3B'],
-            ['#9C0000', '#9C0000'],
-            ['#FFC107', '#FFC107'],
-          ]}
-          barWidth={18}
-          padding={30}
-          showXAxisLabels
-          legend={false}
-          xAxisLabel="Failure Type"
-          yAxisLabel="Failure Rate"
-          isTruncateText={false}
-          yAxisDivisions={4}
-          extendBarChartRightWidth={70}
-          isYAxisValuePercentage={true}
-        />
-      </div>
-    );
-  },
-};
-
-export const TopFailure: Story = {
-  render: () => {
-    return (
-      <div style={{ height: '100vh', overflow: 'auto' }}>
-        <div style={{ height:'60vh'}}></div>
-          <BarChart
-            data={[
-              {
-                label: '1% - 25%',
-                value: 3,
-              },
-              {
-                label: '26% - 50%',
-                value: 10,
-              },
-              {
-                label: '51% - 75%',
-                value: 2,
-              },
-              {
-                label: '76% - 100% ',
-                value: 7,
-              },
-            ]}
-            height={137}
-            barBorderRadius={4}
-            barGap={113}
-            colors={[
-              ['#52A2F2', '#52A2F2'],
-              ['#52A2F2', '#52A2F2'],
-              ['#52A2F2', '#52A2F2'],
-              ['#52A2F2', '#52A2F2'],
-            ]}
-            barWidth={18}
-            padding={30}
-            showXAxisLabels
-            legend={false}
-            xAxisLabel="Failure Rate"
-            yAxisLabel="No. of Scripts"
-            yAxisDivisions={4}
-          />
-      </div>
-    );
-  },
-};