react-okr-ui
Version:
A React user interface toolkit for building OKR centric applications.
1 lines • 21.1 kB
JSON
{"expireTime":9007200867386061000,"key":"gatsby-plugin-mdx-entire-payload-8c265ea8c7bf8b1962c8e262ca2875b7-","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":"heading","depth":1,"children":[{"type":"text","value":"About","position":{"start":{"line":8,"column":3,"offset":174},"end":{"line":8,"column":8,"offset":179},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":172},"end":{"line":8,"column":8,"offset":179},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"OKR UI is an open source project, released under MIT License.","position":{"start":{"line":10,"column":1,"offset":181},"end":{"line":10,"column":62,"offset":242},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":181},"end":{"line":10,"column":62,"offset":242},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Features","position":{"start":{"line":12,"column":4,"offset":247},"end":{"line":12,"column":12,"offset":255},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":244},"end":{"line":12,"column":12,"offset":255},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"OKR UI provides everything you'll need to quickly build OKR experiences:","position":{"start":{"line":14,"column":1,"offset":257},"end":{"line":14,"column":73,"offset":329},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":257},"end":{"line":14,"column":73,"offset":329},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Components","position":{"start":{"line":16,"column":5,"offset":335},"end":{"line":16,"column":15,"offset":345},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":331},"end":{"line":16,"column":15,"offset":345},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"A collection of highly compositional components for a wide range of possible OKR UI requirements:","position":{"start":{"line":18,"column":1,"offset":347},"end":{"line":18,"column":98,"offset":444},"indent":[]}}],"position":{"start":{"line":18,"column":1,"offset":347},"end":{"line":18,"column":98,"offset":444},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"OKR","position":{"start":{"line":20,"column":5,"offset":450},"end":{"line":20,"column":8,"offset":453},"indent":[]}}],"position":{"start":{"line":20,"column":3,"offset":448},"end":{"line":20,"column":10,"offset":455},"indent":[]}},{"type":"text","value":": contain your OKR and configure","position":{"start":{"line":20,"column":10,"offset":455},"end":{"line":20,"column":42,"offset":487},"indent":[]}}],"position":{"start":{"line":20,"column":3,"offset":448},"end":{"line":20,"column":42,"offset":487},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":446},"end":{"line":20,"column":42,"offset":487},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Objective","position":{"start":{"line":21,"column":5,"offset":492},"end":{"line":21,"column":14,"offset":501},"indent":[]}}],"position":{"start":{"line":21,"column":3,"offset":490},"end":{"line":21,"column":16,"offset":503},"indent":[]}},{"type":"text","value":": contain and layout your objective","position":{"start":{"line":21,"column":16,"offset":503},"end":{"line":21,"column":51,"offset":538},"indent":[]}}],"position":{"start":{"line":21,"column":3,"offset":490},"end":{"line":21,"column":51,"offset":538},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":488},"end":{"line":21,"column":51,"offset":538},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Goal","position":{"start":{"line":22,"column":5,"offset":543},"end":{"line":22,"column":9,"offset":547},"indent":[]}}],"position":{"start":{"line":22,"column":3,"offset":541},"end":{"line":22,"column":11,"offset":549},"indent":[]}},{"type":"text","value":": display your objective, and calculate result text from props","position":{"start":{"line":22,"column":11,"offset":549},"end":{"line":22,"column":73,"offset":611},"indent":[]}}],"position":{"start":{"line":22,"column":3,"offset":541},"end":{"line":22,"column":73,"offset":611},"indent":[]}}],"position":{"start":{"line":22,"column":1,"offset":539},"end":{"line":22,"column":73,"offset":611},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Due date","position":{"start":{"line":23,"column":5,"offset":616},"end":{"line":23,"column":13,"offset":624},"indent":[]}}],"position":{"start":{"line":23,"column":3,"offset":614},"end":{"line":23,"column":15,"offset":626},"indent":[]}},{"type":"text","value":": process and display a due date with label","position":{"start":{"line":23,"column":15,"offset":626},"end":{"line":23,"column":58,"offset":669},"indent":[]}}],"position":{"start":{"line":23,"column":3,"offset":614},"end":{"line":23,"column":58,"offset":669},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":612},"end":{"line":23,"column":58,"offset":669},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Progress bar:","position":{"start":{"line":24,"column":5,"offset":674},"end":{"line":24,"column":18,"offset":687},"indent":[]}}],"position":{"start":{"line":24,"column":3,"offset":672},"end":{"line":24,"column":20,"offset":689},"indent":[]}},{"type":"text","value":" display a provided percentage value, or calculate percentage progress from results","position":{"start":{"line":24,"column":20,"offset":689},"end":{"line":24,"column":103,"offset":772},"indent":[]}}],"position":{"start":{"line":24,"column":3,"offset":672},"end":{"line":24,"column":103,"offset":772},"indent":[]}}],"position":{"start":{"line":24,"column":1,"offset":670},"end":{"line":24,"column":103,"offset":772},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Result:","position":{"start":{"line":25,"column":5,"offset":777},"end":{"line":25,"column":12,"offset":784},"indent":[]}}],"position":{"start":{"line":25,"column":3,"offset":775},"end":{"line":25,"column":14,"offset":786},"indent":[]}},{"type":"text","value":" contain and layout your key result","position":{"start":{"line":25,"column":14,"offset":786},"end":{"line":25,"column":49,"offset":821},"indent":[]}}],"position":{"start":{"line":25,"column":3,"offset":775},"end":{"line":25,"column":49,"offset":821},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":773},"end":{"line":25,"column":49,"offset":821},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Current value:","position":{"start":{"line":26,"column":5,"offset":826},"end":{"line":26,"column":19,"offset":840},"indent":[]}}],"position":{"start":{"line":26,"column":3,"offset":824},"end":{"line":26,"column":21,"offset":842},"indent":[]}},{"type":"text","value":" display a current value, with label in a specific metric (e.g., percentage, money, etc.)","position":{"start":{"line":26,"column":21,"offset":842},"end":{"line":26,"column":110,"offset":931},"indent":[]}}],"position":{"start":{"line":26,"column":3,"offset":824},"end":{"line":26,"column":110,"offset":931},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":822},"end":{"line":26,"column":110,"offset":931},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":446},"end":{"line":26,"column":110,"offset":931},"indent":[1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Services","position":{"start":{"line":28,"column":5,"offset":937},"end":{"line":28,"column":13,"offset":945},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":933},"end":{"line":28,"column":13,"offset":945},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Calculate progress:","position":{"start":{"line":30,"column":5,"offset":951},"end":{"line":30,"column":24,"offset":970},"indent":[]}}],"position":{"start":{"line":30,"column":3,"offset":949},"end":{"line":30,"column":26,"offset":972},"indent":[]}},{"type":"text","value":" take in results and return objective progress.","position":{"start":{"line":30,"column":26,"offset":972},"end":{"line":30,"column":73,"offset":1019},"indent":[]}}],"position":{"start":{"line":30,"column":3,"offset":949},"end":{"line":30,"column":73,"offset":1019},"indent":[]}}],"position":{"start":{"line":30,"column":1,"offset":947},"end":{"line":30,"column":73,"offset":1019},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Calculate grade:","position":{"start":{"line":31,"column":5,"offset":1024},"end":{"line":31,"column":21,"offset":1040},"indent":[]}}],"position":{"start":{"line":31,"column":3,"offset":1022},"end":{"line":31,"column":23,"offset":1042},"indent":[]}},{"type":"text","value":" calculate result grade from score.","position":{"start":{"line":31,"column":23,"offset":1042},"end":{"line":31,"column":58,"offset":1077},"indent":[]}}],"position":{"start":{"line":31,"column":3,"offset":1022},"end":{"line":31,"column":58,"offset":1077},"indent":[]}}],"position":{"start":{"line":31,"column":1,"offset":1020},"end":{"line":31,"column":58,"offset":1077},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Calculate score:","position":{"start":{"line":32,"column":5,"offset":1082},"end":{"line":32,"column":21,"offset":1098},"indent":[]}}],"position":{"start":{"line":32,"column":3,"offset":1080},"end":{"line":32,"column":23,"offset":1100},"indent":[]}},{"type":"text","value":" calculate score from start, end, and current result value.","position":{"start":{"line":32,"column":23,"offset":1100},"end":{"line":32,"column":82,"offset":1159},"indent":[]}}],"position":{"start":{"line":32,"column":3,"offset":1080},"end":{"line":32,"column":82,"offset":1159},"indent":[]}}],"position":{"start":{"line":32,"column":1,"offset":1078},"end":{"line":32,"column":82,"offset":1159},"indent":[]}}],"position":{"start":{"line":30,"column":1,"offset":947},"end":{"line":32,"column":82,"offset":1159},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Configuration","position":{"start":{"line":34,"column":5,"offset":1165},"end":{"line":34,"column":18,"offset":1178},"indent":[]}}],"position":{"start":{"line":34,"column":1,"offset":1161},"end":{"line":34,"column":18,"offset":1178},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"As much as possible OKR UI has been designed to apply to a range of requirements. Configure:","position":{"start":{"line":36,"column":1,"offset":1180},"end":{"line":36,"column":93,"offset":1272},"indent":[]}}],"position":{"start":{"line":36,"column":1,"offset":1180},"end":{"line":36,"column":93,"offset":1272},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Metrics:","position":{"start":{"line":38,"column":5,"offset":1278},"end":{"line":38,"column":13,"offset":1286},"indent":[]}}],"position":{"start":{"line":38,"column":3,"offset":1276},"end":{"line":38,"column":15,"offset":1288},"indent":[]}},{"type":"text","value":" what metrics do you measure? Keep results consistent with pre-defined metrics.","position":{"start":{"line":38,"column":15,"offset":1288},"end":{"line":38,"column":94,"offset":1367},"indent":[]}}],"position":{"start":{"line":38,"column":3,"offset":1276},"end":{"line":38,"column":94,"offset":1367},"indent":[]}}],"position":{"start":{"line":38,"column":1,"offset":1274},"end":{"line":38,"column":94,"offset":1367},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Grades:","position":{"start":{"line":39,"column":5,"offset":1372},"end":{"line":39,"column":12,"offset":1379},"indent":[]}}],"position":{"start":{"line":39,"column":3,"offset":1370},"end":{"line":39,"column":14,"offset":1381},"indent":[]}},{"type":"text","value":" how do you measure success? Customize how progress and score is graded.","position":{"start":{"line":39,"column":14,"offset":1381},"end":{"line":39,"column":86,"offset":1453},"indent":[]}}],"position":{"start":{"line":39,"column":3,"offset":1370},"end":{"line":39,"column":86,"offset":1453},"indent":[]}}],"position":{"start":{"line":39,"column":1,"offset":1368},"end":{"line":39,"column":86,"offset":1453},"indent":[]}}],"position":{"start":{"line":38,"column":1,"offset":1274},"end":{"line":39,"column":86,"offset":1453},"indent":[1]}},{"type":"thematicBreak","position":{"start":{"line":41,"column":1,"offset":1455},"end":{"line":41,"column":4,"offset":1458},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"First principles","position":{"start":{"line":43,"column":4,"offset":1463},"end":{"line":43,"column":20,"offset":1479},"indent":[]}}],"position":{"start":{"line":43,"column":1,"offset":1460},"end":{"line":43,"column":20,"offset":1479},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Strongly compositional:","position":{"start":{"line":45,"column":5,"offset":1485},"end":{"line":45,"column":28,"offset":1508},"indent":[]}}],"position":{"start":{"line":45,"column":3,"offset":1483},"end":{"line":45,"column":30,"offset":1510},"indent":[]}},{"type":"text","value":" quickly scaffold UI and maintain data visibility.","position":{"start":{"line":45,"column":30,"offset":1510},"end":{"line":45,"column":80,"offset":1560},"indent":[]}}],"position":{"start":{"line":45,"column":3,"offset":1483},"end":{"line":45,"column":80,"offset":1560},"indent":[]}}],"position":{"start":{"line":45,"column":1,"offset":1481},"end":{"line":45,"column":80,"offset":1560},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Minimal dependencies:","position":{"start":{"line":46,"column":5,"offset":1565},"end":{"line":46,"column":26,"offset":1586},"indent":[]}}],"position":{"start":{"line":46,"column":3,"offset":1563},"end":{"line":46,"column":28,"offset":1588},"indent":[]}},{"type":"text","value":" low bloat. Just components and a few helpful utilities.","position":{"start":{"line":46,"column":28,"offset":1588},"end":{"line":46,"column":84,"offset":1644},"indent":[]}}],"position":{"start":{"line":46,"column":3,"offset":1563},"end":{"line":46,"column":84,"offset":1644},"indent":[]}}],"position":{"start":{"line":46,"column":1,"offset":1561},"end":{"line":46,"column":84,"offset":1644},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Un-opinionated:","position":{"start":{"line":47,"column":5,"offset":1649},"end":{"line":47,"column":20,"offset":1664},"indent":[]}}],"position":{"start":{"line":47,"column":3,"offset":1647},"end":{"line":47,"column":22,"offset":1666},"indent":[]}},{"type":"text","value":" limited assumptions. Manage state, data, style, your way.","position":{"start":{"line":47,"column":22,"offset":1666},"end":{"line":47,"column":80,"offset":1724},"indent":[]}}],"position":{"start":{"line":47,"column":3,"offset":1647},"end":{"line":47,"column":80,"offset":1724},"indent":[]}}],"position":{"start":{"line":47,"column":1,"offset":1645},"end":{"line":47,"column":80,"offset":1724},"indent":[]}}],"position":{"start":{"line":45,"column":1,"offset":1481},"end":{"line":47,"column":80,"offset":1724},"indent":[1,1]}},{"type":"export","value":"export const _frontmatter = {}","position":{"start":{"line":50,"column":1,"offset":1727},"end":{"line":50,"column":31,"offset":1757},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":50,"column":31,"offset":1757}}},"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\"\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 <h1 {...{\n \"id\": \"about\"\n }}>{`About`}</h1>\n <p>{`OKR UI is an open source project, released under MIT License.`}</p>\n <h2 {...{\n \"id\": \"features\"\n }}>{`Features`}</h2>\n <p>{`OKR UI provides everything you'll need to quickly build OKR experiences:`}</p>\n <h3 {...{\n \"id\": \"components\"\n }}>{`Components`}</h3>\n <p>{`A collection of highly compositional components for a wide range of possible OKR UI requirements:`}</p>\n <ul>\n <li parentName=\"ul\"><strong parentName=\"li\">{`OKR`}</strong>{`: contain your OKR and configure`}</li>\n <li parentName=\"ul\"><strong parentName=\"li\">{`Objective`}</strong>{`: contain and layout your objective`}</li>\n <li parentName=\"ul\"><strong parentName=\"li\">{`Goal`}</strong>{`: display your objective, and calculate result text from props`}</li>\n <li parentName=\"ul\"><strong parentName=\"li\">{`Due date`}</strong>{`: process and display a due date with label`}</li>\n <li parentName=\"ul\"><strong parentName=\"li\">{`Progress bar:`}</strong>{` display a provided percentage value, or calculate percentage progress from results`}</li>\n <li parentName=\"ul\"><strong parentName=\"li\">{`Result:`}</strong>{` contain and layout your key result`}</li>\n <li parentName=\"ul\"><strong parentName=\"li\">{`Current value:`}</strong>{` display a current value, with label in a specific metric (e.g., percentage, money, etc.)`}</li>\n </ul>\n <h3 {...{\n \"id\": \"services\"\n }}>{`Services`}</h3>\n <ul>\n <li parentName=\"ul\"><strong parentName=\"li\">{`Calculate progress:`}</strong>{` take in results and return objective progress.`}</li>\n <li parentName=\"ul\"><strong parentName=\"li\">{`Calculate grade:`}</strong>{` calculate result grade from score.`}</li>\n <li parentName=\"ul\"><strong parentName=\"li\">{`Calculate score:`}</strong>{` calculate score from start, end, and current result value.`}</li>\n </ul>\n <h3 {...{\n \"id\": \"configuration\"\n }}>{`Configuration`}</h3>\n <p>{`As much as possible OKR UI has been designed to apply to a range of requirements. Configure:`}</p>\n <ul>\n <li parentName=\"ul\"><strong parentName=\"li\">{`Metrics:`}</strong>{` what metrics do you measure? Keep results consistent with pre-defined metrics.`}</li>\n <li parentName=\"ul\"><strong parentName=\"li\">{`Grades:`}</strong>{` how do you measure success? Customize how progress and score is graded.`}</li>\n </ul>\n <hr></hr>\n <h2 {...{\n \"id\": \"first-principles\"\n }}>{`First principles`}</h2>\n <ul>\n <li parentName=\"ul\"><strong parentName=\"li\">{`Strongly compositional:`}</strong>{` quickly scaffold UI and maintain data visibility.`}</li>\n <li parentName=\"ul\"><strong parentName=\"li\">{`Minimal dependencies:`}</strong>{` low bloat. Just components and a few helpful utilities.`}</li>\n <li parentName=\"ul\"><strong parentName=\"li\">{`Un-opinionated:`}</strong>{` limited assumptions. Manage state, data, style, your way.`}</li>\n </ul>\n\n </MDXLayout>;\n}\n\n;\nMDXContent.isMDXComponent = true;"}}