@eturnity/eturnity_reusable_components 8.19.0 → 8.19.1

package/src/components/spinner/Spinner.stories.js

@@ -1,34 +1,86 @@
 import Spinner from './index.vue'
+import theme from '@/assets/theme'
 
 export default {
   title: 'Spinner',
   component: Spinner,
   tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Size of the spinner',
+    },
+    isWhite: {
+      control: 'boolean',
+      description: 'Whether to use white color for the spinner',
+    },
+    limitedToModal: {
+      control: 'boolean',
+      description: 'Whether the spinner is limited to a modal context',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Whether to show the spinner with a full-width overlay',
+    },
+  },
 }
 
-// <spinner size="30px" fullWidth="false" limitedToModal="false" />
-
-export const DefaultSpinner = {
-  args: {
-    size: '60px',
+const Template = (args) => ({
+  components: { Spinner },
+  setup() {
+    return { args }
+  },
+  template: '<Spinner v-bind="args" />',
+  provide: {
+    theme,
   },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  size: 'medium',
+  isWhite: false,
+  limitedToModal: false,
+  fullWidth: false,
 }
 
-export const SmallerSpinner = {
-  args: {
-    size: '30px',
-  },
+export const Small = Template.bind({})
+Small.args = {
+  size: 'small',
+  isWhite: false,
+  limitedToModal: false,
+  fullWidth: false,
 }
 
-export const LargerSpinner = {
-  args: {
-    size: '90px',
-  },
+export const Large = Template.bind({})
+Large.args = {
+  size: 'large',
+  isWhite: false,
+  limitedToModal: false,
+  fullWidth: false,
 }
 
-export const AlignCenterSpinner = {
-  args: {
-    size: '60px',
-    fullWidth: true,
-  },
+export const White = Template.bind({})
+White.args = {
+  size: 'medium',
+  isWhite: true,
+  limitedToModal: false,
+  fullWidth: false,
+}
+
+export const InModal = Template.bind({})
+InModal.args = {
+  size: 'medium',
+  isWhite: false,
+  limitedToModal: true,
+  fullWidth: false,
+}
+
+export const FullWidth = Template.bind({})
+FullWidth.args = {
+  size: 'medium',
+  isWhite: false,
+  limitedToModal: false,
+  fullWidth: true,
 }

package/src/components/spinnerGif/SpinnerGif.stories.js

@@ -0,0 +1,86 @@
+import SpinnerGif from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'SpinnerGif',
+  component: SpinnerGif,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+      description: 'Size of the spinner in pixels (e.g., "30px")',
+    },
+    isWhite: {
+      control: 'boolean',
+      description: 'Whether to show the spinner in white color',
+    },
+    limitedToModal: {
+      control: 'boolean',
+      description: 'Whether the spinner is limited to a modal context',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description:
+        'Whether the spinner should take up the full width of its container',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { SpinnerGif },
+  setup() {
+    return { args }
+  },
+  template: '<SpinnerGif v-bind="args" />',
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  size: '60px',
+  isWhite: false,
+  limitedToModal: false,
+  fullWidth: false,
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  size: '30px',
+  isWhite: false,
+  limitedToModal: false,
+  fullWidth: false,
+}
+
+export const Large = Template.bind({})
+Large.args = {
+  size: '90px',
+  isWhite: false,
+  limitedToModal: false,
+  fullWidth: false,
+}
+
+export const White = Template.bind({})
+White.args = {
+  size: '60px',
+  isWhite: true,
+  limitedToModal: false,
+  fullWidth: false,
+}
+
+export const InModal = Template.bind({})
+InModal.args = {
+  size: '60px',
+  isWhite: false,
+  limitedToModal: true,
+  fullWidth: false,
+}
+
+export const FullWidth = Template.bind({})
+FullWidth.args = {
+  size: '60px',
+  isWhite: false,
+  limitedToModal: false,
+  fullWidth: true,
+}

package/src/components/tableDropdown/TableDropdown.stories.js

@@ -0,0 +1,192 @@
+import TableDropdown from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/TableDropdown',
+  component: TableDropdown,
+  tags: ['autodocs'],
+  argTypes: {
+    colSpan: {
+      control: 'number',
+      description: 'Number of columns the dropdown should span',
+    },
+    customInputDisabled: {
+      control: 'boolean',
+      description: 'Whether the input field should be disabled',
+    },
+    allowFreeInputs: {
+      control: 'boolean',
+      description: 'Whether to allow custom input values',
+    },
+    tableItems: {
+      control: 'object',
+      description: 'Array of items to display in the dropdown',
+    },
+    showArchived: {
+      control: 'boolean',
+      description: 'Whether to show archived items in red',
+    },
+    isOpen: {
+      control: 'boolean',
+      description: 'Whether the dropdown is open',
+    },
+    optionsLoading: {
+      control: 'boolean',
+      description: 'Whether to show loading spinner',
+    },
+    emptyText: {
+      control: 'text',
+      description: 'Custom text to show when no options are available',
+    },
+    optionItems: {
+      control: 'object',
+      description: 'Array of options to display in the dropdown',
+    },
+    optionsDisplay: {
+      control: 'object',
+      description: 'Array of property names to display for each option',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the dropdown is disabled',
+    },
+    isNested: {
+      control: 'boolean',
+      description: 'Whether to show nested items with indentation',
+    },
+    showInfoText: {
+      control: 'boolean',
+      description: 'Whether to show info text',
+    },
+    infoTextMessage: {
+      control: 'text',
+      description: 'Info text message to display',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { TableDropdown },
+  setup() {
+    return { args }
+  },
+  template: '<TableDropdown v-bind="args" />',
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  colSpan: 2,
+  customInputDisabled: false,
+  allowFreeInputs: true,
+  tableItems: [
+    {
+      type: 'text',
+      value: 'Selected Item',
+    },
+  ],
+  showArchived: false,
+  isOpen: false,
+  optionsLoading: false,
+  emptyText: 'No items found',
+  optionItems: [
+    {
+      display_name: 'Item 1',
+      company_item_number: '123',
+      description: 'First item',
+    },
+    {
+      display_name: 'Item 2',
+      company_item_number: '456',
+      description: 'Second item',
+    },
+  ],
+  optionsDisplay: ['display_name', 'company_item_number', 'description'],
+  disabled: false,
+  isNested: false,
+  showInfoText: false,
+  infoTextMessage: '',
+}
+
+export const WithTemplates = Template.bind({})
+WithTemplates.args = {
+  ...Default.args,
+  tableItems: [
+    {
+      type: 'template',
+      value: 'Template 1',
+    },
+  ],
+  optionItems: [
+    {
+      display_name: 'Template 1',
+      has_template: true,
+    },
+    {
+      display_name: 'Item 2',
+      has_template: false,
+    },
+  ],
+  optionsDisplay: ['display_name', 'template'],
+}
+
+export const WithCustomInput = Template.bind({})
+WithCustomInput.args = {
+  ...Default.args,
+  tableItems: [
+    {
+      type: 'input',
+      value: 'Custom Value',
+    },
+  ],
+  customInputDisabled: false,
+}
+
+export const WithArchivedItems = Template.bind({})
+WithArchivedItems.args = {
+  ...Default.args,
+  showArchived: true,
+  tableItems: [
+    {
+      type: 'text',
+      value: 'Archived Item',
+    },
+  ],
+}
+
+export const WithNestedItems = Template.bind({})
+WithNestedItems.args = {
+  ...Default.args,
+  isNested: true,
+  tableItems: [
+    {
+      type: 'text',
+      value: 'Parent Item',
+    },
+    {
+      type: 'text',
+      value: 'Child Item',
+    },
+  ],
+}
+
+export const WithInfoText = Template.bind({})
+WithInfoText.args = {
+  ...Default.args,
+  showInfoText: true,
+  infoTextMessage: 'This is an important message',
+}
+
+export const LoadingState = Template.bind({})
+LoadingState.args = {
+  ...Default.args,
+  optionsLoading: true,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...Default.args,
+  disabled: true,
+}

package/src/components/tables/mainTable/MainTable.stories.js

@@ -0,0 +1,151 @@
+import MainTable from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/Tables/MainTable',
+  component: MainTable,
+  tags: ['autodocs'],
+  argTypes: {
+    fullWidth: {
+      control: 'boolean',
+      description: 'Whether the table should take full width of its container',
+    },
+    cellPaddings: {
+      control: 'text',
+      description: 'Custom padding for table cells (e.g., "10px 15px")',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Whether to show loading spinner',
+    },
+    isOverflowHidden: {
+      control: 'boolean',
+      description: 'Whether to hide overflow content',
+    },
+    titleText: {
+      control: 'text',
+      description: 'Optional title text above the table',
+    },
+    hasAimHover: {
+      control: 'boolean',
+      description: 'Whether to enable column hover highlighting',
+    },
+    tableCursor: {
+      control: 'text',
+      description: 'Custom cursor style for the table',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { MainTable },
+  setup() {
+    return { args }
+  },
+  template: `
+    <MainTable v-bind="args">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Date</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Project A</td>
+          <td>Active</td>
+          <td>2024-03-15</td>
+        </tr>
+        <tr>
+          <td>Project B</td>
+          <td>Completed</td>
+          <td>2024-03-10</td>
+        </tr>
+      </tbody>
+    </MainTable>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  fullWidth: true,
+  cellPaddings: '6px 6px 7px 4px',
+  isLoading: false,
+  isOverflowHidden: true,
+  titleText: 'Projects',
+  hasAimHover: false,
+  tableCursor: 'pointer',
+}
+
+export const Loading = Template.bind({})
+Loading.args = {
+  ...Default.args,
+  isLoading: true,
+}
+
+export const WithoutTitle = Template.bind({})
+WithoutTitle.args = {
+  ...Default.args,
+  titleText: null,
+}
+
+export const WithColumnHover = Template.bind({})
+WithColumnHover.args = {
+  ...Default.args,
+  hasAimHover: true,
+}
+
+export const CustomWidth = Template.bind({})
+CustomWidth.args = {
+  ...Default.args,
+  fullWidth: false,
+}
+
+export const CustomCellPadding = Template.bind({})
+CustomCellPadding.args = {
+  ...Default.args,
+  cellPaddings: '10px 15px',
+}
+
+export const WithDraggableRows = Template.bind({})
+WithDraggableRows.args = {
+  ...Default.args,
+}
+WithDraggableRows.template = `
+  <MainTable v-bind="args">
+    <thead>
+      <tr>
+        <th></th>
+        <th>Name</th>
+        <th>Status</th>
+        <th>Date</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="drag-container">
+          <div class="drag-wrapper">
+            <div class="drag-icon"></div>
+          </div>
+        </td>
+        <td>Project A</td>
+        <td>Active</td>
+        <td>2024-03-15</td>
+      </tr>
+      <tr>
+        <td class="drag-container">
+          <div class="drag-wrapper">
+            <div class="drag-icon"></div>
+          </div>
+        </td>
+        <td>Project B</td>
+        <td>Completed</td>
+        <td>2024-03-10</td>
+      </tr>
+    </tbody>
+  </MainTable>
+`

package/src/components/tabsHeader/TabsHeader.stories.js

@@ -0,0 +1,142 @@
+import TabsHeader from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'TabsHeader',
+  component: TabsHeader,
+  tags: ['autodocs'],
+  argTypes: {
+    tabsData: {
+      control: 'object',
+      description:
+        'Array of tab objects with text, id, and optional hasError and icon properties',
+    },
+    activeTab: {
+      control: 'number',
+      description: 'ID of the currently active tab',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { TabsHeader },
+  setup() {
+    return { args }
+  },
+  template: '<TabsHeader v-bind="args" @on-tab-change="onTabChange" />',
+  methods: {
+    onTabChange(id) {
+      console.log('Tab changed to:', id)
+    },
+  },
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  tabsData: [
+    {
+      text: 'Tab 1',
+      id: 0,
+    },
+    {
+      text: 'Tab 2',
+      id: 1,
+    },
+    {
+      text: 'Tab 3',
+      id: 2,
+    },
+  ],
+  activeTab: 0,
+}
+
+export const WithErrors = Template.bind({})
+WithErrors.args = {
+  tabsData: [
+    {
+      text: 'Tab 1',
+      id: 0,
+      hasError: true,
+    },
+    {
+      text: 'Tab 2',
+      id: 1,
+      hasError: false,
+    },
+    {
+      text: 'Tab 3',
+      id: 2,
+      hasError: true,
+    },
+  ],
+  activeTab: 0,
+}
+
+export const WithIcons = Template.bind({})
+WithIcons.args = {
+  tabsData: [
+    {
+      text: 'Tab 1',
+      id: 0,
+      icon: 'settings',
+    },
+    {
+      text: 'Tab 2',
+      id: 1,
+      icon: 'warning',
+    },
+    {
+      text: 'Tab 3',
+      id: 2,
+      icon: 'info',
+    },
+  ],
+  activeTab: 0,
+}
+
+export const WithErrorsAndIcons = Template.bind({})
+WithErrorsAndIcons.args = {
+  tabsData: [
+    {
+      text: 'Tab 1',
+      id: 0,
+      icon: 'settings',
+      hasError: true,
+    },
+    {
+      text: 'Tab 2',
+      id: 1,
+      icon: 'warning',
+      hasError: false,
+    },
+    {
+      text: 'Tab 3',
+      id: 2,
+      icon: 'info',
+      hasError: true,
+    },
+  ],
+  activeTab: 0,
+}
+
+export const StringIds = Template.bind({})
+StringIds.args = {
+  tabsData: [
+    {
+      text: 'Tab 1',
+      id: 'tab1',
+    },
+    {
+      text: 'Tab 2',
+      id: 'tab2',
+    },
+    {
+      text: 'Tab 3',
+      id: 'tab3',
+    },
+  ],
+  activeTab: 'tab1',
+}