2.0.0

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 `VPAdminCo...

v2.0.0-alpha.0

@comet/admin

Highlights

• Added a new InputBase (CometAdminInputBase) for use in all custom input-components in Comet
• 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 new package @comet/admin-icons
• add onAfterSubmit to FinalForm
• add useStoredState() hook

Incompatible Changes

• Replaced form/Input (VPAdminInputBase) with form/InputBase (CometAdminInputBase)
  • Deprecated getDefaultVPAdminInputStyles because the styled are included in InputBase, which should be used for all custom inputs in Comet
• 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 MasterLayout
  • The default values for content-spacing and header-height have changed slightly

@comet/admin-color-picker

Highlights

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

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

@comet/admin-react-select

Highlights

• Added theming-ability for input with CometAdminInputBase

Incompatible Changes

• Renamed theme-key from VPAdminSelect to CometAdminSelect

@comet/admin-rte

Highlights

• Add ability to customize the styling using theme-overrides

@comet/admin 1.3.0

This is a bugfix/maintenance release.

Bugfixes

• Handle submit error in EditDialog (#209)
• Pass innerRef from TableBodyRow to sc.TableBodyRow

Internal Changes

• The styled-components peer dependency has been changed to ^4.0.0 || ^5.0.0 to include v5.
• The graphql peer dependency has been changed to ^14.0.0 || ^15.0.0 to include v14.

@comet/admin 1.2.0

Highlights

• RouterPrompt: comet-admin's react-router Prompt Component Wrapper (that adds support for multiple Prompt instances) adds missing message callback parameters for full react-router compatibility

Internal Changes

• TotalCount of the tables Pagination is now formatted with FormattedNumber from react-intl.
• switched from yarn to npm 7 (updated all dependencies)

@comet/admin-rte 1.2.1

Bugfixes

• Make controls for RTE sticky
• Use mui-grey-palette for default colors
• Remove min-width of link buttons (MuiButtonGroup)

Internal Changes

• switched from yarn to npm 7 (updated all dependencies)

@comet/admin-react-select 1.0.2

switched from yarn to npm 7 (updated all dependencies)

@comet/admin-date-picker 1.0.2

switched from yarn to npm 7 (updated all dependencies)

@comet/admin-color-picker 1.0.2

use fixed version of react-color
switched from yarn to npm 7 (updated all dependencies)

@comet/admin-rte 1.2.0

Highlights

• Add default styles (MUI) to built-in blocktypes
• Make built-in blocktypes styleable
• Supports disabled-attribute

Internal Changes

• Rename prop-name "customBlockMap" to "blocktypeMap", deprecate prop-name "customBlockMap"
• Rename prop-name "Icon" to "icon", deprecate prop-name "Icon"

@comet/admin 1.1.0

This package has been renamed to @comet/admin