pixel-react 1.8.0 → 1.8.1

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

@@ -25,11 +25,75 @@ export interface AddVariableProps {
      */
     onCreateVariableClick?: () => void;
     /**
-     * Value of the input field
+     * Width of the dropdown
+     */
+    dropdownWidth?: string;
+    /**
+     * Name | name of the input field
+     */
+    name: string;
+    /**
+     * value | input field value
      */
     value: string;
     /**
-     * Width of the dropdown
+     * variants to set color/style of the input field
      */
-    dropdownWidth?: string;
+    variant?: 'default' | 'primary';
+    /**
+     * type to set color/style of the input field
+     */
+    type: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
+    /**
+     * error | If true, error message will be displayed
+     */
+    error?: boolean;
+    /**
+     * helperText | error, success, warning message to be shown
+     */
+    helperText?: string;
+    /**
+     * to disable the input field
+     */
+    disabled?: boolean;
+    /**
+     * if true, input field will be mandatory
+     */
+    required?: boolean;
+    /**
+     * classnames to style the input field
+     */
+    className?: string;
+    /**
+     * noBorder prop 'true' removes border of input
+     */
+    noBorder?: boolean;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * id to select the input field uniquely
+     */
+    id?: string;
+    /**
+     * if on, suggestion popup will be displayed
+     */
+    autoComplete?: 'on' | 'off';
+    /**
+     *  minimum and maximum values for the number type input field and their functions
+     */
+    minValue?: number;
+    maxValue?: number;
+    /**
+     * background of the input field prop
+     */
+    transparentBackground?: boolean;
+    /**
+     * size for the input field
+     */
+    size?: 'small' | 'medium';
+    /**
+     * isLabelRequired for the input field without label,showing placeholder
+     */
+    isLabelRequired?: boolean;
 }

package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts

@@ -1,5 +1,4 @@
 import { ConditionalDropdownProps } from './types';
 import './ConditionalDropdown.scss';
-import React from 'react';
-declare const ConditionalDropdown: React.FC<ConditionalDropdownProps>;
+declare const ConditionalDropdown: import("react").ForwardRefExoticComponent<ConditionalDropdownProps & import("react").RefAttributes<HTMLInputElement>>;
 export default ConditionalDropdown;

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

