pixel-react 1.8.2 → 1.8.4

package/src/components/CreateVariable/CreateVariableSlider.stories.tsx

@@ -1,66 +1,66 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import CreateVariableSlider from './CreateVariableSlider';
-import { CreateVariableProps } from './types';
-import React from 'react';
-
-const meta: Meta<typeof CreateVariableSlider> = {
-  title: 'Components/CreateVariableSlider',
-  component: CreateVariableSlider,
-};
-
-export default meta;
-type Story = StoryObj<typeof CreateVariableSlider>;
-
-export const WithState: Story = {
-  render: (args) => {
-    const [variableName, setVariableName] = useState('');
-    const [value, setValue] = useState('');
-    const [selectedVariableType, setSelectedVariableType] = useState({
-      label: 'Local Variable',
-      value: 'LOCAL',
-    });
-    const [hideValue, setHideValue] = useState(false);
-
-    const variableTypeList = [
-      { label: 'Local Variable', value: 'LOCAL' },
-      { label: 'Global Variable', value: 'GLOBAL' },
-      { label: 'Project Environment Variable', value: 'PROJECT_ENVIRONMENT' },
-    ];
-    const handleNameChange = (value) => {
-      setVariableName(value);
-    };
-    const handleValueChange = (value) => {
-      setValue(value);
-    };
-    const handleTypeChange = (value) => {
-      setSelectedVariableType(value);
-    };
-    const handleSubmit = () => {
-      let variable = {
-        name: variableName,
-        value,
-        type: selectedVariableType.value,
-        hideValue,
-      };
-      console.log('Variable :', variable);
-    };
-
-    return (
-      <CreateVariableSlider
-        {...args}
-        isOpen={true} // Ensures the drawer is open for interaction
-        variableName={variableName}
-        value={value}
-        selectedVariableType={selectedVariableType}
-        hideValue={hideValue}
-        variableTypesList={variableTypeList}
-        onNameChange={handleNameChange}
-        onValueChange={handleValueChange}
-        onVariableTypeChange={handleTypeChange}
-        onHideChange={setHideValue}
-        handleSubmit={handleSubmit}
-      />
-    );
-  },
-};
+import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import CreateVariableSlider from './CreateVariableSlider';
+import { CreateVariableProps } from './types';
+import React from 'react';
+
+const meta: Meta<typeof CreateVariableSlider> = {
+  title: 'Components/CreateVariableSlider',
+  component: CreateVariableSlider,
+};
+
+export default meta;
+type Story = StoryObj<typeof CreateVariableSlider>;
+
+export const WithState: Story = {
+  render: (args) => {
+    const [variableName, setVariableName] = useState('');
+    const [value, setValue] = useState('');
+    const [selectedVariableType, setSelectedVariableType] = useState({
+      label: 'Local Variable',
+      value: 'LOCAL',
+    });
+    const [hideValue, setHideValue] = useState(false);
+
+    const variableTypeList = [
+      { label: 'Local Variable', value: 'LOCAL' },
+      { label: 'Global Variable', value: 'GLOBAL' },
+      { label: 'Project Environment Variable', value: 'PROJECT_ENVIRONMENT' },
+    ];
+    const handleNameChange = (value) => {
+      setVariableName(value);
+    };
+    const handleValueChange = (value) => {
+      setValue(value);
+    };
+    const handleTypeChange = (value) => {
+      setSelectedVariableType(value);
+    };
+    const handleSubmit = () => {
+      let variable = {
+        name: variableName,
+        value,
+        type: selectedVariableType.value,
+        hideValue,
+      };
+      console.log('Variable :', variable);
+    };
+
+    return (
+      <CreateVariableSlider
+        {...args}
+        isOpen={true} // Ensures the drawer is open for interaction
+        variableName={variableName}
+        value={value}
+        selectedVariableType={selectedVariableType}
+        hideValue={hideValue}
+        variableTypesList={variableTypeList}
+        onNameChange={handleNameChange}
+        onValueChange={handleValueChange}
+        onVariableTypeChange={handleTypeChange}
+        onHideChange={setHideValue}
+        handleSubmit={handleSubmit}
+      />
+    );
+  },
+};

