vue-lib-exo-corrected 1.0.0

package/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "vue-lib-exo-corrected",
+  "version": "1.0.0",
+  "type": "module",
+  "packageManager": "yarn@4.5.0",
+  "description": "A lightweight UI kit for Vue 3",
+  "license": "MIT",
+  "scripts": {
+    "build": "vite build && yarn postbuild",
+    "postbuild": "node postprocess-dts.cjs",
+    "dev": "vite --config playground/vite.config.ts",
+    "lint": "eslint . --ext .ts,.vue",
+    "prepare": "yarn build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "format": "prettier -c \"./src/**/*.{js,ts,tsx,scss,css,json,vue}\"",
+    "format:fix": "yarn format --write",
+    "updrade-version:beta": "npm version prerelease --preid=beta",
+    "publish-beta": "npm publish --tag beta --userconfig ~/.npmrc"
+  },
+  "files": [
+    "dist",
+    "src/styles/"
+  ],
+  "main": "./dist/vue-lib-exo-corrected.umd.cjs",
+  "module": "./dist/vue-lib-exo-corrected.js",
+  "style": "./dist/main.scss",
+  "exports": {
+    ".": {
+      "tnpes": "./dist/index.d.ts",
+      "import": "./dist/vue-lib-exo-corrected.js",
+      "require": "./dist/vue-lib-exo-corrected.umd.cjs"
+    },
+    "./styles/vue-lib-exo-corrected.scss": "./src/styles/vue-lib-exo-corrected.scss",
+    "./style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    }
+  },
+  "peerDependencies": {
+    "lodash-es": "^4.17.21",
+    "markdown-it": "^14.1.0",
+    "pinia": "^3.0.2",
+    "pinia-plugin-persistedstate": "^4.1.1",
+    "sass": "^1.80.4",
+    "uuid": "^9.0.0",
+    "vue": "^3.0.0",
+    "vue-i18n": "^9.14.2",
+    "vuedraggable": "^4.1.0",
+    "vuetify": "^3.7.3",
+    "zod": "^3.25.32"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.4",
+    "@storybook/addon-a11y": "^8.3.5",
+    "@storybook/addon-actions": "^8.3.5",
+    "@storybook/addon-docs": "^8.5.3",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-knobs": "^8.0.1",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-onboarding": "^8.3.5",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/blocks": "^8.5.3",
+    "@storybook/builder-vite": "^8.5.3",
+    "@storybook/test": "^8.5.3",
+    "@storybook/vue3": "^8.5.3",
+    "@storybook/vue3-vite": "^8.5.3",
+    "@types/lodash-es": "^4.17.12",
+    "@types/markdown-it": "^14.1.2",
+    "@typescript-eslint/eslint-plugin": "^8.33.1",
+    "@typescript-eslint/parser": "^8.33.1",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "@vue/eslint-config-typescript": "^14.5.0",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^8.52.0",
+    "eslint-plugin-storybook": "^0.11.2",
+    "eslint-plugin-vue": "^10.1.0",
+    "lodash-es": "^4.17.21",
+    "markdown-it": "^14.1.0",
+    "path": "^0.12.7",
+    "pinia": "^3.0.2",
+    "pinia-plugin-persistedstate": "^4.1.1",
+    "prettier": "^3.5.3",
+    "rollup": "^3.28.1",
+    "sass": "^1.80.4",
+    "storybook": "^8.5.3",
+    "typescript": "^5.0.2",
+    "uuid": "^9.0.0",
+    "vite": "^4.3.9",
+    "vite-plugin-dts": "^2.3.0",
+    "vue": "^3.5.13",
+    "vue-i18n": "^9.14.2",
+    "vue-tsc": "^1.4.2",
+    "vuedraggable": "^4.1.0",
+    "vuetify": "^3.7.3",
+    "zod": "^3.25.32"
+  },
+  "keywords": [
+    "vue",
+    "ui-kit",
+    "components",
+    "vue3",
+    "lidin"
+  ],
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

package/src/styles/_breakpoint.scss

