@bethinkpl/design-system 29.3.0 → 30.0.0

package/.eslintrc.cjs

@@ -5,6 +5,7 @@ module.exports = {
 		'plugin:vue/recommended',
 		'prettier',
 		'plugin:storybook/recommended',
+		'plugin:@intlify/vue-i18n/recommended-legacy',
 	],
 	env: {
 		browser: true,
@@ -134,5 +135,40 @@ module.exports = {
 		'vue/no-undef-components': 'error',
 		'vue/multi-word-component-names': 0,
 		'vue/require-emit-validator': 'error',
+		'@intlify/vue-i18n/no-v-html': 'off',
+		'@intlify/vue-i18n/no-missing-keys-in-other-locales': 'error',
+		'@intlify/vue-i18n/no-dynamic-keys': 'error',
+		'@intlify/vue-i18n/no-html-messages': 'error',
+		'@intlify/vue-i18n/no-unused-keys': [
+			'error',
+			{
+				src: 'lib/js/**/*.{js,ts,vue}',
+			},
+		],
+		'@intlify/vue-i18n/no-raw-text': [
+			'error',
+			{
+				ignorePattern: '^[-_#:()&{}=*./–…]+$',
+			},
+		],
+	},
+	settings: {
+		'vue-i18n': {
+			localeDir: {
+				pattern: './lib/js/i18n/*/*.json',
+				localeKey: 'path',
+				localePattern: '^.*/(?<locale>[A-Za-z0-9-_]+)/.*.json$',
+			},
+			messageSyntaxVersion: '^11.0.0',
+		},
 	},
+	overrides: [
+		{
+			files: ['*.json'],
+			parser: 'jsonc-eslint-parser',
+			rules: {
+				'quote-props': 'off',
+			},
+		},
+	],
 };

package/.github/workflows/build-dist-on-trigger.yml

@@ -7,6 +7,8 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
+    env:
+      FONT_AWESOME_AUTH_TOKEN: ${{ secrets.FONT_AWESOME_AUTH_TOKEN }}
 
     permissions:
       # Give the default GITHUB_TOKEN write permission to commit and push the changed files back to the repository.
@@ -37,17 +39,20 @@ jobs:
         with:
           ref: ${{ steps.comment-pr-ref.outputs.result }}
 
-      - name: Insert auth font awesome auth token
-        run: echo "@fortawesome:registry=https://npm.fontawesome.com/" > .npmrc && echo "//npm.fontawesome.com/:_authToken=${{ secrets.FONT_AWESOME_AUTH_TOKEN }}" >> .npmrc
-
       - uses: actions/setup-node@v4
         with:
           node-version: '20.9.0'
-          cache: 'yarn'
+
+      - uses: actions/cache@v4
+        name: Cache node_modules
+        id: cache-node-modules
+        with:
+          path: node_modules
+          key: design-system-node-modules-${{ hashFiles('yarn.lock') }}
 
       - name: Install and Build 🔧
         run: |
-          yarn install --pure-lockfile
+          yarn install --immutable --immutable-cache
           yarn build
 
       - name: Push 🚀

package/.github/workflows/build-to-review-on-trigger.yml

@@ -7,6 +7,8 @@ on:
 jobs:
   deploy-for-review:
     runs-on: ubuntu-latest
+    env:
+      FONT_AWESOME_AUTH_TOKEN: ${{ secrets.FONT_AWESOME_AUTH_TOKEN }}
 
     if: |
       github.event.comment &&
@@ -36,17 +38,20 @@ jobs:
         with:
           ref: ${{ steps.comment-pr-ref.outputs.result }}
 
-      - name: Insert auth font awesome auth token
-        run: echo "@fortawesome:registry=https://npm.fontawesome.com/" > .npmrc && echo "//npm.fontawesome.com/:_authToken=${{ secrets.FONT_AWESOME_AUTH_TOKEN }}" >> .npmrc
-
       - uses: actions/setup-node@v3
         with:
           node-version: '20.9.0'
