pixel-react-excel-sheet 1.2.0

package/.prettierrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  printWidth: 80, // max 080 chars in line, code is easy to read
+  useTabs: false, // use spaces instead of tabs
+  tabWidth: 2, // "visual width" of of the "tab"
+  trailingComma: 'es5', // add trailing commas in objects, arrays, etc.
+  semi: true, // add ; when needed
+  singleQuote: true, // '' for stings instead of ""
+  bracketSpacing: true, // import { some } ... instead of import {some} ...
+  arrowParens: 'always', // braces even for single param in arrow functions (a) => { }
+  jsxSingleQuote: false, // "" for react props, like in html
+  bracketSameLine: false, // pretty JSX
+  endOfLine: 'lf', // 'lf' for linux, 'crlf' for windows, we need to use 'lf' for git
+};

package/.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.tsx'],
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@chromatic-com/storybook',
+    "storybook-addon-theme-provider",
+  ],
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  }
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,26 @@
+import type { Preview } from '@storybook/react';
+import { withThemeProvider } from 'storybook-addon-theme-provider';
+import ThemeProvider from '../src/components/ThemeProvider/ThemeProvider';
+import '../index.scss';
+import '../src/assets/Themes/Theme.scss';
+
+const preview: Preview = {
+  parameters: {
+    actions: {},
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      source: {
+        language: 'tsx',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  decorators: [withThemeProvider(ThemeProvider)],
+};
+
+export default preview;

package/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package/README.md

@@ -0,0 +1,75 @@
+---
+title: PixelReact UI
+---
+
+import { Button, Input } from 'pixel-react';
+
+<h1 align="center">PixelReact UI</h1>
+
+<p align="center">
+  <strong>PixelReact UI</strong> is an open-source React component library, designed to offer a sleek, customizable, and easy-to-use collection of components for building modern user interfaces.
+</p>
+
+---
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Documentation](#documentation)
+- [Contributing](#contributing)
+- [License](#license)
+
+---
+
+## Installation
+
+Install PixelReact UI in your project directory with:
+
+```bash
+npm install pixel-react
+```
+
+or with Yarn:
+
+```bash
+yarn add pixel-react
+```
+
+## Usage
+
+Once installed, you can start importing and using PixelReact components in your React application. Here's a quick example:
+
+```jsx
+import { Button } from 'pixel-react';
+
+function App() {
+  return (
+    <div>
+      <Button label="Button Label" variant="primary" />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Documentation
+
+For detailed documentation and live examples, [click here](https://main--65d5ca6d09c1eaf0731601fc.chromatic.com/).
+
+## Example
+
+```jsx
+import { Button } from 'pixel-react';
+
+function ExampleComponent() {
+  return <Button label="Click Me!" variant="primary" />;
+}
+```
+
+## License
+
+PixelReact UI is licensed under the [MIT License](LICENSE). Feel free to use it in your projects, both personal and commercial.
+
+---

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/index.ts","../src/assets/utils/functionutils.ts","../src/components/button/button.stories.tsx","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/types.ts","../src/hooks/useclickoutside.tsx","../src/utils/checkempty/checkempty.stories.tsx","../src/utils/checkempty/checkempty.ts"],"version":"5.6.2"}

package/lib/StyleGuide/ColorPalette/ColorPalette.d.ts

@@ -0,0 +1,3 @@
+import './ColorPalette.scss';
+declare const Colors: () => import("react/jsx-runtime").JSX.Element;
+export default Colors;

package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import StyleGuide from './ColorPalette';
+declare const meta: Meta<typeof StyleGuide>;
+type Story = StoryObj<typeof StyleGuide>;
+export declare const ColorList: Story;
+export default meta;

package/lib/StyleGuide/ColorPalette/colorPaletteList.d.ts

@@ -0,0 +1,3 @@
+import { ColorPaletteType } from './types';
+declare const ColorPalette: ColorPaletteType;
+export default ColorPalette;

package/lib/StyleGuide/ColorPalette/index.d.ts

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

package/lib/StyleGuide/ColorPalette/types.d.ts

@@ -0,0 +1,17 @@
+export interface ColorBoxProps {
+    name: string;
+    colorCode: string;
+    opacity?: number;
+    dropShadow?: string;
+    border?: string;
+    variable?: string;
+}
+export interface Color {
+    name: string;
+    colorCode: string;
+    opacity?: number;
+    dropShadow?: string;
+    border?: string;
+    variable?: string;
+}
+export type ColorPaletteType = Color[];

package/lib/StyleGuide/Typography/Typography.d.ts

@@ -0,0 +1,3 @@
+import './Typography.scss';
+declare const Typography: () => import("react/jsx-runtime").JSX.Element;
+export default Typography;

package/lib/StyleGuide/Typography/Typography.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Typography from './Typography';
+declare const meta: Meta<typeof Typography>;
+type Story = StoryObj<typeof Typography>;
+export declare const AllFonts: Story;
+export default meta;

package/lib/StyleGuide/Typography/TypographyList.d.ts

@@ -0,0 +1,5 @@
+export declare const fontData: {
+    name: string;
+    fontSizePx: string;
+    fontSizeRem: string;
+}[];

package/lib/StyleGuide/Typography/types.d.ts

@@ -0,0 +1,8 @@
+export interface FontData {
+    name: string;
+    fontSizePx: string;
+    fontSizeRem: string;
+}
+export interface TypographyProps {
+    fonts: FontData[];
+}

package/lib/assets/utils/functionUtils.d.ts

@@ -0,0 +1,4 @@
+export declare const isFunction: (functionToCheck: any) => any;
+export declare const convertTo24Hour: (time12h: string) => string;
+export declare const convertTo12Hour: (time24: string) => string;
+export declare const isValid12HourTime: (timeString: string) => boolean;

package/lib/components/Accordion/Accordion.d.ts

@@ -0,0 +1,8 @@
+import './Accordion.scss';
+import '../../../index.scss';
+import { AccordionProps } from './types';
+/**
+ * Accordion UI component
+ */
+declare const Accordion: ({ headerTitle, color, minHeight, accordionContent, disable, disableInfoMessage, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export default Accordion;

package/lib/components/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Accordion from './Accordion';
+declare const meta: Meta<typeof Accordion>;
+type Story = StoryObj<typeof Accordion>;
+export declare const SampleAccordion: Story;
+export default meta;

package/lib/components/Accordion/index.d.ts

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

package/lib/components/Accordion/types.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+export interface AccordionProps {
+    /**
+     * Accordion Header Title
+     */
+    headerTitle: string | JSX.Element;
+    /**
+     * Content that to be shown while Accordion is expanded
+     */
+    accordionContent: ReactNode;
+    /**
+     * Custom color for the Accordion header
+     */
+    color?: string;
+    /**
+     * Minimum height for the Accordion
+     */
+    minHeight?: string;
+    /**
+     * Property to disable accordion
+     */
+    disable?: boolean;
+    /**
+     * Info message to user for disabling accordion
+     */
+    disableInfoMessage?: string;
+}

package/lib/components/AddResourceButton/AddButton.d.ts

@@ -0,0 +1,4 @@
+import './AddButton.scss';
+import { AddResourceButtonProps } from './type';
+declare const AddButton: ({ id, variant, directionalArrow, zIndex, }: AddResourceButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default AddButton;

package/lib/components/AddResourceButton/AddButton.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import AddButton from './AddButton';
+declare const meta: Meta<typeof AddButton>;
+type Story = StoryObj<typeof AddButton>;
+export declare const Default: Story;
+export declare const TwoArrowsButtons: Story;
+export declare const ThreeArrowsButton: Story;
+export default meta;

package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.d.ts

@@ -0,0 +1,6 @@
+import './ArrowsButton.scss';
+import { DirectionalArrowButtonProps } from '../type';
+declare const ArrowsButton: ({ direction, menuOptions, onArrowClick, }: DirectionalArrowButtonProps & {
+    isActive: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ArrowsButton;

package/lib/components/AddResourceButton/index.d.ts

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

package/lib/components/AddResourceButton/type.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Describes the directional arrow used in the Add Resource Button component.
+ * The arrow specifies its direction (top, right, down) and associated menu options.
+ *
+ * @property {('top' | 'right' | 'down')} direction - Specifies the direction of the arrow.
+ * @property {(Object | null)[]} menuOptions - The list of menu options displayed when the arrow button is active.
+ * If null, no menu options will be shown.
+ */
+export interface DirectionalArrow {
+    direction: string | 'top' | 'right' | 'down';
+    menuOptions: {
+        label: string;
+        value: string | string[];
+        icon: string;
+        disable?: boolean;
+    }[];
+}
+/**
+ * Props for the Add Resource Button component.
+ *
+ * @property {string} [id] - An optional unique identifier for the Add Resource Button.
+ * @property {('primary' | 'secondary')} [variant] - Optional button style variant.
+ * @property {DirectionalArrow[]} directionalArrow - An array of directional arrows, each specifying the direction and associated menu options. Default values will be provided if not passed.
+ * @property {number} [zIndex] - An optional z-index value for positioning, defaults to 99.
+ */
+export interface AddResourceButtonProps {
+    id?: string;
+    variant?: 'primary' | 'secondary';
+    directionalArrow: {
+        /**
+         * direction option: 'top' | 'right' | 'down'
+         */
+        direction: string;
+        menuOptions: {
+            label: string;
+            value: string | string[];
+            icon: string;
+            disable?: boolean;
+        }[];
+    }[];
+    zIndex?: number;
+}
+/**
+ * Props for individual directional arrow buttons.
+ *
+ * @property {('top' | 'right' | 'down')} direction - The direction of the arrow button (top, right, or down).
+ * @property {(Object | any)} menuOptions - The list of menu options or a generic value for dynamic content.
+ * @property {() => void} onArrowClick - Callback function triggered when the arrow button is clicked.
+ * @property {boolean} isActive - Specifies if the button is in an active state (highlighted when selected).
+ */
+export interface DirectionalArrowButtonProps {
+    direction: string | 'top' | 'right' | 'down';
+    menuOptions: {
+        label: string;
+        value: string | string[];
+        icon: string;
+        disable?: boolean;
+    }[];
+    onArrowClick: () => void;
+    isActive: boolean;
+    variant?: 'primary' | 'secondary';
+}
+/**
+ * Utility function to validate an array of directional arrows.
+ * Ensures there is at least one valid arrow in the array.
+ * If the array is empty, it returns a default arrow object.
+ */
+export declare const validateArrows: (arrows: DirectionalArrow[]) => DirectionalArrow[];

package/lib/components/AllProjectsDropdown/AllProjectsDropdown.d.ts

@@ -0,0 +1,4 @@
+import './AllProjectsDropdown.scss';
+import { AllProjectsDropdownProps } from './types';
+declare const AllProjectsDropdown: ({ onClick, options, selectedOption, }: AllProjectsDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export default AllProjectsDropdown;

package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import AllProjectsDropdown from './AllProjectsDropdown';
+declare const meta: Meta<typeof AllProjectsDropdown>;
+type Story = StoryObj<typeof AllProjectsDropdown>;
+export declare const Default: Story;
+export declare const PrimaryIconButton: Story;
+export default meta;

package/lib/components/AllProjectsDropdown/index.d.ts

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

package/lib/components/AllProjectsDropdown/types.d.ts

@@ -0,0 +1,10 @@
+export interface optionsType {
+    label: string;
+    value: string;
+    iconName: string;
+}
+export interface AllProjectsDropdownProps {
+    options: optionsType[];
+    onClick: (option: optionsType) => void;
+    selectedOption: optionsType;
+}

package/lib/components/AppHeader/AppHeader.d.ts

@@ -0,0 +1,4 @@
+import { AppHeaderProps } from './types';
+import './AppHeader.scss';
+declare const AppHeader: React.FC<AppHeaderProps>;
+export default AppHeader;

package/lib/components/AppHeader/AppHeader.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import AppHeader from './AppHeader';
+declare const meta: Meta<typeof AppHeader>;
+type Story = StoryObj<typeof AppHeader>;
+export declare const SampleAppHeader: Story;
+export declare const Controlled: Story;
+export default meta;

package/lib/components/AppHeader/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./AppHeader";

package/lib/components/AppHeader/types.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+export interface AppHeaderProps {
+    logoIconName: string;
+    leftContent?: ReactNode;
+    rightContent?: ReactNode;
+    projectsList?: string[];
+    appHeaderMenuItems: appHeaderMenuItemProps[];
+    appHeaderHiddenMenuItems?: string[];
+    selectedMenu: string;
+    selectedSubMenu?: string;
+    selectedQuickMenu?: string;
+    onMenuClick?: (text: any) => void;
+    onSubMenuClick?: (text: any) => void;
+    onQuickMenuClick?: (text: any) => void;
+}
+export interface appHeaderMenuItemProps {
+    menuLabel: string;
+    menuName?: string;
+    subMenuItems?: appHeaderSubMenuItemProps[];
+}
+export interface appHeaderSubMenuItemProps {
+    subMenuLabel: string;
+    subMenuName?: string;
+    quickMenuItems?: appHeaderQuickMenuItemProps[];
+}
+export interface appHeaderQuickMenuItemProps {
+    quickMenuLabel?: string;
+    quickMenuName?: string;
+    quickMenuIconName: string;
+}

package/lib/components/AttachmentButton/AttachmentButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { AttachmentUploaderProps } from './types';
+import './AttachmentButton.scss';
+declare const AttachmentButton: React.FC<AttachmentUploaderProps>;
+export default AttachmentButton;

package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import AttachmentButton from './AttachmentButton';
+declare const meta: Meta<typeof AttachmentButton>;
+type Story = StoryObj<typeof AttachmentButton>;
+export declare const Default: Story;
+export declare const SmallFileLimit: Story;
+export declare const LargeFileLimit: Story;
+export declare const DisabledUploader: Story;
+export default meta;

package/lib/components/AttachmentButton/index.d.ts

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

package/lib/components/AttachmentButton/types.d.ts

@@ -0,0 +1,8 @@
+export interface AttachmentUploaderProps {
+    label: string;
+    selectedFiles: File[];
+    onFilesChange: (files: File[]) => void;
+    disabled?: boolean;
+    maxFileSizeMB?: number;
+    maxFiles?: number;
+}

package/lib/components/Button/Button.d.ts

@@ -0,0 +1,5 @@
+import './Button.scss';
+import '../../assets/styles/_colors.scss';
+import { ButtonProps } from './types';
+declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

package/lib/components/Button/Button.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from './Button';
+declare const meta: Meta<typeof Button>;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const Delete: Story;
+export declare const Warning: Story;
+export declare const PrimaryWithIcon: Story;
+export declare const SecondaryWithIcon: Story;
+export declare const TertiaryWithIcon: Story;
+export default meta;

package/lib/components/Button/index.d.ts

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

package/lib/components/Button/types.d.ts

@@ -0,0 +1,61 @@
+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/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DashboardDonutChartProps } from './types';
+import './DashBoardDonutChart.scss';
+declare const DashboardDonutChart: React.FC<DashboardDonutChartProps>;
+export default DashboardDonutChart;

package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import DashboardDonutChart from './DashboardDonutChart';
+declare const meta: Meta<typeof DashboardDonutChart>;
+export default meta;
+type Story = StoryObj<typeof DashboardDonutChart>;
+export declare const Default: Story;
+export declare const MemoryLegend: Story;

package/lib/components/Charts/DashboardDonutChart/index.d.ts

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

package/lib/components/Charts/DashboardDonutChart/types.d.ts

@@ -0,0 +1,21 @@
+export type Status = 'passed' | 'failed' | 'warning' | 'skipped' | 'Passed' | 'Failed' | 'Skipped' | 'Warning';
+export type StatusValue = {
+    status: Status;
+    value: number;
+};
+export type ChartItem = {
+    key: string;
+    value: number;
+    color?: string;
+};
+export type LegendType = 'numberLegend' | 'pillLegend' | 'memoryLegend' | 'tableLegend';
+export type DashboardDonutChartProps = {
+    radius: number;
+    lineWidth: number;
+    statusValues: ChartItem[];
+    legendDetailsType: string;
+    isLegendDetails: boolean;
+    gapAngle?: number;
+    legendType: LegendType;
+    showOnlyLabel: boolean;
+};

package/lib/components/Charts/DonutChart/DonutChart.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './DonutChart.scss';
+import { DonutChartProps } from './type';
+declare const DonutChart: React.FC<DonutChartProps>;
+export default DonutChart;

package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import DonutChart from './DonutChart';
+declare const meta: Meta<typeof DonutChart>;
+export default meta;
+type Story = StoryObj<typeof DonutChart>;
+export declare const Default: Story;

package/lib/components/Charts/DonutChart/index.d.ts

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

package/lib/components/Charts/DonutChart/type.d.ts

@@ -0,0 +1,13 @@
+export type Status = 'passed' | 'failed' | 'warning' | 'skipped' | 'Passed' | 'Failed' | 'Skipped' | 'Warning';
+export type StatusValue = {
+    status: Status;
+    value: number;
+};
+export type DonutChartProps = {
+    radius: number;
+    lineWidth: number;
+    statusValues: StatusValue[];
+    legendDetailsType: string;
+    isLegendDetails: boolean;
+    gapAngle?: number;
+};