Ошибка при попытке использовать use Storybook с response-admin "useField должен использоваться внутри <Form>компонента"

Question

Борьба с использованием сборника рассказов с реакции-администратора. Я успешно использовал его с компонентами Reaction и Material-UI, но когда я добавляю TextInput, я получаю эту ошибку: «useField должен использоваться внутри компонента. Поэтому я обернул TextInput внутри компонента SimpleForm, и я получил вторую ошибку: "Невозможно прочитать свойство 'history' of undefined".

Это выходит за рамки моих текущих знаний, и я разочарован. Я уверен, что это простое исправление, и я должен иметь возможность использовать Storybook с реагирующим admin. Может кто-нибудь сообщить мне секрет? Вот моя текущая простая история:

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>
  )
}

Любая помощь будет оценена.

ОБНОВЛЕНИЕ: Благодаря @gstvg ниже, добавление тега администратора действительно дал некоторые результаты. Не уверен, что понимаю, как сделать это более полезным (почти столько же работы, чтобы просто использовать приложение в браузере, чем макет формы, которая работает в сборнике рассказов, но, возможно, я просто пока не понимаю.

Вот новый код (пришлось добавить реквизит dataProvider для Admin) и что я вижу (по крайней мере, я вижу что-то, но форма дублируется и не уверен, что отображается справа):

  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

Большинство компонентовact-admin ожидает, что реквизиты будут передаваться другими родительскими компонентамиact-admin

Реквизиты, ожидаемые TextInput:

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

И по SimpleForm:

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

В этом случае TextInput ожидает родителя SimpleForm (или TabbedForm, Filter и т. Д. c), как вы так и сделали, и SimpleForm обычно ожидает родительского элемента «Редактировать» или «Создать».

Принимая во внимание ошибки, с которыми вы столкнулись, они не будут связаны с ожидаемыми пропавшими опорами, определенными выше, поэтому они, вероятно, произошли из-за того, что находились вне какой-либо реакции. -admin сложный хук область видимости или что-то в этом роде, так что, возможно, просто пропуск реквизита не будет работать.

Вы можете либо попытаться передать реквизит самостоятельно, либо встроить всю книгу рассказов в Администратора, как это делается здесь:

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

Обновите ваши выводы:

Минимальная настройка, которую я нахожу работающей, такова:

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>
    )
}

Вам даже не нужен настоящий поставщик данных. Ресурс предназначен для реагирования админа, не жалующегося на пустого админа. Кроме того, я различал входные источники, при этом оба равны, редактирование одного входа изменяет значение обоих, что, я думаю, не так, как вы хотели