Hilscher UI

A React UI library containing styled components inspired by Hilscher design guidelines.

Features:

• 🌈 UI designed for web applications.
• 📦 A set of high-quality React components out of the box.
• 📊 A list of ready to use charts - bar, line, pie, gauge.
• 🛡 Written in TypeScript with predictable types.
• ⚙️ Support React and NextJS projects.

Development Environment supports:

• 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 install 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 install hilscher-ui

🎬 Demo Examples

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:

@font-face {
  font-family: 'ABC Diatype';
  src: url('/fonts/<name_of_the_font>');
}

Import lib css files and components index.jsx:

import React from 'react';

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

// import lib component
import { Button, ThemeProvider } from '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-ui/dist/cjs/src/lib/bar-chart/bar-chart'

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

Dynamic imports could also be used for NextJs projects.

import dynamic from 'next/dynamic';

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

📘 Documentation

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

🎨 Available Components and visualizations

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 Inputs | Select/dropdown components | | Shadow | Shadow styling utilities | | Switch | Toggle switch component | | Table | Data table component | | Tabs | Tab navigation component | | Tag | Tag/label component | | Text Inputs | 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

The source code of this package is private and located in an internal repository. For contributions, please contact your Hilscher sales representative.

Hilscher developers can find detailed contribution guidelines in CONTRIBUTING.md.

License

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