pixel-react 1.10.15 → 1.10.16

package/src/components/TableTree/types.ts

@@ -1,86 +0,0 @@
-import { ReactNode } from 'react';
-import { TreeNodeProps as TreeNode } from '../../ComponentProps/TreeNodeProps';
-
-interface NewNode {
-  sourceId?: string;
-  action?: 'addAbove' | 'addBelow' | 'addInside';
-  value?: string;
-  error?: string;
-  label?: string;
-}
-
-declare type JSX = ReactNode | JSX.Element[] | string | null;
-
-export interface TableCellProps {
-  treeRowRef?: React.RefObject<any | null>;
-  col: any;
-  node: any;
-  selected: string[];
-  select: string | null;
-  onCheckBoxChange: (e: any, node: string[] | any) => void;
-  onToggleExpand: (node: any) => void;
-  index?: number;
-  onAddConfirm?: (_name: string) => void;
-  onAddCancel?: () => void;
-  isExpanding?: boolean;
-}
-
-export interface TableHeadProps {
-  columnsData: any[];
-}
-
-export interface TableBodyProps {
-  flattenedTreeData: any[];
-  columnsData: any[];
-  selected: string[];
-  select: string | null;
-  onRowClick: (e: any, node: any) => void;
-  onToggleExpand: (node: TreeNode, _index: number) => void;
-  onCheckBoxChange: (e: any, node: string[] | any) => void;
-  newNode?: NewNode;
-  onAddConfirm?: (_name: string) => void;
-  onAddCancel?: () => void;
-  expanding?: string | null;
-}
-
-export interface TableRowProps {
-  node: any;
-  columnsData: any[];
-  selected: string[];
-  select: string | null;
-  onRowClick: (e: any, node: any) => void;
-  onToggleExpand: (node: TreeNode) => void;
-  onCheckBoxChange: (e: any, node: string[] | any) => void;
-  index?: number;
-  onAddConfirm?: (_name: string) => void;
-  onAddCancel?: () => void;
-  isExpanding?: boolean;
-}
-
-export interface Column {
-  name: string;
-  accessor: string;
-  width: string;
-  isClickable?: boolean;
-  cell?: (row: any) => JSX;
-  actions?: (row: any, treeRowRef?: React.RefObject<any | null>) => JSX;
-  isTree?: boolean;
-  defaultValue?: string;
-  defaultActions?: () => JSX;
-}
-
-export interface TreeTableProps {
-  treeData: any;
-  columnsData: Column[];
-  selected?: string[];
-  select?: 'radio' | 'checkbox' | 'none';
-  onChange?: (e: any, node: string[] | any) => void;
-  onClick?: (e: React.MouseEvent<HTMLDivElement>, row: TreeNode) => void;
-  onExpand?: (node: TreeNode, _index: number) => void;
-  loadMore?: (_direction?: string) => void;
-  tableBorder?: string;
-  height?: number | string;
-  newNode?: NewNode;
-  onAddConfirm?: (_name: string) => void;
-  onAddCancel?: () => void;
-}

package/src/components/TableWithAccordion/TableWithAccordion.stories.tsx

