pixel-react 1.1.0 → 1.1.2

package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx

@@ -0,0 +1,180 @@
+import { ReactNode, useContext, useRef, useState } from 'react';
+import {
+  NlpDropDownListProps,
+  nlpDropdownDefaultCSSData,
+} from './NlpDropDownType';
+import useClickOutside from '../../../../hooks/useClickOutside';
+import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
+import './NlpDropdown.scss';
+import Typography from '../../../Typography';
+import ffid from '../../../../utils/ffID/ffid';
+import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
+import classNames from 'classnames';
+
+type OptionType = {
+  label: ReactNode;
+  value: string;
+  displayName?: string;
+  description?: string;
+  nlpType?: string;
+  path?: string;
+  stepInputs?: { type?: string; name?: string }[];
+  returnType?: string;
+};
+
+const NlpDropdown = ({
+  onSelectBlur,
+  onSelectOptionSelector,
+  dropdownPosition,
+  options = [],
+  optionZIndex = 100,
+  inputRef,
+}: NlpDropDownListProps) => {
+  //   const [nlpData, setNlpData] = useState<OptionType | null>(null); need to add setNlpData
+  const [nlpData] = useState<OptionType | null>(null);
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
+  const optionsWrapperRef = useRef<HTMLDivElement>(null);
+  useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef]);
+
+  const { positionX, positionY, width, fromBottom } = dropdownPosition;
+  const { margin, optionHeight, selectInputHeight, dropDownWrapperPadding } =
+    nlpDropdownDefaultCSSData;
+
+  const updateDropdownPosition = () => {
+    let dropdownContainerHeight;
+
+    if (checkEmpty(options)) {
+      dropdownContainerHeight = optionHeight + 2 * dropDownWrapperPadding;
+    } else if (options.length > 5) {
+      dropdownContainerHeight = 5 * optionHeight + 2 * dropDownWrapperPadding;
+    } else {
+      dropdownContainerHeight =
+        options.length * optionHeight + 2 * dropDownWrapperPadding;
+    }
+
+    if (fromBottom > dropdownContainerHeight + margin) {
+      return {
+        left: positionX,
+        top: positionY,
+        width: width,
+        zIndex: optionZIndex,
+      };
+    }
+    return {
+      zIndex: optionZIndex,
+      left: positionX,
+      width: width,
+      top: positionY - selectInputHeight - dropdownContainerHeight - margin,
+    };
+  };
+
+  return (
+    <div className="ff-nlp-dropdown-wrapper">
+      <div
+        ref={optionsWrapperRef}
+        style={updateDropdownPosition()}
+        className={classNames('ff-nlp-options-wrapper', currentTheme)}
+      >
+        <div className="ff-nlp-options-wrapper1">
+          {!checkEmpty(options) ? (
+            options.map((option) => (
+              //   <div key={ffid()} onMouseEnter={() => setNlpData(option)}> need to add onMouseEnter
+              <div key={ffid()}>
+                <Typography
+                  as="div"
+                  lineHeight="30px"
+                  className={classNames('ff-nlp-option', currentTheme)}
+                  color="var(--ff-nlp-text-color)"
+                  onClick={() => onSelectOptionSelector(option)}
+                >
+                  <span className="mr-2 fontPoppinsRegularMd">
+                    {option?.nlpType === 'NLP' ? (
+                      <b className="nlp-type-NLP">NLP</b>
+                    ) : option?.nlpType === 'STEP_GROUP' ? (
+                      <b className="nlp-type-step-group">SG</b>
+                    ) : option?.nlpType === 'PROGRAM_ELEMENTS' ? (
+                      <b className="nlp-type-program-elements">PE</b>
+                    ) : (
+                      '--'
+                    )}
+                  </span>
+                  <span className="mr-2 fontPoppinsRegularMd">
+                    {option?.platform === 'web' ? (
+                      <b className="platform-web">Web</b>
+                    ) : option?.platform === 'android' ? (
+                      <b className="platform-android">Android</b>
+                    ) : option?.platform === 'ios' ? (
+                      <b className="platform-ios">iOS</b>
+                    ) : option?.platform === 'Generic' ? (
+                      <b className="platform-ios">Generic</b>
+                    ) : (
+                      '--'
+                    )}
+                  </span>
+                  {option?.displayName}
+                </Typography>
+              </div>
+            ))
+          ) : (
+            <Typography
+              textAlign="center"
+              lineHeight="32px"
+              as="p"
+              color="var(--ff-nlp-text-color)"
+              className="ff-nlp-no-option"
+            >
+              No Results Found
+            </Typography>
+          )}
+          <button>+ Web Services</button>
+        </div>
+        <div className="ff-nlp-data">
+          <div>
+            <div className="nlp-details-header mt-4">Name:</div>
+            <div className="nlp-details nlpdiv-check">
+              {nlpData?.displayName || '--'}
+            </div>
+            <div className="nlp-details-header mt-4">Description:</div>
+            <div className="nlp-details nlpdiv-check">
+              {nlpData?.description || '--'}
+            </div>
+            {nlpData?.nlpType === 'STEP_GROUP' && (
+              <>
+                <div className="nlp-details-header mt-4">Path:</div>
+                <div className="nlp-details nlpdiv-check">
+                  {nlpData?.path ? nlpData?.path.slice(6) : '--'}
+                </div>
+              </>
+            )}
+            <div className="nlp-details-header mt-4">Inputs:</div>
+            {nlpData?.stepInputs?.length ? (
+              nlpData.stepInputs.map((stepInput, index) => {
+                const stepInputType = stepInput.type
+                  ? stepInput.type.split('.').pop()
+                  : '--';
+                return (
+                  <div key={index}>
+                    <div className="nlp-details-header">Input{index + 1}:</div>
+                    <div className="nlp-details">type: {stepInputType}</div>
+                    <div className="nlp-details mb-4">
+                      name: {stepInput.name || '--'}
+                    </div>
+                  </div>
+                );
+              })
+            ) : (
+              <div className="nlp-details mb-4">--</div>
+            )}
+            <div className="nlp-details-header">Output:</div>
+            <div className="nlp-details mb-4">
+              {nlpData?.returnType || '--'}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NlpDropdown;

package/src/components/NLPInput/index.ts

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

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,7 +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';
@@ -90,11 +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;
-}