diff --git a/.changeset/odd-coins-think.md b/.changeset/odd-coins-think.md deleted file mode 100644 index f0f8e7b0f6..0000000000 --- a/.changeset/odd-coins-think.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -"@comet/admin-theme": patch ---- - -Adapt `Radio` and `Checkbox` styling to Comet DXP design - -Fix colors of disabled states. diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 438135e9b1..4be089d2c0 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,118 +1,21 @@ - - ## Description - - - - -## Example - - - -- [ ] I have verified if my change requires an example +- [ ] I have verified if my change requires [an example](https://github.com/vivid-planet/comet/blob/HEAD/CONTRIBUTING.md#example): +- [ ] I have verified if my change requires [a changeset](https://github.com/vivid-planet/comet/blob/HEAD/CONTRIBUTING.md#changeset) +- [ ] I have verified if my change requires [screenshots/screencasts](https://github.com/vivid-planet/comet/blob/HEAD/CONTRIBUTING.md#screenshotsscreencasts) ## Screenshots/screencasts - - -## Changeset - - - -- [ ] I have verified if my change requires a changeset - -## Related tasks and documents - - +| Before | After | +| ------ | ----- | +| Link | Link | ## Open TODOs/questions - +- [ ] Add changeset ## Further information - +- Task: https://vivid-planet.atlassian.net/browse/COM-XXX diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 1318b5507a..6d74ecb20e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -13,7 +13,44 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm Pull requests with minor or patch changes should target the [`main`](https://github.com/vivid-planet/comet/tree/main) branch, while major/breaking changes should target the [`next`](https://github.com/vivid-planet/comet/tree/next) branch. -### Changesets +## Pull requests + +> [!WARNING] +> Please make sure to keep the pull request size at a minium! +> Smaller pull requests are easier to review and tend to get merged faster. +> Unrelated changes, refactorings, fixes etc. should be made in follow-up pull requests. + +### Description + +The description should describe the change you're making. +It will be used as the commit message for the squashed commit once the pull request gets merged. +Therefore, make sure to keep the description up-to-date as the pull request changes. + +> [!WARNING] +> Please describe why you're making the change, not what you're changing. +> Reviewers see what you're changing when reviewing the code. +> However, they might not understand your motives as to why you're making the change. + +Your description should include: + +- The problem you're facing +- Your solution to the problem +- An example usage of your change + +### Example + +Make sure to provide an example of your change if your change includes a new API. +This can be either: + +- A unit test (preferred) +- The implementation in Demo +- A development story in Storybook + +### Screenshots/screencasts + +When making a visual change, please provide either screenshots or screencasts. + +### Changeset Changes are documented using [changesets](https://github.com/changesets/changesets). Make sure to [add a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) when making a notable change. @@ -90,3 +127,19 @@ export function ErrorHandler({ children }: PropsWithChildren) { } ``` ```` + +### Open TODOs/questions + +Anything that needs to be done before merging the pull request, for instance, add a changeset. + +### Further information + +Further information that helps reviewing the pull request, for instance: + +- Alternative solutions you have considered +- Related pull requests +- Links to relevant tasks, documentation, blog posts etc. + +> [!WARNING] +> Make sure that everything required to understand your change is in the pull request description. +> Reviewers shouldn't need to review tasks, JIRA conversations etc. to understand what you're doing. diff --git a/demo/admin/src/products/ProductForm.gql.ts b/demo/admin/src/products/ProductForm.gql.ts index 47fef27549..4ef4a8207d 100644 --- a/demo/admin/src/products/ProductForm.gql.ts +++ b/demo/admin/src/products/ProductForm.gql.ts @@ -37,6 +37,7 @@ export const productFormFragment = gql` min max } + lastCheckedAt dimensions { width height diff --git a/demo/admin/src/products/ProductForm.tsx b/demo/admin/src/products/ProductForm.tsx index d70880abae..009f770b58 100644 --- a/demo/admin/src/products/ProductForm.tsx +++ b/demo/admin/src/products/ProductForm.tsx @@ -15,7 +15,7 @@ import { useFormApiRef, useStackSwitchApi, } from "@comet/admin"; -import { DateField } from "@comet/admin-date-time"; +import { DateField, DateTimeField } from "@comet/admin-date-time"; import { BlockState, createFinalFormBlock } from "@comet/blocks-admin"; import { DamImageBlock, @@ -111,6 +111,7 @@ export function ProductForm({ id, width }: FormProps) { id: filteredData.manufacturerCountry?.addressAsEmbeddable.country, } : undefined, + lastCheckedAt: filteredData.lastCheckedAt ? new Date(filteredData.lastCheckedAt) : null, }; }, [data, width]); @@ -140,6 +141,7 @@ export function ProductForm({ id, width }: FormProps) { priceList: formValues.priceList ? formValues.priceList.id : null, datasheets: formValues.datasheets?.map(({ id }) => id), manufacturer: formValues.manufacturer?.id, + lastCheckedAt: formValues.lastCheckedAt ? formValues.lastCheckedAt.toISOString() : null, }; if (mode === "edit") { @@ -357,6 +359,11 @@ export function ProductForm({ id, width }: FormProps) { fullWidth layout="grid" /> + } + name="lastCheckedAt" + fullWidth + /> )} diff --git a/demo/admin/src/products/ProductsPage.tsx b/demo/admin/src/products/ProductsPage.tsx index dcaaed96ad..b41c5804c7 100644 --- a/demo/admin/src/products/ProductsPage.tsx +++ b/demo/admin/src/products/ProductsPage.tsx @@ -136,7 +136,11 @@ const ProductsPage = () => { - + +
+ +
+
diff --git a/demo/api/src/footer/generated/dto/footer.input.ts b/demo/api/src/footer/generated/dto/footer.input.ts index 03b9a8c36f..ad40763eba 100644 --- a/demo/api/src/footer/generated/dto/footer.input.ts +++ b/demo/api/src/footer/generated/dto/footer.input.ts @@ -1,6 +1,6 @@ // This file has been generated by comet api-generator. // You may choose to use this file as scaffold by moving this file out of generated folder and removing this comment. -import { BlockInputInterface, isBlockInputInterface, PartialType, RootBlockInputScalar } from "@comet/cms-api"; +import { BlockInputInterface, isBlockInputInterface, RootBlockInputScalar } from "@comet/cms-api"; import { Field, InputType } from "@nestjs/graphql"; import { Transform } from "class-transformer"; import { IsNotEmpty, ValidateNested } from "class-validator"; @@ -15,6 +15,3 @@ export class FooterInput { @ValidateNested() content: BlockInputInterface; } - -@InputType() -export class FooterUpdateInput extends PartialType(FooterInput) {} diff --git a/packages/admin/admin-babel-preset/CHANGELOG.md b/packages/admin/admin-babel-preset/CHANGELOG.md index ed92c4da79..1ddd06aff7 100644 --- a/packages/admin/admin-babel-preset/CHANGELOG.md +++ b/packages/admin/admin-babel-preset/CHANGELOG.md @@ -1,5 +1,7 @@ # @comet/admin-babel-preset +## 7.10.0 + ## 7.9.0 ## 7.8.0 diff --git a/packages/admin/admin-babel-preset/package.json b/packages/admin/admin-babel-preset/package.json index f91cd79cc1..dc4962dfc8 100644 --- a/packages/admin/admin-babel-preset/package.json +++ b/packages/admin/admin-babel-preset/package.json @@ -1,6 +1,6 @@ { "name": "@comet/admin-babel-preset", - "version": "7.9.0", + "version": "7.10.0", "repository": { "type": "git", "url": "https://github.com/vivid-planet/comet", diff --git a/packages/admin/admin-color-picker/CHANGELOG.md b/packages/admin/admin-color-picker/CHANGELOG.md index eadaedc60e..04f59230bc 100644 --- a/packages/admin/admin-color-picker/CHANGELOG.md +++ b/packages/admin/admin-color-picker/CHANGELOG.md @@ -1,5 +1,18 @@ # @comet/admin-color-picker +## 7.10.0 + +### Patch Changes + +- Updated dependencies [8f924d591] +- Updated dependencies [aa02ca13f] +- Updated dependencies [6eba5abea] +- Updated dependencies [6eba5abea] +- Updated dependencies [bf6b03fe0] +- Updated dependencies [589b0b9ee] + - @comet/admin@7.10.0 + - @comet/admin-icons@7.10.0 + ## 7.9.0 ### Patch Changes diff --git a/packages/admin/admin-color-picker/package.json b/packages/admin/admin-color-picker/package.json index 8b46fb53b2..0cc31e9015 100644 --- a/packages/admin/admin-color-picker/package.json +++ b/packages/admin/admin-color-picker/package.json @@ -1,6 +1,6 @@ { "name": "@comet/admin-color-picker", - "version": "7.9.0", + "version": "7.10.0", "repository": { "type": "git", "url": "https://github.com/vivid-planet/comet", @@ -26,8 +26,8 @@ "start:types": "tsc --project ./tsconfig.json --emitDeclarationOnly --watch --preserveWatchOutput" }, "dependencies": { - "@comet/admin": "workspace:^7.9.0", - "@comet/admin-icons": "workspace:^7.9.0", + "@comet/admin": "workspace:^7.10.0", + "@comet/admin-icons": "workspace:^7.10.0", "clsx": "^1.1.1", "react-colorful": "^5.5.1", "tinycolor2": "^1.4.1", @@ -36,8 +36,8 @@ "devDependencies": { "@babel/cli": "^7.17.6", "@babel/core": "^7.20.12", - "@comet/admin-babel-preset": "workspace:^7.9.0", - "@comet/eslint-config": "workspace:^7.9.0", + "@comet/admin-babel-preset": "workspace:^7.10.0", + "@comet/eslint-config": "workspace:^7.10.0", "@mui/material": "^6.0.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", diff --git a/packages/admin/admin-date-time/CHANGELOG.md b/packages/admin/admin-date-time/CHANGELOG.md index f3dc209d66..85e0315120 100644 --- a/packages/admin/admin-date-time/CHANGELOG.md +++ b/packages/admin/admin-date-time/CHANGELOG.md @@ -1,5 +1,18 @@ # @comet/admin-date-time +## 7.10.0 + +### Patch Changes + +- Updated dependencies [8f924d591] +- Updated dependencies [aa02ca13f] +- Updated dependencies [6eba5abea] +- Updated dependencies [6eba5abea] +- Updated dependencies [bf6b03fe0] +- Updated dependencies [589b0b9ee] + - @comet/admin@7.10.0 + - @comet/admin-icons@7.10.0 + ## 7.9.0 ### Patch Changes diff --git a/packages/admin/admin-date-time/package.json b/packages/admin/admin-date-time/package.json index f4d0b88113..9849c4a487 100644 --- a/packages/admin/admin-date-time/package.json +++ b/packages/admin/admin-date-time/package.json @@ -1,6 +1,6 @@ { "name": "@comet/admin-date-time", - "version": "7.9.0", + "version": "7.10.0", "repository": { "type": "git", "url": "https://github.com/vivid-planet/comet", @@ -26,8 +26,8 @@ "start:types": "tsc --project ./tsconfig.json --emitDeclarationOnly --watch --preserveWatchOutput" }, "dependencies": { - "@comet/admin": "workspace:^7.9.0", - "@comet/admin-icons": "workspace:^7.9.0", + "@comet/admin": "workspace:^7.10.0", + "@comet/admin-icons": "workspace:^7.10.0", "@mui/utils": "^6.0.0", "clsx": "^1.1.1", "date-fns": "^2.28.0", @@ -36,8 +36,8 @@ "devDependencies": { "@babel/cli": "^7.17.6", "@babel/core": "^7.20.12", - "@comet/admin-babel-preset": "workspace:^7.9.0", - "@comet/eslint-config": "workspace:^7.9.0", + "@comet/admin-babel-preset": "workspace:^7.10.0", + "@comet/eslint-config": "workspace:^7.10.0", "@mui/material": "^6.0.0", "@types/react": "^17.0", "@types/react-date-range": "^1.4.3", diff --git a/packages/admin/admin-icons/CHANGELOG.md b/packages/admin/admin-icons/CHANGELOG.md index 805f669ec6..5e4f19714d 100644 --- a/packages/admin/admin-icons/CHANGELOG.md +++ b/packages/admin/admin-icons/CHANGELOG.md @@ -1,5 +1,7 @@ # @comet/admin-icons +## 7.10.0 + ## 7.9.0 ### Minor Changes diff --git a/packages/admin/admin-icons/package.json b/packages/admin/admin-icons/package.json index 28996b2a47..38d3a358e1 100644 --- a/packages/admin/admin-icons/package.json +++ b/packages/admin/admin-icons/package.json @@ -1,6 +1,6 @@ { "name": "@comet/admin-icons", - "version": "7.9.0", + "version": "7.10.0", "repository": { "type": "git", "url": "https://github.com/vivid-planet/comet", @@ -29,8 +29,8 @@ "devDependencies": { "@babel/cli": "^7.17.6", "@babel/core": "^7.20.12", - "@comet/admin-babel-preset": "workspace:^7.9.0", - "@comet/eslint-config": "workspace:^7.9.0", + "@comet/admin-babel-preset": "workspace:^7.10.0", + "@comet/eslint-config": "workspace:^7.10.0", "@mui/material": "^6.0.0", "@types/cli-progress": "^3.8.0", "@types/node": "^22.0.0", diff --git a/packages/admin/admin-react-select/CHANGELOG.md b/packages/admin/admin-react-select/CHANGELOG.md index 1812a52efe..9a3891a120 100644 --- a/packages/admin/admin-react-select/CHANGELOG.md +++ b/packages/admin/admin-react-select/CHANGELOG.md @@ -1,5 +1,18 @@ # @comet/admin-react-select +## 7.10.0 + +### Patch Changes + +- Updated dependencies [8f924d591] +- Updated dependencies [aa02ca13f] +- Updated dependencies [6eba5abea] +- Updated dependencies [6eba5abea] +- Updated dependencies [bf6b03fe0] +- Updated dependencies [589b0b9ee] + - @comet/admin@7.10.0 + - @comet/admin-icons@7.10.0 + ## 7.9.0 ### Patch Changes diff --git a/packages/admin/admin-react-select/package.json b/packages/admin/admin-react-select/package.json index 88d10d696b..1e5abd4a22 100644 --- a/packages/admin/admin-react-select/package.json +++ b/packages/admin/admin-react-select/package.json @@ -1,6 +1,6 @@ { "name": "@comet/admin-react-select", - "version": "7.9.0", + "version": "7.10.0", "repository": { "type": "git", "url": "https://github.com/vivid-planet/comet", @@ -26,15 +26,15 @@ "start:types": "tsc --project ./tsconfig.json --emitDeclarationOnly --watch --preserveWatchOutput" }, "dependencies": { - "@comet/admin": "workspace:^7.9.0", - "@comet/admin-icons": "workspace:^7.9.0", + "@comet/admin": "workspace:^7.10.0", + "@comet/admin-icons": "workspace:^7.10.0", "classnames": "^2.2.6" }, "devDependencies": { "@babel/cli": "^7.17.6", "@babel/core": "^7.20.12", - "@comet/admin-babel-preset": "workspace:^7.9.0", - "@comet/eslint-config": "workspace:^7.9.0", + "@comet/admin-babel-preset": "workspace:^7.10.0", + "@comet/eslint-config": "workspace:^7.10.0", "@mui/material": "^6.0.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", diff --git a/packages/admin/admin-rte/CHANGELOG.md b/packages/admin/admin-rte/CHANGELOG.md index 1162408482..d31ddec9f4 100644 --- a/packages/admin/admin-rte/CHANGELOG.md +++ b/packages/admin/admin-rte/CHANGELOG.md @@ -1,5 +1,18 @@ # @comet/admin-rte +## 7.10.0 + +### Patch Changes + +- Updated dependencies [8f924d591] +- Updated dependencies [aa02ca13f] +- Updated dependencies [6eba5abea] +- Updated dependencies [6eba5abea] +- Updated dependencies [bf6b03fe0] +- Updated dependencies [589b0b9ee] + - @comet/admin@7.10.0 + - @comet/admin-icons@7.10.0 + ## 7.9.0 ### Patch Changes diff --git a/packages/admin/admin-rte/package.json b/packages/admin/admin-rte/package.json index 6eebfbdfa3..0b41b03af9 100644 --- a/packages/admin/admin-rte/package.json +++ b/packages/admin/admin-rte/package.json @@ -1,6 +1,6 @@ { "name": "@comet/admin-rte", - "version": "7.9.0", + "version": "7.10.0", "repository": { "type": "git", "url": "https://github.com/vivid-planet/comet", @@ -28,8 +28,8 @@ "test:watch": "jest --watch" }, "dependencies": { - "@comet/admin": "workspace:^7.9.0", - "@comet/admin-icons": "workspace:^7.9.0", + "@comet/admin": "workspace:^7.10.0", + "@comet/admin-icons": "workspace:^7.10.0", "detect-browser": "^5.2.1", "draft-js-export-html": "^1.4.1", "draft-js-import-html": "^1.4.1", @@ -39,8 +39,8 @@ "devDependencies": { "@babel/cli": "^7.17.6", "@babel/core": "^7.20.12", - "@comet/admin-babel-preset": "workspace:^7.9.0", - "@comet/eslint-config": "workspace:^7.9.0", + "@comet/admin-babel-preset": "workspace:^7.10.0", + "@comet/eslint-config": "workspace:^7.10.0", "@mui/material": "^6.0.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^12.0.0", diff --git a/packages/admin/admin-theme/CHANGELOG.md b/packages/admin/admin-theme/CHANGELOG.md index cd996537aa..75372ed061 100644 --- a/packages/admin/admin-theme/CHANGELOG.md +++ b/packages/admin/admin-theme/CHANGELOG.md @@ -1,5 +1,37 @@ # @comet/admin-theme +## 7.10.0 + +### Minor Changes + +- 7e94c55f6: Rework `GridFilterPanel` to match the updated Comet CI +- 22f3d402e: Adapt `Chip` styling to align with Comet DXP design + + - Fix hover styling + - Add new styling for `` + +- 589b0b9ee: Enhance `FieldContainer` with `secondaryHelperText` prop and `helperTextIcon` prop + + - `helperTextIcon` displays an icon alongside the text for `helperText`, `error` or `warning`. + - `secondaryHelperText` provides an additional helper text positioned beneath the input field, aligned to the bottom-right corner. + + **Example:** + + ```tsx + } helperText="Helper Text with icon" secondaryHelperText="0/100"> + + + ``` + +### Patch Changes + +- b51bf6d85: Adapt `Radio` and `Checkbox` styling to Comet DXP design + + Fix colors of disabled states. + +- 71876ea69: Adapt size of arrow in `Select` and `Autocomplete` fields according to Comet DXP design + - @comet/admin-icons@7.10.0 + ## 7.9.0 ### Minor Changes diff --git a/packages/admin/admin-theme/package.json b/packages/admin/admin-theme/package.json index daab81dc68..6ee2b3b00b 100644 --- a/packages/admin/admin-theme/package.json +++ b/packages/admin/admin-theme/package.json @@ -1,6 +1,6 @@ { "name": "@comet/admin-theme", - "version": "7.9.0", + "version": "7.10.0", "repository": { "type": "git", "url": "https://github.com/vivid-planet/comet", @@ -26,14 +26,14 @@ "start:types": "tsc --project ./tsconfig.json --emitDeclarationOnly --watch --preserveWatchOutput" }, "dependencies": { - "@comet/admin-icons": "workspace:^7.9.0", + "@comet/admin-icons": "workspace:^7.10.0", "@mui/utils": "^6.0.0" }, "devDependencies": { "@babel/cli": "^7.17.6", "@babel/core": "^7.20.12", - "@comet/admin-babel-preset": "workspace:^7.9.0", - "@comet/eslint-config": "workspace:^7.9.0", + "@comet/admin-babel-preset": "workspace:^7.10.0", + "@comet/eslint-config": "workspace:^7.10.0", "@mui/material": "^6.0.0", "@mui/system": "^6.0.0", "@mui/x-data-grid": "^7.22.3", diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiAutocomplete.tsx b/packages/admin/admin-theme/src/componentsTheme/MuiAutocomplete.tsx index ca6db4cada..c896600b25 100644 --- a/packages/admin/admin-theme/src/componentsTheme/MuiAutocomplete.tsx +++ b/packages/admin/admin-theme/src/componentsTheme/MuiAutocomplete.tsx @@ -27,6 +27,9 @@ export const getMuiAutocomplete: GetMuiComponentTheme<"MuiAutocomplete"> = (comp "&:hover": { backgroundColor: "transparent", }, + "& .MuiSvgIcon-root": { + fontSize: "12px", + }, }, }), }); diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiChip.tsx b/packages/admin/admin-theme/src/componentsTheme/MuiChip.tsx index 9ad237cb12..4946f5686b 100644 --- a/packages/admin/admin-theme/src/componentsTheme/MuiChip.tsx +++ b/packages/admin/admin-theme/src/componentsTheme/MuiChip.tsx @@ -1,5 +1,4 @@ import { Clear } from "@comet/admin-icons"; -import { chipClasses } from "@mui/material"; import { mergeOverrideStyles } from "../utils/mergeOverrideStyles"; import { GetMuiComponentTheme } from "./getComponentsTheme"; @@ -98,18 +97,23 @@ export const getMuiChip: GetMuiComponentTheme<"MuiChip"> = (component, { palette }, filledDefault: { backgroundColor: palette.grey["100"], + "&.MuiChip-clickable": { + "&:hover": { + backgroundColor: palette.grey["200"], + }, + }, + }, + filledInfo: { + backgroundColor: "#fff", + "&.MuiChip-clickable": { + "&:hover": { + backgroundColor: palette.grey["50"], + }, + }, }, outlinedDefault: { borderColor: palette.grey["100"], }, - clickableColorDefault: { - [`&.${chipClasses.filled}:hover`]: { - backgroundColor: palette.grey["200"], - }, - [`&.${chipClasses.outlined}:hover`]: { - backgroundColor: palette.grey["50"], - }, - }, }), defaultProps: { deleteIcon: , diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiDataGrid.tsx b/packages/admin/admin-theme/src/componentsTheme/MuiDataGrid.tsx index bf4c4cb148..2b2b464e41 100644 --- a/packages/admin/admin-theme/src/componentsTheme/MuiDataGrid.tsx +++ b/packages/admin/admin-theme/src/componentsTheme/MuiDataGrid.tsx @@ -1,6 +1,9 @@ -import { ArrowDown, ArrowUp, Check, Clear, Close, MoreVertical, Search } from "@comet/admin-icons"; +import { ArrowDown, ArrowUp, Check, Clear, Close, Delete, MoreVertical, Search } from "@comet/admin-icons"; import { buttonBaseClasses, + buttonClasses, + formControlClasses, + iconButtonClasses, inputAdornmentClasses, inputBaseClasses, inputClasses, @@ -20,9 +23,10 @@ export const getMuiDataGrid: GetMuiComponentTheme<"MuiDataGrid"> = (component, { ...component, defaultProps: { slots: { + /* @TODO: add FilterPanelAddIcon to display Comet Add Icon once MUI Datagrid is updated to v6 or higher */ QuickFilterIcon: Search, QuickFilterClearIcon: Clear, - FilterPanelDeleteIcon: Close, + FilterPanelDeleteIcon: Delete, BooleanCellTrueIcon: Check, BooleanCellFalseIcon: Close, ColumnSortedAscendingIcon: ArrowUp, @@ -74,18 +78,56 @@ export const getMuiDataGrid: GetMuiComponentTheme<"MuiDataGrid"> = (component, { height: "20px", marginRight: "10px", }, + panel: { + ["@media (max-width: 900px)"]: { + width: "100%", + transform: "translate3d(0,0,0)", + }, + }, panelContent: { + padding: spacing(1, 0), [`& .${gridClasses.filterForm}:first-child .${gridClasses.filterFormLogicOperatorInput}`]: { - ["@media (max-width: 900px)"]: { - display: "none", - }, + display: "flex", + }, + ["@media (max-width: 900px)"]: { + maxHeight: "none", + padding: 0, }, }, filterForm: { - padding: spacing(4), - + margin: spacing(5, 4, 0, 4), + padding: spacing(2, 1), + gap: "5px", + borderBottom: `1px solid ${palette.grey[50]}`, + ["@media (max-width: 900px)"]: { + flexDirection: "row", + flexWrap: "wrap", + margin: spacing(4, 4, 0, 4), + gap: 0, + padding: 0, + paddingBottom: spacing(5), + "&:last-child": { + marginBottom: 0, + paddingBottom: 0, + }, + }, + "&:last-child": { + border: "none", + }, + [`.${formControlClasses.root}`]: { + marginRight: 0, + }, + [`.${iconButtonClasses.root}`]: { + height: 32, + width: 32, + }, [`.${inputLabelClasses.root}`]: { - display: "none", + transform: "translateY(-22px)", + fontSize: 14, + ["@media (max-width: 900px)"]: { + position: "relative", + transform: "unset", + }, }, [`.${inputClasses.root}`]: { marginTop: 0, @@ -93,16 +135,11 @@ export const getMuiDataGrid: GetMuiComponentTheme<"MuiDataGrid"> = (component, { [`& .${inputAdornmentClasses.root}`]: { padding: spacing(0, 1, 0, 0), }, - - ["@media (max-width: 900px)"]: { - flexDirection: "column", - padding: 0, - }, }, filterFormLogicOperatorInput: { ["@media (max-width: 900px)"]: { - padding: spacing(2, 4), - width: "100%", + padding: spacing(2, 1), + width: "27.2%", }, }, filterFormDeleteIcon: { @@ -114,35 +151,53 @@ export const getMuiDataGrid: GetMuiComponentTheme<"MuiDataGrid"> = (component, { }, ["@media (max-width: 900px)"]: { - marginTop: spacing(4), - marginRight: spacing(4), - alignItems: "flex-end", + padding: spacing(2, 1), + alignItems: "flex-start", + justifyContent: "flex-end", + width: "11.1%", + }, + }, + panelFooter: { + borderTop: `1px solid ${palette.grey[100]}`, + padding: "7px 0", + [`.${buttonClasses.root}`]: { + color: palette.primary.main, + }, + ["@media (max-width: 900px)"]: { + justifyContent: "center", + boxShadow: shadows[4], }, }, filterFormColumnInput: { marginRight: spacing(4), ["@media (max-width: 900px)"]: { - padding: spacing(2, 4), - width: "100%", + padding: spacing(2, 1), + width: "61.6%", }, }, filterFormOperatorInput: { margin: spacing(0, 4, 0, 0), ["@media (max-width: 900px)"]: { - padding: spacing(2, 4), - width: "100%", + padding: spacing(2, 1), + width: "38.3%", }, }, filterFormValueInput: { ["@media (max-width: 900px)"]: { - padding: spacing(2, 4), - width: "100%", + padding: spacing(2, 1), + width: "61.6%", }, }, paper: { - boxShadow: shadows[1], + boxShadow: shadows[4], + border: `1px solid ${palette.divider}`, + borderRadius: "4px", + ["@media (max-width: 900px)"]: { + height: "100%", + maxHeight: "none", + }, }, // @ts-expect-error This key exists but is missing in the types. toolbarQuickFilter: { diff --git a/packages/admin/admin-theme/src/componentsTheme/getCommonSelectTheme.tsx b/packages/admin/admin-theme/src/componentsTheme/getCommonSelectTheme.tsx index 18a0652198..6287047c6d 100644 --- a/packages/admin/admin-theme/src/componentsTheme/getCommonSelectTheme.tsx +++ b/packages/admin/admin-theme/src/componentsTheme/getCommonSelectTheme.tsx @@ -28,4 +28,5 @@ export const commonSelectStyleOverrides = { export const getCommonIconStyleOverrides = (palette: Palette) => ({ right: 10, color: palette.grey[900], + fontSize: 12, }); diff --git a/packages/admin/admin/CHANGELOG.md b/packages/admin/admin/CHANGELOG.md index 249829a255..cb9359c63e 100644 --- a/packages/admin/admin/CHANGELOG.md +++ b/packages/admin/admin/CHANGELOG.md @@ -1,5 +1,57 @@ # @comet/admin +## 7.10.0 + +### Minor Changes + +- 8f924d591: Add new custom `Dialog` + + The component extends the MUI `Dialog` component to enable common use cases: + + - The `title` prop can be used to set the dialog title + - A close button is shown when the `onClose` is used + + **Example** + + ```tsx + { + // Handle dialog closing here + }} + /> + ``` + +- 6eba5abea: Add a `forceVerticalContainerSize` prop to `FieldContainer` + + Use it to define below which container size the `vertical` styling is applied when using the `horizontal` variant. + +- 589b0b9ee: Enhance `FieldContainer` with `secondaryHelperText` prop and `helperTextIcon` prop + + - `helperTextIcon` displays an icon alongside the text for `helperText`, `error` or `warning`. + - `secondaryHelperText` provides an additional helper text positioned beneath the input field, aligned to the bottom-right corner. + + **Example:** + + ```tsx + } helperText="Helper Text with icon" secondaryHelperText="0/100"> + + + ``` + +### Patch Changes + +- aa02ca13f: Fix a bug in `useDataGridExcelExport` that would cause an Excel export to fail when a cell's value was `undefined` +- 6eba5abea: Prevent unintended layout shift after the initial render of `FieldContainer` when using the `horizontal` variant +- bf6b03fe0: Fix alignment of `Alert` icon with the title +- Updated dependencies [7e94c55f6] +- Updated dependencies [22f3d402e] +- Updated dependencies [b51bf6d85] +- Updated dependencies [71876ea69] +- Updated dependencies [589b0b9ee] + - @comet/admin-theme@7.10.0 + - @comet/admin-icons@7.10.0 + ## 7.9.0 ### Minor Changes diff --git a/packages/admin/admin/package.json b/packages/admin/admin/package.json index 10ec71ec94..9902afff83 100644 --- a/packages/admin/admin/package.json +++ b/packages/admin/admin/package.json @@ -1,6 +1,6 @@ { "name": "@comet/admin", - "version": "7.9.0", + "version": "7.10.0", "repository": { "type": "git", "url": "https://github.com/vivid-planet/comet", @@ -28,8 +28,8 @@ "test:watch": "jest --watch" }, "dependencies": { - "@comet/admin-icons": "workspace:^7.9.0", - "@comet/admin-theme": "workspace:^7.9.0", + "@comet/admin-icons": "workspace:^7.10.0", + "@comet/admin-theme": "workspace:^7.10.0", "@mui/lab": "^6.0.0-beta.10", "@mui/private-theming": "^6.0.0", "clsx": "^1.1.1", @@ -49,8 +49,8 @@ "@apollo/client": "^3.7.0", "@babel/cli": "^7.17.6", "@babel/core": "^7.20.12", - "@comet/admin-babel-preset": "workspace:^7.9.0", - "@comet/eslint-config": "workspace:^7.9.0", + "@comet/admin-babel-preset": "workspace:^7.10.0", + "@comet/eslint-config": "workspace:^7.10.0", "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@mui/material": "^6.0.0", diff --git a/packages/admin/admin/src/alert/Alert.tsx b/packages/admin/admin/src/alert/Alert.tsx index b1c4f7d99f..25852d2a46 100644 --- a/packages/admin/admin/src/alert/Alert.tsx +++ b/packages/admin/admin/src/alert/Alert.tsx @@ -110,7 +110,9 @@ const Root = createComponentSlot(MuiAlert)({ const Title = createComponentSlot(AlertTitle)({ componentName: "Alert", slotName: "title", -})(); +})(css` + margin-top: 0px; +`); const Text = createComponentSlot(Typography)({ componentName: "Alert", diff --git a/packages/admin/admin/src/common/Dialog.tsx b/packages/admin/admin/src/common/Dialog.tsx new file mode 100644 index 0000000000..6b7ca7427a --- /dev/null +++ b/packages/admin/admin/src/common/Dialog.tsx @@ -0,0 +1,113 @@ +import { Close } from "@comet/admin-icons"; +import { + ComponentsOverrides, + css, + Dialog as MuiDialog, + DialogProps as MuiDialogProps, + DialogTitle as MuiDialogTitle, + IconButton, + Theme, + useThemeProps, +} from "@mui/material"; +import { ReactNode } from "react"; + +import { createComponentSlot } from "../helpers/createComponentSlot"; +import { ThemedComponentBaseProps } from "../helpers/ThemedComponentBaseProps"; + +export type DialogClassKey = "root" | "closeButton" | "dialogTitle"; + +export type DialogProps = ThemedComponentBaseProps<{ + closeButton: typeof IconButton; + root: typeof MuiDialog; + dialogTitle: typeof MuiDialogTitle; +}> & { + title?: ReactNode; + iconMapping?: { + closeIcon?: ReactNode; + }; +} & MuiDialogProps; + +type OwnerState = { + hasCloseButton: boolean; +}; + +export function Dialog(inProps: DialogProps) { + const { + slotProps, + open = false, + title, + iconMapping = {}, + children, + onClose, + ...restProps + } = useThemeProps({ props: inProps, name: "CometAdminDialog" }); + const { closeIcon = } = iconMapping; + + const ownerState: OwnerState = { + hasCloseButton: Boolean(onClose), + }; + + return ( + + {onClose && ( + onClose(event, "escapeKeyDown")}> + {closeIcon} + + )} + + {title} + + {children} + + ); +} + +const Root = createComponentSlot(MuiDialog)({ + componentName: "Dialog", + slotName: "root", +})(); + +const DialogTitle = createComponentSlot(MuiDialogTitle)({ + componentName: "Dialog", + slotName: "dialogTitle", +})( + ({ ownerState }) => css` + min-height: 20px; + display: flex; + align-items: center; + + ${ownerState.hasCloseButton && + css` + padding-right: 40px; + `} + `, +); + +const CloseButton = createComponentSlot(IconButton)({ + componentName: "Dialog", + slotName: "closeButton", +})( + ({ theme }) => css` + position: absolute; + right: 12px; + top: 14px; + color: ${theme.palette.secondary.contrastText}; + `, +); + +declare module "@mui/material/styles" { + interface ComponentsPropsList { + CometAdminDialog: DialogProps; + } + + interface ComponentNameToClassKey { + CometAdminDialog: DialogClassKey; + } + + interface Components { + CometAdminDialog?: { + defaultProps?: Partial; + styleOverrides?: ComponentsOverrides["CometAdminDialog"]; + }; + } +} diff --git a/packages/admin/admin/src/form/FieldContainer.tsx b/packages/admin/admin/src/form/FieldContainer.tsx index 7e6f99680a..ea2abb0b77 100644 --- a/packages/admin/admin/src/form/FieldContainer.tsx +++ b/packages/admin/admin/src/form/FieldContainer.tsx @@ -1,20 +1,24 @@ -import { FormControl, FormHelperText, FormLabel, formLabelClasses, inputBaseClasses, useThemeProps } from "@mui/material"; -import { ComponentsOverrides, css } from "@mui/material/styles"; +import { FormControl, FormHelperText, FormLabel, formLabelClasses, inputBaseClasses, svgIconClasses, useThemeProps } from "@mui/material"; +import { ComponentsOverrides, css, Theme } from "@mui/material/styles"; import { PropsWithChildren, ReactNode, useEffect, useRef } from "react"; import { createComponentSlot } from "../helpers/createComponentSlot"; import { ThemedComponentBaseProps } from "../helpers/ThemedComponentBaseProps"; -import { useObservedWidth } from "../utils/useObservedWidth"; export type FieldContainerProps = ThemedComponentBaseProps<{ root: typeof FormControl; + innerContainer: "div"; label: typeof FormLabel; inputContainer: "div"; error: typeof FormHelperText; warning: typeof FormHelperText; helperText: typeof FormHelperText; + secondaryHelperText: typeof FormHelperText; + helperTextsWrapper: "div"; + helperTextContent: "span"; }> & { variant?: "vertical" | "horizontal"; + forceVerticalContainerSize?: number; fullWidth?: boolean; label?: ReactNode; required?: boolean; @@ -24,10 +28,13 @@ export type FieldContainerProps = ThemedComponentBaseProps<{ scrollTo?: boolean; fieldMargin?: "always" | "never" | "onlyIfNotLast"; helperText?: ReactNode; + secondaryHelperText?: ReactNode; + helperTextIcon?: ReactNode; }; export type FieldContainerClassKey = | "root" + | "innerContainer" | "vertical" | "horizontal" | "fullWidth" @@ -42,12 +49,16 @@ export type FieldContainerClassKey = | "error" | "hasWarning" | "warning" - | "helperText"; + | "helperText" + | "secondaryHelperText" + | "helperTextsWrapper" + | "helperTextContent"; type OwnerState = Pick & { hasError: boolean; hasWarning: boolean; - forceVertical: boolean; + hasLabel: boolean; + forceVerticalContainerSize: number; }; const Root = createComponentSlot(FormControl)({ @@ -55,8 +66,8 @@ const Root = createComponentSlot(FormControl) css` max-width: 100%; + ${ownerState.fullWidth && + ownerState.variant === "horizontal" && + css` + container-type: inline-size; + container-name: comet-admin-field-container-root; + `} + ${ownerState.fieldMargin !== "never" && css` margin-bottom: ${theme.spacing(4)}; @@ -80,15 +98,6 @@ const Root = createComponentSlot(FormControl)({ + componentName: "FormFieldContainer", + slotName: "innerContainer", +})( + ({ theme, ownerState }) => css` + ${ownerState.variant === "horizontal" && + css` + @container comet-admin-field-container-root (min-width: ${ownerState.forceVerticalContainerSize}px) { + display: flex; + flex-direction: row; + max-width: 944px; + gap: ${theme.spacing(4)}; + } + `} ${ownerState.hasError && css` @@ -122,14 +148,27 @@ const Label = createComponentSlot(FormLabel) slotName: "label", })( ({ theme, ownerState }) => css` + ${!ownerState.hasLabel && + css` + display: none; + + ${ownerState.variant === "horizontal" && + css` + @container comet-admin-field-container-root (min-width: ${ownerState.forceVerticalContainerSize}px) { + display: block; + } + `} + `} + ${ownerState.variant === "horizontal" && - !ownerState.forceVertical && css` - width: calc(100% / 3); - flex-shrink: 0; - flex-grow: 0; - margin-bottom: 0; - margin-top: ${theme.spacing(2)}; + @container comet-admin-field-container-root (min-width: ${ownerState.forceVerticalContainerSize}px) { + width: calc(100% / 3); + flex-shrink: 0; + flex-grow: 0; + margin-bottom: 0; + margin-top: ${theme.spacing(2)}; + } `} ${ownerState.hasError && @@ -155,18 +194,20 @@ const InputContainer = createComponentSlot("div") css` ${ownerState.variant === "horizontal" && ownerState.fullWidth && - !ownerState.forceVertical && css` - flex-grow: 1; + @container comet-admin-field-container-root (min-width: ${ownerState.forceVerticalContainerSize}px) { + flex-grow: 1; + } `} ${ownerState.variant === "horizontal" && - !ownerState.forceVertical && css` - min-height: 40px; + @container comet-admin-field-container-root (min-width: ${ownerState.forceVerticalContainerSize}px) { + min-height: 40px; - > .CometAdminFormFieldContainer-root { - margin-bottom: 0; + > .CometAdminFormFieldContainer-root { + margin-bottom: 0; + } } `} @@ -176,16 +217,30 @@ const InputContainer = createComponentSlot("div") css` + display: flex; + gap: ${theme.spacing(1)}; + + > .${svgIconClasses.root} { + width: 12px; + } +`; + const Error = createComponentSlot(FormHelperText)({ componentName: "FormFieldContainer", slotName: "error", -})(); +})( + ({ theme }) => css` + ${getCommonHelperTextStyles(theme)} + `, +); const Warning = createComponentSlot(FormHelperText)({ componentName: "FormFieldContainer", slotName: "warning", })( ({ theme }) => css` + ${getCommonHelperTextStyles(theme)} color: ${theme.palette.warning.main}; `, ); @@ -193,15 +248,48 @@ const Warning = createComponentSlot(FormHelperText)({ const HelperText = createComponentSlot(FormHelperText)({ componentName: "FormFieldContainer", slotName: "helperText", +})( + ({ theme }) => css` + ${getCommonHelperTextStyles(theme)} + color: ${theme.palette.grey[300]}; + `, +); + +const SecondaryHelperText = createComponentSlot(FormHelperText)({ + componentName: "FormFieldContainer", + slotName: "secondaryHelperText", })( ({ theme }) => css` color: ${theme.palette.grey[300]}; + margin-left: auto; + + &.Mui-disabled { + color: ${theme.palette.grey[300]}; + } `, ); +const HelperTextsWrapper = createComponentSlot("div")({ + componentName: "FormFieldContainer", + slotName: "helperTextsWrapper", +})( + ({ theme }) => css` + display: flex; + align-items: center; + justify-content: space-between; + gap: ${theme.spacing(3)}; + `, +); + +const HelperTextContent = createComponentSlot("span")({ + componentName: "FormFieldContainer", + slotName: "helperTextContent", +})(); + export const FieldContainer = (inProps: PropsWithChildren) => { const { variant = "vertical", + forceVerticalContainerSize = 600, fullWidth: passedFullWidth, label, error, @@ -210,6 +298,8 @@ export const FieldContainer = (inProps: PropsWithChildren) children, warning, helperText, + secondaryHelperText, + helperTextIcon, scrollTo = false, fieldMargin = "onlyIfNotLast", slotProps, @@ -221,8 +311,6 @@ export const FieldContainer = (inProps: PropsWithChildren) const hasWarning = !hasError && !!warning; const ref = useRef(null); - const rootWidth = useObservedWidth(ref); - const forceVertical = rootWidth <= 600; useEffect(() => { if (scrollTo) { @@ -238,28 +326,43 @@ export const FieldContainer = (inProps: PropsWithChildren) variant, hasError, hasWarning, - forceVertical, + hasLabel: Boolean(label), + forceVerticalContainerSize, }; return ( - <> - {(label || (variant === "horizontal" && !forceVertical)) && ( - - )} + + {children} - {hasError && ( - - {error} - - )} - {hasWarning && !hasError && {warning}} - {helperText && !hasError && !hasWarning && {helperText}} + + {hasError && ( + + {Boolean(helperTextIcon) && helperTextIcon} + {error} + + )} + {hasWarning && !hasError && ( + + {Boolean(helperTextIcon) && helperTextIcon} + {warning} + + )} + {Boolean(helperText) && !hasError && !hasWarning && ( + + {Boolean(helperTextIcon) && helperTextIcon} + {helperText} + + )} + {Boolean(secondaryHelperText) && ( + {secondaryHelperText} + )} + - + ); }; diff --git a/packages/admin/admin/src/index.ts b/packages/admin/admin/src/index.ts index e95f5e359c..2c3e32196c 100644 --- a/packages/admin/admin/src/index.ts +++ b/packages/admin/admin/src/index.ts @@ -22,6 +22,7 @@ export { SplitButtonContext, SplitButtonContextOptions } from "./common/buttons/ export { useSplitButtonContext } from "./common/buttons/split/useSplitButtonContext"; export { ClearInputAdornment, ClearInputAdornmentProps } from "./common/ClearInputAdornment"; export { CometLogo } from "./common/CometLogo"; +export { Dialog, DialogClassKey, DialogProps } from "./common/Dialog"; export { FieldSet, FieldSetClassKey, FieldSetProps } from "./common/FieldSet"; export { FullHeightContent, FullHeightContentClassKey, FullHeightContentProps } from "./common/FullHeightContent"; export { HoverActions, HoverActionsClassKey, HoverActionsProps } from "./common/HoverActions"; diff --git a/packages/admin/admin/src/rowActions/RowActionsIconItem.tsx b/packages/admin/admin/src/rowActions/RowActionsIconItem.tsx index e0a57e68f5..acf67dc63a 100644 --- a/packages/admin/admin/src/rowActions/RowActionsIconItem.tsx +++ b/packages/admin/admin/src/rowActions/RowActionsIconItem.tsx @@ -16,13 +16,17 @@ export interface RowActionsIconItemProps extends CommonRowActionItemProps { export const RowActionsIconItem = forwardRef( ({ icon, tooltip, componentsProps = {}, ...restIconButtonProps }, ref) => { const { tooltip: tooltipProps, iconButton: iconButtonProps } = componentsProps; + + const combinedIconButtonProps = { ...restIconButtonProps, ...iconButtonProps }; + const buttonIsDisabled = Boolean(combinedIconButtonProps.disabled); + const button = ( - + {icon} ); - if (tooltip) { + if (tooltip && !buttonIsDisabled) { return ( {button} diff --git a/packages/admin/blocks-admin/CHANGELOG.md b/packages/admin/blocks-admin/CHANGELOG.md index 2acddc1728..493650be80 100644 --- a/packages/admin/blocks-admin/CHANGELOG.md +++ b/packages/admin/blocks-admin/CHANGELOG.md @@ -1,5 +1,18 @@ # @comet/blocks-admin +## 7.10.0 + +### Patch Changes + +- Updated dependencies [8f924d591] +- Updated dependencies [aa02ca13f] +- Updated dependencies [6eba5abea] +- Updated dependencies [6eba5abea] +- Updated dependencies [bf6b03fe0] +- Updated dependencies [589b0b9ee] + - @comet/admin@7.10.0 + - @comet/admin-icons@7.10.0 + ## 7.9.0 ### Minor Changes diff --git a/packages/admin/blocks-admin/package.json b/packages/admin/blocks-admin/package.json index 9abe9acc28..f608a9613b 100644 --- a/packages/admin/blocks-admin/package.json +++ b/packages/admin/blocks-admin/package.json @@ -1,6 +1,6 @@ { "name": "@comet/blocks-admin", - "version": "7.9.0", + "version": "7.10.0", "repository": { "type": "git", "url": "https://github.com/vivid-planet/comet", @@ -30,8 +30,8 @@ "test:watch": "jest --watch" }, "dependencies": { - "@comet/admin": "workspace:^7.9.0", - "@comet/admin-icons": "workspace:^7.9.0", + "@comet/admin": "workspace:^7.10.0", + "@comet/admin-icons": "workspace:^7.10.0", "@mui/lab": "^6.0.0-beta.10", "clipboard-copy": "^4.0.0", "clsx": "^1.1.1", @@ -43,9 +43,9 @@ "devDependencies": { "@babel/cli": "^7.17.6", "@babel/core": "^7.20.12", - "@comet/admin-babel-preset": "workspace:^7.9.0", - "@comet/cli": "workspace:^7.9.0", - "@comet/eslint-config": "workspace:^7.9.0", + "@comet/admin-babel-preset": "workspace:^7.10.0", + "@comet/cli": "workspace:^7.10.0", + "@comet/eslint-config": "workspace:^7.10.0", "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@mui/lab": "^6.0.0-beta.10", diff --git a/packages/admin/cms-admin/CHANGELOG.md b/packages/admin/cms-admin/CHANGELOG.md index e235461333..ce1980db3b 100644 --- a/packages/admin/cms-admin/CHANGELOG.md +++ b/packages/admin/cms-admin/CHANGELOG.md @@ -1,5 +1,33 @@ # @comet/cms-admin +## 7.10.0 + +### Minor Changes + +- 2b9fac2cf: Add support for passing title and alt text to `useDamFileUpload` + + This can be useful when importing files from an external DAM. + +### Patch Changes + +- d210ef74a: Remove vertical and horizontal scroll bars from block preview iframe +- Updated dependencies [7e94c55f6] +- Updated dependencies [22f3d402e] +- Updated dependencies [8f924d591] +- Updated dependencies [aa02ca13f] +- Updated dependencies [6eba5abea] +- Updated dependencies [6eba5abea] +- Updated dependencies [bf6b03fe0] +- Updated dependencies [b51bf6d85] +- Updated dependencies [71876ea69] +- Updated dependencies [589b0b9ee] + - @comet/admin-theme@7.10.0 + - @comet/admin@7.10.0 + - @comet/admin-date-time@7.10.0 + - @comet/admin-icons@7.10.0 + - @comet/admin-rte@7.10.0 + - @comet/blocks-admin@7.10.0 + ## 7.9.0 ### Minor Changes diff --git a/packages/admin/cms-admin/package.json b/packages/admin/cms-admin/package.json index 386a418ab2..2de0fbd49c 100644 --- a/packages/admin/cms-admin/package.json +++ b/packages/admin/cms-admin/package.json @@ -1,6 +1,6 @@ { "name": "@comet/cms-admin", - "version": "7.9.0", + "version": "7.10.0", "repository": { "type": "git", "url": "https://github.com/vivid-planet/comet", @@ -35,12 +35,12 @@ "test:watch": "jest --watch" }, "dependencies": { - "@comet/admin": "workspace:^7.9.0", - "@comet/admin-date-time": "workspace:^7.9.0", - "@comet/admin-icons": "workspace:^7.9.0", - "@comet/admin-rte": "workspace:^7.9.0", - "@comet/admin-theme": "workspace:^7.9.0", - "@comet/blocks-admin": "workspace:^7.9.0", + "@comet/admin": "workspace:^7.10.0", + "@comet/admin-date-time": "workspace:^7.10.0", + "@comet/admin-icons": "workspace:^7.10.0", + "@comet/admin-rte": "workspace:^7.10.0", + "@comet/admin-theme": "workspace:^7.10.0", + "@comet/blocks-admin": "workspace:^7.10.0", "@graphql-tools/graphql-file-loader": "^7.5.17", "@graphql-tools/load": "^7.8.14", "@graphql-typed-document-node/core": "^3.1.1", @@ -85,9 +85,9 @@ "@apollo/client": "^3.7.0", "@babel/cli": "^7.17.6", "@babel/core": "^7.20.12", - "@comet/admin-babel-preset": "workspace:^7.9.0", - "@comet/cli": "workspace:^7.9.0", - "@comet/eslint-config": "workspace:^7.9.0", + "@comet/admin-babel-preset": "workspace:^7.10.0", + "@comet/cli": "workspace:^7.10.0", + "@comet/eslint-config": "workspace:^7.10.0", "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@graphql-codegen/cli": "^2.0.0", diff --git a/packages/admin/cms-admin/src/dam/DataGrid/fileUpload/useDamFileUpload.tsx b/packages/admin/cms-admin/src/dam/DataGrid/fileUpload/useDamFileUpload.tsx index b5eca2ba74..a0c15607ad 100644 --- a/packages/admin/cms-admin/src/dam/DataGrid/fileUpload/useDamFileUpload.tsx +++ b/packages/admin/cms-admin/src/dam/DataGrid/fileUpload/useDamFileUpload.tsx @@ -31,12 +31,14 @@ import { GQLDamFolderForFolderUploadMutationVariables, } from "./useDamFileUpload.gql.generated"; -interface FileWithPathAndLicenseInfo extends File { +interface FileWithCustomMetaData extends File { path?: string; license?: GQLLicenseInput; + title?: string; + altText?: string; } -export interface FileWithFolderPath extends FileWithPathAndLicenseInfo { +export interface FileWithFolderPath extends FileWithCustomMetaData { folderPath?: string; } @@ -45,7 +47,7 @@ interface UploadDamFileOptions { } interface Files { - acceptedFiles: FileWithPathAndLicenseInfo[]; + acceptedFiles: FileWithCustomMetaData[]; fileRejections: FileRejection[]; } @@ -54,7 +56,6 @@ type ImportSource = { importSourceType: never; importSourceId: never } | { impor interface UploadFilesOptions { folderId?: string; importSource?: ImportSource; - license?: GQLLicenseInput; } export interface FileUploadApi { @@ -82,7 +83,7 @@ interface RejectedFile { file: File; } -const addFolderPathToFiles = async (acceptedFiles: FileWithPathAndLicenseInfo[]): Promise => { +const addFolderPathToFiles = async (acceptedFiles: FileWithCustomMetaData[]): Promise => { const newFiles = []; for (const file of acceptedFiles) { @@ -107,6 +108,8 @@ const addFolderPathToFiles = async (acceptedFiles: FileWithPathAndLicenseInfo[]) const newFile: FileWithFolderPath = new File([buffer], file.name, { lastModified: file.lastModified, type: file.type }); newFile.path = file.path; newFile.license = file.license; + newFile.title = file.title; + newFile.altText = file.altText; const folderPath = harmonizedPath?.split("/").slice(0, -1).join("/"); newFile.folderPath = folderPath && folderPath?.length > 0 ? folderPath : undefined; @@ -354,7 +357,7 @@ export const useDamFileUpload = (options: UploadDamFileOptions): FileUploadApi = const uploadFiles = async ( { acceptedFiles, fileRejections }: Files, - { folderId, importSource, license }: UploadFilesOptions, + { folderId, importSource }: UploadFilesOptions, ): Promise<{ hasError: boolean; rejectedFiles: RejectedFile[]; uploadedItems: NewlyUploadedItem[] }> => { setProgressDialogOpen(true); setValidationErrors(undefined); @@ -403,7 +406,6 @@ export const useDamFileUpload = (options: UploadDamFileOptions): FileUploadApi = scope, importSourceId: importSource?.importSourceId, importSourceType: importSource?.importSourceType, - license, }; const onUploadProgress = (progressEvent: ProgressEvent) => { diff --git a/packages/admin/cms-admin/src/form/file/upload.ts b/packages/admin/cms-admin/src/form/file/upload.ts index 131ab47816..252d778e13 100644 --- a/packages/admin/cms-admin/src/form/file/upload.ts +++ b/packages/admin/cms-admin/src/form/file/upload.ts @@ -1,14 +1,13 @@ import { AxiosInstance, AxiosRequestConfig, AxiosResponse, CancelToken } from "axios"; -import { GQLLicenseInput } from "../../graphql.generated"; +import { GQLUpdateDamFileInput } from "../../graphql.generated"; interface UploadFileData { - file: File; + file: File & Pick; scope: Record; folderId?: string; importSourceId?: string; importSourceType?: string; - license?: GQLLicenseInput; } interface UploadFileParams { @@ -40,8 +39,14 @@ function uploadOrReplaceByFilenameAndFolder({ formData.append("importSourceId", data.importSourceId); formData.append("importSourceType", data.importSourceType); } - if (data.license) { - formData.append("license", JSON.stringify(data.license)); + if (data.file.license) { + formData.append("license", JSON.stringify(data.file.license)); + } + if (data.file.title) { + formData.append("title", data.file.title); + } + if (data.file.altText) { + formData.append("altText", data.file.altText); } if (data.folderId !== undefined) { formData.append("folderId", data.folderId); @@ -59,11 +64,10 @@ function uploadOrReplaceByFilenameAndFolder({ } interface ReplaceFileByIdData { - file: File; + file: File & Pick; fileId: string; importSourceId?: string; importSourceType?: string; - license?: GQLLicenseInput; } export function replaceById({ @@ -79,8 +83,14 @@ export function replaceById({ formData.append("importSourceId", data.importSourceId); formData.append("importSourceType", data.importSourceType); } - if (data.license) { - formData.append("license", JSON.stringify(data.license)); + if (data.file.license) { + formData.append("license", JSON.stringify(data.file.license)); + } + if (data.file.title) { + formData.append("title", data.file.title); + } + if (data.file.altText) { + formData.append("altText", data.file.altText); } return apiClient.post("/dam/files/replace-by-id", formData, { diff --git a/packages/admin/cms-admin/src/preview/common/IFrameViewer.tsx b/packages/admin/cms-admin/src/preview/common/IFrameViewer.tsx index 4681b78b35..57966a68bb 100644 --- a/packages/admin/cms-admin/src/preview/common/IFrameViewer.tsx +++ b/packages/admin/cms-admin/src/preview/common/IFrameViewer.tsx @@ -109,7 +109,6 @@ const OuterFrame = styled("div", { shouldForwardProp: (prop) => prop !== "device width: 100%; height: 100%; box-sizing: border-box; - overflow-y: auto; will-change: transform; ${({ deviceConfig }) => @@ -127,7 +126,7 @@ const OuterFrame = styled("div", { shouldForwardProp: (prop) => prop !== "device const IFrame = styled("iframe", { shouldForwardProp: (prop) => prop !== "deviceConfig" })` display: block; border-style: unset; - border-width: 1px; + border-width: 0px; width: 100%; height: 100%; background-color: ${({ theme }) => theme.palette.common.white}; diff --git a/packages/api/cms-api/CHANGELOG.md b/packages/api/cms-api/CHANGELOG.md index 5ee84585e2..1a21179785 100644 --- a/packages/api/cms-api/CHANGELOG.md +++ b/packages/api/cms-api/CHANGELOG.md @@ -1,5 +1,12 @@ # @comet/cms-api +## 7.10.0 + +### Patch Changes + +- 7b2adae8b: API Generator: Don't generate an update input for the single generator + - @comet/blocks-api@7.10.0 + ## 7.9.0 ### Patch Changes diff --git a/packages/api/cms-api/package.json b/packages/api/cms-api/package.json index d327fb7385..d5a8e12028 100644 --- a/packages/api/cms-api/package.json +++ b/packages/api/cms-api/package.json @@ -1,6 +1,6 @@ { "name": "@comet/cms-api", - "version": "7.9.0", + "version": "7.10.0", "repository": { "type": "git", "url": "https://github.com/vivid-planet/comet", @@ -84,7 +84,7 @@ }, "devDependencies": { "@aws-sdk/types": "3.609.0", - "@comet/eslint-config": "workspace:^7.9.0", + "@comet/eslint-config": "workspace:^7.10.0", "@golevelup/ts-jest": "^0.4.0", "@kubernetes/client-node": "^0.18.1", "@mikro-orm/core": "^5.9.8", diff --git a/packages/api/cms-api/src/generator/generate-crud-input-no-update-input.spec.ts b/packages/api/cms-api/src/generator/generate-crud-input-no-update-input.spec.ts new file mode 100644 index 0000000000..83d4120d52 --- /dev/null +++ b/packages/api/cms-api/src/generator/generate-crud-input-no-update-input.spec.ts @@ -0,0 +1,36 @@ +import { BaseEntity, Entity, MikroORM, PrimaryKey } from "@mikro-orm/core"; +import { defineConfig } from "@mikro-orm/postgresql"; +import { LazyMetadataStorage } from "@nestjs/graphql/dist/schema-builder/storages/lazy-metadata.storage"; + +import { generateCrudInput } from "./generate-crud-input"; +import { lintSource } from "./utils/test-helper"; + +@Entity() +class TestEntity extends BaseEntity { + @PrimaryKey({ type: "uuid" }) + id: string; +} + +describe("GenerateCrudInput", () => { + it("shouldn't generate an update input", async () => { + LazyMetadataStorage.load(); + const orm = await MikroORM.init( + defineConfig({ + dbName: "test-db", + entities: [TestEntity], + }), + ); + + const out = await generateCrudInput({ targetDirectory: __dirname }, orm.em.getMetadata().get("TestEntity"), { + nested: false, + excludeFields: [], + generateUpdateInput: false, + }); + + const lintedOutput = await lintSource(out[0].content); + + expect(lintedOutput).not.toContain("TestEntityUpdateInput"); + + orm.close(); + }); +}); diff --git a/packages/api/cms-api/src/generator/generate-crud-input.ts b/packages/api/cms-api/src/generator/generate-crud-input.ts index 1ee2ab7281..c34922980f 100644 --- a/packages/api/cms-api/src/generator/generate-crud-input.ts +++ b/packages/api/cms-api/src/generator/generate-crud-input.ts @@ -44,7 +44,11 @@ export async function generateCrudInput( generatorOptions: { targetDirectory: string }, // eslint-disable-next-line @typescript-eslint/no-explicit-any metadata: EntityMetadata, - options: { nested: boolean; fileName?: string; className?: string; excludeFields: string[] } = { nested: false, excludeFields: [] }, + options: { nested: boolean; fileName?: string; className?: string; excludeFields: string[]; generateUpdateInput?: boolean } = { + nested: false, + excludeFields: [], + generateUpdateInput: true, + }, ): Promise { const generatedFiles: GeneratedFile[] = []; @@ -430,7 +434,7 @@ export class ${className} { } ${ - !options.nested + options.generateUpdateInput && !options.nested ? ` @InputType() export class ${className.replace(/Input$/, "")}UpdateInput extends PartialType(${className}) {} diff --git a/packages/api/cms-api/src/generator/generate-crud-single.ts b/packages/api/cms-api/src/generator/generate-crud-single.ts index f8829fbc87..593da88dbf 100644 --- a/packages/api/cms-api/src/generator/generate-crud-single.ts +++ b/packages/api/cms-api/src/generator/generate-crud-single.ts @@ -108,5 +108,8 @@ export async function generateCrudSingle(generatorOptions: CrudSingleGeneratorOp return generatedFiles; } - return [...(await generateCrudInput(generatorOptions, metadata)), ...(await generateCrudResolver())]; + return [ + ...(await generateCrudInput(generatorOptions, metadata, { nested: false, excludeFields: [], generateUpdateInput: false })), + ...(await generateCrudResolver()), + ]; } diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md index 851cf4dc58..047a376bcb 100644 --- a/packages/cli/CHANGELOG.md +++ b/packages/cli/CHANGELOG.md @@ -1,5 +1,7 @@ # @comet/cli +## 7.10.0 + ## 7.9.0 ## 7.8.0 diff --git a/packages/cli/package.json b/packages/cli/package.json index ebb93a4e69..cef1cef773 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@comet/cli", - "version": "7.9.0", + "version": "7.10.0", "repository": { "type": "git", "url": "https://github.com/vivid-planet/comet", @@ -30,7 +30,7 @@ "prettier": "^2.7.1" }, "devDependencies": { - "@comet/eslint-config": "workspace:^7.9.0", + "@comet/eslint-config": "workspace:^7.10.0", "@types/node": "^22.0.0", "eslint": "^8.0.0", "npm-run-all": "^4.1.5", diff --git a/packages/eslint-config/CHANGELOG.md b/packages/eslint-config/CHANGELOG.md index 46baeca7fb..87ff542f63 100644 --- a/packages/eslint-config/CHANGELOG.md +++ b/packages/eslint-config/CHANGELOG.md @@ -1,5 +1,11 @@ # @comet/eslint-config +## 7.10.0 + +### Patch Changes + +- @comet/eslint-plugin@7.10.0 + ## 7.9.0 ### Patch Changes diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json index 88bbb003eb..1de278590f 100644 --- a/packages/eslint-config/package.json +++ b/packages/eslint-config/package.json @@ -1,6 +1,6 @@ { "name": "@comet/eslint-config", - "version": "7.9.0", + "version": "7.10.0", "repository": { "type": "git", "url": "https://github.com/vivid-planet/comet", @@ -15,7 +15,7 @@ }, "dependencies": { "@calm/eslint-plugin-react-intl": "^1.4.1", - "@comet/eslint-plugin": "workspace:^7.9.0", + "@comet/eslint-plugin": "workspace:^7.10.0", "@next/eslint-plugin-next": "^14.0.0", "@typescript-eslint/eslint-plugin": "^5.48.2", "@typescript-eslint/parser": "^5.48.2", diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md index a9656bc40f..665b46c6a6 100644 --- a/packages/eslint-plugin/CHANGELOG.md +++ b/packages/eslint-plugin/CHANGELOG.md @@ -1,5 +1,7 @@ # @comet/eslint-plugin +## 7.10.0 + ## 7.9.0 ## 7.8.0 diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json index 0a5479e143..fe87c4f9fc 100644 --- a/packages/eslint-plugin/package.json +++ b/packages/eslint-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@comet/eslint-plugin", - "version": "7.9.0", + "version": "7.10.0", "main": "lib/index.js", "scripts": { "build": "$npm_execpath run clean && tsc", diff --git a/packages/site/cms-site/CHANGELOG.md b/packages/site/cms-site/CHANGELOG.md index cd84b01dd1..60432cd2ee 100644 --- a/packages/site/cms-site/CHANGELOG.md +++ b/packages/site/cms-site/CHANGELOG.md @@ -1,5 +1,7 @@ # @comet/cms-site +## 7.10.0 + ## 7.9.0 ## 7.8.0 diff --git a/packages/site/cms-site/package.json b/packages/site/cms-site/package.json index 1a74131f1d..14806d8af5 100644 --- a/packages/site/cms-site/package.json +++ b/packages/site/cms-site/package.json @@ -1,6 +1,6 @@ { "name": "@comet/cms-site", - "version": "7.9.0", + "version": "7.10.0", "repository": { "type": "git", "url": "https://github.com/vivid-planet/comet", @@ -33,8 +33,8 @@ "usehooks-ts": "^3.1.0" }, "devDependencies": { - "@comet/cli": "workspace:^7.9.0", - "@comet/eslint-config": "workspace:^7.9.0", + "@comet/cli": "workspace:^7.10.0", + "@comet/eslint-config": "workspace:^7.10.0", "@gitbeaker/node": "^34.0.0", "@types/draft-js": "^0.11.10", "@types/jest": "^29.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 931c6ffa3c..348fbf6e13 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -905,10 +905,10 @@ importers: packages/admin/admin: dependencies: '@comet/admin-icons': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-icons '@comet/admin-theme': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-theme '@mui/lab': specifier: ^6.0.0-beta.10 @@ -963,10 +963,10 @@ importers: specifier: ^7.20.12 version: 7.26.0 '@comet/admin-babel-preset': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-babel-preset '@comet/eslint-config': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../../eslint-config '@emotion/react': specifier: ^11.5.0 @@ -1131,10 +1131,10 @@ importers: packages/admin/admin-color-picker: dependencies: '@comet/admin': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin '@comet/admin-icons': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-icons clsx: specifier: ^1.1.1 @@ -1156,10 +1156,10 @@ importers: specifier: ^7.20.12 version: 7.26.0 '@comet/admin-babel-preset': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-babel-preset '@comet/eslint-config': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../../eslint-config '@mui/material': specifier: ^6.0.0 @@ -1207,10 +1207,10 @@ importers: packages/admin/admin-date-time: dependencies: '@comet/admin': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin '@comet/admin-icons': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-icons '@mui/utils': specifier: ^6.0.0 @@ -1232,10 +1232,10 @@ importers: specifier: ^7.20.12 version: 7.26.0 '@comet/admin-babel-preset': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-babel-preset '@comet/eslint-config': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../../eslint-config '@mui/material': specifier: ^6.0.0 @@ -1296,10 +1296,10 @@ importers: specifier: ^7.20.12 version: 7.26.0 '@comet/admin-babel-preset': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-babel-preset '@comet/eslint-config': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../../eslint-config '@mui/material': specifier: ^6.0.0 @@ -1356,10 +1356,10 @@ importers: packages/admin/admin-react-select: dependencies: '@comet/admin': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin '@comet/admin-icons': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-icons classnames: specifier: ^2.2.6 @@ -1372,10 +1372,10 @@ importers: specifier: ^7.20.12 version: 7.26.0 '@comet/admin-babel-preset': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-babel-preset '@comet/eslint-config': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../../eslint-config '@mui/material': specifier: ^6.0.0 @@ -1423,10 +1423,10 @@ importers: packages/admin/admin-rte: dependencies: '@comet/admin': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin '@comet/admin-icons': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-icons detect-browser: specifier: ^5.2.1 @@ -1451,10 +1451,10 @@ importers: specifier: ^7.20.12 version: 7.26.0 '@comet/admin-babel-preset': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-babel-preset '@comet/eslint-config': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../../eslint-config '@mui/material': specifier: ^6.0.0 @@ -1532,7 +1532,7 @@ importers: packages/admin/admin-theme: dependencies: '@comet/admin-icons': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-icons '@mui/utils': specifier: ^6.0.0 @@ -1545,10 +1545,10 @@ importers: specifier: ^7.20.12 version: 7.26.0 '@comet/admin-babel-preset': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-babel-preset '@comet/eslint-config': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../../eslint-config '@mui/material': specifier: ^6.0.0 @@ -1590,10 +1590,10 @@ importers: packages/admin/blocks-admin: dependencies: '@comet/admin': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin '@comet/admin-icons': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-icons '@mui/lab': specifier: ^6.0.0-beta.10 @@ -1624,13 +1624,13 @@ importers: specifier: ^7.20.12 version: 7.26.0 '@comet/admin-babel-preset': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-babel-preset '@comet/cli': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../../cli '@comet/eslint-config': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../../eslint-config '@emotion/react': specifier: ^11.5.0 @@ -1720,22 +1720,22 @@ importers: packages/admin/cms-admin: dependencies: '@comet/admin': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin '@comet/admin-date-time': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-date-time '@comet/admin-icons': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-icons '@comet/admin-rte': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-rte '@comet/admin-theme': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-theme '@comet/blocks-admin': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../blocks-admin '@graphql-tools/graphql-file-loader': specifier: ^7.5.17 @@ -1865,13 +1865,13 @@ importers: specifier: ^7.20.12 version: 7.26.0 '@comet/admin-babel-preset': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../admin-babel-preset '@comet/cli': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../../cli '@comet/eslint-config': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../../eslint-config '@emotion/react': specifier: ^11.5.0 @@ -2190,7 +2190,7 @@ importers: specifier: 3.609.0 version: 3.609.0 '@comet/eslint-config': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../../eslint-config '@golevelup/ts-jest': specifier: ^0.4.0 @@ -2332,7 +2332,7 @@ importers: version: 2.8.3 devDependencies: '@comet/eslint-config': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../eslint-config '@types/node': specifier: ^22.0.0 @@ -2359,7 +2359,7 @@ importers: specifier: ^1.4.1 version: 1.4.1 '@comet/eslint-plugin': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../eslint-plugin '@next/eslint-plugin-next': specifier: ^14.0.0 @@ -2463,10 +2463,10 @@ importers: version: 3.1.0(react@18.3.1) devDependencies: '@comet/cli': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../../cli '@comet/eslint-config': - specifier: workspace:^7.9.0 + specifier: workspace:^7.10.0 version: link:../../eslint-config '@gitbeaker/node': specifier: ^34.0.0 diff --git a/storybook/.eslintrc.json b/storybook/.eslintrc.json index 8f7840769a..2780cdd723 100644 --- a/storybook/.eslintrc.json +++ b/storybook/.eslintrc.json @@ -7,7 +7,8 @@ "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-non-null-assertion": "off", "no-console": "off", - "@comet/no-other-module-relative-import": "off" + "@comet/no-other-module-relative-import": "off", + "react/react-in-jsx-scope": "off" }, "overrides": [ { diff --git a/storybook/.storybook/preview.tsx b/storybook/.storybook/preview.tsx index 5c83db5aa8..172b5310df 100644 --- a/storybook/.storybook/preview.tsx +++ b/storybook/.storybook/preview.tsx @@ -7,7 +7,6 @@ import { createTheme as createMuiTheme, GlobalStyles } from "@mui/material"; import type { Preview } from "@storybook/react"; import { Locale as DateFnsLocale } from "date-fns"; import { de as deLocale, enUS as enLocale } from "date-fns/locale"; -import * as React from "react"; import { IntlProvider } from "react-intl"; import { worker } from "./mocks/browser"; diff --git a/storybook/src/admin-date-time/AllDateAndTimePickers.stories.tsx b/storybook/src/admin-date-time/AllDateAndTimePickers.stories.tsx index 6ec59a80cd..d0941f1b39 100644 --- a/storybook/src/admin-date-time/AllDateAndTimePickers.stories.tsx +++ b/storybook/src/admin-date-time/AllDateAndTimePickers.stories.tsx @@ -1,6 +1,5 @@ import { DateField, DateRange, DateRangeField, DateTimeField, TimeField, TimeRange, TimeRangeField } from "@comet/admin-date-time"; import { Box, Card, CardContent } from "@mui/material"; -import * as React from "react"; import { Form } from "react-final-form"; export default { diff --git a/storybook/src/admin-date-time/DatePicker.stories.tsx b/storybook/src/admin-date-time/DatePicker.stories.tsx index a4518dd85c..bb00b3fcd1 100644 --- a/storybook/src/admin-date-time/DatePicker.stories.tsx +++ b/storybook/src/admin-date-time/DatePicker.stories.tsx @@ -1,7 +1,6 @@ import { Field } from "@comet/admin"; import { FinalFormDatePicker } from "@comet/admin-date-time"; import { Card, CardContent } from "@mui/material"; -import * as React from "react"; import { Form } from "react-final-form"; export default { diff --git a/storybook/src/admin-date-time/DateRangePicker.stories.tsx b/storybook/src/admin-date-time/DateRangePicker.stories.tsx index 5254a90500..a610291437 100644 --- a/storybook/src/admin-date-time/DateRangePicker.stories.tsx +++ b/storybook/src/admin-date-time/DateRangePicker.stories.tsx @@ -1,7 +1,6 @@ import { Field } from "@comet/admin"; import { DateRange, FinalFormDateRangePicker } from "@comet/admin-date-time"; import { Card, CardContent } from "@mui/material"; -import * as React from "react"; import { Form } from "react-final-form"; export default { diff --git a/storybook/src/admin-date-time/DateTimePicker.stories.tsx b/storybook/src/admin-date-time/DateTimePicker.stories.tsx index aa18b33f11..14997432f8 100644 --- a/storybook/src/admin-date-time/DateTimePicker.stories.tsx +++ b/storybook/src/admin-date-time/DateTimePicker.stories.tsx @@ -1,7 +1,6 @@ import { Field } from "@comet/admin"; import { FinalFormDateTimePicker } from "@comet/admin-date-time"; import { Card, CardContent } from "@mui/material"; -import * as React from "react"; import { Form } from "react-final-form"; export default { diff --git a/storybook/src/admin-date-time/TimePicker.stories.tsx b/storybook/src/admin-date-time/TimePicker.stories.tsx index c29bc0a5ab..a91f13bae3 100644 --- a/storybook/src/admin-date-time/TimePicker.stories.tsx +++ b/storybook/src/admin-date-time/TimePicker.stories.tsx @@ -1,7 +1,6 @@ import { Field } from "@comet/admin"; import { FinalFormTimePicker } from "@comet/admin-date-time"; import { Card, CardContent } from "@mui/material"; -import * as React from "react"; import { Form } from "react-final-form"; export default { diff --git a/storybook/src/admin-date-time/TimeRangePicker.stories.tsx b/storybook/src/admin-date-time/TimeRangePicker.stories.tsx index 3daf9a9dfe..c459463419 100644 --- a/storybook/src/admin-date-time/TimeRangePicker.stories.tsx +++ b/storybook/src/admin-date-time/TimeRangePicker.stories.tsx @@ -1,7 +1,6 @@ import { Field } from "@comet/admin"; import { FinalFormTimeRangePicker, TimeRange } from "@comet/admin-date-time"; import { Card, CardContent } from "@mui/material"; -import * as React from "react"; import { Form } from "react-final-form"; export default { diff --git a/storybook/src/admin-icons/IconUsage.stories.tsx b/storybook/src/admin-icons/IconUsage.stories.tsx index 7f07d7a884..3e0d98191c 100644 --- a/storybook/src/admin-icons/IconUsage.stories.tsx +++ b/storybook/src/admin-icons/IconUsage.stories.tsx @@ -1,6 +1,5 @@ import { Cookie, Error, ThreeDotSaving } from "@comet/admin-icons"; import { Card, CardContent, Grid, Typography } from "@mui/material"; -import * as React from "react"; export default { title: "@comet/admin-icons", diff --git a/storybook/src/admin-react-select/FinalFormReactSelect.stories.tsx b/storybook/src/admin-react-select/FinalFormReactSelect.stories.tsx index 9562019c8f..cab9c9a1fd 100644 --- a/storybook/src/admin-react-select/FinalFormReactSelect.stories.tsx +++ b/storybook/src/admin-react-select/FinalFormReactSelect.stories.tsx @@ -1,7 +1,6 @@ import { Field, FinalFormInput, FormSection } from "@comet/admin"; import { FinalFormReactSelectStaticOptions } from "@comet/admin-react-select"; import { Card, CardContent } from "@mui/material"; -import * as React from "react"; import { Form } from "react-final-form"; const options = [ diff --git a/storybook/src/admin-react-select/FinalFormReactSelectDialog.stories.tsx b/storybook/src/admin-react-select/FinalFormReactSelectDialog.stories.tsx index da3007dd4b..d45d64df8f 100644 --- a/storybook/src/admin-react-select/FinalFormReactSelectDialog.stories.tsx +++ b/storybook/src/admin-react-select/FinalFormReactSelectDialog.stories.tsx @@ -1,7 +1,6 @@ import { CancelButton, Field, OkayButton } from "@comet/admin"; import { FinalFormReactSelectStaticOptions } from "@comet/admin-react-select"; import { Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material"; -import * as React from "react"; import { Form } from "react-final-form"; const options = [ diff --git a/storybook/src/admin-react-select/FinalFormReactSelectDisabledOption.stories.tsx b/storybook/src/admin-react-select/FinalFormReactSelectDisabledOption.stories.tsx index cbaca17bdf..ba31c43156 100644 --- a/storybook/src/admin-react-select/FinalFormReactSelectDisabledOption.stories.tsx +++ b/storybook/src/admin-react-select/FinalFormReactSelectDisabledOption.stories.tsx @@ -1,7 +1,6 @@ import { Field, FormSection } from "@comet/admin"; import { FinalFormReactSelectStaticOptions } from "@comet/admin-react-select"; import { Card, CardContent } from "@mui/material"; -import * as React from "react"; import { Form } from "react-final-form"; const options = [ diff --git a/storybook/src/admin-react-select/ReactSelectDisabledOption.stories.tsx b/storybook/src/admin-react-select/ReactSelectDisabledOption.stories.tsx index 664657b807..c9c74cb47f 100644 --- a/storybook/src/admin-react-select/ReactSelectDisabledOption.stories.tsx +++ b/storybook/src/admin-react-select/ReactSelectDisabledOption.stories.tsx @@ -1,7 +1,6 @@ import { FormSection } from "@comet/admin"; import { ReactSelect } from "@comet/admin-react-select"; import { Card, CardContent } from "@mui/material"; -import * as React from "react"; const options = [ { value: "chocolate", label: "Chocolate" }, diff --git a/storybook/src/admin-rte/Field.stories.tsx b/storybook/src/admin-rte/Field.stories.tsx index 4e95b884a0..dabc005e2d 100644 --- a/storybook/src/admin-rte/Field.stories.tsx +++ b/storybook/src/admin-rte/Field.stories.tsx @@ -1,7 +1,7 @@ import { Field, FinalFormInput, FormSection } from "@comet/admin"; import { createFinalFormRte } from "@comet/admin-rte"; import { Button, Card, CardContent, Grid } from "@mui/material"; -import * as React from "react"; +import { useReducer, useState } from "react"; import { Form } from "react-final-form"; const { RteField, RteReadOnly } = createFinalFormRte(); @@ -11,8 +11,8 @@ export default { }; export const _Field = () => { - const [submittedValue, setSubmittedValue] = React.useState<{ rteContent: any }>({ rteContent: undefined }); - const [disabled, toggleDisabled] = React.useReducer((s) => !s, false); + const [submittedValue, setSubmittedValue] = useState<{ rteContent: any }>({ rteContent: undefined }); + const [disabled, toggleDisabled] = useReducer((s) => !s, false); return ( diff --git a/storybook/src/admin-rte/FieldAllOptions.stories.tsx b/storybook/src/admin-rte/FieldAllOptions.stories.tsx index 27d7769064..82deecfc2b 100644 --- a/storybook/src/admin-rte/FieldAllOptions.stories.tsx +++ b/storybook/src/admin-rte/FieldAllOptions.stories.tsx @@ -1,7 +1,7 @@ import { Field, FormSection } from "@comet/admin"; import { createFinalFormRte } from "@comet/admin-rte"; import { Button, Card, CardContent, Grid } from "@mui/material"; -import * as React from "react"; +import { useState } from "react"; import { Form } from "react-final-form"; import { ContentFormat, defaultContent, makeApiOptions, rteOptions } from "./RteAllOptions.stories"; @@ -17,7 +17,7 @@ export default { export const FieldAllOptions = { render: () => { - const [submittedValue, setSubmittedValue] = React.useState<{ rteContent: any }>({ rteContent: defaultContent }); + const [submittedValue, setSubmittedValue] = useState<{ rteContent: any }>({ rteContent: defaultContent }); return ( diff --git a/storybook/src/admin-rte/MaxListLevel.stories.tsx b/storybook/src/admin-rte/MaxListLevel.stories.tsx index 79bde126cb..199b3ac82f 100644 --- a/storybook/src/admin-rte/MaxListLevel.stories.tsx +++ b/storybook/src/admin-rte/MaxListLevel.stories.tsx @@ -1,6 +1,6 @@ import { IRteRef, makeRteApi, Rte } from "@comet/admin-rte"; import { Box, Card, CardContent } from "@mui/material"; -import * as React from "react"; +import { useRef } from "react"; import { PrintEditorState, useAutoFocus } from "./helper"; @@ -128,7 +128,7 @@ export const MaxListLevel = { }); // focus the editor to see the cursor immediately - const editorRef = React.useRef(); + const editorRef = useRef(); useAutoFocus(editorRef); return ( diff --git a/storybook/src/admin-rte/Rte.stories.tsx b/storybook/src/admin-rte/Rte.stories.tsx index 04ade10b86..459919bb6e 100644 --- a/storybook/src/admin-rte/Rte.stories.tsx +++ b/storybook/src/admin-rte/Rte.stories.tsx @@ -1,6 +1,6 @@ import { IRteRef, makeRteApi, Rte } from "@comet/admin-rte"; import { Box, Card, CardContent } from "@mui/material"; -import * as React from "react"; +import { useRef } from "react"; import { exampleContent, PrintEditorState, useAutoFocus } from "./helper"; @@ -15,7 +15,7 @@ export const RteMinimalConfiguration = { const { editorState, setEditorState } = useRteApi({ defaultValue: JSON.stringify(exampleContent) }); // defaultValue is optional // focus the editor to see the cursor immediately - const editorRef = React.useRef(); + const editorRef = useRef(); useAutoFocus(editorRef); return ( diff --git a/storybook/src/admin-rte/RteAllOptions.stories.tsx b/storybook/src/admin-rte/RteAllOptions.stories.tsx index 13f8b04139..563165718a 100644 --- a/storybook/src/admin-rte/RteAllOptions.stories.tsx +++ b/storybook/src/admin-rte/RteAllOptions.stories.tsx @@ -1,7 +1,7 @@ import { IMakeRteApiProps, IRteApiProps, IRteOptions, IRteRef, LinkDecorator, makeRteApi, Rte } from "@comet/admin-rte"; import { Box, Card, CardContent, Typography } from "@mui/material"; import { convertFromRaw, convertToRaw } from "draft-js"; -import * as React from "react"; +import { ReactNode, useRef } from "react"; import { exampleContent, PrintEditorState, useAutoFocus } from "./helper"; @@ -25,12 +25,12 @@ export const apiOptions: IRteApiProps = { debounceDelay: 400, // delay when onDebouncedContentChange after editor content changed }; -const RedCustomHeader: React.FC = ({ children }) => ( +const RedCustomHeader = ({ children }: { children?: ReactNode }) => ( {children} ); -const GreenCustomHeader: React.FC = ({ children }) =>

