Codesandbox template for reporting bug

[kopax]

Problem to solve

In order to improve the debugging and issues experience, it would be efficient to have the equivalent of the test application of ra-ui, available in a codesandbox.io

Target audience

Developers that use @bootstrap-styled/ra-ui

Further details

Goals:

• Show error/warning and test bug between versions using live editor.

Proposal

By creating a boilerplate link that people can fork on codesandbox. It will be exactly as the demo of this project, a create-react-app application that use a fake data provider to serve the data.

What does success look like, and how can we measure that?

People should be able to purpose a source such as this without writting a lot of boilerplate code:

import React from 'react';
import {
  ShowButton,
  EditButton,
  DeleteButton,
  List,
  Datagrid,
  Filter,
  TextField,
  DateField,
  BooleanField,
  TextInput,
  DisabledInput,
  BooleanInput,
  Edit,
  Show,
  Create,
  ReferenceInput,
  SelectInput,
  SimpleForm,
  SimpleShowLayout,
  ReferenceField,
  ReferenceArrayField,
  SingleFieldList,
  ChipField,
} from '@bootstrap-styled/ra-ui';

export const ProjectCreate = (props) => (
  <Create {...props}>
    <SimpleForm>
      <TextInput source="name" />
      <ReferenceInput source="visibility.id" reference="projectVisibilities" allowEmpty>
        <SelectInput optionText="visibility" />
      </ReferenceInput>
      <ReferenceInput source="companyId" reference="companies" allowEmpty>
        <SelectInput optionText="name" />
      </ReferenceInput>
    </SimpleForm>
  </Create>
);


export const ProjectFilter = (props) => (
  <Filter {...props}>
    <TextInput source="id" />
    <TextInput source="name" />
  </Filter>
);

export const ProjectList = (props) => (
  <List
    {...props}
    sort={{ field: 'id', order: 'DESC' }}
    filters={<ProjectFilter />}
  >
    <Datagrid striped hover>
      <TextField source="name" />
      {/*<ReferenceField source="companyId" reference="companies" allowEmpty>*/}
        {/*<TextField source="name" />*/}
      {/*</ReferenceField>*/}
      <ShowButton size="sm" />
    </Datagrid>
  </List>
);

export const ProjectTitle = ({ record }) => {
  return <span>{record ? `#${record.id} ${record.name}` : ''}</span>;
};

export const ProjectEdit = (props) => {
  return (
    <Edit title={<ProjectTitle />} {...props}>
      <SimpleForm>
        <DisabledInput source="id" />
        <TextInput source="name" />
        <ReferenceInput source="visibility.visibilityId" reference="projectVisibilities" allowEmpty>
          <SelectInput optionText="visibility" />
        </ReferenceInput>
        <ReferenceInput source="companyId" reference="companies" allowEmpty>
          <SelectInput optionText="name" />
        </ReferenceInput>
      </SimpleForm>
    </Edit>
  );
};


export const ProjectShow = (props) => (
  <Show {...props}>
    <SimpleShowLayout>
      <TextField source="id" />
      <TextField source="name" />
      <TextField source="visibility.visibilityId" />
      <ReferenceArrayField
        source="projectServiceIdList"
        reference="projectServices"
      >
        <SingleFieldList>
          <ChipField source="name" />
        </SingleFieldList>
      </ReferenceArrayField>
    </SimpleShowLayout>
  </Show>
);

Links / references