-          cache: 'yarn'
+
+      - uses: actions/cache@v4
+        name: Cache node_modules
+        id: cache-node-modules
+        with:
+          path: node_modules
+          key: design-system-node-modules-${{ hashFiles('yarn.lock') }}
 
       - name: Install and Build 🔧
         run: |
-          yarn install --pure-lockfile
+          yarn install --immutable --immutable-cache
           yarn storybook:build
 
       - name: Set up S3cmd cli tool

package/.github/workflows/build.yml

@@ -6,18 +6,23 @@ on:
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
+    env:
+      FONT_AWESOME_AUTH_TOKEN: ${{ secrets.FONT_AWESOME_AUTH_TOKEN }}
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v3
-      - name: Insert auth font awesome auth token
-        run: echo "@fortawesome:registry=https://npm.fontawesome.com/" > .npmrc && echo "//npm.fontawesome.com/:_authToken=${{ secrets.FONT_AWESOME_AUTH_TOKEN }}" >> .npmrc
       - uses: actions/setup-node@v3
         with:
           node-version: '20.9.0'
-          cache: 'yarn'
+      - uses: actions/cache@v4
+        name: Cache node_modules
+        id: cache-node-modules
+        with:
+          path: node_modules
+          key: design-system-node-modules-${{ hashFiles('yarn.lock') }}
       - name: Install and Build 🔧
         run: | # Install npm packages and build the Storybook files
-          yarn install --pure-lockfile
+          yarn install --immutable --immutable-cache
           yarn build
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4

package/.github/workflows/ci.yml

@@ -11,17 +11,21 @@ jobs:
     name: Frontend tests
     runs-on: ubuntu-latest
     timeout-minutes: 10
-
+    env:
+      FONT_AWESOME_AUTH_TOKEN: ${{ secrets.FONT_AWESOME_AUTH_TOKEN }}
     steps:
       - uses: actions/checkout@v3
-      - name: Insert auth font awesome auth token
-        run: echo "@fortawesome:registry=https://npm.fontawesome.com/" > .npmrc && echo "//npm.fontawesome.com/:_authToken=${{ secrets.FONT_AWESOME_AUTH_TOKEN }}" >> .npmrc
       - uses: actions/setup-node@v3
         with:
           node-version: '20.9.0'
-          cache: 'yarn'
+      - uses: actions/cache@v4
+        name: Cache node_modules
+        id: cache-node-modules
+        with:
+          path: node_modules
+          key: design-system-node-modules-${{ hashFiles('yarn.lock') }}
       - name: Install dependencies
-        run: yarn install --pure-lockfile
+        run: yarn install --immutable --immutable-cache
       - name: TypeScript check
         run: yarn ts:check
       - name: Run unit tests

package/.github/workflows/storybook.yml

@@ -6,18 +6,23 @@ on:
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
+    env:
+      FONT_AWESOME_AUTH_TOKEN: ${{ secrets.FONT_AWESOME_AUTH_TOKEN }}
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v3
-      - name: Insert auth font awesome auth token
-        run: echo "@fortawesome:registry=https://npm.fontawesome.com/" > .npmrc && echo "//npm.fontawesome.com/:_authToken=${{ secrets.FONT_AWESOME_AUTH_TOKEN }}" >> .npmrc
       - uses: actions/setup-node@v3
         with:
           node-version: '20.9.0'
-          cache: 'yarn'
+      - uses: actions/cache@v4
+        name: Cache node_modules
+        id: cache-node-modules
+        with:
+          path: node_modules
+          key: design-system-node-modules-${{ hashFiles('yarn.lock') }}
       - name: Install and Build 🔧
         run: | # Install npm packages and build the Storybook files
-          yarn install --pure-lockfile
+          yarn install --immutable --immutable-cache
           yarn storybook:build
           touch ./public/storybook/.nojekyll
       - name: Deploy 🚀

package/.prettierignore

@@ -0,0 +1,4 @@
+# Ignore all JSON files except i18n files
+# For example, we don't want to format package.json as it is automatically managed
+**/*.json
+!lib/js/i18n/**/*.json

