pixel-react 1.8.4 → 1.8.5

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,61 +1,61 @@
-@mixin folding-icon-styles($color: var(--base-bg-color), $zIndex: 999999, $opacity: 1) {
-  color: $color !important;
-  fill: $color !important;
-  z-index: $zIndex !important;
-  opacity: $opacity !important;
-}
-
-/* Style for the line number gutter */
-.monaco-editor .margin {
-  background-color: var(--ff-editor-gutter-color) !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-editor .current-line-background {
-  background-color: var(--ff-editor-line-bg) !important;
-}
-
-.ff-editor-container {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  .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);
-  }
-  .monaco-editor .cldr.codicon.codicon-folding-collapsed,
-  .monaco-editor .cldr.codicon.codicon-folding-expanded,
-  .monaco-editor .cldr.codicon.codicon-folding-manual-collapsed,
-  .monaco-editor .cldr.codicon.codicon-folding-manual-expanded {
-   @include folding-icon-styles()
-  }
-  .monaco-editor .cldr.codicon.codicon-folding-expanded {
-   @include folding-icon-styles()
-  }
-  .cldr.codicon.codicon-folding-manual-collapsed {
-    @include folding-icon-styles()
-  }
-}
+@mixin folding-icon-styles($color: var(--base-bg-color), $zIndex: 999999, $opacity: 1) {
+  color: $color !important;
+  fill: $color !important;
+  z-index: $zIndex !important;
+  opacity: $opacity !important;
+}
+
+/* Style for the line number gutter */
+.monaco-editor .margin {
+  background-color: var(--ff-editor-gutter-color) !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-editor .current-line-background {
+  background-color: var(--ff-editor-line-bg) !important;
+}
+
+.ff-editor-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  .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);
+  }
+  .monaco-editor .cldr.codicon.codicon-folding-collapsed,
+  .monaco-editor .cldr.codicon.codicon-folding-expanded,
+  .monaco-editor .cldr.codicon.codicon-folding-manual-collapsed,
+  .monaco-editor .cldr.codicon.codicon-folding-manual-expanded {
+   @include folding-icon-styles()
+  }
+  .monaco-editor .cldr.codicon.codicon-folding-expanded {
+   @include folding-icon-styles()
+  }
+  .cldr.codicon.codicon-folding-manual-collapsed {
+    @include folding-icon-styles()
+  }
+}

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,
+  },
+};