@focus-reactive/payload-plugin-translator 0.1.0 → 0.1.2

package/README.md

@@ -62,6 +62,7 @@ export default buildConfig({
 
 Configuration for `translatorPlugin()`.
 
+
 | Property              | Type                  | Required | Default        | Description                                                                                                         |
 | --------------------- | --------------------- | -------- | -------------- | ------------------------------------------------------------------------------------------------------------------- |
 | `collections`         | `CollectionConfig[]`  | Yes      | —              | Original collection configs to enable translation for. Must be the same objects passed to `buildConfig`, not slugs. |
@@ -70,6 +71,7 @@ Configuration for `translatorPlugin()`.
 | `access`              | `AccessGuard`         | No       | `undefined`    | Access control function for translation endpoints                                                                   |
 | `basePath`            | `string`              | No       | `'/translate'` | Base path for all API endpoints                                                                                     |
 
+
 ```typescript
 translatorPlugin({
   collections: [Posts, Pages],
@@ -84,12 +86,14 @@ translatorPlugin({
 
 Configuration for `createOpenAIProvider()`.
 
-| Property       | Type                  | Required      | Default         | Description                                |
-| -------------- | --------------------- | ------------- | --------------- | ------------------------------------------ | --------------------------------------- |
-| `apiKey`       | `string`              | Yes           | —               | OpenAI API key                             |
-| `model`        | `string               | ChatModel`    | No              | `'gpt-4o'`                                 | OpenAI model to use for translation     |
-| `systemPrompt` | `SystemPromptBuilder` | No            | Built-in prompt | Custom function to build the system prompt |
-| `dryRun`       | `boolean              | DryRunConfig` | No              | `false`                                    | Simulate translations without API calls |
+
+| Property       | Type                     | Required | Default         | Description                                |
+| -------------- | ------------------------ | -------- | --------------- | ------------------------------------------ |
+| `apiKey`       | `string`                 | Yes      | —               | OpenAI API key                             |
+| `model`        | `string | ChatModel`     | No       | `'gpt-4o'`      | OpenAI model to use for translation        |
+| `systemPrompt` | `SystemPromptBuilder`    | No       | Built-in prompt | Custom function to build the system prompt |
+| `dryRun`       | `boolean | DryRunConfig` | No       | `false`         | Simulate translations without API calls    |
+
 
 ```typescript
 createOpenAIProvider({
@@ -132,11 +136,13 @@ type DryRunConfig = {
 
 Configuration for `createPayloadJobsRunner()`.
 
-| Property    | Type     | Required         | Default                | Description                          |
-| ----------- | -------- | ---------------- | ---------------------- | ------------------------------------ | ------------------------------------------------------- |
-| `taskName`  | `string` | No               | `'translate_document'` | Task name in Payload jobs collection |
-| `queueName` | `string` | No               | `'translations'`       | Queue name for grouping jobs         |
-| `autoRun`   | `false   | { cron, limit }` | No                     | `{ cron: '* * * * *', limit: 50 }`   | Auto-run config, or `false` to disable (for serverless) |
+
+| Property    | Type                      | Required | Default                            | Description                                             |
+| ----------- | ------------------------- | -------- | ---------------------------------- | ------------------------------------------------------- |
+| `taskName`  | `string`                  | No       | `'translate_document'`             | Task name in Payload jobs collection                    |
+| `queueName` | `string`                  | No       | `'translations'`                   | Queue name for grouping jobs                            |
+| `autoRun`   | `false | { cron, limit }` | No       | `{ cron: '* * * * *', limit: 50 }` | Auto-run config, or `false` to disable (for serverless) |
+
 
 ```typescript
 createPayloadJobsRunner({
@@ -153,10 +159,12 @@ createPayloadJobsRunner({
 
 Configuration for `withFieldTranslation()` helper or `field.custom.translateKit`.
 
+
 | Property  | Type      | Required | Default | Description                         |
 | --------- | --------- | -------- | ------- | ----------------------------------- |
 | `exclude` | `boolean` | No       | `false` | Exclude this field from translation |
 
+
 ```typescript
 import { withFieldTranslation } from '@focus-reactive/payload-plugin-translator'
 
@@ -167,11 +175,13 @@ withFieldTranslation({ name: 'sku', type: 'text', localized: true }, { exclude:
 
 When translating, you can choose how to handle existing translations:
 
+
 | Strategy          | Description                                                              |
 | ----------------- | ------------------------------------------------------------------------ |
 | `'overwrite'`     | (Default) Replaces all existing translated content with new translations |
 | `'skip_existing'` | Only translates fields that are empty in the target locale               |
 
+
 ## Important Notes
 
 ### Explicit `localized: true` for nested fields
@@ -280,9 +290,11 @@ Create your own translation provider by implementing the `TranslationProvider` i
 
 #### TranslationProvider Interface
 
-| Method      | Signature                                                                                       | Description |
-| ----------- | ----------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------- |
-| `translate` | `(content: TranslationInput, sourceLng: string, targetLng: string) => Promise<TranslationOutput | null>`      | Translates content from source to target language |
+
+| Method      | Signature                                                                                                | Description                                       |
+| ----------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
+| `translate` | `(content: TranslationInput, sourceLng: string, targetLng: string) => Promise<TranslationOutput | null>` | Translates content from source to target language |
+
 
 **Important:** The numeric indices in `TranslationInput` must be preserved exactly in `TranslationOutput`. Each index maps to a specific field in the document structure, so the provider must return the same keys with translated values.
 
@@ -408,3 +420,4 @@ Planned features for future releases:
 - **Global translation dashboard** — Translate all collections at once from a single interface, with progress tracking across the entire CMS
 - **Vercel Cron Jobs runner** — Built-in runner for seamless Vercel/serverless deployments without manual API route configuration
 - Auto-translate on source change — Automatically trigger translation when the default locale content is updated
+

package/dist/client/app/cache/CacheProvider.export.js

@@ -1,6 +1,6 @@
 import { clientComponentPath } from '../../shared/utils/componentPath';
 export class CacheProviderExport {
-    path = clientComponentPath('app/cache/CacheProvider.tsx');
+    path = clientComponentPath('app/cache/CacheProvider');
     serverProps;
     constructor(basePath){
         this.serverProps = {

package/dist/client/entities/translation/ui/CompletedTranslationStatus/styles.module.scss

@@ -0,0 +1,3 @@
+.indicator {
+  font-size: 1.3rem;
+}

package/dist/client/entities/translation/ui/FailedTranslationStatus/styles.module.scss

@@ -0,0 +1,3 @@
+.indicator {
+  font-size: 1.3rem;
+}

package/dist/client/entities/translation/ui/TranslationDirection/styles.module.scss

@@ -0,0 +1,16 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.locale {
+  color: var(--theme-text, #333);
+}
+
+.arrow {
+  display: flex;
+  align-items: center;
+}

package/dist/client/features/collection-translation-form/ui/styles.module.scss

@@ -0,0 +1,31 @@
+.fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  border-width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.row {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.75rem;
+}
+
+.locale-group {
+  display: flex;
+  gap: 1rem;
+}
+
+.select-locale-field {
+  min-width: 70px;
+}
+
+.strategy-field {
+  min-width: 150px;
+}
+
+.submit-button {
+  width: 100%;
+}

package/dist/client/features/collection-translation-popup/ui/styles.module.scss

@@ -0,0 +1,18 @@
+.popup-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem 1rem;
+  max-width: 350px;
+}
+
+.popup-trigger-button {
+  font-size: 1.3rem;
+  display: flex;
+  gap: 0.25rem;
+}
+
+.arrow {
+  font-size: 1rem;
+  font-weight: bold;
+}

package/dist/client/features/collection-translation-progress/ui/styles.module.scss

@@ -0,0 +1,8 @@
+.container {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.status-indicator {
+  flex-grow: 1;
+}

package/dist/client/features/open-document-translation-popup/ui/styles.module.scss

@@ -0,0 +1,11 @@
+.popup-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem 1rem;
+  min-width: 270px;
+}
+
+.popup-trigger-button {
+  font-size: 1.3rem;
+}

package/dist/client/features/translate-document-form/ui/styles.module.scss

@@ -0,0 +1,18 @@
+.fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  border-width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.row {
+  display: flex;
+  gap: 1rem;
+}
+
+.submit-button {
+  margin: 0;
+  width: 100%;
+}

package/dist/client/shared/ui/Alert/styles.module.scss

@@ -0,0 +1,31 @@
+.alert {
+  padding: 12px 16px;
+  border-radius: 6px;
+  border: 1px solid;
+  font-size: 14px;
+  line-height: 1.5;
+  margin: 8px 0;
+
+  &--transparent {
+    background-color: transparent;
+    color: var(--theme-text);
+  }
+
+  &--info {
+    background-color: var(--color-blue-50);
+    border-color: var(--color-blue-400);
+    color: var(--color-blue-700);
+  }
+
+  &--warning {
+    background-color: var(--color-warning-50);
+    border-color: var(--color-warning-400);
+    color: var(--color-warning-700);
+  }
+
+  &--error {
+    background-color: var(--color-error-50);
+    border-color: var(--color-error-400);
+    color: var(--color-error-700);
+  }
+}

package/dist/client/shared/ui/Button/styles.module.scss

@@ -0,0 +1,103 @@
+.button {
+  border-radius: var(--style-radius-m);
+  appearance: none;
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  transition: background 0.1sease-in-out, opacity 0.2sease-in-out, border-color 0.2sease-in-out;
+  background: none;
+  padding-block: 0.25rem;
+  padding-inline: var(--padding-inline);
+  height: var(--height);
+  border: none;
+  width: var(--button-width);
+}
+
+.icon-button {
+  width: var(--width);
+  padding-inline: 0;
+}
+
+.start-content {
+  display: flex;
+  margin-right: calc(var(--base) / 2);
+}
+
+.outlined {
+  border: 1px solid var(--theme-elevation-200);
+
+  &:hover:not(:disabled),
+  &:focus {
+    border-color: var(--theme-elevation-100);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--theme-elevation-200);
+    color: var(--theme-elevation-800);
+  }
+}
+
+.filled {
+  color: var(--theme-elevation-0);
+  background-color: var(--theme-elevation-800);
+
+  &:focus,
+  &:hover:not(:disabled) {
+    background-color: var(--theme-elevation-600);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--theme-elevation-200);
+    color: var(--theme-elevation-800);
+  }
+}
+
+.unstyled {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  appearance: none;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &:hover:not(:disabled),
+  &:focus {
+    background-color: transparent
+  }
+}
+
+.transparent {
+  background-color: transparent;
+
+  &:hover:not(:disabled),
+  &:focus {
+    background-color: var(--theme-elevation-50);
+  }
+}
+
+.light {
+  background-color: var(--theme-elevation-100);
+
+  &:hover:not(:disabled),
+  &:focus {
+    background-color: var(--theme-elevation-150);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--theme-elevation-50);
+    color: var(--theme-elevation-400);
+  }
+}

package/dist/client/shared/ui/Checkbox/styles.module.scss

@@ -0,0 +1,17 @@
+.checkbox {
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--theme-elevation-800);
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &--error {
+    outline: 2px solid var(--theme-error-500);
+    outline-offset: 2px;
+  }
+}

package/dist/client/shared/ui/ColorIndicator/styles.module.scss

@@ -0,0 +1,37 @@
+.indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.blue-indicator {
+  background-color: #3b82f6;
+}
+
+.green-indicator {
+  background-color: #10b981;
+}
+
+.red-indicator {
+  background-color: var(--theme-error-600);
+}
+
+.gray-indicator {
+  background-color: var(--color-base-250);
+}
+
+.animated {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}

package/dist/client/shared/ui/Description/styles.module.scss

@@ -0,0 +1,14 @@
+.description {
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+  line-height: 1.4;
+}
+
+.default {
+  color: var(--theme-elevation-600);
+}
+
+.error {
+  color: var(--theme-error-600);
+  font-weight: 500;
+}

package/dist/client/shared/ui/Divider/styles.module.scss

@@ -0,0 +1,56 @@
+.divider {
+  flex-shrink: 0;
+  border: none;
+  margin: 0;
+
+  &.horizontal {
+    width: 100%;
+  }
+
+  &.vertical {
+    height: 100%;
+    align-self: stretch;
+  }
+
+  &.sm {
+    &.horizontal {
+      height: 1px;
+    }
+
+    &.vertical {
+      width: 1px;
+    }
+  }
+
+  &.md {
+    &.horizontal {
+      height: 2px;
+    }
+
+    &.vertical {
+      width: 2px;
+    }
+  }
+
+  &.lg {
+    &.horizontal {
+      height: 3px;
+    }
+
+    &.vertical {
+      width: 3px;
+    }
+  }
+
+  &.light {
+    background-color: var(--theme-elevation-150);
+  }
+
+  &.medium {
+    background-color: var(--theme-elevation-200);
+  }
+
+  &.dark {
+    background-color: var(--theme-elevation-300);
+  }
+}

package/dist/client/shared/ui/Label/styles.module.scss

@@ -0,0 +1,12 @@
+.label {
+  display: flex;
+  flex-direction: column;
+  color: var(--theme-elevation-800);
+  font-family: var(--font-body);
+  font-size: var(--base-body-size);
+  width: 100%;
+
+  &__text {
+    padding-bottom: 5px;
+  }
+}

package/dist/client/shared/ui/Loading/styles.module.scss

@@ -0,0 +1,141 @@
+.loading-overlay {
+  isolation: isolate;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-direction: column;
+  pointer-events: none;
+  transition-property: left, width;
+  transition: 250ms ease;
+
+  &.loading-overlay--entering {
+    opacity: 1;
+    animation: fade-in ease;
+    pointer-events: all;
+  }
+
+  &.loading-overlay--exiting {
+    opacity: 0;
+    animation: fade-out ease;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.85;
+    z-index: -1;
+  }
+
+  &__bars {
+    display: grid;
+    gap: 7px;
+    align-items: center;
+
+    &_small {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    &_medium {
+      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    }
+  }
+
+  &__bar {
+    background-color: currentColor;
+
+    &_size-small {
+      height: 10px;
+      width: 2px;
+    }
+
+    &_size-medium {
+      height: 15px;
+      width: 2px;
+    }
+
+    &:nth-child(1) {
+      transform: translateY(0);
+      animation: animate-bar--odd 1.25s infinite;
+    }
+
+    &:nth-child(2) {
+      transform: translateY(-2px);
+      animation: animate-bar--even 1.25s infinite;
+    }
+
+    &:nth-child(3) {
+      transform: translateY(0);
+      animation: animate-bar--odd 1.25s infinite;
+    }
+
+    &:nth-child(4) {
+      transform: translateY(-2px);
+      animation: animate-bar--even 1.25s infinite;
+    }
+
+    &:nth-child(5) {
+      transform: translateY(0);
+      animation: animate-bar--odd 1.25s infinite;
+    }
+  }
+
+  &__text {
+    margin-top: base(0.75);
+    text-transform: uppercase;
+    font-family: var(--font-body);
+    font-size: base(0.65);
+    letter-spacing: 3px;
+  }
+}
+
+@keyframes animate-bar--even {
+  0% {
+    transform: translateY(2px);
+  }
+
+  50% {
+    transform: translateY(-2px);
+  }
+
+  100% {
+    transform: translateY(2px);
+  }
+}
+
+@keyframes animate-bar--odd {
+  0% {
+    transform: translateY(-2px);
+  }
+
+  50% {
+    transform: translateY(2px);
+  }
+
+  100% {
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

package/dist/client/shared/ui/Popup/styles.module.scss

@@ -0,0 +1,7 @@
+.popover {
+  box-shadow: 0 2px 16px -2px #0003;
+  background: var(--theme-input-bg);
+  color: var(--theme-text);
+  border-radius: var(--style-radius-m);
+  padding: 0.5rem;
+}