pixel-react 1.6.5 → 1.6.6

package/.prettierrc.js

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

@@ -1,26 +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;
+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

@@ -1,3 +1,3 @@
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<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

@@ -1,26 +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;
+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

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

package/README.md

@@ -1,75 +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.
-
----
+---
+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

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

package/lib/components/AddVariables/AddVariables.d.ts

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

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

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

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

@@ -0,0 +1,35 @@
+export type dynamicObject = {
+    [key: string]: any;
+};
+export interface AddVariableProps {
+    /**
+     * Label for the field
+     */
+    label?: string;
+    /**
+     * List of variables
+     */
+    variableList?: dynamicObject[];
+    /**
+     * Place holder for the input field
+     */
+    placeholder?: string;
+    /**
+     * Function to handle input change
+     * @param value
+     * @returns
+     */
+    onChange: (value: string) => void;
+    /**
+     * Function to handle create variable icon click
+     */
+    onCreateVariableClick?: () => void;
+    /**
+     * Value of the input field
+     */
+    value: string;
+    /**
+     * Width of the dropdown
+     */
+    dropdownWidth?: string;
+}

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

@@ -27,4 +27,8 @@ export interface CheckboxProps {
      * For partially checked checkbox
      */
     partial?: boolean;
+    /**
+     * For variant color
+     */
+    variant?: 'passed' | 'failed' | 'warning' | 'skipped' | 'flaky';
 }

package/lib/components/Editor/constants.d.ts

@@ -1,3 +1,3 @@
 import { option, DyanamicObj } from './types';
 export declare const optionsList: option[];
-export declare const varibaleList: DyanamicObj[];
+export declare const variableList: DyanamicObj[];

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

