@eturnity/eturnity_reusable_components 8.19.2 → 8.19.4

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

@@ -1,56 +1,137 @@
 import MainButton from './index.vue'
+import theme from '../../../assets/theme'
 
 export default {
-  title: 'MainButton',
+  title: 'Buttons/MainButton',
   component: MainButton,
   tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
+  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',
 }
 
 export const IconAltDesignButton = {

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)