evristica-ui

npm

npm i @emotion/styled @emotion/react @euristica/ui --save

yarn

yarn add @emotion/styled @emotion/react @euristica/ui

Demo

guide basics

• the guide is made using @emotion and typescript

usage

themes

import React, { useState } from "react";
import styled from "@emotion/styled";
import { ThemeProvider } from "@emotion/react";
import { themes } from "@evristica/ui";

const Layout = () => {
    const { theme, setTheme } = useState("default");
    const CurrentTheme = themes[theme];

    return (
        <ThemeProvider theme={themes[theme]}>
            <App />
        </ThemeProvider>
    )
};

two themes are now available (default and dark), but you can create your own

components

    import { Container, Label, Input, Datepicker //and more } from "@evristica/ui";
    
    const MyComponent = () => {
        return (
            <Input
                label="Some input"
                value={someValue}
                onChange={e => handler(e.target.value)}
            />
        )
    }
}

ssr

    import { ServerStyleSheet, StyleSheetManager } from "styled-components";
    const sheet = new ServerStyleSheet();
    
    // tags need to be added to html markup
    const styleTags = sheet.getStyleElement();
    
    const HtmlContent = <StyleSheetManager sheet={sheet.instance}>
        <App />
    </StyleSheetManager>

documentation

more complete documentation will come later