From fd42c29ae9f65193cc95d781d4099dff27f52bbc Mon Sep 17 00:00:00 2001
From: LucasWerey <lucas.werey@hotmail.com>
Date: Tue, 16 Jan 2024 20:05:05 +0100
Subject: [PATCH 1/3] feat(dslib): add ChipContainer

---
 .prettierrc.json                              |  5 +-
 histoire.config.ts                            |  4 ++
 package.json                                  |  3 +-
 src/App.vue                                   | 54 +---------------
 src/components.d.ts                           |  2 +
 .../ChipContainer/ChipContainer.model.ts      | 43 +++++++++++++
 .../ChipContainer/ChipContainer.spec.ts       | 54 ++++++++++++++++
 .../ChipContainer/ChipContainer.story.vue     | 62 +++++++++++++++++++
 .../ChipContainer/ChipContainer.vue           | 61 ++++++++++++++++++
 .../Containment/ChipContainer/index.ts        |  1 +
 src/index.ts                                  |  2 +
 yarn.lock                                     |  7 +++
 12 files changed, 243 insertions(+), 55 deletions(-)
 create mode 100644 src/components/Containment/ChipContainer/ChipContainer.model.ts
 create mode 100644 src/components/Containment/ChipContainer/ChipContainer.spec.ts
 create mode 100644 src/components/Containment/ChipContainer/ChipContainer.story.vue
 create mode 100644 src/components/Containment/ChipContainer/ChipContainer.vue
 create mode 100644 src/components/Containment/ChipContainer/index.ts

diff --git a/.prettierrc.json b/.prettierrc.json
index ecdf3e0..35c4672 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -4,5 +4,8 @@
   "tabWidth": 2,
   "singleQuote": true,
   "printWidth": 100,
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "arrowParens": "avoid",
+  "endOfLine": "auto",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/histoire.config.ts b/histoire.config.ts
index 19aeb36..0cdb07c 100644
--- a/histoire.config.ts
+++ b/histoire.config.ts
@@ -36,6 +36,10 @@ export default defineConfig({
       {
         title: 'CTA',
         id: 'cta'
+      },
+      {
+        title: 'Containment',
+        id: 'containment'
       }
     ]
   }
diff --git a/package.json b/package.json
index 9c99c93..819b56d 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.vue b/src/App.vue
index 06fccb4..e883d57 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components.d.ts b/src/components.d.ts
index 4bdc54c..3d823a7 100644
--- a/src/components.d.ts
+++ b/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']
diff --git a/src/components/Containment/ChipContainer/ChipContainer.model.ts b/src/components/Containment/ChipContainer/ChipContainer.model.ts
new file mode 100644
index 0000000..be5f466
--- /dev/null
+++ b/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
diff --git a/src/components/Containment/ChipContainer/ChipContainer.spec.ts b/src/components/Containment/ChipContainer/ChipContainer.spec.ts
new file mode 100644
index 0000000..fccce8f
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/src/components/Containment/ChipContainer/ChipContainer.story.vue b/src/components/Containment/ChipContainer/ChipContainer.story.vue
new file mode 100644
index 0000000..b72eaad
--- /dev/null
+++ b/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>
diff --git a/src/components/Containment/ChipContainer/ChipContainer.vue b/src/components/Containment/ChipContainer/ChipContainer.vue
new file mode 100644
index 0000000..dbd7062
--- /dev/null
+++ b/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>
diff --git a/src/components/Containment/ChipContainer/index.ts b/src/components/Containment/ChipContainer/index.ts
new file mode 100644
index 0000000..bd0f1bc
--- /dev/null
+++ b/src/components/Containment/ChipContainer/index.ts
@@ -0,0 +1 @@
+export { default } from './ChipContainer.vue';
diff --git a/src/index.ts b/src/index.ts
index 9e08478..e4fc331 100644
--- a/src/index.ts
+++ b/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';
diff --git a/yarn.lock b/yarn.lock
index 2436ec4..f1b2caa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4076,6 +4076,11 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+prettier-plugin-tailwindcss@^0.5.11:
+  version "0.5.11"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.11.tgz#1aa9308c3285b3cb7942aaeaec8d0e0775ac54d0"
+  integrity sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==
+
 prettier@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.1.1.tgz#6ba9f23165d690b6cbdaa88cb0807278f7019848"
@@ -4478,6 +4483,7 @@ string-argv@~0.3.1:
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4532,6 +4538,7 @@ string.prototype.trimstart@^1.0.7:
     es-abstract "^1.22.1"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==

From ebd16dbef251f2c773ad0377ddfa4dc8c9cfaf7c Mon Sep 17 00:00:00 2001
From: LucasWerey <lucas.werey@hotmail.com>
Date: Tue, 16 Jan 2024 20:08:27 +0100
Subject: [PATCH 2/3] feat(dslib): add ChipContainer

---
 .eslintrc.cjs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index bc8d22c..6fc1578 100644
--- a/.eslintrc.cjs
+++ b/.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',

From 67981cb38d134f43378906568a7a2dd12433dfb2 Mon Sep 17 00:00:00 2001
From: LucasWerey <lucas.werey@hotmail.com>
Date: Tue, 16 Jan 2024 20:14:25 +0100
Subject: [PATCH 3/3] feat(dslib): add ChipContainer

---
 yarn.lock | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index f1b2caa..faf363f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -680,12 +680,12 @@
   integrity sha512-25a90vugBz3KH3VzuddxuKeAjBQ1+osXQy2QICQO0kUXAtGHNj4u8T4iG5AgQD9CQXf6dc5+pnPoFZADHlW9VQ==
 
 "@humanwhocodes/config-array@^0.11.13":
-  version "0.11.13"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297"
-  integrity sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==
+  version "0.11.14"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
+  integrity sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
   dependencies:
-    "@humanwhocodes/object-schema" "^2.0.1"
-    debug "^4.1.1"
+    "@humanwhocodes/object-schema" "^2.0.2"
+    debug "^4.3.1"
     minimatch "^3.0.5"
 
 "@humanwhocodes/module-importer@^1.0.1":
@@ -693,10 +693,10 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
-"@humanwhocodes/object-schema@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz#e5211452df060fa8522b55c7b3c0c4d1981cb044"
-  integrity sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==
+"@humanwhocodes/object-schema@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
+  integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
 
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"