Skip to content

2.0.0
Compare
Choose a tag to compare
@kaufmo kaufmo released this 03 Nov 07:18
· 4219 commits to main since this release
v2.0.0
5768ac6
This commit was signed with the committer’s verified signature.
kaufmo Alexander Kaufmann
GPG key ID: 31874B56126B72CA
Learn about vigilant mode.

Highlights:

  • Added package @comet/admin-icons
  • Added a standard toolbar that can be used as an application wide element with consistent styling containing navigation, action buttons and filters
  • Added the ability to customize components, similar to material-ui components (either globally through theme-overrides and theme-props or individually with classes)
  • Started docs of components and general information about development of Comet Admin
  • Implemented ErrorBoundaries that catch errors in the component tree without crashing the application

@comet/admin

Incompatible Changes

  • createMuiTheme has been removed from @comet/admin in favour of createTheme from @material-ui/core
  • Removed VPAdminInputBase and getDefaultVPAdminInputStyles, in favour of InputBase from Material-UI
  • Removed FinalFormTextField in favour of FinalFormInput
    • MuiTextField should not be used inside comet-admin projects, it's design is not compatible with the comet-ci.
  • Usage and default layout of Field has changed
    • The fieldContainer prop has been removed, in favour of the variant prop and theme-augmentation of CometAdminFormFieldContainer
    • Removed FieldContainerLabelAbove component (the new default looks like this)
    • The old default layout of Field can be restored by adding the following to the theme: 
      {
    props: {
        CometAdminFormFieldContainer: {
            variant: 'horizontal'
        }
    },
    overrides: {
        CometAdminFormFieldContainer: {
            horizontal: {
                "& $label": {
                    width: `${100 / 3}%`
                },
                "& $inputContainer": {
                    width: `${200 / 3}%`
                }
            }
        }
    }
}
  • Changes to Menu component
    • Removed default styling in favour of the ability to style the component using the theme without the need to override these default styles
    • Removed the permanentMenuMinWidth prop, now variant can be passed instead
      • This allows for more control, like giving certain pages more width by always using the temporary variant on those pages
    • Allows maximum item-nesting of two levels
  • Changes to Stack
    • Removed prop components.breadcrumbsContainer in favour of a div that can be styled using the theme (overrides -> CometAdminStack -> breadcrumbs)
  • Removed component FixedLeftRightLayout
  • Removed FormPaper, the same effect can be accomplished with a CardContent within a Card.
  • Changes to MasterLayout
    • The default values for content-spacing and header-height have changed slightly
    • When adding a custom headerComponent, the component should now be built using the AppHeader system (see docs).
    • Removed prop hideToolbarMenuIcon, it is no longer necessary when building a custom header using the AppHeader system.
    • The html tag <main> was removed from the MasterTemplate and a new component MainContent is introduced
      • The best way to handle this change is to wrap your main content with the MainContent component
  • Changes to Tabs & RouterTabs
    • Removed AppBar from Tabs, you can style CometAdminTabs-root to bring back the previous appearance, if necessary
    • Removed tabLabel prop, use label instead
    • In RouterTabs, the props variant and indicatorColor now need to be set in the tabsProps prop
  <MasterLayout headerComponent={AppHeader} menuComponent={AppMenu}>
    <Toolbar />
    <MainContent>
     /* You main content goes here*/
    </MainContent>
  </MasterLayout
  • removed showBreadcrumbs Prop from Stack and added Breadcrumbs component for compatibility. It's recommended at all to use new Toolbar System
    old:
   <Stack topLevelTitle="Stack Nested">
       <StackSwitch>
           <StackPage name="page1">
               <Page1 />
           </StackPage>
           <StackPage name="page2">page2-2</StackPage>
       </StackSwitch>
   </Stack>

  • Changes to Table (CometAdminTable)

    • Removed alternating background-color of body-rows in comet-theme, can be restored by adding the following styles to CometAdminTableBodyRow:

      odd: {
    backgroundColor: neutrals[50],
}

    • Removed background-color from TableHead, can be restored by adding the following styles to MuiTableHead:

      root: {
    backgroundColor: neutrals[100],
}

new:

   <Stack topLevelTitle="Stack Nested">
       <StackBreadcrumbs />
       <StackSwitch>
           <StackPage name="page1">
               <Page1 />
           </StackPage>
           <StackPage name="page2">page2-2</StackPage>
       </StackSwitch>
   </Stack>

  • Changes to DndOrderRow

    DndOrderRow requires new peer dependencies and a DndProvider setup in the application.

    • Install peer dependencies in your application

      npm install react-dnd@"~14"
