#### Defined as the goodwill a speaker cultivates between themself and their audience, a condition of receptivity
Major.Minor.Update
xx.xx.xxxx
Install eunoia
npm i eunoia
// 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>
}
TypescriptJavascript/Typescriptconst Default = () => <Button onClick={action('clicked')}>Default Button</Button>
primary?: boolean
transparent?: boolean
blackFont?: boolean
import { RightArrow } from 'eunoia'
// use
const Right_Arrow = () => <RightArrow scalingFactor={2} color="#000000" />
color?: string
offset?: string
scalingFactor?: number
name?: string
font?: string
import { PhotoshopIcon } from 'eunoia'
// use
const Photoshop_Icon = () => <PhotoshopIcon name="photoshop" font="Roboto" color="#000000" scalingFactor={1} />
import { ReactIcon } from 'eunoia'
// use
const React_Icon = () => <ReactIcon scalingFactor={1} name="React.js" font="Roboto" color="#000000" />
import { JiraIcon } from 'eunoia'
// use
const Jira_Icon = () => <JiraIcon scalingFactor={1} name="Jira" font="Roboto" color="#000000" />
color?: string
offset?: string
scalingFactor?: number | null
import { UIStyle } from 'eunoia'
// use as required
const Gld = UIStyle.UIColors.gold
UIColors: {
white: '#FFFFFF',
lightGrey: '#00000029',
black: '#000000',
gold: '#E1A87A',
darkGrey: '#212121',
mediumGrey: '#5D5D5D',
}
import { Menu } from 'eunoia'
// use as required
render(){
return <Menu config={config} options={options} />
}
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.
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
}>
import { Card } from 'eunoia'
// use as required
render(){
return <Card config={config} />
}
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.
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
}
import { BannerCard } from 'eunoia'
// use as required
render(){
return <BannerCard config={config} />
}
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
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
}
import { SectionHeader } from 'eunoia'
// use as required
render(){
return <SectionHeader config={config}>Design! :)</SectionHeader>
}
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.
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
}
🤟💻🔨 :)
FAQs
#### Defined as the goodwill a speaker cultivates between themself and their audience, a condition of receptivity
The npm package eunoia receives a total of 0 weekly downloads. As such, eunoia popularity was classified as not popular.
We found that eunoia demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.