Cassiopeia UI

• A custom framework written in TypeScript (React and Emotion) by Cognitiv engineers. Cassiopeia contains the primary UI components that are shared between all projects. This includes inputs, dropdowns, tables, checkboxes, editors etc.

System Requirements

• Node >= 18
• Yarn

Tech Stack

• Moment: A JS library which helps is parsing, validating, manipulating and displaying date/time. Documentation

• FontAwesome: The next generation of the web’s favorite icon library + toolkit. Documentation

• Monaco Editor: The Monaco Editor is the code editor powered by the VS Code engine. Documentation JSON Schema

• React Number Format: React component to format number in an input or as a text. Documentation

Local Development

// --- INSTALL LOCAL DEVELOPMENT --- //

$ yarn

// --- RUN LOCAL DEVELOPMENT --- //

$ yarn storybook

Install

yarn add cassiopeia-ui

// requires fontawesome icons
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'cassiopeia-ui';
import 'cassiopeia-ui/dist/index.css';

// fontawesome for icons
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(far, fas, fab);

const App = () => {
  return <Button>Button!</Button>;
};

const render = (Component) => ReactDOM.render(<Component />, document.getElementById('root'));

render(App);