diff --git a/README.md b/README.md index 4799343..cbdb684 100644 --- a/README.md +++ b/README.md @@ -3,39 +3,37 @@ This repo provides a basic setup for developing component libraries in Vite with Vue 3 typescript and TailwindCss ## Features + - Create a component library using Vue3 Vite and typescript - Tailwind CSS - Automatically export and register all components in `./src/components` ## Components + - [x] LcBadge - [x] LcButton -- [x] LcCheckbox -- [x] LcForm - [x] LcIcon -- [x] LcInput - [x] LcModal -- [x] LcMultiselect - [x] LcPagination -- [x] LcRadioGroup & LcRadio - [x] LcTable -- [x] LcTextarea - [x] LcTooltip ## Commands + ```bash yarn dev # Will run the demos app so you can see your components yarn build # Will build your components into a library and generate types ``` ## Publish on NPM + ### Generate build Upgrade version package : - Patch releases: 1.0 or 1.0.x or ~1.0.4 - Minor releases: 1 or 1.x or ^1.0.4 -- Major releases: * or x +- Major releases: \* or x ``` $ yarn build diff --git a/package.json b/package.json index f74c828..dc7edbd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lc-component-library", - "version": "1.4.2", + "version": "1.5.0", "license": "MIT", "files": [ "dist" @@ -29,23 +29,18 @@ "dependencies": { "@babel/preset-env": "^7.14.2", "@babel/preset-typescript": "^7.13.0", - "@vee-validate/i18n": "^4.1.20", - "@vee-validate/rules": "^4.1.20", - "@vueform/multiselect": "^2.0.1", "esno": "0.4.4", - "maska": "^1.4.4", - "vee-validate": "4.4.4", "vue": "3.2.3" }, "devDependencies": { "@antfu/eslint-config": "^0.4.3", "@babel/core": "^7.13.14", - "@storybook/addon-a11y": "^6.3.6", - "@storybook/addon-actions": "^6.3.6", - "@storybook/addon-essentials": "^6.3.6", - "@storybook/addon-links": "^6.3.6", + "@storybook/addon-a11y": "^6.3.7", + "@storybook/addon-actions": "^6.3.7", + "@storybook/addon-essentials": "^6.3.7", + "@storybook/addon-links": "^6.3.7", "@storybook/addon-postcss": "^2.0.0", - "@storybook/vue3": "^6.3.6", + "@storybook/vue3": "^6.3.7", "@tailwindcss/postcss7-compat": "^2.1.0", "@types/jest": "^26.0.23", "@typescript-eslint/eslint-plugin": "4.21.0", diff --git a/src/components/LcCheckbox/LcCheckbox.d.ts b/src/components/LcAccordion/LcAccordion.d.ts similarity index 100% rename from src/components/LcCheckbox/LcCheckbox.d.ts rename to src/components/LcAccordion/LcAccordion.d.ts diff --git a/src/components/LcAccordion/LcAccordion.stories.ts b/src/components/LcAccordion/LcAccordion.stories.ts new file mode 100644 index 0000000..501b67c --- /dev/null +++ b/src/components/LcAccordion/LcAccordion.stories.ts @@ -0,0 +1,106 @@ +import LcButton from '../LcButton' +import LcAccordion from './LcAccordion' + +export default { + title: 'Example/LcAccordion', + component: LcAccordion, +} + +const Template = (args: any) => ({ + components: { LcAccordion, LcButton }, + setup() { + return { args } + }, + data() { + return { open: args.modelValue } + }, + template: ` + + + + `, +}) + +const TemplateSlotActionsAfter = (args: any) => ({ + components: { LcAccordion, LcButton }, + setup() { + return { args } + }, + data() { + return { open: args.modelValue } + }, + template: ` + + + + + `, +}) + +const TemplateSlotActionsBefore = (args: any) => ({ + components: { LcAccordion, LcButton }, + setup() { + return { args } + }, + data() { + return { open: args.modelValue } + }, + template: ` + + + + + `, +}) + +export const Base = Template.bind({}) as any +Base.args = { + title: '1. House information', + modelValue: true, +} + +export const HaveToogle = Template.bind({}) as any +HaveToogle.args = { + ...Base.args, + haveToggle: true, +} + +export const HaveToogleButClose = Template.bind({}) as any +HaveToogleButClose.args = { + ...HaveToogle.args, + modelValue: false, +} + +export const HaveButtonRight = TemplateSlotActionsAfter.bind({}) as any +HaveButtonRight.args = { + title: '1. House information', + modelValue: true, +} + +export const HaveButtonRightAndToggle = TemplateSlotActionsAfter.bind({}) as any +HaveButtonRightAndToggle.args = { + ...HaveButtonRight.args, + haveToggle: true, +} + +export const HaveButtonLeft = TemplateSlotActionsBefore.bind({}) as any +HaveButtonLeft.args = { + title: '1. House information', + modelValue: true, +} + +export const HaveButtonLeftAndToggle = TemplateSlotActionsBefore.bind({}) as any +HaveButtonLeftAndToggle.args = { + ...HaveButtonLeft.args, + haveToggle: true, +} diff --git a/src/components/LcAccordion/LcAccordion.vue b/src/components/LcAccordion/LcAccordion.vue new file mode 100644 index 0000000..2b3cbf0 --- /dev/null +++ b/src/components/LcAccordion/LcAccordion.vue @@ -0,0 +1,159 @@ + + + + + diff --git a/src/components/LcAccordion/__tests__/LcAccordion.spec.ts b/src/components/LcAccordion/__tests__/LcAccordion.spec.ts new file mode 100644 index 0000000..d2bd73c --- /dev/null +++ b/src/components/LcAccordion/__tests__/LcAccordion.spec.ts @@ -0,0 +1,206 @@ +import { mount } from '@vue/test-utils' +import LcAccordion from '../LcAccordion' + +let wrapper: any + +afterEach(() => { + wrapper?.unmount() +}) + +describe('LcAccordion', () => { + it('is a Vue instance', () => { + wrapper = mount(LcAccordion) + expect(wrapper.vm).toBeTruthy() + }) + + describe('Default behavior', () => { + beforeEach(() => { + wrapper = mount(LcAccordion) + }) + + it('should render title', async() => { + await wrapper.setProps({ title: 'My title' }) + + const title = wrapper.find('[data-testid="lc-accordion-header-title"]') + + expect(title.exists()).toBeTruthy() + expect(title.text()).toBe('My title') + }) + + it('shouldn\'t render title', () => { + const title = wrapper.find('[data-testid="lc-accordion-header-title"]') + + expect(title.exists()).toBeFalsy() + }) + + it('should body is hide', async() => { + await wrapper.setProps({ modelValue: false }) + + const body = wrapper.find('[data-testid="lc-accordion-body"]') + expect(body.isVisible()).toBe(false) + }) + + it('should body is visible', () => { + const body = wrapper.find('[data-testid="lc-accordion-body"]') + expect(body.isVisible()).toBe(true) + }) + }) + + describe('Toggle button', () => { + it('shouldn\'t render button toggle', () => { + wrapper = mount(LcAccordion) + + const button = wrapper.find('[data-testid="lc-accordion-header-toggle-button"]') + + expect(button.exists()).toBeFalsy() + }) + + it('should render button toggle', () => { + wrapper = mount(LcAccordion, { + props: { haveToggle: true }, + }) + + const button = wrapper.find('[data-testid="lc-accordion-header-toggle-button"]') + + expect(button.exists()).toBeTruthy() + }) + + it('should emit update:modelValue with value false', async() => { + wrapper = mount(LcAccordion, { + props: { haveToggle: true }, + }) + + const button = wrapper.find('[data-testid="lc-accordion-header-toggle-button"]') + await button.trigger('click') + + expect(wrapper.emitted('update:modelValue')).toBeTruthy() + expect(wrapper.emitted('update:modelValue')[0]).toStrictEqual([false]) + }) + + it('should emit update:modelValue with value true', async() => { + wrapper = mount(LcAccordion, { + props: { haveToggle: true, modelValue: false }, + }) + + const button = wrapper.find('[data-testid="lc-accordion-header-toggle-button"]') + await button.trigger('click') + + expect(wrapper.emitted('update:modelValue')).toBeTruthy() + expect(wrapper.emitted('update:modelValue')[0]).toStrictEqual([true]) + }) + + it('should render body accordion visible then hide', async() => { + const wrapper = mount({ + data() { + return { open: true } + }, + template: '', + components: { LcAccordion }, + }) + + const lcAccordion = wrapper.findComponent(LcAccordion) + const bodyBeforeClick = lcAccordion.find('[data-testid="lc-accordion-body"]') + + const button = wrapper.find('[data-testid="lc-accordion-header-toggle-button"]') + await button.trigger('click') + const bodyAfterClick = lcAccordion.find('[data-testid="lc-accordion-body"]') + + expect(bodyBeforeClick.isVisible()).toBe(true) + expect(bodyAfterClick.isVisible()).toBe(false) + }) + + it('should render body accordion hide then visible', async() => { + const wrapper = mount({ + data() { + return { open: false } + }, + template: '', + components: { LcAccordion }, + }) + + const lcAccordion = wrapper.findComponent(LcAccordion) + const bodyBeforeClick = lcAccordion.find('[data-testid="lc-accordion-body"]') + + const button = wrapper.find('[data-testid="lc-accordion-header-toggle-button"]') + await button.trigger('click') + const bodyAfterClick = lcAccordion.find('[data-testid="lc-accordion-body"]') + + expect(bodyBeforeClick.isVisible()).toBe(false) + expect(bodyAfterClick.isVisible()).toBe(true) + }) + }) + + describe('Before slot', () => { + beforeEach(() => { + wrapper = mount(LcAccordion, { + slots: { 'content-before': '' }, + }) + }) + + it('should render content before slot', () => { + const contentSlot = wrapper.find('[data-testid="button-before-slot"]') + expect(contentSlot.exists()).toBeTruthy() + }) + + it('should render HTML header with before slot', () => { + const header = wrapper.find('[data-testid="lc-accordion-header"]') + + expect(header.html()).toMatchSnapshot() + }) + + it('should render HTML header with button toogle + befor slot', async() => { + await wrapper.setProps({ haveToggle: true }) + + const header = wrapper.find('[data-testid="lc-accordion-header"]') + expect(header.html()).toMatchSnapshot() + }) + }) + + describe('After slot', () => { + beforeEach(() => { + wrapper = mount(LcAccordion, { + slots: { 'content-after': '' }, + }) + }) + + it('should render content after slot', () => { + const contentSlot = wrapper.find('[data-testid="button-after-slot"]') + expect(contentSlot.exists()).toBeTruthy() + }) + + it('should render HTML header with after slot', () => { + const header = wrapper.find('[data-testid="lc-accordion-header"]') + + expect(header.html()).toMatchSnapshot() + }) + + it('should render HTML header with button toogle + after slot', async() => { + await wrapper.setProps({ haveToggle: true }) + + const header = wrapper.find('[data-testid="lc-accordion-header"]') + expect(header.html()).toMatchSnapshot() + }) + }) + + describe('Without slots', () => { + beforeEach(() => { + wrapper = mount(LcAccordion, { + props: { title: 'My title' }, + }) + }) + + it('should render HTML header (only title)', async() => { + const header = wrapper.find('[data-testid="lc-accordion-header"]') + + expect(header.html()).toMatchSnapshot() + }) + + it('should render HTML header with button toggle', async() => { + await wrapper.setProps({ haveToggle: true }) + + const header = wrapper.find('[data-testid="lc-accordion-header"]') + + expect(header.html()).toMatchSnapshot() + }) + }) +}) diff --git a/src/components/LcAccordion/__tests__/__snapshots__/LcAccordion.spec.ts.snap b/src/components/LcAccordion/__tests__/__snapshots__/LcAccordion.spec.ts.snap new file mode 100644 index 0000000..045ea4a --- /dev/null +++ b/src/components/LcAccordion/__tests__/__snapshots__/LcAccordion.spec.ts.snap @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LcAccordion After slot should render HTML header with after slot 1`] = `"
"`; + +exports[`LcAccordion After slot should render HTML header with button toogle + after slot 1`] = `"
"`; + +exports[`LcAccordion Before slot should render HTML header with before slot 1`] = `"
"`; + +exports[`LcAccordion Before slot should render HTML header with button toogle + befor slot 1`] = `"
"`; + +exports[`LcAccordion Without slots should render HTML header (only title) 1`] = `"
My title
"`; + +exports[`LcAccordion Without slots should render HTML header with button toggle 1`] = `"
My title
"`; diff --git a/src/components/LcAccordion/index.ts b/src/components/LcAccordion/index.ts new file mode 100644 index 0000000..4c49df2 --- /dev/null +++ b/src/components/LcAccordion/index.ts @@ -0,0 +1 @@ +export { default } from './LcAccordion.vue' diff --git a/src/components/LcCheckbox/LcCheckbox.stories.ts b/src/components/LcCheckbox/LcCheckbox.stories.ts deleted file mode 100644 index c955bec..0000000 --- a/src/components/LcCheckbox/LcCheckbox.stories.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { action } from '@storybook/addon-actions' - -import LcCheckbox from './LcCheckbox' - -export default { - title: 'Example/LcCheckbox', - component: LcCheckbox, -} - -const Template = (args: any) => ({ - components: { LcCheckbox }, - setup() { - return { args } - }, - template: '', - methods: { - onChange: action('onChange'), - }, -}) - -export const Base = Template.bind({}) as any -Base.args = { - modelValue: true, - label: 'Label de la checkbox', - name: 'cgv', - rules: 'required', -} - -export const Multiple = Template.bind({}) as any -Multiple.args = { - modelValue: ['matin'], - name: 'schedule', - rules: 'required', - fields: [ - { - label: 'Matin', - value: 'matin', - color: '#CDCDD6', - }, - { - label: 'Midi', - value: 'midi', - color: '#77A6DC', - }, - { - label: 'Soirée', - value: 'soiree', - color: '#B5DCF3', - }, - ], -} diff --git a/src/components/LcCheckbox/LcCheckbox.vue b/src/components/LcCheckbox/LcCheckbox.vue deleted file mode 100644 index 6f53f74..0000000 --- a/src/components/LcCheckbox/LcCheckbox.vue +++ /dev/null @@ -1,107 +0,0 @@ - - - - - diff --git a/src/components/LcCheckbox/__tests__/LcCheckbox.spec.ts b/src/components/LcCheckbox/__tests__/LcCheckbox.spec.ts deleted file mode 100644 index 9c316e8..0000000 --- a/src/components/LcCheckbox/__tests__/LcCheckbox.spec.ts +++ /dev/null @@ -1,160 +0,0 @@ -import { mount } from '@vue/test-utils' -import LcCheckbox from '../LcCheckbox' - -let wrapper: any - -afterEach(() => { - wrapper?.unmount() -}) - -describe('LcCheckbox', () => { - it('is a Vue instance', () => { - wrapper = mount(LcCheckbox, { - props: { - modelValue: false, - name: 'newsletter', - }, - }) - expect(wrapper.vm).toBeTruthy() - }) - - describe('Input behaviour', () => { - beforeEach(() => { - wrapper = mount(LcCheckbox, { - props: { - modelValue: false, - name: 'newsletter', - label: 'Je souhaite recevoir occasionnellement une sélection d’expériences et de maisons.', - }, - }) - }) - it('should emit the event', async() => { - const checkbox = wrapper.find('[data-testid="lc-checkbox"]') - await checkbox.setChecked() - - expect(wrapper.emitted()).toHaveProperty('update:modelValue') - }) - - it('should emit the right value', async() => { - const checkbox = wrapper.find('[data-testid="lc-checkbox"]') - await checkbox.setChecked() - - const changeEvent = wrapper.emitted('update:modelValue') - - expect(changeEvent[0]).toEqual([true]) - }) - - it('should disable the checkbox button', async() => { - await wrapper.setProps({ disabled: true }) - const checkbox = wrapper.find('[data-testid="lc-checkbox"]') - - expect(checkbox.attributes()).toHaveProperty('disabled') - }) - - it('should render correct color style when unchecked', async() => { - await wrapper.setProps({ color: '#77a6dc' }) - const checkbox = wrapper.find('[data-testid="lc-checkbox"]') - - expect(checkbox.element.style.getPropertyValue('border-color')).toBe('#77a6dc') - expect(checkbox.element.style.getPropertyValue('background-color')).toBe('') - }) - - it('should render correct color style when checked', async() => { - await wrapper.setProps({ color: '#77a6dc' }) - const checkbox = wrapper.find('[data-testid="lc-checkbox"]') - await checkbox.setChecked() - - expect(checkbox.element.style.getPropertyValue('border-color')).toBe('#77a6dc') - expect(checkbox.element.style.getPropertyValue('background-color')).toBe('rgb(119, 166, 220)') - }) - }) - - describe('Multiple input behaviour', () => { - beforeEach(() => { - wrapper = mount(LcCheckbox, { - props: { - modelValue: [], - name: 'schedule', - label: 'Schedule', - fields: [ - { - label: 'Morning', - value: 'morning', - }, - { - label: 'Midday', - value: 'midday', - }, - { - label: 'Evening', - value: 'evening', - }, - ], - }, - }) - }) - - it('should render 3 checkbox', () => { - const checkboxs = wrapper.findAll('[data-testid="lc-checkbox"]') - - expect(checkboxs).toHaveLength(3) - }) - - it('should emit the right value', async() => { - const checkbox = wrapper.findAll('[data-testid="lc-checkbox"]') - await checkbox[0].setChecked() - - const eventEmitted = wrapper.emitted('update:modelValue') - expect(eventEmitted).toHaveLength(1) - - expect(eventEmitted[0][0]).toEqual(['morning']) - }) - - it('should emit the right values', async() => { - const checkbox = wrapper.findAll('[data-testid="lc-checkbox"]') - await checkbox[0].setChecked() - await checkbox[1].setChecked() - - const eventEmitted = wrapper.emitted('update:modelValue') - - expect(eventEmitted).toHaveLength(2) - expect(eventEmitted[0][0]).toEqual(['morning']) - expect(eventEmitted[1][0]).toEqual(['morning', 'midday']) - }) - }) - - describe('Multiple input behaviour custom color', () => { - it('should render correct color style', () => { - wrapper = mount(LcCheckbox, { - props: { - modelValue: [], - name: 'schedule', - label: 'Schedule', - fields: [ - { - label: 'Morning', - value: 'morning', - color: '#cdcdd6', - }, - { - label: 'Midday', - value: 'midday', - color: '#cdcdd6', - }, - { - label: 'Evening', - value: 'evening', - color: '#cdcdd6', - }, - ], - }, - }) - - const checkboxs = wrapper.findAll('[data-testid="lc-checkbox"]') - const firstCheckbox = checkboxs[0] - - expect(firstCheckbox.element.style.getPropertyValue('border-color')).toBe('#cdcdd6') - expect(firstCheckbox.element.style.getPropertyValue('background-color')).toBe('rgb(205, 205, 214)') - }) - }) -}) diff --git a/src/components/LcCheckbox/index.ts b/src/components/LcCheckbox/index.ts deleted file mode 100644 index e353593..0000000 --- a/src/components/LcCheckbox/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './LcCheckbox.vue' diff --git a/src/components/LcForm/LcForm.d.ts b/src/components/LcForm/LcForm.d.ts deleted file mode 100644 index dd6e676..0000000 --- a/src/components/LcForm/LcForm.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { DefineComponent } from 'vue' -const component: DefineComponent<{}, {}, any> -export default component diff --git a/src/components/LcForm/LcForm.stories.ts b/src/components/LcForm/LcForm.stories.ts deleted file mode 100644 index 240c9f6..0000000 --- a/src/components/LcForm/LcForm.stories.ts +++ /dev/null @@ -1,126 +0,0 @@ -import { action } from '@storybook/addon-actions' - -import LcForm from './LcForm' - -export default { - title: 'Example/LcForm', - component: LcForm, -} - -const Template = (args: any) => ({ - components: { LcForm }, - setup() { - return { args } - }, - template: '', - methods: { - onSubmit: action('onSubmit'), - onCancel: action('onCancel'), - }, -}) - -export const Base = Template.bind({}) as any -Base.args = { - idForm: 'lcForm', - buttonPrimary: { - attrs: { - color: 'secondary', - class: 'btn-primary', - }, - full: true, - text: 'Valider', - }, - buttonSecondary: { - attrs: { - color: 'secondary', - class: 'btn-secondary', - }, - full: true, - text: 'Annuler', - }, - fields: [ - { - model: 'Bob', - inputType: 'input', - attr: { - disabled: true, - wrapperClass: 'w-full mb-4', - placeholder: 'Ecrit dedans :)', - label: 'Prénom', - name: 'firstname', - rules: 'required', - }, - }, - { - model: '', - inputType: 'input', - attr: { - wrapperClass: 'w-full mb-4', - label: 'addresse', - name: 'address', - rules: 'required', - }, - }, - { - model: '', - inputType: 'textarea', - attr: { - wrapperClass: 'w-full mb-4', - label: 'Votre demande', - placeholder: 'Détailler votre demande', - name: 'request', - rules: 'required', - cols: 5, - rows: 5, - }, - }, - { - model: false, - inputType: 'checkbox', - attr: { - class: 'mb-4', - label: 'Je souhaite recevoir occasionnellement une sélection d’expériences et de maisons.', - name: 'newsletter', - rules: 'required', - }, - }, - { - model: '', - inputType: 'radio', - attr: { - label: 'Votre civilité :', - name: 'civility', - rules: 'required', - vertical: false, - }, - options: [ - { label: 'Monsieur', value: 'mr' }, - { label: 'Madame', value: 'ms' }, - { label: 'Non spécifié', value: 'unspecified' }, - ], - }, - { - model: null, - inputType: 'select', - options: ['France', 'Indonésie', 'Espagne'], - attr: { - labelText: 'Pays', - name: 'coutnry', - rules: 'required', - wrapperClass: 'mb-4', - }, - }, - { - model: '', - inputType: 'mask', - attr: { - label: 'Siret', - mask: '### ### ### #####', - name: 'siret', - placeholder: '### ### ### #####', - rules: { required: true, regex: /^[0-9]{3} [0-9]{3} [0-9]{3} [0-9]{5}$/ }, - wrapperClass: 'w-full lc-col mb-4', - }, - }, - ], -} diff --git a/src/components/LcForm/LcForm.vue b/src/components/LcForm/LcForm.vue deleted file mode 100644 index 06a8b39..0000000 --- a/src/components/LcForm/LcForm.vue +++ /dev/null @@ -1,198 +0,0 @@ - - - diff --git a/src/components/LcForm/index.ts b/src/components/LcForm/index.ts deleted file mode 100644 index 0ccebd8..0000000 --- a/src/components/LcForm/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './LcForm.vue' diff --git a/src/components/LcForm/types.ts b/src/components/LcForm/types.ts deleted file mode 100644 index 2f6e175..0000000 --- a/src/components/LcForm/types.ts +++ /dev/null @@ -1,11 +0,0 @@ -interface FieldClassContainer { - containerInputClass: string -} -interface FormValues { - [key: string]: string|number -} - -export { - FieldClassContainer, - FormValues, -} diff --git a/src/components/LcInput/LcInput.d.ts b/src/components/LcInput/LcInput.d.ts deleted file mode 100644 index dd6e676..0000000 --- a/src/components/LcInput/LcInput.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { DefineComponent } from 'vue' -const component: DefineComponent<{}, {}, any> -export default component diff --git a/src/components/LcInput/LcInput.stories.ts b/src/components/LcInput/LcInput.stories.ts deleted file mode 100644 index 38c7f71..0000000 --- a/src/components/LcInput/LcInput.stories.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { action } from '@storybook/addon-actions' - -import LcInput from './LcInput' - -export default { - title: 'Example/LcInput', - component: LcInput, -} - -const Template = (args: any) => ({ - components: { LcInput }, - setup() { - return { args } - }, - template: ``, - methods: { - onUpdate: action('onUpdate'), - onBlur: action('onBlur'), - }, -}) - -export const Base = Template.bind({}) as any -Base.args = { - label: 'Prénom', - name: 'firstname', - modelValue: '', - wrapperClass: 'w-full', -} - -export const Placeholder = Template.bind({}) as any -Placeholder.args = { - ...Base.args, - placeholder: 'Votre prénom', -} diff --git a/src/components/LcInput/LcInput.vue b/src/components/LcInput/LcInput.vue deleted file mode 100644 index 412dd60..0000000 --- a/src/components/LcInput/LcInput.vue +++ /dev/null @@ -1,139 +0,0 @@ - - - - - diff --git a/src/components/LcInput/__tests__/LcInput.spec.ts b/src/components/LcInput/__tests__/LcInput.spec.ts deleted file mode 100644 index 932c088..0000000 --- a/src/components/LcInput/__tests__/LcInput.spec.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { mount } from '@vue/test-utils' -import LcInput from '../LcInput' - -let wrapper: any - -beforeEach(() => { - wrapper = mount(LcInput, { props: { name: 'firstname' } }) -}) - -afterEach(() => { - wrapper?.unmount() -}) - -describe('LcInput', () => { - it('is a Vue instance', () => { - expect(wrapper.vm).toBeTruthy() - }) - - it('should set good id and name attributes', () => { - const input = wrapper.find('input') - - expect(input.attributes('id')).toBe('firstname') - expect(input.attributes('name')).toBe('firstname') - }) - - it('should render a label', async() => { - const labelText = 'Your Firstname' - await wrapper.setProps({ label: labelText }) - const label = wrapper.get('label') - - expect(label.text()).toBe(labelText) - }) - - it('should set the right input class', async() => { - await wrapper.setProps({ wrapperClass: 'foo' }) - - expect(wrapper.classes()).toContain('foo') - }) - - it('should set a placeholder', async() => { - const placeholderText = 'your firstname' - await wrapper.setProps({ placeholder: placeholderText }) - const input = wrapper.find('input') - - expect(input.attributes('placeholder')).toBe(placeholderText) - }) - - it('should emit blur event when leave input', async() => { - const input = wrapper.find('input') - await input.trigger('blur') - - expect(wrapper.emitted('blur')).toBeTruthy() - }) -}) diff --git a/src/components/LcInput/index.ts b/src/components/LcInput/index.ts deleted file mode 100644 index 240ad35..0000000 --- a/src/components/LcInput/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './LcInput.vue' diff --git a/src/components/LcMaskInput/LcMaskInput.d.ts b/src/components/LcMaskInput/LcMaskInput.d.ts deleted file mode 100644 index dd6e676..0000000 --- a/src/components/LcMaskInput/LcMaskInput.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { DefineComponent } from 'vue' -const component: DefineComponent<{}, {}, any> -export default component diff --git a/src/components/LcMaskInput/LcMaskInput.stories.ts b/src/components/LcMaskInput/LcMaskInput.stories.ts deleted file mode 100644 index e8a49b6..0000000 --- a/src/components/LcMaskInput/LcMaskInput.stories.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { action } from '@storybook/addon-actions' - -import LcMaskInput from './LcMaskInput' - -export default { - title: 'Example/LcMaskInput', - component: LcMaskInput, -} - -const Template = (args: any) => ({ - components: { LcMaskInput }, - setup() { - return { args } - }, - template: ``, - methods: { - onBlur: action('onBlur'), - rawValue: action('rawValue'), - }, -}) - -export const Base = Template.bind({}) as any -Base.args = { - label: 'Siret', - name: 'siret', - modelValue: '', - wrapperClass: 'w-full', - mask: '### ### ### #####', -} - -export const Value = Template.bind({}) as any -Value.args = { - ...Base.args, - modelValue: '11122233355555', -} diff --git a/src/components/LcMaskInput/LcMaskInput.vue b/src/components/LcMaskInput/LcMaskInput.vue deleted file mode 100644 index 568a5e7..0000000 --- a/src/components/LcMaskInput/LcMaskInput.vue +++ /dev/null @@ -1,145 +0,0 @@ - - - - - diff --git a/src/components/LcMaskInput/__tests__/LcMaskInput.spec.ts b/src/components/LcMaskInput/__tests__/LcMaskInput.spec.ts deleted file mode 100644 index 6f12eb1..0000000 --- a/src/components/LcMaskInput/__tests__/LcMaskInput.spec.ts +++ /dev/null @@ -1,107 +0,0 @@ -import { mount } from '@vue/test-utils' -import LcMaskInput from '../LcMaskInput' - -let wrapper: any - -afterEach(() => { - wrapper?.unmount() -}) - -describe('LcInput', () => { - it('is a Vue instance', () => { - wrapper = mount(LcMaskInput, { props: { name: 'siret' } }) - expect(wrapper.vm).toBeTruthy() - }) - - describe('Global input behavior', () => { - beforeEach(() => { - wrapper = mount(LcMaskInput, { props: { name: 'siret' } }) - }) - - it('should set good id and name attributes', () => { - const input = wrapper.find('[data-testid="lc-mask-input"]') - - expect(input.attributes('id')).toBe('siret') - expect(input.attributes('name')).toBe('siret') - }) - - it('should render a label', async() => { - const labelText = 'Your Siret' - await wrapper.setProps({ label: labelText }) - const label = wrapper.get('label') - - expect(label.text()).toBe(labelText) - }) - - it('should set the right input class', async() => { - await wrapper.setProps({ wrapperClass: 'foo' }) - - expect(wrapper.classes()).toContain('foo') - }) - - it('should set a placeholder', async() => { - const placeholderText = 'your siret' - await wrapper.setProps({ placeholder: placeholderText }) - const input = wrapper.find('[data-testid="lc-mask-input"]') - - expect(input.attributes('placeholder')).toBe(placeholderText) - }) - - it('should emit blur event when leave input', async() => { - const input = wrapper.find('[data-testid="lc-mask-input"]') - await input.trigger('blur') - - expect(wrapper.emitted('blur')).toBeTruthy() - }) - }) - - describe('Maska behavior', () => { - it('should value input is formatted', () => { - wrapper = mount(LcMaskInput, { - props: { - name: 'siret', - mask: '### ### ### #####', - modelValue: '12345678910112', - }, - }) - - const input = wrapper.find('[data-testid="lc-mask-input"]') - - expect(input.element.value).toBe('123 456 789 10112') - }) - - it('should value input is empty', async() => { - wrapper = mount(LcMaskInput, { - props: { - name: 'number', - mask: '###', - modelValue: '', - }, - }) - - const input = wrapper.find('[data-testid="lc-mask-input"]') - await input.setValue('AZE') - - expect(input.element.value).toBe('') - }) - - it('should emit raw-value event when value change', async() => { - wrapper = mount(LcMaskInput, { - props: { - name: 'number', - mask: '### ####', - modelValue: '', - }, - }) - - const input = wrapper.find('[data-testid="lc-mask-input"]') - await input.setValue('123 456') - - const eventEmitted = wrapper.emitted('raw-value') - // take the last event because maska launches several - const lastEvent = eventEmitted.length - 1 - - expect(eventEmitted[lastEvent]).toEqual(['123456']) - }) - }) -}) diff --git a/src/components/LcMaskInput/index.ts b/src/components/LcMaskInput/index.ts deleted file mode 100644 index 8c0b9db..0000000 --- a/src/components/LcMaskInput/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './LcMaskInput.vue' diff --git a/src/components/LcModal/LcModal.stories.ts b/src/components/LcModal/LcModal.stories.ts index b2767e6..90bb8e6 100644 --- a/src/components/LcModal/LcModal.stories.ts +++ b/src/components/LcModal/LcModal.stories.ts @@ -4,6 +4,9 @@ import LcModal from './LcModal' export default { title: 'Example/LcModal', component: LcModal, + parameters: { + layout: 'centered', + }, } const Template = (args: any) => ({ @@ -11,11 +14,15 @@ const Template = (args: any) => ({ setup() { return { args } }, + data() { + return { open: args.modelValue } + }, template: ` - + Open modal + `, @@ -23,6 +30,31 @@ const Template = (args: any) => ({ export const Base = Template.bind({}) as any Base.args = { - modelValue: true, + modelValue: false, title: 'Hello', } + +export const OpenDefault = Template.bind({}) as any +OpenDefault.args = { + ...Base.args, + modelValue: true, +} + +export const WithoutHeader = Template.bind({}) as any +WithoutHeader.args = { + ...Base.args, + noHeader: true, +} + +export const WithoutFooter = Template.bind({}) as any +WithoutFooter.args = { + ...Base.args, + noFooter: true, +} + +export const WithoutBoth = Template.bind({}) as any +WithoutBoth.args = { + ...Base.args, + noHeader: true, + noFooter: true, +} diff --git a/src/components/LcMultiselect/LcMultiselect.d.ts b/src/components/LcMultiselect/LcMultiselect.d.ts deleted file mode 100644 index dd6e676..0000000 --- a/src/components/LcMultiselect/LcMultiselect.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { DefineComponent } from 'vue' -const component: DefineComponent<{}, {}, any> -export default component diff --git a/src/components/LcMultiselect/LcMultiselect.stories.ts b/src/components/LcMultiselect/LcMultiselect.stories.ts deleted file mode 100644 index e26618f..0000000 --- a/src/components/LcMultiselect/LcMultiselect.stories.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { action } from '@storybook/addon-actions' - -import LcMultiselect from './LcMultiselect' - -export default { - title: 'Example/LcMultiselect', - component: LcMultiselect, -} - -const Template = (args: any) => ({ - components: { LcMultiselect }, - setup() { - return { args } - }, - template: ``, - methods: { - onClear: action('onClear'), - onChange: action('onChange'), - onSelect: action('onSelect'), - onDeselect: action('onDeselect'), - onOpen: action('onOpen'), - onClose: action('onClose'), - }, -}) - -export const Default = Template.bind({}) as any -Default.args = { - labelText: 'Pays', - name: 'country', - options: ['France', 'Indonésie', 'Espagne'], -} - -export const DefaultValue = Template.bind({}) as any -DefaultValue.args = { - ...Default.args, - modelValue: 'Indonésie', -} - -export const Placeholder = Template.bind({}) as any -Placeholder.args = { - ...Default.args, - placeholder: 'Choisir un pays', -} - -export const Searchable = Template.bind({}) as any -Searchable.args = { - ...Default.args, - searchable: true, -} - -export const ObjectOptions = Template.bind({}) as any -ObjectOptions.args = { - ...Searchable.args, - options: [ - { value: 'FR', label: 'France' }, { value: 'ID', label: 'Indonésie' }, { value: 'ES', label: 'Espagne' }], -} - -export const ObjectOptionsKeyCustom = Template.bind({}) as any -ObjectOptionsKeyCustom.args = { - ...Searchable.args, - valueProp: 'iso', - options: [ - { iso: 'FR', label: 'France' }, { iso: 'ID', label: 'Indonésie' }, { iso: 'ES', label: 'Espagne' }], -} - -export const DisabledOption = Template.bind({}) as any -DisabledOption.args = { - ...Searchable.args, - options: [ - { value: 'FR', label: 'France' }, { value: 'ID', label: 'Indonésie', disabled: true }, { value: 'ES', label: 'Espagne' }], -} - -export const Tag = Template.bind({}) as any -Tag.args = { - ...ObjectOptions.args, - mode: 'tags', - modelValue: ['FR', 'ID'], - options: [ - { value: 'FR', label: 'France' }, { value: 'ID', label: 'Indonésie' }, { value: 'ES', label: 'Espagne' }], -} diff --git a/src/components/LcMultiselect/LcMultiselect.vue b/src/components/LcMultiselect/LcMultiselect.vue deleted file mode 100644 index 5b700e8..0000000 --- a/src/components/LcMultiselect/LcMultiselect.vue +++ /dev/null @@ -1,106 +0,0 @@ - - - - - - - diff --git a/src/components/LcMultiselect/index.ts b/src/components/LcMultiselect/index.ts deleted file mode 100644 index 0e20617..0000000 --- a/src/components/LcMultiselect/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './LcMultiselect.vue' diff --git a/src/components/LcPagination/Pagination.stories.ts b/src/components/LcPagination/Pagination.stories.ts index 303244f..96f2bf2 100644 --- a/src/components/LcPagination/Pagination.stories.ts +++ b/src/components/LcPagination/Pagination.stories.ts @@ -16,8 +16,11 @@ const Template = (args: any) => ({ setup() { return { args } }, + data() { + return { page: args.modelValue } + }, template: ` - + `, methods: { onUpdate: action('onUpdate'), @@ -27,9 +30,11 @@ const Template = (args: any) => ({ export const FirstCase = Template.bind({}) as any FirstCase.args = { nbPages: 3, + modelValue: 1, } export const SecondCase = Template.bind({}) as any SecondCase.args = { nbPages: 10, + modelValue: 5, } diff --git a/src/components/LcRadio/LcRadio.d.ts b/src/components/LcRadio/LcRadio.d.ts deleted file mode 100644 index dd6e676..0000000 --- a/src/components/LcRadio/LcRadio.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { DefineComponent } from 'vue' -const component: DefineComponent<{}, {}, any> -export default component diff --git a/src/components/LcRadio/LcRadio.stories.ts b/src/components/LcRadio/LcRadio.stories.ts deleted file mode 100644 index d8314dd..0000000 --- a/src/components/LcRadio/LcRadio.stories.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { action } from '@storybook/addon-actions' - -import LcRadio from './LcRadio.vue' - -export default { - title: 'Example/LcRadio', - component: LcRadio, -} - -const Template = (args: any) => ({ - components: { LcRadio }, - setup() { - return { args } - }, - template: '', - methods: { - onChange: action('onChange'), - }, -}) - -export const Base = Template.bind({}) as any -Base.args = { - label: 'Monsieur', - modelValue: '', - name: 'civility', - value: 'mr', - vertical: false, -} - -export const Disabled = Template.bind({}) as any -Disabled.args = { - ...Base.args, - disabled: true, -} diff --git a/src/components/LcRadio/LcRadio.vue b/src/components/LcRadio/LcRadio.vue deleted file mode 100644 index 564cdea..0000000 --- a/src/components/LcRadio/LcRadio.vue +++ /dev/null @@ -1,100 +0,0 @@ - - - - diff --git a/src/components/LcRadio/LcRadioGroup.stories.ts b/src/components/LcRadio/LcRadioGroup.stories.ts deleted file mode 100644 index 0f8b963..0000000 --- a/src/components/LcRadio/LcRadioGroup.stories.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { action } from '@storybook/addon-actions' - -import LcRadio from './LcRadio.vue' -import LcRadioGroup from './LcRadioGroup.vue' - -export default { - title: 'Example/LcRadioGroup', - component: LcRadioGroup, - subcomponents: { LcRadio }, -} - -const Template = (args: any) => ({ - components: { LcRadioGroup, LcRadio }, - setup() { - return { args } - }, - template: '', - methods: { - onChange: action('onChange'), - }, -}) - -export const Base = Template.bind({}) as any -Base.args = { - modelValue: '', - name: 'civility', - options: [ - { - label: 'Monsieur', - value: 'mr', - }, - { - label: 'Madame', - value: 'ms', - }, - { - label: 'Non binaire', - value: 'unknown', - }, - ], -} - -export const WithLabel = Template.bind({}) as any -WithLabel.args = { - ...Base.args, - label: 'Choisir votre civilité :', -} - -export const Vertical = Template.bind({}) as any -Vertical.args = { - ...Base.args, - vertical: true, -} - -export const VerticalWithLabel = Template.bind({}) as any -VerticalWithLabel.args = { - ...WithLabel.args, - vertical: true, -} - -export const Disabled = Template.bind({}) as any -Disabled.args = { - ...WithLabel.args, - options: [ - { - label: 'Monsieur', - value: 'mr', - disabled: true, - }, - { - label: 'Madame', - value: 'ms', - }, - { - label: 'Non binaire', - value: 'unknown', - }, - ], -} diff --git a/src/components/LcRadio/LcRadioGroup.vue b/src/components/LcRadio/LcRadioGroup.vue deleted file mode 100644 index ed2547d..0000000 --- a/src/components/LcRadio/LcRadioGroup.vue +++ /dev/null @@ -1,98 +0,0 @@ - - - - diff --git a/src/components/LcRadio/__tests__/LcRadio.spec.ts b/src/components/LcRadio/__tests__/LcRadio.spec.ts deleted file mode 100644 index 60a2217..0000000 --- a/src/components/LcRadio/__tests__/LcRadio.spec.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { mount } from '@vue/test-utils' -import { LcRadio } from '../index' - -let wrapper: any - -beforeEach(() => { - wrapper = mount(LcRadio, { - props: { - name: 'civility', - value: 'mr', - vertical: false, - }, - }) -}) - -afterEach(() => { - wrapper?.unmount() -}) - -describe('LcRadio', () => { - it('is a Vue instance', () => { - expect(wrapper.vm).toBeTruthy() - }) - - describe('Input behaviour', () => { - it('should emit the event', () => { - const radioButton = wrapper.find('.lc-radio') - radioButton.trigger('change') - - expect(wrapper.emitted()).toHaveProperty('update:modelValue') - }) - - it('should emit the right value', () => { - const radioButton = wrapper.find('.lc-radio') - radioButton.trigger('change') - - const changeEvent = wrapper.emitted('update:modelValue') - - expect(changeEvent[0]).toEqual(['mr']) - }) - - it('should disabled the radio button', async() => { - await wrapper.setProps({ disabled: true }) - const radioButton = wrapper.find('.lc-radio') - - expect(radioButton.attributes()).toHaveProperty('disabled') - }) - }) - - describe('Input style', () => { - it('should set style for vertical layout', async() => { - await wrapper.setProps({ vertical: true }) - const label = wrapper.find('.lc-radio-label') - - expect(label.classes()).toContain('lc-radio-label--vertical') - }) - }) -}) diff --git a/src/components/LcRadio/__tests__/LcRadioGroup.spec.ts b/src/components/LcRadio/__tests__/LcRadioGroup.spec.ts deleted file mode 100644 index 1fafd6a..0000000 --- a/src/components/LcRadio/__tests__/LcRadioGroup.spec.ts +++ /dev/null @@ -1,74 +0,0 @@ -import { mount } from '@vue/test-utils' -import { LcRadioGroup } from '../index' - -let wrapper: any - -beforeEach(() => { - wrapper = mount(LcRadioGroup, { - props: { - options: [ - { label: 'Monsieur', value: 'mr' }, - { label: 'Madame', value: 'ms' }, - { label: 'Non spécifié', value: 'unspecified' }, - ], - name: 'civility', - modelValue: '', - }, - }) -}) - -afterEach(() => { - wrapper?.unmount() -}) - -describe('LcRadioGroup', () => { - it('is a Vue instance', () => { - expect(wrapper.vm).toBeTruthy() - }) - - describe('Input behaviour', () => { - it('should render good number of radio-buttons', () => { - const radiosButtons = wrapper.findAll('[data-testid="lc-radio"]') - - expect(radiosButtons).toHaveLength(3) - }) - - it('should set good name attribute', () => { - const radiosButtons = wrapper.findAll('[data-testid="lc-radio"]') - - expect(radiosButtons[1].attributes('value')).toEqual('ms') - }) - - it('should emit the event', () => { - const radioButton = wrapper.find('[data-testid="lc-radio"]') - radioButton.trigger('change') - - expect(wrapper.emitted()).toHaveProperty('update:modelValue') - }) - - it('should emit the right value', () => { - const radioButton = wrapper.find('[data-testid="lc-radio"]') - radioButton.trigger('change') - - const changeEvent = wrapper.emitted('update:modelValue') - - expect(changeEvent[0]).toEqual(['mr']) - }) - }) - - describe('Input layout', () => { - it('it should render the right label', async() => { - await wrapper.setProps({ label: 'Your civility :' }) - - const label = wrapper.find('[data-testid="lc-radiogroup-label"]') - expect(label.text()).toEqual('Your civility :') - }) - - it('it should render vertical layout', async() => { - await wrapper.setProps({ vertical: true }) - - const wrapperBtn = wrapper.find('.lc-radiogroup-layout') - expect(wrapperBtn.classes()).toContain('lc-radiogroup-layout--vertical') - }) - }) -}) diff --git a/src/components/LcRadio/index.ts b/src/components/LcRadio/index.ts deleted file mode 100644 index 2a78255..0000000 --- a/src/components/LcRadio/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as LcRadio } from './LcRadio.vue' -export { default as LcRadioGroup } from './LcRadioGroup.vue' diff --git a/src/components/LcTextarea/LcTextarea.d.ts b/src/components/LcTextarea/LcTextarea.d.ts deleted file mode 100644 index dd6e676..0000000 --- a/src/components/LcTextarea/LcTextarea.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { DefineComponent } from 'vue' -const component: DefineComponent<{}, {}, any> -export default component diff --git a/src/components/LcTextarea/LcTextarea.stories.ts b/src/components/LcTextarea/LcTextarea.stories.ts deleted file mode 100644 index 1109e9a..0000000 --- a/src/components/LcTextarea/LcTextarea.stories.ts +++ /dev/null @@ -1,34 +0,0 @@ -import LcTextarea from './LcTextarea' - -export default { - title: 'Example/LcTextarea', - component: LcTextarea, -} - -const Template = (args: any) => ({ - components: { LcTextarea }, - setup() { - return { args } - }, - template: '', -}) - -export const Base = Template.bind({}) as any -Base.args = { - label: 'Votre demande :', - name: 'content', - modelValue: '', - inputWrapper: 'w-full', -} - -export const WithCustomRows = Template.bind({}) as any -WithCustomRows.args = { - ...Base.args, - rows: 10, -} - -export const WithPlaceholder = Template.bind({}) as any -WithPlaceholder.args = { - ...Base.args, - placeholder: 'Décrire votre demande ...', -} diff --git a/src/components/LcTextarea/LcTextarea.vue b/src/components/LcTextarea/LcTextarea.vue deleted file mode 100644 index 83c3b99..0000000 --- a/src/components/LcTextarea/LcTextarea.vue +++ /dev/null @@ -1,111 +0,0 @@ -