Material UI 5 Adapter

[guyathomas]

Material UI 5 is finally out of Alpha and it would be great to leverage it.

https://mui.com/getting-started/usage/

[Monteth]

Hi @guyathomas,
Thank you for submitting your proposal. According to the npm download data, the Material UI theme is one of the most popular themes in uniforms, so we definitely want to introduce its newest version in the future.
For now, we are looking for volunteers, so if you are using Material UI 5, or just want to help us please feel free to start the implementation, we can offer our support.

[radekmie]

(We've had a team discussion about this issue, and here are the notes.)

• We'd like to have an MUI (a.k.a. Material UI 5) theme.
• @Monteth will post the initial draft of the time as soon as possible.
• @wadamek65 will probably overtake the integration.

[Floriferous]

(I know I should just write a PR myself, but that's how I feel right now ;) )

[boertel]

We did it here: https://github.com/comediadesign/uniforms-mui-5 mostly fixing imports and props but also remove the tests since we didn't bother migrating all of them 😬 I've been using it for 2 months, and we didn't have any issues with it (yet...)

[radekmie]

That's great @boertel! We have a meeting today and we'll check out your package. Would you be interested in maintaining it yourself, or maybe transfer it here?

[boertel]

I'm a contractor working on a project so I don't see myself maintaining it but I'm happy to transfer it!

[radekmie]

We'll try the codemod first and if it'll take too much time, we'll ask you for help.

Separately, we'll contact you about the package name on npm later.

[wadamek65]

@Floriferous @guyathomas @boertel Just FYI: We have started working on implementing MUI v5 theme in uniforms. So far the codemod has worked really well and a large portion of work is already done. We will be posting updates on our progress as we go.

[vcardins]

Any update on this progress?

[wadamek65]

@vcardins You can track the exact progress on the draft PR submitted here: #1091. The core of the theme is done but we're still working on polishing the theme before releasing it. I hope we will be done with everything in the upcoming few weeks but only time will tell.

[minhna]

@wadamek65 How is it going?

[wadamek65]

@wadamek65 The PR is finished and awaiting reviews and testing. Feel free to review it yourself if you'd like to participate and help us out!

[minhna]

@wadamek65 Thank you for your update.
I tried to clone the repository then installed the uniforms-mui package from the directory but then when I tried to start the app, it said

Error: Cannot find module '/home/minhna/WORKS/Mike/settler/se2-admin/node_modules/uniforms-mui/cjs/index.js'. Please verify that the package.json has a valid "main" entry

I check the node_modules/uniforms-mui directory, cjs and esm dir are missing. Do I need to run some build commands before?

[minhna]

@wadamek65 I've got it. I need to run npm install in the root directory first then it will run the tsc --build --incremental tsconfig.build.json command.

[minhna]

then I had this error:

Uncaught Invariant Violation: useForm must be used within a form.
    at invariant (/node_modules/invariant/browser.js:46:15)
    at useForm (/node_modules/uniforms/esm/useForm.js:14:5)
    at useField (/node_modules/uniforms/esm/useField.js:30:21)
    at Field (/node_modules/uniforms/esm/connectField.js:43:39)

I works well with the uniforms-material package

[wadamek65]

@minhna Sounds like it might be an issue with a duplicate version of the package installed. Please try cleaning all node_modules and reinstalling them.

[minhna]

@wadamek65 I tried but it didn't solve the problem.
The error only occurred with the fields I defined with connnectField function.
for example:

import React from 'react'
import PropTypes from 'prop-types'
import { connectField } from 'uniforms'
import { FormControl, InputLabel, Input, InputAdornment } from '@mui/material'
import numeral from 'numeral'

function CostField({ onChange, value, name, label }) {
  const [newValue, setNewValue] = React.useState(value)

  const handleChange = (_value) => {
    setNewValue(_value)
    onChange(numeral(_value).value())
  }

  return (
    <FormControl fullWidth style={{ marginTop: '1em' }}>
      <InputLabel htmlFor={`cost-adorment-${name}`}>{label}</InputLabel>
      <Input
        id={`cost-adorment-${name}`}
        value={newValue ? numeral(newValue).format('0,0') : ''}
        onChange={(e) => handleChange(e.target.value)}
        startAdornment={<InputAdornment position="start">$</InputAdornment>}
      />
    </FormControl>
  )
}

CostField.propTypes = {
  onChange: PropTypes.func.isRequired,
  value: PropTypes.number,
  name: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
}

export default connectField(CostField)

and defind the schema

import { SimpleSchema2Bridge } from 'uniforms-bridge-simple-schema-2'
import CostField from 'ABOVE_FILE_LOCATION'
...
const listingSchema = new SimpleSchema2Bridge(
    new SimpleSchema({
      transactionType: {
        type: String,
        allowedValues: Object.keys(CONSTANTS.TRANSACTION_TYPE),

        uniforms: {
          transform: (value) => {
            return CONSTANTS.TRANSACTION_TYPE[value]
          },
        },
      },
      referralSource: { type: String, label: 'Referral Source', optional: true },
       cost: {
         type: Number,
         label: 'Cost of conveyancing (including GST)',
         optional: true,
         uniforms: { component: CostField },
       },
    })
  )

...

  return (
  <AutoForm schema={listingSchema} model={listing} onSubmit={handleSubmit}>
    <AutoFields />
  </AutoForm>
  )

[radekmie]

@minhna Installing uniforms locally from the repo may be a problem, just as you saw. Until we update the documentation on that, you can try simply copy-pasting the theme's source into your project (assuming it's capable of working with TypeScript).

[minhna]

Hi @radekmie Do you know when the pull request got merged? Thank you.

[radekmie]

@minhna Definitely today, most likely in the next few hours. (I wanted to do it on Friday, but something came up.)

[minhna]

@radekmie OMG. It's the best news today.

[radekmie]

Released in v3.10.0-rc.0.