@cnamts/synapse 0.0.4-alpha → 0.0.5-alpha

package/src/components/Customs/SyTextField/SyTextField.mdx

@@ -0,0 +1,44 @@
+import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
+import * as SyTextFieldStories from "./SyTextField.stories";
+
+<Meta of={SyTextFieldStories} />
+
+# SyTextField
+
+Le composant `SyTextField` est utilisé pour proposer une alternative au `TextField` de Vuetify, conforme au style du Design System et qui respecte les règles d'accessibilité RGAA.
+
+<Canvas of={SyTextFieldStories.Default} />
+
+
+# API
+
+<Controls of={SyTextFieldStories.Default} />
+
+
+# Exemple d'utilisation
+
+<Source
+    dark code={`
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import SyTextField from '@cnamts/synapse'
+
+	const model = ref('')
+
+</script>
+
+<template>
+	<main class="ma-12">
+		Text saisie: {{ model }}
+		<div class="d-flex flex-wrap align-center">
+        <SyTextField
+				v-model="model"
+				label="Label"
+				color="primary"
+				is-clearable
+			/>
+		</div>
+	</main>
+</template>
+`}
+/>

package/src/components/Customs/{CustomTextField/CustomTextField.stories.ts → SyTextField/SyTextField.stories.ts}

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import CustomTextField from '@/components/Customs/CustomTextField/CustomTextField.vue'
+import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
 import { VIcon } from 'vuetify/components'
 import { ref } from 'vue'
 import { mdiAccountBox } from '@mdi/js'
 
 const meta = {
-	title: 'Composants/Formulaires/CustomTextField',
-	component: CustomTextField,
+	title: 'Composants/Formulaires/SyTextField',
+	component: SyTextField,
 	parameters: {
 		layout: 'fullscreen',
 		controls: { exclude: ['modelValue', 'appendInnerIconColor'] },
@@ -39,7 +39,7 @@ const meta = {
 			options: ['primary', 'secondary', 'success', 'error', 'warning'],
 		},
 	},
-} as Meta<typeof CustomTextField>
+} as Meta<typeof SyTextField>
 
 export default meta
 
@@ -51,7 +51,7 @@ export const Default: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomTextField v-model="value" />
+					<SyTextField v-model="value" />
 				</template>
 				`,
 			},
@@ -59,7 +59,7 @@ export const Default: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomTextField from '@cnamts/synapse'
+					import SyTextField from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -74,13 +74,13 @@ export const Default: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomTextField, VIcon },
+			components: { SyTextField, VIcon },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomTextField v-bind="args" />
+					<SyTextField v-bind="args" />
 				</div>
 			`,
 		}
@@ -94,7 +94,7 @@ export const SlotPrepend: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomTextField 
+					<SyTextField 
 						v-model="value" 
 						prepend-icon="info"
 					/>
@@ -105,7 +105,7 @@ export const SlotPrepend: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomTextField from '@cnamts/synapse'
+					import SyTextField from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -121,13 +121,13 @@ export const SlotPrepend: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomTextField, VIcon },
+			components: { SyTextField, VIcon },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomTextField
+					<SyTextField
 						v-bind="args"
 						:label="args.label"
 						:prepend-icon="args.prependIcon"
@@ -145,7 +145,7 @@ export const SlotAppend: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomTextField 
+					<SyTextField 
 						v-model="value" 
 						append-icon="success"
 					/>
@@ -156,7 +156,7 @@ export const SlotAppend: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomTextField from '@cnamts/synapse'
+					import SyTextField from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -172,13 +172,13 @@ export const SlotAppend: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomTextField, VIcon },
+			components: { SyTextField, VIcon },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomTextField
+					<SyTextField
 						v-bind="args"
 						:append-icon="args.appendIcon"
 					/>
@@ -195,7 +195,7 @@ export const SlotPrependInner: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomTextField 
+					<SyTextField 
 						v-model="value" 
 						prepend-inner-icon="info"
 					/>
@@ -206,7 +206,7 @@ export const SlotPrependInner: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomTextField from '@cnamts/synapse'
+					import SyTextField from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -222,13 +222,13 @@ export const SlotPrependInner: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomTextField, VIcon },
+			components: { SyTextField, VIcon },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomTextField
+					<SyTextField
 						v-bind="args"
 						:prepend-inner-icon="args.prependInnerIcon"
 					/>
@@ -245,7 +245,7 @@ export const SlotPrependInnerDivider: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomTextField 
+					<SyTextField 
 						v-model="value" 
 						prepend-inner-icon="info"
 						show-divider
