@applica-software-guru/react-admin 1.0.32 → 1.0.34

package/src/components/ra-forms/CardForm.jsx

@@ -0,0 +1,113 @@
+import { Form, SaveButton, useResourceContext, useTranslate } from 'react-admin'
+import { Grid, Stack } from '@mui/material'
+import React, { Fragment, useMemo } from 'react'
+
+import MainCard from '../MainCard'
+import PropTypes from 'prop-types'
+import Toolbar from './Toolbar'
+import { styled } from '@mui/material/styles'
+import { useThemeConfig } from '../../hooks'
+
+const Section = ({ children, content, title, subheader, secondary, toolbar, ...gridProps }) => {
+  const translate = useTranslate()
+  const resource = useResourceContext()
+  const { cardTitle, cardSubheader } = useMemo(() => {
+    const defaultTitle = title || `resources.${resource}.title`
+    return {
+      cardTitle: translate(defaultTitle, { _: defaultTitle }),
+      cardSubheader: subheader !== null ? translate(subheader, { _: subheader }) : null,
+    }
+  }, [resource, subheader, title, translate])
+  return (
+    <Grid item {...gridProps}>
+      <MainCard
+        content={content}
+        title={cardTitle}
+        subheader={cardSubheader}
+        secondary={secondary}
+        divider
+      >
+        <Fragment>
+          {children}
+          {toolbar === true ? (
+            <Toolbar>
+              <SaveButton />
+            </Toolbar>
+          ) : (
+            toolbar
+          )}
+        </Fragment>
+      </MainCard>
+    </Grid>
+  )
+}
+
+Section.defaultProps = {
+  ...Grid.defaultProps,
+  content: true,
+  subheader: null,
+  title: null,
+  secondary: null,
+  toolbar: false,
+  item: true,
+
+  lg: 12,
+  md: 12,
+  sm: 12,
+  xs: 12,
+}
+
+Section.propTypes = {
+  ...Grid.propTypes,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  contained: PropTypes.bool,
+  content: PropTypes.bool,
+  subheader: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  secondary: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
+  spacing: PropTypes.number,
+  toolbar: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
+}
+
+const StyledForm = styled(Form, {
+  name: 'RaApplicaCardForm',
+  slot: 'root',
+})(({ theme, spacing }) => ({
+  backgroundColor: 'transparent',
+  '& .RaToolbar-desktopToolbar': {
+    marginTop: theme.spacing(spacing * 2),
+    padding: 0,
+  },
+}))
+
+/**
+ * @see https://mui.com/material-ui/react-stack/
+ */
+const CardForm = ({ children, spacing, defaultValues, ...gridProps }) => {
+  const { spacing: themeSpacing } = useThemeConfig()
+  return (
+    <StyledForm defaultValues={defaultValues} spacing={spacing || themeSpacing}>
+      <Grid container {...gridProps} spacing={spacing || themeSpacing}>
+        {children}
+      </Grid>
+    </StyledForm>
+  )
+}
+
+CardForm.propTypes = {
+  ...Grid.propTypes,
+  ...Form.propTypes,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  spacing: PropTypes.number,
+  defaultValues: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  record: PropTypes.object,
+  validate: PropTypes.func,
+}
+
+CardForm.defaultProps = {
+  ...Stack.defaultProps,
+}
+
+CardForm.Section = Section
+
+export default CardForm

package/src/components/ra-forms/Edit.jsx

@@ -0,0 +1,13 @@
+import { Edit as RaEdit } from 'react-admin'
+import { styled } from '@mui/material/styles'
+
+const StyledEdit = styled(RaEdit, {
+  name: 'RaApplicaEdit',
+  slot: 'root',
+})(({ theme }) => ({
+  '& .RaEdi-card, & > div > div > form': {
+    backgroundColor: theme.palette.background.default,
+  },
+}))
+
+export default StyledEdit

package/src/components/ra-forms/FormHeader.jsx

