@taktikal/ui

What is this package for?

Sharing Taktikal's core UI components between projects.

Getting started

Please follow the instructions in @taktikal/branding's Getting Started section.

After the @taktikal/branding package has been configured, localization needs to be configured for this package.

Configuration

This package can be configured by calling configTaktikalUI with a valid options object.

There's only one config option currently, which is the i18nHook. It is currently only used to resolve the error messages for Textfield. An example configuration looks like so:

import { configTaktikalUI, TaktikalUII18nHook } from "@taktikal/ui";
import { useTranslation } from "react-i18next";

const useTaktikalUiI18n: TaktikalUII18nHook = () => {
  const { t } = useTranslation();
  return (key) => t(`default:taktikal_ui.${key}`) as string;
};

configTaktikalUI({
  i18nHook: useTaktikalUiI18n,
});

The Icelandic version of the default locale looks like so:

{
  "taktikal_ui": {
    "fieldRequired": "Þessi reitur er nauðsynlegur",
    "ssnRequired": "Vinsamlegast sláðu inn kennitölu",
    "ssnInvalid": "Kennitala verður að vera 10 tölustafir",
    "emailRequired": "Vinsamlegast sláðu inn netfangið þitt",
    "emailInvalid": "Þetta er ekki gilt netfang",
    "phoneRequired": "Vinsamlegast sláðu inn símanúmer",
    "phoneInvalid": "Símanúmer verður að vera 7 tölustafir",
    "companySsnInvalid": "Kennitala fyrirtækis verður að byrja á 32 eða hærra"
  },
  // ...
}

With @taktikal/ui configured we can get to using the package.

Usage

The package exports a variety of UI components that can be used in React projects. The full list of components looks like so:

• Block
• Button
• FadeSwap
• HorizontalList
• PhoneIndicator
• Textfield
• Select
• FieldLabel
• HighlightText

These components can be imported like so:

import { Textfield } from "@taktikal/ui";

See https://ui.taktikal.is for usage examples.