@natachah/vanilla-frontend 0.4.0 → 1.0.0

package/.gitlab-ci.yml

@@ -15,23 +15,19 @@ unit-test-job:
   stage: test
   rules: 
     - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
+    - if: $CI_COMMIT_BRANCH =~ /^hotfix\//
   script:
     - npm test
 
-pages:
+create-docs-job:
   stage: build
   script:
+    - npm run assets:build
+    - echo "The assets has been generated in docs/public/bundles"
     - npm run docs:build
-    - echo "Fichiers générés dans docs/dist :"
-    - ls -R docs/dist
-    - rm -rf public
-    - mkdir public
-    - cp -a docs/dist/* public/
-    - echo "Fichiers dans le répertoire public :"
-    - ls -R public
+    - echo "Vitepress doc has been generated !"
   artifacts:
     paths:
-      # The folder that contains the files to be exposed at the Page URL
       - public
   rules:
     - if: $CI_COMMIT_REF_NAME == "production"
@@ -41,13 +37,26 @@ publish-job:
   environment: production
   rules:
     - if: $CI_COMMIT_REF_NAME == "production"
+    - if: $CI_COMMIT_REF_NAME =~ /^support\//
   id_tokens:
     NPM_ID_TOKEN:
       aud: "npm:registry.npmjs.org"
     SIGSTORE_ID_TOKEN:
       aud: sigstore
   script:
-    - echo "Fichiers dans le répertoire public avant publication :"
-    - ls -R public
-    - npm pack
-    - npm publish --access public
+    - |
+      # 1. Lire la version réelle dans le package.json
+        PACKAGE_VERSION=$(node -p "require('./package.json').version")
+      
+      # 2. Déterminer le tag NPM
+      if [ "$CI_COMMIT_REF_NAME" == "production" ]; then
+        EXPORT_TAG="latest"
+      else
+        EXPORT_TAG="$PACKAGE_VERSION"
+      fi
+      
+      echo "Publication to NPMJS with the tag: $EXPORT_TAG"
+      
+      # 2. Publication
+      npm pack
+      npm publish --access public --tag $EXPORT_TAG

package/LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) 2024 Natacha Herth
+Copyright (c) 2026 Natacha Herth
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/docs/.vitepress/config.mts

@@ -0,0 +1,101 @@
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+    outDir: '../public',
+    title: "Vanilla Frontend",
+    description: "Documentation of my package",
+    themeConfig: {
+        // https://vitepress.dev/reference/default-theme-config
+        nav: [
+            { text: 'Home', link: '/' },
+        ],
+
+        sidebar: [
+            {
+                text: 'Prologue',
+                items: [
+                    { text: 'Release Notes', link: '/prologue/release' },
+                    { text: 'Upgrade guide', link: '/prologue/upgrade' },
+                    { text: 'Conventions', link: '/prologue/conventions' },
+                ]
+            },
+            {
+                text: 'Quick start',
+                items: [
+                    { text: 'Install', link: '/start/install' },
+                    { text: 'Customization', link: '/start/customization' },
+                    { text: 'SCSS mixin', link: '/start/mixin' },
+                ]
+            },
+            {
+                text: 'Base',
+                items: [
+                    { text: 'Reset', link: '/base/reset' },
+                    { text: 'Layout', link: '/base/layout' },
+                    { text: 'Typography', link: '/base/typography' },
+                    { text: 'Media', link: '/base/media' },
+                ]
+            },
+            {
+                text: 'Components',
+                items: [
+                    { text: 'Button', link: '/components/button' },
+                    { text: 'Dialog', link: '/components/dialog' },
+                    { text: 'Disclosure', link: '/components/disclosure' },
+                    { text: 'Form', link: '/components/form' },
+                    { text: 'Loading', link: '/components/loading' },
+                    { text: 'Popover', link: '/components/popover' },
+                    { text: 'Progress', link: '/components/progress' },
+                    { text: 'Table', link: '/components/table' },
+                ]
+            },
+
+            {
+                text: 'Class components',
+                items: [
+                    { text: 'Badge', link: '/classes/badge' },
+                    { text: 'Breadcrumb', link: '/classes/breadcrumb' },
+                    { text: 'Card', link: '/classes/card' },
+                    { text: 'Dropdown', link: '/classes/dropdown' },
+                    { text: 'Grid', link: '/classes/grid' },
+                    { text: 'List', link: '/classes/list' },
+                ]
+            },
+            {
+                text: 'Javascript',
+                items: [
+                    { text: 'Autofill', link: '/javascript/autofill' },
+                    { text: 'Check all', link: '/javascript/check' },
+                    { text: 'Comfort', link: '/javascript/comfort' },
+                    { text: 'Consent', link: '/javascript/consent' },
+                    { text: 'Cookie', link: '/javascript/cookie' },
+                    { text: 'Drawer', link: '/javascript/drawer' },
+                    { text: 'Form helper', link: '/javascript/form' },
+                    { text: 'Scroll', link: '/javascript/scroll' },
+                    { text: 'Slider', link: '/javascript/slider' },
+                    { text: 'Sortable', link: '/javascript/sortable' },
+                    { text: 'Tabpanel', link: '/javascript/tabpanel' },
+                    { text: 'Toggle', link: '/javascript/toggle' },
+                    { text: 'Trap', link: '/javascript/trap' },
+                    { text: 'Tree', link: '/javascript/tree' },
+                ]
+            },
+        ],
+
+        footer: {
+            message: 'Released under the MIT License.',
+            copyright: 'Copyright © 2024-present <a href="https://natachaherth.ch">Natacha Herth</a>'
+        },
+
+        socialLinks: [
+            {
+                icon: {
+                    svg: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gitlab" viewBox="0 0 16 16"><path d="m15.734 6.1-.022-.058L13.534.358a.57.57 0 0 0-.563-.356.6.6 0 0 0-.328.122.6.6 0 0 0-.193.294l-1.47 4.499H5.025l-1.47-4.5A.572.572 0 0 0 2.47.358L.289 6.04l-.022.057A4.044 4.044 0 0 0 1.61 10.77l.007.006.02.014 3.318 2.485 1.64 1.242 1 .755a.67.67 0 0 0 .814 0l1-.755 1.64-1.242 3.338-2.5.009-.007a4.05 4.05 0 0 0 1.34-4.668Z" /></svg>'
+                },
+                link: 'https://gitlab.com/packages4913705/vanilla-frontend',
+                ariaLabel: 'Gitlab'
+            }
+        ],
+    }
+})

package/docs/base/layout.md

@@ -0,0 +1,77 @@
+# Layout
+
+The framework uses a CSS grid to create the default page layout on the body. It features default CSS variables that you can customize, such as the maximum content width, which is set at **1280px**. Since it uses a grid, it includes gaps and columns.
+
+Also, the grid template as two content zone available as **full** and **content** that you can use as you wish.
+
+But as every website can be different, these value can be changed !
+
+```scss
+@use '@natachah/vanilla-frontend/scss/base/layout'
+```
+
+## Device Breakpoint Viewport
+
+| Device | Breakpoint | Columns | Max-width |
+| ------ | ---------- | ------- | -------- |
+| Mobile | < 720px | 1 | 100% |
+| Tablet | < 1024px | 6 | 100% |
+| Laptop | < 1440px | 12 | 1280px |
+| Desktop | > 1440px | 12 | 1280px |
+
+::: code-group
+
+```html
+<body data-preload>
+    <header></header>
+    <main></main>
+    <footer></footer>
+</body>
+```
+
+```scss
+@use '@natachah/vanilla-frontend/scss/base/layout';
+```
+
+```css [css properties]
+--layout-width
+--layout-gap-block
+--layout-gap-inline
+--layout-columns
+--subgrid-gap-block
+--subgrid-gap-inline
+```
+
+:::
+
+::: tip
+The `--subgrid-gap-*` are used for the direct child as `<header>`, `<main>` and `<footer>`. It set by default the gap block at **0** and take the layout inline gap.
+:::
+
+## Container
+
+The default layout include a `.container` and a `.container-full`.
+
+The classic container is centered into the page layout and the full container take the full length of the page.
+It's perfect if you need to set a background color to a section.
+
+```html
+<section class="container"></section>
+<section class="container-full"></section>
+```
+
+## Subgrid
+
+You can re-use the layout grid into a container with the class `.subgrid`. Then you can use the grid-column CSS property to manage the space.
+
+::: code-group
+
+```html
+<section class="container subgrid"></section>
+<section class="container-full subgrid"></section>
+```
+
+```css [css properties]
+--subgrid-gap-block
+--subgrid-gap-inline
+```

package/docs/base/media.md

@@ -0,0 +1,146 @@
+<script setup>
+import ComponentPreview from '../vuejs/ComponentPreview.vue'
+</script>
+
+# Media
+
+To implement clean images, videos and audio.
+
+```scss
+@use '@natachah/vanilla-frontend/scss/base/media'
+```
+
+## Image
+
+The image is using the native `<img>` tag with the attributes `srcset`, `alt` and `title`.
+
+<ComponentPreview>
+    <img src="https://picsum.photos/400/330" srcset="https://picsum.photos/800/660 2x" alt="A random image from lorem picsum" title="This is my picture">
+</ComponentPreview>
+
+::: code-group
+
+```html
+<img src="https://picsum.photos/400/330" srcset="https://picsum.photos/800/660 2x" alt="A random image from lorem picsum" title="This is my picture">
+```
+
+```css [css properties]
+--image-width
+--image-height
+--image-fit
+--image-position
+--image-ratio
+```
+
+:::
+
+### Picture
+
+For responsive and best practice, it's better to use the `<picture>` tag with inside the `<source>` and `<img>` tags.
+
+<ComponentPreview>
+<picture>
+    <source media="(max-width:576px)" srcset="https://picsum.photos/id/237/200, https://picsum.photos/id/237/400 2x">
+    <source media="(max-width:768px)" srcset="https://picsum.photos/id/237/400, https://picsum.photos/id/237/800 2x">
+    <source media="(max-width:992px)" srcset="https://picsum.photos/id/237/800, https://picsum.photos/id/237/1600 2x">
+    <img src="https://picsum.photos/id/237/200" srcset="https://https://picsum.photos/id/237/400 2x" alt="A random image from lorem picsum" title="This is my picture">
+</picture>
+</ComponentPreview>
+
+```html
+<picture>
+    <source media="(max-width:576px)" srcset="https://picsum.photos/id/237/200, https://picsum.photos/id/237/400 2x">
+    <source media="(max-width:768px)" srcset="https://picsum.photos/id/237/400, https://picsum.photos/id/237/800 2x">
+    <source media="(max-width:992px)" srcset="https://picsum.photos/id/237/800, https://picsum.photos/id/237/1600 2x">
+    <img src="https://picsum.photos/id/237/200" srcset="https://https://picsum.photos/id/237/400 2x" alt="A random image from lorem picsum" title="This is my picture">
+</picture>
+```
+
+### Figure
+
+You also can use `<figure>` and `<figcaption>` tags, to display an `<img>` with a nice caption.
+
+<ComponentPreview>
+    <figure>
+        <img src="https://picsum.photos/id/320/400/330" srcset="https://picsum.photos/id/320/800/660 2x" alt="My random image from lorem picsum">
+        <figcaption>My image from lorem picsum</figcaption>
+    </figure>
+</ComponentPreview>
+
+::: tip
+You can also combine `<figure>` with a `<picture>` tag.
+:::
+
+::: code-group
+
+```html
+<figure>
+    <img src="https://picsum.photos/id/320/400/330" srcset="https://picsum.photos/id/320/800/660 2x" alt="My random image from lorem picsum">
+    <figcaption>My image from lorem picsum</figcaption>
+</figure>
+```
+
+```css [css properties]
+--caption-color
+--caption-font-size
+--caption-margin-block
+--caption-margin-inline
+```
+
+:::
+
+## Video
+
+Use the default `<video>` and `<source>` tags.
+
+By default the video take 100% width and have a ratio of 16:9.
+
+<ComponentPreview>
+    <video width="320" height="240" controls>
+        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
+    </video>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<video width="320" height="240" controls>
+    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
+</video>
+```
+
+```css [css properties]
+--video-width
+--video-height
+--video-fit
+--video-position
+--video-ratio
+```
+
+:::
+
+## Audio
+
+Use the default `<audio>` and `<source>` tags.
+
+By default the audio take 100% width.
+
+<ComponentPreview>
+    <audio controls>
+        <source src="http://localhost:5173/public/audio.mp3" type="audio/mpeg">
+    </audio>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<audio controls>
+    <source src="http://localhost:5173/public/audio.mp3" type="audio/mpeg">
+</audio>
+```
+
+```css [css properties]
+--audio-width
+```
+
+:::

package/docs/base/reset.md

@@ -0,0 +1,33 @@
+# Reset
+
+The framework include a simple **reboot** to makes browsers render all elements more consistently and in line with modern standards.
+
+- Unset all default style *(except display)*
+- Change box-sizing to `border-box` on all element
+- Render media as block with a default 100% width
+- Change the `overflow-wrap` for text
+- Set default size and align for `<svg>`
+- Set `<table>` default width
+- Set default cursor for `draggable`
+- Set default cursor and animation for tree
+- Enable `scroll-behavior` if `prefers-reduced-motion` is not set
+- Set default `<body>` setting + `inert` mode for `<dialog>`
+- Set functionalities on `<body>` for `inert` and `data-preload` attributes
+
+To use it, import this file:
+
+```scss
+@use '@natachah/vanilla-frontend/scss/base/reset';
+```
+
+## Preload
+
+If you need to disabled the CSS animation on first load of the page add the data attribute `data-preload` on the `<body>`.
+
+And then add this script that will remove the attribute after a timeout:
+
+```js
+setTimeout(() => {
+    document.body.removeAttribute('data-preload')
+}, 10)
+```