uaveiro/ui

Table of Contents

• uaveiro/ui
  • Table of Contents
• Get started
  • Install
    • Use
    • Configuration and Providers for the project
      • CSS Files
      • Providers

Get started

@uaveiro/ui is a reusable component library that helps the University of Aveiro contributors, developers and colleges build UIs faster. The goal is to make building durable UIs more productive and satisfying for University Aveiro products, like the portal, internal systems, and other promotional sites.

Try this CodeSandBox to see a real live demo.

Install

@uaveiro/ui components are written in React, with support with themes and utilities.

Add @uaveiro/ui components to your project.

npm install --save @uaveiro/ui

Or with yarn

yarn add @uaveiro/ui

The library uses peer dependencies, to work properly you need to install the following dependencies to your projects.

npm install --save styled-components react-sizeme react-accessible-accordion@^2.4.5 react-slick@^0.25.2 global@^4.4.0 moment polished rc-pagination@^1.20.12 react-select react-player react-palette react-calendar@^2.19.2 react-intl@^2.8.0

Or with yarn

yarn add styled-components react-sizeme react-accessible-accordion@^2.4.5 react-slick@^0.25.2 global@^4.4.0 moment polished rc-pagination@^1.20.12 react-select react-player react-palette react-calendar@^2.19.2 react-intl@^2.8.0

Use

Import components you want into your UI, read the documentation to learn more about other components or use the design system to learn more about how to apply them to your project.

import { Button } from "@uaveiro/ui";

and use them like so

const example = () => (
  <div>
    <Button>Hello world</Button>
    <Button variant="primary" onClick={() => 0}>
      Do something
    </Button>
  </div>
);

Configuration and Providers for the project

Implement the configuration, static files, and providers to the project. For the components to work properly some configuration needs to be implemented like CSS files, theme providers and other configuration files.

CSS Files

The following CSS files need to be implemented in the public folder of the project. This file contains the fonts styles, font icons, the grid, calendar styles, and slider styles.

<link
  href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css?family=Playfair+Display"
  rel="stylesheet"
/>
<link rel="stylesheet" href="https://static.ua.pt/css/ua/static-lib/grid.css" />
<link
  rel="stylesheet"
  href="https://static.ua.pt/css/font-awesome-pro/5.8.1/css/all.min.css"
/>
<link
  rel="stylesheet"
  href="https://static.ua.pt/css/ua/static-lib/entypo.css"
/>
<link
  rel="stylesheet"
  href="https://static.ua.pt/css/ua/static-lib/slider.css"
/>
<link
  rel="stylesheet"
  href="https://static.ua.pt/css/ua/static-lib/slider-theme.css"
/>
<link
  rel="stylesheet"
  href="http://static.ua.pt/css/ua/static-lib/calendar.min.css"
/>

Providers

The following providers set the default theme for the project, there's a ThemeContrast in the library.

import React from "react";
import ReactDOM from "react-dom";
import YourApp from "./YourApp";
import { IntlProvider } from "react-intl";
import {
  ThemeProvider,
  Theme,
  ConfigProvider,
  InjectIntlContext,
  useFormatMessage
} from "@uaveiro/ui";

function App() {
  return (
    <>
      <IntlProvider>
        <InjectIntlContext>
          <ThemeProvider theme={Theme}>
            <ConfigProvider
              config={{
                imageAPI: "https://api-assets.dev.ua.pt/v1",
                portalWWW: "https://www.dev.ua.pt",
                portalAPI: "https://api-portal.dev.ua.pt/api/v1",
                baseUrl: "https://www.ua.pt"
              }}
              components={{
                link: YourLinkComponent,
                formattedMessage: FormattedMessage,
                isIE: () => false
              }}
              hooks={{
                useIntl: useFormatMessage
              }}
            >
              <YourApp />
            </ConfigProvider>
          </ThemeProvider>
        </InjectIntlContext>
      </IntlProvider>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

StoryBook

Update StoryBook

@uaveiro/ui uses the Storybook tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. Storybook can be published online to review and collaborate on works in progress. That allows developers, designers, and PMs to check if UI looks right without touching code or needing a local dev environment. To update for the new version you just have to run:

yarn build-storybook -o ./docs

and then commit the folder to master branch. Content will be automatically updated.

Run StoryBook

npm run storybook

Publish Package

To publish your package to the npm registry, run:

npm publish