Landlaeknir-ui NPM

landlaeknir-ui

Description

landlaeknir-ui is a UI component library built with React and Storybook, designed to provide a set of reusable UI components for building modern web applications.

Installation

Prerequisites

Ensure you have the following software installed:

Node.js (version 20 or higher)
npm (version 10 or higher) or yarn - To install you need to use npm

Install the Package

To install landlaeknir-ui in your project,

 run:
  npm i landlaeknir-ui

Import styles

Import the styles from landlaeknir-ui by adding this to your project

import 'landlaeknir-ui/css'

Caveats

The Box component is rendered client side which requires a lot of the components to be run clientside. To fix this add 'use client' to your file if using the app router in nextjs.

'use client'

Using components

import { Button } from 'landlaeknir-ui/components'

Development and improvement

Adding components to the library

No component should be added into the library unless it has been reviewed by landlaeknir team. Every component should be questioned whether it is needed inside the library or if it is project specific.

Outdated or none working components

If you find an outdated component or one that is not working, please report to the landlaeknir team. Issue should be resolved and new package published.

Extra information

Extra information can be found in published storybook

Storybook Instructions Typedoc documentation

Version Logs

Version 1.0.1

Pill and Sidebar added to exports

Version 1.0.11

New Header small sidestep, Waiting on Link component generalization

Version 1.0.12-13

Added Tabs export

Version 1.0.14

Remove libinject Changes to CSS export ( usage info found in README above)

Version 1.0.15

Added react-toastify to dependencies Added @rollup/rollup-linux-x64-gnu to optional dependencies to fix build error

Version 1.0.16

Styles fixed according to the design system and css errors fixed

Version 1.1.0

Major update to component import use import { Button } from 'landlaeknir-ui/components' import { Color } from 'landlaeknir-ui/styles' instead of import { Button } from 'landlaeknir-ui' import { Color } from 'landlaeknir-ui'

Improved readme details for how to use the UI library

Version 1.1.1

export colors specifically unrequire onClick prop on make asynchsearch input button focus optional and extend type support for Async search Lint fixed table sort more generic prevent home/end downshift default behaviour make changes to asynchsearch default behavior make header padding responsive Package manager fix

Version 1.1.2

Add support for app router Export more components from index

Version 1.1.4

Added Info Panel component Fixed error where tabStore was not used in Tab Panel Fixed missing key in Header Small ui fixes

Version 1.1.5

Export Stepper

Version 1.1.7

Fix Info Panel add classname props to relevant components

Version 1.2.0

The header now has custom headeritems where you can have custom dropdown items instead of the default dropdown menu with user icon and language menu. Added the prop logoRender so now you can wrap the logo in a custom link if neeeded for navigation. The Header now uses the dropdown items props, getting rid of the inital, menucontent, language and languagecontent props. See the header story for examples of usage