@lab-anssi/ui-kit 0.0.1 → 0.0.2

package/README.md

@@ -1 +1,11 @@
-# UI Kit du Lab. ANSSI
+# UI Kit du Lab. ANSSI
+
+## Architecture de build
+Cette librairie a pour objectif de produire des composants Svelte et leurs équivalents [Webcomponent](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).
+
+L'architecture pour produire du Svelte utilise [SvelteKit](https://svelte.dev/docs/kit/packaging), configuré via le wizard `npx sv create`.
+C'est ce qui explique les nombreux fichiers de configuration Svelte (Prettier, Vitest, etc...) : Ils ont été rajoutés par le wizard.
+
+Pour rajouter le build des Webcomponents, on rajoute manuellement un fichier de configuration [`vite.webcomponents.config.ts`](./vite.webcomponents.config.ts). et des appels à la commande `vite -c vite.webcomponents.config.ts build` lors des étapes de build du package.
+
+Résultat : dans le repertoire `dist/` on retrouvera les composants Svelte et leurs équivalents Webcomponents. Tous le contenu de `dist/` est publié via `npm publish`.

package/dist/webcomponents/index.iife.js

@@ -0,0 +1 @@
+var WebComponents=function(m){"use strict";var jt=Object.defineProperty;var Nt=(m,$,v)=>$ in m?jt(m,$,{enumerable:!0,configurable:!0,writable:!0,value:v}):m[$]=v;var p=(m,$,v)=>Nt(m,typeof $!="symbol"?$+"":$,v);function $(){}function v(e){return e()}function W(){return Object.create(null)}function N(e){e.forEach(v)}function F(e){return typeof e=="function"}function ot(e,t){return e!=e?t==t:e!==t||e&&typeof e=="object"||typeof e=="function"}function rt(e){return Object.keys(e).length===0}function o(e,t){e.appendChild(t)}function lt(e,t,n){const s=at(e);if(!s.getElementById(t)){const c=f("style");c.id=t,c.textContent=n,ut(s,c)}}function at(e){if(!e)return document;const t=e.getRootNode?e.getRootNode():e.ownerDocument;return t&&t.host?t:e.ownerDocument}function ut(e,t){return o(e.head||e,t),t.sheet}function G(e,t,n){e.insertBefore(t,n||null)}function L(e){e.parentNode&&e.parentNode.removeChild(e)}function f(e){return document.createElement(e)}function M(e){return document.createTextNode(e)}function h(){return M(" ")}function a(e,t,n){n==null?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n)}function dt(e){return Array.from(e.childNodes)}function ft(e,t){t=""+t,e.data!==t&&(e.data=t)}function $t(e){const t={};return e.childNodes.forEach(n=>{t[n.slot||"default"]=!0}),t}let B;function A(e){B=e}const x=[],K=[];let y=[];const Q=[],ht=Promise.resolve();let R=!1;function pt(){R||(R=!0,ht.then(I))}function T(e){y.push(e)}const q=new Set;let w=0;function I(){if(w!==0)return;const e=B;do{try{for(;w<x.length;){const t=x[w];w++,A(t),_t(t.$$)}}catch(t){throw x.length=0,w=0,t}for(A(null),x.length=0,w=0;K.length;)K.pop()();for(let t=0;t<y.length;t+=1){const n=y[t];q.has(n)||(q.add(n),n())}y.length=0}while(x.length);for(;Q.length;)Q.pop()();R=!1,q.clear(),A(e)}function _t(e){if(e.fragment!==null){e.update(),N(e.before_update);const t=e.dirty;e.dirty=[-1],e.fragment&&e.fragment.p(e.ctx,t),e.after_update.forEach(T)}}function gt(e){const t=[],n=[];y.forEach(s=>e.indexOf(s)===-1?t.push(s):n.push(s)),n.forEach(s=>s()),y=t}const mt=new Set;function bt(e,t){e&&e.i&&(mt.delete(e),e.i(t))}function vt(e,t,n){const{fragment:s,after_update:c}=e.$$;s&&s.m(t,n),T(()=>{const i=e.$$.on_mount.map(v).filter(F);e.$$.on_destroy?e.$$.on_destroy.push(...i):N(i),e.$$.on_mount=[]}),c.forEach(T)}function xt(e,t){const n=e.$$;n.fragment!==null&&(gt(n.after_update),N(n.on_destroy),n.fragment&&n.fragment.d(t),n.on_destroy=n.fragment=null,n.ctx=[])}function yt(e,t){e.$$.dirty[0]===-1&&(x.push(e),pt(),e.$$.dirty.fill(0)),e.$$.dirty[t/31|0]|=1<<t%31}function wt(e,t,n,s,c,i,r=null,u=[-1]){const d=B;A(e);const l=e.$$={fragment:null,ctx:[],props:i,update:$,not_equal:c,bound:W(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(t.context||(d?d.$$.context:[])),callbacks:W(),dirty:u,skip_bound:!1,root:t.target||d.$$.root};r&&r(l.root);let g=!1;if(l.ctx=n?n(e,t.props||{},(_,k,...C)=>{const b=C.length?C[0]:k;return l.ctx&&c(l.ctx[_],l.ctx[_]=b)&&(!l.skip_bound&&l.bound[_]&&l.bound[_](b),g&&yt(e,_)),k}):[],l.update(),g=!0,N(l.before_update),l.fragment=s?s(l.ctx):!1,t.target){if(t.hydrate){const _=dt(t.target);l.fragment&&l.fragment.l(_),_.forEach(L)}else l.fragment&&l.fragment.c();t.intro&&bt(e.$$.fragment),vt(e,t.target,t.anchor),I()}A(d)}let X;typeof HTMLElement=="function"&&(X=class extends HTMLElement{constructor(t,n,s){super();p(this,"$$ctor");p(this,"$$s");p(this,"$$c");p(this,"$$cn",!1);p(this,"$$d",{});p(this,"$$r",!1);p(this,"$$p_d",{});p(this,"$$l",{});p(this,"$$l_u",new Map);this.$$ctor=t,this.$$s=n,s&&this.attachShadow({mode:"open"})}addEventListener(t,n,s){if(this.$$l[t]=this.$$l[t]||[],this.$$l[t].push(n),this.$$c){const c=this.$$c.$on(t,n);this.$$l_u.set(n,c)}super.addEventListener(t,n,s)}removeEventListener(t,n,s){if(super.removeEventListener(t,n,s),this.$$c){const c=this.$$l_u.get(n);c&&(c(),this.$$l_u.delete(n))}}async connectedCallback(){if(this.$$cn=!0,!this.$$c){let t=function(i){return()=>{let r;return{c:function(){r=f("slot"),i!=="default"&&a(r,"name",i)},m:function(l,g){G(l,r,g)},d:function(l){l&&L(r)}}}};if(await Promise.resolve(),!this.$$cn||this.$$c)return;const n={},s=$t(this);for(const i of this.$$s)i in s&&(n[i]=[t(i)]);for(const i of this.attributes){const r=this.$$g_p(i.name);r in this.$$d||(this.$$d[r]=S(r,i.value,this.$$p_d,"toProp"))}for(const i in this.$$p_d)!(i in this.$$d)&&this[i]!==void 0&&(this.$$d[i]=this[i],delete this[i]);this.$$c=new this.$$ctor({target:this.shadowRoot||this,props:{...this.$$d,$$slots:n,$$scope:{ctx:[]}}});const c=()=>{this.$$r=!0;for(const i in this.$$p_d)if(this.$$d[i]=this.$$c.$$.ctx[this.$$c.$$.props[i]],this.$$p_d[i].reflect){const r=S(i,this.$$d[i],this.$$p_d,"toAttribute");r==null?this.removeAttribute(this.$$p_d[i].attribute||i):this.setAttribute(this.$$p_d[i].attribute||i,r)}this.$$r=!1};this.$$c.$$.after_update.push(c),c();for(const i in this.$$l)for(const r of this.$$l[i]){const u=this.$$c.$on(i,r);this.$$l_u.set(r,u)}this.$$l={}}}attributeChangedCallback(t,n,s){var c;this.$$r||(t=this.$$g_p(t),this.$$d[t]=S(t,s,this.$$p_d,"toProp"),(c=this.$$c)==null||c.$set({[t]:this.$$d[t]}))}disconnectedCallback(){this.$$cn=!1,Promise.resolve().then(()=>{!this.$$cn&&this.$$c&&(this.$$c.$destroy(),this.$$c=void 0)})}$$g_p(t){return Object.keys(this.$$p_d).find(n=>this.$$p_d[n].attribute===t||!this.$$p_d[n].attribute&&n.toLowerCase()===t)||t}});function S(e,t,n,s){var i;const c=(i=n[e])==null?void 0:i.type;if(t=c==="Boolean"&&typeof t!="boolean"?t!=null:t,!s||!n[e])return t;if(s==="toAttribute")switch(c){case"Object":case"Array":return t==null?null:JSON.stringify(t);case"Boolean":return t?"":null;case"Number":return t??null;default:return t}else switch(c){case"Object":case"Array":return t&&JSON.parse(t);case"Boolean":return t;case"Number":return t!=null?+t:t;default:return t}}function kt(e,t,n,s,c,i){let r=class extends X{constructor(){super(e,n,c),this.$$p_d=t}static get observedAttributes(){return Object.keys(t).map(u=>(t[u].attribute||u).toLowerCase())}};return Object.keys(t).forEach(u=>{Object.defineProperty(r.prototype,u,{get(){return this.$$c&&u in this.$$c?this.$$c[u]:this.$$d[u]},set(d){var l;d=S(u,d,t),this.$$d[u]=d,(l=this.$$c)==null||l.$set({[u]:d})}})}),s.forEach(u=>{Object.defineProperty(r.prototype,u,{get(){var d;return(d=this.$$c)==null?void 0:d[u]}})}),e.element=r,r}class Et{constructor(){p(this,"$$");p(this,"$$set")}$destroy(){xt(this,1),this.$destroy=$}$on(t,n){if(!F(n))return $;const s=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return s.push(n),()=>{const c=s.indexOf(n);c!==-1&&s.splice(c,1)}}$set(t){this.$$set&&!rt(t)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const At="4";typeof window<"u"&&(window.__svelte||(window.__svelte={v:new Set})).v.add(At);function Ct(e){lt(e,"svelte-1hci5l5",'.conteneur-navigation-pied-de-page.svelte-1hci5l5.svelte-1hci5l5{font-family:"Marianne";list-style:none;display:flex;flex-direction:row;align-items:end;row-gap:16px;column-gap:8px;margin:0 16px;padding:16px 0;flex-wrap:wrap;border-top:1px solid #DDDDDD}@media(min-width: 932px){.conteneur-navigation-pied-de-page.svelte-1hci5l5.svelte-1hci5l5{margin:0 24px;column-gap:16px}}.conteneur-navigation-pied-de-page.svelte-1hci5l5 a.svelte-1hci5l5{color:#666666;text-decoration:none;font-size:12px;font-style:normal;font-weight:400;line-height:20px;white-space:nowrap}.conteneur-navigation-pied-de-page.svelte-1hci5l5 a.svelte-1hci5l5:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}.conteneur-navigation-pied-de-page.svelte-1hci5l5 a.svelte-1hci5l5:active{background:#ededed}.separateur.svelte-1hci5l5.svelte-1hci5l5{width:1px;height:16px;background:#dddddd}')}function Ot(e){let t,n,s,c,i,r,u,d,l,g,_,k,C,b,Z,H,tt,O,et,J,nt,P,it,V,st,E,ct,D=e[0]==="conforme"?"conforme":"non conforme",z;return{c(){t=f("div"),n=f("a"),n.textContent="À propos",s=h(),c=f("div"),i=h(),r=f("a"),r.textContent="Mentions légales",u=h(),d=f("div"),l=h(),g=f("a"),g.textContent="Politique de confidentialité",_=h(),k=f("div"),C=h(),b=f("a"),b.textContent="Conditions générales",Z=h(),H=f("div"),tt=h(),O=f("a"),O.textContent="Statistiques d’utilisation",et=h(),J=f("div"),nt=h(),P=f("a"),P.textContent="Sécurité",it=h(),V=f("div"),st=h(),E=f("a"),ct=M("Accessiblité: "),z=M(D),a(n,"href","/aPropos"),a(n,"class","svelte-1hci5l5"),a(c,"class","separateur svelte-1hci5l5"),a(r,"href","/mentionsLegales"),a(r,"class","svelte-1hci5l5"),a(d,"class","separateur svelte-1hci5l5"),a(g,"href","/confidentialite"),a(g,"class","svelte-1hci5l5"),a(k,"class","separateur svelte-1hci5l5"),a(b,"href","/cgu"),a(b,"class","svelte-1hci5l5"),a(H,"class","separateur svelte-1hci5l5"),a(O,"href","/statistiques"),a(O,"class","svelte-1hci5l5"),a(J,"class","separateur svelte-1hci5l5"),a(P,"href","/securite"),a(P,"class","svelte-1hci5l5"),a(V,"class","separateur svelte-1hci5l5"),a(E,"href","/accessibilite"),a(E,"class","svelte-1hci5l5"),a(t,"class","conteneur-navigation-pied-de-page svelte-1hci5l5")},m(j,U){G(j,t,U),o(t,n),o(t,s),o(t,c),o(t,i),o(t,r),o(t,u),o(t,d),o(t,l),o(t,g),o(t,_),o(t,k),o(t,C),o(t,b),o(t,Z),o(t,H),o(t,tt),o(t,O),o(t,et),o(t,J),o(t,nt),o(t,P),o(t,it),o(t,V),o(t,st),o(t,E),o(E,ct),o(E,z)},p(j,[U]){U&1&&D!==(D=j[0]==="conforme"?"conforme":"non conforme")&&ft(z,D)},i:$,o:$,d(j){j&&L(t)}}}function Pt(e,t,n){let{conformiteAccessibilite:s="conforme"}=t;return e.$$set=c=>{"conformiteAccessibilite"in c&&n(0,s=c.conformiteAccessibilite)},[s]}class Y extends Et{constructor(t){super(),wt(this,t,Pt,Ot,ot,{conformiteAccessibilite:0},Ct)}get conformiteAccessibilite(){return this.$$.ctx[0]}set conformiteAccessibilite(t){this.$$set({conformiteAccessibilite:t}),I()}}return customElements.define("lab-anssi-navigation-pied-de-page",kt(Y,{conformiteAccessibilite:{}},[],[],!0)),m.NavigationPiedDePage=Y,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"}),m}({});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lab-anssi/ui-kit",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/betagouv/lab-anssi-ui-kit.git"
@@ -12,19 +12,12 @@
 	"homepage": "https://github.com/betagouv/lab-anssi-ui-kit#readme",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build && npm run prepack && vite -c vite.webcomponents.config.ts build",
-		"preview": "vite preview",
+		"build": "vite build && npm run prepack",
+		"build:webcomponents": "vite -c vite.webcomponents.config.ts build",
 		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint .",
-		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run",
+		"prepack": "svelte-kit sync && svelte-package && npm run build:webcomponents && publint",
 		"story:dev": "histoire dev",
-		"story:build": "histoire build",
-		"story:preview": "histoire preview"
+		"story:build": "histoire build"
 	},
 	"files": [
 		"dist",