Help wanted: update starter packages for new ui-bootstrap package

[SachaG]

Goal: remove all dependencies on react-bootstrap from Starter repo

The example packages currently rely a lot on Bootstrap in the form of dependencies on react-bootstrap. But we can now get rid of this dependency by replacing all Bootstrap components with their equivalent Vulcan component.

In other words, <Button/> imported from react-bootstrap becomes <Components.Button/>; which in turn can call a Bootstrap, Material, Semantic, etc. component according to which UI package is currently active.

You can see all currently available components here.

TODO:

• Search for dependencies on react-bootstrap throughout the Starter repo.
• Once you find one, replace it with the equivalent component.
• Submit PR!

[SachaG]

Since the dropdown component is probably the most complex to port, here is an example from zenshome.jp:

const UsersMenuItem = ({ showItem, name, isAdmin = false }) => showItem && (
  <div>
    <FormattedMessage id={`nav.${name}`} />
    {isAdmin && (
      <span className="users-menu-admin-marker">
        <FormattedMessage id="nav.admin_marker" />
      </span>
    )}
  </div>
);

const menuItems = [
  {
    name: 'account',
    to: '/account',
  },
  {
    name: 'users',
    to: '/admin/users',
    isAdmin: true,
  },
  {
    name: 'bookings',
    to: '/admin/bookings',
    isAdmin: true,
  },
  {
    name: 'rooms',
    to: '/admin/rooms',
    isAdmin: true,
  },
  {
    name: 'reviews',
    to: '/admin/reviews',
    isAdmin: true,
  },
  {
    name: 'neighborhoods',
    to: '/admin/neighborhoods',
    isAdmin: true,
  },
];

<Components.Dropdown
      variant="default"
      id="user-dropdown"
      trigger={
        <div className="dropdown-toggle-inner">
          <Components.Avatar size="small" user={currentUser} link={false} />
          <div className="users-menu-name">
            {Users.getDisplayName(currentUser)}
          </div>
        </div>
      }
      pullRight
      menuItems={[
        // menu items
        ...menuItems.map((item, index) => ({
          to: item.to,
          component: <UsersMenuItem {...item} key={index} index={index} showItem={showItem(item, currentUser)}/>,
        })),
        // log out
        {
          component: <FormattedMessage id="users.log_out" />,
          itemProps: {
            onClick: () => Meteor.logout(() => client.resetStore()),
          },
        },
      ]}
    />

[SachaG]

Oh and feel free to also submit PRs back to the core repo to improve the ui-bootstrap package.

[SachaG]

I'll probably work on this myself since there are no takers. Also a good chance to review/clean up the Forum code generally.

[kabalin]

I was going to take it. In fact I have done it partly.

[SachaG]

Oh in that case please do! I haven't actually started on this :)

[kabalin]

@SachaG yep, will do in that case, it is a good excercise for me :)

[JstnEdr]

There was an error coming up for many of the starter packages that were missing an import in the package.json file. I've added 'vulcan:[email protected]' to all the starter package files and will submit a pull request.