@@ -46,10 +46,18 @@ export interface dropdownPositionType {
     left: number;
 }
 export interface VariableDropdownProps {
+    /**
+     * Position whether absoloute or relative
+     */
+    position: 'absolute' | 'relative';
+    /**
+     * Dropdown width
+     */
+    width: string;
     /**
      * List of variables
      */
-    optionsList: {}[];
+    optionsList: DyanamicObj[];
     /**
      * Function to handle click on variable
      */
@@ -57,7 +65,7 @@ export interface VariableDropdownProps {
     /**
      * Dropdown postion used for dropdown placement
      */
-    dropdownPosition: dropdownPositionType;
+    dropdownPosition?: dropdownPositionType;
 }
 export interface option {
     [key: string]: any;

package/lib/components/Input/Input.d.ts

@@ -1,4 +1,4 @@
 import './Input.scss';
 import { InputProps } from './types';
-declare const Input: ({ type, variant, name, label, disabled, required, placeholder, value, helperText, error, noBorder, className, onChange, onBlur, onFocus, autoComplete, minValue, maxValue, transparentBackground, size, isLabelRequired, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default Input;

package/lib/index.d.ts

@@ -610,7 +610,7 @@ interface InputProps {
     isLabelRequired?: boolean;
 }
 
-declare const Input: ({ type, variant, name, label, disabled, required, placeholder, value, helperText, error, noBorder, className, onChange, onBlur, onFocus, autoComplete, minValue, maxValue, transparentBackground, size, isLabelRequired, ...props }: InputProps) => react_jsx_runtime.JSX.Element;
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
 
 type Status$1 = {
     status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'passed' | 'failed' | 'warning' | 'skipped';
@@ -1629,6 +1629,10 @@ interface CheckboxProps {
      * For partially checked checkbox
      */
     partial?: boolean;
+    /**
+     * For variant color
+     */
+    variant?: 'passed' | 'failed' | 'warning' | 'skipped' | 'flaky';
 }
 
 declare const Checkbox: React__default.FC<CheckboxProps>;
@@ -2418,10 +2422,18 @@ interface dropdownPositionType {
     left: number;
 }
 interface VariableDropdownProps {
+    /**
+     * Position whether absoloute or relative
+     */
+    position: 'absolute' | 'relative';
+    /**
+     * Dropdown width
+     */
+    width: string;
     /**
      * List of variables
      */
-    optionsList: {}[];
+    optionsList: DyanamicObj[];
     /**
      * Function to handle click on variable
      */
@@ -2429,7 +2441,7 @@ interface VariableDropdownProps {
     /**
      * Dropdown postion used for dropdown placement
      */
-    dropdownPosition: dropdownPositionType;
+    dropdownPosition?: dropdownPositionType;
 }
 
 declare const VariableDropdown: FC<VariableDropdownProps>;
@@ -2705,4 +2717,44 @@ interface PopUpModalProps {
 
 declare const PopUpModal: FC<PopUpModalProps>;
 
-export { Accordion, AddButton as AddResourceButton, AllProjectsDropdown, AppHeader, AttachImage, AttachmentButton, Avatar, BarChart, Button, Checkbox, Chip, Col, ConnectingBranch, Container, CreateVariableSlider, DashboardDonutChart, CustomDatePicker as DatePicker, DonutChart, DownloadClient, DragAndDrop, Drawer, Dropzone, EditTextField, Editor, ExcelFile as Excel, ExpandableMenu, FieldSet, FileDropzone, FilePreview, ForwardedForms as Form, HighlightText, Icon, IconButton, IconRadialChart, IconRadioGroup, Input, InputWithDropdown, LabelEditTextField, LineChart, MachineInputField, MenuOption, MiniModal, Modal, ModuleChip, MultiRadialChart, MultiSelect, NlpInput as NLPInput, Paper, PieChart, PopUpModal, RadialChart, RadioButton, RadioGroup, Recaptcha, Row, Search, Select, SequentialConnectingBranch, StateDropdown, StatusButton, StatusCard, Table, TreeTable as TableTree, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toastify, Toggle, ToggleSwitch, Tooltip, Typography, VariableDropdown, VariableInput, checkEmpty, compareArrays, compareObjects, debounce, ffid, findAndInsert, getEncryptedData, getExtension, getExtensionWithPeriod, getSequentialPayload, saveFileFromBlob, throttle, toast, truncateText, useFileDropzone, useTheme };
+type dynamicObject = {
+    [key: string]: any;
+};
+interface AddVariableProps {
+    /**
+     * Label for the field
+     */
+    label?: string;
+    /**
+     * List of variables
+     */
+    variableList?: dynamicObject[];
+    /**
+     * Place holder for the input field
+     */
+    placeholder?: string;
+    /**
+     * Function to handle input change
+     * @param value
+     * @returns
+     */
+    onChange: (value: string) => void;
+    /**
+     * Function to handle create variable icon click
+     */
+    onCreateVariableClick?: () => void;
+    /**
+     * Value of the input field
+     */
+    value: string;
+    /**
+     * Width of the dropdown
+     */
+    dropdownWidth?: string;
+}
+
+declare const AddVariables: React__default.FC<AddVariableProps>;
+
+declare const hasDuplicateFile: (array: any[], property: string) => boolean;
+
+export { Accordion, AddButton as AddResourceButton, AddVariables, AllProjectsDropdown, AppHeader, AttachImage, AttachmentButton, Avatar, BarChart, Button, Checkbox, Chip, Col, ConnectingBranch, Container, CreateVariableSlider, DashboardDonutChart, CustomDatePicker as DatePicker, DonutChart, DownloadClient, DragAndDrop, Drawer, Dropzone, EditTextField, Editor, ExcelFile as Excel, ExpandableMenu, FieldSet, FileDropzone, FilePreview, ForwardedForms as Form, HighlightText, Icon, IconButton, IconRadialChart, IconRadioGroup, Input, InputWithDropdown, LabelEditTextField, LineChart, MachineInputField, MenuOption, MiniModal, Modal, ModuleChip, MultiRadialChart, MultiSelect, NlpInput as NLPInput, Paper, PieChart, PopUpModal, RadialChart, RadioButton, RadioGroup, Recaptcha, Row, Search, Select, SequentialConnectingBranch, StateDropdown, StatusButton, StatusCard, Table, TreeTable as TableTree, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toastify, Toggle, ToggleSwitch, Tooltip, Typography, VariableDropdown, VariableInput, checkEmpty, compareArrays, compareObjects, debounce, ffid, findAndInsert, getEncryptedData, getExtension, getExtensionWithPeriod, getSequentialPayload, hasDuplicateFile, saveFileFromBlob, throttle, toast, truncateText, useFileDropzone, useTheme };