chore: Component library + Storybook #3327
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughAdds a new reusable UI library with Storybook integration, tooling (Vite, TypeScript, ESLint, Prettier, CSpell), a Storybook Tolgee addon, multiple component stories and utilities, and updates webapp imports/consumer code to use the new library and adjusted theme exports. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (8)
library/src/unrelated.mdx (1)
1-9: Consider switching to@storybook/blocksfor MDX importsFor Storybook 7+ / 10, the recommended import source for MDX blocks is
@storybook/blocksrather than@storybook/addon-docs/blocks. The content itself looks fine.Example:
-import { Meta } from '@storybook/addon-docs/blocks'; +import { Meta } from '@storybook/blocks';Please double‑check against the Storybook 10 MDX docs to ensure this matches the version you’re targeting.
library/custom.d.ts (1)
1-18: Typedimport.meta.envand Storybook test types look reasonableDeclaring
ImportMetaEnv/ImportMetaand referencingstorybook/testtypes is a solid way to get type‑safe env access and Storybook test helpers. One optional improvement would be to extend Vite’s base env type (if you’re already includingvite/clienttypes) to preserve any built‑in fields:interface ImportMetaEnv /* extends Readonly<Record<string, string>> or existing Vite type */ { readonly VITE_APP_TOLGEE_API_URL: string; readonly VITE_APP_TOLGEE_API_KEY: string; }Please confirm this matches how
vite/clienttypes are wired in yourtsconfigso there are no duplicate/conflictingImportMetaEnvdeclarations.library/.env (1)
1-3: Env example is clear; optionally reorder to satisfy dotenv‑linterThe instructions and variable names are clear. If you want to keep dotenv‑linter fully green, you can swap the two variable lines so keys are alphabetically ordered:
- VITE_APP_TOLGEE_API_URL=https://app.tolgee.io - VITE_APP_TOLGEE_API_KEY= + VITE_APP_TOLGEE_API_KEY= + VITE_APP_TOLGEE_API_URL=https://app.tolgee.iolibrary/tsconfig.lint.json (1)
1-11: Lint tsconfig path aliases look good; keep aligned with build & ViteThe
lib.components/*,lib.constants/*, andlib.hooks/*aliases and inclusion ofcustom.d.tsmake sense for linting. Just ensure the same path mapping is reflected wherever module resolution happens at runtime/build time (e.g., basetsconfig,tsconfig.build.json, andvite.config.ts/vite-tsconfig-paths) so imports behave consistently across tools.When you wire up components/hooks, please verify that an alias import (e.g.,
lib.hooks/useCurrentLanguage) compiles and resolves correctly under bothtsc --project tsconfig.build.jsonand Vite.library/tsconfig.build.json (1)
1-12: tsconfig.build.json is well-suited for declaration-only builds; consider excluding tests as wellThe build config correctly emits only declarations to
./distwhile excluding stories and MDX. Once you start adding tests undersrc, you may also want to extendexcludewith patterns like**/*.test.*/**/*.spec.*so test declarations don’t end up in the published types.library/vite.config.ts (1)
1-56: Vite library config with dynamic entry discovery looks goodThe glob-based
entryPointsgeneration (components viaindex.*, hooks/constants as flat files) pluspreserveModules/preserveModulesRoot: 'src'gives a clear mapping from source structure to published modules. Usingvite-tsconfig-pathswith both library and webapp tsconfigs andserver.fs.allowfor../webapp/srclines up with the temporary ThemeProvider import.If you later add more top-level source categories (e.g.
utils,types), you might consider centralizingcomponentDirs/otherDirs(or deriving them) so you don’t have to touch this config in multiple places, but it’s perfectly fine as-is for an early iteration.library/README.md (2)
36-42: Use "take a look" instead of "have a look" for American English consistency.Lines 36, 37, 41, and 42 use "have a look," which is more idiomatic British English. For consistency with American English conventions, use "take a look" instead.
- For inspiration have a look on [MfaBadge/stories.tsx](./src/components/MfaBadge/stories.tsx). + For inspiration take a look at [MfaBadge/stories.tsx](./src/components/MfaBadge/stories.tsx).- For details have a look on [CSF docs](https://storybook.js.org/docs/api/csf). + For details take a look at [CSF docs](https://storybook.js.org/docs/api/csf).- For inspiration have a look on [FlagImage/stories.mdx](./src/components/languages/FlagImage/stories.mdx). + For inspiration take a look at [FlagImage/stories.mdx](./src/components/languages/FlagImage/stories.mdx).- For details have a look on [MDX docs](https://storybook.js.org/docs/writing-docs/mdx). + For details take a look at [MDX docs](https://storybook.js.org/docs/writing-docs/mdx).
25-25: Consider conciseness: replace "at the moment" with an adverb.For improved conciseness, consider replacing "at the moment" with a more direct phrasing.
- At the moment, only a few prefixes are predefined in `library`'s [tsconfig.json](./tsconfig.json), [package.json](./package.json) and [vite.config.ts](./vite.config.ts), add more as you need them. + Currently, only a few prefixes are predefined in `library`'s [tsconfig.json](./tsconfig.json), [package.json](./package.json) and [vite.config.ts](./vite.config.ts); add more as you need them.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
library/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (18)
library/.env(1 hunks)library/.gitignore(1 hunks)library/.prettierignore(1 hunks)library/.storybook/main.ts(1 hunks)library/.storybook/preview.tsx(1 hunks)library/README.md(1 hunks)library/cspell.config.ts(1 hunks)library/custom.d.ts(1 hunks)library/eslint.config.js(1 hunks)library/package.json(1 hunks)library/prettier.config.ts(1 hunks)library/src/unrelated.mdx(1 hunks)library/tsconfig.build.json(1 hunks)library/tsconfig.json(1 hunks)library/tsconfig.lint.json(1 hunks)library/vite.config.ts(1 hunks)webapp/src/ThemeProvider.tsx(2 hunks)webapp/src/ee/glossary/components/GlossaryTermTags.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
webapp/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
webapp/**/*.{ts,tsx}: Use TypeScript path aliases (tg.component/, tg.service/, tg.hooks/, tg.views/, tg.globalContext/*) instead of relative imports
After backend API changes, regenerate TypeScript types by runningnpm run schema(andnpm run billing-schemaif applicable) in the webapp directory
Use typed React Query hooks fromuseQueryApi.tsfor API communication, not raw React Query
Use Tolgee-specific hooksuseReportEventanduseReportOncefrom 'tg.hooks/useReportEvent' for business event tracking and analytics
Files:
webapp/src/ThemeProvider.tsxwebapp/src/ee/glossary/components/GlossaryTermTags.tsx
webapp/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Always use
data-cyattributes for E2E test selectors, never rely on text content
Files:
webapp/src/ThemeProvider.tsxwebapp/src/ee/glossary/components/GlossaryTermTags.tsx
🧠 Learnings (6)
📓 Common learnings
Learnt from: dkrizan
Repo: tolgee/tolgee-platform PR: 3216
File: webapp/src/ee/billing/administration/subscriptionPlans/migration/general/PlanMigrationRecordList.tsx:8-8
Timestamp: 2025-10-15T13:15:17.009Z
Learning: In the tolgee-platform repository, when reviewing webapp code, check `webapp/package.json` for dependencies rather than the root `package.json`, as this is a monorepo structure where the webapp has its own package configuration.
📚 Learning: 2025-07-28T12:08:29.462Z
Learnt from: stepan662
Repo: tolgee/tolgee-platform PR: 3182
File: webapp/src/component/layout/TopBanner/useAnnouncement.tsx:124-130
Timestamp: 2025-07-28T12:08:29.462Z
Learning: In the Tolgee platform project, JSON translation files are not manually edited. Translations are stored in the Tolgee platform itself and availability is checked at build time. The JSON files are generated artifacts, not the source of truth.
Applied to files:
library/.prettierignore
📚 Learning: 2025-11-28T15:12:44.060Z
Learnt from: CR
Repo: tolgee/tolgee-platform PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T15:12:44.060Z
Learning: Applies to webapp/**/*.{ts,tsx} : Use TypeScript path aliases (tg.component/*, tg.service/*, tg.hooks/*, tg.views/*, tg.globalContext/*) instead of relative imports
Applied to files:
library/tsconfig.jsonlibrary/custom.d.tslibrary/prettier.config.tslibrary/tsconfig.lint.jsonwebapp/src/ee/glossary/components/GlossaryTermTags.tsxlibrary/vite.config.ts
📚 Learning: 2025-06-16T20:27:09.537Z
Learnt from: cyyynthia
Repo: tolgee/tolgee-platform PR: 1987
File: email/package.json:38-41
Timestamp: 2025-06-16T20:27:09.537Z
Learning: Node.js v16.9.0+ supports wildcard subpath patterns in the "exports" field of package.json. Patterns like "./components/*.ts": "./components/*.ts" are valid syntax and are the recommended approach for exposing multiple files. This replaced the deprecated folder export syntax.
Applied to files:
library/tsconfig.jsonlibrary/tsconfig.lint.jsonlibrary/tsconfig.build.json
📚 Learning: 2025-11-28T15:12:44.060Z
Learnt from: CR
Repo: tolgee/tolgee-platform PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T15:12:44.060Z
Learning: Applies to webapp/**/*.{ts,tsx} : After backend API changes, regenerate TypeScript types by running `npm run schema` (and `npm run billing-schema` if applicable) in the webapp directory
Applied to files:
library/tsconfig.json
📚 Learning: 2025-11-28T15:12:44.060Z
Learnt from: CR
Repo: tolgee/tolgee-platform PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T15:12:44.060Z
Learning: Applies to webapp/**/*.{ts,tsx} : Use Tolgee-specific hooks `useReportEvent` and `useReportOnce` from 'tg.hooks/useReportEvent' for business event tracking and analytics
Applied to files:
library/tsconfig.jsonlibrary/README.md
🧬 Code graph analysis (2)
library/.storybook/preview.tsx (1)
webapp/src/ThemeProvider.tsx (2)
ThemeProvider(331-363)getTheme(65-316)
library/vite.config.ts (1)
webapp/scripts/generate-schemas.mjs (1)
__dirname(8-8)
🪛 dotenv-linter (4.0.0)
library/.env
[warning] 3-3: [UnorderedKey] The VITE_APP_TOLGEE_API_KEY key should go before the VITE_APP_TOLGEE_API_URL key
(UnorderedKey)
🪛 LanguageTool
library/README.md
[style] ~25-~25: For conciseness, consider replacing this expression with an adverb.
Context: ...bappfromlibrary` might not be safe. At the moment, only a few prefixes are predefined in ...
(AT_THE_MOMENT)
[locale-violation] ~36-~36: In American English, “take a look” is more commonly used.
Context: ...vidual story level. - For inspiration have a look on [MfaBadge/stories.tsx](./src/compone...
(HAVE_A_LOOK)
[locale-violation] ~37-~37: In American English, “take a look” is more commonly used.
Context: .../MfaBadge/stories.tsx). - For details have a look on [CSF docs](https://storybook.js.org/...
(HAVE_A_LOOK)
[locale-violation] ~41-~41: In American English, “take a look” is more commonly used.
Context: ...nd other MDX files. - For inspiration have a look on [FlagImage/stories.mdx](./src/compon...
(HAVE_A_LOOK)
[locale-violation] ~42-~42: In American English, “take a look” is more commonly used.
Context: ...FlagImage/stories.mdx). - For details have a look on [MDX docs](https://storybook.js.org/...
(HAVE_A_LOOK)
🪛 markdownlint-cli2 (0.18.1)
library/README.md
16-16: Bare URL used
(MD034, no-bare-urls)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: BT 🔎 (server-app:runStandardTests)
🔇 Additional comments (12)
webapp/src/ee/glossary/components/GlossaryTermTags.tsx (1)
4-4: ImportingPropsOffrom the top-level Emotion entrypoint looks correctSwitching from the deep CommonJS build path to
@emotion/reactis cleaner and more stable; it should keep typings intact without changing runtime behavior.If the repo uses an unusual or pinned Emotion version, quickly confirm in its docs/typings that
PropsOfis still exported from the@emotion/reactentry to avoid surprises after upgrades.library/.prettierignore (1)
1-2: Prettier ignores are appropriate for build + generated artifactsIgnoring
distand generatedsrc/i18n/*.jsonis consistent with keeping tooling away from compiled output and non-source-of-truth translation data.Based on learnings, the i18n JSON files are generated artifacts, so excluding them from formatting is correct.
library/package.json (2)
61-82: Exports pattern structure looks good but keep in sync with build layoutThe subpath exports for
components,components/languages,hooks, andconstantsare consistent with adistlayout that uses per‑component folders and flat files for hooks/constants. Just keep in mind any future change in thediststructure (e.g., nesting hooks/constants in subfolders) will require updating these patterns (and corresponding tsconfig/vite path config) together.If you later refactor the folder layout, please re‑check that an import like
@tginternal/library/hooks/useCurrentLanguagestill resolves to the expected built files.
6-8: Node version constraint in library is stricter than webapp—ensure local development uses compatible Node 22.10.0+The review comment raised a valid concern. Verification shows:
- library/package.json enforces
node: >=22.10.0strictly- webapp/package.json has no
enginesconstraint- Both use React 17.0.x (^17.0.2 vs ^17.0.1)—fully compatible, no duplicate instances since packages have separate node_modules
- Root package.json has no workspaces; this is not a monorepo structure with linked packages
The asymmetry means developers could theoretically run webapp on older Node versions while library requires 22.10.0+. In practice, this is not a blocker (both packages are independent), but developers should be aware that working with library requires Node 22.10.0+. React version alignment is sound.
library/.gitignore (1)
1-6: Gitignore entries match typical library + Storybook artefactsIgnoring build output, dependencies, local env files, Storybook static build, and logs is appropriate here.
library/prettier.config.ts (1)
1-7: Typed Prettier config withsatisfies Configlooks solidUsing a typed config and
satisfies Configis a clean, future‑proof pattern, and the chosen options are conventional for this repo.Please just confirm this file is wired as the Prettier config entry point (e.g., via
prettier --config prettier.config.ts) in your tooling so it’s actually picked up.library/tsconfig.json (1)
1-35: Library tsconfig matches the intended Storybook/Vite setupBase URL, path aliases (
lib.*,tg.*), bundler module resolution, and theincludeset (src, .storybook, sharedcustom.d.ts) all line up well with the new library + Storybook environment. No issues from my side.library/.storybook/main.ts (1)
1-18: Storybook main config is minimal and correctly wiredStories, addons, framework, and TS options are all set up in a standard way, and
satisfies StorybookConfigkeeps the config type-safe. Looks good for this initial Storybook scaffold.library/cspell.config.ts (1)
1-27: cspell configuration is focused and appropriateThe config cleanly whitelists Tolgee/Storybook-specific terms and ignores generated artifacts (
dist,storybook-static, i18n JSON), which should keep spellchecking useful without noise. No changes needed.library/eslint.config.js (1)
1-83: Flat ESLint config is well-structured for the library + Storybook setupThe layering (global settings → JS/TS/React base → hooks/refresh for JSX/TSX → story overrides → JSON/Markdown → compat + Prettier) is coherent and matches this package’s needs, with
distandstorybook-staticcorrectly ignored. No change suggestions here.webapp/src/ThemeProvider.tsx (1)
13-316: ExportinggetThemeand tightening types is a safe, helpful changeSwitching the figma theme import to
./figmaTheme, adding an explicitstringtype tocreateColor, and makinggetThemea named export all look good. Existing usage insideThemeProvideris preserved, and the new export cleanly supports the Storybook preview’s Light/Dark themes without altering runtime behavior.library/README.md (1)
1-42: Overall: documentation is clear and comprehensive.The README provides good structure and guidance for component migration and documentation workflows. The introduction, setup instructions, and migration steps are well-organized and align with the PR objectives of establishing the component library and Storybook infrastructure. Addressing the minor issues above will improve clarity and consistency.
Actually two problematic dependencies: component -> theme -> component library -> webapp -> library
zomp
force-pushed
the
storybook-itself
branch
from
be3c58d to
0f06fe8
Compare
zomp
force-pushed
the
storybook-itself
branch
from
5a90844 to
4fa90e8
Compare
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (9)
storybook-tolgee-addon/tsconfig.json (1)
1-22: Solid TypeScript configuration for the addon.The configuration is well-suited for a browser-based React addon project. Strict type checking is enabled, declaration generation is configured appropriately for library use, and the module resolution is correct for bundler tooling.
Consider adding
"resolveJsonModule": trueif the addon code imports JSON files (e.g., for configuration or metadata), and explicitly setting"rootDir": "src"for structural clarity in the output directory layout.webapp/src/views/projects/translations/cell/styles.ts (1)
55-59: Verify toolbarminHeightunits to avoid invalidscroll-margin-topCSS
scroll-margin-top: ${({ theme }) => theme.mixins.toolbar.minHeight}px;assumestheme.mixins.toolbar.minHeightis a unitless number. If your theme ever sets this as a string with units (e.g."56px"), this will produce"56pxpx"and the rule will be ignored.Consider either:
- Ensuring
theme.mixins.toolbar.minHeightis always a number, or- Making the interpolation handle both shapes, e.g.:
- scroll-margin-top: ${({ theme }) => theme.mixins.toolbar.minHeight}px; + scroll-margin-top: ${({ theme }) => { + const h = theme.mixins.toolbar.minHeight; + return typeof h === 'number' ? `${h}px` : h; + }};storybook-tolgee-addon/eslint.config.js (1)
60-60: Consider whether this should match all tsconfig files.This config only matches
'tsconfig.json', whilelibrary/eslint.config.jsuses the pattern'tsconfig*.json'to match all tsconfig variants (e.g.,tsconfig.app.json,tsconfig.node.json). If this addon has multiple tsconfig files, consider using the glob pattern for consistency.Apply this diff if the addon has multiple tsconfig files:
- files: ['tsconfig.json'], + files: ['**/tsconfig*.json'],library/vite.config.ts (1)
8-72: Multi-entry Vite library config looks solid; be aware of/indexentry keysThe fast‑glob +
entryPointsmapping gives you a clean multi-entry ES build with preserved modules, and the tsconfig paths + Storybook addon aliasing look coherent for the monorepo.One thing to keep in mind: for component entries,
src/components/**/index.{ts,tsx}becomes keys likecomponents/Foo/index(because only the extension is stripped). If you want consumers to import as@tginternal/library/components/Fooinstead of.../Foo/index, you’ll likely handle that via the packageexportsmap or by special‑casingindexnames later. Not a blocker, just something to align with your intended public API.Based on learnings, this should compose well with wildcard subpath
exportsonce you finalize the public surface..github/workflows/test.yml (1)
232-274: Avoid redundant library install and prefernpm cifor determinismIn
frontend-code-check, you already runnpm ciin./library(line ~237), then later in "Check it builds without ee directory" you runnpm --prefix ../library install(line ~270) from the webapp working directory. That second install is redundant—both install from the same lock file—and uses the slower, non-deterministicnpm installinstead ofnpm ci.Switch the second install to
npm cifor consistency and determinism:- name: Check it builds without ee directory run: | rm -rf ./src/ee - npm --prefix ../library install + npm --prefix ../library ci npm installlibrary/src/components/languages/FlagImage/utils.ts (1)
22-30: Consider adding undefined check for robustness.The function assumes
flagFiles[flagName]exists after the fallback logic. IfgetSvgNameByEmoji('🏳️')itself throws or returns an unmapped name, the function could returnundefined.Apply this diff to add a safety check:
export const getFlagPath = (hex: string): string => { let flagName: string; try { flagName = getSvgNameByEmoji(hex); } catch { flagName = getSvgNameByEmoji('🏳️'); } - return flagFiles[flagName]; + return flagFiles[flagName] ?? flagFiles[getSvgNameByEmoji('🏳️')]; };storybook-tolgee-addon/src/menuSwitcher.tsx (1)
70-135: Minor UX / readability nits in label and locale handlingNothing blocking, but a few optional tweaks you might consider:
- In the dropdown (
TooltipLinkList),activeis derived fromlanguageFromGlobals, while the label uses the effective language (languageFromGlobals || languageFromConfig). When a story override is active, this can make the label and highlighted item diverge. If you want the menu to reflect the actual active language, using the samelanguagevalue could be clearer.Object.keys(locales)is computed multiple times. Hoisting it to aconst localeKeys = Object.keys(locales);would avoid repetition and make the branching (length === 2,> 2) a bit easier to read.These are purely optional cleanups; behavior is otherwise coherent.
storybook-tolgee-addon/src/decorators/provider.decorator.tsx (1)
24-64: Decorator wiring looks correct; consider Tolgee instance lifecycleThe provider options + helper usage (
initMenuSwitcher,initTolgee,changeLanguage) are wired coherently and should behave as described.One thing to keep in mind:
initTolgeeis called inside the decorator function, so a new Tolgee instance may be created on each story render. If Storybook re‑invokes the decorator frequently (e.g. on control changes), this could mean repeated initialization and potential plugin re‑registration. If Tolgee’s APIs expect a longer‑lived singleton, you might consider memoizing the instance or managing it via a React hook with proper cleanup.Functionally this is fine as‑is; the lifecycle consideration is more of a performance/behavior nuance.
storybook-tolgee-addon/src/decorators/helpers.ts (1)
19-97: Helpers are consistent; optional note onavailableLocalesfallbackThe helper layer looks solid:
RequireLanguageNoDefaultandSharedAddonOptionsmatch how the provider passes config.availableLocalessensibly prefers explicitlocales, thenavailableLanguages, then languages inferred fromstaticData.initMenuSwitcheremits a well‑typed event payload, andchangeLanguage’s priority (parameters → globals → config) lines up with the addon semantics.One optional consideration: when neither
locales,availableLanguages, norstaticDataare present,availableLocalesreturns{}, which ultimately hides the menu switcher entirely. That’s probably what you want, but if you ever expect “auto‑detect from config.language only”, you might choose to synthesize a single‑entrylocalesmap instead.Otherwise this helper module looks good.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (5)
e2e/package-lock.jsonis excluded by!**/package-lock.jsonlibrary/package-lock.jsonis excluded by!**/package-lock.jsonpackage-lock.jsonis excluded by!**/package-lock.jsonstorybook-tolgee-addon/package-lock.jsonis excluded by!**/package-lock.jsonwebapp/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (79)
.github/workflows/test.yml(7 hunks).gitpod.yml(2 hunks).husky/post-checkout(1 hunks).husky/post-commit(1 hunks)DEVELOPMENT.md(1 hunks)gradle/webapp.gradle(2 hunks)library/.prettierignore(1 hunks)library/.storybook/main.ts(1 hunks)library/.storybook/preview.tsx(1 hunks)library/README.md(1 hunks)library/cspell.config.ts(1 hunks)library/eslint.config.js(1 hunks)library/package.json(1 hunks)library/src/components/MfaBadge/index.tsx(2 hunks)library/src/components/MfaBadge/stories.ts(1 hunks)library/src/components/MuiLocalizationProvider/index.tsx(1 hunks)library/src/components/languages/FlagImage/index.tsx(1 hunks)library/src/components/languages/FlagImage/stories.mdx(1 hunks)library/src/components/languages/FlagImage/stories.ts(1 hunks)library/src/components/languages/FlagImage/utils.ts(1 hunks)library/src/constants/locales.ts(1 hunks)library/src/hooks/useCurrentLanguage.ts(1 hunks)library/tsconfig.build.json(1 hunks)library/tsconfig.json(1 hunks)library/tsconfig.lint.json(1 hunks)library/vite.config.ts(1 hunks)package.json(1 hunks)storybook-tolgee-addon/.gitignore(1 hunks)storybook-tolgee-addon/README.md(1 hunks)storybook-tolgee-addon/cspell.config.ts(1 hunks)storybook-tolgee-addon/eslint.config.js(1 hunks)storybook-tolgee-addon/index.js(1 hunks)storybook-tolgee-addon/manager.js(1 hunks)storybook-tolgee-addon/package.json(1 hunks)storybook-tolgee-addon/prettier.config.ts(1 hunks)storybook-tolgee-addon/preview.js(1 hunks)storybook-tolgee-addon/src/constants.ts(1 hunks)storybook-tolgee-addon/src/decorators/helpers.ts(1 hunks)storybook-tolgee-addon/src/decorators/index.ts(1 hunks)storybook-tolgee-addon/src/decorators/provider.decorator.tsx(1 hunks)storybook-tolgee-addon/src/index.ts(1 hunks)storybook-tolgee-addon/src/manager.ts(1 hunks)storybook-tolgee-addon/src/menuSwitcher.tsx(1 hunks)storybook-tolgee-addon/src/preview.ts(1 hunks)storybook-tolgee-addon/src/types.ts(1 hunks)storybook-tolgee-addon/tsconfig.json(1 hunks)webapp/dataCy.plugin.ts(1 hunks)webapp/package.json(4 hunks)webapp/scripts/prepareEe.js(1 hunks)webapp/scripts/updateBranchInfo.js(1 hunks)webapp/src/GlobalStyles.tsx(1 hunks)webapp/src/ThemeProvider.tsx(3 hunks)webapp/src/component/MuiLocalizationProvider.tsx(1 hunks)webapp/src/component/languages/CircledLanguageIcon.tsx(1 hunks)webapp/src/component/languages/FlagSelector/FlagSelector.tsx(1 hunks)webapp/src/component/languages/FlagSelector/FlagSelectorContent.tsx(1 hunks)webapp/src/component/languages/InlineLanguageIcon.tsx(1 hunks)webapp/src/component/languages/LanguageAutocomplete.tsx(1 hunks)webapp/src/component/languages/LanguageValue.tsx(1 hunks)webapp/src/component/languages/PreparedLanguage.tsx(1 hunks)webapp/src/component/layout/Notifications/TaskItem.tsx(1 hunks)webapp/src/component/layout/TopBar/LanguageMenu.tsx(1 hunks)webapp/src/component/layout/TopBar/TopBar.tsx(0 hunks)webapp/src/component/security/UserMenu/LanguageItem.tsx(1 hunks)webapp/src/custom.d.ts(2 hunks)webapp/src/ee/glossary/components/GlossaryTermPreview.tsx(1 hunks)webapp/src/ee/task/components/TaskLabel.tsx(1 hunks)webapp/src/ee/task/components/taskCreate/TaskPreview.tsx(1 hunks)webapp/src/ee/task/components/taskFilter/TaskFilter.tsx(1 hunks)webapp/src/globalContext/useLayoutService.ts(1 hunks)webapp/src/views/administration/AdministrationUsers.tsx(1 hunks)webapp/src/views/organizations/members/MemberItem.tsx(1 hunks)webapp/src/views/projects/import/component/LanguageSelector.tsx(1 hunks)webapp/src/views/projects/members/component/MemberItem.tsx(1 hunks)webapp/src/views/projects/translations/TranslationsList/TranslationLanguage.tsx(1 hunks)webapp/src/views/projects/translations/TranslationsTable/CellLanguage.tsx(1 hunks)webapp/src/views/projects/translations/cell/styles.ts(1 hunks)webapp/tsconfig.json(1 hunks)webapp/vite.config.ts(2 hunks)
💤 Files with no reviewable changes (1)
- webapp/src/component/layout/TopBar/TopBar.tsx
✅ Files skipped from review due to trivial changes (8)
- storybook-tolgee-addon/.gitignore
- webapp/src/component/languages/LanguageAutocomplete.tsx
- webapp/src/component/languages/InlineLanguageIcon.tsx
- webapp/src/globalContext/useLayoutService.ts
- DEVELOPMENT.md
- .husky/post-commit
- .husky/post-checkout
- storybook-tolgee-addon/preview.js
🚧 Files skipped from review as they are similar to previous changes (5)
- library/tsconfig.lint.json
- library/.prettierignore
- library/.storybook/main.ts
- library/cspell.config.ts
- webapp/src/ThemeProvider.tsx
🧰 Additional context used
📓 Path-based instructions (2)
webapp/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
webapp/**/*.{ts,tsx}: Use TypeScript path aliases (tg.component/, tg.service/, tg.hooks/, tg.views/, tg.globalContext/*) instead of relative imports
After backend API changes, regenerate TypeScript types by runningnpm run schema(andnpm run billing-schemaif applicable) in the webapp directory
Use typed React Query hooks fromuseQueryApi.tsfor API communication, not raw React Query
Use Tolgee-specific hooksuseReportEventanduseReportOncefrom 'tg.hooks/useReportEvent' for business event tracking and analytics
Files:
webapp/src/views/organizations/members/MemberItem.tsxwebapp/src/views/projects/translations/cell/styles.tswebapp/src/component/MuiLocalizationProvider.tsxwebapp/src/views/projects/translations/TranslationsTable/CellLanguage.tsxwebapp/src/ee/glossary/components/GlossaryTermPreview.tsxwebapp/dataCy.plugin.tswebapp/src/custom.d.tswebapp/src/component/languages/CircledLanguageIcon.tsxwebapp/src/ee/task/components/TaskLabel.tsxwebapp/src/views/projects/import/component/LanguageSelector.tsxwebapp/src/views/administration/AdministrationUsers.tsxwebapp/vite.config.tswebapp/src/views/projects/members/component/MemberItem.tsxwebapp/src/component/layout/Notifications/TaskItem.tsxwebapp/src/component/layout/TopBar/LanguageMenu.tsxwebapp/src/component/languages/PreparedLanguage.tsxwebapp/src/component/security/UserMenu/LanguageItem.tsxwebapp/src/component/languages/FlagSelector/FlagSelectorContent.tsxwebapp/src/component/languages/FlagSelector/FlagSelector.tsxwebapp/src/ee/task/components/taskCreate/TaskPreview.tsxwebapp/src/views/projects/translations/TranslationsList/TranslationLanguage.tsxwebapp/src/component/languages/LanguageValue.tsxwebapp/src/ee/task/components/taskFilter/TaskFilter.tsxwebapp/src/GlobalStyles.tsx
webapp/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Always use
data-cyattributes for E2E test selectors, never rely on text content
Files:
webapp/src/views/organizations/members/MemberItem.tsxwebapp/src/component/MuiLocalizationProvider.tsxwebapp/src/views/projects/translations/TranslationsTable/CellLanguage.tsxwebapp/src/ee/glossary/components/GlossaryTermPreview.tsxwebapp/src/component/languages/CircledLanguageIcon.tsxwebapp/src/ee/task/components/TaskLabel.tsxwebapp/src/views/projects/import/component/LanguageSelector.tsxwebapp/src/views/administration/AdministrationUsers.tsxwebapp/src/views/projects/members/component/MemberItem.tsxwebapp/src/component/layout/Notifications/TaskItem.tsxwebapp/src/component/layout/TopBar/LanguageMenu.tsxwebapp/src/component/languages/PreparedLanguage.tsxwebapp/src/component/security/UserMenu/LanguageItem.tsxwebapp/src/component/languages/FlagSelector/FlagSelectorContent.tsxwebapp/src/component/languages/FlagSelector/FlagSelector.tsxwebapp/src/ee/task/components/taskCreate/TaskPreview.tsxwebapp/src/views/projects/translations/TranslationsList/TranslationLanguage.tsxwebapp/src/component/languages/LanguageValue.tsxwebapp/src/ee/task/components/taskFilter/TaskFilter.tsxwebapp/src/GlobalStyles.tsx
🧠 Learnings (11)
📓 Common learnings
Learnt from: zomp
Repo: tolgee/tolgee-platform PR: 3327
File: library/.storybook/preview.tsx:1-30
Timestamp: 2025-11-29T10:52:15.525Z
Learning: In Storybook 10.x, the main `storybook` package provides subpath exports like `storybook/test`, `storybook/actions`, etc. The correct triple-slash types reference for Storybook test utilities is `/// <reference types="storybook/test" />`, not `storybook/test`.
📚 Learning: 2025-11-28T15:12:44.060Z
Learnt from: CR
Repo: tolgee/tolgee-platform PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T15:12:44.060Z
Learning: Applies to webapp/**/*.{ts,tsx} : Use TypeScript path aliases (tg.component/*, tg.service/*, tg.hooks/*, tg.views/*, tg.globalContext/*) instead of relative imports
Applied to files:
webapp/src/views/organizations/members/MemberItem.tsxwebapp/src/component/MuiLocalizationProvider.tsxwebapp/src/views/projects/translations/TranslationsTable/CellLanguage.tsxwebapp/src/ee/glossary/components/GlossaryTermPreview.tsxwebapp/dataCy.plugin.tswebapp/src/custom.d.tswebapp/src/component/languages/CircledLanguageIcon.tsxwebapp/src/ee/task/components/TaskLabel.tsxlibrary/tsconfig.jsonwebapp/src/views/projects/import/component/LanguageSelector.tsxwebapp/src/views/administration/AdministrationUsers.tsxlibrary/vite.config.tswebapp/vite.config.tswebapp/src/views/projects/members/component/MemberItem.tsxwebapp/src/component/layout/Notifications/TaskItem.tsxwebapp/src/component/layout/TopBar/LanguageMenu.tsxwebapp/scripts/prepareEe.jswebapp/src/component/languages/PreparedLanguage.tsxwebapp/src/component/security/UserMenu/LanguageItem.tsxwebapp/src/component/languages/FlagSelector/FlagSelectorContent.tsxwebapp/src/component/languages/FlagSelector/FlagSelector.tsxwebapp/src/ee/task/components/taskCreate/TaskPreview.tsxstorybook-tolgee-addon/tsconfig.jsonwebapp/tsconfig.jsonwebapp/src/views/projects/translations/TranslationsList/TranslationLanguage.tsxwebapp/src/component/languages/LanguageValue.tsxwebapp/src/ee/task/components/taskFilter/TaskFilter.tsxlibrary/src/components/languages/FlagImage/index.tsxlibrary/.storybook/preview.tsxlibrary/README.md
📚 Learning: 2025-06-16T20:27:09.537Z
Learnt from: cyyynthia
Repo: tolgee/tolgee-platform PR: 1987
File: email/package.json:38-41
Timestamp: 2025-06-16T20:27:09.537Z
Learning: Node.js v16.9.0+ supports wildcard subpath patterns in the "exports" field of package.json. Patterns like "./components/*.ts": "./components/*.ts" are valid syntax and are the recommended approach for exposing multiple files. This replaced the deprecated folder export syntax.
Applied to files:
storybook-tolgee-addon/manager.jswebapp/scripts/updateBranchInfo.jsstorybook-tolgee-addon/index.jswebapp/dataCy.plugin.tslibrary/tsconfig.jsonlibrary/package.jsonstorybook-tolgee-addon/src/index.tswebapp/vite.config.tswebapp/scripts/prepareEe.jsstorybook-tolgee-addon/tsconfig.jsonwebapp/tsconfig.json
📚 Learning: 2025-11-29T10:52:15.525Z
Learnt from: zomp
Repo: tolgee/tolgee-platform PR: 3327
File: library/.storybook/preview.tsx:1-30
Timestamp: 2025-11-29T10:52:15.525Z
Learning: In Storybook 10.x, the main `storybook` package provides subpath exports like `storybook/test`, `storybook/actions`, etc. The correct triple-slash types reference for Storybook test utilities is `/// <reference types="storybook/test" />`, not `storybook/test`.
Applied to files:
storybook-tolgee-addon/index.jslibrary/tsconfig.jsonstorybook-tolgee-addon/src/index.tslibrary/src/components/MfaBadge/stories.tslibrary/src/components/languages/FlagImage/stories.tsstorybook-tolgee-addon/src/types.tsstorybook-tolgee-addon/tsconfig.jsonstorybook-tolgee-addon/package.jsonlibrary/.storybook/preview.tsxlibrary/README.md
📚 Learning: 2025-11-28T15:12:44.060Z
Learnt from: CR
Repo: tolgee/tolgee-platform PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T15:12:44.060Z
Learning: Applies to webapp/**/*.{ts,tsx} : After backend API changes, regenerate TypeScript types by running `npm run schema` (and `npm run billing-schema` if applicable) in the webapp directory
Applied to files:
webapp/dataCy.plugin.tswebapp/src/custom.d.tslibrary/tsconfig.jsonwebapp/tsconfig.jsonwebapp/package.json
📚 Learning: 2025-11-28T15:12:44.060Z
Learnt from: CR
Repo: tolgee/tolgee-platform PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T15:12:44.060Z
Learning: Applies to webapp/**/*.{ts,tsx} : Use Tolgee-specific hooks `useReportEvent` and `useReportOnce` from 'tg.hooks/useReportEvent' for business event tracking and analytics
Applied to files:
webapp/src/custom.d.tswebapp/src/ee/task/components/TaskLabel.tsxlibrary/tsconfig.jsonwebapp/src/component/layout/Notifications/TaskItem.tsxlibrary/src/hooks/useCurrentLanguage.tswebapp/src/ee/task/components/taskCreate/TaskPreview.tsxstorybook-tolgee-addon/tsconfig.jsonwebapp/src/ee/task/components/taskFilter/TaskFilter.tsxlibrary/.storybook/preview.tsxlibrary/README.md
📚 Learning: 2025-11-28T15:12:44.060Z
Learnt from: CR
Repo: tolgee/tolgee-platform PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T15:12:44.060Z
Learning: Applies to backend/**/*.kt : Run `./gradlew ktlintFormat` before committing code
Applied to files:
.github/workflows/test.yml
📚 Learning: 2025-11-28T15:12:44.060Z
Learnt from: CR
Repo: tolgee/tolgee-platform PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T15:12:44.060Z
Learning: Applies to webapp/**/*.tsx : Always use `data-cy` attributes for E2E test selectors, never rely on text content
Applied to files:
library/.storybook/preview.tsx
📚 Learning: 2025-11-28T15:12:44.060Z
Learnt from: CR
Repo: tolgee/tolgee-platform PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T15:12:44.060Z
Learning: Applies to webapp/**/*.{ts,tsx} : Use typed React Query hooks from `useQueryApi.ts` for API communication, not raw React Query
Applied to files:
library/.storybook/preview.tsx
📚 Learning: 2025-11-28T15:12:44.060Z
Learnt from: CR
Repo: tolgee/tolgee-platform PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T15:12:44.060Z
Learning: Applies to e2e/cypress/**/*.ts : Use typed `data-cy` helpers like `gcy('...')` or `cy.gcy('...')` in E2E tests, referencing types from e2e/cypress/support/dataCyType.d.ts
Applied to files:
library/.storybook/preview.tsx
📚 Learning: 2025-10-15T13:15:17.009Z
Learnt from: dkrizan
Repo: tolgee/tolgee-platform PR: 3216
File: webapp/src/ee/billing/administration/subscriptionPlans/migration/general/PlanMigrationRecordList.tsx:8-8
Timestamp: 2025-10-15T13:15:17.009Z
Learning: In the tolgee-platform repository, when reviewing webapp code, check `webapp/package.json` for dependencies rather than the root `package.json`, as this is a monorepo structure where the webapp has its own package configuration.
Applied to files:
webapp/package.json
🧬 Code graph analysis (12)
library/src/components/MuiLocalizationProvider/index.tsx (2)
library/src/hooks/useCurrentLanguage.ts (1)
useCurrentLanguage(4-7)library/src/constants/locales.ts (1)
locales(11-75)
webapp/vite.config.ts (1)
webapp/scripts/prepareEe.js (1)
__dirname(9-9)
storybook-tolgee-addon/src/decorators/provider.decorator.tsx (1)
storybook-tolgee-addon/src/decorators/helpers.ts (5)
SharedAddonOptions(27-32)RequireLanguageNoDefault(20-25)initMenuSwitcher(52-63)initTolgee(65-82)changeLanguage(84-97)
library/src/components/MfaBadge/stories.ts (1)
library/src/components/MfaBadge/index.tsx (1)
MfaBadge(38-57)
library/src/hooks/useCurrentLanguage.ts (1)
library/src/constants/locales.ts (1)
locales(11-75)
storybook-tolgee-addon/src/manager.ts (2)
storybook-tolgee-addon/src/constants.ts (3)
ADDON_ID(1-1)TOOL_ID(2-2)PARAM_KEY(4-4)storybook-tolgee-addon/src/menuSwitcher.tsx (1)
MenuSwitcher(36-139)
storybook-tolgee-addon/src/preview.ts (2)
storybook-tolgee-addon/src/types.ts (1)
TolgeeAddonGlobals(25-28)storybook-tolgee-addon/src/constants.ts (1)
GLOBAL_KEY(3-3)
library/src/components/languages/FlagImage/stories.ts (1)
library/src/components/languages/FlagImage/index.tsx (1)
FlagImage(21-30)
storybook-tolgee-addon/src/types.ts (1)
storybook-tolgee-addon/src/constants.ts (4)
PARAM_KEY(4-4)PARAM_DISABLE_KEY(6-6)PARAM_LANGUAGE_KEY(5-5)GLOBAL_KEY(3-3)
storybook-tolgee-addon/src/menuSwitcher.tsx (3)
storybook-tolgee-addon/src/types.ts (2)
TolgeeAddonParameters(15-23)TolgeeAddonState(10-13)storybook-tolgee-addon/src/constants.ts (6)
PARAM_KEY(4-4)PARAM_LANGUAGE_KEY(5-5)PARAM_DISABLE_KEY(6-6)GLOBAL_KEY(3-3)LANGUAGES_CONFIG_EVENT(7-7)TOOL_ID(2-2)library/src/constants/locales.ts (1)
locales(11-75)
library/.storybook/preview.tsx (5)
webapp/scripts/updateBranchInfo.js (1)
branchName(7-9)storybook-tolgee-addon/src/decorators/provider.decorator.tsx (1)
withTolgeeProvider(33-65)library/src/components/MuiLocalizationProvider/index.tsx (1)
MuiLocalizationProvider(7-19)library/src/constants/locales.ts (1)
locales(11-75)webapp/src/ThemeProvider.tsx (2)
ThemeProvider(330-362)getTheme(64-315)
storybook-tolgee-addon/src/decorators/helpers.ts (3)
storybook-tolgee-addon/src/types.ts (2)
Locales(8-8)TolgeeAddonState(10-13)library/src/constants/locales.ts (1)
locales(11-75)storybook-tolgee-addon/src/constants.ts (4)
LANGUAGES_CONFIG_EVENT(7-7)PARAM_KEY(4-4)PARAM_LANGUAGE_KEY(5-5)GLOBAL_KEY(3-3)
🪛 LanguageTool
library/README.md
[grammar] ~15-~15: Use a hyphen to join words.
Context: ...olgee library. ### Setup Storybook One time Storybook setup. Install dependenc...
(QB_NEW_EN_HYPHEN)
[grammar] ~28-~28: Ensure spelling is correct
Context: ...ncies have to be also installed and the addon built to work properly: ```shell cd st...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[style] ~54-~54: For conciseness, consider replacing this expression with an adverb.
Context: ...bappfromlibrary` might not be safe. At the moment, only a few prefixes are predefined in ...
(AT_THE_MOMENT)
[locale-violation] ~65-~65: In American English, “take a look” is more commonly used.
Context: ...vidual story level. - For inspiration have a look on [MfaBadge/stories.ts](./src/componen...
(HAVE_A_LOOK)
[locale-violation] ~66-~66: In American English, “take a look” is more commonly used.
Context: ...s/MfaBadge/stories.ts). - For details have a look on [CSF docs](https://storybook.js.org/...
(HAVE_A_LOOK)
[locale-violation] ~70-~70: In American English, “take a look” is more commonly used.
Context: ...nd other MDX files. - For inspiration have a look on [FlagImage/stories.mdx](./src/compon...
(HAVE_A_LOOK)
[locale-violation] ~71-~71: In American English, “take a look” is more commonly used.
Context: ...FlagImage/stories.mdx). - For details have a look on [MDX docs](https://storybook.js.org/...
(HAVE_A_LOOK)
storybook-tolgee-addon/README.md
[grammar] ~9-~9: Ensure spelling is correct
Context: ....io/). ## Getting Started ### Add the addon to an existing Storybook ```bash npx s...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~15-~15: Ensure spelling is correct
Context: .../storybook-addon ``` ### Configure the addon In .storybook/preview.js, set the Tolg...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🔇 Additional comments (57)
.gitpod.yml (1)
14-14: Correct setup for library dependency installation.Installing library dependencies via
npm --prefix ../library cibefore webapp dependencies is the right approach. The--prefixflag correctly handles the nested directory structure, and the execution order ensures library dependencies are available when webapp dependencies are resolved.webapp/src/ee/glossary/components/GlossaryTermPreview.tsx (1)
20-20: Import migration to shared library looks correctSwitching
FlagImageto@tginternal/library/components/languages/FlagImageis consistent with the new component library usage and doesn’t alter runtime behavior. The component usage below remains compatible, so this change looks good.storybook-tolgee-addon/prettier.config.ts (1)
1-7: LGTM!The Prettier configuration is well-structured and follows best practices. The use of type-only imports and the
satisfies Configpattern provides type safety while keeping the code clean and modern.webapp/src/GlobalStyles.tsx (1)
1-1: LGTM! Correct MUI v5 import pattern.The switch to Material-UI's
GlobalStylesanduseThemehook follows MUI v5 best practices for theme-aware styling.storybook-tolgee-addon/eslint.config.js (1)
1-71: Appropriate plugin selection for the addon package.The absence of
react-refreshandstorybookESLint plugins in this config is appropriate since this is the Storybook addon package itself, not a consumer application.storybook-tolgee-addon/cspell.config.ts (1)
1-13: CSpell addon config is correct and follows recommended patterns.Using
defineConfigfromcspellwithexport defaultis the modern, recommended TypeScript configuration pattern. All options are valid: version 0.2, language en, minWordLength 3, custom word lists, ignore patterns, and the/dist/**/*ignorePaths glob are all properly configured per current cspell documentation.webapp/src/custom.d.ts (2)
2-2: Type-only MUI palette imports are appropriate hereUsing
import type { PaletteColor, PaletteColorOptions } from '@mui/material';in this.d.tskeeps the file purely type-level and avoids bundlers trying to resolve a runtime MUI import from your custom typings. This is a good, non-breaking cleanup.If you haven’t already, quickly confirm that
PaletteColorandPaletteColorOptionsare exported from the@mui/materialentrypoint in your current MUI version (vs. only from@mui/material/styles) to avoid any future type resolution surprises.
23-23: Explicit relative import forfigmaThemeis saferChanging the import to
./figmaThememakes the module resolution explicit and local, removing the reliance on a bare specifier that might depend on custom aliases. This should make the typings more robust to tooling and config changes.Just verify that this
.d.tsfile sits next tofigmaTheme(same directory) in all environments where it’s used so the relative path always resolves as intended.webapp/src/component/layout/TopBar/LanguageMenu.tsx (1)
6-6: LGTM! Import path migrated to library package.The import has been correctly updated to use the centralized locale definitions from the new
@tginternal/librarypackage. The usage oflocales[language]throughout the component remains compatible.webapp/tsconfig.json (1)
14-14: LGTM! Updated to bundler-aware module resolution.Switching from
"node"to"bundler"is appropriate for Vite-based projects and enables better handling of path aliases like@tginternal/library/*. This aligns with the broader module resolution strategy across the repository.webapp/scripts/updateBranchInfo.js (1)
1-4: LGTM! Migrated to node: protocol for core modules.The migration to
node:prefixed imports for core modules (child_process,fs,path,url) follows modern Node.js best practices and clearly distinguishes core modules from user modules. The functional logic remains unchanged.webapp/dataCy.plugin.ts (1)
3-4: LGTM! Consistent node: prefix migration.The update to
node:pathandnode:fsis consistent with the repository-wide migration to node: prefixed core module imports. No functional changes to the plugin logic.library/src/components/MuiLocalizationProvider/index.tsx (1)
1-19: LGTM! Well-implemented localization provider.The component correctly:
- Uses
useCurrentLanguagewith a safe default to'en'- Leverages the
satisfiesoperator for type-safe default value- Passes the appropriate
dateFnsLocaleto MUI'sLocalizationProviderThe implementation ensures
languageis always a valid key in thelocalesobject, makinglocales[language].dateFnsLocaletype-safe.webapp/scripts/prepareEe.js (1)
4-17: LGTM! Consistent migration to node: prefixed imports.The changes properly migrate to
node:prefixed core module imports and update the import destructuring accordingly (dirname,joinfromnode:path). The logic for creating EE/OSS symlinks remains functionally identical.library/README.md (3)
45-45: LGTM! URL properly formatted.The localhost URL is correctly wrapped in angle brackets following Markdown conventions.
51-51: LGTM! File extension corrected.The file extension correctly references
utils.tsfor TypeScript helper functions.
1-71: Comprehensive documentation for library and Storybook setup.The README provides clear guidance on:
- Storybook setup and usage
- Component migration practices (boy scout rule, directory structure)
- Import path conventions (
@tginternal/library/for webapp,lib.for library)- Documentation standards (CSF and MDX)
The documentation will help developers contribute to the library consistently.
library/src/hooks/useCurrentLanguage.ts (1)
1-7: LGTM! Clean and type-safe language hook.The implementation correctly:
- Uses
useTolgee(['language'])to subscribe only to language changes (performance optimization)- Returns a type-safe union of locale keys or
undefined- Uses type-only import for
localesto avoid runtime dependencyThis provides a reusable, strongly-typed utility for accessing the current language across the library and webapp.
library/tsconfig.json (1)
2-33: TS base config and path aliases look consistent for the new libraryThe compiler options, path aliases, and include/exclude sets are coherent with the Vite/React setup and the multi-project structure. The temporary cross-reference paths to the webapp (
tg.fixtures/*,../webapp/src/custom.d.ts) are clearly marked with TODOs, so no changes needed now.Based on learnings, the alias design should work well alongside future
exports-based subpath patterns once you decouple the webapp references.library/tsconfig.build.json (1)
1-16: Declaration-only build config is set up correctlyExtending the base tsconfig and overriding to emit declarations only into
./distwithrootDir: "./src"and story/MDX excludes is a solid setup for publishing types alongside the Vite-built JS.webapp/vite.config.ts (1)
1-71: Vite config changes correctly wire the webapp to the new libraryThe updated
viteTsconfigPathsprojects,@tginternal/libraryalias, dedupe list, andserver.fs.allowintegration all look coherent for consuming the library source in dev/build. Thesatisfies UserConfigFntyping is a nice extra safety without changing runtime behavior.gradle/webapp.gradle (1)
3-42: Gradle tasks cleanly integrate library dependencies into the webapp buildIntroducing
libraryPath,installLibraryDeps, and reusingwebappPathfor inputs/outputs makes the Gradle setup clearer and ensures the webapp build won’t run without both library and webappnode_modules(while still honoringSKIP_WEBAPP_BUILD). This looks like a solid, low-friction way to bring the library into the existing pipeline.webapp/src/component/languages/LanguageValue.tsx (1)
6-16: LanguageValue correctly migrates to the library FlagImageThe import and usage are correct. The library's
FlagImagecomponent acceptsflagEmoji(required string) and inherits all standard HTML img attributes includingwidthviaImgHTMLAttributes<HTMLImageElement>. The component definition at./library/src/components/languages/FlagImage/index.tsxconfirms the props align with the usage in line 15. The file also follows coding guidelines: uses the correct path alias (tg.service/apiSchema.generated), contains no relative imports, and properly types the language schema from generated API types.webapp/src/views/projects/translations/TranslationsTable/CellLanguage.tsx (1)
6-6: LGTM - Import path migrated to shared library.The FlagImage import has been successfully migrated from the internal webapp path to the shared
@tginternal/librarypackage. Component usage remains unchanged.webapp/src/views/projects/import/component/LanguageSelector.tsx (1)
23-23: LGTM - Import path migrated to shared library.Consistent with the broader migration effort to consolidate shared UI components in the
@tginternal/librarypackage.webapp/src/ee/task/components/TaskLabel.tsx (1)
2-2: LGTM - Import path migrated to shared library.FlagImage successfully migrated to the shared library package with no changes to component usage.
webapp/src/views/projects/members/component/MemberItem.tsx (1)
18-18: LGTM - Import path migrated to shared library.MfaBadge component successfully migrated to the shared library package, consistent with the broader component consolidation effort.
webapp/src/component/languages/FlagSelector/FlagSelectorContent.tsx (1)
4-7: LGTM - Import path migrated to shared library.Both the FlagImage component and FlagInfo type have been successfully migrated to the shared library package, maintaining type safety throughout the component.
webapp/src/views/administration/AdministrationUsers.tsx (1)
13-13: LGTM - Import path migrated to shared library.MfaBadge import successfully migrated to the shared library package.
storybook-tolgee-addon/manager.js (1)
1-1: LGTM - Standard package entry point pattern.Re-exporting from the built distribution is a standard and recommended pattern for package entry points, enabling clean separation between source and built code.
webapp/src/ee/task/components/taskCreate/TaskPreview.tsx (1)
6-6: Library imports are properly configured and will resolve correctly.The FlagImage component exists at
library/src/components/languages/FlagImageand the library'spackage.jsonexports are properly configured with wildcard patterns that match the import path@tginternal/library/components/languages/FlagImage. The import will resolve correctly once the library is built. The long import path is noted as a potential future optimization but does not require action in this iteration.webapp/src/component/MuiLocalizationProvider.tsx (1)
5-5: LGTM! Centralized locales import.The migration to the library package for the locales constant is clean and maintains the same usage pattern.
webapp/src/views/organizations/members/MemberItem.tsx (1)
23-23: LGTM! MfaBadge migrated to library.The import path update is consistent with the library migration pattern across the codebase.
webapp/src/component/languages/CircledLanguageIcon.tsx (1)
4-4: LGTM! FlagImage migrated to library.The import path change aligns with the broader library migration and maintains the same component API.
webapp/src/component/security/UserMenu/LanguageItem.tsx (1)
10-10: LGTM! Eliminates deep relative import.The library path is more maintainable than the previous
../../../localesrelative import.storybook-tolgee-addon/index.js (1)
1-1: LGTM! Standard package entry point.This re-export pattern is consistent with the other addon entry points (manager.js, preview.js) and is the standard approach for exposing built package exports.
library/src/components/languages/FlagImage/index.tsx (1)
3-3: LGTM! Good separation of concerns.Extracting
getFlagPathto a separate utils module improves code organization while maintaining the same public API.webapp/src/views/projects/translations/TranslationsList/TranslationLanguage.tsx (1)
2-2: LGTM! FlagImage migrated to library.Consistent with the library migration pattern across the codebase.
webapp/src/component/languages/FlagSelector/FlagSelector.tsx (1)
6-6: LGTM! FlagImage migrated to library.The import path change eliminates the relative import and aligns with the library migration strategy.
storybook-tolgee-addon/src/decorators/index.ts (1)
1-1: LGTM!Clean barrel export pattern that properly surfaces the provider decorator API.
webapp/src/ee/task/components/taskFilter/TaskFilter.tsx (1)
11-11: LGTM!FlagImage import successfully migrated to the internal library, consistent with the broader library migration strategy.
storybook-tolgee-addon/src/index.ts (1)
1-1: LGTM!Appropriate barrel export pattern for the package entry point, making the decorators API accessible to consumers.
library/src/components/MfaBadge/index.tsx (2)
2-3: Good MUI import organization.Splitting the imports to use
@mui/material/stylesforstyledfollows MUI best practices and can improve tree-shaking.
35-37: LGTM!Excellent addition of component documentation. The JSDoc clearly explains the component's purpose and behavior, which is valuable for library consumers and Storybook integration.
storybook-tolgee-addon/src/manager.ts (1)
1-15: LGTM!Well-structured Storybook addon registration. The manager correctly:
- Uses the standard Storybook manager API
- Registers as a TOOL type with appropriate match logic (story/docs views)
- Integrates with the MenuSwitcher component for language selection
- Uses consistent constants for IDs and parameter keys
storybook-tolgee-addon/src/preview.ts (1)
1-9: LGTM!Clean implementation of Storybook preview globals for the Tolgee addon. The type intersection properly combines Storybook's base
ProjectAnnotationswith the addon-specificTolgeeAddonGlobals, and initializing the language toundefinedis appropriate for letting stories or the switcher set the value.webapp/src/component/layout/Notifications/TaskItem.tsx (1)
8-8: FlagImage import correctly migrated to shared library.The import has been successfully updated to
@tginternal/library/components/languages/FlagImageas part of the documented component library migration strategy. All FlagImage imports across webapp (16 files) are consistently using the new library path, confirming the migration is complete.package.json (1)
7-7: Cleaner Husky initialization command using npm exec.The updated command uses
npm exec --prefix webappto invoke Husky from the webapp package context, which is more maintainable and idiomatic than directly invoking the binary with a hardcoded path. The--prefix webappflag ensures the correct Husky binary is used from the webapp dependencies and maintains proper context for the initialization.library/package.json (1)
1-98: LGTM!The package manifest is well-structured with appropriate engine constraints, exports patterns using Node.js wildcard subpath patterns, and proper dependency declarations.
storybook-tolgee-addon/README.md (1)
1-93: LGTM!The documentation is clear, comprehensive, and provides good examples for installation, configuration, and usage patterns.
library/.storybook/preview.tsx (2)
8-9: Cross-package imports are appropriately marked as temporary.The imports from
../../webapp/src/create coupling but are acknowledged with a TODO comment and tracking issue #3326. This is acceptable for an initial setup PR.
33-35: No changes needed. ThestaticDataconfiguration correctly passesv.translationsfunctions to Tolgee. @tolgee/react v6 explicitly supports function values instaticDatafor lazy-loading translations via dynamic imports—Tolgee automatically calls these functions and awaits their Promises. The current implementation is correct.Likely an incorrect or invalid review comment.
storybook-tolgee-addon/src/constants.ts (1)
1-7: Constants look consistent and well‑scopedNames and string values line up with how they’re consumed in types/helpers; good centralization for addon keys.
storybook-tolgee-addon/src/menuSwitcher.tsx (1)
36-59: ConfirmuseGlobalstuple shape and lock detectionThe lock logic hinges on
useGlobalsreturning a 3‑tuple where the 3rd element (globalsFromStory) is an object suitable forGLOBAL_KEY in globalsFromStory. If the Storybook version in use only returns[globals, updateGlobals],globalsFromStorywould beundefinedandGLOBAL_KEY in globalsFromStorywould throw at runtime.Please double‑check this against the Storybook manager‑api version you’re targeting and that the 3rd item indeed represents “story‑level globals” as intended.
library/src/components/languages/FlagImage/stories.ts (1)
1-27: FlagImage stories are well‑typed and straightforwardMeta +
StoryObjusage is idiomatic CSF3, and the two stories nicely exercise supported vs unsupported values. No changes needed here.storybook-tolgee-addon/src/types.ts (1)
1-33: Addon type definitions align with constant keys and helpersThe parameter/global/state types line up with the string keys from
constants.tsand the usages in helpers/menu switcher; this should give good type‑safety for Storybook parameters/globals.webapp/package.json (1)
6-8: Verify new Node engine range, local library link, and script dependenciesA few things to double‑check with this package update:
- The
engines.nodeconstraint now targets specific even‑major ranges. Ensure this matches what CI and dev environments actually run; otherwisenpm/pnpmmay warn or refuse install."@tginternal/library": "file:../library"couples the webapp build to the new library. Make sure the library’spackage.jsonand build outputs (especiallybuild:types) are in place before merging, ornpm install/tsccould start failing.schema,billing-schema, andpreparenow refer to.jsscripts instead of.mjsin a"type": "module"package. Confirm those files exist and are valid ESM.tscandtsc:prodnow runnpm run --prefix ../library build:typesfirst. This is good for type availability, but it also means any CI job or local workflow calling these scripts will now fail if the library build breaks.All of this is sensible; just worth verifying the new dependencies and scripts line up with the rest of the repo configuration.
Also applies to: 23-27, 69-88, 107-138
JanCizmar
changed the title
Implementation notes:
npm run storybook.Not implemented:
/library/tsconfig.json,/library/package.json,/library/vite.config.ts) are required when a new directory like/library/src/hooksor subdirectory like/library/src/components/languagesare added. I am considering building the directories directly under/library, soexportsinpackage.json` should not be necessary. Root directory will get messy.@tginternal/libraryin/webapplike@tginternal/library/hooks/useCurrentLanguageis lengthy, a shorter approach is welcome (both tsc and Vite cannot get broken).Summary by CodeRabbit
New Features
Documentation
Configuration
✏️ Tip: You can customize this high-level summary in your review settings.