pixel-priya 0.0.1

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-head.html

@@ -0,0 +1,3 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

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/index.scss

@@ -0,0 +1,5 @@
+/* global.css or component CSS */
+body {
+    font-family: 'Poppins', sans-serif;
+  }
+  

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/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/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,11 @@
+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;
+export declare const UNIT_MULTIPLIERS: Record<string, number>;
+export declare function normalizeStorageValue(value: string): {
+    normalizedValue: number;
+    unit: string;
+    value: number;
+};
+export declare function formatMemoryValue(valueInBytes: number): string;

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, accordionStateIconName, AccordionStateIconWidth, AccordionStateIconHeight, isExpand, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export default Accordion;

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

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

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

@@ -0,0 +1,43 @@
+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;
+    /**
+     * Icon name for the Accordion state like expand and collapse
+     */
+    accordionStateIconName?: string;
+    /**
+       * Accordion collapse and expand Icon width
+       */
+    AccordionStateIconWidth: number;
+    /**
+     * Accordion collapse and expand Icon height
+     */
+    AccordionStateIconHeight: number;
+    /**
+     * Optional props for initial state of Accordion
+     */
+    isExpand?: boolean;
+}

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/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: '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, onMenuClick, options, selectedOption, selected, }: AllProjectsDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export default AllProjectsDropdown;

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

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

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

@@ -0,0 +1,14 @@
+export interface optionsType {
+    label: string;
+    value: string;
+    iconName: string;
+    platform?: string;
+    appType?: string;
+}
+export interface AllProjectsDropdownProps {
+    options: optionsType[];
+    onMenuClick?: () => void;
+    onClick: (option: optionsType) => void;
+    selectedOption: optionsType;
+    selected?: boolean;
+}

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

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

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

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

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

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import { optionsType } from '../AllProjectsDropdown/types';
+export interface AppHeaderProps {
+    width?: string;
+    logoIconName: string;
+    leftContent?: ReactNode;
+    rightContent?: ReactNode;
+    projectsList?: optionsType[];
+    appHeaderMenuItems: appHeaderMenuItemProps[];
+    appHeaderHiddenMenuItems?: appHeaderHiddenMenuItemProps[];
+    selectedMenu: string;
+    selectedSubMenu?: string;
+    selectedQuickMenu?: string;
+    selectedProject?: optionsType;
+    onMenuClick?: (text: any) => void;
+    onSubMenuClick?: (text: any) => void;
+    onQuickMenuClick?: (text: any) => void;
+    onProjectMenuClick?: (text: any) => void;
+    onProjectDropdownLabelClick?: () => void;
+    onMoreMenuOptionClick?: (text: any) => void;
+}
+export interface appHeaderMenuItemProps {
+    label: string;
+    path?: string;
+    disable?: boolean;
+    disableText?: string;
+    hide?: boolean;
+    subMenuItems?: appHeaderSubMenuItemProps[];
+}
+export interface appHeaderSubMenuItemProps {
+    label: string;
+    path?: string;
+    disable?: boolean;
+    disableText?: string;
+    hide?: boolean;
+    quickMenuItems?: appHeaderQuickMenuItemProps[];
+    hiddenMenuItems?: appHeaderHiddenMenuItemProps[];
+}
+export interface appHeaderQuickMenuItemProps {
+    label?: string;
+    path?: string;
+    iconName: string;
+    disable?: boolean;
+    disableText?: string;
+    hide?: boolean;
+}
+export interface appHeaderHiddenMenuItemProps {
+    label: string;
+    value: string | string[];
+    icon: string;
+    disable?: boolean;
+    disableText?: string;
+    hide?: boolean;
+}

package/lib/components/AttachImage/AttachImage.d.ts

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

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

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

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

@@ -0,0 +1,26 @@
+export interface AttachImageProps {
+    /**
+     * The image source to display.
+     */
+    imageSrc: string;
+    /**
+     * Function triggered when the expand icon is clicked.
+     */
+    onExpandClick: () => void;
+    /**
+     * Function triggered when the delete icon is clicked.
+     */
+    onDeleteClick: () => void;
+    /**
+     * Function triggered when the download icon is clicked.
+     */
+    onDownloadClick: () => void;
+    /**
+     * Custom height for the component.
+     */
+    height?: string;
+    /**
+     * Custom width for the component.
+     */
+    width?: 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/index.d.ts

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

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

@@ -0,0 +1,13 @@
+export interface AttachmentUploaderProps {
+    label: string;
+    selectedFiles: File[];
+    onFilesChange: (files: File[]) => void;
+    disabled?: boolean;
+    maxFileSizeMB?: number;
+    maxFiles?: number;
+    buttonLabel?: string;
+    showSelectedFiles?: boolean;
+    buttonVariant?: 'primary' | 'secondary' | 'tertiary' | 'delete' | 'warning';
+    deleteButton: boolean;
+    addAttachmentButton: boolean;
+}

package/lib/components/Avatar/Avatar.d.ts

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

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

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

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

@@ -0,0 +1,34 @@
+export interface AvatarProps {
+    /**
+   * This property determines the size of the avatar. It can be set to 'small', 'medium', or 'large'.
+   */
+    variant?: 'small' | 'medium' | 'large';
+    /**
+     * This property allows you to customize the background color of the avatar.
+     */
+    backgroundColor?: string;
+    /**
+     * This property specifies the name of the icon to be displayed within the avatar.
+     */
+    iconName?: string;
+    /**
+     * This property allows you to customize the color of the icon within the avatar.
+     */
+    iconColor?: string;
+    /**
+     * This property allows you to set a custom size for the avatar, overriding the default size specified by the variant property.
+     */
+    customAvatarSize?: number;
+    /**
+     * This property allows you to set a custom size for the icon within the avatar.
+     */
+    customIconSize?: number;
+    /**
+    * This property specifies the label to display inside the avatar, used as an alternative to the icon.
+    */
+    label?: string;
+    /**
+     * This property allows you to customize the font size of the label inside the avatar.
+     */
+    labelFontSize?: string;
+}

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/index.d.ts

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

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

@@ -0,0 +1,82 @@
+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;
+}