pixel-react 1.1.1 → 1.1.2

package/src/components/NLPInput/type.tsx

@@ -0,0 +1,124 @@
+import { ReactNode } from 'react';
+
+export interface SelectProps {
+  /*
+   * Label for the NLP NLP select dropdown
+   */
+  label?: string;
+
+  /*
+   * If true, the NLP select dropdown will have a label
+   */
+  showLabel?: boolean;
+
+  /*
+   * Options for the NLP select dropdown
+   */
+  optionsList: any[];
+
+  /*
+   * Selected option for the NLP select dropdown
+   */
+  selectedOption?: Option;
+
+  /*
+   * onChange callback function for handling selected option changes
+   */
+  onChange: (option: Option) => void;
+
+  /*
+   * If error is true, this message will be displayed
+   */
+  errorMsg?: string;
+
+  /*
+   * provide the className for the NLP select dropdown
+   */
+  className?: string;
+
+  /*
+   *  Providing the z-index for dropdown and select
+   */
+  optionZIndex?: number;
+
+  /*
+   * Provide disable prop for the disabling the select component
+   */
+  disabled?: boolean;
+
+  /*
+   * Provide disable prop for the providing border radius at right side
+   */
+  borderRadius?: boolean;
+
+  /*
+   * Provide boolean value to show border or not
+   */
+  showBorder?: boolean;
+
+  /*
+   * Provide the boolean value if the select component is required or not
+   */
+  required?: boolean;
+}
+
+export interface DrowdownPosition {
+  positionX: number;
+  positionY: number;
+  width: number;
+  fromBottom: number;
+}
+
+export interface SelectState {
+  isInputFocused: boolean;
+  iconColor: string;
+  isIconClick: boolean;
+  showOptions: boolean;
+  options: any[];
+  option: string;
+  dropdownPosition: DrowdownPosition;
+}
+
+export type SelectAction =
+  | { type: 'FOCUS_INPUT' }
+  | {
+      type: 'BLUR_INPUT';
+      payload: {
+        optionsList: Option[];
+        option: Option['projectId'];
+      };
+    }
+  | { type: 'MOUSE_ENTER' }
+  | { type: 'MOUSE_LEAVE' }
+  | {
+      type: 'UPDATE_DROPDOWN_POSITION';
+      payload: {
+        positionX: number;
+        positionY: number;
+        width: number;
+        fromBottom: number;
+      };
+    }
+  | {
+      type: 'UPDATE_OPTION';
+      payload: string;
+    }
+  | {
+      type: 'UPDATE_OPTION_LIST';
+      payload: any[];
+    }
+  | {
+      type: 'SHOW_ERROR';
+      payload: {
+        optionsList: any[];
+        option: Option['projectId'];
+      };
+    };
+
+export interface Option {
+    displayName: string | ReactNode;
+    projectId: string;
+    nlpType: string;
+    platform:string;
+  disabled?: boolean;
+}

package/src/components/Table/Table.scss

@@ -99,3 +99,8 @@
   justify-content: center;
   align-items: center;
 }
