Eunoia NPM | npm.io

Eunoia - εὔνοιᾰ

Defined as the goodwill a speaker cultivates between themself and their audience, a condition of receptivity

logo

Status

Versioning

Major.Minor.Update\ xx.xx.xxxx

Storybook Link

Storybook - Eunoia

NPM Link

NPM \ NPM eunoia

Setup

Install eunoia

npm i eunoia

It is recommended that this library be used alongside styled components and Material UI

Usage

// import
import { Button } from "eunoia"
/**
 * Every component is accessible directly via the
 * universal import "eunoia" designed to be a
 * single dependency import.
 *
 * Checkout the storybook
 * https://eunoia.netlify.app/
 * for detailed documentation
 *
 **/

// use!
render(){
  return <Button>Hello from εὔνοιᾰ!</Button>
}

Source: `Typescript`

API: `Javascript/Typescript`

Code Style: Prettier

Syntax: ES6^

What is available

Button

Storybook Link

const Default = () => <Button onClick={action('clicked')}>Default Button</Button>

Button props

  primary?: boolean
  transparent?: boolean
  blackFont?: boolean

Website Icons

import { RightArrow } from 'eunoia'

// use
const Right_Arrow = () => <RightArrow scalingFactor={2} color="#000000" />

List of Website Icons

RightArrow
LeftArrow
DownArrow
UpArrow
Dribbble
Github
Medium
Linkedin
Home
Menu

Icon Props

  color?: string
  offset?: string
  scalingFactor?: number
  name?: string
  font?: string

Design Icons

import { PhotoshopIcon } from 'eunoia'

// use
const Photoshop_Icon = () => <PhotoshopIcon name="photoshop" font="Roboto" color="#000000" scalingFactor={1} />

List of Design Icons

Photoshop
Illustrator
Experience Designer
Figma
Sketch
Invision
After Effects
Indesign
Material Design
Creative Cloud

Development Icons

import { ReactIcon } from 'eunoia'

// use
const React_Icon = () => <ReactIcon scalingFactor={1} name="React.js" font="Roboto" color="#000000" />

List of Dev Icons

React
Python
Webpack
Node.js
Javascript
PHP
Git (Large)
Jenkins
Kubernetes
Docker
Sass
CSS (3)
HTML (5)
Yarn
NPM
Ubuntu
MySQL
JQuery
Firebase (Cloud)
C++ (ISO)
Typescript

Industry Icons

import { JiraIcon } from 'eunoia'

// use
const Jira_Icon = () => <JiraIcon scalingFactor={1} name="Jira" font="Roboto" color="#000000" />

List of Industry Icons

JiraIcon
GithubIndustryIcon
BitbucketIcon
ConfluenceIcon
GoogleAnalyticsIcon
GoogleCloudIcon
AWSIcon
InvisionIndustryIcon
SlackIcon
MicrosoftIcon

Icon Props

  color?: string
  offset?: string
  scalingFactor?: number | null

Colors UIStyle:

Theme Colors

import { UIStyle } from 'eunoia'

// use as required
const Gld = UIStyle.UIColors.gold

List of Colors:

  UIColors: {
    white: '#FFFFFF',
    lightGrey: '#00000029',
    black: '#000000',
    gold: '#E1A87A',
    darkGrey: '#212121',
    mediumGrey: '#5D5D5D',
  }

Menu Component

Menu component

import { Menu } from 'eunoia'

// use as required
render(){
  return <Menu config={config} options={options} />
}

Details:

The menu component take two args. The first is an object called config that details the style of the menu. The second is an array of objects called options. This array contains a list of items that are rendered to the menu. The menu has both mobile and desktop support and is built over Material UI.\ The Menu uses react-router to implement navigation. if you want custom navigation, it can be overridden by passing a JSX component as the icon param in the array of objects options arg.

Interface:

See the Menu Storybook for an example with source code\ config

  config: {
    fontColor?: string
    activeSection?: string
    hideOnMobile?: boolean
    DisableMobile?: boolean
    fontOverride?: string
    boldText?: boolean
    spacing?: any
    row?: boolean
    fontSize?: string
    mobileBreakpoint?: number | undefined
    breakpoints: {
      xs?: boolean
      sm?: boolean
      xl?: boolean
    }
  }

options

  options: Array<{
    title?: string | undefined
    link?: string | undefined | any // this is a local nav link with react-router-dom
    exRef: string | undefined // this is an external link
    newTab?: boolean
    icon?: any
    main?: boolean | undefined
  }>

Card

Card component

import { Card } from 'eunoia'

// use as required
render(){
  return <Card config={config} />
}

Details

Interface

See the Card Storybook for an example with source code\

config

  config: {
    shouldRender: boolean | undefined
    imageURL?: string | undefined
    imageAltText?: string | undefined
    content?: string
    title: string
    centerTitle?: boolean | undefined
    centerContent?: boolean | undefined
    fontOverride?: string | undefined
    fontColor?: string | undefined
    fontSize?: string | undefined
    fontSizeTitle?: string | undefined
    height?: string | number | undefined
    link?: string | undefined | any
    event?: any | undefined
    containImage?: boolean | undefined // not yet implemented
  }

BannerCard

BannerCard component

import { BannerCard } from 'eunoia'

// use as required
render(){
  return <BannerCard config={config} />
}

Details

The card component is built on top of the Material UI Card component and has similar behavior. It is a flex card with a box shadow that is designed for content sharing . It takes a config object that determines the layout of the card and its content. It differs from the regular card component because the image is rendered to the right side, and is a little more particular, especially for mobile

Interface

See the Card Storybook for an example with source code\

config

  config: {
    shouldRender: boolean | undefined
    imageURL?: string | undefined
    imageAltText?: string | undefined
    content?: string
    title: string
    centerTitle?: boolean | undefined
    centerContent?: boolean | undefined
    fontOverride?: string | undefined
    fontColor?: string | undefined
    fontSize?: string | undefined
    fontSizeTitle?: string | undefined
    height?: string | number | undefined
    link?: string | undefined | any
    event?: any | undefined
    containImage?: boolean | undefined
    imageWidth?: number | undefined
  }

Section Header

SectionHeader component

import { SectionHeader } from 'eunoia'

// use as required
render(){
  return <SectionHeader config={config}>Design! :)</SectionHeader>
}

Details

The section header component is just CSS and takes a config object detailed below. Styles can be overridden using styled(SectionHeader) from styled-components, or can be used as-is.

Interface

See the SectionHeader Storybook for an example with source code\

config

  config: {
    shouldRender: boolean | undefined
    text?: string
    centerText?: boolean | undefined
    fontOverride?: string | undefined
    fontColor?: string | undefined
    fontSize?: number | undefined
    height?: number | undefined
    backgroundColor?: string | undefined
  }