react-okr-ui/.docz/.cache/caches/gatsby-plugin-mdx/diskstore-bb647a8a23f09ae8e5eea35bf2ceb69c.json

A React user interface toolkit for building OKR centric applications.

{"expireTime":9007200867386061000,"key":"gatsby-plugin-mdx-entire-payload-83c9f19f8ec76d5603409bab615f24ae-","val":{"mdast":{"type":"root","children":[{"type":"import","value":"import DefaultLayout from \"/Users/seanrioux/products/open-source-okr/code/react-okr-ui/node_modules/gatsby-theme-docz/src/base/Layout.js\"","position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":138,"offset":139},"indent":[]}},{"type":"export","default":true,"value":"export default DefaultLayout","position":{"start":{"line":5,"column":1,"offset":141},"end":{"line":5,"column":29,"offset":169},"indent":[]}},{"type":"import","value":"import Objective from \"../components/Objective\";\nimport Progress from \"../components/Progress\";\nimport Result from \"../components/Result\";\nimport Current from \"../components/Current\";\nimport Score from \"../components/Score\";\nimport Goal from \"../components/Goal\";\nimport Due from \"../components/Due\";\nimport Okr from \"../components/Okr\";\nimport Row from \"../components/Row\";","position":{"start":{"line":8,"column":1,"offset":172},"end":{"line":16,"column":37,"offset":546},"indent":[1,1,1,1,1,1,1,1]}},{"type":"import","value":"import { Playground, Props } from \"docz\";\nimport { dateOptions, metrics, results, grades } from \"../data/example.js\";","position":{"start":{"line":18,"column":1,"offset":548},"end":{"line":19,"column":76,"offset":665},"indent":[1]}},{"type":"heading","depth":1,"children":[{"type":"text","value":"React OKR UI","position":{"start":{"line":21,"column":3,"offset":669},"end":{"line":21,"column":15,"offset":681},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":667},"end":{"line":21,"column":15,"offset":681},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"An open source user interface for building OKR centric applications with React.","position":{"start":{"line":23,"column":1,"offset":683},"end":{"line":23,"column":80,"offset":762},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":683},"end":{"line":23,"column":80,"offset":762},"indent":[]}},{"type":"thematicBreak","position":{"start":{"line":25,"column":1,"offset":764},"end":{"line":25,"column":4,"offset":767},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Example","position":{"start":{"line":27,"column":4,"offset":772},"end":{"line":27,"column":11,"offset":779},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":769},"end":{"line":27,"column":11,"offset":779},"indent":[]}},{"type":"jsx","value":"<Okr metrics={metrics} grades={grades}>\n\t<Objective>\n\t\t<Row type=\"flex\">\n\t\t\t<Goal label=\"Objective\" text=\"Carve out a niche\" />\n\t\t\t<Due\n\t\t\t\tlabel=\"Due date\"\n\t\t\t\tdate=\"2022/01/01\"\n\t\t\t\toptions={{ year: \"numeric\", month: \"short\", day: \"numeric\" }}\n\t\t\t/>\n\t\t</Row>\n\t\t<Progress label=\"progress\" value={0.75} />\n\t\t<Result>\n\t\t\t<Row type=\"flex\">\n\t\t\t\t<Goal\n\t\t\t\t\tlabel=\"Key Result\"\n\t\t\t\t\tdirection=\"decrease\"\n\t\t\t\t\tmetricId=\"1\"\n\t\t\t\t\tstart={20}\n\t\t\t\t\tend={50}\n\t\t\t\t/>\n\t\t\t\t<Row type=\"flex\">\n\t\t\t\t\t<Current\n\t\t\t\t\t\tclassName=\"okr-mr-1\"\n\t\t\t\t\t\tlabel=\"Current\"\n\t\t\t\t\t\tmetricId=\"1\"\n\t\t\t\t\t\tvalue={30}\n\t\t\t\t\t/>\n\t\t\t\t\t<Score\n\t\t\t\t\t\tclassName=\"okr-ml-1\"\n\t\t\t\t\t\tdirection=\"decrease\"\n\t\t\t\t\t\tstart={20}\n\t\t\t\t\t\tend={50}\n\t\t\t\t\t\tcurrent={30}\n\t\t\t\t\t\tcircle\n\t\t\t\t\t/>\n\t\t\t\t</Row>\n\t\t\t</Row>\n\t\t</Result>\n\t\t<Result>\n\t\t\t<Row type=\"flex\">\n\t\t\t\t<Goal\n\t\t\t\t\tlabel=\"Key Result\"\n\t\t\t\t\tdirection=\"increase\"\n\t\t\t\t\tmetricId=\"2\"\n\t\t\t\t\tstart={110}\n\t\t\t\t\tend={190}\n\t\t\t\t/>\n\t\t\t\t<Row type=\"flex\">\n\t\t\t\t\t<Current\n\t\t\t\t\t\tclassName=\"okr-mr-1\"\n\t\t\t\t\t\tlabel=\"Current\"\n\t\t\t\t\t\tmetricId=\"2\"\n\t\t\t\t\t\tcurrent={175}\n\t\t\t\t\t/>\n\t\t\t\t\t<Score\n\t\t\t\t\t\tclassName=\"okr-ml-1\"\n\t\t\t\t\t\tdirection=\"increase\"\n\t\t\t\t\t\tstart={110}\n\t\t\t\t\t\tend={190}\n\t\t\t\t\t\tcurrent={175}\n\t\t\t\t\t\tcircle\n\t\t\t\t\t/>\n\t\t\t\t</Row>\n\t\t\t</Row>\n\t\t</Result>\n\t\t<Result>\n\t\t\t<Row type=\"flex\">\n\t\t\t\t<Goal\n\t\t\t\t\tlabel=\"Key Result\"\n\t\t\t\t\tdirection=\"attain\"\n\t\t\t\t\tmetricId=\"3\"\n\t\t\t\t\tstart={1000}\n\t\t\t\t\tend={10000}\n\t\t\t\t/>\n\t\t\t\t<Row type=\"flex\">\n\t\t\t\t\t<Current\n\t\t\t\t\t\tclassName=\"okr-mr-1\"\n\t\t\t\t\t\tlabel=\"Current\"\n\t\t\t\t\t\tmetricId=\"3\"\n\t\t\t\t\t\tvalue={30}\n\t\t\t\t\t/>\n\t\t\t\t\t<Score\n\t\t\t\t\t\tclassName=\"okr-ml-1\"\n\t\t\t\t\t\tdirection=\"attain\"\n\t\t\t\t\t\tstart={1000}\n\t\t\t\t\t\tend={10000}\n\t\t\t\t\t\tcurrent={7000}\n\t\t\t\t\t\tcircle\n\t\t\t\t\t/>\n\t\t\t\t</Row>\n\t\t\t</Row>\n\t\t</Result>\n\t</Objective>\n</Okr>","position":{"start":{"line":29,"column":1,"offset":781},"end":{"line":122,"column":7,"offset":2463},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Gettin Started","position":{"start":{"line":124,"column":4,"offset":2468},"end":{"line":124,"column":18,"offset":2482},"indent":[]}}],"position":{"start":{"line":124,"column":1,"offset":2465},"end":{"line":124,"column":18,"offset":2482},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Getting started is easy. Simply install the package via npm:","position":{"start":{"line":126,"column":1,"offset":2484},"end":{"line":126,"column":61,"offset":2544},"indent":[]}}],"position":{"start":{"line":126,"column":1,"offset":2484},"end":{"line":126,"column":61,"offset":2544},"indent":[]}},{"type":"code","lang":null,"meta":null,"value":"npm install react-okr-ui","position":{"start":{"line":128,"column":1,"offset":2546},"end":{"line":130,"column":4,"offset":2578},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"Once installed, import the components you need into your React app:","position":{"start":{"line":132,"column":1,"offset":2580},"end":{"line":132,"column":68,"offset":2647},"indent":[]}}],"position":{"start":{"line":132,"column":1,"offset":2580},"end":{"line":132,"column":68,"offset":2647},"indent":[]}},{"type":"code","lang":"js","meta":null,"value":"import { Okr, Objective, Result, Goal } from \"react-okr-ui\";","position":{"start":{"line":134,"column":1,"offset":2649},"end":{"line":136,"column":4,"offset":2719},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"To view all the component in action, check out the playground ","position":{"start":{"line":138,"column":1,"offset":2721},"end":{"line":138,"column":63,"offset":2783},"indent":[]}},{"type":"link","title":null,"url":"\"/components#example\"","children":[{"type":"text","value":"here","position":{"start":{"line":138,"column":64,"offset":2784},"end":{"line":138,"column":68,"offset":2788},"indent":[]}}],"position":{"start":{"line":138,"column":63,"offset":2783},"end":{"line":138,"column":92,"offset":2812},"indent":[]}},{"type":"text","value":".","position":{"start":{"line":138,"column":92,"offset":2812},"end":{"line":138,"column":93,"offset":2813},"indent":[]}}],"position":{"start":{"line":138,"column":1,"offset":2721},"end":{"line":138,"column":93,"offset":2813},"indent":[]}},{"type":"export","value":"export const _frontmatter = {}","position":{"start":{"line":141,"column":1,"offset":2816},"end":{"line":141,"column":31,"offset":2846},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":141,"column":31,"offset":2846}}},"scopeImports":[],"scopeIdentifiers":[],"rawMDXOutput":"/* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsxRuntime classic */\n/* @jsx mdx */\nimport DefaultLayout from \"/Users/seanrioux/products/open-source-okr/code/react-okr-ui/node_modules/gatsby-theme-docz/src/base/Layout.js\"\nimport Objective from \"../components/Objective\";\nimport Progress from \"../components/Progress\";\nimport Result from \"../components/Result\";\nimport Current from \"../components/Current\";\nimport Score from \"../components/Score\";\nimport Goal from \"../components/Goal\";\nimport Due from \"../components/Due\";\nimport Okr from \"../components/Okr\";\nimport Row from \"../components/Row\";\nimport { Playground, Props } from \"docz\";\nimport { dateOptions, metrics, results, grades } from \"../data/example.js\";\nexport const _frontmatter = {};\n\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = DefaultLayout\nexport default function MDXContent({\n  components,\n  ...props\n}) {\n  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n\n\n\n\n    <h1 {...{\n      \"id\": \"react-okr-ui\"\n    }}>{`React OKR UI`}</h1>\n    <p>{`An open source user interface for building OKR centric applications with React.`}</p>\n    <hr></hr>\n    <h2 {...{\n      \"id\": \"example\"\n    }}>{`Example`}</h2>\n    <Okr metrics={metrics} grades={grades} mdxType=\"Okr\">\n\t<Objective mdxType=\"Objective\">\n\t\t<Row type=\"flex\" mdxType=\"Row\">\n\t\t\t<Goal label=\"Objective\" text=\"Carve out a niche\" mdxType=\"Goal\" />\n\t\t\t<Due label=\"Due date\" date=\"2022/01/01\" options={{\n            year: \"numeric\",\n            month: \"short\",\n            day: \"numeric\"\n          }} mdxType=\"Due\" />\n\t\t</Row>\n\t\t<Progress label=\"progress\" value={0.75} mdxType=\"Progress\" />\n\t\t<Result mdxType=\"Result\">\n\t\t\t<Row type=\"flex\" mdxType=\"Row\">\n\t\t\t\t<Goal label=\"Key Result\" direction=\"decrease\" metricId=\"1\" start={20} end={50} mdxType=\"Goal\" />\n\t\t\t\t<Row type=\"flex\" mdxType=\"Row\">\n\t\t\t\t\t<Current className=\"okr-mr-1\" label=\"Current\" metricId=\"1\" value={30} mdxType=\"Current\" />\n\t\t\t\t\t<Score className=\"okr-ml-1\" direction=\"decrease\" start={20} end={50} current={30} circle mdxType=\"Score\" />\n\t\t\t\t</Row>\n\t\t\t</Row>\n\t\t</Result>\n\t\t<Result mdxType=\"Result\">\n\t\t\t<Row type=\"flex\" mdxType=\"Row\">\n\t\t\t\t<Goal label=\"Key Result\" direction=\"increase\" metricId=\"2\" start={110} end={190} mdxType=\"Goal\" />\n\t\t\t\t<Row type=\"flex\" mdxType=\"Row\">\n\t\t\t\t\t<Current className=\"okr-mr-1\" label=\"Current\" metricId=\"2\" current={175} mdxType=\"Current\" />\n\t\t\t\t\t<Score className=\"okr-ml-1\" direction=\"increase\" start={110} end={190} current={175} circle mdxType=\"Score\" />\n\t\t\t\t</Row>\n\t\t\t</Row>\n\t\t</Result>\n\t\t<Result mdxType=\"Result\">\n\t\t\t<Row type=\"flex\" mdxType=\"Row\">\n\t\t\t\t<Goal label=\"Key Result\" direction=\"attain\" metricId=\"3\" start={1000} end={10000} mdxType=\"Goal\" />\n\t\t\t\t<Row type=\"flex\" mdxType=\"Row\">\n\t\t\t\t\t<Current className=\"okr-mr-1\" label=\"Current\" metricId=\"3\" value={30} mdxType=\"Current\" />\n\t\t\t\t\t<Score className=\"okr-ml-1\" direction=\"attain\" start={1000} end={10000} current={7000} circle mdxType=\"Score\" />\n\t\t\t\t</Row>\n\t\t\t</Row>\n\t\t</Result>\n\t</Objective>\n    </Okr>\n    <h2 {...{\n      \"id\": \"gettin-started\"\n    }}>{`Gettin Started`}</h2>\n    <p>{`Getting started is easy. Simply install the package via npm:`}</p>\n    <pre><code parentName=\"pre\" {...{}}>{`npm install react-okr-ui\n`}</code></pre>\n    <p>{`Once installed, import the components you need into your React app:`}</p>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-js\"\n      }}>{`import { Okr, Objective, Result, Goal } from \"react-okr-ui\";\n`}</code></pre>\n    <p>{`To view all the component in action, check out the playground `}<a parentName=\"p\" {...{\n        \"href\": \"%22/components#example%22\"\n      }}>{`here`}</a>{`.`}</p>\n\n    </MDXLayout>;\n}\n\n;\nMDXContent.isMDXComponent = true;"}}