@@ -0,0 +1,15 @@
+// width breakpoint
+$breakpoint-xs: 375px;
+$breakpoint-s: 700px;
+$breakpoint-m: 992px;
+$breakpoint-l: 1280px;
+$breakpoint-xl: 1440px;
+$breakpoint-xxl: 1680px;
+
+// height breakpoint
+$breakpoint-height-xs: 600px;
+$breakpoint-height-s: 700px;
+$breakpoint-height-m: 768px;
+$breakpoint-height-l: 900px;
+$breakpoint-height-xl: 1080px;
+$breakpoint-height-xxl: 1200px;

package/src/styles/_components.scss

@@ -0,0 +1,4 @@
+@mixin searchbar() {
+  border-radius: 50px;
+  background-color: var(--ion-color-light-shade);
+}

package/src/styles/_spacing.scss

@@ -0,0 +1,13 @@
+$spacing-4: 4px;
+$spacing-8: 8px;
+$spacing-12: 12px;
+$spacing-16: 16px;
+$spacing-24: 24px;
+$spacing-32: 32px;
+$spacing-36: 36px;
+$spacing-40: 40px;
+$spacing-48: 48px;
+$spacing-56: 56px;
+$spacing-64: 64px;
+$spacing-72: 72px;
+$spacing-80: 80px;

package/src/styles/_typography.scss

@@ -0,0 +1,186 @@
+@use "sass:math"; // Import the Sass math module
+@use "breakpoint" as breakpoint;
+
+$font-family-montserrat: montserrat, sans-serif;
+$font-family-roboto: roboto, sans-serif;
+
+$base-font-size: 16px;
+
+@mixin text($size) {
+  font-size: math.div($size, $base-font-size) * 1rem;
+}
+
+@mixin textFull($size, $weight: 400, $font: $font-family-roboto) {
+  @include text($size);
+  font-weight: $weight;
+  font-family: $font;
+}
+
+@mixin typo-heading-01 {
+  @include textFull(28px, 600, $font-family-montserrat);
+
+  @media (min-width: breakpoint.$breakpoint-m) {
+    @include text(44px);
+  }
+
+  @media (min-width: breakpoint.$breakpoint-l) {
+    @include text(60px);
+  }
+}
+
+@mixin typo-heading-02 {
+  @include textFull(24px, 600, $font-family-montserrat);
+
+  @media (min-width: breakpoint.$breakpoint-m) {
+    @include text(34px);
+  }
+
+  @media (min-width: breakpoint.$breakpoint-l) {
+    @include text(44px);
+  }
+}
+
+@mixin typo-heading-03 {
+  @include textFull(22px, 600, $font-family-montserrat);
+
+  @media (min-width: breakpoint.$breakpoint-m) {
+    @include text(28px);
+  }
+
+  @media (min-width: breakpoint.$breakpoint-l) {
+    @include text(34px);
+  }
+}
+
+@mixin typo-heading-04 {
+  @include textFull(20px, 600, $font-family-montserrat);
+
+  @media (min-width: breakpoint.$breakpoint-m) {
+    @include text(26px);
+  }
+
+  @media (min-width: breakpoint.$breakpoint-l) {
+    @include text(28px);
+  }
+}
+
+@mixin typo-heading-05 {
+  @include textFull(20px, 600, $font-family-montserrat);
+
+  @media (min-width: breakpoint.$breakpoint-m) {
+    @include text(22px);
+  }
+
+  @media (min-width: breakpoint.$breakpoint-l) {
+    @include text(24px);
+  }
+}
+
+@mixin typo-heading-06 {
+  @include textFull(18px, 400, $font-family-montserrat);
+
+  @media (min-width: breakpoint.$breakpoint-m) {
+    @include text(20px);
+  }
+
+  @media (min-width: breakpoint.$breakpoint-l) {
+    @include text(20px);
+  }
+}
+
+@mixin typo-heading-07 {
+  @include textFull(14px, 400, $font-family-montserrat);
+
+  @media (min-width: breakpoint.$breakpoint-m) {
+    @include text(16px);
+  }
+
+  @media (min-width: breakpoint.$breakpoint-l) {
+    @include text(18px);
+  }
+}
+
+@mixin typo-subtitle {
+  @include textFull($size: 18px, $line: 24px, $weight: 700);
+}
+
+@mixin typo-body-large {
+  @include textFull($size: 16px, $line: 20px);
+
+  @media (min-width: breakpoint.$breakpoint-m) {
+    @include text(17px, 22px);
+  }
+
+  @media (min-width: breakpoint.$breakpoint-l) {
+    @include text(18px, 24px);
+  }
+}
+
+@mixin typo-body {
+  @include textFull($size: 16px);
+
+  @media (min-width: breakpoint.$breakpoint-m) {
+    @include text(17px);
+  }
+
+  @media (min-width: breakpoint.$breakpoint-l) {
+    @include text(18px);
+  }
+}
+
+@mixin typo-body-small {
+  @include textFull($size: 15px);
+
+  @media (min-width: breakpoint.$breakpoint-m) {
+    @include text(16px);
+  }
+
+  @media (min-width: breakpoint.$breakpoint-l) {
+    @include text(17px);
+  }
+}
+
+@mixin typo-caption {
+  @include textFull($size: 16px);
+  color: #717171;
+
+  @media (min-width: breakpoint.$breakpoint-m) {
+    @include text(17px);
+  }
+
+  @media (min-width: breakpoint.$breakpoint-l) {
+    @include text(18px);
+  }
+}
+
+body {
+  h1 {
+    @include typo-heading-01;
+  }
+
+  h2 {
+    @include typo-heading-02;
+  }
+
+  h3 {
+    @include typo-heading-03;
+  }
+
+  h4 {
+    @include typo-heading-04;
+  }
+
+  h5 {
+    @include typo-heading-05;
+  }
+
+  h6 {
+    @include typo-heading-06;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 0;
+    @include typo-body;
+  }
+}

