@cnamts/synapse 0.0.10-alpha → 0.0.12-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "0.0.10-alpha",
+  "version": "0.0.12-alpha",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",
@@ -10,7 +10,7 @@
   ],
   "main": "./dist/design-system-v3.umd.cjs",
   "module": "./dist/design-system-v3.js",
-  "types": "./dist/design-system-v3.d.ts",
+  "types": "./dist/src/main.d.ts",
   "exports": {
     ".": {
       "import": "./dist/design-system-v3.js",
@@ -24,9 +24,9 @@
     "build": "vue-tsc -p tsconfig.app.json && vite build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "lint": "eslint 'src/**/*.{ts,js,vue}'",
+    "lint": "eslint 'src/**/*.{ts,vue}'",
     "lint:style": "stylelint 'src/**/*.{css,scss,vue}'",
-    "lint:fix": "eslint 'src/**/*.{ts,js,vue}' --fix && stylelint 'src/**/*.{css,scss,vue}' --fix",
+    "lint:fix": "eslint 'src/**/*.{ts,vue}' --fix && stylelint 'src/**/*.{css,scss,vue}' --fix",
     "test:unit": "vitest run",
     "prepare": "husky",
     "generate:changelog": "auto-changelog -o CHANGELOG-TEMP.md -p --starting-date 2024-10-10"
@@ -48,19 +48,19 @@
     "@chromatic-com/storybook": "^3.2.2",
     "@jls-digital/storybook-addon-code": "^1.0.4",
     "@mdi/js": "^7.4.47",
-    "@storybook/addon-docs": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/addon-docs": "^8.5.6",
+    "@storybook/addon-essentials": "^8.5.6",
+    "@storybook/addon-interactions": "^8.5.6",
+    "@storybook/addon-links": "^8.5.6",
+    "@storybook/addon-onboarding": "^8.5.6",
     "@storybook/addon-queryparams": "^7.0.1",
-    "@storybook/addon-viewport": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/manager-api": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@storybook/theming": "^8.4.7",
-    "@storybook/vue3": "^8.4.7",
-    "@storybook/vue3-vite": "^8.4.7",
+    "@storybook/addon-viewport": "^8.5.6",
+    "@storybook/blocks": "^8.5.6",
+    "@storybook/manager-api": "^8.5.6",
+    "@storybook/test": "^8.5.6",
+    "@storybook/theming": "^8.5.6",
+    "@storybook/vue3": "^8.5.6",
+    "@storybook/vue3-vite": "^8.5.6",
     "@stylistic/eslint-plugin": "^2.9.0",
     "@stylistic/eslint-plugin-ts": "^2.9.0",
     "@stylistic/stylelint-config": "^2.0.0",
@@ -74,7 +74,7 @@
     "auto-changelog": "^2.4.0",
     "axios": "^1.7.7",
     "eslint": "^9.13.0",
-    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-storybook": "^0.11.3",
     "eslint-plugin-vue": "^9.30.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "happy-dom": "^15.7.4",
@@ -82,8 +82,8 @@
     "postcss-html": "^1.7.0",
     "postcss-scss": "^4.0.9",
     "resize-observer-polyfill": "^1.5.1",
-    "storybook": "^8.4.7",
-    "storybook-addon-vue-mdx": "^1.0.4",
+    "storybook": "^8.5.6",
+    "storybook-addon-vue-mdx": "^1.0.6",
     "stylelint": "^16.12.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-config-recommended-vue": "^1.5.0",
@@ -103,15 +103,17 @@
     "vuetify": "^3.6.13"
   },
   "dependencies": {
+    "@emotion/css": "^11.13.5",
     "@mdi/js": "^7.4.47",
     "deepmerge": "^4.3.1",
     "iso-639-1": "^3.1.3",
     "maska": "^3.0.3",
     "sass-embedded": "^1.83.0",
     "sass-loader": "^16.0.3",
-    "semantic-release": "^24.1.2"
+    "semantic-release": "^24.1.2",
+    "slugify": "^1.6.6"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/assets/_elevations.scss

@@ -0,0 +1,89 @@
+// Define theme elevation adjustments
+$elevation-cnam: 2px;
+$elevation-pa: 2px;
+
+// Modify elevations to include $elevation-cnam and $elevation-pa dynamically
+$cnam-elevation: (
+	0: none,
+	1: 0 1px calc(3px + #{$elevation-cnam}) rgb(0 0 0 / 12%),
+	2: 0 1px calc(5px + #{$elevation-cnam}) rgb(0 0 0 / 16%),
+	3: 0 1px calc(8px + #{$elevation-cnam}) rgb(0 0 0 / 24%),
+	4: 0 2px calc(4px + #{$elevation-cnam}) rgb(0 0 0 / 24%),
+	5: 0 2px calc(6px + #{$elevation-cnam}) rgb(0 0 0 / 28%),
+	6: 0 3px calc(6px + #{$elevation-cnam}) rgb(0 0 0 / 32%),
+	7: 0 3px calc(8px + #{$elevation-cnam}) rgb(0 0 0 / 36%),
+	8: 0 4px calc(8px + #{$elevation-cnam}) rgb(0 0 0 / 40%),
+	9: 0 4px calc(10px + #{$elevation-cnam}) rgb(0 0 0 / 44%),
+	10: 0 5px calc(10px + #{$elevation-cnam}) rgb(0 0 0 / 48%),
+	12: 0 6px calc(12px + #{$elevation-cnam}) rgb(0 0 0 / 52%),
+	14: 0 7px calc(14px + #{$elevation-cnam}) rgb(0 0 0 / 56%),
+	16: 0 8px calc(16px + #{$elevation-cnam}) rgb(0 0 0 / 60%),
+	18: 0 9px calc(18px + #{$elevation-cnam}) rgb(0 0 0 / 64%),
+	20: 0 10px calc(20px + #{$elevation-cnam}) rgb(0 0 0 / 68%),
+	24: 0 12px calc(24px + #{$elevation-cnam}) rgb(0 0 0 / 72%),
+	28: 0 14px calc(28px + #{$elevation-cnam}) rgb(0 0 0 / 76%),
+	32: 0 16px calc(32px + #{$elevation-cnam}) rgb(0 0 0 / 80%)
+);
+$pa-elevation: (
+	0: none,
+	1: 0 1px calc(3px + #{$elevation-pa}) rgb(0 0 0 / 10%),
+	2: 0 1px calc(5px + #{$elevation-pa}) rgb(0 0 0 / 14%),
+	3: 0 1px calc(8px + #{$elevation-pa}) rgb(0 0 0 / 20%),
+	4: 0 2px calc(4px + #{$elevation-pa}) rgb(0 0 0 / 20%),
+	5: 0 2px calc(6px + #{$elevation-pa}) rgb(0 0 0 / 24%),
+	6: 0 3px calc(6px + #{$elevation-pa}) rgb(0 0 0 / 28%),
+	7: 0 3px calc(8px + #{$elevation-pa}) rgb(0 0 0 / 32%),
+	8: 0 4px calc(8px + #{$elevation-pa}) rgb(0 0 0 / 36%),
+	9: 0 4px calc(10px + #{$elevation-pa}) rgb(0 0 0 / 40%),
+	10: 0 5px calc(10px + #{$elevation-pa}) rgb(0 0 0 / 44%),
+	12: 0 6px calc(12px + #{$elevation-pa}) rgb(0 0 0 / 48%),
+	14: 0 7px calc(14px + #{$elevation-pa}) rgb(0 0 0 / 52%),
+	16: 0 8px calc(16px + #{$elevation-pa}) rgb(0 0 0 / 56%),
+	18: 0 9px calc(18px + #{$elevation-pa}) rgb(0 0 0 / 60%),
+	20: 0 10px calc(20px + #{$elevation-pa}) rgb(0 0 0 / 64%),
+	24: 0 12px calc(24px + #{$elevation-pa}) rgb(0 0 0 / 68%),
+	28: 0 14px calc(28px + #{$elevation-pa}) rgb(0 0 0 / 72%),
+	32: 0 16px calc(32px + #{$elevation-pa}) rgb(0 0 0 / 76%)
+);
+
+// Define CSS variables globally
+:root {
+	--elevation-cnam: #{$elevation-cnam};
+	--elevation-pa: #{$elevation-pa};
+
+	@each $key, $value in $cnam-elevation {
+		--elevation-#{$key}: #{$value};
+	}
+}
+
+// Apply theme-based CNAM
+.theme-cnam {
+	@each $key, $value in $cnam-elevation {
+		--elevation-#{$key}: #{$value};
+	}
+}
+
+// Apply theme-based PA
+.theme-pa {
+	@each $key, $value in $pa-elevation {
+		--elevation-#{$key}: #{$value};
+	}
+}
+
+// Mixin to generate elevation classes dynamically
+@mixin generate-elevation-classes($prefix) {
+	@each $key, $value in $cnam-elevation {
+		.#{$prefix}-#{$key} {
+			box-shadow: var(--elevation-#{$key}) !important;
+		}
+	}
+}
+
+// Generate elevation classes
+@include generate-elevation-classes('elevation');
+
+// Ex of additional classes for specific shadow
+
+/* .v-btn {
+  box-shadow: var(--elevation-2) !important;
+} */

package/src/assets/_fonts.scss

@@ -0,0 +1,6 @@
+@use 'vuetify/settings' with (
+	$body-font-family: Arial
+);
+
+// Forward Vuetify settings
+@forward 'vuetify/settings';

package/src/assets/_radius.scss

@@ -0,0 +1,86 @@
+// Define theme radius separately
+$border-radius-cnam: 4px;
+$border-radius-pa: 4px;
+$cnam-radius: (
+	0: 0px,
+	'sm': calc($border-radius-cnam / 2),
+	'md': $border-radius-cnam,
+	'lg': calc($border-radius-cnam * 2),
+	'xl': calc($border-radius-cnam * 4),
+	'pill': 9999px,
+	'circle': 50%
+);
+$pa-radius: (
+	0: 0px,
+	'sm': calc($border-radius-pa / 2),
+	'md': $border-radius-pa,
+	'lg': calc($border-radius-pa * 2),
+	'xl': calc($border-radius-pa * 4),
+	'pill': 9999px,
+	'circle': 50%
+);
+
+// Define all possible radius keys to ensure consistent class generation
+$radius-keys: (0, 'sm', 'md', 'lg', 'xl', 'pill', 'circle');
+
+// ✅ Define CSS variables globally
+:root {
+	@each $key, $value in $cnam-radius {
+		--radius-#{$key}: #{$value};
+	}
+}
+
+// ✅ Apply theme-based cnam
+.theme-cnam {
+	@each $key, $value in $cnam-radius {
+		--radius-#{$key}: #{$value};
+	}
+}
+
+// ✅ Apply theme-based pa
+.theme-pa {
+	@each $key, $value in $pa-radius {
+		--radius-#{$key}: #{$value};
+	}
+}
+
+// ✅ Mixin to generate border-radius classes
+@mixin generate-radius-classes($prefix) {
+	@each $key in $radius-keys {
+		.#{$prefix}-#{$key} {
+			border-radius: var(--radius-#{$key}) !important;
+		}
+	}
+}
+
+// ✅ Generate radius classes once, using CSS variables
+@include generate-radius-classes('rounded');
+
+// Additional classes for specific radius
+.v-btn {
+	border-radius: var(--radius-md) !important;
+}
+
+.v-btn--rounded-md {
+	border-radius: var(--radius-md) !important;
+}
+
+.v-btn--rounded-sm {
+	border-radius: var(--radius-sm) !important;
+}
+
+.v-btn--rounded-lg {
+	border-radius: var(--radius-lg) !important;
+}
+
+.v-btn--rounded-xl {
+	border-radius: var(--radius-xl) !important;
+}
+
+.v-btn--rounded-pill {
+	border-radius: var(--radius-pill) !important;
+}
+
+.v-btn--rounded-circle {
+	border-radius: var(--radius-circle) !important;
+}

package/src/assets/_spacers.scss

@@ -0,0 +1,149 @@
+// Define base spacer values
+$base-spacer-cnam: 4px;
+$base-spacer-pa: 4px;
+
+// Define theme spacers using base values
+$cnam-spacers: (
+	0: 0px,
+	1: $base-spacer-cnam,
+	2: $base-spacer-cnam * 2,
+	3: $base-spacer-cnam * 3,
+	4: $base-spacer-cnam * 4,
+	5: $base-spacer-cnam * 5,
+	6: $base-spacer-cnam * 6,
+	7: $base-spacer-cnam * 7,
+	8: $base-spacer-cnam * 8,
+	9: $base-spacer-cnam * 9,
+	10: $base-spacer-cnam * 10,
+	11: $base-spacer-cnam * 11,
+	12: $base-spacer-cnam * 12,
+	13: $base-spacer-cnam * 13,
+	14: $base-spacer-cnam * 14,
+	15: $base-spacer-cnam * 15,
+	16: $base-spacer-cnam * 16,
+	17: $base-spacer-cnam * 17,
+	18: $base-spacer-cnam * 18,
+	19: $base-spacer-cnam * 19,
+	20: $base-spacer-cnam * 20,
+	24: $base-spacer-cnam * 24,
+	28: $base-spacer-cnam * 28,
+	32: $base-spacer-cnam * 32,
+	36: $base-spacer-cnam * 36,
+	40: $base-spacer-cnam * 40,
+	44: $base-spacer-cnam * 44,
+	48: $base-spacer-cnam * 48,
+	52: $base-spacer-cnam * 52,
+	56: $base-spacer-cnam * 56,
+	60: $base-spacer-cnam * 60,
+	64: $base-spacer-cnam * 64,
+);
+$pa-spacers: (
+	0: 0px,
+	1: $base-spacer-pa,
+	2: $base-spacer-pa * 2,
+	3: $base-spacer-pa * 3,
+	4: $base-spacer-pa * 4,
+	5: $base-spacer-pa * 5,
+	6: $base-spacer-pa * 6,
+	7: $base-spacer-pa * 7,
+	8: $base-spacer-pa * 8,
+	9: $base-spacer-pa * 9,
+	10: $base-spacer-pa * 10,
+	11: $base-spacer-pa * 11,
+	12: $base-spacer-pa * 12,
+	13: $base-spacer-pa * 13,
+	14: $base-spacer-pa * 14,
+	15: $base-spacer-pa * 15,
+	16: $base-spacer-pa * 16,
+	17: $base-spacer-pa * 17,
+	18: $base-spacer-pa * 18,
+	19: $base-spacer-pa * 19,
+	20: $base-spacer-pa * 20,
+	24: $base-spacer-pa * 24,
+	28: $base-spacer-pa * 28,
+	32: $base-spacer-pa * 32,
+	36: $base-spacer-pa * 36,
+	40: $base-spacer-pa * 40,
+	44: $base-spacer-pa * 44,
+	48: $base-spacer-pa * 48,
+	52: $base-spacer-pa * 52,
+	56: $base-spacer-pa * 56,
+	60: $base-spacer-pa * 60,
+	64: $base-spacer-pa * 64,
+);
+
+// Define CSS variables for spacers dynamically
+:root {
+	@each $key, $value in $cnam-spacers {
+		--spacing-#{$key}: #{$value};
+	}
+}
+
+// Apply theme-based spacing
+.theme-cnam {
+	@each $key, $value in $cnam-spacers {
+		--spacing-#{$key}: #{$value};
+	}
+}
+
+.theme-pa {
+	@each $key, $value in $pa-spacers {
+		--spacing-#{$key}: #{$value};
+	}
+}
+
+// Mixin to generate padding and margin classes
+@mixin generate-spacing-classes($property, $prefix) {
+	@for $i from 0 through 64 {
+		.#{$prefix}-#{$i} {
+			#{$property}: var(--spacing-#{$i}) !important;
+		}
+	}
+}
+
+// Apply spacing classes dynamically
+@include generate-spacing-classes(padding, pa);
+@include generate-spacing-classes(margin, ma);
+
+// Mixin for X (left & right) and Y (top & bottom) spacing
+@mixin generate-axis-spacing-classes($property, $prefix, $side1, $side2) {
+	@for $i from 0 through 64 {
+		.#{$prefix}-#{$i} {
+			#{$property}-#{$side1}: var(--spacing-#{$i}) !important;
+			#{$property}-#{$side2}: var(--spacing-#{$i}) !important;
+		}
+	}
+}
+
+// Generate px, py, mx, my spacing classes
+@include generate-axis-spacing-classes(padding, px, left, right);
+@include generate-axis-spacing-classes(padding, py, top, bottom);
+@include generate-axis-spacing-classes(margin, mx, left, right);
+@include generate-axis-spacing-classes(margin, my, top, bottom);
+
+// Mixin for individual side spacing classes
+@mixin generate-side-spacing-classes($property, $prefix, $side) {
+	@for $i from 0 through 64 {
+		.#{$prefix}-#{$i} {
+			#{$property}-#{$side}: var(--spacing-#{$i}) !important;
+		}
+	}
+}
+
+// Generate individual side padding classes
+@include generate-side-spacing-classes(padding, pt, top);
+@include generate-side-spacing-classes(padding, pr, right);
+@include generate-side-spacing-classes(padding, pb, bottom);
+@include generate-side-spacing-classes(padding, pl, left);
+
+// Generate individual side margin classes
+@include generate-side-spacing-classes(margin, mt, top);
+@include generate-side-spacing-classes(margin, mr, right);
+@include generate-side-spacing-classes(margin, mb, bottom);
+@include generate-side-spacing-classes(margin, ml, left);
+
+// Additional classes for specific spacing
+
+.v-btn {
+	padding: 0 var(--spacing-4) !important;
+}

package/src/assets/settings.scss

@@ -1,3 +1,18 @@
-@use 'vuetify/settings' with (
-	$body-font-family: Arial,
-);
+@use 'fonts';
+@use 'spacers';
+@use 'radius';
+
+.v-btn {
+	text-transform: inherit !important;
+	font-weight: 700 !important;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.v-btn.v-tab {
+	text-transform: uppercase !important;
+}
+
+.v-tooltip .v-overlay__content {
+	background-color: rgb(0 0 0 / 70%) !important;
+}

package/src/assets/tokens.scss

@@ -419,35 +419,38 @@ $spacing-horizontal-xx-large: 56px;
 $spacing-horizontal-xxx-large: 64px;
 $spacing-horizontal-huge: 80px;
 
-// Surcharger toutes les élévations pour utiliser uniquement l'élévation 02
-.elevation-1,
-.elevation-2,
-.elevation-3,
-.elevation-4,
-.elevation-5,
-.elevation-6,
-.elevation-7,
-.elevation-8,
-.elevation-9,
-.elevation-10,
-.elevation-11,
-.elevation-12,
-.elevation-13,
-.elevation-14,
-.elevation-15,
-.elevation-16,
-.elevation-17,
-.elevation-18,
-.elevation-19,
-.elevation-20,
-.elevation-21,
-.elevation-22,
-.elevation-23,
-.elevation-24 {
-	box-shadow:
-		0 3px 1px -2px rgb(0 0 0 / 20%),
-		0 2px 2px 0 rgb(0 0 0 / 14%),
-		0 1px 5px 0 rgb(0 0 0 / 12%) !important;
+.theme-cnam,
+.theme-pa {
+	// Surcharger toutes les élévations pour utiliser uniquement l'élévation 02
+	.elevation-1,
+	.elevation-2,
+	.elevation-3,
+	.elevation-4,
+	.elevation-5,
+	.elevation-6,
+	.elevation-7,
+	.elevation-8,
+	.elevation-9,
+	.elevation-10,
+	.elevation-11,
+	.elevation-12,
+	.elevation-13,
+	.elevation-14,
+	.elevation-15,
+	.elevation-16,
+	.elevation-17,
+	.elevation-18,
+	.elevation-19,
+	.elevation-20,
+	.elevation-21,
+	.elevation-22,
+	.elevation-23,
+	.elevation-24 {
+		box-shadow:
+			0 3px 1px -2px rgb(0 0 0 / 20%),
+			0 2px 2px 0 rgb(0 0 0 / 14%),
+			0 1px 5px 0 rgb(0 0 0 / 12%) !important;
+	}
 }
 
 // global.scss

package/src/components/Amelipro/types/languages.d.ts

@@ -0,0 +1,6 @@
+declare module 'languages' {
+	import type { Language } from './types.d.ts'
+
+	export function getLanguageInfo(langCode: string): Language
+	export function getAllLanguageCode(): string[]
+};

package/src/components/Amelipro/types/types.d.ts

@@ -0,0 +1,65 @@
+export interface Link {
+	id: number
+	url: string
+	name: string
+}
+
+export interface IndexedObject<T = string> {
+	[key: string]: T
+}
+
+export type Refs<T extends Record<string, unknown>> = Vue['$refs'] & T
+
+export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'smAndDown' | 'smAndUp' | 'mdAndDown' | 'mdAndUp' | 'lgAndDown' | 'lgAndUp' | 'xlAndDown'
+
+export interface IDataListItem {
+	id: number
+	[key: string]: string | number | undefined
+	accordionTitle?: string
+}
+
+export interface Theme {
+	primary: string
+	secondary: string
+	info: string
+	warning: string
+	error: string
+	success: string
+}
+
+export interface VuetifyTheme extends Theme {
+	[key: string]: string
+}
+
+export interface Color {
+	darken1?: string
+	darken2?: string
+	darken3?: string
+	darken4?: string
+	darken5?: string
+	darken6?: string
+	base: string
+	lighten1?: string
+	lighten2?: string
+	lighten3?: string
+	lighten4?: string
+	lighten5?: string
+	lighten6?: string
+}
+
+export interface Palette {
+	apBlue: Color
+	apGrey: Color
+	apWhite: Color
+	apBlack: Color
+	apYellow: Color
+	apGreen: Color
+	apRed: Color
+	apTurquoise: Color
+	apParme: Color
+	apPink: Color
+}
+
+export type Colors = Theme & Palette
+
+export type ValidateOn = 'lazy' | ('input' | 'blur' | 'submit') | 'input lazy' | 'blur lazy' | 'submit lazy' | 'lazy input' | 'lazy blur' | 'lazy submit' | undefined

package/src/components/BackBtn/Usages.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story} from "@storybook/blocks";
+import * as stories from "./Usages.stories.ts";
+
+<Meta of={stories} />
+
+# Usages
+
+<Story of={stories.UsagePage} />
+<br />

package/src/components/BackBtn/Usages.stories.ts

@@ -0,0 +1,37 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
+import Usages from '@/components/Usages/Usages.vue'
+
+export default {
+	title: 'Composants/Boutons/BackBtn/Usages',
+}
+const itemsToDo = [
+	'Positionner le bouton de manière visible et intuitive (souvent en haut à gauche).',
+]
+
+const itemsNotToDo = [
+	'Utiliser ce bouton sur les pages ne nécessitant peu ou pas de scroll.',
+]
+
+export const UsagePage: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+
+			setup() {
+				const icon = checkIcon
+
+				return { icon, linkICon, croixIcon, checkIcon, itemsNotToDo, itemsToDo }
+			},
+			template: `
+				 <Usages
+					:items1="itemsToDo"
+					:items2="itemsNotToDo"
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/BackToTopBtn/Usages.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story} from "@storybook/blocks";
+import * as stories from "./Usages.stories.ts";
+
+<Meta of={stories} />
+
+# Usages
+
+<Story of={stories.UsagePage} />
+<br />