@@ -0,0 +1,42 @@
+import { CardHeader, Divider } from '@mui/material'
+
+import { Fragment } from 'react'
+import PropTypes from 'prop-types'
+import { styled } from '@mui/material/styles'
+import { useTranslate } from 'react-admin'
+
+const StyledCardHeader = styled(CardHeader)(({ theme }) => ({
+  marginTop: theme.spacing(4),
+  marginLeft: 0,
+  marginRight: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+}))
+
+const StyledDivider = styled(Divider)(({ theme }) => ({
+  marginLeft: `-${theme.spacing(2.5)}`,
+  marginRight: `-${theme.spacing(2.5)}`,
+  marginBottom: theme.spacing(2),
+  width: `calc(100% + ${theme.spacing(5)})`,
+}))
+
+const FormHeader = ({ title, divider }) => {
+  const translate = useTranslate()
+  return (
+    <Fragment>
+      <StyledCardHeader title={translate(title, { _: title })} />
+      {divider && <StyledDivider />}
+    </Fragment>
+  )
+}
+
+FormHeader.propTypes = {
+  title: PropTypes.string.isRequired,
+  divider: PropTypes.bool,
+}
+
+FormHeader.defaultProps = {
+  divider: true,
+}
+
+export default FormHeader

package/src/components/ra-forms/LongForm/DispositionProps.jsx

@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types'
+const DispositionProps = PropTypes.shape({
+  xl: PropTypes.number,
+  lg: PropTypes.number,
+  md: PropTypes.number,
+  sm: PropTypes.number,
+  xs: PropTypes.number,
+})
+
+export default DispositionProps

package/src/components/ra-forms/LongForm/LongForm.jsx

@@ -0,0 +1,38 @@
+import DispositionProps from './DispositionProps'
+import { Form } from 'react-admin'
+import LongFormTab from './LongFormTab'
+import LongFormTabHeader from './LongFormHeader'
+import LongFormView from './LongFormView'
+import PropTypes from 'prop-types'
+import useFormRootPath from './useFormRootPath'
+import { useThemeConfig } from '../../../hooks'
+
+const LongForm = ({ spacing: _spacing, ...props }) => {
+  const formRootPathname = useFormRootPath()
+  const { spacing: _themeSpacing } = useThemeConfig()
+  const spacing = _spacing || _themeSpacing
+  return (
+    <Form formRootPathname={formRootPathname} {...props}>
+      <LongFormView formRootPathname={formRootPathname} {...props} spacing={spacing} />
+    </Form>
+  )
+}
+
+LongForm.propTypes = {
+  syncWithLocation: PropTypes.bool,
+  spacing: PropTypes.number,
+  tabsDisposition: DispositionProps,
+  contentDisposition: DispositionProps,
+}
+
+LongForm.defaultProps = {
+  syncWithLocation: false,
+  spacing: 2,
+  tabsDisposition: { xl: 3, lg: 3, md: 4, sm: 4, xs: 12 },
+  contentDisposition: { xl: 9, lg: 9, md: 8, sm: 8, xs: 12 },
+}
+
+LongForm.Tab = LongFormTab
+LongForm.Header = LongFormTabHeader
+
+export default LongForm

package/src/components/ra-forms/LongForm/LongFormHeader.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import { styled } from '@mui/material/styles'
+import { useMediaQuery } from '@mui/material'
+const StyledSidebar = styled('div')(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+}))
+
+const LongFormTabHeader = ({ children, visibility }) => {
+  const isVisible = useMediaQuery((theme) => theme.breakpoints.up(visibility))
+  return isVisible ? <StyledSidebar>{children}</StyledSidebar> : null
+}
+
+LongFormTabHeader.propTypes = {
+  visibility: PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs']),
+  position: PropTypes.oneOf(['top', 'bottom']).isRequired,
+  children: PropTypes.node.isRequired,
+}
+
+LongFormTabHeader.defaultProps = {
+  position: 'top',
+  visibility: 'md',
+}
+
+export default LongFormTabHeader

package/src/components/ra-forms/LongForm/LongFormTab.jsx