+
+tbody tr.disabled-row {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/components/Table/Table.stories.tsx

@@ -26,6 +26,7 @@ const sampleData = [
       type: 'Web',
       status: 'Open',
       checked: false,
+      disabled:true
     },
   },
   {
@@ -36,6 +37,7 @@ const sampleData = [
       type: 'Mobile',
       status: 'Close',
       checked: true,
+      disabled:true
     },
   },
   {
@@ -46,6 +48,7 @@ const sampleData = [
       type: 'Web',
       status: 'Close',
       checked: true,
+      disabled:true
     },
   },
   {
@@ -56,6 +59,7 @@ const sampleData = [
       type: 'Web & Mobile',
       status: 'Open',
       checked: false,
+      disabled:false
     },
   },
   {
@@ -66,6 +70,7 @@ const sampleData = [
       type: 'Web',
       status: 'Open',
       checked: false,
+      disabled:true
     },
   },
   {
@@ -76,6 +81,7 @@ const sampleData = [
       type: 'Mobile',
       status: 'Close',
       checked: true,
+      disabled:true
     },
   },
   {
@@ -86,6 +92,7 @@ const sampleData = [
       type: 'Web',
       status: 'Close',
       checked: true,
+      disabled:true
     },
   },
   {
@@ -96,6 +103,7 @@ const sampleData = [
       type: 'Web & Mobile',
       status: 'Open',
       checked: false,
+      disabled:false
     },
   },
   {
@@ -106,6 +114,7 @@ const sampleData = [
       type: 'Web',
       status: 'Open',
       checked: false,
+      disabled:false
     },
   },
   {
@@ -116,6 +125,7 @@ const sampleData = [
       type: 'Mobile',
       status: 'Close',
       checked: true,
+      disabled:false
     },
   },
   {
@@ -126,6 +136,7 @@ const sampleData = [
       type: 'Web',
       status: 'Close',
       checked: true,
+      disabled:false
     },
   },
   {
@@ -136,6 +147,7 @@ const sampleData = [
       type: 'Web & Mobile',
       status: 'Open',
       checked: false,
+      disabled:false
     },
   },
 ];

package/src/components/Table/Table.tsx

@@ -2,8 +2,10 @@ import './Table.scss';
 // import Checkbox from '../Checkbox';
 import { isFunction } from '../../assets/utils/functionUtils';
 import classNames from 'classnames';
-import { ColumnsProps, DataProps, TableProps } from './Types';
+import { ColumnsProps, DataProps, TableProps ,SelectedItemProps} from './Types';
 import { prepareData } from '../../utils/TableCell/TableCell';
+import Checkbox from '../Checkbox';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 
 // import NoData from '../NoData/NoData';
 
