Cubejs-uikit NPM

Cube.js UI Kit

UI Kit for Cube.js website and other projects.

UI Kit is based on Numl Design System and injects it into the project.

To learn more about Numl+React integration read the documentation.

Showcase

Showcase is a playground to see all the components in one place. Also it's used to present a design system solutions.

Install dependencies:

$ npm i

Add CeraPro font to the src/assets/fonts folder:

CeraPro-Regular.woff2
CeraPro-Medium.woff2

Run showcase:

$ npm start

Integration

Install via npm:

npm install cubejs-uikit jsx-native-events --save-dev

For Gatsby projects

Add the following code to the gatsby-ssr.js file:

import React from "react";

export const onRenderBody = ({ setHeadComponents }) => {
    if (process.env.BUILD_STAGE === `build-html`) {
        const css = `
*:not(:defined) { visibility: hidden; }
@font-face {
    font-family: "CeraPro";
    src: url(./assets/fonts/CeraPro-Regular.woff2);
    font-weight: 300;
}

@font-face {
    font-family: "CeraPro";
    src: url(./assets/fonts/CeraPro-Regular.woff2);
    font-weight: 400;
}

@font-face {
    font-family: "CeraPro";
    src: url(./assets/fonts/CeraPro-Medium.woff2);
    font-weight: 500;
}

@font-face {
    font-family: "CeraPro";
    src: url(./assets/fonts/CeraPro-Medium.woff2);
    font-weight: 600;
}

@font-face {
    font-family: "CeraPro";
    src: url(./assets/fonts/CeraPro-Medium.woff2);
    font-weight: 700;
}
`;

        setHeadComponents([<style>{css}</style>]);
    }
}

Where ./assets/fonts/CeraPro-Medium.woff2 is a public path to CeraPro font.

For other projects

Include the following CSS in your application:

*:not(:defined) { visibility: hidden; }
@font-face {
    font-family: "CeraPro";
    src: url(./assets/fonts/CeraPro-Regular.woff2);
    font-weight: 300;
}

@font-face {
    font-family: "CeraPro";
    src: url(./assets/fonts/CeraPro-Regular.woff2);
    font-weight: 400;
}

@font-face {
    font-family: "CeraPro";
    src: url(./assets/fonts/CeraPro-Medium.woff2);
    font-weight: 500;
}

@font-face {
    font-family: "CeraPro";
    src: url(./assets/fonts/CeraPro-Medium.woff2);
    font-weight: 600;
}

@font-face {
    font-family: "CeraPro";
    src: url(./assets/fonts/CeraPro-Medium.woff2);
    font-weight: 700;
}

Where ./assets/fonts/CeraPro-Medium.woff2 is your local (or public) path to CeraPro font.

Usage

Import UI Kit to your React project:

// index.js / gatsby-browser.js for Gatsby
import UIKit from 'cubejs-uikit';

UIKit.init();

Either you can pass options to the init() method or/and subscribe to it.

UIKit.init({
  scheme: 'auto' // 'light' by default
}).then(() => {
  // UI Kit is initialized
});

Use simplified

Import UI Components to your application. It's required to use Root component to wrap your application.

import Root from 'cubejs-uikit/dist/Root';
import Topbar from 'cubejs-uikit/dist/Topbar';

export default function App() {
  return <Root>
    <Topbar/>
    <nu-block>Other content</nu-block>
  </Root>;
}

Available components

Root - A root component to wrap your application with.
Section - A section component.
Card - A card component.
Grid - A card component.

Available blocks

Topbar - A top bar component with a row of links.
Hero - A card block component.
Footer - A footer block component with copyright, links and "get in touch" section.
SubscriptionBlock - A subscription block. A simple form to subscribe user to our updates.
CardBlock - A card block.
FeatureBlock - A block with feature list.
SmallSignUpCard - A small signup card block with dark background.
BigSignUpCard - A big signup card block with white background.
SwitchBlock - A block with button group to switch sections each with text and image.

Contribution

Add new component/block

Add a new file {ComponentName}.jsx in src/components folder with your component.
Add a new line to list.js file in the root with component name.
Add an example of usage to the Showcase component in src/showcase/index.jsx.
Add a new line to the Available components section.
Add a documentation docs/${ComponentName}.md file for the component.