pixel-react 1.6.8 → 1.7.0

package/src/assets/styles/_colors.scss

@@ -81,7 +81,7 @@ $ff-success: #079455;
 $ff-warning: #f79009;
 $ff-error-light: #e42525;
 $ff-chips-fill-color: #f9d5ff;
-$ff-chips-blur-color: #575757;
+$ff-chips-blur-color: #57575766;
 $hovered-add-button-color: #fce9ff; // TODO: Change the color variable name
 $arrows-button-border-color: #ded1e5; // TODO: Change the color variable name
 $add-icon-hover-color: #431b4a; ////TODO: color need to be add into style guide

package/src/components/AttachmentButton/AttachmentButton.tsx

@@ -67,7 +67,7 @@ const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
 
   return (
     <div>
-      <Typography fontWeight="semi-bold">{label}</Typography>
+      <Typography fontWeight="semi-bold" lineHeight='18px'>{label}</Typography>
       {(!showSelectedFiles || selectedFiles.length === 0) && (
         <Button
           variant={buttonVariant}

package/src/components/Charts/LineChart/LineChart.stories.tsx

@@ -38,14 +38,14 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
           },
           {
             date: '29 Oct',
-            totalMemory: 800,
+            totalMemory: 100,
           },
           {
-            date: '30 Oct',
+            date: '3 Nov',
             totalMemory: 10.12,
           },
           {
-            date: '31 Oct',
+            date: '23 Nov',
             totalMemory: 10.1,
           },
         ],
@@ -60,6 +60,7 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
     xAxisColor: '#D9D9D9',
     yAxisColor: '#252C37',
     numberSize: '10px',
+    proportionalSpacing :false,
   },
   render: (args) => (
     <div className="linechart-container">
@@ -153,6 +154,8 @@ export const multiLineScriptsChart: StoryObj<LineChartProps> = {
     yAxisColor: '#252C37',
     yAxisLabelColor: '#252C37',
     textSize: '12px',
+    proportionalSpacing :false,
+
   },
   render: (args) => (
     <div className="linechart-container">
@@ -246,6 +249,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
     yAxisLabelColor: '#252C37',
     textSize: '12px',
     fontWeight: 'semi-bold',
+    proportionalSpacing :false,
   },
   render: (args) => (
     <div className="linechart-container">

package/src/components/Charts/LineChart/LineChart.tsx

@@ -25,6 +25,7 @@ const LineChart: React.FC<LineChartProps> = ({
   textSize,
   fontWeight,
   numberSize,
+  proportionalSpacing,
 }) => {
   const margin = 40;
   const xMax = width - margin * 2;
@@ -36,6 +37,7 @@ const LineChart: React.FC<LineChartProps> = ({
   const xKey = isDefaultLineChart ? 'date' : 'date';
   const yKey = isDefaultLineChart ? 'totalMemory' : 'value';
   const xScale = (x: string) => {
+  if (proportionalSpacing) {
     const date = new Date(x);
     const time = date.getTime();
     const minDate = new Date(
@@ -49,7 +51,14 @@ const LineChart: React.FC<LineChartProps> = ({
       ((time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())) *
       xMax
     );
-  };
+  } else {
+    const index = data[0].data.findIndex((point: any) => point[xKey] === x);
+    if (index === -1) return 0;
+    const totalPoints = data[0].data.length;
+    return (index / (totalPoints - 1)) * xMax;
+  }
+};
+
 
   const yScale = (y: number) => yMax - (y * yMax) / 1024;
 

package/src/components/Charts/LineChart/types.ts

@@ -26,4 +26,5 @@ export interface LineChartProps {
   textSize?: string | number;
   fontWeight?: string | number;
   numberSize?: string | number;
+  proportionalSpacing?: boolean;
 }

package/src/components/Checkbox/Checkbox.scss

@@ -19,7 +19,9 @@
     position: relative;
     @include mixins.center-content;
     @include mixins.transition(border-color, background-color);
-
+    .ff-tick-icon {
+      padding: 2px !important; // I used important because icon component have some issue with padding because of that
+    }
     &::before {
       content: '';
       width: 9px;

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import Checkbox from './Checkbox';
+import { useState } from 'react';
+import React from 'react';
 
 const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
@@ -15,109 +16,63 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-const useCheckboxState = (initialState = false) => {
-  const [checked, setChecked] = useState(initialState);
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setChecked(event.target.checked);
-  };
-  return { checked, handleChange };
-};
-
-// Story: Default Checkbox
 export const Default: Story = {
   render: () => {
-    const { checked, handleChange } = useCheckboxState();
-    return <Checkbox label="Default Checkbox" checked={checked} onChange={handleChange} />;
-  },
-};
+    const [checked, setChecked] = useState(true); // Default starts as checked
 
-// Story: Partial Checkbox
-export const Partial: Story = {
-  render: () => {
-    const { checked, handleChange } = useCheckboxState();
-    const [partial, setPartial] = useState(true);
-
-    const handlePartialChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setPartial(!event.target.checked);
-      handleChange(event);
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setChecked(event.target.checked);
     };
 
     return (
       <Checkbox
-        label="Partially Selected Checkbox"
-        partial={partial}
+        label="Default Checkbox"
+        id="default-checkbox"
+        name="default"
         checked={checked}
-        onChange={handlePartialChange}
+        onChange={handleChange}
       />
     );
   },
 };
 
-// Story: Disabled Checkbox
-export const Disabled: Story = {
-  args: {
-    label: 'Disabled Checkbox',
-    disabled: true,
-  },
-};
-
-// Story: Checkbox Variants
-export const Variants: Story = {
+export const Partial: Story = {
   render: () => {
-    const variants = ['passed', 'failed', 'warning', 'skipped', 'flaky'] as const;
-    const initialStates = variants.reduce((acc, variant) => ({ ...acc, [variant]: false }), {});
-    const [checkedStates, setCheckedStates] = useState(initialStates);
+    const [checked, setChecked] = useState(true); // Default starts as checked
 
-    const handleChange = (variant: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
-      setCheckedStates({ ...checkedStates, [variant]: event.target.checked });
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setChecked(event.target.checked);
     };
 
     return (
-      <div style={{ display: 'flex', gap: '16px' }}>
-        {variants.map((variant) => (
-          <Checkbox
-            key={variant}
-            label={variant.charAt(0).toUpperCase() + variant.slice(1)}
-            variant={variant}
-            checked={checkedStates[variant]}
-            onChange={handleChange(variant)}
-          />
-        ))}
-      </div>
+      <Checkbox
+        label="Partial Checkbox"
+        id="partial-checkbox"
+        name="partial"
+        partial={true}
+        checked={checked}
+        onChange={handleChange}
+      />
     );
   },
 };
 
-// Story: Controlled Checkbox
 export const Controlled: Story = {
   render: () => {
-    const { checked, handleChange } = useCheckboxState();
-    return <Checkbox label="Controlled Checkbox" checked={checked} onChange={handleChange} />;
-  },
-};
+    const [checked, setChecked] = useState(false);
 
-// Story: All Features Showcase
-export const AllFeatures: Story = {
-  render: () => {
-    const { checked: defaultChecked, handleChange: handleDefaultChange } = useCheckboxState();
-    const { checked: partialChecked, handleChange: handlePartialChange } = useCheckboxState(true);
-    const variants = ['passed', 'failed', 'warning', 'skipped', 'flaky'] as const;
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setChecked(event.target.checked);
+    };
 
     return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-        <Checkbox label="Default Checkbox" checked={defaultChecked} onChange={handleDefaultChange} />
-        <Checkbox
-          label="Partially Selected"
-          partial={partialChecked}
-          onChange={handlePartialChange}
-        />
-        <Checkbox label="Disabled Checkbox" disabled />
-        <div style={{ display: 'flex', gap: '16px' }}>
-          {variants.map((variant) => (
-            <Checkbox key={variant} label={variant} variant={variant} />
-          ))}
-        </div>
-      </div>
+      <Checkbox
+        label={checked ? 'Checked! Click to uncheck.' : 'Click here to check.'}
+        id="controlled-checkbox"
+        name="controlled"
+        checked={checked}
+        onChange={handleChange}
+      />
     );
   },
 };

package/src/components/Checkbox/Checkbox.tsx

@@ -14,7 +14,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
   checked: initialChecked = false,
   partial = false,
   onChange,
-  variant
+  variant,
 }) => {
   const [checked, setChecked] = useState(initialChecked);
 
@@ -35,7 +35,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
       />
       <span
         className={classNames('ff-checkbox-custom', {
-          'ff-checkbox-checked': checked ,
+          'ff-checkbox-checked': checked,
           'ff-storybook-checkbox--partial': partial && !checked,
           [`ff-checkbox--${variant}`]: variant,
           [`ff-checkbox-checked--${variant}`]: checked && variant,
@@ -44,9 +44,8 @@ const Checkbox: React.FC<CheckboxProps> = ({
         {checked && (
           <Icon
             name="tick"
-            height={6}
-            width={8}
             color="var(--primary-icon-color)"
+            className="ff-tick-icon"
           />
         )}
       </span>

package/src/components/Chip/Chip.scss

@@ -22,19 +22,21 @@
     padding: 1px 6px;
     line-height: 15px;
     border: none;
-    transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;
-    box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset,
+    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out,
+      padding 0.4s ease-in-out;
+    box-shadow: 1px 1px 3px 0px var(--ff-chips-blur-color) inset,
       -1px -1px 2px 0px var(--ff-chip-bg) inset,
       1px -1px 2px 0px var(--ff-chips-blur-color) inset,
+      -1px -1px 2px 0px var(--ff-chips-blur-color),
       1px 1px 2px 0px var(--ff-chip-bg);
     &--fullText:hover {
-      box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset,
+      box-shadow: 1px 1px 3px 0px var(--ff-chips-blur-color) inset,
         -1px -1px 2px 0px var(--ff-chip-bg) inset,
         1px -1px 2px 0px var(--ff-chips-blur-color) inset,
+        -1px -1px 2px 0px var(--ff-chips-blur-color),
         1px 1px 2px 0px var(--ff-chip-bg);
-      padding-right: 12px;
+      padding-right: 7px;
     }
-    @extend .fontXs;
 
     &--primary {
       @include chip-variant-background(var(--ff-chips-fill-color));
@@ -68,18 +70,26 @@
     }
     &--public {
       @include chip-variant-background(var(--public-chip-bg-color));
+      color: var(--license_header_text_color);
     }
 
     &--partial-public {
       @include chip-variant-background(var(--partial-public-chip-bg-color));
+      color: var(--license_header_text_color);
     }
 
     &--private {
       @include chip-variant-background(var(--private-chip-bg-color));
+      color: var(--license_header_text_color);
     }
 
     &--disabled {
       @include chip-variant-background(var(--disabled-chip-bg-color));
+      color: var(--table-column-text-color);
+    }
+    &--count {
+      @include chip-variant-background(var(--impact-list-chip-bg-color));
+      color: var(--ff-chip-text-color);
     }
   }
 }

package/src/components/Chip/Chip.stories.tsx

@@ -1,8 +1,10 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import Chip from './Chip';
 import '../../assets/styles/_colors.scss';
 import './Chip.scss';
 import Typography from '../Typography';
+
 const meta: Meta<typeof Chip> = {
   title: 'Components/Chip',
   component: Chip,
@@ -111,7 +113,14 @@ export const Disabled: Story = {
     ...defaultArgs,
     variant: 'disabled',
     fullText: 'Sub Modules 0',
-  },  
+  },    
+};
+export const Count: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'count',
+    fullText: 'Sub Modules 0',
+  },
 };
 
 export default meta;

package/src/components/Chip/Chip.tsx

@@ -26,7 +26,11 @@ const Chip = ({
           { ['ff-default-chip-style--fullText']: !!fullText }
         )}
       >
-        {labelText && <Typography as="p">{labelText}</Typography>}
+        {labelText && (
+          <Typography as="p" fontSize={10} fontWeight="semi-bold">
+            {labelText}
+          </Typography>
+        )}
       </button>
     </div>
   );

package/src/components/Chip/types.ts

@@ -10,7 +10,7 @@ export interface ChipsProps {
   /**
    * The variant of the Chip.
    */
-  variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled';
+  variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled' | 'count';
 
   /**
    * The callback function to be executed when the Chip is clicked.

package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss}

@@ -12,3 +12,7 @@
     gap: 8px;
   }
 }
+.ff-variable-dropdown {
+  padding: 4px;
+  width: auto;
+}

package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx

@@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import ConditionalDropdown from './ConditionalDropdown';
+import { ConditionalDropdownProps, dynamicObject } from './types';
+import { variableList } from '../Editor/constants';
+import CreateVariableSlider from '../CreateVariable/CreateVariableSlider';
+
+export default {
+  title: 'Components/ConditionalDropdown',
+  component: ConditionalDropdown,
+  args: {
+    label: 'Add Variables',
+    placeholder: 'Enter text',
+    variableList,
+    dropdownWidth: '138px',
+    variant: 'primary',
+  },
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<ConditionalDropdownProps>;
+
+type Story = StoryObj<typeof ConditionalDropdown>;
+
+const Template: StoryFn<ConditionalDropdownProps> = (args) => {
+  const [inputValue, setInputValue] = useState<string>('');
+  const [openCreateVariable, setOpenCreateVariable] = useState<boolean>(false);
+  const [variableName, setVariableName] = useState<string>('');
+  const [variableValue, setVariableValue] = useState<string>('');
+  const [selectedVariable, setSelectedVariable] = useState<dynamicObject>({
+    label: 'Local Variable',
+    value: 'LOCAL',
+  });
+  const [hideValue, setHideValue] = useState<boolean>(false);
+
+  return (
+    <>
+      <ConditionalDropdown
+        {...args}
+        onChange={(value: string) => setInputValue(value)}
+        value={inputValue}
+        onCreateVariableClick={() => setOpenCreateVariable(true)}
+      />
+      {openCreateVariable && (
+        <CreateVariableSlider
+          isOpen={openCreateVariable}
+          onClose={() => setOpenCreateVariable(false)}
+          variableName={variableName}
+          value={variableValue}
+          hideValue={hideValue}
+          handleSubmit={() => {
+            alert('Variable Created');
+          }}
+          onHideChange={(value) => {
+            setHideValue(value);
+          }}
+          onNameChange={(value) => {
+            setVariableName(value);
+          }}
+          onValueChange={(value) => setVariableValue(value)}
+          onVariableTypeChange={(option) => setSelectedVariable(option)}
+          selectedVariableType={selectedVariable}
+          variableTypesList={[
+            { label: 'Local Variable', value: 'LOCAL' },
+            { label: 'Global Variable', value: 'GLOBAL' },
+          ]}
+        />
+      )}
+    </>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  onCreateVariableClick: () => alert('Create Variable clicked'),
+};
+
+export const WithInitialValue = Template.bind({});
+WithInitialValue.args = {
+  inputValue: 'Initial Text with $',
+  onCreateVariableClick: () => alert('Create Variable clicked'),
+};
+
+export const DropdownOnHash: Story = {
+  render: () => {
+    const [hashInputValue, setHashInputValue] = useState<
+      dynamicObject | undefined
+    >();
+    const testData = [
+      {
+        _id: '1',
+        name: 'File1.txt',
+        actualPath: '/documents/File1.txt',
+        searchKey: 'file1',
+        parentId: 'root',
+      },
+      {
+        _id: '2',
+        name: 'File2.doc',
+        actualPath: '/documents/File2.doc',
+        searchKey: 'file2',
+        parentId: 'root',
+      },
+      {
+        _id: '3',
+        name: 'Image1.png',
+        actualPath: '/images/Image1.png',
+        searchKey: 'image1',
+        parentId: 'folder1',
+      },
+      {
+        _id: '4',
+        name: 'Presentation.ppt',
+        actualPath: '/presentations/Presentation.ppt',
+        searchKey: 'presentation',
+        parentId: 'folder2',
+      },
+      {
+        _id: '5',
+        name: 'Spreadsheet.xlsx',
+        actualPath: '/spreadsheets/Spreadsheet.xlsx',
+        searchKey: 'spreadsheet',
+        parentId: 'folder3',
+      },
+      {
+        _id: '6',
+        name: 'Code.js',
+        actualPath: '/projects/Code.js',
+        searchKey: 'code',
+        parentId: 'folder4',
+      },
+    ];
+
+    return (
+      <>
+        <ConditionalDropdown
+          label="Select Path Using #"
+          placeholder="Enter # to search files"
+          isHash
+          dataFiles={testData}
+          dropdownWidth="auto"
+          setHashInputValue={setHashInputValue}
+        />
+      </>
+    );
+  },
+};