nitramui

NitramUI

Don’t worry about design, HTML, and CSS. Just use NitramUI’s components, play around with options, select a built–in theme (or let the user select it), and focus on the rest.

If you want to customize your project’s look and feel, this is not for you. This is for you if you want a design system which is lightweight, easy to use, and user–oriented.

Head over to the Demo.

Light and Dark Modes

Design principles

• Convention over customization.
• Complete abstraction from HTML/CSS, which means you can’t set custom classes or style attributes to the elements. Instead, components have their own size–variant properties. For example, Panes have a size property with options like: default, small, full, square, …

Getting started

Add fonts and root style

Add these lines in the head of your index.html:

<link href="https://fonts.googleapis.com/css2?family=Inconsolata&family=Inter:wght@200;400;600&display=swap" rel="stylesheet">
<style>#root { height: 100%; }</style>

This is due to an issue with @import and createGlobalStyle. Read more: Note regarding css @import and createGlobalStyle.

NitramUI options

• customThemes
• availableThemes

NitramUIContext

• mode: (string) current mode name. Default: light.
• setMode: (function) sets mode.
• theme: (string) current theme name. Defaults to the first theme in the availableThemes NitramUI prop, or to smooth if availableThemes is not set.
• setTheme: (function) sets theme.
• themes: (object) available themes, built-in and custom. Default:

  {
    "smooth": "smooth",
    "hiContrast": "hiContrast"
  }
  

• ds: (object) design system definition. Each attributed has to be accesed using getDSVal. See: designSystem
• getDSVal: (function) useful to get mode and theme aware values from the design system. Example: getDSVal(ds.colors.bg)

Change theme and mode

import { modes, NitramUI, NitramUIContext } from 'nitramui'

export const App = () => {
  return (
    <NitramUI>
      <NitramUIContext.Consumer>
        {({ mode, setMode }) => (
          <Layout
            menuB={(
              <Control
                type='select'
                value={mode}
                onChange={setMode}
                options={Object.entries(modes).map(([_key, value]) => ({ label: value, value }))}
              />
            )}
          >
            <p>FG color: {getDSVal(ds.colors.fg)}</p>
          </Layout>
        )}
      </NitramUIContext.Consumer>
    </NitramUI>
  )
}

Get design system attributees (theme and mode aware)

import { NitramUI, NitramUIContext } from 'nitramui'

export const App = () => {
  return (
    <NitramUI>
      <NitramUIContext.Consumer>
        {({ ds, getDSVal }) => (
          <Layout>
            <p>FG color: {getDSVal(ds.colors.fg)}</p>
          </Layout>
        )}
      </NitramUIContext.Consumer>
    </NitramUI>
  )
}

Note: NitramUIContext has to be consumed within NitramUI scope.

Roadmap

• Use Storybook
• Test reset using createGlobalStyle
• Add Inter, Inconsolata
• Headings font
• top and bottom fixed bars
• Add eslint
• Add themes (smooth, dark, high-contrast, …)
• Add box shadow to design system
• Export GlobalStyle and ThemeProvider (do not export reset)
• Make smooth default theme when there is no ThemeProvider (test in Layout/Full story)
• Build NitramUI into a library
• Add a screenshot
• Add license
• Add Pane size: half
• Fix labelStyles (or just vertical padding) for inputs and selects
• Create form control component (for inputs and selects with or without labels)
• Make onChange optional on controls
• Export design system variables aware of theme and mode
• Add instructions for NitramUIContext.Consumer, and controlling modes and themes
• Add button variants (secondary, text, …)
• Fix too many scrollbars on Windows
• Prevent control labels from being selected (reproduce with double click on them)
• Pass ref to controls
• Have the outter pane have the scroll. E.g: default pane inside full-width pane (<Pane height='auto'> inside a Layout or Container with scroll='vertical')
• Center panes horizontally
• Add git hook for build and build storybook
• Add button link (https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md)
• Add instructions for customThemes and availableThemes props
• Add hook for auto dark mode
• Add packagequality.com badge
• Create React App template
• Responsive layout (what to do with the sidebar pane?)
• Check for updates
• Add terser (https://www.npmjs.com/package/rollup-plugin-terser)
• Move some dependencies to devDependencies/peerDependencies (does this prevent them to be installed when installed this package, for example popper.js which I think comes from storybook)
• Add guidelines for contributors
• Add build badge
• Add tests
• Add tests coverage badge
• Is having funding/sponsors/buy-me-a-beer/bitcoin-wallet a good idea?
• Create custom font with Glyphsapp Mini

Useful articles:

• Guide to building a React components library with Rollup and styled-jsx
• Creating a React Component Library using Rollup, Typescript, Sass and Storybook
• How to make a beautiful, tiny npm package and publish it