pixel-priya 0.0.1

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import RadioGroup from './RadioGroup';
+import { useState } from 'react';
+import Icon from '../Icon';
+import React from 'react';
+import { Option } from '../MultiSelect/MultiSelectTypes';
+
+const meta: Meta<typeof RadioGroup> = {
+  title: 'Components/RadioGroup',
+  component: RadioGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof RadioGroup>;
+
+export const Controlled: Story = {
+  render: () => {
+    const radioOptions = [
+      { value: 'men', label: 'Men' },
+      { value: 'women', label: 'Women' }, // Disabled option
+      { value: 'other', label: 'Other' },
+    ];
+    const [selectedOption, setSelectedOption] = useState('option2');
+    const handleOptionChange = (option: Option) => {
+      setSelectedOption(option.value);
+    };
+    return (
+      <RadioGroup
+        options={radioOptions}
+        onChange={handleOptionChange}
+        name="option"
+        selectedValue={selectedOption}
+      />
+    );
+  },
+};
+
+export const WithDisabledOption: Story = {
+  render: () => {
+    const radioOptions = [
+      { value: 'men', label: 'Men', disabled: true },
+      { value: 'women', label: 'Women' }, // Disabled option
+      { value: 'other', label: 'Other' },
+    ];
+    const [selectedOption, setSelectedOption] = useState('');
+    const handleOptionChange = (option: Option) => {
+      setSelectedOption(option.value);
+    };
+    return (
+      <RadioGroup
+        options={radioOptions}
+        onChange={handleOptionChange}
+        name="option"
+        selectedValue={selectedOption}
+      />
+    );
+  },
+};
+
+export const DisabledSelected: Story = {
+  render: () => {
+    const radioOptions = [
+      { value: 'men', label: 'Men' },
+      { value: 'women', label: 'Women', disabled: true }, // Disabled option
+      { value: 'other', label: 'Other' },
+    ];
+    const [selectedOption, setSelectedOption] = useState('women');
+    const handleOptionChange = (option: Option) => {
+      setSelectedOption(option.value);
+    };
+    return (
+      <RadioGroup
+        options={radioOptions}
+        onChange={handleOptionChange}
+        name="gender"
+        selectedValue={selectedOption}
+      />
+    );
+  },
+};
+
+export const WithToolTipIcon: Story = {
+  render: () => {
+    const radioOptions = [
+      {
+        value: 'men',
+        label: 'Men',
+        showTooltip: true,
+        tooltipChildren: <Icon name="info" />,
+        tooltipTitle: 'Info',
+      },
+      {
+        value: 'women',
+        label: 'Women',
+        showTooltip: true,
+        disabled: true,
+      },
+      {
+        value: 'other',
+        label: 'Other',
+        showTooltip: true,
+        tooltipChildren: <Icon name="info" />,
+        tooltipTitle: 'Info',
+      },
+    ];
+    const [selectedOption, setSelectedOption] = useState('women');
+    const handleOptionChange = (option: Option) => {
+      setSelectedOption(option.value);
+    };
+    return (
+      <RadioGroup
+        options={radioOptions}
+        onChange={handleOptionChange}
+        name="gender"
+        selectedValue={selectedOption}
+      />
+    );
+  },
+};
+
+export const WithLabelled: Story = {
+  render: () => {
+    const [selectedOption, setSelectedOption] = useState('restApi');
+    const radioOptions = [
+      { value: 'restApi', label: 'RestAPI' },
+      { value: 'snippets', label: 'Snippet' },
+      { value: 'history', label: 'History' },
+    ];
+    const handleOptionChange = (option: Option) => {
+      setSelectedOption(option.value);
+    };
+    return (
+      <RadioGroup
+        options={radioOptions}
+        onChange={handleOptionChange}
+        name="option"
+        selectedValue={selectedOption}
+        isAsteriskRequired
+        isLabel
+        label={'Web Services'}
+        classNameForLabel='ff-radio-label-wrapper'
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import RadioButton from '../RadioButton/RadioButton'; // Adjust the import path as necessary
+import './RadioGroup.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+
+const RadioGroup: React.FC<RadioGroupProps> = ({
+  options,
+  name,
+  selectedValue,
+  onChange,
+  label,
+  isLabel = false,
+  isAsteriskRequired = false,
+  className,
+  classNameForLabel,
+}) => {
+  return (
+    <div className={classNames('ff-radio-group', className)}>
+      {isLabel && (
+        <Typography fontWeight='semi-bold' className={classNames(classNameForLabel)}>
+          {' '}
+          {isAsteriskRequired && (
+            <Typography className={classNames('ff-required-asterisk')}>
+              *{' '}
+            </Typography>
+          )}
+          {label}{' '}
+        </Typography>
+      )}
+      {options.map((option) => (
+        <RadioButton
+          key={option.value}
+          label={option.label}
+          showTooltip={option?.showTooltip}
+          tooltipChildren={option?.tooltipChildren}
+          tooltipTitle={option?.tooltipTitle}
+          name={name}
+          value={option.value}
+          checked={selectedValue === option.value}
+          onChange={() => onChange?.(option)}
+          disabled={option.disabled}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default RadioGroup;

package/src/components/RadioGroup/index.ts

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

package/src/components/RadioGroup/radioGroupTypes.tsx

@@ -0,0 +1,96 @@
+/**
+ * Represents a single option in the radio group.
+ */
+interface Option {
+  /**
+   * The unique value of the option.
+   */
+  value: string;
+
+  /**
+   * The display label for the option.
+   */
+  label: string;
+
+  /**
+   * Indicates whether the option is disabled.
+   * Optional.
+   */
+  disabled?: boolean;
+
+  /**
+   * Indicates whether the radio button show the tooltip.
+   * Optional.
+   */
+  showTooltip?: boolean;
+
+  /**
+   * The content of the tooltip.
+   * Optional.
+   */
+  tooltipChildren?: React.ReactNode;
+
+  /**
+   * The content of the tooltip.
+   * Optional.
+   */
+  tooltipTitle?: React.ReactNode;
+}
+
+/**
+ * Props for the RadioGroup component.
+ */
+interface RadioGroupProps {
+  /**
+   * An array of options to be rendered in the radio group.
+   */
+  options: Option[];
+
+  /**
+   * The name attribute for the radio inputs, used for grouping.
+   */
+  name: string;
+
+  /**
+   * The currently selected value.
+   * Optional.
+   */
+  selectedValue?: string;
+
+  /**
+   * Callback function that is called when the selected option changes.
+   * It receives the selected option as an argument.
+   * Optional.
+   */
+  onChange?: (option: Option) => void;
+
+   /**
+   * Provides a label at starting position when the string is passed.
+   * Optional.
+   */
+  label?: string,
+
+  /**
+   * if isLabel is true then we can display label if not then extra space is not added.
+   * Optional.
+   */
+  isLabel?: boolean,
+
+  /**
+   * if isAsteriskRequired is true then we can display asterisk if not then extra space is not added.
+   * Optional. 
+   */
+  isAsteriskRequired?:boolean,
+
+  /**
+   * Additional class names to apply to the radio group for custom styling.
+   * Optional.
+   */
+  className?: string;
+
+  /**
+   * Additional class names to apply to the radio group Label for custom styling.
+   * Optional.
+   */
+  classNameForLabel?:string;
+}

package/src/components/ScriptSwitchButton/ScriptSwitchButton.scss

@@ -0,0 +1,33 @@
+/* Container Styling */
+.ff-script-switch-container {
+  display: flex;
+  background-color: var(--base-bg-color);
+  height: 24px;
+  width: 48px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  align-items: center;
+  justify-content: center;
+
+  /* Button Styling */
+  .ff-script-switch-button {
+    padding: 0.1px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    outline: none;
+    transition: all 0.3s ease;
+
+    /* Button Hover Effect */
+    &:hover {
+      background-color: var(--hover-color);
+      color: var(--brand-color);
+    }
+  }
+
+  /* Active Button */
+  .ff-script-switch-button.active {
+    background-color: var(--ff-line-number-bg);
+    color: var(--base-bg-color);
+  }
+}

package/src/components/ScriptSwitchButton/ScriptSwitchButton.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import ScriptSwitchButton from './ScriptSwitchButton';
+
+const meta: Meta<typeof ScriptSwitchButton> = {
+  title: 'Components/ScriptSwitchButton',
+  component: ScriptSwitchButton,
+  tags: ['autodocs'],
+  argTypes: {
+    selected: {
+      control: { type: 'radio' },
+      options: ['Automation', 'Manual'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ScriptSwitchButton>;
+
+export const Default: Story = {
+  args: {
+    selected: 'Automation',
+    tabList: ['Automation', 'Manual'],
+    handleClick: () => {},
+  },
+};
+
+export const Switch: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string>('Automation');
+    const handleChange = (selectedSwitch: string) => {
+      if (selectedSwitch.includes('Automation')) {
+        !selectedSwitch.includes('Add') && setSelected(selectedSwitch);
+      } else {
+        !selectedSwitch.includes('Add') && setSelected(selectedSwitch);
+      }
+    };
+
+    return (
+      <ScriptSwitchButton
+        selected={selected}
+        tabList={['Automation', 'Manual']}
+        handleClick={handleChange}
+      />
+    );
+  },
+};

package/src/components/ScriptSwitchButton/ScriptSwitchButton.tsx

@@ -0,0 +1,65 @@
+import React, { type JSX } from 'react';
+import './ScriptSwitchButton.scss';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+
+interface ScriptSwitchButtonProps {
+  handleClick: (selected: string) => void;
+  selected: string;
+  tabList: Array<'Automation' | 'Manual'>;
+}
+
+const ScriptSwitchButton: React.FC<ScriptSwitchButtonProps> = ({
+  selected = 'text',
+  handleClick,
+  tabList, //  ['Automation' , 'Manual']
+}): JSX.Element => {
+  const isAutomation = tabList?.includes('Automation');
+  const isManual = tabList?.includes('Manual');
+
+  return (
+    <div className="ff-script-switch-container">
+      <Tooltip
+        title={isAutomation ? 'Automation' : 'Add Automation'}
+        zIndex={1000}
+      >
+        <div
+          className={`ff-script-switch-button ${
+            selected === 'Automation' ? 'active' : ''
+          }`}
+          onClick={() =>
+            handleClick(isAutomation ? 'Automation' : 'Add Automation')
+          }
+        >
+          <Icon
+            name={isAutomation ? 'automation_testcase' : 'add_testcase'}
+            color={
+              selected === 'Automation'
+                ? 'var(--primary-button-text-color)'
+                : 'var(--description-text)'
+            }
+          />
+        </div>
+      </Tooltip>
+      <Tooltip title={isManual ? 'Manual' : 'Add Manual'} zIndex={1000}>
+        <div
+          className={`ff-script-switch-button ${
+            selected === 'Manual' ? 'active' : ''
+          }`}
+          onClick={() => handleClick(isManual ? 'Manual' : 'Add Manual')}
+        >
+          <Icon
+            name={isManual ? 'manual_testcase' : 'add_testcase'}
+            color={
+              selected === 'Manual'
+                ? 'var(--primary-button-text-color)'
+                : 'var(--description-text)'
+            }
+          />
+        </div>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default ScriptSwitchButton;

package/src/components/ScriptSwitchButton/index.ts

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

package/src/components/Search/Search.scss

@@ -0,0 +1,112 @@
+@use '../../assets/styles/fonts';
+
+.ff-search-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .ff-search-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: var(--ff-search-field-hover-color);
+    }
+
+    .ff-icon-container {
+      svg {
+        path {
+          fill: var(--brand-color);
+        }
+      }
+    }
+  }
+
+  .ff-search-input {
+    @extend .fontXs;
+    border: none;
+    color: var(--tooltip-bg-color);
+    line-height: 12px;
+    visibility: hidden;
+    transition: width 0.4s ease;
+
+    &:focus {
+      outline: none;
+      border: none;
+    }
+
+    &:hover {
+      border: none;
+    }
+  }
+
+  &.disabled {
+    opacity: 0.5;
+  }
+
+  &.expanded {
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background-color: var(--ff-search-filed-bg-color);
+
+    .ff-search-icon {
+      &:hover {
+        background-color: var(--ff-search-filed-bg-color);
+      }
+    }
+
+    .ff-vertical-line {
+      height: 8px;
+      width: 1px;
+      border-radius: 1px;
+      background-color: var(--border-color);
+    }
+
+    .ff-search-input {
+      visibility: visible;
+      margin-left: 4px;
+
+      &::placeholder {
+        color: var(--ff-search-filed-placeholder-text);
+      }
+    }
+
+    .ff-search-icon {
+      border: none;
+      cursor: default;
+      margin-right: 4px;
+    }
+
+    .ff-search-clear-button {
+      display: grid;
+      place-items: center;
+      cursor: pointer;
+      width: 22px;
+      padding-top: 1px;
+
+      &.showClose {
+        display: none
+      }
+    }
+
+    .ff-search-close-icon {
+      margin: 4px;
+      cursor: pointer;
+
+      &.showClose {
+        display: none
+      }
+
+      .ff-icon-container {
+        svg {
+          path {
+            fill: var(--ff-search-filed-close-Icon);
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/Search/Search.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Search from './Search';
+import React, { useState } from 'react';
+const meta: Meta<typeof Search> = {
+  title: 'Components/Search',
+  component: Search,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Search>;
+export const Default: Story = {
+  render: () => {
+    const [isExpand, setIsExpand] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+
+    const handleSearch = (value: string) => {
+      setSearchValue(value);
+    };
+
+    const handleClose = () => {
+      setIsExpand(false);
+      setSearchValue('');
+    };
+    return (
+      <div>
+        <Search
+          placeholder="Search here..."
+          isExpand={isExpand}
+          value={searchValue}
+          onSearch={handleSearch}
+          onExpand={(expand) => setIsExpand(expand)}
+          onClose={handleClose}
+          disabled={false}
+          width={200}
+        />
+      </div>
+    );
+  },
+};
+
+export default meta;