# geops-ui

[![npm](https://img.shields.io/npm/v/@geops/geops-ui.svg?style=flat-square)](https://www.npmjs.com/package/@geops/geops-ui)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

This library provides the geOps Styleguide with a [material-ui](https://material-ui.com/) theme, custom material-ui components, a stylesheet, and images.

Documentation and examples at https://ui.geops.de/.

Visit [404.html](https://ui.geops.de/404.html) for a static "Not found" page and modify the back link at the bottom respectively.

## Getting Started

Install the [geops-ui](https://www.npmjs.com/package/@geops/geops-ui) package:

```bash
pnpm add @geops/geops-ui
```

Import e.g. the theme, header, footer, an image, and the stylesheet (available as scss and css) in your project:

```bash
import { geopsTheme, Header, Footer, GeopsLogoLargeSVG } from '@geops/geops-ui';

import '@geops/geops-ui/geops-ui.scss';
// Alternatively
import '@geops/geops-ui/geops-ui.css';
```

## Run demonstration (examples)

Clone the [project](https://gitlab.geops.de/geops/geops-ui) and run:

```bash
pnpm install
pnpm start
```

## Notes

SVGs (e.g. in the Header and Footer) may not load properly depending on the webpack configuration.
This can be fixed by adding a loader rule in webpackConfig using [file-loader](https://www.npmjs.com/package/file-loader):

```bash
{
  webpackConfig: {
    module: {
      rules: [
        {
          test: /^((?!url).)*\.svg$/,
          include: [
            path.resolve(__dirname, 'node_modules', '@geops', 'geops-ui'), // Load geops-ui SVGs using file-loader
          ],
          use: [
            {
              loader: 'file-loader',
              options: {
                jsx: true,
              },
            },
          ],
        },
      ]
    }
  }
}

```

## More

- [Development](https://gitlab.geops.de/geops/geops-ui)
- [Demonstration](https://ui.geops.de/)