@autobusal/common 1.33.3 → 1.33.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.33.4
+
+### Added
+
+- **New `LocalizedFields` component** - a generic per-language field editor generalising SeoOverride (fixed to title/description) and Faqs/Translations (fixed to question/answer) into one taking an arbitrary field list. A section with just one translatable field (a category name, a menu label) no longer needs its own bespoke ~120-line copy of the same editor to support more than English+Albanian.
+
 ## 1.33.3
 
 ### Added

package/LocalizedFields/LocalizedFields.tsx

@@ -0,0 +1,103 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { useGetSettings } from '@autobusal/providers/services';
+import { Container, ContainerLocales, LocaleButton, Textarea } from './styles';
+
+export type LocalizedValue = Record<string, Record<string, string>>;
+
+export interface LocalizedFieldSpec {
+  name: string
+  label: string
+  type?: 'text' | 'textarea'
+  maxLength?: number
+  rows?: number
+}
+
+interface Props {
+  fields: LocalizedFieldSpec[]
+  /** Keyed by locale, then by field name - `{ en: { name: 'Foo' } }` */
+  value: LocalizedValue
+  t: TFunction<'normal'>
+  onChange: (next: LocalizedValue) => void
+}
+
+/**
+ * A generic per-language field editor.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-11
+ *
+ * The same shape as SeoOverride and Faqs/Translations - one language shown
+ * at a time, languages that already carry copy are marked, the parent owns
+ * the state and the submit. This is the generalised version of both:
+ * SeoOverride is fixed to title/description, Faqs/Translations to question/
+ * answer - this one takes an arbitrary field list, so a section with just
+ * ONE translatable field (a category name, a menu label) doesn't need its
+ * own bespoke copy of the same ~120 lines to get the same editor.
+ *
+ * English is the tab an empty editor starts on - it's the required floor
+ * every one of these fields falls back to publicly.
+ */
+const LocalizedFields = ({ fields, value, t, onChange }: Props): JSX.Element => {
+  const { data } = useGetSettings();
+
+  const available = data.preferences.languages.available;
+
+  const [ locale, setLocale ] = useState<string>(data.preferences.languages.default);
+
+  const current = value[locale] ?? {};
+
+  const update = (field: string, next: string): void => {
+    onChange({
+      ...value,
+      [locale]: { ...current, [field]: next }
+    });
+  };
+
+  const written = (language: string): boolean => {
+    const entry = value[language] ?? {};
+
+    return fields.some(field => entry[field.name]?.trim());
+  };
+
+  return (
+    <Container className="box">
+      <ContainerLocales>
+        { available.map(language => (
+          <LocaleButton
+            key={ language }
+            type="button"
+            $selected={ language === locale }
+            $written={ written(language) }
+            onClick={ () => setLocale(language) }
+          >
+            { t(`languages.${ language }`, { ns: 'common' }) }
+          </LocaleButton>
+        )) }
+      </ContainerLocales>
+
+      { fields.map((field, index) => (
+        <div key={ field.name } className={ index === fields.length - 1 ? 'row row-nomargin' : 'row' }>
+          { field.label }
+
+          { field.type === 'textarea' ? (
+            <Textarea
+              maxLength={ field.maxLength }
+              $rows={ field.rows }
+              value={ current[field.name] ?? '' }
+              onChange={ (event) => update(field.name, event.target.value) }
+            />
+          ) : (
+            <input
+              type="text"
+              maxLength={ field.maxLength }
+              value={ current[field.name] ?? '' }
+              onChange={ (event) => update(field.name, event.target.value) }
+            />
+          ) }
+        </div>
+      )) }
+    </Container>
+  );
+};
+
+export default LocalizedFields;

package/LocalizedFields/styles.ts

@@ -0,0 +1,52 @@
+import styled, { css } from 'styled-components';
+
+/**
+ * Same card treatment as SeoOverride's own Container - this editor sits
+ * directly above a Viewer form, so it needs to read as part of the form
+ * rather than loose furniture above it.
+ */
+export const Container = styled.div`
+  margin-bottom: 20px;
+`;
+
+export const ContainerLocales = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+`;
+
+/**
+ * One button per language, `$written` marking which ones actually have
+ * copy - the same treatment as SeoOverride/Faqs' Translations, so every
+ * per-language editor in the admin reads as the same control.
+ */
+export const LocaleButton = styled.button<{ $selected: boolean, $written: boolean }>`
+  padding: 4px 12px;
+  border: none;
+  border-radius: ${ props => props.theme.borderRadius };
+  background: ${ props => (props.$selected ? props.theme.background.neutral : 'transparent') };
+  color: ${ props => (props.$written ? props.theme.font.normal : props.theme.font.faded) };
+  font-size: ${ props => props.theme.size.s };
+  font-weight: ${ props => (props.$selected ? 700 : 400) };
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover {
+    background: ${ props => props.theme.background.neutral };
+  }
+
+  ${ props => props.$written && css`
+    &::after {
+      content: '•';
+      margin-left: 6px;
+      color: ${ props => props.theme.primary.normal };
+    }
+  ` }
+`;
+
+export const Textarea = styled.textarea<{ $rows?: number }>`
+  height: ${ props => (props.$rows ? props.$rows * 30 : 90) }px;
+  padding: 8px 10px;
+  resize: vertical;
+`;

package/index.ts

@@ -19,6 +19,7 @@ import Gender from './Gender';
 import { General, Inline, Box, BoxMiddle, GeneralFull } from './Loading/Loading';
 import IpLogs from './IpLogs/IpLogs';
 import JsonLd from './JsonLd';
+import LocalizedFields from './LocalizedFields/LocalizedFields';
 import Meta from './Meta';
 import Modal from './Modal/Modal';
 import NotificationIcon from './Notifications/Icon';
@@ -71,6 +72,7 @@ export {
   Inline,
   IpLogs,
   JsonLd,
+  LocalizedFields,
   Meta,
   Modal,
   NotificationIcon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.33.3",
+  "version": "1.33.4",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"