package/src/components/CreateVariable/CreateVariableSlider.tsx

@@ -1,95 +1,95 @@
-import { type FC, type JSX } from 'react';
-import Drawer from '../Drawer';
-import { CreateVariableProps } from './types';
-import Input from '../Input';
-import Select from '../Select';
-import './CreateVariableSlider.scss';
-import Checkbox from '../Checkbox';
-import Icon from '../Icon';
-import Button from '../Button';
-import Tooltip from '../Tooltip';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-
-const CreateVariableSlider: FC<CreateVariableProps> = ({
-  isOpen,
-  variableTypesList = [],
-  onClose,
-  onNameChange,
-  onValueChange,
-  variableName,
-  value,
-  onVariableTypeChange,
-  selectedVariableType,
-  hideValue = false,
-  onHideChange,
-  handleSubmit,
-}): JSX.Element => {
-  const FooterContent: FC = (): JSX.Element => {
-    return (
-      <div className="ff-create-slider-footer">
-        <Button onClick={onClose} label="Cancel" variant="tertiary" />
-        <Button
-          variant="primary"
-          label="create"
-          type="submit"
-          onClick={handleSubmit}
-          disabled={checkEmpty(variableName) || checkEmpty(value)}
-        />
-      </div>
-    );
-  };
-  return (
-    <Drawer
-      onClose={onClose}
-      isOpen={isOpen}
-      title="Create Variable"
-      width="284px"
-      height="222px"
-      top="35%"
-      right={8}
-      isFooterRequired={true}
-      overlay
-      footerContent={<FooterContent />}
-    >
-      <div className="ff-create-variable-slider">
-        <Input
-          label="Variable Name"
-          required
-          type="text"
-          name="variable name"
-          value={variableName || ''}
-          onChange={(event) => onNameChange(event.target.value)}
-        />
-        <Select
-          label="Variable Type"
-          required
-          onChange={(option: any) => onVariableTypeChange(option)}
-          selectedOption={selectedVariableType}
-          optionsList={variableTypesList}
-          optionZIndex={99999}
-        />
-        <Input
-          label="Variable Value"
-          required
-          type="text"
-          name="value"
-          value={value || ''}
-          onChange={(event) => onValueChange(event.target.value)}
-        />
-        <div className="ff-hide-value-content">
-          <Checkbox
-            onChange={(event) => onHideChange(event.target.checked)}
-            name="hide value"
-            label="Hide Value"
-            checked={hideValue}
-          />
-          <Tooltip title="Once the value is hidden, it cannot be undone">
-            <Icon name="info" width={12} height={12} />
-          </Tooltip>
-        </div>
-      </div>
-    </Drawer>
-  );
-};
-
-export default CreateVariableSlider;
+import { type FC, type JSX } from 'react';
+import Drawer from '../Drawer';
+import { CreateVariableProps } from './types';
+import Input from '../Input';
+import Select from '../Select';
+import './CreateVariableSlider.scss';
+import Checkbox from '../Checkbox';
+import Icon from '../Icon';
+import Button from '../Button';
+import Tooltip from '../Tooltip';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+
+const CreateVariableSlider: FC<CreateVariableProps> = ({
+  isOpen,
+  variableTypesList = [],
+  onClose,
+  onNameChange,
+  onValueChange,
+  variableName,
+  value,
+  onVariableTypeChange,
+  selectedVariableType,
+  hideValue = false,
+  onHideChange,
+  handleSubmit,
+}): JSX.Element => {
+  const FooterContent: FC = (): JSX.Element => {
+    return (
+      <div className="ff-create-slider-footer">
+        <Button onClick={onClose} label="Cancel" variant="tertiary" />
+        <Button
+          variant="primary"
+          label="create"
+          type="submit"
+          onClick={handleSubmit}
+          disabled={checkEmpty(variableName) || checkEmpty(value)}
+        />
+      </div>
+    );
+  };
+  return (
+    <Drawer
+      onClose={onClose}
+      isOpen={isOpen}
+      title="Create Variable"
+      width="284px"
+      height="222px"
+      top="35%"
+      right={8}
+      isFooterRequired={true}
+      overlay
+      footerContent={<FooterContent />}
+    >
+      <div className="ff-create-variable-slider">
+        <Input
+          label="Variable Name"
+          required
+          type="text"
+          name="variable name"
+          value={variableName || ''}
+          onChange={(event) => onNameChange(event.target.value)}
+        />
+        <Select
+          label="Variable Type"
+          required
+          onChange={(option: any) => onVariableTypeChange(option)}
+          selectedOption={selectedVariableType}
+          optionsList={variableTypesList}
+          optionZIndex={99999}
+        />
+        <Input
+          label="Variable Value"
+          required
+          type="text"
+          name="value"
+          value={value || ''}
+          onChange={(event) => onValueChange(event.target.value)}
+        />
+        <div className="ff-hide-value-content">
+          <Checkbox
+            onChange={(event) => onHideChange(event.target.checked)}
+            name="hide value"
+            label="Hide Value"
+            checked={hideValue}
+          />
+          <Tooltip title="Once the value is hidden, it cannot be undone">
+            <Icon name="info" width={12} height={12} />
+          </Tooltip>
+        </div>
+      </div>
+    </Drawer>
+  );
+};
+
+export default CreateVariableSlider;

