pixel-react 1.6.6 → 1.6.7

package/src/components/EditTextField/types.ts

@@ -1,55 +1,55 @@
-export interface IconProps {
-  /** Name of the icon to be displayed. */
-  name: string;
-  /** Optional click handler function for the icon. */
-  onClick?: () => void;
-  /** Optional color for the icon. */
-  color?: string;
-  /** Optional height for the icon. */
-  height?: number;
-  /** Optional width for the icon. */
-  width?: number;
-  /** Optional className for the icon. */
-  className?: string;
-}
-
-export interface DropdownOption {
-  /** Unique identifier for the dropdown option. */
-  id: number;
-  /** Value associated with the dropdown option. */
-  value: string;
-  /** Label displayed for the dropdown option. */
-  label: string;
-}
-export interface LabelEditTextFieldTypes {
-  /** Label text displayed above the input field. */
-  label?: string;
-  /** Initial text displayed in the input field. */
-  text: string;
-  /** Text to be highlighted within the displayed text, if provided. */
-  highlightText?: string;
-  /** Custom error message to be displayed, if applicable. */
-  customError?: string;
-  /** Confirm icon properties including icon name and click handler. */
-  confirmIcon?: IconProps;
-  /** Cancel icon properties including icon name and click handler. */
-  cancelIcon?: IconProps;
-  editIcon?: IconProps;
-
-  /** Type of input field - standard text field or text field with a dropdown. */
-  variant?: 'textFieldWithDropdown' | 'textField';
-  /** Array of dropdown options used if the dropdown variant is selected. */
-  dropdownData?: DropdownOption[];
-  /** Width of the input field component. */
-  width?: string;
-  /** Height of the input field component. */
-  height?: string;
-  /** Function called when confirming input changes, with input and dropdown values as arguments. */
-  confirmAction?: (inputValue: string, dropdownValue: string) => void;
-
-  isOpen?: boolean;
-  /**for conditionally handle custom error */
-  customErrorCondition?: boolean;
-  onClick?: () => void;
-  nameTooltipTitle?: string;
-}
+export interface IconProps {
+  /** Name of the icon to be displayed. */
+  name: string;
+  /** Optional click handler function for the icon. */
+  onClick?: () => void;
+  /** Optional color for the icon. */
+  color?: string;
+  /** Optional height for the icon. */
+  height?: number;
+  /** Optional width for the icon. */
+  width?: number;
+  /** Optional className for the icon. */
+  className?: string;
+}
+
+export interface DropdownOption {
+  /** Unique identifier for the dropdown option. */
+  id: number;
+  /** Value associated with the dropdown option. */
+  value: string;
+  /** Label displayed for the dropdown option. */
+  label: string;
+}
+export interface LabelEditTextFieldTypes {
+  /** Label text displayed above the input field. */
+  label?: string;
+  /** Initial text displayed in the input field. */
+  text: string;
+  /** Text to be highlighted within the displayed text, if provided. */
+  highlightText?: string;
+  /** Custom error message to be displayed, if applicable. */
+  customError?: string;
+  /** Confirm icon properties including icon name and click handler. */
+  confirmIcon?: IconProps;
+  /** Cancel icon properties including icon name and click handler. */
+  cancelIcon?: IconProps;
+  editIcon?: IconProps;
+
+  /** Type of input field - standard text field or text field with a dropdown. */
+  variant?: 'textFieldWithDropdown' | 'textField';
+  /** Array of dropdown options used if the dropdown variant is selected. */
+  dropdownData?: DropdownOption[];
+  /** Width of the input field component. */
+  width?: string;
+  /** Height of the input field component. */
+  height?: string;
+  /** Function called when confirming input changes, with input and dropdown values as arguments. */
+  confirmAction?: (inputValue: string, dropdownValue: string) => void;
+
+  isOpen?: boolean;
+  /**for conditionally handle custom error */
+  customErrorCondition?: boolean;
+  onClick?: () => void;
+  nameTooltipTitle?: string;
+}

package/src/components/Editor/Editor.scss

