@eturnity/eturnity_reusable_components 8.19.0 → 8.19.1

package/src/components/buttons/buttonIcon/ButtonIcon.stories.js

@@ -0,0 +1,167 @@
+import ButtonIcon from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/Buttons/ButtonIcon',
+  component: ButtonIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary'],
+      description: 'Button type',
+    },
+    variant: {
+      control: 'select',
+      options: ['main', 'cancel', 'danger'],
+      description: 'Button variant',
+    },
+    appTheme: {
+      control: 'select',
+      options: ['light', 'dark'],
+      description: 'Application theme',
+    },
+    buttonSize: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Button size',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled',
+    },
+    text: {
+      control: 'text',
+      description: 'Button text',
+    },
+    minWidth: {
+      control: 'text',
+      description: 'Minimum width of the button',
+    },
+    customColor: {
+      control: 'color',
+      description: 'Custom background color',
+    },
+    iconName: {
+      control: 'text',
+      description: 'Name of the icon to display',
+    },
+    iconColor: {
+      control: 'color',
+      description: 'Custom color for the icon',
+    },
+    fontSize: {
+      control: 'text',
+      description: 'Font size of the button text',
+    },
+    isActive: {
+      control: 'boolean',
+      description: 'Whether the button is in active state',
+    },
+    fillType: {
+      control: 'select',
+      options: ['fill', 'stroke'],
+      description: 'How to fill the icon',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { ButtonIcon },
+  setup() {
+    return { args }
+  },
+  template: '<ButtonIcon v-bind="args" />',
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  type: 'primary',
+  variant: 'main',
+  appTheme: 'light',
+  buttonSize: 'medium',
+  isDisabled: false,
+  text: 'Click Me',
+  minWidth: '200px',
+  customColor: null,
+  iconName: 'settings',
+  iconColor: null,
+  fontSize: '14px',
+  isActive: false,
+  fillType: 'fill',
+}
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+  ...Default.args,
+  type: 'secondary',
+}
+
+export const Tertiary = Template.bind({})
+Tertiary.args = {
+  ...Default.args,
+  type: 'tertiary',
+}
+
+export const Cancel = Template.bind({})
+Cancel.args = {
+  ...Default.args,
+  variant: 'cancel',
+}
+
+export const Danger = Template.bind({})
+Danger.args = {
+  ...Default.args,
+  variant: 'danger',
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...Default.args,
+  isDisabled: true,
+}
+
+export const Active = Template.bind({})
+Active.args = {
+  ...Default.args,
+  isActive: true,
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  ...Default.args,
+  buttonSize: 'small',
+}
+
+export const Large = Template.bind({})
+Large.args = {
+  ...Default.args,
+  buttonSize: 'large',
+}
+
+export const CustomColor = Template.bind({})
+CustomColor.args = {
+  ...Default.args,
+  customColor: '#FF5733',
+}
+
+export const CustomIconColor = Template.bind({})
+CustomIconColor.args = {
+  ...Default.args,
+  iconColor: '#FFFFFF',
+}
+
+export const DarkTheme = Template.bind({})
+DarkTheme.args = {
+  ...Default.args,
+  appTheme: 'dark',
+}
+
+export const StrokeIcon = Template.bind({})
+StrokeIcon.args = {
+  ...Default.args,
+  fillType: 'stroke',
+}

package/src/components/buttons/buttonIcon/index.vue

@@ -22,6 +22,7 @@
             theme.mainButton[appTheme][type][variant].default.textColor
           "
           :disable-hover="disableIconHover"
+          :fill-type="fillType"
           :hovered-color="
             iconColor ||
             theme.mainButton[appTheme][type][variant].default.textColor
@@ -33,6 +34,9 @@
       <ButtonContainer :button-size="buttonSize">
         {{ text }}
       </ButtonContainer>
+      <NumberContainer v-if="numberCount">
+        <NumberText>{{ numberCount }}</NumberText>
+      </NumberContainer>
     </ButtonWrapper>
   </PageContainer>
 </template>
@@ -67,17 +71,16 @@
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
     display: grid;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: auto 1fr auto;
     font-size: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
-    color: ${(props) =>
-      props.isDisabled
+    color: ${(props) => {
+      return props.isDisabled
         ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.textColor
-        : props.customColor
-        ? props.theme.colors.white
         : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.textColor};
+            .default.textColor
+    }};
     background-color: ${(props) =>
       props.isDisabled
         ? props.theme.mainButton[props.appTheme][props.type][props.variant]
@@ -159,6 +162,25 @@
     }};
   `
 
+  const NumberContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10px;
+  `
+
+  const NumberText = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 400;
+    color: ${(props) => props.theme.semanticColors.purple[500]};
+    padding: 3px 8px;
+    border-radius: 8px;
+    background-color: ${(props) => props.theme.semanticColors.purple[50]};
+  `
+
   export default {
     name: 'ButtonIcon',
     components: {
@@ -167,6 +189,8 @@
       ButtonWrapper,
       IconContainer,
       Icon,
+      NumberContainer,
+      NumberText,
     },
     props: {
       type: {
@@ -232,10 +256,20 @@
         default: false,
         type: Boolean,
       },
+      fillType: {
+        required: false,
+        default: 'fill',
+        type: String,
+      },
       disableIconHover: {
         type: Boolean,
         default: false,
       },
+      numberCount: {
+        type: Number,
+        required: false,
+        default: null,
+      },
     },
     data() {
       return {

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/filter/filterSettings.vue

@@ -628,7 +628,7 @@
         return selectedDate >= currentDate
       },
       getDatePickerLanguage() {
-        return datePickerLang(this.activeLanguage)
+        return this.activeLanguage
       },
       onDragChange({ data }) {
         this.$emit('on-drag-change', data)