@eturnity/eturnity_reusable_components 8.19.1 → 8.19.2

package/src/components/icon/Icon.stories.js

@@ -1,220 +0,0 @@
-import Icon from './index.vue'
-import theme from '@/assets/theme'
-
-export default {
-  title: 'Icon',
-  component: Icon,
-  tags: ['autodocs'],
-  argTypes: {
-    name: {
-      control: 'select',
-      options: [
-        'settings',
-        'warning',
-        'checkmark',
-        'close',
-        'arrow_up',
-        'arrow_down',
-      ],
-      description: 'Name of the SVG icon file (without .svg extension)',
-    },
-    color: {
-      control: 'color',
-      description: 'Color of the icon',
-    },
-    hoveredColor: {
-      control: 'color',
-      description: 'Color of the icon when hovered',
-    },
-    size: {
-      control: 'text',
-      description: 'Size of the icon (e.g., "30px")',
-    },
-    cursor: {
-      control: 'select',
-      options: ['default', 'pointer', 'not-allowed'],
-      description: 'Cursor style when hovering over the icon',
-    },
-    isStriked: {
-      control: 'boolean',
-      description: 'Whether to show a strikethrough line',
-    },
-    backgroundColor: {
-      control: 'color',
-      description: 'Background color of the icon container',
-    },
-    count: {
-      control: 'number',
-      description: 'Number to display in the count badge',
-    },
-    animation: {
-      control: 'select',
-      options: ['none', 'fade'],
-      description: 'Animation type for the icon',
-    },
-    fillType: {
-      control: 'select',
-      options: ['fill', 'stroke'],
-      description: 'How to apply the color to the icon',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the icon is disabled',
-    },
-  },
-}
-
-const Template = (args) => ({
-  components: { Icon },
-  setup() {
-    return { args }
-  },
-  template: '<Icon v-bind="args" />',
-  provide: {
-    theme,
-  },
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  name: 'settings',
-  color: 'blue',
-  size: '30px',
-  cursor: 'default',
-  isStriked: false,
-  count: 0,
-  animation: 'none',
-  fillType: 'fill',
-  disabled: false,
-}
-
-export const Large = Template.bind({})
-Large.args = {
-  name: 'settings',
-  color: 'blue',
-  size: '60px',
-  cursor: 'default',
-  isStriked: false,
-  count: 0,
-  animation: 'none',
-  fillType: 'fill',
-  disabled: false,
-}
-
-export const WithHover = Template.bind({})
-WithHover.args = {
-  name: 'warning',
-  color: 'blue',
-  hoveredColor: 'red',
-  size: '30px',
-  cursor: 'pointer',
-  isStriked: false,
-  count: 0,
-  animation: 'none',
-  fillType: 'fill',
-  disabled: false,
-}
-
-export const WithBackground = Template.bind({})
-WithBackground.args = {
-  name: 'checkmark',
-  color: 'white',
-  size: '30px',
-  cursor: 'default',
-  isStriked: false,
-  count: 0,
-  animation: 'none',
-  fillType: 'fill',
-  backgroundColor: 'blue',
-  disabled: false,
-}
-
-export const WithCount = Template.bind({})
-WithCount.args = {
-  name: 'close',
-  color: 'blue',
-  size: '30px',
-  cursor: 'default',
-  isStriked: false,
-  count: 5,
-  animation: 'none',
-  fillType: 'fill',
-  disabled: false,
-}
-
-export const Striked = Template.bind({})
-Striked.args = {
-  name: 'arrow_up',
-  color: 'blue',
-  size: '30px',
-  cursor: 'default',
-  isStriked: true,
-  count: 0,
-  animation: 'none',
-  fillType: 'fill',
-  disabled: false,
-}
-
-export const Animated = Template.bind({})
-Animated.args = {
-  name: 'arrow_down',
-  color: 'blue',
-  size: '30px',
-  cursor: 'default',
-  isStriked: false,
-  count: 0,
-  animation: 'fade',
-  fillType: 'fill',
-  disabled: false,
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  name: 'settings',
-  color: 'blue',
-  size: '30px',
-  cursor: 'default',
-  isStriked: false,
-  count: 0,
-  animation: 'none',
-  fillType: 'fill',
-  disabled: true,
-}
-
-const IconLibraryTemplate = (args) => ({
-  components: { Icon },
-  setup() {
-    const icons = import.meta.glob('@/assets/svgIcons/*.svg', { eager: true })
-    const iconNames = Object.keys(icons)
-      .map((path) => {
-        const fileName = path.split('/').pop()
-        return fileName.replace('.svg', '')
-      })
-      .sort()
-
-    return { args, iconNames }
-  },
-  template: `
-    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px; padding: 20px;">
-      <div v-for="iconName in iconNames" :key="iconName" style="text-align: center;">
-        <Icon v-bind="args" :name="iconName" />
-        <div style="font-size: 12px; margin-top: 8px; word-break: break-word;">{{ iconName }}</div>
-      </div>
-    </div>
-  `,
-  provide: {
-    theme,
-  },
-})
-
-export const IconLibrary = IconLibraryTemplate.bind({})
-IconLibrary.args = {
-  color: 'blue',
-  size: '30px',
-  cursor: 'default',
-  isStriked: false,
-  count: 0,
-  animation: 'none',
-  fillType: 'fill',
-  disabled: false,
-}

package/src/components/projectMarker/ProjectMarker.stories.js

@@ -1,130 +0,0 @@
-import ProjectMarker from './index.vue'
-import theme from '@/assets/theme'
-
-export default {
-  title: 'Components/ProjectMarker',
-  component: ProjectMarker,
-  tags: ['autodocs'],
-  argTypes: {
-    markerData: {
-      control: 'object',
-      description:
-        'Object containing marker data including translations and color',
-    },
-    activeLanguage: {
-      control: 'text',
-      description: 'Currently active language code',
-    },
-    date: {
-      control: 'text',
-      description: 'Optional date to display next to the marker',
-    },
-    isEditable: {
-      control: 'boolean',
-      description: 'Whether the marker can be edited',
-    },
-    isGroupSupport: {
-      control: 'boolean',
-      description: 'Whether group support is enabled',
-    },
-    isLimitedPartner: {
-      control: 'boolean',
-      description: 'Whether the user is a limited partner',
-    },
-    cursor: {
-      control: 'text',
-      description: 'Cursor style for the marker',
-    },
-    hasBorderRadius: {
-      control: 'boolean',
-      description: 'Whether to show border radius',
-    },
-  },
-}
-
-const Template = (args) => ({
-  components: { ProjectMarker },
-  setup() {
-    return { args }
-  },
-  template: '<ProjectMarker v-bind="args" />',
-  provide: {
-    theme,
-  },
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  markerData: {
-    choice: 'sold',
-    translations: {
-      'en-us': { name: 'Sold' },
-    },
-    color: '#4CAF50',
-    can_be_deleted: true,
-  },
-  activeLanguage: 'en-us',
-  date: '23.07.2022',
-  isEditable: true,
-  isGroupSupport: false,
-  isLimitedPartner: false,
-  cursor: 'pointer',
-  hasBorderRadius: true,
-}
-
-export const Lost = Template.bind({})
-Lost.args = {
-  ...Default.args,
-  markerData: {
-    choice: 'lost',
-    translations: {
-      'en-us': { name: 'Lost' },
-    },
-    color: '#F44336',
-    can_be_deleted: true,
-  },
-}
-
-export const Transferred = Template.bind({})
-Transferred.args = {
-  ...Default.args,
-  markerData: {
-    choice: 'transferred',
-    translations: {
-      'en-us': { name: 'Transferred' },
-    },
-    color: '#2196F3',
-    can_be_deleted: true,
-  },
-}
-
-export const WithoutDate = Template.bind({})
-WithoutDate.args = {
-  ...Default.args,
-  date: null,
-}
-
-export const NotEditable = Template.bind({})
-NotEditable.args = {
-  ...Default.args,
-  isEditable: false,
-}
-
-export const LimitedPartner = Template.bind({})
-LimitedPartner.args = {
-  ...Default.args,
-  isLimitedPartner: true,
-}
-
-export const WithGroupSupport = Template.bind({})
-WithGroupSupport.args = {
-  ...Default.args,
-  isGroupSupport: true,
-  isLimitedPartner: true,
-}
-
-export const WithoutBorderRadius = Template.bind({})
-WithoutBorderRadius.args = {
-  ...Default.args,
-  hasBorderRadius: false,
-}

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

@@ -1,86 +0,0 @@
-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

@@ -1,192 +0,0 @@
-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,
-}