{children}

; +const GreenCustomHeader = ({ children }: { children?: ReactNode }) =>

{children}

; export const rteOptions: IRteOptions = { supports: [ @@ -112,7 +112,7 @@ export const RteAllOptions = { const { editorState, setEditorState } = useRteApi(apiOptions); // focus the editor to see the cursor immediately - const editorRef = React.useRef(); + const editorRef = useRef(); useAutoFocus(editorRef); return ( diff --git a/storybook/src/admin-rte/RteCustom.stories.tsx b/storybook/src/admin-rte/RteCustom.stories.tsx index cf41c9d91c..496debec93 100644 --- a/storybook/src/admin-rte/RteCustom.stories.tsx +++ b/storybook/src/admin-rte/RteCustom.stories.tsx @@ -1,6 +1,6 @@ import { IRteOptions, IRteRef, makeRteApi, Rte } from "@comet/admin-rte"; import { Box, Card, CardContent, Typography } from "@mui/material"; -import * as React from "react"; +import { useRef } from "react"; import { PrintEditorState, useAutoFocus } from "./helper"; @@ -20,7 +20,7 @@ export const RteCustomized = { const { editorState, setEditorState } = useRteApi(); // focus the editor to see the cursor immediately - const editorRef = React.useRef(); + const editorRef = useRef(); useAutoFocus(editorRef); return ( diff --git a/storybook/src/admin-rte/RteCustomInlineStyles.stories.tsx b/storybook/src/admin-rte/RteCustomInlineStyles.stories.tsx index ee8a1d5eb5..fb90c9d69c 100644 --- a/storybook/src/admin-rte/RteCustomInlineStyles.stories.tsx +++ b/storybook/src/admin-rte/RteCustomInlineStyles.stories.tsx @@ -1,7 +1,7 @@ import { Favorite } from "@comet/admin-icons"; import { IRteOptions, IRteRef, makeRteApi, Rte } from "@comet/admin-rte"; import { Box, Card, CardContent } from "@mui/material"; -import * as React from "react"; +import { useRef } from "react"; import { PrintEditorState, useAutoFocus } from "./helper"; @@ -29,7 +29,7 @@ export const CustomInlineStyles = { const { editorState, setEditorState } = useRteApi(); // focus the editor to see the cursor immediately - const editorRef = React.useRef(); + const editorRef = useRef(); useAutoFocus(editorRef); return ( diff --git a/storybook/src/admin-rte/RteDisable.stories.tsx b/storybook/src/admin-rte/RteDisable.stories.tsx index d63b244d7d..953809e020 100644 --- a/storybook/src/admin-rte/RteDisable.stories.tsx +++ b/storybook/src/admin-rte/RteDisable.stories.tsx @@ -1,7 +1,7 @@ import { Toolbar, ToolbarActions, ToolbarFillSpace } from "@comet/admin"; import { IRteRef, makeRteApi, Rte } from "@comet/admin-rte"; import { Box, Button, Card, CardContent } from "@mui/material"; -import * as React from "react"; +import { useReducer, useRef } from "react"; import { exampleContent, PrintEditorState, useAutoFocus } from "./helper"; @@ -14,10 +14,10 @@ export default { export const RteDisable = { render: () => { const { editorState, setEditorState } = useRteApi({ defaultValue: JSON.stringify(exampleContent) }); // defaultValue is optional - const [disabled, toggleDisabled] = React.useReducer((s) => !s, false); + const [disabled, toggleDisabled] = useReducer((s) => !s, false); // focus the editor to see the cursor immediately - const editorRef = React.useRef(); + const editorRef = useRef(); useAutoFocus(editorRef); return ( diff --git a/storybook/src/admin-rte/RteFilterContent.stories.tsx b/storybook/src/admin-rte/RteFilterContent.stories.tsx index 9960496e48..0617a178f1 100644 --- a/storybook/src/admin-rte/RteFilterContent.stories.tsx +++ b/storybook/src/admin-rte/RteFilterContent.stories.tsx @@ -8,7 +8,7 @@ import { } from "@comet/admin-rte"; import { Box, Card, CardContent, Typography } from "@mui/material"; import { EditorState, EntityInstance } from "draft-js"; -import * as React from "react"; +import { useRef } from "react"; import { PrintEditorState, useAutoFocus } from "./helper"; @@ -41,7 +41,7 @@ export const RteFilterContent = { const { editorState, setEditorState } = useRteApi(); // focus the editor to see the cursor immediately - const editorRef = React.useRef(); + const editorRef = useRef(); useAutoFocus(editorRef); return ( diff --git a/storybook/src/admin-rte/RteMaxBlocks.stories.tsx b/storybook/src/admin-rte/RteMaxBlocks.stories.tsx index 2a94d3155c..16b1b15247 100644 --- a/storybook/src/admin-rte/RteMaxBlocks.stories.tsx +++ b/storybook/src/admin-rte/RteMaxBlocks.stories.tsx @@ -1,6 +1,6 @@ import { IRteOptions, IRteRef, makeRteApi, Rte } from "@comet/admin-rte"; import { Box, Card, CardContent } from "@mui/material"; -import * as React from "react"; +import { useRef } from "react"; import { PrintEditorState, useAutoFocus } from "./helper"; @@ -45,7 +45,7 @@ export const RteMaxBlocksSet = { }); // focus the editor to see the cursor immediately - const editorRef = React.useRef(); + const editorRef = useRef(); useAutoFocus(editorRef); return ( diff --git a/storybook/src/admin-rte/RteReadOnly.stories.tsx b/storybook/src/admin-rte/RteReadOnly.stories.tsx index 92e9e037ba..247b248ad4 100644 --- a/storybook/src/admin-rte/RteReadOnly.stories.tsx +++ b/storybook/src/admin-rte/RteReadOnly.stories.tsx @@ -1,12 +1,12 @@ import { IRteReadOnlyOptions, makeRteApi, RteReadOnly } from "@comet/admin-rte"; import { Box, Card, CardContent } from "@mui/material"; -import * as React from "react"; +import { ReactNode } from "react"; import { exampleContent, PrintEditorState } from "./helper"; const [useRteApi] = makeRteApi(); -const GreenCustomHeader: React.FC = ({ children }) => {children}; +const GreenCustomHeader = ({ children }: { children?: ReactNode }) => {children}; const rteOptions: IRteReadOnlyOptions = { blocktypeMap: { diff --git a/storybook/src/admin-rte/RteSortBlockTypes.stories.tsx b/storybook/src/admin-rte/RteSortBlockTypes.stories.tsx index ed20eea29b..a0c1db60c0 100644 --- a/storybook/src/admin-rte/RteSortBlockTypes.stories.tsx +++ b/storybook/src/admin-rte/RteSortBlockTypes.stories.tsx @@ -1,6 +1,5 @@ import { IRteOptions, makeRteApi, Rte } from "@comet/admin-rte"; import { Box, Card, CardContent } from "@mui/material"; -import * as React from "react"; const rteOptions: IRteOptions = { blocktypeMap: { diff --git a/storybook/src/admin-rte/RteTheming.stories.tsx b/storybook/src/admin-rte/RteTheming.stories.tsx index 3fbc61e241..9e51454756 100644 --- a/storybook/src/admin-rte/RteTheming.stories.tsx +++ b/storybook/src/admin-rte/RteTheming.stories.tsx @@ -1,6 +1,5 @@ import { makeRteApi, Rte } from "@comet/admin-rte"; import { Box, Card, CardContent } from "@mui/material"; -import * as React from "react"; const [useRteApi] = makeRteApi(); diff --git a/storybook/src/admin-rte/SaveAsDraftObject.stories.tsx b/storybook/src/admin-rte/SaveAsDraftObject.stories.tsx index c510951ef0..94194c4817 100644 --- a/storybook/src/admin-rte/SaveAsDraftObject.stories.tsx +++ b/storybook/src/admin-rte/SaveAsDraftObject.stories.tsx @@ -1,7 +1,7 @@ import { IMakeRteApiProps, makeRteApi, OnDebouncedContentChangeFn, Rte } from "@comet/admin-rte"; import { Box, Card, CardContent } from "@mui/material"; import { convertFromRaw, convertToRaw, RawDraftContentState } from "draft-js"; -import * as React from "react"; +import { useState } from "react"; import { PrintAnything } from "./helper"; @@ -48,7 +48,7 @@ export default { export const SaveAsRawDraftJsObject = { render: () => { - const [savableContent, setSavableContent] = React.useState(defaultValue); + const [savableContent, setSavableContent] = useState(defaultValue); const handleDebouncedContentChange: OnDebouncedContentChangeFn = (innerEditorState, convertStateToRawContent) => { setSavableContent(convertStateToRawContent(innerEditorState)); diff --git a/storybook/src/admin-rte/SaveAsHtml.stories.tsx b/storybook/src/admin-rte/SaveAsHtml.stories.tsx index 661a518374..6f2189f121 100644 --- a/storybook/src/admin-rte/SaveAsHtml.stories.tsx +++ b/storybook/src/admin-rte/SaveAsHtml.stories.tsx @@ -2,7 +2,7 @@ import { IMakeRteApiProps, makeRteApi, OnDebouncedContentChangeFn, Rte } from "@ import { Box, Card, CardContent } from "@mui/material"; import { ContentState, convertFromHTML } from "draft-js"; import { stateToHTML } from "draft-js-export-html"; -import * as React from "react"; +import { useState } from "react"; import { PrintAnything } from "./helper"; @@ -28,7 +28,7 @@ export default { export const SaveAsHtml = { render: () => { - const [savableContent, setSavableContent] = React.useState(defaultValue); + const [savableContent, setSavableContent] = useState(defaultValue); const handleDebouncedContentChange: OnDebouncedContentChangeFn = (innerEditorState, convertStateToRawContent) => { setSavableContent(convertStateToRawContent(innerEditorState)); diff --git a/storybook/src/admin-rte/SaveAsMD.stories.tsx b/storybook/src/admin-rte/SaveAsMD.stories.tsx index dc2bbc6561..3977052666 100644 --- a/storybook/src/admin-rte/SaveAsMD.stories.tsx +++ b/storybook/src/admin-rte/SaveAsMD.stories.tsx @@ -2,7 +2,7 @@ import { IMakeRteApiProps, makeRteApi, OnDebouncedContentChangeFn, Rte } from "@ import { Box, Card, CardContent } from "@mui/material"; import { stateToMarkdown } from "draft-js-export-markdown"; import { stateFromMarkdown } from "draft-js-import-markdown"; -import * as React from "react"; +import { useState } from "react"; import { PrintAnything } from "./helper"; @@ -31,7 +31,7 @@ export default { export const SaveAsMd = { render: () => { - const [savableContent, setSavableContent] = React.useState(defaultValue); + const [savableContent, setSavableContent] = useState(defaultValue); const handleDebouncedContentChange: OnDebouncedContentChangeFn = (innerEditorState, convertStateToRawContent) => { setSavableContent(convertStateToRawContent(innerEditorState)); diff --git a/storybook/src/admin-rte/SynchronizedEditors.stories.tsx b/storybook/src/admin-rte/SynchronizedEditors.stories.tsx index 4a8db8bf5d..dca3707608 100644 --- a/storybook/src/admin-rte/SynchronizedEditors.stories.tsx +++ b/storybook/src/admin-rte/SynchronizedEditors.stories.tsx @@ -1,7 +1,7 @@ import { IRteRef, makeRteApi, Rte } from "@comet/admin-rte"; import { Grid, Typography } from "@mui/material"; import { EditorState } from "draft-js"; -import * as React from "react"; +import { useRef, useState } from "react"; import { PrintEditorState, useAutoFocus } from "./helper"; @@ -14,10 +14,10 @@ export default { export const SynchronizedRtEs = { render: () => { const { editorState, setEditorState } = useRteApi(); - const [activeEditor, setActiveEditor] = React.useState<"left" | "right">("left"); + const [activeEditor, setActiveEditor] = useState<"left" | "right">("left"); // focus the editor to see the cursor immediately - const leftEditorRef = React.useRef(); + const leftEditorRef = useRef(); useAutoFocus(leftEditorRef); return ( diff --git a/storybook/src/admin-rte/ToolbarButtonsSubmitForm.stories.tsx b/storybook/src/admin-rte/ToolbarButtonsSubmitForm.stories.tsx index 52cf038b70..87f2abf447 100644 --- a/storybook/src/admin-rte/ToolbarButtonsSubmitForm.stories.tsx +++ b/storybook/src/admin-rte/ToolbarButtonsSubmitForm.stories.tsx @@ -1,6 +1,5 @@ import { Field } from "@comet/admin"; import { createFinalFormRte } from "@comet/admin-rte"; -import * as React from "react"; import { Form } from "react-final-form"; const { RteField } = createFinalFormRte(); diff --git a/storybook/src/admin-rte/helper.tsx b/storybook/src/admin-rte/helper.tsx index e6583c06e9..5eb0679b12 100644 --- a/storybook/src/admin-rte/helper.tsx +++ b/storybook/src/admin-rte/helper.tsx @@ -2,10 +2,10 @@ import { FormSection } from "@comet/admin"; import { IRteRef } from "@comet/admin-rte"; import { Card, CardContent } from "@mui/material"; import { convertToRaw, EditorState, RawDraftContentState } from "draft-js"; -import * as React from "react"; +import { MutableRefObject, useEffect } from "react"; -export function useAutoFocus(editorRef: React.MutableRefObject) { - React.useEffect(() => { +export function useAutoFocus(editorRef: MutableRefObject) { + useEffect(() => { if (editorRef && editorRef.current) { editorRef.current.focus(); } diff --git a/storybook/src/admin/FieldSet.stories.tsx b/storybook/src/admin/FieldSet.stories.tsx index 094d8d93ff..db99ea3bf9 100644 --- a/storybook/src/admin/FieldSet.stories.tsx +++ b/storybook/src/admin/FieldSet.stories.tsx @@ -2,7 +2,6 @@ import { FieldSet, Tooltip } from "@comet/admin"; import { Info } from "@comet/admin-icons"; import { Chip, Stack, Typography } from "@mui/material"; import { Box } from "@mui/system"; -import React from "react"; const textContent = "FieldSet content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."; diff --git a/storybook/src/admin/FullHeightContent.stories.tsx b/storybook/src/admin/FullHeightContent.stories.tsx index 40cd61657c..0c02589022 100644 --- a/storybook/src/admin/FullHeightContent.stories.tsx +++ b/storybook/src/admin/FullHeightContent.stories.tsx @@ -12,7 +12,6 @@ import { import { Add } from "@comet/admin-icons"; import { ContentScopeIndicator } from "@comet/cms-admin"; import { Button } from "@mui/material"; -import React from "react"; import { ExampleDataGrid } from "../helpers/ExampleDataGrid"; import { masterLayoutDecorator, stackRouteDecorator } from "../helpers/storyDecorators"; diff --git a/storybook/src/admin/Typography.stories.tsx b/storybook/src/admin/Typography.stories.tsx index 977392f2d8..f99a8fdf68 100644 --- a/storybook/src/admin/Typography.stories.tsx +++ b/storybook/src/admin/Typography.stories.tsx @@ -1,5 +1,4 @@ import { Divider, Grid, Paper, Typography } from "@mui/material"; -import React from "react"; export default { title: "@comet/admin/Typography", diff --git a/storybook/src/admin/alert/Alert.stories.tsx b/storybook/src/admin/alert/Alert.stories.tsx index d78e8c1dc3..9a8e47c56c 100644 --- a/storybook/src/admin/alert/Alert.stories.tsx +++ b/storybook/src/admin/alert/Alert.stories.tsx @@ -2,7 +2,6 @@ import { Alert, OkayButton, SaveButton } from "@comet/admin"; import { ArrowRight } from "@comet/admin-icons"; import { Button, Card, CardContent, Typography } from "@mui/material"; import { Stack } from "@mui/system"; -import React from "react"; export default { title: "@comet/admin/alert/Alert", diff --git a/storybook/src/admin/alert/AlertInSnackbar.stories.tsx b/storybook/src/admin/alert/AlertInSnackbar.stories.tsx index 75b02fa7e5..bdba47312e 100644 --- a/storybook/src/admin/alert/AlertInSnackbar.stories.tsx +++ b/storybook/src/admin/alert/AlertInSnackbar.stories.tsx @@ -1,6 +1,6 @@ import { Alert } from "@comet/admin"; import { Button, Snackbar } from "@mui/material"; -import React from "react"; +import { useState } from "react"; export default { title: "@comet/admin/alert/Alert", @@ -8,7 +8,7 @@ export default { export const AlertInSnackbar = { render: () => { - const [showSnackbar, setShowSnackbar] = React.useState(false); + const [showSnackbar, setShowSnackbar] = useState(false); return ( <>