pixel-react 1.6.5 → 1.6.6

package/src/components/DatePicker/types.ts

@@ -1,105 +1,105 @@
-export interface DatePickerProps {
-  /**
-   * The minimum selectable date.
-   */
-  minDate?: DateValue;
-
-  /**
-   * The maximum selectable date.
-   */
-  maxDate?: DateValue;
-
-  /**
-   * Selected date value.
-   */
-  value?: DateValue;
-
-  /**
-   * Function to handle date selection.
-   */
-  onChange: (value: DateValue) => void;
-
-  /**
-   * Placeholder text for the input field.
-   */
-  placeholder?: string;
-
-  /**
-   * Disables the date picker.
-   */
-  disabled?: boolean;
-
-  /**
-   * Format for displaying the selected date. Default is 'EEEE, dd MMM yyyy'.
-   */
-  dateFormat?: string;
-
-  /**
-   * Format for displaying the selected time. Default is 'hh:mm a'.
-   */
-  timeFormat?: string;
-
-  /**
-   * Timezone for the date picker.
-   */
-  timezone?: string;
-
-  /**
-   * Custom width for the calendar. This will override the default width of the calendar.
-   */
-  calendarWidth?: number;
-
-  /**
-   * When true, displays the input field error.
-   */
-  error?: boolean;
-
-  /**
-   * Helper text to display below the input field, used for error messages or instructions.
-   */
-  helperText?: string | undefined;
-
-  /**
-   * Select only date .
-   */
-  dateOnly?: boolean;
-}
-
-export type DateValue = Date | undefined;
-
-export interface CustomCaptionProps {
-  children?: React.ReactNode; // You can use ReactNode as a fallback for dynamic content
-}
-
-export interface CustomCalenderButtonProps {
-  className?: string;
-  disabled?: boolean | undefined;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}
-
-export interface TimePickerProps {
-  /**
-   * The current time value, in string format (e.g., '14:30').
-   */
-  value: string;
-
-  /**
-   * Function to handle time selection changes, receiving the selected time as a string.
-   */
-  onChange: (time: string) => void;
-
-  /**
-   * The minimum selectable time, used to restrict the earliest selectable time.
-   */
-  minTime?: string;
-
-  /**
-   * The maximum selectable time, used to restrict the latest selectable time.
-   */
-  maxTime?: string;
-
-  /**
-   * Function to handle error state changes, receiving a boolean indicating the presence of an error.
-   */
-  onErrorChange: (error: boolean) => void;
-}
+export interface DatePickerProps {
+  /**
+   * The minimum selectable date.
+   */
+  minDate?: DateValue;
+
+  /**
+   * The maximum selectable date.
+   */
+  maxDate?: DateValue;
+
+  /**
+   * Selected date value.
+   */
+  value?: DateValue;
+
+  /**
+   * Function to handle date selection.
+   */
+  onChange: (value: DateValue) => void;
+
+  /**
+   * Placeholder text for the input field.
+   */
+  placeholder?: string;
+
+  /**
+   * Disables the date picker.
+   */
+  disabled?: boolean;
+
+  /**
+   * Format for displaying the selected date. Default is 'EEEE, dd MMM yyyy'.
+   */
+  dateFormat?: string;
+
+  /**
+   * Format for displaying the selected time. Default is 'hh:mm a'.
+   */
+  timeFormat?: string;
+
+  /**
+   * Timezone for the date picker.
+   */
+  timezone?: string;
+
+  /**
+   * Custom width for the calendar. This will override the default width of the calendar.
+   */
+  calendarWidth?: number;
+
+  /**
+   * When true, displays the input field error.
+   */
+  error?: boolean;
+
+  /**
+   * Helper text to display below the input field, used for error messages or instructions.
+   */
+  helperText?: string | undefined;
+
+  /**
+   * Select only date .
+   */
+  dateOnly?: boolean;
+}
+
+export type DateValue = Date | undefined;
+
+export interface CustomCaptionProps {
+  children?: React.ReactNode; // You can use ReactNode as a fallback for dynamic content
+}
+
+export interface CustomCalenderButtonProps {
+  className?: string;
+  disabled?: boolean | undefined;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+export interface TimePickerProps {
+  /**
+   * The current time value, in string format (e.g., '14:30').
+   */
+  value: string;
+
+  /**
+   * Function to handle time selection changes, receiving the selected time as a string.
+   */
+  onChange: (time: string) => void;
+
+  /**
+   * The minimum selectable time, used to restrict the earliest selectable time.
+   */
+  minTime?: string;
+
+  /**
+   * The maximum selectable time, used to restrict the latest selectable time.
+   */
+  maxTime?: string;
+
+  /**
+   * Function to handle error state changes, receiving a boolean indicating the presence of an error.
+   */
+  onErrorChange: (error: boolean) => void;
+}

package/src/components/DownloadClient/DownloadClient.scss

@@ -1,80 +1,80 @@
-@use '../../assets/styles/colors' as *;
-@use '../../assets/styles/fonts';
-@use '../../assets/styles/mixins' as *;
-
-.ff-download-client-overlay {
-  width: 378px;
-  height: 217px;  
-  position: absolute;
-  @include center-content;
-  z-index: 9999;
-
-  .ff-download-client-container {
-    width: 370px;
-    @include center-content;
-    flex-direction: column;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    border: 1px solid var(--download-client-border-color);
-    margin-left: 5px;
-
-    .ff-download-client-header {
-      width: 100%;
-      @include center-content;
-      justify-content: space-between;
-      padding: 7px 4px;
-      margin-bottom: 8px;
-      border-radius: 4px 4px 0 0;
-      background-color: var(--download-client-header-bg-color);
-      box-sizing: border-box;
-
-      .ff-header-arrow {
-        content: "";
-        display: block;
-        position: absolute;
-        top: 10px;
-        right: 70px;
-        width: 10px;
-        height: 10px;
-        background-color: var(--download-client-icon-container-bg-color) ;
-        transform: translateY(-50%) rotate(-45deg);
-        z-index: -999;
-        border: 1px solid var(--download-client-header-bg-color); 
-      }
-
-    }
-
-    .ff-download-client-content {
-      width: 100%;
-      @include center-content;
-      flex-direction: column;
-      padding-left: 8px;
-      padding-right: 24px;
-      gap: 8px;
-      margin-bottom: 8px;
-      color: var(--popup-text-color);
-      .ff-download-install,
-      .ff-choose-os {
-        padding: 4px 0;
-      }
-    }
-
-    .ff-download-client-actions {
-      width: 240px;
-      @include center-content;
-      gap: 12px;
-      margin-bottom: 17px;
-      .ff-icons-container {
-        @include center-content;
-        width: 64px;
-        height: 64px;
-        border-radius: 8px;
-        border: 1px solid var(--download-client-icon-container-border-color);
-        background-color: var(--download-client-icon-container-bg-color);
-        cursor: pointer;
-        box-shadow: 0px 0px 10px 0px
-          var(--download-client-icon-container-box-shadow-color);
-      }
-    }
-  }
-}
+@use '../../assets/styles/colors' as *;
+@use '../../assets/styles/fonts';
+@use '../../assets/styles/mixins' as *;
+
+.ff-download-client-overlay {
+  width: 378px;
+  height: 217px;  
+  position: absolute;
+  @include center-content;
+  z-index: 9999;
+
+  .ff-download-client-container {
+    width: 370px;
+    @include center-content;
+    flex-direction: column;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--download-client-border-color);
+    margin-left: 5px;
+
+    .ff-download-client-header {
+      width: 100%;
+      @include center-content;
+      justify-content: space-between;
+      padding: 7px 4px;
+      margin-bottom: 8px;
+      border-radius: 4px 4px 0 0;
+      background-color: var(--download-client-header-bg-color);
+      box-sizing: border-box;
+
+      .ff-header-arrow {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 10px;
+        right: 70px;
+        width: 10px;
+        height: 10px;
+        background-color: var(--download-client-icon-container-bg-color) ;
+        transform: translateY(-50%) rotate(-45deg);
+        z-index: -999;
+        border: 1px solid var(--download-client-header-bg-color); 
+      }
+
+    }
+
+    .ff-download-client-content {
+      width: 100%;
+      @include center-content;
+      flex-direction: column;
+      padding-left: 8px;
+      padding-right: 24px;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--popup-text-color);
+      .ff-download-install,
+      .ff-choose-os {
+        padding: 4px 0;
+      }
+    }
+
+    .ff-download-client-actions {
+      width: 240px;
+      @include center-content;
+      gap: 12px;
+      margin-bottom: 17px;
+      .ff-icons-container {
+        @include center-content;
+        width: 64px;
+        height: 64px;
+        border-radius: 8px;
+        border: 1px solid var(--download-client-icon-container-border-color);
+        background-color: var(--download-client-icon-container-bg-color);
+        cursor: pointer;
+        box-shadow: 0px 0px 10px 0px
+          var(--download-client-icon-container-box-shadow-color);
+      }
+    }
+  }
+}

