2698ad422e
* Move shared components to a packages/ directory so they can be publish more sensibly * Iterate towards split out shared-components module * Move shared component source into src/ subdir * Fix up imports * Include shared components in babel-ing (again) * Remove now unused dependencies * Update import in storybook preview * ...except of course they aren't unused if we import the shared components by source * Ignore shared components deps * Add shared-components to i18n paths and upgrade web-i18n to version that supports doing so * Move storybook stuff to shared-components * Seems we don't need this anymore... * Remove unused deps and remove storybook plugin from eslint * Presumably working-directory is only valid on run steps * Ignore dep & run prettier * Prettier on knips.ts * Hopefully run in right dir * Remember how to software write * Okay... how about THIS way? * Oh right, they were git ignored. Sigh. * Add concurrently * Ignore in knip * Better? * Paaaaaaaackageeeeeeees * More packages * Move playwright snapshots * Still need a custom snapshots dir * Add eslint back * Oh, now knip sees them * Fix another import * Don't lint shared-components with everything else Okay, eslint & tsconfig are tied too closely for this to work and running tsc on the shared components will need its deps installing * Maybe lint shared components please? * Not quite * Remove storybook again Re-check if it does work without it * Remove storybook eslint plugin as we're not linting storybook here anymore * Remove this too * We do need it here though
62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
/*
|
|
* Copyright 2025 New Vector Ltd.
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
* Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
import { Addon, types, useGlobals } from "storybook/manager-api";
|
|
import { WithTooltip, IconButton, TooltipLinkList } from "storybook/internal/components";
|
|
import React from "react";
|
|
import { GlobeIcon } from "@storybook/icons";
|
|
|
|
// We can't import `shared/i18n.tsx` directly here.
|
|
// The storybook addon doesn't seem to benefit the vite config of storybook and we can't resolve the alias in i18n.tsx.
|
|
import json from "../../../webapp/i18n/languages.json";
|
|
const languages = Object.keys(json).filter((lang) => lang !== "default");
|
|
|
|
/**
|
|
* Returns the title of a language in the user's locale.
|
|
*/
|
|
function languageTitle(language: string): string {
|
|
return new Intl.DisplayNames([language], { type: "language", style: "short" }).of(language) || language;
|
|
}
|
|
|
|
export const languageAddon: Addon = {
|
|
title: "Language Selector",
|
|
type: types.TOOL,
|
|
render: ({ active }) => {
|
|
const [globals, updateGlobals] = useGlobals();
|
|
const selectedLanguage = globals.language || "en";
|
|
|
|
return (
|
|
<WithTooltip
|
|
placement="top"
|
|
trigger="click"
|
|
closeOnOutsideClick
|
|
tooltip={({ onHide }) => {
|
|
return (
|
|
<TooltipLinkList
|
|
links={languages.map((language) => ({
|
|
id: language,
|
|
title: languageTitle(language),
|
|
active: selectedLanguage === language,
|
|
onClick: async () => {
|
|
// Update the global state with the selected language
|
|
updateGlobals({ language });
|
|
onHide();
|
|
},
|
|
}))}
|
|
/>
|
|
);
|
|
}}
|
|
>
|
|
<IconButton title="Language">
|
|
<GlobeIcon />
|
|
{languageTitle(selectedLanguage)}
|
|
</IconButton>
|
|
</WithTooltip>
|
|
);
|
|
},
|
|
};
|