pixel-react 1.0.0

package/src/components/InputWithDropdown/InputWithDropdown.tsx

@@ -0,0 +1,85 @@
+import classNames from 'classnames';
+import './InputWithDropdown.scss';
+import { InputWithDropdownProps } from './types';
+import Select from '../Select/Select';
+import Typography from '../Typography';
+
+const InputWithDropdown = ({
+  name = '',
+  label,
+  value,
+  type,
+  disabled = false,
+  required = false,
+  placeholder,
+  error,
+  helperText,
+  optionsList,
+  selectedOption,
+  onDropdownChangeHandler = () => {},
+  onInputChangeHandler,
+}: InputWithDropdownProps) => {
+  return (
+    <div
+      className={classNames('ff-input-with-dropdown-container', {
+        'ff-input-with-dropdown-container--filled': !!value,
+      })}
+    >
+      <fieldset
+        className={classNames('ff-input-with-dropdown', {
+          'ff-input-with-dropdown--filled': !!value,
+          'ff-input-with-dropdown--no-hover': !!value,
+          'ff-input-with-dropdown--disabled': !!disabled,
+          'ff-input-with-dropdown--error': !!error,
+        })}
+      >
+        <div className={classNames('ff-floating-label-input-container')}>
+          <Typography
+            as="label"
+            htmlFor={name}
+            className={classNames('ff-floating-label', {
+              'ff-floating-label--filled': !!value,
+              'ff-floating-label--no-hover': !!value,
+              'ff-floating-label--error': !!error,
+            })}
+          >
+            {required && <span className="ff-required-asterisk">*</span>}{' '}
+            {label}
+          </Typography>
+          <input
+            name={name}
+            type={type}
+            id={name}
+            value={value}
+            onChange={onInputChangeHandler}
+            placeholder={placeholder}
+            required={required}
+            disabled={disabled}
+            className={classNames('ff-floating-input', {
+              'ff-floating-input--filled': !!value,
+              'ff-floating-input--disabled': !!disabled,
+              'ff-floating-input--error': !!error,
+            })}
+          />
+        </div>
+        <Select
+          optionsList={optionsList}
+          selectedOption={selectedOption}
+          showLabel={false}
+          showBorder={false}
+          onChange={onDropdownChangeHandler}
+          disabled={disabled}
+          className={classNames('ff-floating-dropdown', {
+            'ff-floating-dropdown--disabled': !!disabled,
+            'ff-floating-dropdown--error': !!error,
+          })}
+        />
+      </fieldset>
+      {error && helperText && (
+        <span className="ff-helper-text">{helperText}</span>
+      )}
+    </div>
+  );
+};
+
+export default InputWithDropdown;

package/src/components/InputWithDropdown/index.ts

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

package/src/components/InputWithDropdown/types.ts

@@ -0,0 +1,110 @@
+import { ReactNode } from 'react';
+
+export interface Option {
+  label: string | ReactNode; // The display label for the dropdown option
+  value: string; // The value associated with the dropdown option
+}
+
+export interface InputWithDropdownProps {
+  /**
+   * Name | name of the input field
+   */
+  name: string;
+
+  /**
+   * Label | field label to be displayed
+   */
+  label: string;
+
+  /**
+   * value | input field value
+   */
+  value: string | number;
+
+  /**
+   * variants to set color/style of the input field
+   */
+  variant?: 'default' | 'primary';
+
+  /**
+   * type to set the input field type
+   */
+  type: 'text' | 'password' | 'number' | 'time';
+
+  /**
+   * error | If true, error message will be displayed
+   */
+  error?: boolean;
+
+  /**
+   * helperText | error, success, warning message to be shown
+   */
+  helperText?: string;
+
+  /**
+   * to disable the input field
+   */
+  disabled?: boolean;
+
+  /**
+   * if true, input field will be mandatory
+   */
+  required?: boolean;
+
+  /**
+   * placeholder for the input field
+   */
+  placeholder?: string;
+
+  /**
+   * classnames to style the input field
+   */
+  className?: string;
+
+  /**
+   * Options for the select dropdown
+   */
+  optionsList: Option[];
+
+  /**
+   * Selected option for the select dropdown
+   */
+  selectedOption?: Option;
+
+  /**
+   * onChange handler for input changes
+   */
+  onInputChangeHandler?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  /**
+   * onChange handler for dropdown changes
+   */
+  onDropdownChangeHandler?: (option: Option) => void;
+
+  /**
+   * onFocus action for input field
+   */
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+
+  /**
+   * id to select the input field uniquely
+   */
+  id?: string;
+
+  /**
+   * if on, suggestion popup will be displayed
+   */
+  autoComplete?: 'on' | 'off';
+
+  /**
+   * minimum and maximum values for the number type input field
+   */
+  minValue?: number;
+
+  maxValue?: number;
+
+  /**
+   * background of the input field prop
+   */
+  isBackgroundTransparent?: boolean;
+}

