@shoptet/ui

Reusable UI Library

This repository contains a collection of reusable React components that are purely visual. These components are designed to be used across multiple projects and should not handle data fetching, routing, or translations.

Caution: This is an early-stage development version of the Shoptet UI kit package

Please be aware that this version may contain bugs, incomplete features, or undergo significant changes before reaching a stable release. Use it at your own risk and for testing and development purposes only. Your feedback and contributions are appreciated to help improve the stability and functionality of the package. Refer to the documentation and release notes for more information on the current state of development. Thank you for your understanding.

Storybook

We have written a Storybook for the components to demonstrate how to use them.

The internal public version is currently available here: https://react.shoptet.cz/

Localization

The components come with a built-in localization in 8 languages: cs-CZ, de-DE, en-US, hu-HU, pl-PL, ro-RO, sk-SK, and vi-VN. It is necessary to wrap your application with the LocalizationProvider component from the library and provide the locale prop with one of the supported locales.

Bundling

This library is build on top of @react-aria which includes localized messages for various languages. In order to avoid bundling all the languages some of which you might not need, you can define your own build plugin to strip away the translations. Here is an example of such a vite plugin:

export const uiTranslations = ({ locales }: Options): Plugin => {
  const intlLocales = locales.map(l => new Intl.Locale(l));

  return {
    name: 'vite-plugin-ui-translations',
    transform(_, id) {
      if (!id || !/[/\\](@react-stately|@react-aria|@react-spectrum|react-aria-components)[/\\]/.test(id)) {
        return;
      }

      const match = id.match(/[a-z]{2}-[A-Z]{2}/);

      if (match) {
        const locale = new Intl.Locale(match[0]);
        if (!intlLocales.some(l => localeMatches(locale, l))) {
          return {
            code: `export default {};`,
            map: null,
          };
        }
      }

      return;
    },
  };
};

function localeMatches(localeToMatch: Intl.Locale, includedLocale: Intl.Locale) {
  return (
    localeToMatch.language === includedLocale.language &&
    (!includedLocale.region || localeToMatch.region === includedLocale.region)
  );
}

And then you can use it in your vite.config.ts like this:

import { defineConfig } from "vite";
import { uiTranslations } from './vite-plugin-ui-translations';

export default defineConfig({
  plugins: [
    uiTranslations({
      locales: ["en-US", "cs-CZ"], // Specify the locales you want to bundle
    }),
  ],
});

Make sure not to set the library language to any of the locales you are stripping away, otherwise the library will not work properly.