React Component Library

Library with all shared IOTABOTS components - published on npmjs.com: @iotabots/components. This library contains several components to quickly and efficiently build new applications within the IOTABOTS design.

Warning: This library is under active development - please do not use it in production.

👆 Usage

To use the @iotabots/components UI library in your React App, follow these steps:

📦 Install

# Yarn
yarn add @iotabots/components

# Npm
npm i @iotabots/components

🎨 Theme Provider

Add this to your root app file. The theme will default to dark mode. You can select light and dark theme via the theme property.

// src/App.tsx
import { ThemeProvider } from '@iotabots/components';

...
<ThemeProvider theme='dark'>
  ...
</ThemeProvider>
...

📚 Use components

You can use any component from official MUI Docs or Storybook Live Preview

// src/pages/Home.tsx
import { Button } from '@iotabots/components';

...
<Button onClick={console.log("Hello 🤖")}>
  Say Hello!
</Button>
...

🌗 Light and Darkmode

In case you want your users to toggle between light and dark, create a new file called Theme.tsx like we do here https://github.com/iotabots/iotabots.io/blob/main/contexts/Theme.tsx. If you want the user's mode to be stored in local storage, also see these imports in the Theme https://github.com/iotabots/iotabots.io/blob/main/utils/localStorage.ts. Otherwise just remove the utils getItem and setItem.

ℹ️ Info

Material UI

We extend the React UI library MUI for theming and base UI components. You can import almost all components from the MUI official docs just from iotabots/components, see before-after-example here

// Don't
import { Button } from '@mui/material'

// Do
import { Button } from '@iotabots/components'

Note If a component from official MUI docs is not included in @iotabots/components, you can also use the one from @mui/material.

Storybook

On top of Material UI's base ui components we have custom shared UI components for the iotabots team and community. These can be found in Storybook Live Preview Page

🎯 Planned Milestones

• [x] Include MUI
• [x] Publish on npmjs.com: @iotabots/components
• [ ] Website Components
• [x] web3-react integration
• [ ] Marketplace Components
• [ ] Game Center Components

✅ Missing Components

All components can be discovered on the Live Preview Page. The ones below will be added and documented in storybook.

Website Components

• [ ] Content Box
• [ ] Roadmap Section
• [ ] Footer
• [ ] Navigation
• [ ] Profile
• [ ] Bot Card
• [ ] Bot Gallery
• [ ] Infinit Bot List

Marketplace Components

• [ ] NFT Gallery
• [ ] Detail Gallery
• [ ] Buy Button
• [ ] Filter
• [ ] Search

Game Center Components

• [ ] Bot Play Page
• [ ] Game Preview
• [ ] Leaderboard