package/src/components/LazyLoad/LazyLoad.d.ts

@@ -0,0 +1,3 @@
+declare module 'LazyLoad' {
+  export * from 'react-window';
+}

package/src/components/LazyLoad/LazyLoad.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react';
+import LazyLoading from './LazyLoading';
+
+const meta: Meta = {
+  title: 'Components/LazyLoad',
+  component: LazyLoading,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+        The \`LazyLoading\` component is designed to optimize performance by only rendering the necessary parts of a large dataset that are visible within the viewport.
+        This component is particularly useful for applications that handle a significant amount of content, such as image galleries or infinite scrolling lists.
+
+        LazyLoad works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks:
+
+          i) It reduces the amount of work (and time) required to render the initial view and to process updates. \n
+          ii) It reduces the memory footprint by avoiding over-allocation of DOM nodes.`,
+        story:
+          'This is a description with [library](https://www.npmjs.com/package/react-window) to an external website.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof LazyLoading>;
+
+export const Primary: Story = {
+  render: () => <LazyLoading />,
+};
+
+export default meta;

package/src/components/LazyLoad/LazyLoad.ts

@@ -0,0 +1,2 @@
+import * as LazyLoad from 'react-window';
+export default LazyLoad;

package/src/components/LazyLoad/LazyLoading.tsx

@@ -0,0 +1,19 @@
+import LazyLoad from './LazyLoad';
+const { FixedSizeList } = LazyLoad;
+const Row = ({
+  index,
+  style,
+}: {
+  index: number;
+  style: React.CSSProperties;
+}) => <div style={style}>Row {index}</div>;
+
+const LazyLoading = () => {
+  return (
+    <FixedSizeList height={300} itemCount={100000} itemSize={30} width={400}>
+      {Row}
+    </FixedSizeList>
+  );
+};
+
+export default LazyLoading;

package/src/components/LazyLoad/index.ts

@@ -0,0 +1 @@
+export * from './LazyLoad';

package/src/components/MenuOption/MenuOption.scss

@@ -0,0 +1,69 @@
+@import '../../assets/styles/fonts';
+
+.ff-menu-option-container {
+  cursor: pointer;
+  position: relative;
+
+  .ff-icon-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    .ff-menuicon-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      &:hover {
+        background-color: var(--hover-color);
+      }
+    }
+
+    .ff-menuicon-container-clicked {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: var(--brand-color);
+      cursor: pointer;
+      &:hover {
+        background-color: var(--brand-color);
+      }
+    }
+  }
+
+  .ff-option-card {
+    position: absolute;
+    border: 1px solid var(--option-card-border-color);
+    background: var(--option-card-bg-color);
+    border-radius: 4px;
+    margin: 2px;
+    min-height: 32px;
+    min-width: 111px;
+    z-index: 100000;
+    white-space: nowrap;
+
+    .ff-options {
+      @extend .fontSm;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      padding: 8px;
+      line-height: 16px;
+      gap: 8px;
+      &:hover {
+        background-color: var(--hover-color);
+      }
+      label {
+        cursor: pointer;
+      }
+    }
+
+    .ff-disable-option {
+      opacity: 0.5;
+      cursor: no-drop;
+      label {
+        cursor: no-drop;
+      }
+    }
+  }
+}

package/src/components/MenuOption/MenuOption.stories.tsx

