pixel-react 1.1.1 → 1.1.3

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

@@ -0,0 +1,13 @@
+// Rounded corners
+.ff_rounded_lg {
+  border-radius: 8px;
+}
+
+.ff_paper_basic_style {
+  padding: 20px;
+  background-color: var(--ff-paper-dark-background-color);
+}
+.ff_paper_default_style {
+  padding: 20px;
+  background-color: var(--ff-paper-background-color);
+}

package/src/components/Paper/Paper.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Paper from './Paper';
+import { Children } from 'react';
+import Typography from '../Typography';
+import './Paper.scss';
+
+const meta: Meta<typeof Paper> = {
+  title: 'Components/Paper',
+  component: Paper,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Paper>;
+
+const defaultArgs = {
+  Children,
+  className: '',
+  rounded: false,
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    children: <p>This is a simple Paper component with default styles.</p>,
+    className: 'ff_paper_default_style',
+  },
+};
+
+export const PrimaryPaper: Story = {
+  render: () => {
+    return (
+      <Paper className="ff_paper_default_style">
+        <Typography>
+          This Paper component has custom background color and padding.
+        </Typography>
+      </Paper>
+    );
+  },
+};
+
+export const PaperWithLowShadow: Story = {
+  render: () => {
+    return (
+      <Paper className="ff_paper_default_style">
+        <Typography>This Paper component has a shadow depth of 6.</Typography>
+      </Paper>
+    );
+  },
+};
+
+export const PaperWithHighShadow: Story = {
+  render: () => {
+    return (
+      <Paper className="ff_paper_basic_style" rounded>
+        <Typography>
+          This Paper component combines custom styles, shadow depth of 10, and
+          rounded corners.
+        </Typography>
+      </Paper>
+    );
+  },
+};
+
+export const PaperWithRounded: Story = {
+  render: () => {
+    return (
+      <Paper rounded className="ff_paper_default_style">
+        <Typography>This Paper component has Rounded Corners.</Typography>
+      </Paper>
+    );
+  },
+};
+
+export default meta;

package/src/components/Paper/Paper.tsx

@@ -0,0 +1,14 @@
+import classNames from 'classnames';
+import './Paper.scss';
+import { PaperProps } from './types';
+
+const Paper = ({ children, className = '', rounded = false }: PaperProps) => {
+  const dynamicClassName = classNames(
+    { ['ff_rounded_lg']: rounded },
+    className
+  );
+
+  return <div className={dynamicClassName}>{children}</div>;
+};
+
+export default Paper;

package/src/components/Paper/index.ts

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

package/src/components/Paper/types.ts

@@ -0,0 +1,19 @@
+export interface PaperProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string;
+  /**
+   * If `true`, rounded corners are Enabled.
+   * @default false
+   */
+  rounded?: boolean;
+}
+
+
+
+

package/src/components/Select/components/Dropdown/Dropdown.tsx

@@ -4,7 +4,7 @@ import useClickOutside from '../../../../hooks/useClickOutside';
 import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
 import './Dropdown.scss';
 import Typography from '../../../Typography';
-import ffid from '../../../../utils/ffID/ffid';
+import { ffid } from '../../../../utils/ffID/ffid';
 import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
 

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/components/VariableInput/VariableInput.scss

@@ -0,0 +1,128 @@
+.ff_variable_input_container {
+  .ff_label_container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 4px;
+
+    &.ff_danger_label {
+      .ff_input_label {
+        color: var(--error);
+      }
+
+      .ff_required_asterisk {
+        color: var(--error);
+      }
+    }
+  }
+
+  .ff_required_asterisk {
+    color: var(--input-error-text-color);
+    font-size: 1.1em;
+    margin-right: 4px;
+  }
+
+  .ff_input_label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-color);
+
+    &.ff_no_hover {
+      color: var(--toggle-disable-icon-color);
+    }
+
+    &.ff_disabled_label {
+      color: var(--toggle-disable-icon-color);
+      cursor: not-allowed;
+    }
+
+    &.ff_danger_label {
+      color: var(--error);
+    }
+  }
+
+  .ff_content_editable {
+    min-width: 8rem;
+    border: 1px solid var(--input-default-border-color);
+    padding: 8px;
+    min-height: 30px;
+    border-radius: 4px;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+    line-height: 20px;
+    transition: border-color 0.2s ease;
+    position: relative;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    overflow: auto;
+
+    .ff_var_red {
+      color: var(--status-rejected-text-color);
+    }
+
+    .ff_var_def_color {
+      color: var(--text-color);
+    }
+
+    .ff_var_green {
+      color: var(--status-success-text-color);
+    }
+
+    &::after {
+      content: '*';
+      color: var(--input-error-text-color);
+      font-size: 1.2em;
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      display: none;
+    }
+
+    &.ff_required::after {
+      display: inline;
+    }
+
+    &.ff_required_empty:focus-within,
+    &.ff_required_empty:focus {
+      border-color: var(--input-error-text-color);
+    }
+
+    &:empty::before {
+      content: attr(data-placeholder);
+      color: var(--ff-search-filed-placeholder-text);
+      position: absolute;
+      user-select: none;
+      pointer-events: none;
+      font-size: medium;
+    }
+
+    &.ff_disabled {
+      pointer-events: none;
+      opacity: 0.5;
+      background-color: var(--input-default-border-color);
+    }
+
+    &.ff_invalid_input {
+      border: 1px solid var(--input-error-text-color);
+    }
+  }
+
+  .ff_suggestions {
+    border: 1px solid var(--input-default-border-color);
+    margin-top: 4px;
+    padding: 4px;
+    border-radius: 4px;
+    list-style-type: none;
+    background-color: var(--ff-select-background-color);
+    max-height: 150px;
+    overflow-y: auto;
+  }
+
+  .ff_suggestion_item {
+    padding: 4px;
+    cursor: pointer;
+    &:hover {
+      background-color: var(--ff-select-background-color);
+    }
+  }
+}

package/src/components/VariableInput/VariableInput.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import VariableInput from './VariableInput';
+
+const meta: Meta<typeof VariableInput> = {
+  title: 'Components/VariableInput',
+  component: VariableInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof VariableInput>;
+
+const defaultArgs = {
+  name: 'input',
+  label: '',
+  disabled: false,
+  placeholder: 'Enter URL',
+  value: '',
+  type: 'url',
+  list:['name','urlName','passwork','emailId','default','errorVar']
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Enter URL',
+    type: 'url',
+  },
+};
+export default meta;