Merge pull request #31 from LucasWerey/feat/10

Feat/10

.eslintrc.cjs

@@ -22,7 +22,8 @@ module.exports = {
     'lib',
     'coverage',
     'badges',
-    'src/assets/**/*'
+    'src/assets/**/*',
+    './node_modules/strip-ansi/**/*'
   ],
   rules: {
     'vue/multi-word-component-names': 'off',

.prettierrc.json

@@ -4,5 +4,8 @@
   "tabWidth": 2,
   "singleQuote": true,
   "printWidth": 100,
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "arrowParens": "avoid",
+  "endOfLine": "auto",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

histoire.config.ts

@@ -36,6 +36,10 @@ export default defineConfig({
       {
         title: 'CTA',
         id: 'cta'
+      },
+      {
+        title: 'Containment',
+        id: 'containment'
       }
     ]
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucaswerey/dslib-pfe",
-  "version": "0.0.54",
+  "version": "0.0.55",
   "private": false,
   "main": "./lib/index.umd.js",
   "module": "./lib/index.mjs",
@@ -81,6 +81,7 @@
     "jsdom": "^22.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.0",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "typescript": "5.0.4",
     "vite": "^4.4.9",
     "vitest": "^0.34.2",

src/App.vue

@@ -1,59 +1,7 @@
 <script setup lang="ts">
 import './assets/index.css'
-import SnackBar from './components/Indicators/SnackBar'
-import Avatar from './components/Media/Avatar'
-import InputField from './components/CTA/InputField'
-
-const isVisible = ref(true)
-
-const consoleLog = (arg: boolean) => {
-  isVisible.value = !arg
-  return arg
-}
-
-const parentModel = ref('')
-const parentModel2 = ref('')
 </script>
 
 <template>
-  <div>
-    <SnackBar
-      type="info"
-      size="medium"
-      close="yes"
-      @close="(arg) => consoleLog(arg)"
-      :class="isVisible ? 'block' : 'translate-x-[100vw] ease-in-out duration-500'"
-    >
-      Lorem ipsum consectetur. Lorem ipsum consectetur.
-    </SnackBar>
-    <SnackBar
-      type="validation"
-      size="small"
-      close="yes"
-      @close="consoleLog"
-      :class="isVisible ? 'block' : 'translate-x-[100vw] ease-in-out duration-500'"
-      >Non</SnackBar
-    >
-    <SnackBar type="error" size="small" close="no">Oui</SnackBar>
-  </div>
-
-  <Avatar type="photo" size="xlarge" src="https://picsum.photos/200/300" alt="avatar" />
-  <Avatar type="notConnected" size="xlarge" />
-  <Avatar type="initial" size="xlarge">YO</Avatar>
-
-  <InputField
-    v-model="parentModel"
-    placeholder="Email Address"
-    label="Email"
-    hint="Please enter without mistakes"
-
-  />
-
-  <InputField
-    v-model="parentModel2"
-    placeholder="Email Address"
-    label="Email"
-    hint="Please enter without mistakes"
-    size="big"
-  />
+  <ChipContainer label="Espagnol" hasIcon />
 </template>

src/components.d.ts

@@ -15,6 +15,8 @@ declare module 'vue' {
     'Button.story': typeof import('./components/CTA/Button/Button.story.vue')['default']
     CheckBox: typeof import('./components/CTA/CheckBox/CheckBox.vue')['default']
     'CheckBox.story': typeof import('./components/CTA/CheckBox/CheckBox.story.vue')['default']
+    ChipContainer: typeof import('./components/Containment/ChipContainer/ChipContainer.vue')['default']
+    'ChipContainer.story': typeof import('./components/Containment/ChipContainer/ChipContainer.story.vue')['default']
     ControlDescription: typeof import('./../histoire/components/internals/ControlDescription.vue')['default']
     IconsBase: typeof import('./components/Media/IconsBase/IconsBase.vue')['default']
     'IconsBase.story': typeof import('./components/Media/IconsBase/IconsBase.story.vue')['default']

src/components/Containment/ChipContainer/ChipContainer.model.ts

@@ -0,0 +1,43 @@
+/*
+            Avaible colors:
+
+                  basic:
+                    black: '#1B1B1E',
+                    darkgrey: '#787878',
+                    grey: '#CDCDCD',
+                    lightgrey: '#ECECEC',
+                    verylightgrey: '#F6F6F6',
+                    white: '#FAFAFA'
+                  primary:
+                    DEFAULT: '#000000',
+                    light: '#00F2A5',
+                    charcoal: '#373F51',
+                    moonstone: '#58A4B0',
+                    powder: '#A9BCD0',
+                    platinum: '#D8DBE2'
+                  transparent: 'transparent',
+                  current: 'currentColor',
+                  inherit: 'inherit',
+                  error: '#FF5656',
+                  warning: '#FFC85C',
+                  success: '#7BC079',
+                  info: '#333333'
+            */
+
+export const CHIP_CONTAINER_ICON_POSITION = {
+  leading: 'leading',
+  trailing: 'trailing'
+} as const
+
+export const CHIP_CONTAINER_ICON_POSITIONS = Object.values(CHIP_CONTAINER_ICON_POSITION)
+export type ChipContainerIconPosition = (typeof CHIP_CONTAINER_ICON_POSITIONS)[number]
+export const CHIP_CONTAINER_ICON_POSITION_DEFAULT = CHIP_CONTAINER_ICON_POSITION.trailing
+
+export const CHIP_CONTAINER_HAS_ICON = {
+  true: true,
+  false: false
+} as const
+
+export const CHIP_CONTAINER_HAS_ICONS = Object.values(CHIP_CONTAINER_HAS_ICON)
+export type ChipContainerHasIcon = (typeof CHIP_CONTAINER_HAS_ICONS)[number]
+export const CHIP_CONTAINER_HAS_ICON_DEFAULT = CHIP_CONTAINER_HAS_ICON.false

src/components/Containment/ChipContainer/ChipContainer.spec.ts

@@ -0,0 +1,54 @@
+import { mount } from '@vue/test-utils'
+import { it, describe, expect } from 'vitest'
+import ChipContainer from './ChipContainer.vue'
+import {
+  CHIP_CONTAINER_ICON_POSITION_DEFAULT,
+  CHIP_CONTAINER_ICON_POSITION,
+  CHIP_CONTAINER_HAS_ICON_DEFAULT
+} from './ChipContainer.model'
+
+describe('ChipContainer', () => {
+  it('renders the label correctly', () => {
+    const wrapper = mount(ChipContainer, {
+      props: {
+        label: 'Test label',
+        iconPosition: CHIP_CONTAINER_ICON_POSITION_DEFAULT,
+        hasIcon: CHIP_CONTAINER_HAS_ICON_DEFAULT
+      }
+    })
+    expect(wrapper.text()).toContain('Test label')
+  })
+
+  it('renders the icon when hasIcon is true', () => {
+    const wrapper = mount(ChipContainer, {
+      props: {
+        label: 'Test label',
+        iconPosition: CHIP_CONTAINER_ICON_POSITION_DEFAULT,
+        hasIcon: true
+      }
+    })
+    expect(wrapper.findComponent({ name: 'IconsBase' }).exists()).toBe(true)
+  })
+
+  it('does not render the icon when hasIcon is false', () => {
+    const wrapper = mount(ChipContainer, {
+      props: {
+        label: 'Test label',
+        iconPosition: CHIP_CONTAINER_ICON_POSITION_DEFAULT,
+        hasIcon: false
+      }
+    })
+    expect(wrapper.findComponent({ name: 'IconsBase' }).exists()).toBe(false)
+  })
+
+  it('sets the correct icon position', () => {
+    const wrapper = mount(ChipContainer, {
+      props: {
+        label: 'Test label',
+        iconPosition: 'leading',
+        hasIcon: true
+      }
+    }) as any
+    expect(wrapper.classes()).toContain('flex-row-reverse')
+  })
+})

src/components/Containment/ChipContainer/ChipContainer.story.vue

@@ -0,0 +1,62 @@
+<template>
+  <Story title="Chip Container" group="containment">
+    <template #controls>
+      <ControlDescription>
+        <HstSelect
+          v-model="controls.iconPosition"
+          :options="Object.values(CHIP_CONTAINER_ICON_POSITION)"
+          title="Icon Position"
+        />
+      </ControlDescription>
+      <ControlDescription>
+        <HstCheckbox v-model="controls.hasIcon" title="Has Icon" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstSelect v-model="controls.label" :options="labelOptions" title="Label" />
+      </ControlDescription>
+    </template>
+
+    <Variant title="Playground" auto-props-disabled>
+      <ChipContainer
+        :iconPosition="controls.iconPosition"
+        :hasIcon="controls.hasIcon"
+        :label="controls.label"
+      />
+    </Variant>
+    <Variant title="Default">
+      <ChipContainer label="Default" />
+    </Variant>
+    <Variant title="With Icon" :auto-props-disabled="true">
+      <ChipContainer
+        label="With Icon"
+        :hasIcon="true"
+        @deleteChip="logEvent('deleteChip', $event)"
+      />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { logEvent } from 'histoire/client'
+import {
+  CHIP_CONTAINER_ICON_POSITION_DEFAULT,
+  CHIP_CONTAINER_ICON_POSITION,
+  CHIP_CONTAINER_HAS_ICON_DEFAULT
+} from './ChipContainer.model'
+
+import type { ChipContainerIconPosition, ChipContainerHasIcon } from './ChipContainer.model'
+
+interface Controls {
+  iconPosition: ChipContainerIconPosition
+  hasIcon: ChipContainerHasIcon
+  label: string
+}
+
+const controls = reactive<Controls>({
+  iconPosition: CHIP_CONTAINER_ICON_POSITION_DEFAULT,
+  hasIcon: CHIP_CONTAINER_HAS_ICON_DEFAULT,
+  label: 'Label 1'
+})
+
+const labelOptions = ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5']
+</script>

src/components/Containment/ChipContainer/ChipContainer.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="flex h-[22px] min-w-[69px] max-w-[95px] items-center justify-center justify-between gap-2 overflow-hidden rounded-lg border-[0.25px] border-primary-moonstone bg-primary-light bg-opacity-10 px-2 py-1 text-2 font-normal leading-5 text-primary-moonstone"
+    :class="setIconPosition"
+  >
+    <div class="flex cursor-default overflow-hidden overflow-ellipsis whitespace-nowrap">
+      {{ label }}
+    </div>
+    <div
+      v-if="hasIcon"
+      class="flex h-[18px] w-[18px] cursor-pointer items-center overflow-y-hidden"
+      :click="emit('deleteChip')"
+    >
+      <IconsBase name="close" class="h-full w-full" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  CHIP_CONTAINER_ICON_POSITION_DEFAULT,
+  CHIP_CONTAINER_ICON_POSITION,
+  CHIP_CONTAINER_HAS_ICON_DEFAULT,
+  CHIP_CONTAINER_HAS_ICON
+} from './ChipContainer.model'
+
+import type { ChipContainerIconPosition, ChipContainerHasIcon } from './ChipContainer.model'
+
+const props = defineProps({
+  iconPosition: {
+    type: String as PropType<ChipContainerIconPosition>,
+    default: CHIP_CONTAINER_ICON_POSITION_DEFAULT,
+    validator: (value: ChipContainerIconPosition) => {
+      return Object.values(CHIP_CONTAINER_ICON_POSITION).includes(value)
+    }
+  },
+  hasIcon: {
+    type: Boolean as PropType<ChipContainerHasIcon>,
+    default: CHIP_CONTAINER_HAS_ICON_DEFAULT,
+    validator: (value: ChipContainerHasIcon) => {
+      return Object.values(CHIP_CONTAINER_HAS_ICON).includes(value)
+    }
+  },
+  label: {
+    type: String as PropType<string>,
+    default: '',
+    required: true
+  }
+})
+
+const label = computed(() => props.label)
+const hasIcon = computed(() => props.hasIcon)
+
+const setIconPosition = computed(() => {
+  return props.iconPosition === CHIP_CONTAINER_ICON_POSITION.trailing
+    ? 'flex-row'
+    : 'flex-row-reverse'
+})
+
+const emit = defineEmits(['deleteChip'])
+</script>

src/components/Containment/ChipContainer/index.ts

@@ -0,0 +1 @@
+export { default } from './ChipContainer.vue';

src/index.ts

@@ -11,3 +11,5 @@ export { default as SnackBar } from './components/Indicators/SnackBar'
 export { default as Avatar } from './components/Media/Avatar'
 export { default as VideoPlayer } from './components/Media/VideoPlayer'
 export { default as  InputField } from './components/CTA/InputField';
+export { default as  chipContainer } from './components/Containment/ChipContainer';
+export { default as  ChipContainer } from './components/Containment/ChipContainer';