Getting error trying to use use Storybook with react-admin "useField must be used inside of a <Form> component"

Question

Struggling with using Storybook with react-admin. I have used it with react and material-ui components successfully, but when I add TextInput, I get this error "useField must be used inside of a component. So then I wrapped the TextInput inside a SimpleForm component and I get a second error: "Cannot read property 'history' of undefined".

It's getting way beyond my current knowledge and I'm getting frustrated. I'm sure it's a simple fix and I should be able to use Storybook with react-admin. Can anyone fill me in on the secret? Here's my current simple story:

import React from 'react';
import { SimpleForm, TextInput, required } from 'react-admin';
import { Button, Typography, Card, CardContent } from '@material-ui/core';

export default {
  title: 'Sources',
};

export const TestSource = () => {
  return (
    <SimpleForm>
      <TextInput
        source="test" label="Source Name" validate={required()} fullWidth margin="none"
        validate={required()}
      />
    </SimpleForm>
  )
}

Any help would be appreciated.

UPDATE: Thanks to @gstvg below, adding the Admin tag did give some results. Not sure I understand how to make this more useful (almost as much work to just use the application in the browser than to mock up a form that works in storybook, but maybe I'm just not getting it yet.

Here's the new code (had to add a dataProvider prop for Admin) and what I see (at least I see something, but the form is duplicated and not sure it is displaying right):

  return (
    <Admin dataProvider={dataprovider}>
      <SimpleForm>
        <TextInput
          source="test" label="Source Name" validate={required()} fullWidth margin="none"
          validate={required()}
        />
        <TextInput
          source="test" label="Next Field" validate={required()} fullWidth margin="none"
          validate={required()}
        />
      </SimpleForm>
    </Admin>

Answer 1

Most of react-admin components expects props being passed by other react-admin parent components

Props expected by TextInput:

https://github.com/marmelab/react-admin/blob/b40229f6974a6ec586d9fc4b6116696df7b2b1d0/packages/ra-ui-materialui/src/input/TextInput.tsx#L88

And by SimpleForm:

https://github.com/marmelab/react-admin/blob/b40229f6974a6ec586d9fc4b6116696df7b2b1d0/packages/ra-ui-materialui/src/form/SimpleForm.js#L51

In this case, TextInput expects a SimpleForm parent (or TabbedForm, Filter, etc), just like you did, and SimpleForm usually expects an Edit or Create parent.

Given the erros you faced, they wont appear to be related with the expected missing props defined above, so they probably happened due to being outside of some react-admin complex hook scope or something like that, so maybe just passing props wont work.

You can either try to pass the props yourself or embed the whole storybook within a Admin, like is done here:

https://marmelab.com/blog/2019/01/17/react-timeline.html

Update with your findings:

The minimal setup i find that works is this:

import { Admin, Resource, Layout, SimpleForm, TextInput, required } from 'react-admin'

const NoLayout = props => (
    <Layout
        appBar={"span"}
        sideBar={"span"}
        menu={"span"}
        {...props}
    />
)

const Dashboard = props => (
    <SimpleForm>
        <TextInput
            source="test" label="Source Name" validate={required()} fullWidth margin="none"
            validate={required()}
        />
        <TextInput
            source="test2" label="Next Field" validate={required()} fullWidth margin="none"
            validate={required()}
        />
    </SimpleForm>
)

const App = () => {

    return (
        <Admin dataProvider={{}} menu={"span"} dashboard={Dashboard} layout={NoLayout}>
            <Resource name="test"/>
        </Admin>
    )
}

You don't even need a real dataProvider. The Resource is for react admin not complaining about a empty Admin. Also, i differentied input sources, with both being equals, editing one input alters value of both, which i think is not you wanted