@eturnity/eturnity_reusable_components 8.16.2--EPDM-14330.2 → 8.16.2--EPDM-14330.3

package/src/components/buttons/mainButton/MainButton.stories.js

@@ -1,51 +1,135 @@
 import MainButton from './index.vue'
+import theme from '../../../assets/theme'
 
 export default {
-  title: 'MainButton',
+  title: 'Buttons/MainButton',
   component: MainButton,
   tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary', 'ghost'],
+      description: 'Button type',
+    },
+    variant: {
+      control: 'select',
+      options: ['main', 'cancel'],
+      description: 'Button variant',
+    },
+    buttonSize: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Button size',
+    },
+    appTheme: {
+      control: 'select',
+      options: ['light', 'dark'],
+      description: 'Application theme',
+    },
+  },
 }
 
-export const DefaultButton = {
-  args: {
-    type: 'primary',
-    text: 'Click me',
+const Template = (args) => ({
+  components: { MainButton },
+  setup() {
+    return { args }
+  },
+  template: '<MainButton v-bind="args" />',
+  provide: {
+    theme,
   },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  type: 'primary',
+  variant: 'main',
+  text: 'Default Button',
+  buttonSize: 'medium',
+  appTheme: 'light',
 }
 
-export const SecondaryButton = {
-  args: {
-    type: 'secondary',
-    text: 'Click me',
-  },
+export const Primary = Template.bind({})
+Primary.args = {
+  type: 'primary',
+  variant: 'main',
+  text: 'Primary Button',
+  buttonSize: 'medium',
+  appTheme: 'light',
 }
 
-export const CancelButton = {
-  args: {
-    type: 'cancel',
-    text: 'Click me',
-  },
+export const Secondary = Template.bind({})
+Secondary.args = {
+  type: 'secondary',
+  variant: 'main',
+  text: 'Secondary Button',
+  buttonSize: 'medium',
+  appTheme: 'light',
 }
 
-export const DisabledButton = {
-  args: {
-    text: 'Click me',
-    isDisabled: true,
-  },
+export const Tertiary = Template.bind({})
+Tertiary.args = {
+  type: 'tertiary',
+  variant: 'main',
+  text: 'Tertiary Button',
+  buttonSize: 'medium',
+  appTheme: 'light',
 }
 
-export const CustomColorButton = {
-  args: {
-    text: 'Click me',
-    customColor: '#0068DE',
-    fontColor: '#fdb813',
-  },
+export const Ghost = Template.bind({})
+Ghost.args = {
+  type: 'ghost',
+  variant: 'main',
+  text: 'Ghost Button',
+  buttonSize: 'medium',
+  appTheme: 'light',
 }
 
-export const IconButton = {
-  args: {
-    text: 'Click me',
-    icon: 'bell',
-    customColor: '#fdb813',
-  },
+export const Cancel = Template.bind({})
+Cancel.args = {
+  type: 'primary',
+  variant: 'cancel',
+  text: 'Cancel Button',
+  buttonSize: 'medium',
+  appTheme: 'light',
+}
+
+export const WithIcon = Template.bind({})
+WithIcon.args = {
+  type: 'primary',
+  variant: 'main',
+  text: 'Button with Icon',
+  icon: 'bell',
+  buttonSize: 'medium',
+  appTheme: 'light',
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  type: 'primary',
+  variant: 'main',
+  text: 'Disabled Button',
+  isDisabled: true,
+  buttonSize: 'medium',
+  appTheme: 'light',
+}
+
+export const CustomSize = Template.bind({})
+CustomSize.args = {
+  type: 'primary',
+  variant: 'main',
+  text: 'Custom Size',
+  minWidth: '200px',
+  height: '50px',
+  buttonSize: 'medium',
+  appTheme: 'light',
+}
+
+export const DarkTheme = Template.bind({})
+DarkTheme.args = {
+  type: 'primary',
+  variant: 'main',
+  text: 'Dark Theme',
+  buttonSize: 'medium',
+  appTheme: 'dark',
 }

package/src/components/draggableCard/draggableCard.stories.js

@@ -1,79 +1,135 @@
-import defaultProps from './defaultProps'
 import DraggableCard from './index.vue'
-import styled from 'vue3-styled-components'
 import theme from '@/assets/theme'
 
 export default {
   title: 'DraggableCard',
   component: DraggableCard,
   tags: ['autodocs'],
+  argTypes: {
+    width: {
+      control: 'text',
+      description: 'Width of the card',
+    },
+    initialPosition: {
+      control: 'object',
+      description: 'Initial position of the card (top, right, bottom, left)',
+    },
+    title: {
+      control: 'text',
+      description: 'Title of the card',
+    },
+    titleDataId: {
+      control: 'text',
+      description: 'Data ID for the title',
+    },
+    isCollapsible: {
+      control: 'boolean',
+      description: 'Whether the card can be collapsed',
+    },
+    infoText: {
+      control: 'text',
+      description: 'Additional info text to display next to the title',
+    },
+    dragTargets: {
+      control: 'array',
+      description: 'Targets where the card can be dragged',
+    },
+    dragBounds: {
+      control: 'object',
+      description: 'Boundaries for dragging the card',
+    },
+  },
 }
 
-const TextContainer = styled.div`
-  font-family: ${theme.fonts.mainFont};
-  color: ${theme.colors.white};
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 21px;
-  letter-spacing: 0%;
-`
-
-const CompleteTemplate = (args) => {
-  return {
-    components: { DraggableCard, TextContainer },
-    setup() {
-      return { args }
-    },
-    template: `
-      <DraggableCard v-bind="args">
+const Template = (args) => ({
+  components: { DraggableCard },
+  setup() {
+    return { args }
+  },
+  template: `
+    <DraggableCard v-bind="args">
       <template #body>
-        <TextContainer>{{ args.sampleBody1 }}</TextContainer>
-        <TextContainer>{{ args.sampleBody2 }}</TextContainer>
+        <div style="color: white;">Card body content</div>
       </template>
       <template #footer>
-        <TextContainer>{{ args.sampleFooter }}</TextContainer>
+        <div style="color: white;">Card footer content</div>
       </template>
-      </DraggableCard>
-    `,
-  }
-}
+    </DraggableCard>
+  `,
+  provide: {
+    theme,
+  },
+})
 
-export const Default = CompleteTemplate.bind({})
+export const Default = Template.bind({})
 Default.args = {
-  ...defaultProps,
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Default Card',
+  isCollapsible: true,
+}
+
+export const WithInfoText = Template.bind({})
+WithInfoText.args = {
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Card with Info',
+  infoText: 'This is some additional information',
+  isCollapsible: true,
 }
 
-export const NotCollapsible = CompleteTemplate.bind({})
-NotCollapsible.args = {
-  ...defaultProps,
+export const NonCollapsible = Template.bind({})
+NonCollapsible.args = {
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Non-Collapsible Card',
   isCollapsible: false,
 }
 
-export const AdjustWidth = CompleteTemplate.bind({})
-AdjustWidth.args = {
-  ...defaultProps,
-  minWidth: '100px',
-  maxWidth: '500px',
+export const WithDragBounds = Template.bind({})
+WithDragBounds.args = {
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Card with Drag Bounds',
+  dragBounds: {
+    min: { top: 0, left: 0 },
+    max: { top: 500, left: 500 },
+  },
+  isCollapsible: true,
 }
 
-const NoFooterTemplate = (args) => {
-  return {
-    components: { DraggableCard, TextContainer },
-    setup() {
-      return { args }
-    },
-    template: `
-      <DraggableCard v-bind="args">
-      <template #body>
-        <TextContainer>{{ args.sampleBody1 }}</TextContainer>
-        <TextContainer>{{ args.sampleBody2 }}</TextContainer>
-      </template>
-      </DraggableCard>
-    `,
-  }
+export const WithCustomDragTargets = Template.bind({})
+WithCustomDragTargets.args = {
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Card with Custom Drag Targets',
+  dragTargets: ['document', 'parent'],
+  isCollapsible: true,
 }
 
-export const NoFooter = NoFooterTemplate.bind({})
-NoFooter.args = {
-  ...defaultProps,
+export const WithTitleDataId = Template.bind({})
+WithTitleDataId.args = {
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Card with Data ID',
+  titleDataId: 'custom-data-id',
+  isCollapsible: true,
 }

package/src/components/filterComponent/viewSettings.vue

@@ -0,0 +1,220 @@
+<template>
+  <PageContainer>
+    <ButtonIcon
+      class="button-icon"
+      icon-name="settings"
+      :text="$gettext('view_settings')"
+      type="filter"
+      @click="toggleOptions"
+    />
+    <ButtonWrapper v-if="isOptionsVisible">
+      <BoxContainer class="box-container">
+        <BoxTitle>{{ $gettext('view_settings') }}</BoxTitle>
+        <SectionTitleContainer>
+          <SectionTitle>{{ $gettext('select_columns') }}</SectionTitle>
+          <MainButton
+            :text="$gettext('select_all')"
+            type="ghost"
+            @click="handleSelectAll"
+          />
+        </SectionTitleContainer>
+        <SelectOptionsContainer>
+          <SelectOption
+            v-for="column in columnsData"
+            :key="column.id"
+            :is-last-selected="column.selected && getSelectedCount() <= 1"
+            :is-selected="column.selected"
+            @click="handleSelectColumn(column)"
+          >
+            {{ $gettext(column.text) }}
+          </SelectOption>
+        </SelectOptionsContainer>
+        <LineSeparator v-if="detailedToggleOptions.length > 0" />
+        <SectionTitleContainer>
+          <SectionTitle>{{ $gettext('show_details') }}</SectionTitle>
+        </SectionTitleContainer>
+        <ToggleContainer>
+          <RCToggle
+            v-for="option in detailedToggleOptions"
+            :key="option.label"
+            :is-checked="option.value"
+            :label="$gettext(option.label)"
+            @on-toggle-change="$emit(option.onToggle, $event)"
+          />
+        </ToggleContainer>
+      </BoxContainer>
+    </ButtonWrapper>
+  </PageContainer>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import ButtonIcon from '../buttons/buttonIcon/index.vue'
+  import MainButton from '../buttons/mainButton/index.vue'
+  import RCToggle from '../inputs/toggle/index.vue'
+
+  const PageContainer = styled.div``
+
+  const ButtonWrapper = styled.div`
+    position: relative;
+  `
+
+  const BoxContainer = styled.div`
+    position: absolute;
+    z-index: 99;
+    top: 8px;
+    right: 0;
+    width: max-content;
+    max-width: 500px;
+    background-color: ${(props) => props.theme.colors.white};
+    border: 1px solid ${(props) => props.theme.semanticColors.grey[300]};
+    border-radius: 4px;
+    padding: 24px;
+  `
+
+  const BoxTitle = styled.div`
+    font-size: 14px;
+    font-weight: 500;
+    color: ${(props) => props.theme.semanticColors.teal[800]};
+    margin-bottom: 16px;
+  `
+
+  const SectionTitleContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    white-space: nowrap;
+    gap: 16px;
+  `
+
+  const SectionTitle = styled.div`
+    font-size: 12px;
+    font-weight: 500;
+    color: ${(props) => props.theme.semanticColors.teal[800]};
+  `
+
+  const SelectOptionsContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px;
+  `
+
+  const SelectAttrs = {
+    isSelected: Boolean,
+    isLastSelected: Boolean,
+  }
+  const SelectOption = styled('div', SelectAttrs)`
+    background-color: ${(props) =>
+      props.isSelected
+        ? props.theme.semanticColors.green[400]
+        : props.theme.colors.white};
+    color: ${(props) => props.theme.semanticColors.teal[800]};
+    border: 1px solid
+      ${(props) =>
+        props.isSelected
+          ? props.theme.semanticColors.green[400]
+          : props.theme.semanticColors.green[300]};
+    padding: 1px 10px;
+    font-size: 12px;
+    font-weight: 400;
+    border-radius: 4px;
+    cursor: ${(props) =>
+      props.isSelected && props.isLastSelected ? 'not-allowed' : 'pointer'};
+    user-select: none;
+  `
+
+  const LineSeparator = styled.div`
+    width: 100%;
+    height: 1px;
+    background-color: ${(props) => props.theme.semanticColors.grey[100]};
+    margin: 16px 0;
+  `
+
+  const ToggleContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  `
+
+  export default {
+    name: 'ViewSettings',
+    components: {
+      PageContainer,
+      ButtonIcon,
+      ButtonWrapper,
+      BoxContainer,
+      BoxTitle,
+      SectionTitleContainer,
+      SectionTitle,
+      MainButton,
+      SelectOptionsContainer,
+      SelectOption,
+      LineSeparator,
+      RCToggle,
+      ToggleContainer,
+    },
+    props: {
+      columnsData: {
+        type: Array,
+        required: true,
+      },
+      detailedToggleOptions: {
+        type: Array,
+        required: false,
+      },
+    },
+    emits: ['onSelectColumn', 'onSelectAllColumns'],
+    data() {
+      return {
+        isOptionsVisible: false,
+      }
+    },
+    mounted() {
+      // Remove the mounted event listener since we now handle it in toggleOptions
+    },
+    beforeUnmount() {
+      document.removeEventListener('click', this.handleClickOutside)
+    },
+    methods: {
+      getSelectedCount() {
+        return this.columnsData.filter((col) => col.selected).length
+      },
+      handleSelectAll() {
+        this.$emit('onSelectAllColumns')
+      },
+      handleSelectColumn(column) {
+        // Count currently selected columns
+        const selectedCount = this.getSelectedCount()
+
+        // Prevent deselecting if this is the last selected column
+        if (selectedCount <= 1 && column.selected) {
+          return
+        }
+
+        this.$emit('onSelectColumn', column)
+      },
+      toggleOptions() {
+        this.isOptionsVisible = !this.isOptionsVisible
+        if (this.isOptionsVisible) {
+          document.addEventListener('click', this.handleClickOutside)
+        } else {
+          document.removeEventListener('click', this.handleClickOutside)
+        }
+      },
+      handleClickOutside(event) {
+        const buttonIcon = this.$el.querySelector('.button-icon')
+        const boxContainer = this.$el.querySelector('.box-container')
+
+        if (
+          !buttonIcon.contains(event.target) &&
+          !boxContainer.contains(event.target)
+        ) {
+          this.isOptionsVisible = false
+          document.removeEventListener('click', this.handleClickOutside)
+        }
+      },
+    },
+  }
+</script>