react-okr-ui/docs/component---src-docs-home-mdx-9ac7b845d93575506038.js

A React user interface toolkit for building OKR centric applications.

(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{Rs4b:function(e,t,a){"use strict";a.r(t),a.d(t,"_frontmatter",(function(){return y})),a.d(t,"default",(function(){return T}));var c=a("Fcif"),r=a("+I+c"),n=(a("mXGw"),a("/FXl")),b=a("TjRS"),l=a("MJlK"),o=a("jmIX"),i=a("YbNZ"),m=a("fVN1"),p=a("1MTx"),d=a("GTvw"),s=a("sxk2"),u=a("OAxu"),O=a("BL0q"),j=(a("ZFoC"),a("mYp2")),y=(a("aD51"),{});void 0!==y&&y&&y===Object(y)&&Object.isExtensible(y)&&!y.hasOwnProperty("__filemeta")&&Object.defineProperty(y,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"src/docs/home.mdx"}});var x={_frontmatter:y},f=b.a;function T(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(n.b)(f,Object(c.a)({},x,a,{components:t,mdxType:"MDXLayout"}),Object(n.b)("h1",{id:"react-okr-ui"},"React OKR UI"),Object(n.b)("p",null,"An open source user interface for building OKR centric applications with React."),Object(n.b)("hr",null),Object(n.b)("h2",{id:"example"},"Example"),Object(n.b)(u.c,{metrics:j.c,grades:j.b,mdxType:"Okr"},Object(n.b)(l.a,{mdxType:"Objective"},Object(n.b)(O.a,{type:"flex",mdxType:"Row"},Object(n.b)(d.a,{label:"Objective",text:"Carve out a niche",mdxType:"Goal"}),Object(n.b)(s.a,{label:"Due date",date:"2022/01/01",options:{year:"numeric",month:"short",day:"numeric"},mdxType:"Due"})),Object(n.b)(o.a,{label:"progress",value:.75,mdxType:"Progress"}),Object(n.b)(i.a,{mdxType:"Result"},Object(n.b)(O.a,{type:"flex",mdxType:"Row"},Object(n.b)(d.a,{label:"Key Result",direction:"decrease",metricId:"1",start:20,end:50,mdxType:"Goal"}),Object(n.b)(O.a,{type:"flex",mdxType:"Row"},Object(n.b)(m.a,{className:"okr-mr-1",label:"Current",metricId:"1",value:30,mdxType:"Current"}),Object(n.b)(p.a,{className:"okr-ml-1",direction:"decrease",start:20,end:50,current:30,circle:!0,mdxType:"Score"})))),Object(n.b)(i.a,{mdxType:"Result"},Object(n.b)(O.a,{type:"flex",mdxType:"Row"},Object(n.b)(d.a,{label:"Key Result",direction:"increase",metricId:"2",start:110,end:190,mdxType:"Goal"}),Object(n.b)(O.a,{type:"flex",mdxType:"Row"},Object(n.b)(m.a,{className:"okr-mr-1",label:"Current",metricId:"2",current:175,mdxType:"Current"}),Object(n.b)(p.a,{className:"okr-ml-1",direction:"increase",start:110,end:190,current:175,circle:!0,mdxType:"Score"})))),Object(n.b)(i.a,{mdxType:"Result"},Object(n.b)(O.a,{type:"flex",mdxType:"Row"},Object(n.b)(d.a,{label:"Key Result",direction:"attain",metricId:"3",start:1e3,end:1e4,mdxType:"Goal"}),Object(n.b)(O.a,{type:"flex",mdxType:"Row"},Object(n.b)(m.a,{className:"okr-mr-1",label:"Current",metricId:"3",value:30,mdxType:"Current"}),Object(n.b)(p.a,{className:"okr-ml-1",direction:"attain",start:1e3,end:1e4,current:7e3,circle:!0,mdxType:"Score"})))))),Object(n.b)("h2",{id:"gettin-started"},"Gettin Started"),Object(n.b)("p",null,"Getting started is easy. Simply install the package via npm:"),Object(n.b)("pre",null,Object(n.b)("code",{parentName:"pre"},"npm install react-okr-ui\n")),Object(n.b)("p",null,"Once installed, import the components you need into your React app:"),Object(n.b)("pre",null,Object(n.b)("code",{parentName:"pre",className:"language-js"},'import { Okr, Objective, Result, Goal } from "react-okr-ui";\n')),Object(n.b)("p",null,"To view all the component in action, check out the playground ",Object(n.b)("a",{parentName:"p",href:"%22/components#example%22"},"here"),"."))}void 0!==T&&T&&T===Object(T)&&Object.isExtensible(T)&&!T.hasOwnProperty("__filemeta")&&Object.defineProperty(T,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"src/docs/home.mdx"}}),T.isMDXComponent=!0}}]);
//# sourceMappingURL=component---src-docs-home-mdx-9ac7b845d93575506038.js.map