@@ -0,0 +1,121 @@
+import {
+  Avatar,
+  ListItemButton,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  ListItemText,
+  Stack,
+} from '@mui/material'
+import { FormGroupContextProvider, useTranslate } from 'react-admin'
+import React, { useCallback } from 'react'
+
+import { Link } from 'react-router-dom'
+import PropTypes from 'prop-types'
+import { useLocation } from 'react-router'
+
+const hiddenStyle = { display: 'none' }
+
+const LongFormTab = ({
+  intent,
+  hidden,
+  unmountOnExit,
+  label,
+  icon,
+  value,
+  syncWithLocation,
+  selected,
+  onChange,
+  children,
+  badgeColor,
+  badgeContent,
+  ...props
+}) => {
+  const translate = useTranslate()
+  const location = useLocation()
+  const propsForLink = {
+    component: Link,
+    to: { ...location, pathname: value },
+  }
+
+  const tabLabel = React.isValidElement(label) ? label : translate(label, { _: label })
+  const handleChange = useCallback(() => onChange(value), [onChange, value])
+
+  const renderTab = () => (
+    <ListItemButton
+      selected={selected}
+      {...(syncWithLocation ? propsForLink : {})}
+      onClick={handleChange}
+    >
+      {icon && <ListItemIcon>{icon}</ListItemIcon>}
+      <ListItemText primary={tabLabel} />
+      {badgeContent && (
+        <ListItemSecondaryAction>
+          <Avatar
+            sx={{
+              width: 24,
+              height: 24,
+              fontSize: 12,
+              backgroundColor: (theme) => theme.palette[badgeColor]?.main,
+              color: (theme) => theme.palette[badgeColor]?.contrastText,
+            }}
+          >
+            {badgeContent}
+          </Avatar>
+        </ListItemSecondaryAction>
+      )}
+    </ListItemButton>
+  )
+
+  const renderContent = () =>
+    unmountOnExit && hidden ? null : (
+      <FormGroupContextProvider name={value.toString()}>
+        <Stack
+          alignContent={'stretch'}
+          style={hidden ? hiddenStyle : null}
+          id={`tabpanel-${value}`}
+          aria-labelledby={`tabheader-${value}`}
+          // Set undefined instead of false because WAI-ARIA Authoring Practices 1.1
+          // notes that aria-hidden="false" currently behaves inconsistently across browsers.
+          aria-hidden={hidden || undefined}
+          {...props}
+        >
+          {children}
+        </Stack>
+      </FormGroupContextProvider>
+    )
+
+  return intent === 'header' ? renderTab() : renderContent()
+}
+
+LongFormTab.propTypes = {
+  intent: PropTypes.oneOf(['header', 'content', 'sidebar']),
+  className: PropTypes.string,
+  contentClassName: PropTypes.string,
+  url: PropTypes.string,
+  icon: PropTypes.element,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  syncWithLocation: PropTypes.bool,
+  onChange: PropTypes.func,
+  selected: PropTypes.bool,
+  hidden: PropTypes.bool,
+  unmountOnExit: PropTypes.bool,
+  children: PropTypes.node,
+  badgeColor: PropTypes.oneOf([
+    'default',
+    'error',
+    'info',
+    'primary',
+    'secondary',
+    'success',
+    'warning',
+  ]),
+  badgeContent: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+}
+
+LongFormTab.defaultProps = {
+  badgeColor: 'default',
+  unmountOnExit: false,
+}
+
+export default LongFormTab

package/src/components/ra-forms/LongForm/LongFormTabs.jsx

@@ -0,0 +1,63 @@
+import { matchPath, useLocation } from 'react-router'
+
+import { List } from '@mui/material'
+import MainCard from '../../MainCard'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { styled } from '@mui/system'
+
+const StyledList = styled(List, {
+  name: 'RaLongFormTabs',
+  slot: 'Root',
+})(({ theme }) => ({
+  p: 0,
+
+  '& .MuiListItemIcon-root': {
+    minWidth: 32,
+    color: theme.palette.grey[500],
+  },
+  '& .MuiListItemButton-root.Mui-selected': {
+    borderRight: `2px solid ${theme.palette.primary.main}`,
+    marginRight: `-2px`,
+  },
+}))
+
+const LongFormTabs = ({ children, syncWithLocation, value, url, onChange }) => {
+  const location = useLocation()
+  return (
+    <MainCard>
+      <StyledList component="nav">
+        {React.Children.map(children, (tab, index) => {
+          if (!React.isValidElement(tab)) return null
+          const tabPath = getTabbedFormTabFullPath(tab, index)
+          const selected = syncWithLocation
+            ? !!matchPath(`${url}/${tabPath}`, location.pathname)
+            : index === value
+
+          return React.cloneElement(tab, {
+            intent: 'header',
+            value: syncWithLocation ? tabPath : index,
+            syncWithLocation,
+            onChange,
+            url,
+            selected,
+          })
+        })}
+      </StyledList>
+    </MainCard>
+  )
+}
+
+export const getTabbedFormTabFullPath = (tab, index) =>
+  tab.props.path != null ? tab.props.path : index > 0 ? index.toString() : ''
+
+LongFormTabs.propTypes = {
+  children: PropTypes.node,
+  url: PropTypes.string,
+  tabsWithErrors: PropTypes.arrayOf(PropTypes.string),
+  syncWithLocation: PropTypes.bool,
+  onChange: PropTypes.func,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+}
+
+export default LongFormTabs