@@ -35,7 +35,7 @@ export interface ConditionalDropdownProps {
      * @param value
      * @returns
      */
-    onChange?: (value: string) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Function to handle create variable icon click
      */
@@ -113,8 +113,8 @@ export interface ConditionalDropdownProps {
      */
     isLabelRequired?: boolean;
     /**
-    * If true, dropdown opens when '#' is entered at the first position.
-    */
+     * If true, dropdown opens when '#' is entered at the first position.
+     */
     isHash?: boolean;
     /**
      * Options for the dropdown when `isHash` is true.

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

@@ -16,7 +16,7 @@ export interface LabelEditTextFieldTypes {
     /** Label text displayed above the input field. */
     label?: string;
     /** Initial text displayed in the input field. */
-    text: string;
+    text?: string;
     /** Text to be highlighted within the displayed text, if provided. */
     highlightText?: string;
     /** Custom error message to be displayed, if applicable. */

package/lib/components/ScriptSwitchButton/ScriptSwitchButton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './ScriptSwitchButton.scss';
+interface ScriptSwitchButtonProps {
+    handleClick: (selected: string) => void;
+    selected: string;
+    tabList: Array<'Automation' | 'Manual'>;
+}
+declare const ScriptSwitchButton: React.FC<ScriptSwitchButtonProps>;
+export default ScriptSwitchButton;

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

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

package/lib/components/TableTree/Components/TableCell.d.ts

@@ -1,4 +1,4 @@
 import { TableCellProps } from '../types';
 import React from 'react';
-declare const TableCell: React.MemoExoticComponent<({ col, node, level, selected, select, onCheckBoxChange, onToggleExpand, lines, isLast, }: TableCellProps) => import("react/jsx-runtime").JSX.Element>;
+declare const TableCell: React.MemoExoticComponent<({ col, node, level, selected, select, onCheckBoxChange, onToggleExpand, parentSiblings, isLast, }: TableCellProps) => import("react/jsx-runtime").JSX.Element>;
 export default TableCell;

package/lib/components/TableTree/Components/TableRow.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TableRowProps } from '../types';
-declare const TableRow: React.MemoExoticComponent<({ node, level, columnsData, selected, select, onRowClick, onToggleExpand, onCheckBoxChange, lines, isLast, }: TableRowProps) => import("react/jsx-runtime").JSX.Element>;
+declare const TableRow: React.MemoExoticComponent<({ node, level, columnsData, selected, select, onRowClick, onToggleExpand, onCheckBoxChange, parentSiblings, isLast, }: TableRowProps) => import("react/jsx-runtime").JSX.Element>;
 export default TableRow;

package/lib/components/TableTree/data.d.ts

@@ -28,8 +28,9 @@ declare const data: ({
         parentName?: undefined;
     };
     level: number;
-    lines: number;
     isLast: boolean;
+    parentSiblings: boolean[];
+    lines?: undefined;
 } | {
     node: {
         subModuleCount: number;
@@ -59,8 +60,9 @@ declare const data: ({
         id: string;
         parentName?: undefined;
     };
-    level: number;
+    parentSiblings: boolean[];
     lines: number;
+    level?: undefined;
     isLast?: undefined;
 } | {
     node: {
@@ -92,8 +94,9 @@ declare const data: ({
         parentName?: undefined;
     };
     level: number;
-    lines: number;
-    isLast: boolean;
+    parentSiblings: boolean[];
+    isLast?: undefined;
+    lines?: undefined;
 } | {
     node: {
         ver: number;
@@ -124,8 +127,9 @@ declare const data: ({
         id: string;
     };
     level: number;
-    lines: number;
+    parentSiblings: boolean[];
     isLast?: undefined;
+    lines?: undefined;
 } | {
     node: {
         ver: number;
@@ -156,8 +160,9 @@ declare const data: ({
         folder?: undefined;
     };
     level: number;
-    lines: number;
+    parentSiblings: boolean[];
     isLast?: undefined;
+    lines?: undefined;
 } | {
     node: {
         ver: number;
@@ -188,8 +193,9 @@ declare const data: ({
         folder?: undefined;
     };
     level: number;
-    lines: number;
+    parentSiblings: boolean[];
     isLast: boolean;
+    lines?: undefined;
 } | {
     node: {
         ver: number;
@@ -220,7 +226,41 @@ declare const data: ({
         id: string;
     };
     level: number;
-    lines: number;
+    parentSiblings: boolean[];
+    isLast: boolean;
+    lines?: undefined;
+} | {
+    node: {
+        subModuleCount: number;
+        title: string;
+        scriptCount: number;
+        path: string;
+        expanded: boolean;
+        modifiedOn: string;
+        children: boolean;
+        lastExecutionOrder: number;
+        imported: boolean;
+        modifiedBy: string;
+        moduleCountWithScript: number;
+        state: string;
+        key: string;
+        ver: number;
+        hierarchy: number;
+        assigneeCount: number;
+        searchKey: string;
+        modifiedByUname: string;
+        executionOrder: number;
+        createdByUname: string;
+        folder: boolean;
+        moduleLevelScriptCount: number;
+        name: string;
+        parentId: string;
+        id: string;
+        parentName?: undefined;
+    };
+    level: number;
+    parentSiblings: boolean[];
     isLast: boolean;
+    lines?: undefined;
 })[];
 export default data;

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

@@ -14,7 +14,7 @@ export interface TableCellProps {
     select: string | null;
     onCheckBoxChange: (type: string, node: any) => void;
     onToggleExpand: (node: any) => void;
-    lines: number;
+    parentSiblings: boolean[];
     isLast: boolean | undefined;
 }
 export interface TableHeadProps {
@@ -38,7 +38,7 @@ export interface TableRowProps {
     onRowClick: (e: any, node: any) => void;
     onToggleExpand: (node: any) => void;
     onCheckBoxChange: (type: string, node: any) => void;
-    lines: number;
+    parentSiblings: boolean[];
     isLast: boolean | undefined;
 }
 export interface Column {