npm install react-dnd-html5-backend@"~14"

    • Put your application code inside a DndProvider

      import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

export function App() {
    return (
        <DndProvider backend={HTML5Backend}>
                ... your application code
        </DndProvider>
    )
}

Migration Guide

install jscodeshift in your project - otherwise you will get a lodash error

npm install jscodeshift --dev

Clone this repository into your project repository. If you have a monorepo, you have to clone it into the right subfolder.

An example can be found here.

Migrate FinalForm

Final Form: Following props have been removed: renderButtons and components

npx jscodeshift --extensions=tsx --parser=tsx -t comet-admin/codemods/2.0.0/final-form-dissolve-final-form-save-cancel-buttons.ts src/

Migrate Stack

Follow props has been removed: showBreadcrumbsand showBackButton

npx jscodeshift --extensions=tsx --parser=tsx -t comet-admin/codemods/2.0.0/stack-dissolve-breadcrumbs.ts src/
npx jscodeshift --extensions=tsx --parser=tsx -t comet-admin/codemods/2.0.0/stack-dissolve-backbutton.ts  src/

Migrate Theme

Automatic migrations using codeshift are available (use -d for dry-run):

npx jscodeshift --extensions=ts --parser=ts -t comet-admin/codemods/2.0.0/update-theme.ts src/
npx jscodeshift --extensions=tsx --parser=tsx -t comet-admin/codemods/2.0.0/update-theme.ts src/

Other Notable Changes

  • Added ClearInputButton, this component can be used as endAdornment, to clear inputs
    • Can be themed with CometAdminClearInputButton (props and overrides)
  • New methods of customization and default layout for Field
    • Added theme-augmentation for FieldContainer
    • New variant prop to select between vertical and horizontal positioning of label and input
    • Label is now positioned above input by default (variant={"vertical"})
  • The Menu component and it's items can be customized using the material-ui theme
    • Allows custom styling of the Menu, MenuItem and MenuCollapsibleItem (theme -> overrides -> CometAdminMenu/CometAdminMenuItem/CometAdminMenuCollapsibleItem)
    • Allows using custom open/close icons for CollapsibleItem (theme -> props -> CometAdminMenuCollapsibleItem -> openedIcon/closedIcon)
  • The MasterLayout component can be customized using the material-ui theme
    • Using the new headerHeight prop, the top-spacing of the content and the menu, will now be adjusted automatically
  • add onAfterSubmit to FinalForm
  • add useStoredState() hook
  • Added a new FinalFormRangeInput Component
  • add SplitButton - combine multiple buttons behind one ButtonGroup
  • add SaveButton which handles and displays state(idle, saving, success and error)
  • add SnackbarProvider, useSnackbarApi() hook and UndoSnackbar
  • add FinalFormSaveCancelButtonsLegacy as drop in replacement for removed Cancel and Save Button in FinalForm.
  • add PrettyBytes component for formatting file sizes and other byte values
  • Add validateWarning validator to Field and FinalForm.
  • Add open and onOpenChange props to AppHeaderDropdown that allow replacing the internal open state with an external state
  • add getTargetUrl() to StackSwitchApi
  • add StackLink component for navigating within a Stack via hyperlinks
  • allow boolean | undefined | null as children of RouterTabs
  • expose selectionApi through useEditDialog

@comet/admin-color-picker

Incompatible Changes

  • Renamed VPAdminColorPicker to CometAdminColorPicker
  • Removed clearButton and clearIcon classes from color-picker
    • Using theme-augmentation the new common clear-button can now be styled with CometAdminClearInputButton instead of VPAdminColorPicker
  • The clear-button is no longer shown by default
  • Removed clearButton and clearIcon classes from color-picker
    • Using theme-augmentation the new common clear-button can now be styled with CometAdminClearInputButton instead of VPAdminColorPicker

Other Notable Changes

  • Allow custom icons/adornment for color-input
  • The clear-button is now optional (using the showClearButton prop)

@comet/admin-react-select

Incompatible Changes

  • Renamed theme-key from VPAdminSelect to CometAdminSelect

@comet/admin-rte

Incompatible Changes

  • Removed rte key from theme
    • The rte-colors should now be defined under props -> CometAdminRte -> colors instead of rte -> colors

Other Notable Changes

  • Add ability to customize the styling using theme-overrides
Assets 2
Loading