package/src/components/ra-forms/LongForm/LongFormView.jsx

@@ -0,0 +1,129 @@
+import React, { useMemo, useState } from 'react'
+import { Route, Routes, matchPath, useLocation, useResolvedPath } from 'react-router'
+import { getTabbedFormTabFullPath, useResourceContext } from 'react-admin'
+
+import DispositionProps from './DispositionProps'
+import { Grid } from '@mui/material'
+import LongFormCard from './LongFormHeader'
+import LongFormTab from './LongFormTab'
+import LongFormTabs from './LongFormTabs'
+import PropTypes from 'prop-types'
+import { styled } from '@mui/material/styles'
+
+const StyledGrid = styled(Grid, {
+  name: 'RaLongFormView',
+  slot: 'Root',
+})(({ theme }) => ({
+  '& .MuiToolbar-root': {
+    marginTop: theme.spacing(2),
+    marginLeft: `-${theme.spacing(3)}`,
+    marginRight: `-${theme.spacing(3)}`,
+    marginBottom: `-${theme.spacing(2)}`,
+    borderTop: `1px solid ${theme.palette.divider}`,
+  },
+}))
+
+const isSidebar = (child, position) =>
+  child && child.type === LongFormCard && child.props.position === position
+const isTab = (child) => child && child.type === LongFormTab
+
+const LongFormView = ({
+  children,
+  formRootPathname,
+  syncWithLocation,
+  spacing,
+  tabs,
+  tabsDisposition,
+  contentDisposition,
+  ...props
+}) => {
+  const [tabValue, setTabValue] = useState(0)
+  const resolvedPath = useResolvedPath('')
+  const resource = useResourceContext(props)
+  const location = useLocation()
+  const topSidebars = useMemo(
+    () => React.Children.toArray(children).find((child) => isSidebar(child, 'top')),
+    [children],
+  )
+  const bottomSidebars = useMemo(
+    () => React.Children.toArray(children).find((child) => isSidebar(child, 'bottom')),
+    [children],
+  )
+  const tabChildrens = useMemo(
+    () => React.Children.toArray(children).filter((child) => isTab(child)),
+    [children],
+  )
+
+  const handleTabChange = (value) => {
+    if (!syncWithLocation) {
+      setTabValue(value)
+    }
+  }
+  const renderTabs = () =>
+    React.cloneElement(
+      tabs,
+      {
+        onChange: handleTabChange,
+        syncWithLocation,
+        url: formRootPathname,
+        value: tabValue,
+        intent: 'header',
+      },
+      tabChildrens,
+    )
+  return (
+    <StyledGrid container spacing={spacing * 2}>
+      <Grid item {...tabsDisposition}>
+        {topSidebars}
+        {syncWithLocation ? (
+          <Routes>
+            <Route path="/*" element={renderTabs()} />
+          </Routes>
+        ) : (
+          renderTabs()
+        )}
+        {bottomSidebars}
+      </Grid>
+      <Grid item {...contentDisposition}>
+        {/* All tabs are rendered (not only the one in focus), to allow validation
+                on tabs not in focus. The tabs receive a `hidden` property, which they'll
+                use to hide the tab using CSS if it's not the one in focus.
+                See https://github.com/marmelab/react-admin/issues/1866 */}
+        {React.Children.map(tabChildrens, (tab, index) => {
+          if (!tab) {
+            return null
+          }
+          const tabPath = getTabbedFormTabFullPath(tab, index)
+          const hidden = syncWithLocation
+            ? !matchPath(`${resolvedPath.pathname}/${tabPath}`, location.pathname)
+            : tabValue !== index
+
+          return React.isValidElement(tab)
+            ? React.cloneElement(tab, {
+                intent: 'content',
+                resource,
+                hidden,
+                value: syncWithLocation ? tabPath : index,
+              })
+            : null
+        })}
+      </Grid>
+    </StyledGrid>
+  )
+}
+
+LongFormView.propTypes = {
+  children: PropTypes.node,
+  spacing: PropTypes.number,
+  syncWithLocation: PropTypes.bool,
+  tabs: PropTypes.element,
+  formRootPathname: PropTypes.string,
+  tabsDisposition: DispositionProps,
+  contentDisposition: DispositionProps,
+}
+
+LongFormView.defaultProps = {
+  tabs: <LongFormTabs />,
+}
+
+export default LongFormView

