react-okr-ui
Version:
A React user interface toolkit for building OKR centric applications.
2 lines • 4.02 kB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{eQFE:function(e,t,a){"use strict";a.r(t),a.d(t,"_frontmatter",(function(){return o})),a.d(t,"default",(function(){return s}));var n=a("Fcif"),r=a("+I+c"),l=(a("mXGw"),a("/FXl")),i=a("TjRS"),o=(a("aD51"),{});void 0!==o&&o&&o===Object(o)&&Object.isExtensible(o)&&!o.hasOwnProperty("__filemeta")&&Object.defineProperty(o,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"src/docs/about.mdx"}});var c={_frontmatter:o},b=i.a;function s(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(l.b)(b,Object(n.a)({},c,a,{components:t,mdxType:"MDXLayout"}),Object(l.b)("h1",{id:"about"},"About"),Object(l.b)("p",null,"OKR UI is an open source project, released under MIT License."),Object(l.b)("h2",{id:"features"},"Features"),Object(l.b)("p",null,"OKR UI provides everything you'll need to quickly build OKR experiences:"),Object(l.b)("h3",{id:"components"},"Components"),Object(l.b)("p",null,"A collection of highly compositional components for a wide range of possible OKR UI requirements:"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"OKR"),": contain your OKR and configure"),Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"Objective"),": contain and layout your objective"),Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"Goal"),": display your objective, and calculate result text from props"),Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"Due date"),": process and display a due date with label"),Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"Progress bar:")," display a provided percentage value, or calculate percentage progress from results"),Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"Result:")," contain and layout your key result"),Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"Current value:")," display a current value, with label in a specific metric (e.g., percentage, money, etc.)")),Object(l.b)("h3",{id:"services"},"Services"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"Calculate progress:")," take in results and return objective progress."),Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"Calculate grade:")," calculate result grade from score."),Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"Calculate score:")," calculate score from start, end, and current result value.")),Object(l.b)("h3",{id:"configuration"},"Configuration"),Object(l.b)("p",null,"As much as possible OKR UI has been designed to apply to a range of requirements. Configure:"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"Metrics:")," what metrics do you measure? Keep results consistent with pre-defined metrics."),Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"Grades:")," how do you measure success? Customize how progress and score is graded.")),Object(l.b)("hr",null),Object(l.b)("h2",{id:"first-principles"},"First principles"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"Strongly compositional:")," quickly scaffold UI and maintain data visibility."),Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"Minimal dependencies:")," low bloat. Just components and a few helpful utilities."),Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"Un-opinionated:")," limited assumptions. Manage state, data, style, your way.")))}void 0!==s&&s&&s===Object(s)&&Object.isExtensible(s)&&!s.hasOwnProperty("__filemeta")&&Object.defineProperty(s,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"src/docs/about.mdx"}}),s.isMDXComponent=!0}}]);
//# sourceMappingURL=component---src-docs-about-mdx-8b1a82da6d1f3c1741aa.js.map