@@ -257,7 +257,7 @@ export const SlotPrependInnerDivider: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomTextField from '@cnamts/synapse'
+					import SyTextField from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -273,13 +273,13 @@ export const SlotPrependInnerDivider: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomTextField, VIcon },
+			components: { SyTextField, VIcon },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomTextField
+					<SyTextField
 						v-bind="args"
 						:prepend-inner-icon="args.prependInnerIcon"
 						:show-divider="args.showDivider"
@@ -297,7 +297,7 @@ export const SlotAppendInner: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomTextField 
+					<SyTextField 
 						v-model="value" 
 						append-inner-icon="success"
 					/>
@@ -308,7 +308,7 @@ export const SlotAppendInner: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomTextField from '@cnamts/synapse'
+					import SyTextField from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -324,13 +324,13 @@ export const SlotAppendInner: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomTextField, VIcon },
+			components: { SyTextField, VIcon },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomTextField
+					<SyTextField
 						v-bind="args"
 						:append-inner-icon="args.appendInnerIcon"
 					/>
@@ -347,13 +347,13 @@ export const SlotCustomIcon: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomTextField  v-model="value">
+					<SyTextField v-model="value">
 						<template #append-inner>
 							<VIcon>
 								{{ iconName }}
 							</VIcon>
 						</template>
-					</CustomTextField>
+					</SyTextField>
 				</template>
 				`,
 			},
@@ -361,7 +361,7 @@ export const SlotCustomIcon: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomTextField from '@cnamts/synapse'
+					import SyTextField from '@cnamts/synapse'
 					import { mdiAccountBox } from '@mdi/js'
 					
 					const iconName = mdiAccountBox
@@ -379,7 +379,7 @@ export const SlotCustomIcon: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomTextField, VIcon },
+			components: { SyTextField, VIcon },
 			setup() {
 				const iconName = ref(mdiAccountBox)
 
@@ -387,7 +387,7 @@ export const SlotCustomIcon: Story = {
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomTextField
+					<SyTextField
 						v-bind="args"
 					>
 						<template #append-inner>
@@ -395,7 +395,7 @@ export const SlotCustomIcon: Story = {
 								{{ iconName }}
 							</VIcon>
 						</template>
-					</CustomTextField>
+					</SyTextField>
 				</div>
 			`,
 		}

package/src/components/Customs/{CustomTextField/tests/CustomTextField.spec.ts → SyTextField/tests/SyTextField.spec.ts}

@@ -1,12 +1,12 @@
 import { mount } from '@vue/test-utils'
-import CustomTextField from '../CustomTextField.vue'
+import SyTextField from '../SyTextField.vue'
 import { expect, describe, it } from 'vitest'
 import { VIcon } from 'vuetify/components'
 import { vuetify } from '@tests/unit/setup'
 
-describe('CustomTextField', () => {
+describe('SyTextField', () => {
 	const factory = (props = {}, slots = {}) => {
-		return mount(CustomTextField, {
+		return mount(SyTextField, {
 			props,
 			slots,
 			global: {

package/src/components/Customs/{CustomTextField/tests/__snapshots__/CustomTextField.spec.ts.snap → SyTextField/tests/__snapshots__/SyTextField.spec.ts.snap}

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`CustomTextField > matches snapshot 1`] = `
+exports[`SyTextField > matches snapshot 1`] = `
 "<div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field">
   <div class="v-input__prepend"><i class="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>
     <!---->
@@ -27,10 +27,8 @@ exports[`CustomTextField > matches snapshot 1`] = `
         <hr class="v-divider v-divider--vertical v-theme--light text-primary mt-4 pa-1" style="height: 25px; border-right-width: 2px; --v-border-opacity: 1;" aria-orientation="vertical" role="separator">
       </div>
       <div class="v-field__field" data-no-activator="">
-        <!----><label class="v-label v-field-label" for="input-0">
-          <!---->
-          <!---->
-        </label>
+        <!---->
+        <!---->
         <!----><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" class="v-field__input" value="">
         <!---->
       </div>

package/src/components/DialogBox/DialogBox.mdx

@@ -0,0 +1,14 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as DialogBoxStories from './DialogBox.stories';
+
+<Meta of={DialogBoxStories} />
+
+# DialogBox
+
+L’élément `DialogBox` est utilisé pour afficher une boîte de dialogue avec des bouttons d'action.
+
+<Canvas of={DialogBoxStories.Default}  />
+
+# API
+
+<Controls of={DialogBoxStories.Default} />