package/src/components/DownloadClient/DownloadClient.stories.tsx

@@ -1,26 +1,26 @@
-import { Meta, StoryObj } from '@storybook/react';
-import DownloadClient from './DownloadClient';
-
-const meta: Meta<typeof DownloadClient> = {
-  title: 'Components/DownloadClient',
-  component: DownloadClient,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof DownloadClient>;
-
-export const Default: Story = {
-  args: {
-    onClose: () =>{},
-    onClickWindows: () =>{},
-    onClickLinux: () =>{},
-    onClickMac: () =>{},
-    top: '100px',  
-    left: '50px',
-  },
-};
-
-export default meta;
+import { Meta, StoryObj } from '@storybook/react';
+import DownloadClient from './DownloadClient';
+
+const meta: Meta<typeof DownloadClient> = {
+  title: 'Components/DownloadClient',
+  component: DownloadClient,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof DownloadClient>;
+
+export const Default: Story = {
+  args: {
+    onClose: () =>{},
+    onClickWindows: () =>{},
+    onClickLinux: () =>{},
+    onClickMac: () =>{},
+    top: '100px',  
+    left: '50px',
+  },
+};
+
+export default meta;

package/src/components/DownloadClient/DownloadClient.tsx

@@ -1,81 +1,81 @@
-import { useEffect } from 'react';
-import './DownloadClient.scss';
-import Icon from '../Icon';
-import Typography from '../Typography';
-import { DownloadClientProps } from './type';
-
-const DownloadClient: React.FC<DownloadClientProps> = ({
-  onClose,
-  onClickWindows,
-  onClickLinux,
-  onClickMac,
-  top = '10px',
-  left = '10px',
-}) => {
-  const title = 'Download Client';
-  const description =
-    'Download and Install the fireflink client to run the script';
-  const chooseOSText = 'Choose OS';
-
-  useEffect(() => {
-    const handleCloseDownloadClient = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose?.();
-      }
-    };
-    document.addEventListener('keydown', handleCloseDownloadClient);
-    return () => {
-      document.removeEventListener('keydown', handleCloseDownloadClient);
-    };
-  }, [onClose]);
-
-  return (
-    <div className="ff-download-client-overlay" style={{ top, left }}>
-      <div className="ff-download-client-container">
-        <div className="ff-download-client-header">
-          <div className="ff-header-arrow"></div>
-          <Typography
-            color="var(--table-header-text-color)"
-            fontWeight="semi-bold"
-          >
-            {title}
-          </Typography>
-          <div onClick={onClose}>
-            <Icon name="close" width={12} height={12} />
-          </div>
-        </div>
-        <div className="ff-download-client-content">
-          <div className="ff-download-install">
-            <Typography
-              fontWeight="semi-bold"
-              color="var(--download-client-content-text-color)"
-            >
-              {description}
-            </Typography>
-          </div>
-          <div className="ff-choose-os">
-            <Typography
-              fontWeight="semi-bold"
-              color="var(--download-client-choose-os-text-color)"
-            >
-              {chooseOSText}
-            </Typography>
-          </div>
-        </div>
-        <div className="ff-download-client-actions">
-          <div className="ff-icons-container" onClick={onClickWindows}>
-            <Icon name="windows" width={32} height={38} />
-          </div>
-          <div className="ff-icons-container" onClick={onClickLinux}>
-            <Icon name="linux" width={32} height={38} />
-          </div>
-          <div className="ff-icons-container" onClick={onClickMac}>
-            <Icon name="mac_icon" width={32} height={38} />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DownloadClient;
+import { useEffect } from 'react';
+import './DownloadClient.scss';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import { DownloadClientProps } from './type';
+
+const DownloadClient: React.FC<DownloadClientProps> = ({
+  onClose,
+  onClickWindows,
+  onClickLinux,
+  onClickMac,
+  top = '10px',
+  left = '10px',
+}) => {
+  const title = 'Download Client';
+  const description =
+    'Download and Install the fireflink client to run the script';
+  const chooseOSText = 'Choose OS';
+
+  useEffect(() => {
+    const handleCloseDownloadClient = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose?.();
+      }
+    };
+    document.addEventListener('keydown', handleCloseDownloadClient);
+    return () => {
+      document.removeEventListener('keydown', handleCloseDownloadClient);
+    };
+  }, [onClose]);
+
+  return (
+    <div className="ff-download-client-overlay" style={{ top, left }}>
+      <div className="ff-download-client-container">
+        <div className="ff-download-client-header">
+          <div className="ff-header-arrow"></div>
+          <Typography
+            color="var(--table-header-text-color)"
+            fontWeight="semi-bold"
+          >
+            {title}
+          </Typography>
+          <div onClick={onClose}>
+            <Icon name="close" width={12} height={12} />
+          </div>
+        </div>
+        <div className="ff-download-client-content">
+          <div className="ff-download-install">
+            <Typography
+              fontWeight="semi-bold"
+              color="var(--download-client-content-text-color)"
+            >
+              {description}
+            </Typography>
+          </div>
+          <div className="ff-choose-os">
+            <Typography
+              fontWeight="semi-bold"
+              color="var(--download-client-choose-os-text-color)"
+            >
+              {chooseOSText}
+            </Typography>
+          </div>
+        </div>
+        <div className="ff-download-client-actions">
+          <div className="ff-icons-container" onClick={onClickWindows}>
+            <Icon name="windows" width={32} height={38} />
+          </div>
+          <div className="ff-icons-container" onClick={onClickLinux}>
+            <Icon name="linux" width={32} height={38} />
+          </div>
+          <div className="ff-icons-container" onClick={onClickMac}>
+            <Icon name="mac_icon" width={32} height={38} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DownloadClient;

package/src/components/DownloadClient/type.ts

@@ -1,41 +1,41 @@
-export interface DownloadClientProps {
-    /**
-     * Title of the popup.
-     */
-    title: string;
-  
-    /**
-     * Description or body text of the popup.
-     */
-    description: string;
-  
-    /**
-     * Callback for when the "Cancel" icon is clicked.
-     */
-    onCancel: () => void;
-  
-    /**
-     * Callback for when the "Download for Windows" icon is clicked.
-     */
-    onDownloadWindows: () => void;
-  
-    /**
-     * Callback for when the "Download for macOS" icon is clicked.
-     */
-    onDownloadMac: () => void;
-  
-    /**
-     * Optional flag to control whether to display icons for download actions instead of buttons.
-     * Defaults to `false` for buttons.
-     */
-    showIcons?: boolean;
-  }
-  
-export interface DownloadClientProps {
-    onClose?: () => void;
-    onClickWindows: () => void;
-    onClickLinux: () => void;
-    onClickMac: () => void;
-    top?: string;
-    left?: string;
+export interface DownloadClientProps {
+    /**
+     * Title of the popup.
+     */
+    title: string;
+  
+    /**
+     * Description or body text of the popup.
+     */
+    description: string;
+  
+    /**
+     * Callback for when the "Cancel" icon is clicked.
+     */
+    onCancel: () => void;
+  
+    /**
+     * Callback for when the "Download for Windows" icon is clicked.
+     */
+    onDownloadWindows: () => void;
+  
+    /**
+     * Callback for when the "Download for macOS" icon is clicked.
+     */
+    onDownloadMac: () => void;
+  
+    /**
+     * Optional flag to control whether to display icons for download actions instead of buttons.
+     * Defaults to `false` for buttons.
+     */
+    showIcons?: boolean;
+  }
+  
+export interface DownloadClientProps {
+    onClose?: () => void;
+    onClickWindows: () => void;
+    onClickLinux: () => void;
+    onClickMac: () => void;
+    top?: string;
+    left?: string;
   }  

package/src/components/DragAndDrop/DragAndDrop.d.ts

@@ -1,5 +1,5 @@
-declare module 'DragAndDrop' {
-  export * from '@dnd-kit/core';
-  export * from '@dnd-kit/sortable';
-  export * from '@dnd-kit/utilities';
-}
+declare module 'DragAndDrop' {
+  export * from '@dnd-kit/core';
+  export * from '@dnd-kit/sortable';
+  export * from '@dnd-kit/utilities';
+}