package/src/components/CreateVariable/index.ts

@@ -1 +1 @@
-export { default } from './CreateVariableSlider';
+export { default } from './CreateVariableSlider';

package/src/components/CreateVariable/types.ts

@@ -1,58 +1,58 @@
-export type variableType = 'LOCAL' | 'GLOBAL' | 'GROUP' | 'PROJECT_ENVIRONMENT';
-
-export type DynamicObj = {
-  [key: string]: any;
-};
-
-export interface CreateVariableProps {
-  /**
-   * Open Create variable Slider
-   */
-  isOpen: boolean;
-  /**
-   * Value for the variable name
-   */
-  variableName: string;
-  /**
-   * Value for the variable to be created
-   */
-  value: string;
-  /**
-   * List for the variable types
-   */
-  variableTypesList: DynamicObj[];
-  /**
-   * Selected variable type
-   */
-  selectedVariableType: DynamicObj;
-  /**
-   * Function to handle variable type change
-   * @param option
-   * @returns
-   */
-  onVariableTypeChange: (option: DynamicObj) => void;
-  /**
-   * Function to handle close
-   */
-  onClose?: () => void;
-  /**
-   * onChange of name
-   */
-  onNameChange: (value: string) => void;
-  /**
-   * onChange of value
-   */
-  onValueChange: (value: string) => void;
-  /**
-   * Hide value
-   */
-  hideValue: boolean;
-  /**
-   * onChange for hide value
-   */
-  onHideChange: (value: boolean) => void;
-  /**
-   * Function to handle submit
-   */
-  handleSubmit: () => void;
-}
+export type variableType = 'LOCAL' | 'GLOBAL' | 'GROUP' | 'PROJECT_ENVIRONMENT';
+
+export type DynamicObj = {
+  [key: string]: any;
+};
+
+export interface CreateVariableProps {
+  /**
+   * Open Create variable Slider
+   */
+  isOpen: boolean;
+  /**
+   * Value for the variable name
+   */
+  variableName: string;
+  /**
+   * Value for the variable to be created
+   */
+  value: string;
+  /**
+   * List for the variable types
+   */
+  variableTypesList: DynamicObj[];
+  /**
+   * Selected variable type
+   */
+  selectedVariableType: DynamicObj;
+  /**
+   * Function to handle variable type change
+   * @param option
+   * @returns
+   */
+  onVariableTypeChange: (option: DynamicObj) => void;
+  /**
+   * Function to handle close
+   */
+  onClose?: () => void;
+  /**
+   * onChange of name
+   */
+  onNameChange: (value: string) => void;
+  /**
+   * onChange of value
+   */
+  onValueChange: (value: string) => void;
+  /**
+   * Hide value
+   */
+  hideValue: boolean;
+  /**
+   * onChange for hide value
+   */
+  onHideChange: (value: boolean) => void;
+  /**
+   * Function to handle submit
+   */
+  handleSubmit: () => void;
+}