@@ -11,13 +13,13 @@ const Table = ({
   data = [],
   columns = [],
   headerType,
-  // withCheckbox,
-  // onSelect,
-  // allSelected,
-  // partialSelected = false,
+  withCheckbox,
+  onSelect,
+  allSelected,
+  partialSelected = false,
   withFixedHeader = true,
   borderWithRadius = false,
-  // headerCheckboxDisabled = false,
+   headerCheckboxDisabled = false,
   // noDataContent,
   // noDataImage,
   // noDataImageSize,
@@ -30,7 +32,13 @@ const Table = ({
       onClick(accessor, row);
     }
   };
-  if (!(data.length >= 0)) return null;
+  const onSelectClick = (e: object, item: SelectedItemProps) => {
+    if (onSelect) {
+      onSelect(e, item);
+    }
+  };
+  if (checkEmpty(data)) return null;
+  
   return (
     <div
       style={{ height: height }}
@@ -45,16 +53,16 @@ const Table = ({
             'ff-fixed-header': withFixedHeader,
           })}
         >
-          <tr>
+          <tr >
             {/* columns.map((column, index) */}
-            {columns.map((column) => (
+            {columns.map((column, index) => (
               <th
                 className={headerType && `${headerType}-bg`}
                 key={column.header}
                 style={{ width: column?.width }}
               >
                 <div>
-                  {/* {index === 0 && withCheckbox && (
+                   {index === 0 && withCheckbox && (
                     <span className="ff-table-checkbox">
                       <Checkbox
                         onChange={(e) => {
@@ -67,7 +75,7 @@ const Table = ({
                         disabled={headerCheckboxDisabled}
                       />
                     </span>
-                  )} */}
+                  )} 
 
                   {column.header}
                 </div>
@@ -78,7 +86,10 @@ const Table = ({
         <tbody>
           {data.length > 0 &&
             data.map((row: any, index: number) => (
-              <tr key={row.id || index}>
+              <tr key={row.id || index} className={classNames(className,{
+                'disabled-row': row.disabled
+              })} 
+              >                
                 {columns.map((column, i) => {
                   return (
                     <td
@@ -89,7 +100,7 @@ const Table = ({
                       })}
                     >
                       <div>
-                        {/* {i === 0 && withCheckbox && (
+                        {i === 0 && withCheckbox && (
                           <span className="ff-table-checkbox">
                             <Checkbox
                               onChange={(e) => {
@@ -99,7 +110,7 @@ const Table = ({
                               disabled={!!row.disabled}
                             />
                           </span>
-                        )} */}
+                        )}
                         {prepareData(row, column)}
                       </div>
                     </td>

package/src/components/TextArea/Textarea.scss

@@ -14,7 +14,7 @@
   }
   .ff-textarea {
     padding: 8px;
-    min-width: 428px;
+    width: 100%;
     min-height: 80px;
     gap: 0px;
     border: 1px solid var(--default-icon-color);

package/src/index.ts

@@ -39,8 +39,11 @@ import IconButton from './components/IconButton';
 import Modal from './components/Modal';
 import DragAndDrop from './components/DragAndDrop/DragAndDrop';
 import AllProjectsDropdown from './components/AllProjectsDropdown';
+import PieChart from './components/Charts/PieChart';
 import AppHeader from './components/AppHeader';
+import DashboardDonutChart from './components/Charts/DashboardDonutChart'
 import Recaptcha from './components/FF_Captcha/Recaptcha';
+import NLPInput from './components/NLPInput';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -91,12 +94,14 @@ export {
   StatusButton,
   IconButton,
   Modal,
+  PieChart,
+  DashboardDonutChart,
 
   DragAndDrop,
   AllProjectsDropdown,
   AppHeader,
   Recaptcha,
-
+  NLPInput,
   // utils exports
   checkEmpty,
   getExtension,

package/src/utils/getEncryptedData/getEncryptedData.stories.tsx

@@ -0,0 +1,55 @@
+// getEncryptData.stories.tsx
+import { useState } from 'react';
+import getEncryptData from './getEncryptedData';
+
+export default {
+  title: 'Utils/getEncryptedData',
+  component: getEncryptData,
+};
+
+export const InteractivePlayground = () => {
+  const [data, setData] = useState<string>('Sensitive information');
+  const [publicKey, setPublicKey] = useState<string>(`Add your public key`);
+  const [encryptedData, setEncryptedData] = useState<string | null>(null);
+
+  const handleEncrypt = () => {
+    const result = getEncryptData(data, publicKey);
+    setEncryptedData(result.toString());
+  };
+
+  return (
+    <div>
+      <h1>Interactive Playground for getEncryptData</h1>
+
+      <div>
+        <label htmlFor="data">Data to Encrypt:</label>
+        <input
+          type="text"
+          id="data"
+          value={data}
+          onChange={(e) => setData(e.target.value)}
+        />
+      </div>
+
+      <div>
+        <label htmlFor="publicKey">Public Key:</label>
+        <textarea
+          id="publicKey"
+          value={publicKey}
+          onChange={(e) => setPublicKey(e.target.value)}
+          rows={5}
+          cols={50}
+        />
+      </div>
+
+      <button onClick={handleEncrypt}>Encrypt Data</button>
+
+      <h2>Encrypted Data:</h2>
+      {encryptedData ? (
+        <pre>{encryptedData}</pre>
+      ) : (
+        <p>No encrypted data yet. Click "Encrypt Data" to generate it.</p>
+      )}
+    </div>
+  );
+};

package/src/utils/getEncryptedData/getEncryptedData.ts

@@ -0,0 +1,10 @@
+import JSEncrypt from 'jsencrypt';
+
+const getEncryptedData = (data: string, publicKey: string) => {
+  const encrypt = new JSEncrypt();
+  encrypt.setPublicKey(publicKey);
+  const enData = encrypt.encrypt(data);
+  return enData;
+};
+
+export default getEncryptedData;

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

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

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

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

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

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

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

@@ -1,4 +0,0 @@
-export interface AddButtonProps {
-    name: string;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}