pixel-react 1.6.6 → 1.6.8

package/src/components/Excel/ExcelFile.stories.tsx

@@ -1,167 +1,167 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ExcelFile from './ExcelFile/ExcelFile';
-
-const meta: Meta<typeof ExcelFile> = {
-  title: 'Components/ExcelFile',
-  component: ExcelFile,
-  tags: ['autodocs'],
-  argTypes: {
-    toolbar: {
-      control: { type: 'radio' },
-      options: ['show', 'disable', 'hide'],
-      description: 'Controls whether the toolbar is shown, disabled, or hidden',
-    },
-    excelData: {
-      description: 'The Excel data containing sheets and their content',
-    },
-    contextOption: {
-      description: 'Provide context menu options for actions like right-click',
-    },
-    onSave: {
-      description: 'Callback function to save the Excel data',
-    },
-  },
-};
-
-type Story = StoryObj<typeof ExcelFile>;
-
-export const Default: Story = {
-  args: {
-    excelData: {
-      sheets: [
-        {
-          sheetName: 'fireflink',
-          data: [
-            [
-              {
-                value: 'Test Sample Data 1',
-                style: {
-                  name: 'Arial',
-                  size: 11,
-                  bold: true,
-                  italic: false,
-                  color: 'ffffff', // Sample data from backend without #
-                  backgroundColor: '434db8', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
-                },
-              },
-              {
-                value: 'Test Data 2',
-                style: {
-                  name: 'Arial',
-                  size: 12,
-                  bold: true,
-                  italic: true,
-                  color: 'EB5B00', // Sample data from backend without #
-                  backgroundColor: '88C273', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
-                },
-              },
-            ],
-            [
-              {
-                value: 'Test Data 3',
-                style: {
-                  name: 'Arial',
-                  size: 11,
-                  bold: false,
-                  italic: false,
-                  color: '000000', // Sample data from backend without #
-                  backgroundColor: 'EB5B00', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
-                },
-              },
-              {
-                value: 'Test Sample Data 4',
-                style: {
-                  name: 'Arial',
-                  size: 11,
-                  bold: false,
-                  italic: false,
-                  color: '3D0301', // Sample data from backend without #
-                  backgroundColor: 'C6E7FF', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
-                },
-              },
-            ],
-          ],
-        },
-      ],
-    },
-    toolbar: 'show',
-    contextOption: [
-      {
-        name: 'first option',
-        title: 'Custom Option 1: Get Data',
-        action: () => {},
-      },
-      {
-        name: 'second option',
-        title: 'Custom Option 2',
-        action: () => {},
-      },
-      {
-        name: 'third option',
-        title: 'Custom Option 2',
-        action: () => {},
-      },
-      {
-        name: 'fourth option',
-        title: 'Custom Option 2',
-        action: () => {},
-      },
-      {
-        name: 'fifth option',
-        title: 'Custom Option 2',
-        action: () => {},
-      },
-    ],
-    onSave: () => {},
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import ExcelFile from './ExcelFile/ExcelFile';
+
+const meta: Meta<typeof ExcelFile> = {
+  title: 'Components/ExcelFile',
+  component: ExcelFile,
+  tags: ['autodocs'],
+  argTypes: {
+    toolbar: {
+      control: { type: 'radio' },
+      options: ['show', 'disable', 'hide'],
+      description: 'Controls whether the toolbar is shown, disabled, or hidden',
+    },
+    excelData: {
+      description: 'The Excel data containing sheets and their content',
+    },
+    contextOption: {
+      description: 'Provide context menu options for actions like right-click',
+    },
+    onSave: {
+      description: 'Callback function to save the Excel data',
+    },
+  },
+};
+
+type Story = StoryObj<typeof ExcelFile>;
+
+export const Default: Story = {
+  args: {
+    excelData: {
+      sheets: [
+        {
+          sheetName: 'fireflink',
+          data: [
+            [
+              {
+                value: 'Test Sample Data 1',
+                style: {
+                  name: 'Arial',
+                  size: 11,
+                  bold: true,
+                  italic: false,
+                  color: 'ffffff', // Sample data from backend without #
+                  backgroundColor: '434db8', // Sample data from backend without #
+                  borderColor: 'F2F2F2', // Sample data from backend without #
+                  border: {
+                    top: 'NONE',
+                    bottom: 'NONE',
+                    left: 'NONE',
+                    right: 'NONE',
+                  },
+                  alignment: {
+                    horizontal: 'GENERAL',
+                    vertical: 'BOTTOM',
+                    wrapText: false,
+                  },
+                },
+              },
+              {
+                value: 'Test Data 2',
+                style: {
+                  name: 'Arial',
+                  size: 12,
+                  bold: true,
+                  italic: true,
+                  color: 'EB5B00', // Sample data from backend without #
+                  backgroundColor: '88C273', // Sample data from backend without #
+                  borderColor: 'F2F2F2', // Sample data from backend without #
+                  border: {
+                    top: 'NONE',
+                    bottom: 'NONE',
+                    left: 'NONE',
+                    right: 'NONE',
+                  },
+                  alignment: {
+                    horizontal: 'GENERAL',
+                    vertical: 'BOTTOM',
+                    wrapText: false,
+                  },
+                },
+              },
+            ],
+            [
+              {
+                value: 'Test Data 3',
+                style: {
+                  name: 'Arial',
+                  size: 11,
+                  bold: false,
+                  italic: false,
+                  color: '000000', // Sample data from backend without #
+                  backgroundColor: 'EB5B00', // Sample data from backend without #
+                  borderColor: 'F2F2F2', // Sample data from backend without #
+                  border: {
+                    top: 'NONE',
+                    bottom: 'NONE',
+                    left: 'NONE',
+                    right: 'NONE',
+                  },
+                  alignment: {
+                    horizontal: 'GENERAL',
+                    vertical: 'BOTTOM',
+                    wrapText: false,
+                  },
+                },
+              },
+              {
+                value: 'Test Sample Data 4',
+                style: {
+                  name: 'Arial',
+                  size: 11,
+                  bold: false,
+                  italic: false,
+                  color: '3D0301', // Sample data from backend without #
+                  backgroundColor: 'C6E7FF', // Sample data from backend without #
+                  borderColor: 'F2F2F2', // Sample data from backend without #
+                  border: {
+                    top: 'NONE',
+                    bottom: 'NONE',
+                    left: 'NONE',
+                    right: 'NONE',
+                  },
+                  alignment: {
+                    horizontal: 'GENERAL',
+                    vertical: 'BOTTOM',
+                    wrapText: false,
+                  },
+                },
+              },
+            ],
+          ],
+        },
+      ],
+    },
+    toolbar: 'show',
+    contextOption: [
+      {
+        name: 'first option',
+        title: 'Custom Option 1: Get Data',
+        action: () => {},
+      },
+      {
+        name: 'second option',
+        title: 'Custom Option 2',
+        action: () => {},
+      },
+      {
+        name: 'third option',
+        title: 'Custom Option 2',
+        action: () => {},
+      },
+      {
+        name: 'fourth option',
+        title: 'Custom Option 2',
+        action: () => {},
+      },
+      {
+        name: 'fifth option',
+        title: 'Custom Option 2',
+        action: () => {},
+      },
+    ],
+    onSave: () => {},
+  },
+};
+
+export default meta;

package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss

@@ -1,96 +1,96 @@
-.ff-excel-toolbar {
-  display: flex;
-  height: 32px;
-  align-items: center;
-
-  .ff-excel-toolbar-divider {
-    width: 1px;
-    height: 24px;
-    background-color: var(--excel-toolbar-divider);
-    margin: 0 24px;
-    border-radius: 1px;
-    z-index: 1000;
-  }
-
-  .ff-excel-toolbar-font {
-    display: flex;
-    gap: 8px;
-    justify-content: space-between;
-    .ff-excel-toolbar-font-family {
-      width: 120px;
-    }
-    .ff-excel-toolbar-font-size {
-      width: 56px;
-    }
-  }
-
-  .ff-excel-toolbar-text {
-    width: 100px;
-    height: 24px;
-    display: flex;
-    gap: 8px;
-    justify-content: space-between;
-
-    .ff-excel-toolbar-icon-underline {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .ff-excel-toolbar-icon {
-    width: 88px;
-    height: 24px;
-    display: flex;
-    gap: 8px;
-    justify-content: space-between;
-
-    .ff-excel-toolbar-icon-color {
-      width: 24px;
-      height: 24px;
-      border-radius: 4px;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      &:hover {
-        border-radius: 4px;
-        background-color: var(--icon-hover-color);
-      }
-      .ff-icon-dark & {
-        background-color: var(--brand-color);
-
-        &.ff-icon-click:hover {
-          background-color: var(--primary-button-text-color);
-          svg path {
-            fill: var(--brand-color);
-          }
-        }
-      }
-      &:hover {
-        border-radius: 4px;
-        background-color: var(--icon-hover-color);
-      }
-      .ff-icon-dark & {
-        background-color: var(--brand-color);
-
-        &.ff-icon-click:hover {
-          background-color: var(--primary-button-text-color);
-          svg path {
-            fill: var(--brand-color);
-          }
-        }
-      }
-    }
-  }
-
-  .ff-excel-toolbar-menu {
-    display: flex;
-    align-items: center;
-    width: 36px;
-    height: 24px;
-    .ff-excel-toolbar-menu-option {
-      display: flex;
-      align-items: center;
-    }
-  }
-}
+.ff-excel-toolbar {
+  display: flex;
+  height: 32px;
+  align-items: center;
+
+  .ff-excel-toolbar-divider {
+    width: 1px;
+    height: 24px;
+    background-color: var(--excel-toolbar-divider);
+    margin: 0 24px;
+    border-radius: 1px;
+    z-index: 1000;
+  }
+
+  .ff-excel-toolbar-font {
+    display: flex;
+    gap: 8px;
+    justify-content: space-between;
+    .ff-excel-toolbar-font-family {
+      width: 120px;
+    }
+    .ff-excel-toolbar-font-size {
+      width: 56px;
+    }
+  }
+
+  .ff-excel-toolbar-text {
+    width: 100px;
+    height: 24px;
+    display: flex;
+    gap: 8px;
+    justify-content: space-between;
+
+    .ff-excel-toolbar-icon-underline {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .ff-excel-toolbar-icon {
+    width: 88px;
+    height: 24px;
+    display: flex;
+    gap: 8px;
+    justify-content: space-between;
+
+    .ff-excel-toolbar-icon-color {
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &:hover {
+        border-radius: 4px;
+        background-color: var(--icon-hover-color);
+      }
+      .ff-icon-dark & {
+        background-color: var(--brand-color);
+
+        &.ff-icon-click:hover {
+          background-color: var(--primary-button-text-color);
+          svg path {
+            fill: var(--brand-color);
+          }
+        }
+      }
+      &:hover {
+        border-radius: 4px;
+        background-color: var(--icon-hover-color);
+      }
+      .ff-icon-dark & {
+        background-color: var(--brand-color);
+
+        &.ff-icon-click:hover {
+          background-color: var(--primary-button-text-color);
+          svg path {
+            fill: var(--brand-color);
+          }
+        }
+      }
+    }
+  }
+
+  .ff-excel-toolbar-menu {
+    display: flex;
+    align-items: center;
+    width: 36px;
+    height: 24px;
+    .ff-excel-toolbar-menu-option {
+      display: flex;
+      align-items: center;
+    }
+  }
+}