IMGArena-UI

Package for common React elements used across multiple front-end teams at IMGArena

How to use

To install a package simply run:

npm i @img-arena/ui-core
// or
yarn add @img-arena/ui-core

For the components to work correctly it is crutial that the part of the app using them is wrapped in provider. (example for index.tsx in CRA). Also for the styles to work correctly import them at the root level (for CRA it's index.tsx file)

/* ... other imports */
import '@img-arena/ui-core/index.css';
import { ThemeProvider } from '@imgarena/ui-core';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

Preview

to preview components use the same workflow as for local development, or storybook:

npm run storybook

Local development

To get started you have to run those two commands in separate terminals, but before that you have to install all dependencies.

To install dependencies run:

npm install npm-link-shared -g // skip this step if you have this already installed (to be deprecated)
npm run prestart

Building a package and watching for changes:

npm run build:watch

Starting a preview development server:

npm run dev:example