@@ -1,94 +0,0 @@
-import { StoryObj, Meta } from '@storybook/react';
-import TableWithAccordion from './TableWithAccordion';
-import { sampleData } from './data';
-
-const meta: Meta<typeof TableWithAccordion> = {
-  title: 'Components/TableWithAccordion',
-  component: TableWithAccordion,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof TableWithAccordion>;
-const defaultArgs = {
-  tableMeta: [],
-  tableData: [],
-};
-
-const emptyData: never[] = [];
-const columnsData = [
-  {
-    header: 'Description',
-    accessor: 'desc',
-    width: 100,
-  },
-  {
-    header: 'SUITE NAME',
-    accessor: 'suiteName',
-    width: 100,
-  },
-  {
-    header: 'SUITE TYPE',
-    accessor: 'suiteName',
-    width: 100,
-  },
-  {
-    header: 'SUITE ACCESS',
-    accessor: 'suiteName',
-    width: 100,
-  },
-  {
-    header: 'Modified By',
-    accessor: 'modifiedBy',
-    width: 100,
-  },
-];
-
-export const TableWithRowAccordion: Story = {
-  args: {
-    ...defaultArgs,
-    tableMeta: columnsData,
-    tableData: sampleData,
-    accordionType: 'row',
-    TableAccordionStateIconWidth:4,
-    TableAccordionStateIconHeight:8,
-  },
-};
-export const TableWithColumnAccordion: Story = {
-  args: {
-    ...defaultArgs,
-    tableMeta: columnsData,
-    tableData: sampleData,
-    accordionType: 'column',
-    TableAccordionStateIconWidth:4,
-    TableAccordionStateIconHeight:8,
-  },
-};
-
-export const EmtptyTableWithColumnAccordion: Story = {
-  args: {
-    ...defaultArgs,
-    tableMeta: columnsData,
-    tableData: emptyData,
-    accordionType: 'column',
-    TableAccordionStateIconWidth:4,
-    TableAccordionStateIconHeight:8,
-  },
-};
-
-export const AccordionTableWithFixedHeader: Story = {
-  args: {
-    ...defaultArgs,
-    tableMeta: columnsData,
-    tableData: sampleData,
-    accordionType: 'row',
-    height: '200px',
-    withFixedHeader: true,
-    TableAccordionStateIconWidth:4,
-    TableAccordionStateIconHeight:8,
-  },
-};
-
-export default meta;

package/src/components/TableWithAccordion/TableWithAccordion.tsx

@@ -1,174 +0,0 @@
-import { useState } from 'react';
-import classNames from 'classnames';
-import Accordion from '../Accordion';
-import './TableWithAccordion.scss';
-import Icon from '../Icon';
-import Tooltip from '../Tooltip';
-import '../../../index.scss';
-import Typography from '../Typography';
-import { ColumnProps, TableProps } from './types';
-
-const TableWithAccordion = ({
-  tableMeta = [],
-  tableData = [],
-  accordionType = 'row',
-  noDataContent,
-  height = '100%',
-  withFixedHeader = false,
-  headerType,
-  TableAccordionStateIconWidth = 4,
-  TableAccordionStateIconHeight = 8,
-}: TableProps) => {
-  const [expandedRowIndex, setExpandedRowIndex] = useState(-1);
-  const onAccordionClick = (index: number) => {
-    setExpandedRowIndex(index === expandedRowIndex ? -1 : index);
-  };
-  const getAccordionTableCellContent = (
-    dataObj: any,
-    columnObj: ColumnProps
-  ) => {
-    let cellData = dataObj[columnObj.accessor];
-    if (columnObj.cell) {
-      return columnObj.cell({
-        value: cellData,
-        row: dataObj,
-        column: columnObj.accessor,
-      });
-    } else if (columnObj.accessor) {
-      return cellData;
-    } else if (cellData && typeof cellData !== 'object') {
-      return cellData;
-    } else {
-      return '--';
-    }
-  };
-  const getAccordionTableContent = (dataArray: any) => {
-    const accordionSubTable = dataArray.map((rowData: any, index: number) => {
-      return (
-        <table className="ff-accordion-table" cellSpacing={0}>
-          <tbody className="ff-table-body">
-            <tr className="ff-table-row" key={rowData.id || index}>
-              {tableMeta.map((column, i) => {
-                return (
-                  <td
-                    className="ff-table-cell"
-                    key={column.accessor + i}
-                    style={{ width: column.width }}
-                  >
-                    {accordionType === 'column' && i === 0 ? (
-                      ''
-                    ) : (
-                      <Typography>
-                        {getAccordionTableCellContent(rowData, column)}
-                      </Typography>
-                    )}
-                  </td>
-                );
-              })}
-            </tr>
-          </tbody>
-        </table>
-      );
-    });
-    return accordionSubTable;
-  };
-  return (
-    <div
-      style={{ height: height }}
-      className={classNames('ff-accordion-table-container', {
-        'ff-accordion-fixed-header-table': withFixedHeader,
-      })}
-    >
-      <table
-        cellSpacing={0}
-        className={classNames('ff-accordion-table', {
-          'ff-accordion-fixed-header': withFixedHeader,
-        })}
-      >
-        <thead>
-          <tr className="ff-table-row">
-            {tableMeta.map((column) => (
-              <th
-                key={column.header}
-                style={{ width: column.width }}
-                className={classNames(
-                  'ff-table-header',
-                  headerType && `ff-accordion-table--${headerType}-bg`
-                )}
-              >
-                <div>
-                  <Typography fontWeight="medium" fontSize={12}>
-                    {column.header}
-                  </Typography>
-                </div>
-              </th>
-            ))}
-          </tr>
-        </thead>
-      </table>
-      {accordionType === 'row' &&
-        tableData.map((row: any) => (
-          <Accordion
-            headerTitle={row.title}
-            color="var(--text-color)"
-            accordionContent={getAccordionTableContent(row.data)}
-            disable={row.disable}
-            disableInfoMessage={row.disableInfoMessage}
-            accordionStateIconName="arrows_down_icon"
-            AccordionStateIconWidth={TableAccordionStateIconWidth}
-            AccordionStateIconHeight={TableAccordionStateIconHeight}
-          />
-        ))}
-      {accordionType === 'column' &&
-        tableData.map((row: any, index: number) => (
-          <div className="column-table-accordion">
-            <div className="ff-display-flex">
-              <Tooltip title={row?.disableInfoMessage}>
-                <div
-                  className={`accordion-header ${row.disable && 'ff-disabled'}`}
-                >
-                  <div className="header-title">
-                    <span>
-                      <Typography fontWeight="regular">{row.title}</Typography>
-                    </span>
-                  </div>
-
-                  <div
-                    className="accordion-arrow"
-                    onClick={() => {
-                      !row.disable && onAccordionClick(index);
-                    }}
-                  >
-                    <Icon
-                      name={
-                        expandedRowIndex === index
-                          ? 'arrows_down_icon'
-                          : 'arrows_right_icon'
-                      }
-                      color="var(--table-with-accordion-icon-color)"
-                      width={TableAccordionStateIconWidth}
-                      height={TableAccordionStateIconHeight}
-                      hoverEffect={false}
-                    />
-                  </div>
-                </div>
-              </Tooltip>
-            </div>
-            {expandedRowIndex === index && (
-              <div>{getAccordionTableContent(row.data)}</div>
-            )}
-          </div>
-        ))}
-      {tableData.length <= 0 && (
-        <div
-          className="no-data-content"
-          style={{ height: `calc(${height} - 50px)` }}
-        >
-          {noDataContent}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default TableWithAccordion;

package/src/components/TableWithAccordion/data.ts

@@ -1,37 +0,0 @@
-export const sampleData = [
-    {
-      title: 'Pre conditions',
-      data: [
-        {
-          desc: 'Open Browser',
-          modifiedBy: 'Ram',
-          suiteName: 'test',
-        },
-      ],
-    },
-    {
-      title: 'Steps',
-      data: [
-        {
-          desc: '1. SG1',
-          modifiedBy: 'Ram',
-          suiteName: 'suite1',
-        },
-        {
-          desc: '2. SG2',
-          modifiedBy: 'Laxman',
-          suiteName: 'suite 2',
-        },
-      ],
-    },
-    {
-      title: 'Post conditions',
-      data: [
-        {
-          desc: 'close browser',
-          modifiedBy: 'Krishna',
-          suiteName: 'test 2',
-        },
-      ],
-    },
-  ];

package/src/components/TableWithAccordion/index.ts

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

package/src/components/TableWithAccordion/types.ts

@@ -1,70 +0,0 @@
-import { ReactNode } from "react";
-
-export interface ColumnProps {
-    /**
-     * column name
-     */
-    header: string;
-    /**
-     * data key for particular column
-     */
-    accessor: string;
-    /**
-     * className for a column
-     */
-    className?: string;
-    /**
-     * width of a column
-     */
-    width?: number;
-    /**
-     * data for the column
-     */
-    cell?: (e: any) => JSX.Element | string | ReactNode;
-  }
-
-export interface DataProps {
-    /**
-     * data for each row
-     */
-    [key: string]: any;
-  }
-
-export interface TableProps {
-    /**
-     * Column details for table
-     */
-    tableMeta: Array<ColumnProps>;
-    /**
-     * Data for table
-     */
-    tableData: Array<DataProps>;
-    /**
-     * Table type
-     */
-    accordionType: 'row' | 'column';
-    /**
-     *  Specific sentence to be displayed data not found
-     */
-    noDataContent?: string | ReactNode;
-    /**
-     * withFixedHeader prop to have non-scrollable fixed accordion table header
-     */
-    withFixedHeader?: boolean;
-    /**
-     *  Height of the table in string
-     */
-    height?: string;
-    /**
-     * Header type to have different background color
-     */
-    headerType: 'default' | 'primary' | 'secondary';
-    /**
-     * Accordion collapse and expand Icon width
-     */
-    TableAccordionStateIconWidth:number,
-    /**
-     * Accordion collapse and expand Icon height
-     */
-    TableAccordionStateIconHeight:number,
-  }

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,179 +0,0 @@
-import React, { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import Tabs from './Tabs';
-import Typography from '../Typography';
-
-const meta: Meta<typeof Tabs> = {
-  title: 'Components/Tabs',
-  component: Tabs,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Tabs>;
-
-const TabContentOne = () => (
-  <div>
-    <Typography as="h1" children="Tab--1" fontSize={32} fontWeight="bold" />
-    <Typography as="p" children="This is the content for Tab - 1" />
-  </div>
-);
-const TabContentTwo = () => (
-  <div>
-    <Typography as="h1" children="Tab--2" fontSize={32} fontWeight="bold" />
-    <Typography as="p" children="This is the content for Tab - 2" />
-  </div>
-);
-const TabContentThree = () => (
-  <div>
-    <Typography as="h1" children="Tab--3" fontSize={32} fontWeight="bold" />
-    <Typography as="p" children="This is the content for Tab - 3" />
-  </div>
-);
-const TabContentFour = () => (
-  <div>
-    <Typography as="h1" children="Tab--4" fontSize={32} fontWeight="bold" />
-    <Typography as="p" children="This is the content for Tab - 4" />
-  </div>
-);
-
-const tabsData = [
-  { id: 'tab-1', label: 'Tab--1', component: <TabContentOne />, count: '02' },
-  { id: 'tab-2', label: 'Tab--2', component: <TabContentTwo />, count: 35 },
-  { id: 'tab-3', label: 'Tab--3', component: <TabContentThree />, count: 205 },
-];
-
-export const DefaultTabs: Story = {
-  render: () => {
-    const [activeTabIdDefault, setActiveTabIdDefault] =
-      useState<string>('tab-1');
-
-    return (
-      <Tabs
-        tabsData={tabsData}
-        activeTabId={activeTabIdDefault}
-        onTabClick={setActiveTabIdDefault}
-      />
-    );
-  },
-};
-export const CapsuleTabs: Story = {
-  render: () => {
-    const [activeTabIdCapsule, setActiveTabIdCapsule] =
-      useState<string>('tab-1');
-
-    const tabsDataForCapsule = [
-      {
-        id: 'tab-1',
-        label: 'Loremipsum_1',
-        component: <TabContentOne />,
-      },
-      {
-        id: 'tab-2',
-        label: 'Loremipsum_2',
-        component: <TabContentTwo />,
-      },
-      {
-        id: 'tab-3',
-        label: 'Loremipsum_3',
-        component: <TabContentThree />,
-      },
-      {
-        id: 'tab-4',
-        label: 'Loremipsum_4',
-        component: <TabContentFour />,
-      },
-      { id: 'tab-5', label: 'Loremipsum_5', component: <TabContentFour /> },
-    ];
-
-    return (
-      <Tabs
-        variant={'capsule'}
-        tabsData={tabsDataForCapsule}
-        activeTabId={activeTabIdCapsule}
-        onTabClick={setActiveTabIdCapsule}
-      />
-    );
-  },
-};
-
-export const TabsWithDisabledTab: Story = {
-  render: () => {
-    const [activeTabId, setActiveTabId] = useState<string>('tab-1');
-
-    const tabsDataWithOneDisableAttribute = [
-      { id: 'tab-1', label: 'Tab--1', component: <TabContentOne /> },
-      {
-        id: 'tab-2',
-        label: 'Tab--2',
-        component: <TabContentTwo />,
-        disabled: true,
-      },
-      { id: 'tab-3', label: 'Tab--3', component: <TabContentThree /> },
-    ];
-
-    return (
-      <Tabs
-        tabsData={tabsDataWithOneDisableAttribute}
-        activeTabId={activeTabId}
-        onTabClick={setActiveTabId}
-      />
-    );
-  },
-};
-
-export const WithoutBorder: Story = {
-  render: () => {
-    const [activeTabIdDefault, setActiveTabIdDefault] =
-      useState<string>('tab-1');
-
-    return (
-      <div style={{ display: 'flex', gap: '10px' }}>
-        <Tabs
-          tabsData={tabsData}
-          activeTabId={activeTabIdDefault}
-          onTabClick={setActiveTabIdDefault}
-          noBorder={true}
-        />{' '}
-        <hr />
-        <Tabs
-          variant="capsule"
-          tabsData={tabsData}
-          activeTabId={activeTabIdDefault}
-          onTabClick={setActiveTabIdDefault}
-          noBorder={true}
-        />
-      </div>
-    );
-  },
-};
-
-export const WithoutPadding: Story = {
-  render: () => {
-    const [activeTabIdDefault, setActiveTabIdDefault] =
-      useState<string>('tab-1');
-
-    return (
-      <div style={{ display: 'flex', gap: '10px' }}>
-        <Tabs
-          tabsData={tabsData}
-          activeTabId={activeTabIdDefault}
-          onTabClick={setActiveTabIdDefault}
-          noPadding={true}
-        />{' '}
-        <hr />
-        <Tabs
-          variant="capsule"
-          tabsData={tabsData}
-          activeTabId={activeTabIdDefault}
-          onTabClick={setActiveTabIdDefault}
-          noPadding={true}
-        />
-      </div>
-    );
-  },
-};
-
-export default meta;