@@ -1,56 +1,56 @@
-/* Editor container to add padding and rounded corners */
-.monaco-editor {
-  border-radius: 6px;
-  border-top: 1px solid var(--ff-editor-border-color);
-  border-right: 1px dashed var(--ff-editor-border-color);
-  border-bottom: 1px dashed var(--ff-editor-border-color);
-  border-left: 1px solid var(--ff-editor-border-color);
-}
-
-/* Style for the line number gutter */
-.monaco-editor .margin {
-  background-color: var(--ff-editor-gutter-color) !important;
-  width: 32px !important;
-}
-
-/* Style for the line numbers */
-.monaco-editor .margin .line-numbers {
-  color: var(--ff-line-number-color) !important;
-  background-color: var(--ff-line-number-bg);
-  text-align: center !important;
-}
-
-/* Active line number styling */
-.monaco-editor .margin .line-numbers.active {
-  color: var(--ff-line-number-color);
-  background-color: var(--ff-line-number-bg) !important;
-}
-
-.monaco-editor .margin-view-overlays {
-  width: 100% !important;
-}
-
-.monaco-editor .margin-view-overlays .line-numbers {
-  width: 100% !important;
-}
-
-.monaco-scrollable-element {
-  left: 32px !important;
-}
-
-.monaco-editor .current-line-background {
-  background-color: var(--ff-editor-line-bg) !important;
-}
-
-.ff-editor-container {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  .ff-top-toolbar {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 10px;
-  }
-}
+/* Editor container to add padding and rounded corners */
+.monaco-editor {
+  border-radius: 6px;
+  border-top: 1px solid var(--ff-editor-border-color);
+  border-right: 1px dashed var(--ff-editor-border-color);
+  border-bottom: 1px dashed var(--ff-editor-border-color);
+  border-left: 1px solid var(--ff-editor-border-color);
+}
+
+/* Style for the line number gutter */
+.monaco-editor .margin {
+  background-color: var(--ff-editor-gutter-color) !important;
+  width: 32px !important;
+}
+
+/* Style for the line numbers */
+.monaco-editor .margin .line-numbers {
+  color: var(--ff-line-number-color) !important;
+  background-color: var(--ff-line-number-bg);
+  text-align: center !important;
+}
+
+/* Active line number styling */
+.monaco-editor .margin .line-numbers.active {
+  color: var(--ff-line-number-color);
+  background-color: var(--ff-line-number-bg) !important;
+}
+
+.monaco-editor .margin-view-overlays {
+  width: 100% !important;
+}
+
+.monaco-editor .margin-view-overlays .line-numbers {
+  width: 100% !important;
+}
+
+.monaco-scrollable-element {
+  left: 32px !important;
+}
+
+.monaco-editor .current-line-background {
+  background-color: var(--ff-editor-line-bg) !important;
+}
+
+.ff-editor-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  .ff-top-toolbar {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+  }
+}

package/src/components/Editor/Editor.stories.tsx

@@ -1,54 +1,54 @@
-// EditorComponent.stories.tsx
-import { Meta, StoryObj } from '@storybook/react';
-import Editor from './Editor';
-import { EditorProps } from './types';
-import { variableList } from './constants';
-import { useState } from 'react';
-
-const meta: Meta<EditorProps> = {
-  title: 'Components/Editor',
-  component: Editor,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    language: {
-      control: {
-        type: 'select',
-        options: ['javascript', 'html', 'json', 'plaintext', 'xml'],
-      },
-      description: 'Select the content type for the editor',
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<EditorProps>;
-
-export const Default: Story = {
-  render: (args) => {
-    const [value, setValue] = useState('// Start typing your code here');
-
-    const handleChange = (newValue: string | undefined): void => {
-      setValue(newValue || '');
-    };
-
-    return (
-      <Editor
-        {...args}
-        value={value}
-        setValue={setValue}
-        handleChange={handleChange}
-      />
-    );
-  },
-  args: {
-    language: 'javascript',
-    width: '100%',
-    height: '90vh',
-    readOnly: false,
-    variableOptionsList: variableList,
-  },
-};
+// EditorComponent.stories.tsx
+import { Meta, StoryObj } from '@storybook/react';
+import Editor from './Editor';
+import { EditorProps } from './types';
+import { variableList } from './constants';
+import { useState } from 'react';
+
+const meta: Meta<EditorProps> = {
+  title: 'Components/Editor',
+  component: Editor,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    language: {
+      control: {
+        type: 'select',
+        options: ['javascript', 'html', 'json', 'plaintext', 'xml'],
+      },
+      description: 'Select the content type for the editor',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<EditorProps>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [value, setValue] = useState('// Start typing your code here');
+
+    const handleChange = (newValue: string | undefined): void => {
+      setValue(newValue || '');
+    };
+
+    return (
+      <Editor
+        {...args}
+        value={value}
+        setValue={setValue}
+        handleChange={handleChange}
+      />
+    );
+  },
+  args: {
+    language: 'javascript',
+    width: '100%',
+    height: '90vh',
+    readOnly: false,
+    variableOptionsList: variableList,
+  },
+};