package/.prettierrc

@@ -1,4 +1,5 @@
 {
+  "plugins": ["prettier-plugin-sort-json"],
   "tabWidth": 4,
   "useTabs": true,
   "singleQuote": true,

package/.storybook/ChangeLocale.tsx

@@ -0,0 +1,51 @@
+import React, { memo, useCallback, useState } from 'react';
+
+import { useStorybookApi, useChannel, useGlobals } from '@storybook/manager-api';
+import { Button } from 'storybook/internal/components';
+import { FORCE_REMOUNT } from '@storybook/core-events';
+
+import { i18n } from './i18n';
+
+export const ChangeLocale = memo(function MyAddonSelector() {
+	const emit = useChannel({});
+	const [globals, updateGlobals] = useGlobals();
+	const [locale, setLocale] = useState(globals.locale || 'pl');
+
+	const api = useStorybookApi();
+
+	const changeLocale = useCallback(() => {
+		const newLocale = locale === 'pl' ? 'en' : 'pl';
+
+		i18n.global.locale = newLocale;
+		setLocale(newLocale);
+
+		updateGlobals({
+			locale: newLocale,
+		});
+
+		// Force remount the current story to apply locale changes
+		emit(FORCE_REMOUNT, { storyId: api.getUrlState().storyId });
+	}, [locale, emit, api, updateGlobals]);
+
+	return (
+		<Button
+			title="Change locale"
+			active={false}
+			padding="small"
+			variant="ghost"
+			onClick={changeLocale}
+		>
+			<svg
+				id="Layer_1"
+				data-name="Layer 1"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 122.88 92.91"
+				width="16px"
+				height="16px"
+			>
+				<path d="M20.15,83.63,31.63,73.4a2.89,2.89,0,0,1,1.91-.73h27.8a.92.92,0,0,0,.93-.93V65.9H68v5.84a6.71,6.71,0,0,1-6.68,6.68H34.62L19.3,92.07a2.87,2.87,0,0,1-4.9-2V78.42H6.69A6.71,6.71,0,0,1,0,71.74V28.59a6.76,6.76,0,0,1,6.69-6.68H43.35v5.75H6.69a1,1,0,0,0-.94.93V71.74a.91.91,0,0,0,.28.65,1,1,0,0,0,.66.28H17.27a2.88,2.88,0,0,1,2.88,2.88v8.08Zm.21-19.48L29.6,36.24h8.83l9.24,27.91H40.35L38.8,59.07H29.15l-1.51,5.08ZM30.79,53.24h6.37L34,41.81,30.79,53.24ZM76.63,13.35h8.7V11.11a.69.69,0,0,1,.69-.69h4.65a.68.68,0,0,1,.68.69v2.24h9.76a.68.68,0,0,1,.68.69V18.5a.68.68,0,0,1-.68.68H99.56a26.3,26.3,0,0,1-.91,3.88l0,.06a26.07,26.07,0,0,1-1.74,4.15,32.34,32.34,0,0,1-2.14,3.43c-.67,1-1.41,1.9-2.2,2.83a35.78,35.78,0,0,0,3.68,3.83,41.43,41.43,0,0,0,5.09,3.74.68.68,0,0,1,.21.94l-2.39,3.73a.69.69,0,0,1-1,.2,45.88,45.88,0,0,1-5.58-4.08l0,0a41.42,41.42,0,0,1-4-4.1C87.3,38.93,86.15,40,85,41l0,0c-1.36,1.12-2.79,2.2-4.47,3.36a.69.69,0,0,1-1-.17L77,40.53a.69.69,0,0,1,.17-1c1.66-1.14,3-2.19,4.36-3.28,1.16-1,2.28-2,3.49-3.16a44.82,44.82,0,0,1-2.77-4.45A28.84,28.84,0,0,1,80,22.9a.68.68,0,0,1,.47-.84l4.27-1.19a.68.68,0,0,1,.84.47A22.62,22.62,0,0,0,89,28.7L90.27,27a26.33,26.33,0,0,0,1.51-2.47l0,0A19.43,19.43,0,0,0,93,21.62a24,24,0,0,0,.66-2.44h-17a.69.69,0,0,1-.69-.68V14a.69.69,0,0,1,.69-.69Zm27,56.82L88.26,56.51H61.54a6.73,6.73,0,0,1-6.69-6.68V6.69a6.71,6.71,0,0,1,2-4.72l.2-.18A6.67,6.67,0,0,1,61.54,0h54.65a6.69,6.69,0,0,1,4.71,2l.19.2a6.69,6.69,0,0,1,1.79,4.51V49.83a6.73,6.73,0,0,1-6.69,6.68h-7.7V68.13a2.88,2.88,0,0,1-4.91,2ZM91.26,51.49l11.47,10.23V53.64a2.88,2.88,0,0,1,2.88-2.88h10.58a.92.92,0,0,0,.65-.28.91.91,0,0,0,.29-.65V6.69a1,1,0,0,0-.22-.58L116.84,6a1,1,0,0,0-.65-.29H61.54A.94.94,0,0,0,61,6L60.89,6a.92.92,0,0,0-.28.65V49.83a.92.92,0,0,0,.93.93H89.35a2.86,2.86,0,0,1,1.91.73Z" />
+			</svg>
+			Change to: {(locale === 'pl' ? 'en' : 'pl').toUpperCase()}
+		</Button>
+	);
+});

package/.storybook/i18n.ts

@@ -0,0 +1,8 @@
+import { createI18n } from 'vue-i18n';
+import { messages, MessageSchema } from '../lib/js/i18n';
+
+export const i18n = createI18n<[MessageSchema], 'pl'>({
+	fallbackLocale: 'pl',
+	locale: 'pl',
+	messages,
+});

package/.storybook/manager.ts

@@ -1,7 +1,17 @@
-import { addons } from '@storybook/manager-api';
+import { addons, types } from '@storybook/manager-api';
+import { ChangeLocale } from './ChangeLocale';
 
 addons.setConfig({
 	sidebar: {
 		showRoots: true,
 	},
 });
+
+addons.register('change-locale-addon', () => {
+	addons.add('change-locale-addon/tool', {
+		type: types.TOOL,
+		title: 'Change locale',
+		match: ({ tabId, viewMode }) => !tabId && viewMode === 'story',
+		render: ChangeLocale,
+	});
+});

package/.storybook/preview.ts

@@ -2,6 +2,7 @@ import { initialize } from '../lib/js/icons/fontawesome';
 import { initializePrimeVue } from '../lib/js';
 
 import { setup } from '@storybook/vue3';
+import { i18n } from './i18n';
 
 const customViewports = {
 	mobile: {
@@ -98,7 +99,19 @@ export const parameters = {
 	},
 };
 
-setup((app) => {
+export const globalTypes = {
+	locale: {
+		name: 'Locale',
+		type: 'select',
+		defaultValue: 'pl',
+		options: ['pl', 'en'],
+	},
+};
+
+setup((app, context) => {
+	i18n.global.locale = context.globals.locale;
+	app.use(i18n);
+
 	// https://storybook.js.org/docs/get-started/frameworks/vue3-vite?renderer=vue#extending-the-vue-application
 	initializePrimeVue(app);
 	initialize();

package/.storybook/storybook.scss

@@ -9,8 +9,20 @@
 @import '../lib/styles/settings/colors/tokens-wnl';
 @import '../lib/styles/settings/typography/tokens';
 
-$fontFamily: 'BlinkMacSystemFont', -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-	'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+$fontFamily:
+	'BlinkMacSystemFont',
+	-apple-system,
+	'Segoe UI',
+	'Roboto',
+	'Oxygen',
+	'Ubuntu',
+	'Cantarell',
+	'Fira Sans',
+	'Droid Sans',
+	'Helvetica Neue',
+	'Helvetica',
+	'Arial',
+	sans-serif;
 /* stylelint-disable selector-class-pattern */
 html,
 body {