@@ -0,0 +1,259 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MenuOption from './MenuOption';
+import './MenuOption.scss';
+
+export const DefaultMenuOption: Story = {
+  args: {
+    iconName: 'more',
+    options: [
+      {
+        label: 'StepGroup',
+        icon: 'success',
+        value: [],
+        disable: true,
+      },
+      {
+        label: 'Script',
+        value: ['SCR101', 'SCR102'],
+        icon: 'success',
+      },
+      {
+        label: 'Script',
+        value: ['SCR101', 'SCR102'],
+        icon: 'success',
+      },
+      {
+        label: 'Script',
+        value: ['SCR101', 'SCR102'],
+        icon: 'success',
+      },
+    ],
+  },
+};
+
+const meta: Meta<typeof MenuOption> = {
+  title: 'Components/MenuOption',
+  component: MenuOption,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    iconName: {
+      control: 'text',
+      defaultValue: 'more',
+    },
+    labelName: {
+      control: 'text',
+      defaultValue: 'Controlled Menu',
+    },
+    tooltipTitle: {
+      control: 'text',
+      defaultValue: 'Select an option',
+    },
+    tooltipPlacement: {
+      control: {
+        type: 'select',
+        options: ['top', 'bottom', 'left', 'right'],
+      },
+      defaultValue: 'top',
+    },
+    dropdownPlacement: {
+      control: {
+        type: 'select',
+        options: ['top', 'bottom', 'left', 'right'],
+      },
+      defaultValue: 'bottom',
+    },
+  },
+};
+
+type Story = StoryObj<typeof MenuOption>;
+
+export const ControlledMenuOption: Story = {
+  render: (args) => {
+    const options = [
+      {
+        label: 'Option1',
+        value: 'opt1',
+        icon: 'success',
+      },
+      {
+        label: 'Option2',
+        value: 'opt2',
+        icon: 'success',
+      },
+      {
+        label: 'Delete option',
+        value: 'deleteOpt',
+        icon: 'delete',
+      },
+    ];
+
+    return (
+      <MenuOption
+        iconName={args.iconName}
+        labelName={args.labelName}
+        options={options}
+        tooltipTitle={args.tooltipTitle}
+        tooltipPlacement={args.tooltipPlacement}
+        dropdownPlacement={args.dropdownPlacement}
+      />
+    );
+  },
+};
+
+// Story for MenuOption with label
+export const MenuOptionWithLabel: Story = {
+  args: {
+    labelName: 'more',
+    iconName: 'more',
+    options: [
+      {
+        label: 'Option1',
+        value: 'opt1',
+        icon: 'success',
+      },
+      {
+        label: 'Option2',
+        value: 'opt2',
+        icon: 'success',
+      },
+    ],
+  },
+};
+
+// Story for MenuOption with disabled hover effect
+export const MenuOptionWithDisabledHoverEffect: Story = {
+  render: () => {
+    const options = [
+      {
+        label: 'StepGroup',
+        icon: 'success',
+        value: [],
+        disable: true,
+      },
+      {
+        label: 'Script',
+        value: ['SCR101', 'SCR102'],
+        icon: 'success',
+      },
+    ];
+    return (
+      <MenuOption
+        iconName="more"
+        tooltipTitle="more options"
+        tooltipPlacement="top"
+        dropdownPlacement="right"
+        options={options}
+      />
+    );
+  },
+};
+
+// Story for MenuOption with tooltip
+export const MenuOptionWithToolTip: Story = {
+  args: {
+    labelName: 'ImpactList',
+    iconName: 'success',
+    tooltipTitle: 'More Info',
+    tooltipPlacement: 'bottom',
+    options: [
+      {
+        label: 'Option1',
+        value: 'opt1',
+        icon: 'success',
+      },
+      {
+        label: 'Option2',
+        value: 'opt2',
+        icon: 'success',
+      },
+    ],
+  },
+};
+
+// Story for MenuOption with 'top' placement
+export const MenuOptionPlacementTop: Story = {
+  args: {
+    iconName: 'more',
+    labelName: 'Top Placement',
+    dropdownPlacement: 'top',
+    options: [
+      {
+        label: 'Option1',
+        value: 'opt1',
+        icon: 'success',
+      },
+      {
+        label: 'Option2',
+        value: 'opt2',
+        icon: 'success',
+      },
+    ],
+  },
+};
+
+// Story for MenuOption with 'down' placement
+export const MenuOptionPlacementDown: Story = {
+  args: {
+    iconName: 'more',
+    labelName: ' Placement',
+    dropdownPlacement: 'down',
+    options: [
+      {
+        label: 'Option1',
+        value: 'opt1',
+        icon: 'success',
+      },
+      {
+        label: 'Option2',
+        value: 'opt2',
+        icon: 'success',
+      },
+    ],
+  },
+};
+
+// Story for MenuOption with 'left' placement
+export const MenuOptionPlacementLeft: Story = {
+  args: {
+    iconName: 'more',
+    labelName: 'Left Placement',
+    dropdownPlacement: 'left',
+    options: [
+      {
+        label: 'Option1',
+        value: 'opt1',
+        icon: 'delete',
+      },
+      {
+        label: 'Option2',
+        value: 'opt2',
+        icon: 'success',
+      },
+    ],
+  },
+};
+
+// Story for MenuOption with 'right' placement
+export const MenuOptionPlacementRight: Story = {
+  args: {
+    iconName: 'more',
+    dropdownPlacement: 'right',
+    options: [
+      {
+        label: 'Option1',
+        value: 'opt1',
+        icon: 'success',
+      },
+      {
+        label: 'Option2',
+        value: 'opt2',
+        icon: 'success',
+      },
+    ],
+  },
+};
+
+export default meta;