An enterprise-class UI design language and React UI library for the netFIELD ecosystem.

Changelog · Report Bug · Request Feature · English

❤️ Part of the netFIELD Ecosystem ❤️

Hilscher UI is the official design system used across netFIELD products and services.

✨ Features

• 🌈 Enterprise-class UI designed for the netFIELD ecosystem.
• 📦 A set of high-quality React components out of the box.
• 📊 Ready-to-use charts including bar, line, pie, and gauge.
• 🛡 Written in TypeScript.
• ⚙️ Supports React and Next.js projects.

🖥 Environment Support

• Modern browsers
• Server-side Rendering

🚀 Quick Start

📦 Install dependencies

To use the library, some preparations should be taken into consideration. The Library contains peer dependencies that should be installed in your project.

yarn add antd@^5.9.1 @ant-design/icons@^5.2.6 leaflet@^1.9.0 react-quill@^2.0.0 react-leaflet@^4.0.0 @microlink/react-json-view@^1.23.0

yarn add @hilscher/hilscher-ui

🔨 Usage Example

In this section, we provide examples that demonstrate how to use and interact with the library.

Import the typography font in the root CSS file of your app (index.css)

index.css:

Note: The ABC Diatype font must be available in your project under /public/fonts. If you do not have a license for ABC Diatype, please use another font.

@font-face {
  font-family: 'ABC Diatype';
  src: url('/fonts/ABCDiatype-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Import lib css files and components index.jsx:

import React from 'react';

// import lib css files
import '@hilscher/hilscher-ui/dist/global.css';
import '@hilscher/hilscher-ui/dist/esm/index.css';

// import lib component
import { Button, ThemeProvider } from '@hilscher/hilscher-ui';
// or import Button from 'hilscher-ui/dist/cjs/src/lib/button/button'

const App = () => (
  <ThemeProvider>
    <Button type="primary">PRESS ME</Button>
  </ThemeProvider>
);

Import chart

import { BarChart } from '@hilscher/hilscher-ui';

const ChartWrapper = () => (
  <div style={{ height: 400 }}>
    <BarChart data={{}} />
  </div>
);

Dynamic imports could also be used for Next.js projects.

import dynamic from 'next/dynamic';

const Button = dynamic(() => import('@hilscher/hilscher-ui').then((mod) => mod.Button), { ssr: false });

📘 Documentation

Note: For detailed information on theming and customization, refer to THEME.md.

The following table provides a comprehensive list of all available components and charts.

🎨 Component

| Component | Description | |-----------|-------------| | Action History | Component for displaying action history | | Autocomplete | Autocomplete input component | | Button | Styled button component | | Card | Card layout component | | Carousel | Carousel/slider component | | Checkbox | Checkbox input component | | Collapse | Collapsible panel component | | Color Picker | Color selection component | | Color Scheme | Color scheme management | | Conditional Form Item | Conditional form field component | | Date Picker | Date selection component | | Display Input | Read-only display input component | | Env Variable Input | Environment variable input component | | File Upload | File upload component | | Footer | Page footer component | | Form | Form container and utilities | | Header | Page header component | | Icon | Icon component | | Image Upload | Image upload component | | Input Number | Numeric input component | | JSON Input | JSON editor input component | | JSON View | JSON data viewer component | | Layout | Layout container component | | Link List | List of links component | | List | List component | | Menu | Navigation menu component | | Modal | Modal dialog component | | Notification | Notification/toast component | | Password Input | Password input with visibility toggle | | Progress | Progress bar/indicator component | | Radio | Radio button component | | Search | Search component | | Search Input | Search input field | | Select Input | Select/dropdown components | | Shadow | Shadow styling utilities | | Switch | Toggle switch component | | Table | Data table component | | Tabs | Tab navigation component | | Tag | Tag/label component | | Text Input | Text input components | | Theme Context | Theme provider and context | | Title | Title/heading component | | Tour | Guided tour component | | Transfer | Transfer/dual-list component | | Typography | Typography components | | Utils | Utility functions | | Geolocation | Map and geolocation components using Leaflet and React Leaflet |

📉 Charts

| Chart | Description | |-------|-------------| | Bar Chart | Bar chart visualization | | Line Chart | Line chart visualization | | Pie Chart | Pie chart visualization | | Gauge Chart | Gauge/dial chart visualization | | Label Chart | Label-based chart component | | Image View Chart | Image-based chart visualization | | Chart Wrapper | Wrapper component for charts |

🤝 Contributing

This package is maintained internally at Hilscher.

External contributions are currently not accepted.

Hilscher developers can find contribution guidelines in CONTRIBUTING.md.

📝 License

This software is licensed under the Hilscher Source Code and Software License Agreement.

See the LICENSE file included within the source code in this package.