@kenlo/sds-design-system 0.9.9

package/components/Input/input-masks.js

@@ -0,0 +1,218 @@
+/**
+ * Masks and validators for the Input.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Input/Input.tsx, where all of
+ * this lived inside the component file. It is separated here because it is pure, because
+ * it is the part where a mistake is invisible — a CPF check digit computed wrongly does
+ * not look wrong, it just quietly refuses a real customer — and because it can then be
+ * tested on its own, exhaustively.
+ *
+ * The check-digit algorithms for CPF and CNPJ are carried verbatim. The phone masks are
+ * not: KDLS wrote the same nine-branch pattern out nine times, and they are expressed as
+ * a table here. The test asserts the output for every digit length of every country, so
+ * the restructuring is proven rather than assumed.
+ */
+
+const digitsOf = (value) => String(value ?? '').replace(/\D/g, '');
+
+/**
+ * local@domain.ext — deliberately permissive; the server is what actually validates.
+ *
+ * Divergence from KDLS, which ends `\.[^\s@]+$` and so accepts `a@b.c`. There is no
+ * one-letter top-level domain, and the commonest way to produce one is a typo in the last
+ * character of a real address — exactly the mistake a field like this exists to catch.
+ * Two is the floor, and everything else stays as permissive as KDLS.
+ */
+export const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+
+export const isValidEmail = (value) => EMAIL_RE.test(String(value ?? '').trim());
+
+/**
+ * Applies a pattern to a run of digits. `#` takes the next digit; anything else is a
+ * literal, emitted only while digits remain, so a half-typed number never ends in a
+ * dangling bracket or dash.
+ *
+ * One rule beyond that, and it is the one that makes this match KDLS exactly: while
+ * everything typed still fits inside the FIRST group, the digits come back bare. Typing
+ * a Brazilian area code reads "1" then "11", not "(1" then "(11" — the brackets appear
+ * with the number they wrap. KDLS expressed this as a length branch per pattern; it is
+ * the same behaviour, stated once.
+ */
+export function applyPattern(raw, pattern) {
+  const digits = digitsOf(raw);
+  if (!digits) return '';
+
+  const firstGroup = /^#+/.exec(pattern.replace(/^[^#]*/, ''));
+  const firstGroupLength = firstGroup ? firstGroup[0].length : 0;
+  if (digits.length <= firstGroupLength) return digits;
+
+  let out = '';
+  let index = 0;
+  for (const char of pattern) {
+    if (index >= digits.length) break;
+    if (char === '#') {
+      out += digits[index];
+      index += 1;
+    } else {
+      out += char;
+    }
+  }
+  return out;
+}
+
+/**
+ * Phone patterns per country code. A country whose entry is a function picks its pattern
+ * by how many digits were typed — Brazil is the only one, where a landline is ten digits
+ * and a mobile eleven.
+ */
+export const PHONE_PATTERNS = {
+  '+55': (length) => (length > 10 ? '(##) #####-####' : '(##) ####-####'),
+  '+1': '(###) ###-####',
+  '+54': '(##) ####-####',
+  '+52': '(###) ###-####',
+  '+56': '# ####-####',
+  '+57': '(###) ###-####',
+  '+351': '### ### ###',
+  '+33': '# ## ## ## ##',
+  '+34': '### ### ###',
+};
+
+/** How many digits a complete number has, per country. */
+export const PHONE_DIGIT_COUNTS = {
+  '+55': [10, 11],
+  '+1': [10],
+  '+54': [10],
+  '+52': [10],
+  '+56': [9],
+  '+57': [10],
+  '+351': [9],
+  '+33': [9],
+  '+34': [9],
+};
+
+/** Mobile only. Brazil is the one country where this differs from the landline count. */
+export const CEL_DIGIT_COUNTS = { ...PHONE_DIGIT_COUNTS, '+55': [11] };
+
+export function applyPhoneMask(raw, ddi) {
+  const entry = PHONE_PATTERNS[ddi];
+  if (!entry) return digitsOf(raw);
+  const digits = digitsOf(raw);
+  const pattern = typeof entry === 'function' ? entry(digits.length) : entry;
+  const capacity = (pattern.match(/#/g) || []).length;
+  return applyPattern(digits.slice(0, capacity), pattern);
+}
+
+function isValidNumberFor(value, ddi, counts) {
+  const length = digitsOf(value).length;
+  if (ddi && counts[ddi]) return counts[ddi].includes(length);
+  // A country with no declared mask still has to look like a phone number.
+  return length >= 7;
+}
+
+/* Divergence from KDLS, in the line above: KDLS checks an exact digit count for +55 and
+   accepts "at least seven digits" for every other country. So a seven-digit number passed
+   as American, and the field that exists to catch a number typed short did not.
+
+   Here the exact count is used wherever the country declares one, which is nine of the
+   fifteen offered — the ones whose format the port could state with confidence. The other
+   six, and any DDI this table has never heard of, keep the loose rule. That is deliberate:
+   a wrong count refuses a number the reader is holding in their hand, which is worse than
+   a loose one letting a short number through to the server. */
+
+export const isValidPhone = (value, ddi) => isValidNumberFor(value, ddi, PHONE_DIGIT_COUNTS);
+export const isValidCelPhone = (value, ddi) => isValidNumberFor(value, ddi, CEL_DIGIT_COUNTS);
+
+export const DOCUMENT_TYPES = ['cep', 'cpf', 'cnpj', 'cpf-cnpj'];
+
+const DOCUMENT_PATTERNS = {
+  cep: '#####-###',
+  cpf: '###.###.###-##',
+  cnpj: '##.###.###/####-##',
+};
+
+export function applyDocumentMask(raw, type) {
+  // cpf-cnpj switches shape at the twelfth digit, which is where a CPF can no longer fit.
+  if (type === 'cpf-cnpj') {
+    return applyDocumentMask(raw, digitsOf(raw).length <= 11 ? 'cpf' : 'cnpj');
+  }
+
+  const pattern = DOCUMENT_PATTERNS[type];
+  if (!pattern) return digitsOf(raw);
+
+  const capacity = (pattern.match(/#/g) || []).length;
+  return applyPattern(digitsOf(raw).slice(0, capacity), pattern);
+}
+
+/**
+ * Is the mask full — never mind whether the number is real.
+ *
+ * The weaker of the two checks a document can get. A caller that turns validateDocument off
+ * keeps this one: the field still refuses half a CPF, it just stops arguing about whether
+ * the digits add up.
+ */
+export function isMaskComplete(value, type) {
+  if (type === 'cpf-cnpj') {
+    const count = digitsOf(value).length;
+    return count === 11 || count === 14;
+  }
+  const pattern = DOCUMENT_PATTERNS[type];
+  if (!pattern) return Boolean(digitsOf(value).length);
+  return digitsOf(value).length === (pattern.match(/#/g) || []).length;
+}
+
+export function isValidDate(value) {
+  const d = digitsOf(value);
+  if (d.length !== 8) return false;
+
+  const day = parseInt(d.slice(0, 2), 10);
+  const month = parseInt(d.slice(2, 4), 10);
+  const year = parseInt(d.slice(4, 8), 10);
+
+  if (month < 1 || month > 12) return false;
+  if (day < 1) return false;
+  if (year < 1000 || year > 9999) return false;
+
+  const isLeap = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+  const daysInMonth = [0, 31, isLeap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+  return day <= daysInMonth[month];
+}
+
+/**
+ * CPF check digits. Carried verbatim from KDLS.
+ * Eleven repeated digits pass the arithmetic and are rejected explicitly — 111.111.111-11
+ * is a valid-looking number that no person has.
+ */
+export function isValidCPF(value) {
+  const d = digitsOf(value);
+  if (d.length !== 11 || /^(\d)\1{10}$/.test(d)) return false;
+
+  const checkDigit = (length) => {
+    const sum = Array.from({ length }, (_, i) => Number(d[i]) * (length + 1 - i))
+      .reduce((a, b) => a + b, 0);
+    const remainder = 11 - (sum % 11);
+    return remainder >= 10 ? 0 : remainder;
+  };
+
+  return checkDigit(9) === Number(d[9]) && checkDigit(10) === Number(d[10]);
+}
+
+/** CNPJ check digits. Carried verbatim from KDLS, same repeated-digit rejection. */
+export function isValidCNPJ(value) {
+  const d = digitsOf(value);
+  if (d.length !== 14 || /^(\d)\1{13}$/.test(d)) return false;
+
+  const checkDigit = (weights) => {
+    const sum = weights.reduce((acc, weight, i) => acc + Number(d[i]) * weight, 0);
+    const remainder = sum % 11;
+    return remainder < 2 ? 0 : 11 - remainder;
+  };
+
+  return checkDigit([5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2]) === Number(d[12])
+    && checkDigit([6, 5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2]) === Number(d[13]);
+}
+
+export const isValidCpfOrCnpj = (value) => (
+  digitsOf(value).length <= 11 ? isValidCPF(value) : isValidCNPJ(value)
+);
+
+export { digitsOf };

package/components/Input/input-types.js

@@ -0,0 +1,194 @@
+/**
+ * The Input vocabulary, and the validation each type brings with it.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Input/Input.tsx.
+ * The masks and check digits live in ./input-masks.js.
+ */
+import {
+  applyDocumentMask, applyPhoneMask, isValidCPF, isValidCNPJ, isValidCpfOrCnpj, isValidDate, isValidPhone, isValidCelPhone, isValidEmail, isMaskComplete,
+} from './input-masks.js';
+
+export const INPUT_TYPES = [
+  'text', 'email', 'password', 'number', 'url', 'textbox',
+  'tel', 'tel-inter', 'cel', 'cep', 'cpf', 'cnpj', 'cpf-cnpj',
+];
+
+/**
+ * The phone with a country selector, as a TYPE rather than a flag on another type.
+ *
+ * Decided by Rafael. KDLS spells it `phoneInternational={true}` alongside `type="tel"`,
+ * which is a boolean that means nothing on eleven of the twelve types and has to be
+ * guarded against the other one. What it actually describes is a kind of field, and the
+ * prop that says which kind of field this is, is `type`.
+ *
+ * Its label stays "Telefone": the country selector is how the number is entered, not a
+ * different thing being asked for.
+ */
+export const PHONE_TYPES_INTERNATIONAL = ['tel-inter'];
+
+/* Divergence: no `date`, no `birthdate`, no `search`.
+
+   `search` goes for the same reason the dates do: sds-search-bar is the search field, it
+   looks the same on purpose, and it is where the search behaviour will live when it
+   arrives. A `type="search"` here would be a second answer to the same question, and the
+   one that stops being maintained.
+
+   KDLS gives the Input a dd/mm/yyyy mask and calls it a date field. SDS has a DatePicker,
+   which does the same job and more — it validates the calendar rather than the digits, it
+   knows about ranges and times, and it cannot be handed 31/02. Two ways to ask for a date
+   in one system means the answer depends on which one the writer happened to find.
+   Removed rather than deprecated: a mask that looks like a date field and is not one is
+   worse than no field at all. */
+
+export const INPUT_FEEDBACKS = ['none', 'success', 'alert', 'error'];
+export const INPUT_WIDTHS = ['hug', 'fill'];
+
+/**
+ * A type whose default label is untouched validates itself. KDLS tied this to the label
+ * on purpose: a field relabelled "Telefone do síndico" is still a phone, but one
+ * relabelled "Código interno" is not, and the component cannot tell which — so it only
+ * claims to know when the label is the one it shipped with.
+ *
+ * Every type is listed, including the four that validate nothing. Rafael, 2026-09-12:
+ * choosing a type should always propose the label that goes with it, and `number`, `url`
+ * and `textbox` were leaving whatever the last type had put there — pick CPF, then
+ * Número, and the field still said "CPF". Those four have no entry in VALIDATORS, so
+ * being here changes nothing about what is checked.
+ */
+export const TYPE_DEFAULT_LABELS = {
+  text: 'Nome',
+  email: 'E-mail',
+  number: 'Número',
+  url: 'Link',
+  textbox: 'Mensagem',
+  password: 'Senha',
+  tel: 'Telefone',
+  'tel-inter': 'Telefone',
+  cel: 'Celular',
+  cep: 'CEP',
+  cpf: 'CPF',
+  cnpj: 'CNPJ',
+  'cpf-cnpj': 'CPF ou CNPJ',
+};
+
+/** What a failing built-in validation says. */
+export const TYPE_MESSAGES = {
+  email: 'E-mail inválido',
+  tel: 'Telefone inválido',
+  'tel-inter': 'Telefone inválido',
+  cel: 'Celular inválido',
+  cep: 'CEP inválido',
+  cpf: 'CPF inválido',
+  cnpj: 'CNPJ inválido',
+  'cpf-cnpj': 'CPF ou CNPJ inválido',
+};
+
+const VALIDATORS = {
+  email: isValidEmail,
+  tel: (value, ddi) => isValidPhone(value, ddi),
+  'tel-inter': (value, ddi) => isValidPhone(value, ddi),
+  cel: (value, ddi) => isValidCelPhone(value, ddi),
+  cep: (value) => value.replace(/\D/g, '').length === 8,
+  cpf: isValidCPF,
+  cnpj: isValidCNPJ,
+  'cpf-cnpj': isValidCpfOrCnpj,
+};
+
+export const DOCUMENT_TYPES = ['cep', 'cpf', 'cnpj', 'cpf-cnpj'];
+export const PHONE_TYPES = ['tel', 'tel-inter', 'cel'];
+
+/** Does this type carry a country selector? Only the one that says so in its name. */
+export const isInternationalPhone = (type) => PHONE_TYPES_INTERNATIONAL.includes(type);
+
+export function assertInputType(type) {
+  if (!INPUT_TYPES.includes(type)) {
+    throw new Error(`Unknown input type: "${type}". Allowed: ${INPUT_TYPES.join(', ')}`);
+  }
+  return type;
+}
+
+export function assertFeedback(feedback) {
+  if (!INPUT_FEEDBACKS.includes(feedback)) {
+    throw new Error(`Unknown input feedback: "${feedback}". Allowed: ${INPUT_FEEDBACKS.join(', ')}`);
+  }
+  return feedback;
+}
+
+export function assertWidth(width) {
+  if (!INPUT_WIDTHS.includes(width)) {
+    throw new Error(`Unknown input width: "${width}". Allowed: ${INPUT_WIDTHS.join(', ')}`);
+  }
+  return width;
+}
+
+/** The value as the field shows it: masked for documents and phones, raw otherwise. */
+export function formatValue(value, type, ddi = '+55') {
+  if (DOCUMENT_TYPES.includes(type)) return applyDocumentMask(value, type);
+  if (PHONE_TYPES.includes(type)) return applyPhoneMask(value, ddi);
+  return value ?? '';
+}
+
+/**
+ * The on-screen keyboard a phone should offer.
+ *
+ * Neither system had this, and the gap only shows on a phone: a document renders as
+ * `type="text"` — it has to, the mask is ours — and a text field opens the letter
+ * keyboard. So a customer typing a CPF got QWERTY and had to find the number key, for a
+ * field that accepts nothing but digits.
+ *
+ * `numeric` rather than `decimal`: no separator is ever typed into these, the mask writes
+ * the dots itself. Everything else is left to the browser, which already picks the right
+ * keyboard from `email`, `tel`, `url` and `number`.
+ */
+export function inputModeFor(type) {
+  return DOCUMENT_TYPES.includes(type) ? 'numeric' : null;
+}
+
+/** The native input type to render. Documents are text — their mask is ours, not the browser's. */
+export function nativeTypeFor(type, showPassword = false) {
+  if (type === 'password') return showPassword ? 'text' : 'password';
+  if (DOCUMENT_TYPES.includes(type)) return 'text';
+  if (PHONE_TYPES.includes(type)) return 'tel';
+  if (type === 'textbox') return 'text';
+  return type;
+}
+
+/**
+ * Validates a value. Returns an error message, or null.
+ *
+ * Empty is never an error here — that is what `required` is for, and the browser already
+ * enforces it. Rules run before the built-in check, so a caller's own message wins.
+ */
+export const REQUIRED_MESSAGE = 'Campo obrigatório';
+
+export function validate(
+  value,
+  { type, label, rules = [], ddi, required = false, validateDocument = true } = {},
+) {
+  const text = String(value ?? '');
+
+  // An empty field is only a problem when something was required of it. KDLS leaves this to
+  // the browser, which sds-form turns off — its bubbles cannot be styled or themed and
+  // speak the browser's language rather than the product's. So the message is ours.
+  if (!text) return required ? REQUIRED_MESSAGE : null;
+
+  for (const rule of rules) {
+    if (!rule.valid(text)) return rule.message;
+  }
+
+  const defaultLabel = TYPE_DEFAULT_LABELS[type];
+  if (defaultLabel !== undefined && label !== defaultLabel) return null;
+
+  const validator = VALIDATORS[type];
+  if (!validator) return null;
+
+  // A document type can be checked two ways: that the mask is full, or that the number
+  // itself is arithmetically possible. KDLS lets a caller keep the first and drop the
+  // second — for a form that accepts a test CPF, or one whose numbers are validated
+  // somewhere else and should not be refused twice.
+  if (!validateDocument && DOCUMENT_TYPES.includes(type)) {
+    return isMaskComplete(value, type) ? null : (TYPE_MESSAGES[type] ?? null);
+  }
+
+  return validator(text, ddi) ? null : (TYPE_MESSAGES[type] ?? null);
+}