package/src/styles/app-kit/_markdown-text.scss

@@ -0,0 +1,44 @@
+$markdown-size: (
+  xsmall: 0.95rem,
+  small: 1.2rem,
+  medium: 1.6rem,
+  large: 1.9rem,
+);
+
+@mixin markdown-size($size) {
+  @each $name, $size in $markdown-size {
+    --text-size-#{$name}: #{$size};
+  }
+
+  /* Définit la taille du texte et des headers */
+  --text-size: var(--text-size-#{$size});
+  --header-size: calc(
+    var(--text-size) * 1.25
+  ); /* Les titres sont 25% plus grands */
+
+  /* Facteur de réduction (chaque niveau est 83% du précédent) */
+  --scale-factor: 0.83;
+
+  /* h1 prend la valeur de --header-size */
+  h1 {
+    font-size: var(--header-size);
+  }
+
+  /* Génération dynamique des tailles pour h2 à h6 */
+  @for $i from 2 through 6 {
+    h#{$i} {
+      font-size: calc(var(--header-size) * #{pow(0.83, $i - 1)});
+    }
+  }
+
+  /* Réduction de la taille du texte standard */
+  p,
+  li,
+  span,
+  a,
+  blockquote,
+  td,
+  th {
+    font-size: calc(var(--text-size) * 0.85);
+  }
+}

package/src/styles/app-kit/global-item-size.scss

@@ -0,0 +1,6 @@
+$item-height: (
+  small: 200px,
+  medium: 300px,
+  large: 400px,
+  xlarge: 500px,
+);

package/src/styles/override/typography-override.scss

@@ -0,0 +1,47 @@
+@use "../typography" as typo;
+
+body {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    font-weight: 800;
+  }
+
+  h6 {
+    font-weight: 600;
+  }
+}
+
+body {
+  h1 {
+    @include typo.typo-heading-03;
+  }
+
+  h2 {
+    @include typo.typo-heading-04;
+  }
+
+  h3 {
+    @include typo.typo-heading-05;
+  }
+
+  h4 {
+    @include typo.typo-heading-06;
+  }
+
+  h5 {
+    @include typo.typo-heading-07;
+  }
+
+  h6 {
+    @include typo.typo-heading-07;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 0;
+    @include typo.typo-body;
+  }
+}

package/src/styles/vue-lib-exo-corrected.scss

@@ -0,0 +1,9 @@
+// vue-lib-exo-corrected.scss
+@forward "vuetify" with (
+  $font-size-root: 18px
+);
+
+@forward "_typography";
+@forward "./override/typography-override.scss";
+@forward "_spacing.scss";
+@forward "_breakpoint.scss";