@jjlmoya/utils-civic 1.8.0 → 1.9.0

package/src/tool/access-to-information-request-builder/access-to-information-request-builder.css

@@ -0,0 +1,577 @@
+main {
+  min-width: 0;
+}
+
+.access-request-builder {
+  --n-paper: #fffdf7;
+  --n-ink: #17252a;
+  --n-muted: #5c6c70;
+  --n-line: #d8dfda;
+  --n-accent: #b64c35;
+  --n-accent-soft: #f5e4dc;
+  --n-teal: #1d6c6a;
+  --n-teal-soft: #dceeea;
+  --n-warning: #8c5a18;
+  --n-warning-soft: #f9eed5;
+  --n-on-accent: #fff;
+  --n-paper-tint: #fbf3eb;
+
+
+  display: grid;
+  gap: 1.25rem;
+  color: var(--n-ink);
+}
+
+.theme-dark .access-request-builder {
+  --n-paper: #1c2425;
+  --n-ink: #f4f0e6;
+  --n-muted: #b4c1bc;
+  --n-line: #40504e;
+  --n-accent: #f08262;
+  --n-accent-soft: #482c27;
+  --n-teal: #75d1c4;
+  --n-teal-soft: #203d3a;
+  --n-warning: #f2c56d;
+  --n-warning-soft: #46351d;
+  --n-on-accent: #17252a;
+  --n-paper-tint: #2b2825;
+}
+
+.request-workbench,
+.request-result,
+.request-guidance {
+  background: var(--n-paper);
+  border: 1px solid var(--n-line);
+  border-radius: 1.25rem;
+}
+
+.request-workbench {
+  overflow: visible;
+  box-shadow: 0 1rem 2rem rgba(23, 37, 42, 0.08);
+}
+
+.request-intro {
+  display: flex;
+  justify-content: space-between;
+  gap: 2rem;
+  padding: 2rem 2.25rem 1.5rem;
+  border-bottom: 1px solid var(--n-line);
+}
+
+.request-intro h2 {
+  max-width: 30rem;
+  margin: .35rem 0 0;
+  font-size: clamp(1.5rem, 3vw, 2.35rem);
+  line-height: 1.05;
+  letter-spacing: -.04em;
+}
+
+.request-intro p {
+  max-width: 20rem;
+  margin: 1.4rem 0 0;
+  color: var(--n-muted);
+  line-height: 1.55;
+}
+
+.eyebrow {
+  color: var(--n-accent);
+  font-size: .7rem;
+  font-weight: 800;
+  letter-spacing: .16em;
+  text-transform: uppercase;
+}
+
+.preset-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .55rem;
+  padding: .9rem 2.25rem;
+  background: var(--n-accent-soft);
+  color: var(--n-accent);
+  font-size: .82rem;
+  font-weight: 700;
+}
+
+.preset-row button,
+.text-action,
+.secondary-action,
+.output-actions button {
+  border: 1px solid var(--n-line);
+  border-radius: 999px;
+  padding: .55rem .8rem;
+  background: var(--n-paper);
+  color: var(--n-ink);
+  cursor: pointer;
+  font: inherit;
+}
+
+.preset-row button:hover,
+.text-action:hover,
+.secondary-action:hover,
+.output-actions button:hover {
+  border-color: var(--n-accent);
+  color: var(--n-accent);
+}
+
+.request-flow {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.flow-section {
+  min-width: 0;
+  padding: 1.5rem 1.5rem 1.75rem;
+  border-right: 1px solid var(--n-line);
+}
+
+.flow-section:last-child {
+  border-right: 0;
+}
+
+.section-marker {
+  color: var(--n-accent);
+  font-size: .75rem;
+  font-weight: 800;
+  letter-spacing: .1em;
+}
+
+.section-heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: .75rem;
+  margin: .45rem 0 1.2rem;
+}
+
+.section-heading h3 {
+  margin: 0;
+  font-size: 1.05rem;
+}
+
+.section-heading span {
+  color: var(--n-muted);
+  font-size: .72rem;
+}
+
+.section-content > label,
+.field-label,
+.period-fieldset legend,
+.request-notes > label {
+  display: block;
+  margin: .9rem 0 .35rem;
+  color: var(--n-muted);
+  font-size: .75rem;
+  font-weight: 750;
+}
+
+.access-request-builder input[type="text"],
+.access-request-builder input[type="date"],
+.access-request-builder textarea,
+.format-trigger {
+  width: 100%;
+  border: 1px solid var(--n-line);
+  border-radius: .55rem;
+  padding: .7rem .75rem;
+  background: transparent;
+  color: var(--n-ink);
+  font: inherit;
+  line-height: 1.35;
+}
+
+.access-request-builder textarea {
+  resize: vertical;
+}
+.access-request-builder input:focus,
+.access-request-builder textarea:focus,
+.format-trigger:focus {
+  outline: 2px solid var(--n-teal);
+  outline-offset: 2px;
+}
+
+.request-line + .request-line {
+  margin-top: 1rem;
+}
+
+.request-line label {
+  display: block;
+  margin-bottom: .35rem;
+  color: var(--n-muted);
+  font-size: .75rem;
+  font-weight: 750;
+}
+
+.request-line button {
+  margin-top: .35rem;
+  border: 0;
+  background: transparent;
+  color: var(--n-accent);
+  cursor: pointer;
+  font: inherit;
+  font-size: .75rem;
+}
+
+.text-action {
+  margin-top: 1rem;
+  border: 0;
+  padding-left: 0;
+  background: transparent;
+  color: var(--n-teal);
+  font-size: .82rem;
+  font-weight: 750;
+}
+
+.period-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.date-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: .6rem;
+}
+
+.date-grid label {
+  color: var(--n-muted);
+  font-size: .72rem;
+}
+
+.date-grid input {
+  margin-top: .35rem;
+}
+
+.format-picker {
+  position: relative;
+}
+
+.format-trigger {
+  display: flex;
+  justify-content: space-between;
+  text-align: left;
+  cursor: pointer;
+}
+
+.format-trigger::after {
+  content: '⌄';
+  color: var(--n-accent);
+}
+
+.format-menu {
+  position: absolute;
+  z-index: 3;
+  top: 100%;
+  right: 0;
+  left: 0;
+  display: grid;
+  margin-top: .3rem;
+  border: 1px solid var(--n-line);
+  border-radius: .55rem;
+  background: var(--n-paper);
+  box-shadow: 0 .8rem 1.5rem rgba(23, 37, 42, 0.15);
+}
+
+.format-menu[hidden] {
+  display: none;
+}
+
+.format-menu button {
+  border: 0;
+  border-bottom: 1px solid var(--n-line);
+  padding: .65rem .75rem;
+  background: transparent;
+  color: var(--n-ink);
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  font-size: .82rem;
+}
+
+.format-menu button:last-child {
+  border-bottom: 0;
+}
+.format-menu button:hover,
+.format-menu button[aria-selected="true"] {
+  background: var(--n-teal-soft);
+  color: var(--n-teal);
+}
+
+.request-notes {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  padding: 1.25rem 2.25rem;
+  border-top: 1px solid var(--n-line);
+}
+
+.request-notes > label {
+  margin: 0;
+}
+
+.request-notes .check-row {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  color: var(--n-ink);
+  font-size: .78rem;
+  font-weight: 500;
+}
+
+.check-row input {
+  accent-color: var(--n-teal);
+}
+
+.request-actions {
+  display: flex;
+  gap: .7rem;
+  padding: 0 2.25rem 1.75rem;
+}
+
+.primary-action {
+  border: 0;
+  border-radius: .55rem;
+  padding: .8rem 1rem;
+  background: var(--n-teal);
+  color: var(--n-on-accent);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 800;
+}
+
+.secondary-action {
+  border-radius: .55rem;
+}
+
+.request-result {
+  overflow: hidden;
+}
+
+.request-output {
+  padding: 1.5rem 2rem;
+}
+
+.output-heading {
+  display: flex;
+  justify-content: space-between;
+  gap: 1.5rem;
+  align-items: start;
+}
+
+.output-heading p {
+  max-width: 38rem;
+  margin: .4rem 0 0;
+  color: var(--n-muted);
+  font-size: .86rem;
+  line-height: 1.45;
+}
+
+.output-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5rem;
+  justify-content: end;
+}
+
+.output-actions button {
+  border-radius: .45rem;
+  font-size: .78rem;
+}
+
+.output-actions button:disabled {
+  cursor: not-allowed;
+  opacity: .45;
+}
+
+.request-markdown {
+  display: block;
+  margin: 1.25rem 0 0;
+  padding: 1.25rem;
+  overflow-x: auto;
+  min-height: 22rem;
+  border-left: 3px solid var(--n-accent);
+  background: var(--n-paper-tint);
+  color: var(--n-ink);
+  font: .86rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
+  white-space: pre-wrap;
+  resize: vertical;
+}
+
+.request-empty {
+  margin: 1.25rem 0 0;
+  padding: 1.25rem;
+  border: 1px dashed var(--n-line);
+  color: var(--n-muted);
+}
+
+.copy-confirmation {
+  margin: .7rem 0 0;
+  color: var(--n-teal);
+  font-size: .8rem;
+  font-weight: 700;
+}
+
+.trace-strip {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 1.5rem;
+  padding: 1.35rem 2rem;
+  border-top: 1px solid var(--n-line);
+  background: var(--n-teal-soft);
+}
+
+.trace-heading {
+  display: grid;
+  align-content: start;
+  gap: .45rem;
+}
+
+.trace-heading strong {
+  font-size: .88rem;
+  line-height: 1.35;
+}
+
+.trail-checklist {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: .55rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.trail-check {
+  display: grid;
+  grid-template-columns: 1.2rem 1fr;
+  align-items: center;
+  gap: .35rem;
+  color: var(--n-ink);
+  font-size: .76rem;
+}
+
+.trail-check > span:first-child {
+  display: grid;
+  place-items: center;
+  width: 1.1rem;
+  height: 1.1rem;
+  border-radius: 50%;
+  background: var(--n-paper);
+  color: var(--n-muted);
+  font-weight: 800;
+}
+
+.trail-check-complete > span:first-child,
+.trail-check-caution > span:first-child {
+  color: var(--n-on-accent);
+}
+
+.trail-check-complete > span:first-child {
+  background: var(--n-teal);
+}
+
+.trail-check-caution > span:first-child {
+  background: var(--n-warning);
+}
+
+.trail-check strong {
+  grid-column: 2;
+  color: var(--n-muted);
+  font-size: .65rem;
+  text-transform: uppercase;
+}
+
+.trail-warnings {
+  grid-column: 1 / -1;
+  border-top: 1px solid var(--n-line);
+  padding-top: .8rem;
+}
+
+.trail-warnings-title {
+  margin: 0 0 .35rem;
+  color: var(--n-warning);
+  font-size: .75rem;
+  font-weight: 800;
+}
+
+.trail-warnings ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .45rem 1.2rem;
+  margin: 0;
+  padding-left: 1rem;
+  color: var(--n-ink);
+  font-size: .75rem;
+}
+
+.request-guidance {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.request-guidance section {
+  padding: 1.25rem 1.5rem;
+  border-right: 1px solid var(--n-line);
+}
+
+.request-guidance section:last-child {
+  border-right: 0;
+}
+
+.request-guidance h2 {
+  margin: 0 0 .55rem;
+  font-size: 1rem;
+}
+
+.request-guidance p {
+  margin: 0;
+  color: var(--n-muted);
+  font-size: .82rem;
+  line-height: 1.55;
+}
+
+@media (max-width: 850px) {
+  .request-flow,
+  .request-guidance { grid-template-columns: 1fr; }
+  .flow-section,
+  .request-guidance section {
+    border-right: 0;
+    border-bottom: 1px solid var(--n-line);
+  }
+  .flow-section:last-child,
+  .request-guidance section:last-child { border-bottom: 0; }
+  .request-intro,
+  .output-heading { display: grid; }
+  .output-actions { justify-content: start; }
+  .trace-strip { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 560px) {
+  .request-intro,
+  .preset-row,
+  .request-notes,
+  .request-actions,
+  .request-output,
+  .trace-strip {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+  .request-notes { grid-template-columns: 1fr; }
+  .trail-checklist { grid-template-columns: 1fr; }
+}
+
+@media print {
+  .request-workbench,
+  .request-guidance,
+  .trace-strip,
+  .output-actions,
+  .copy-confirmation { display: none; }
+  .request-result {
+    border: 0;
+    box-shadow: none;
+  }
+
+  .request-markdown {
+    border: 0;
+    background: transparent;
+  }
+}

package/src/tool/access-to-information-request-builder/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography } from '@jjlmoya/utils-shared';
+import { bibliography } from './bibliography';
+---
+
+<Bibliography links={bibliography} />

package/src/tool/access-to-information-request-builder/bibliography.ts

@@ -0,0 +1,6 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  { name: 'Information Commissioner\'s Office, How to write an effective request for information', url: 'https://ico.org.uk/for-the-public/official-information/preparing-and-submitting-your-information-request/' },
+  { name: 'CNIL, Droit d\'accès aux documents administratifs', url: 'https://www.cnil.fr/fr/definition/droit-dacces-aux-documents-administratifs' },
+];

package/src/tool/access-to-information-request-builder/component.astro

@@ -0,0 +1,106 @@
+---
+import type { AccessRequestUI } from './ui';
+
+interface Props {
+  ui: AccessRequestUI;
+}
+
+const { ui } = Astro.props as Props;
+---
+
+<div class="access-request-builder" data-access-request-builder>
+  <div class="request-workbench">
+    <div class="request-intro">
+      <div>
+        <span class="eyebrow">{ui.eyebrow}</span>
+        <h2>{ui.introHeading}</h2>
+      </div>
+      <p>{ui.introText}</p>
+    </div>
+
+    <div class="preset-row" aria-label={ui.presetLabel}>
+      <span>{ui.presetLabel}</span>
+      <button type="button" data-preset="records">{ui.presetRecords}</button>
+      <button type="button" data-preset="spending">{ui.presetSpending}</button>
+      <button type="button" data-preset="meetings">{ui.presetMeetings}</button>
+    </div>
+
+    <div class="request-flow">
+      <section class="flow-section flow-target">
+        <div class="section-marker">01</div>
+        <div class="section-content">
+          <div class="section-heading"><h3>{ui.targetHeading}</h3><span>{ui.targetPrompt}</span></div>
+          <label for="request-recipient">{ui.recipientLabel}</label>
+          <input id="request-recipient" data-field="recipient" type="text" placeholder={ui.recipientPlaceholder} />
+          <label for="request-subject">{ui.subjectLabel}</label>
+          <input id="request-subject" data-field="subject" type="text" placeholder={ui.subjectPlaceholder} />
+        </div>
+      </section>
+
+      <section class="flow-section flow-question">
+        <div class="section-marker">02</div>
+        <div class="section-content">
+          <div class="section-heading"><h3>{ui.itemsLabel}</h3><span>{ui.questionPrompt}</span></div>
+          <div data-request-lines class="request-lines">
+            <div class="request-line">
+              <label for="request-item-0">{ui.itemNumber} 1</label>
+              <textarea id="request-item-0" data-item-index="0" rows="3" placeholder={ui.itemPlaceholder}></textarea>
+            </div>
+          </div>
+          <button class="text-action" type="button" data-add-item>+ {ui.addItem}</button>
+        </div>
+      </section>
+
+      <section class="flow-section flow-boundary">
+        <div class="section-marker">03</div>
+        <div class="section-content">
+          <div class="section-heading"><h3>{ui.boundaryHeading}</h3><span>{ui.boundaryPrompt}</span></div>
+          <fieldset class="period-fieldset">
+            <legend>{ui.periodLabel}</legend>
+            <div class="date-grid"><label for="request-period-from">{ui.periodFrom}<input id="request-period-from" data-field="periodFrom" type="date" /></label><label for="request-period-to">{ui.periodTo}<input id="request-period-to" data-field="periodTo" type="date" /></label></div>
+          </fieldset>
+          <label for="request-geography">{ui.geographyLabel}</label>
+          <input id="request-geography" data-field="geography" type="text" placeholder={ui.geographyPlaceholder} />
+          <div class="format-picker" data-format-picker>
+            <span class="field-label">{ui.formatLabel}</span>
+            <button type="button" class="format-trigger" data-format-trigger aria-expanded="false">{ui.formatPlaceholder}</button>
+            <div class="format-menu" data-format-menu hidden role="listbox">
+              <button type="button" data-format-option={ui.formatEmail} aria-selected="false" role="option">{ui.formatEmail}</button>
+              <button type="button" data-format-option={ui.formatCsv} aria-selected="false" role="option">{ui.formatCsv}</button>
+              <button type="button" data-format-option={ui.formatPdf} aria-selected="false" role="option">{ui.formatPdf}</button>
+              <button type="button" data-format-option={ui.formatOriginal} aria-selected="false" role="option">{ui.formatOriginal}</button>
+            </div>
+          </div>
+          <label for="request-delivery">{ui.deliveryLabel}</label>
+          <input id="request-delivery" data-field="delivery" type="text" placeholder={ui.deliveryPlaceholder} />
+        </div>
+      </section>
+    </div>
+
+    <div class="request-notes">
+      <label for="request-attachments">{ui.attachmentsLabel}<textarea id="request-attachments" data-field="attachments" rows="2" placeholder={ui.attachmentsPlaceholder}></textarea></label>
+      <label for="request-contact">{ui.contactLabel}<textarea id="request-contact" data-field="contact" rows="2" placeholder={ui.contactPlaceholder}></textarea></label>
+      <label class="check-row"><input type="checkbox" data-field="noAttachments" /> <span>{ui.noAttachments}</span></label>
+      <label class="check-row"><input type="checkbox" data-field="savedCopy" /> <span>{ui.savedCopy}</span></label>
+    </div>
+
+    <div class="request-actions"><button class="primary-action" type="button" data-generate>{ui.generateAction}</button><button class="secondary-action" type="button" data-reset>{ui.resetAction}</button></div>
+  </div>
+
+  <div class="request-result" data-request-result aria-live="polite"></div>
+
+  <div class="request-guidance">
+    <section><h2>{ui.methodHeading}</h2><p>{ui.methodText}</p></section>
+    <section><h2>{ui.limitsHeading}</h2><p>{ui.limitsText}</p></section>
+    <section><h2>{ui.edgeCasesHeading}</h2><p>{ui.edgeCasesText}</p></section>
+  </div>
+</div>
+
+<script is:inline type="application/json" data-access-request-ui set:html={JSON.stringify(ui)}></script>
+
+<script>
+  import { mountAccessRequestBuilder } from './controller';
+  const root = document.querySelector<HTMLElement>('[data-access-request-builder]');
+  const data = document.querySelector<HTMLScriptElement>('[data-access-request-ui]');
+  if (root && data) mountAccessRequestBuilder(root, JSON.parse(data.textContent || '{}'));
+</script>

package/src/tool/access-to-information-request-builder/contract.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+import { accessToInformationRequestBuilder } from './entry';
+import { ACCESS_TO_INFORMATION_REQUEST_BUILDER_TOOL } from './index';
+
+describe('access to information request builder runtime contract', () => {
+  it('exposes all locale loaders and page component loaders', async () => {
+    const locales = ['de', 'en', 'es', 'fr', 'id', 'it', 'ja', 'ko', 'nl', 'pl', 'pt', 'ru', 'sv', 'tr', 'zh'] as const;
+    for (const locale of locales) {
+      const content = await accessToInformationRequestBuilder.i18n[locale]?.();
+      expect(content?.ui).toBeDefined();
+      expect(content?.schemas?.length).toBe(3);
+    }
+    expect(typeof ACCESS_TO_INFORMATION_REQUEST_BUILDER_TOOL.Component).toBe('function');
+    expect(typeof ACCESS_TO_INFORMATION_REQUEST_BUILDER_TOOL.SEOComponent).toBe('function');
+    expect(typeof ACCESS_TO_INFORMATION_REQUEST_BUILDER_TOOL.BibliographyComponent).toBe('function');
+  });
+});