This commit is contained in:
12
.editorconfig
Normal file
12
.editorconfig
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
indent_size = 2
|
||||||
|
indent_style = space
|
||||||
|
end_of_line = lf
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
trim_trailing_whitespace = false
|
||||||
53
.gitea/workflows/release.yml
Normal file
53
.gitea/workflows/release.yml
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
name: Release
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- main
|
||||||
|
- master
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
release:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Checkout
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
with:
|
||||||
|
fetch-depth: 0
|
||||||
|
|
||||||
|
- name: Setup Node
|
||||||
|
uses: actions/setup-node@v4
|
||||||
|
with:
|
||||||
|
node-version: 20
|
||||||
|
|
||||||
|
- name: Configure Git Auth
|
||||||
|
env:
|
||||||
|
RELEASE_TOKEN: ${{ secrets.RELEASE_TOKEN }}
|
||||||
|
run: |
|
||||||
|
git config user.name "malio-ci"
|
||||||
|
git config user.email "ci@gitea.malio.fr"
|
||||||
|
git remote set-url origin "https://oauth2:${RELEASE_TOKEN}@gitea.malio.fr/MALIO-DEV/malio-layer-ui.git"
|
||||||
|
|
||||||
|
- name: Install Dependencies
|
||||||
|
run: npm ci
|
||||||
|
|
||||||
|
- name: Lint
|
||||||
|
run: |
|
||||||
|
npm run dev:prepare
|
||||||
|
npm run lint
|
||||||
|
|
||||||
|
- name: Release
|
||||||
|
env:
|
||||||
|
GIT_AUTHOR_NAME: malio-ci
|
||||||
|
GIT_AUTHOR_EMAIL: ci@gitea.malio.fr
|
||||||
|
GIT_COMMITTER_NAME: malio-ci
|
||||||
|
GIT_COMMITTER_EMAIL: ci@gitea.malio.fr
|
||||||
|
GIT_CREDENTIALS: ${{ secrets.RELEASE_TOKEN }}
|
||||||
|
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
|
||||||
|
run: |
|
||||||
|
npx --yes \
|
||||||
|
-p semantic-release@24 \
|
||||||
|
-p @semantic-release/commit-analyzer@13 \
|
||||||
|
-p @semantic-release/release-notes-generator@14 \
|
||||||
|
-p @semantic-release/npm@12 \
|
||||||
|
semantic-release
|
||||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
node_modules
|
||||||
|
*.log
|
||||||
|
.nuxt
|
||||||
|
nuxt.d.ts
|
||||||
|
.output
|
||||||
|
.data
|
||||||
|
.env
|
||||||
|
package-lock.json
|
||||||
|
framework
|
||||||
|
dist
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Yarn
|
||||||
|
.yarn/cache
|
||||||
|
.yarn/*state*
|
||||||
|
|
||||||
|
# Local History
|
||||||
|
.history
|
||||||
|
|
||||||
|
# VSCode
|
||||||
|
.vscode/
|
||||||
|
|
||||||
|
# JetBrains/WebStorm
|
||||||
|
.idea/
|
||||||
2
.npmrc
Normal file
2
.npmrc
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
@malio:registry=https://gitea.malio.fr/api/packages/MALIO-DEV/npm/
|
||||||
|
//gitea.malio.fr/api/packages/MALIO-DEV/npm/:_authToken=${NPM_TOKEN}
|
||||||
5
.playground/app.config.ts
Normal file
5
.playground/app.config.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
export default defineAppConfig({
|
||||||
|
myLayer: {
|
||||||
|
name: 'My amazing Nuxt layer (overwritten)'
|
||||||
|
}
|
||||||
|
})
|
||||||
12
.playground/nuxt.config.ts
Normal file
12
.playground/nuxt.config.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import { fileURLToPath } from 'node:url'
|
||||||
|
|
||||||
|
export default defineNuxtConfig({
|
||||||
|
extends: ['..'],
|
||||||
|
modules: ['@nuxt/eslint'],
|
||||||
|
eslint: {
|
||||||
|
config: {
|
||||||
|
// Use the generated ESLint config for lint root project as well
|
||||||
|
rootDir: fileURLToPath(new URL('..', import.meta.url))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
11
.playground/pages/index.vue
Normal file
11
.playground/pages/index.vue
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<template>
|
||||||
|
<div class="p-6 space-y-4">
|
||||||
|
<MalioInput v-model="v" label="Email" placeholder="you@example.com" />
|
||||||
|
<pre class="text-xs">{{ v }}</pre>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const v = ref('')
|
||||||
|
</script>
|
||||||
|
|
||||||
9
.releaserc.json
Normal file
9
.releaserc.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"branches": ["main", "master"],
|
||||||
|
"repositoryUrl": "https://gitea.malio.fr/MALIO-DEV/malio-layer-ui.git",
|
||||||
|
"plugins": [
|
||||||
|
"@semantic-release/commit-analyzer",
|
||||||
|
"@semantic-release/release-notes-generator",
|
||||||
|
"@semantic-release/npm"
|
||||||
|
]
|
||||||
|
}
|
||||||
132
README.md
Normal file
132
README.md
Normal file
@@ -0,0 +1,132 @@
|
|||||||
|
# Malio UI Layer (Nuxt)
|
||||||
|
|
||||||
|
Layer Nuxt partageable pour centraliser des composants UI et les réutiliser dans plusieurs projets.
|
||||||
|
|
||||||
|
Le layer est à la racine du repo.
|
||||||
|
Le dossier `.playground/` sert à tester localement les composants du layer.
|
||||||
|
|
||||||
|
## Commandes utiles
|
||||||
|
|
||||||
|
### Installation
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Développement local (playground)
|
||||||
|
|
||||||
|
Préparer les fichiers Nuxt générés du playground (utile pour TypeScript + ESLint) :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev:prepare
|
||||||
|
```
|
||||||
|
|
||||||
|
Lancer le playground :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Qualité
|
||||||
|
|
||||||
|
Lancer le linter :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build / preview
|
||||||
|
|
||||||
|
Build de production du playground :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Génération statique du playground :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run generate
|
||||||
|
```
|
||||||
|
|
||||||
|
Prévisualiser le build :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
### Livraison / publication du layer
|
||||||
|
|
||||||
|
Vérifier le contenu qui sera publié :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm pack --dry-run
|
||||||
|
```
|
||||||
|
|
||||||
|
Publier sur le registry NPM configuré :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm publish
|
||||||
|
```
|
||||||
|
|
||||||
|
Publier explicitement sur un registry Gitea :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm publish --registry https://<gitea-host>/api/packages/<owner>/npm/
|
||||||
|
```
|
||||||
|
|
||||||
|
## Tester un composant dans le playground
|
||||||
|
|
||||||
|
Le playground étend déjà le layer via `.playground/nuxt.config.ts`.
|
||||||
|
|
||||||
|
Exemple rapide :
|
||||||
|
|
||||||
|
1. Créer un composant dans le layer
|
||||||
|
Fichier `app/components/malio/Badge.vue`
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<span class="inline-flex rounded-full bg-gray-900 px-2 py-1 text-xs text-white">
|
||||||
|
{{ label }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
withDefaults(defineProps<{ label?: string }>(), {
|
||||||
|
label: 'Badge',
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
2. L’utiliser dans le playground
|
||||||
|
Fichier `.playground/pages/index.vue`
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div class="p-6 space-y-4">
|
||||||
|
<MalioBadge label="Nouveau composant" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Lancer le playground
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Utiliser ce layer dans un autre projet Nuxt
|
||||||
|
|
||||||
|
Installer le package :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install @malio/layer-ui
|
||||||
|
```
|
||||||
|
|
||||||
|
Étendre le layer dans `nuxt.config.ts` du projet consommateur :
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default defineNuxtConfig({
|
||||||
|
extends: ['@malio/layer-ui'],
|
||||||
|
})
|
||||||
|
```
|
||||||
14
app.config.ts
Normal file
14
app.config.ts
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
export default defineAppConfig({
|
||||||
|
myLayer: {
|
||||||
|
name: 'Hello from Nuxt layer'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
declare module '@nuxt/schema' {
|
||||||
|
interface AppConfigInput {
|
||||||
|
myLayer?: {
|
||||||
|
/** Project name */
|
||||||
|
name?: string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
5
app/app.vue
Normal file
5
app/app.vue
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<NuxtLayout>
|
||||||
|
<NuxtPage />
|
||||||
|
</NuxtLayout>
|
||||||
|
</template>
|
||||||
3
app/assets/css/tailwind.css
Normal file
3
app/assets/css/tailwind.css
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
38
app/components/malio/Input.vue
Normal file
38
app/components/malio/Input.vue
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label v-if="label" :for="id" class="text-sm font-medium text-gray-700">{{ label }}</label>
|
||||||
|
<input
|
||||||
|
:id="id"
|
||||||
|
:value="props.modelValue"
|
||||||
|
:type="props.type"
|
||||||
|
:placeholder="props.placeholder"
|
||||||
|
class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none transition focus:border-gray-500"
|
||||||
|
@input="onInput"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const props = withDefaults(defineProps<{
|
||||||
|
modelValue?: string
|
||||||
|
type?: string
|
||||||
|
label?: string
|
||||||
|
placeholder?: string
|
||||||
|
id?: string
|
||||||
|
}>(), {
|
||||||
|
modelValue: '',
|
||||||
|
type: 'text',
|
||||||
|
label: '',
|
||||||
|
placeholder: '',
|
||||||
|
id: undefined,
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:modelValue', value: string): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
function onInput(event: Event) {
|
||||||
|
const target = event.target as HTMLInputElement
|
||||||
|
emit('update:modelValue', target.value)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
3
eslint.config.js
Normal file
3
eslint.config.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import withNuxt from './.playground/.nuxt/eslint.config.mjs'
|
||||||
|
|
||||||
|
export default withNuxt()
|
||||||
9
nuxt.config.ts
Normal file
9
nuxt.config.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import { fileURLToPath } from 'node:url'
|
||||||
|
import { dirname, join } from 'node:path'
|
||||||
|
|
||||||
|
const currentDir = dirname(fileURLToPath(import.meta.url))
|
||||||
|
|
||||||
|
export default defineNuxtConfig({
|
||||||
|
modules: ['@nuxtjs/tailwindcss'],
|
||||||
|
css: [join(currentDir, './app/assets/css/tailwind.css')],
|
||||||
|
})
|
||||||
29
package.json
Normal file
29
package.json
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"name": "@malio/layer-ui",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"main": "./nuxt.config.ts",
|
||||||
|
"files": ["app/**", "nuxt.config.ts", "README.md"],
|
||||||
|
"scripts": {
|
||||||
|
"dev": "nuxi dev .playground",
|
||||||
|
"dev:prepare": "nuxt prepare .playground",
|
||||||
|
"build": "nuxt build .playground",
|
||||||
|
"generate": "nuxt generate .playground",
|
||||||
|
"preview": "nuxt preview .playground",
|
||||||
|
"lint": "eslint ."
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"nuxt": "^4.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@nuxt/eslint": "latest",
|
||||||
|
"@types/node": "^24.10.13",
|
||||||
|
"eslint": "^10.0.0",
|
||||||
|
"nuxt": "^4.3.1",
|
||||||
|
"typescript": "^5.9.3",
|
||||||
|
"vue": "latest"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@nuxtjs/tailwindcss": "^6.14.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
3
tsconfig.json
Normal file
3
tsconfig.json
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"extends": "./.playground/.nuxt/tsconfig.json"
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user