package/src/components/ra-forms/LongForm/index.jsx

@@ -0,0 +1,2 @@
+import LongForm from './LongForm'
+export default LongForm

package/src/components/ra-forms/LongForm/useFormRootPath.jsx

@@ -0,0 +1,22 @@
+import { matchPath, useLocation } from 'react-router-dom'
+
+/**
+ * This hook infers the tabbed form root path from the current location.
+ */
+const useFormRootPath = () => {
+  const location = useLocation()
+  const createMatch = matchPath(':resource/create/*', location.pathname)
+  const editMatch = matchPath(':resource/:id/*', location.pathname)
+
+  if (createMatch) {
+    return createMatch.pathnameBase
+  }
+
+  if (editMatch) {
+    return editMatch.pathnameBase
+  }
+
+  return ''
+}
+
+export default useFormRootPath

package/src/components/ra-forms/SimpleForm.jsx

@@ -0,0 +1,69 @@
+import {
+  DeleteWithConfirmButton,
+  SimpleForm as RaSimpleForm,
+  SaveButton,
+  useRecordContext,
+} from 'react-admin'
+
+import ActionsMenu from '../ActionsMenu'
+import MainCard from '../MainCard'
+import PropTypes from 'prop-types'
+import React from 'react'
+import Toolbar from './Toolbar'
+import { styled } from '@mui/system'
+import { useResourceTitle } from '../../hooks'
+
+const ApplicaStyledSimpleForm = styled(RaSimpleForm, {
+  name: 'RaApplicaSimpleForm',
+  slot: 'Root',
+})(({ theme, modal }) => ({
+  '& .MuiGrid-root.MuiGrid-container': {
+    paddingBottom: theme.spacing(modal ? 2 : 1),
+  },
+}))
+
+const SimpleForm = ({ title, modal, content, subheader, secondary, ...props }) => {
+  const cardTitle = useResourceTitle(title)
+  const record = useRecordContext()
+  return (
+    <MainCard
+      content={content}
+      title={cardTitle}
+      subheader={subheader}
+      secondary={record?.id ? secondary : null}
+      border={!modal}
+      divider
+    >
+      <ApplicaStyledSimpleForm toolbar={<Toolbar />} {...props} />
+    </MainCard>
+  )
+}
+
+SimpleForm.defaultProps = {
+  ...RaSimpleForm.defaultProps,
+  modal: false,
+  content: false,
+  subheader: null,
+  title: null,
+  toolbar: (
+    <Toolbar>
+      <SaveButton />
+    </Toolbar>
+  ),
+  secondary: (
+    <ActionsMenu>
+      <DeleteWithConfirmButton />
+    </ActionsMenu>
+  ),
+}
+
+SimpleForm.propTypes = {
+  ...RaSimpleForm.propTypes,
+  contained: PropTypes.bool,
+  content: PropTypes.bool,
+  subheader: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  secondary: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
+}
+
+export default SimpleForm

package/src/components/ra-forms/TabbedForm.jsx

@@ -0,0 +1,19 @@
+import { TabbedForm as RaTabbedForm } from 'react-admin'
+import { styled } from '@mui/system'
+
+const ApplicaStyledTabbedForm = styled(RaTabbedForm, {
+  name: 'RaApplicaTabbedForm',
+  slot: 'Root',
+})(() => ({}))
+
+ApplicaStyledTabbedForm.propTypes = {
+  ...RaTabbedForm.propTypes,
+}
+
+ApplicaStyledTabbedForm.defaultProps = {
+  ...RaTabbedForm.defaultProps,
+}
+
+ApplicaStyledTabbedForm.Tab = RaTabbedForm.Tab
+
+export default ApplicaStyledTabbedForm