pixel-react 1.5.3 → 1.5.4

package/src/components/DatePicker/types.ts

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

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

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

@@ -0,0 +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;

package/src/components/DownloadClient/DownloadClient.tsx

@@ -0,0 +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;

package/src/components/DownloadClient/index.ts

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

package/src/components/DownloadClient/type.ts

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

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

package/src/components/DragAndDrop/DragAndDrop.stories.tsx

@@ -1,25 +1,25 @@
-import { Meta, StoryObj } from '@storybook/react';
-import DragAndDropList from './DragAndDropList';
-
-const meta: Meta<typeof DragAndDropList> = {
-  title: 'Components/DragAndDrop',
-  component: DragAndDropList,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: `It is a drag and drop list component that allows users to reorder items by dragging and dropping them. Library used is dnd-kit/core, dnd-kit/sortable, dnd-kit/utilities`,
-        story:
-          'This is a link of [dnd-kit library](https://www.npmjs.com/package/@dnd-kit/core) for reference to an external website.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof DragAndDropList>;
-
-export const Primary: Story = {
-  render: () => <DragAndDropList />,
-};
-export default meta;
+import { Meta, StoryObj } from '@storybook/react';
+import DragAndDropList from './DragAndDropList';
+
+const meta: Meta<typeof DragAndDropList> = {
+  title: 'Components/DragAndDrop',
+  component: DragAndDropList,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `It is a drag and drop list component that allows users to reorder items by dragging and dropping them. Library used is dnd-kit/core, dnd-kit/sortable, dnd-kit/utilities`,
+        story:
+          'This is a link of [dnd-kit library](https://www.npmjs.com/package/@dnd-kit/core) for reference to an external website.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof DragAndDropList>;
+
+export const Primary: Story = {
+  render: () => <DragAndDropList />,
+};
+export default meta;

package/src/components/DragAndDrop/DragAndDrop.ts

@@ -1,7 +1,7 @@
-import * as DNDCore from '@dnd-kit/core';
-import * as DNDSortable from '@dnd-kit/sortable';
-import * as DNDUtilities from '@dnd-kit/utilities';
-
-const DragAndDrop = { DNDCore, DNDSortable, DNDUtilities };
-
-export default DragAndDrop;
+import * as DNDCore from '@dnd-kit/core';
+import * as DNDSortable from '@dnd-kit/sortable';
+import * as DNDUtilities from '@dnd-kit/utilities';
+
+const DragAndDrop = { DNDCore, DNDSortable, DNDUtilities };
+
+export default DragAndDrop;

package/src/components/DragAndDrop/DragAndDropList.scss

@@ -1,69 +1,69 @@
-$primary-color: #2563eb;
-$primary-hover-color: #235dda;
-$background-color: #f2f2f3;
-$white-color: #fff;
-$border-radius: 5px;
-$box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-$checkbox-size: 20px;
-
-.drag-and-drop-list {
-  height: max-content;
-  width: fit-content;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 30px;
-}
-
-.column {
-  background-color: $background-color;
-  border-radius: $border-radius;
-  padding: 15px;
-  width: 80%;
-  max-width: 500px;
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-
-  .task {
-    background-color: $white-color;
-    border-radius: $border-radius;
-    box-shadow: $box-shadow;
-    padding: 4px 8px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 20px;
-    cursor: grab;
-    &-title {
-      word-break: break-all;
-    }
-  }
-}
-
-.container {
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-
-  .input {
-    border: 2px solid #ddd;
-    border-radius: $border-radius;
-    padding: 10px;
-    width: 200px;
-  }
-
-  .button {
-    border: none;
-    border-radius: $border-radius;
-    padding: 10px 15px;
-    background-color: $primary-color;
-    color: $white-color;
-    cursor: pointer;
-    margin-left: 10px;
-
-    &:hover {
-      background-color: $primary-hover-color;
-    }
-  }
-}
+$primary-color: #2563eb;
+$primary-hover-color: #235dda;
+$background-color: #f2f2f3;
+$white-color: #fff;
+$border-radius: 5px;
+$box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+$checkbox-size: 20px;
+
+.drag-and-drop-list {
+  height: max-content;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 30px;
+}
+
+.column {
+  background-color: $background-color;
+  border-radius: $border-radius;
+  padding: 15px;
+  width: 80%;
+  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  .task {
+    background-color: $white-color;
+    border-radius: $border-radius;
+    box-shadow: $box-shadow;
+    padding: 4px 8px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 20px;
+    cursor: grab;
+    &-title {
+      word-break: break-all;
+    }
+  }
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+
+  .input {
+    border: 2px solid #ddd;
+    border-radius: $border-radius;
+    padding: 10px;
+    width: 200px;
+  }
+
+  .button {
+    border: none;
+    border-radius: $border-radius;
+    padding: 10px 15px;
+    background-color: $primary-color;
+    color: $white-color;
+    cursor: pointer;
+    margin-left: 10px;
+
+    &:hover {
+      background-color: $primary-hover-color;
+    }
+  }
+}