@databyss-org/ui NPM

databyss-ui

This is a component and module library for databyss applications.

The goals of the package are

to allow application developers to easily build new applications or features
and to provide, through documented recommendations and examples, standards of semantics, aesthetics and accessibility across all databyss applications.

Component library docs are available at
https://databyss-styleguide.herokuapp.com

Module demos are available at
https://databyss-stories.herokuapp.com

Getting Started

To use databyss-ui components or modules in your project, you may import them in one of two ways.

If your ES6 configuration doesn't match that of the databyss-ui package, use the following format to import components pre-transpiled with babel-preset-env:

import { BackButton } from '@databyss-org/databyss-ui';

If you want to import the components directory, without any transpile stage, use this format:

import PageHeading from '@databyss-org/databyss-ui/components/Heading/PageHeading';

You'll also need to wrap your components in a ThemeProvider component from the react-jss package:

import { theme } from '@databyss-org/databyss-ui';
export default () => (
  <ThemeProvider theme={theme}>
    <PageHeading>Jacques Derrida on "Abyss"</PageHeading>
  </ThemeProvider>
);

Alternatively, if you're render a fullscreen module or component, you can use the ThemedViewport component, which uses the default theme if none is specified:

import { ThemedViewport } from '@databyss-org/databyss-ui';
export default () => (
  <ThemedViewport>
    <PageHeading>Jacques Derrida on "Abyss"</PageHeading>
  </ThemedViewport>
);

JSS

The databyss-ui package uses JSS and react-jss for rendering styles and managing themes.

Shared themes variables and macros are in src/shared-styles.

Adding Images and Files

With Webpack, using static assets like images works similarly to CSS.

You can import a file right in a JavaScript module. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the src attribute of an image or the href of a link to a PDF.

To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to #1153.

Here is an example:

import React from 'react'
import logo from './logo.png' // Tell Webpack this JS file uses this image

console.log(logo) // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />
}

export default Header

This ensures that when the project is built, Webpack will correctly move the images into the build folder, and provide us with correct paths.