Merged
Conversation
Add template management API to save and restore editor transformation stacks: - Add getTemplate() and loadTemplate() methods to ImageKitEditorRef - Implement v1 versioning system for backward compatibility - Export TRANSFORMATION_STATE_VERSION constant Add comprehensive testing infrastructure: - Add backward compatibility test suite with v1 template fixtures - Configure Vitest with coverage reporting - Add test step to CI workflow Update documentation: - Add template management guide with examples - Document version compatibility approach - Add TypeScript usage examples Other changes: - Bump version from 2.1.0 to 2.2.0 - Add coverage directory to .gitignore - Update React example with template save/load demo
…on on dropdown and library
…dropdown and library
hrhv
force-pushed
the
creative-templates
branch
from
571174f to
333031c
Compare
…utton when there is no templateId, fix flashing success template sync state before failure, hover css for settings modal action buttons
Contributor
There was a problem hiding this comment.
Pull request overview
Adds end-to-end “template workflows” to the editor (template storage integration, permissions, UI, and syncing state), alongside a Vitest test setup and expanded test coverage around schema + template utilities.
Changes:
- Introduces template storage + permissions contexts, sync/versioning logic, and new header/sidebar/template-library UI flows.
- Adds Vitest configuration, Turbo test tasks, CI test/coverage execution, and a large set of unit/component tests.
- Enhances utils for template name normalization/truncation and adjusts schema parsing for legacy flip values.
Reviewed changes
Copilot reviewed 51 out of 54 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| turbo.json | Adds Turbo tasks for test and test:coverage. |
| packages/imagekit-editor/package.json | Bumps version and adds a placeholder test script. |
| packages/imagekit-editor-dev/vite.config.ts | Configures Vitest + coverage thresholds. |
| packages/imagekit-editor-dev/src/utils/templateNameFormatting.test.ts | Tests HTML-entity normalization for template names. |
| packages/imagekit-editor-dev/src/utils/templateList.ts | Adds template sorting/filtering/search helpers. |
| packages/imagekit-editor-dev/src/utils/templateList.test.ts | Tests template list utility behavior. |
| packages/imagekit-editor-dev/src/utils/index.ts | Adds template-name formatting + truncation helpers and re-exports. |
| packages/imagekit-editor-dev/src/utils/chakraAny.ts | Adds a shared Chakra typing “escape hatch”. |
| packages/imagekit-editor-dev/src/theme.ts | Adds global scrollbar styling + aliases Chakra blue palette to brand blue. |
| packages/imagekit-editor-dev/src/sync/templateSyncVersioning.ts | Adds version model helpers for save/edit race handling. |
| packages/imagekit-editor-dev/src/sync/templateSyncVersioning.test.ts | Tests versioning helpers. |
| packages/imagekit-editor-dev/src/store.ts | Extends editor store with template metadata, sync status, versioning, and load/reset behaviors. |
| packages/imagekit-editor-dev/src/storage/types.ts | Adds template storage/provider types used by host integrations. |
| packages/imagekit-editor-dev/src/storage/templateAccessError.ts | Adds access-denied error helpers and reset behavior. |
| packages/imagekit-editor-dev/src/storage/serializeTransformations.ts | Normalizes transformation step versioning for persistence. |
| packages/imagekit-editor-dev/src/storage/index.ts | Re-exports storage APIs/types. |
| packages/imagekit-editor-dev/src/schema/transformation.ts | Removes unused overlay expression validator block. |
| packages/imagekit-editor-dev/src/schema/index.ts | Adjusts flip schema parsing via z.preprocess for legacy/coerced values. |
| packages/imagekit-editor-dev/src/schema/formatters.test.ts | Adds formatter tests. |
| packages/imagekit-editor-dev/src/schema/field-config.test.ts | Adds field visibility/helper tests. |
| packages/imagekit-editor-dev/src/index.tsx | Exposes new template-storage APIs + types from the package entry. |
| packages/imagekit-editor-dev/src/hooks/useTemplateSync.ts | Adds save orchestration hook with access-denied handling and version gating. |
| packages/imagekit-editor-dev/src/hooks/useSaveTemplate.ts | Adds Cmd/Ctrl+S save shortcut hook. |
| packages/imagekit-editor-dev/src/hooks/useAutoSaveTemplate.ts | Adds debounced metadata save + periodic save loop. |
| packages/imagekit-editor-dev/src/context/TemplateStorageContext.tsx | Adds template storage provider context. |
| packages/imagekit-editor-dev/src/context/TemplatePermissionsContext.tsx | Adds template permission buckets + derived permissions and hooks. |
| packages/imagekit-editor-dev/src/components/templates/TemplatesLibraryView.test.tsx | Adds tests for virtualized templates library behavior. |
| packages/imagekit-editor-dev/src/components/sidebar/transformationFooterActions.test.ts | Tests footer action state machine. |
| packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx | Adds save/apply footer state machine and sync-aware actions; fixes dirty tracking. |
| packages/imagekit-editor-dev/src/components/header/index.tsx | Reworks header UI around templates, status, settings, and new navbar items. |
| packages/imagekit-editor-dev/src/components/header/TemplatesDropdown.tsx | Adds templates dropdown with pinning, current row, and unsaved-changes flow. |
| packages/imagekit-editor-dev/src/components/header/TemplatesDropdown.test.tsx | Adds dropdown interaction tests. |
| packages/imagekit-editor-dev/src/components/header/TemplateStatus.tsx | Adds sync-status indicator with popover details and save CTA. |
| packages/imagekit-editor-dev/src/components/header/TemplateStatus.test.tsx | Adds status behavior tests (dirty, saving, interval autosave, errors). |
| packages/imagekit-editor-dev/src/components/header/TemplateNameInput.tsx | Adds editable template name input with UI normalization behavior. |
| packages/imagekit-editor-dev/src/components/header/SettingsModal.tsx | Adds template settings modal (rename/visibility/delete confirmation). |
| packages/imagekit-editor-dev/src/components/header/SettingsModal.test.tsx | Adds settings modal delete flow tests. |
| packages/imagekit-editor-dev/src/components/header/NavbarItem.tsx | Adds reusable header nav button component. |
| packages/imagekit-editor-dev/src/components/editor/layout.tsx | Wires autosave + save shortcut hooks and adds templates library modal container. |
| packages/imagekit-editor-dev/src/components/editor/ActionBar.tsx | Tweaks hover styles for action buttons. |
| packages/imagekit-editor-dev/src/components/common/MultiSelectListField.tsx | Adds searchable multi-select list component. |
| packages/imagekit-editor-dev/src/components/common/FilterChipsField.tsx | Adds multi-select chip filter component. |
| packages/imagekit-editor-dev/src/components/common/CheckboxCardField.tsx | Fixes toggle logic to guard against stored-string-to-Set bugs. |
| packages/imagekit-editor-dev/src/ImageKitEditor.tsx | Exposes template APIs on the ref and adds template storage/permissions props and providers. |
| packages/imagekit-editor-dev/package.json | Adds Vitest scripts and dependency for virtualization. |
| package.json | Adds root test scripts, Vitest/testing deps, and updates lint:fix behavior. |
| examples/react-example/src/index.tsx | Updates example to demonstrate template persistence/loading and provider usage. |
| examples/react-example/package.json | Switches editor dependency to workspace and adds placeholder test script. |
| README.md | Documents template management APIs and testing commands. |
| .gitignore | Ignores coverage output. |
| .github/workflows/ci.yaml | Runs tests + coverage in CI prior to packaging. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.