{"ast":null,"code":"var _this = this,\n _jsxFileName = \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/Documentation.js\";\n\nimport React from 'react';\nimport { CodeHighlight } from './CodeHighlight';\n\nvar Documentation = function Documentation() {\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 7,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 8,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card docs\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 9,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h4\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 10,\n columnNumber: 21\n }\n }, \"Current Version\"), /*#__PURE__*/React.createElement(\"p\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 11,\n columnNumber: 21\n }\n }, \"React 17.x and PrimeReact 7.x\"), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 13,\n columnNumber: 21\n }\n }, \"Getting Started\"), /*#__PURE__*/React.createElement(\"p\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 14,\n columnNumber: 21\n }\n }, \"Sakai is an application template for React based on the popular \", /*#__PURE__*/React.createElement(\"a\", {\n href: \"https://github.com/facebook/create-react-app\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 14,\n columnNumber: 88\n }\n }, \"create-react-app\"), \" that allows creating React apps with no configuration. To get started, clone the \", /*#__PURE__*/React.createElement(\"a\", {\n href: \"https://github.com/primefaces/sakai-react\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 15,\n columnNumber: 98\n }\n }, \"repository\"), \" from GitHub and install the dependencies with npm or yarn.\"), /*#__PURE__*/React.createElement(CodeHighlight, {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 16,\n columnNumber: 1\n }\n }, \"\\n\\\"npm install\\\" or \\\"yarn\\\"\\n\"), /*#__PURE__*/React.createElement(\"p\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 22,\n columnNumber: 21\n }\n }, \"Next step is running the application using the start script and navigate to \", /*#__PURE__*/React.createElement(\"b\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 22,\n columnNumber: 100\n }\n }, \"http://localhost:3000/\"), \" to view the application. That is it, you may now start with the development of your application using the Sakai template.\"), /*#__PURE__*/React.createElement(CodeHighlight, {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 25,\n columnNumber: 1\n }\n }, \"\\n\\\"npm start\\\" or \\\"yarn start\\\"\\n\"), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 31,\n columnNumber: 21\n }\n }, \"React Scripts\"), /*#__PURE__*/React.createElement(\"p\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 32,\n columnNumber: 21\n }\n }, \"Following commands are derived from create-app-app.\"), /*#__PURE__*/React.createElement(CodeHighlight, {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 33,\n columnNumber: 1\n }\n }, \"\\n\\\"npm start\\\" or \\\"yarn start\\\": Starts the development server\\n\\\"npm test\\\" or \\\"yarn test\\\": Runs the tests.\\n\\\"npm run build\\\" or \\\"yarn run build\\\": Creates a production build.\\n\"), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 21\n }\n }, \"Dependencies\"), /*#__PURE__*/React.createElement(\"p\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 21\n }\n }, \"Dependencies of Sakai are listed below and needs to be defined at package.json.\"), /*#__PURE__*/React.createElement(CodeHighlight, {\n lang: \"js\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 44,\n columnNumber: 1\n }\n }, \"\\n\\\"primereact\\\": \\\"...\\\", //required: PrimeReact components\\n\\\"primeicons\\\": \\\"...\\\", //required: Icons\\n\\\"primeflex\\\": \\\"...\\\", //optional: Sample pages\\n\\\"react-transition-group\\\": \\\"^4.4.1\\\", //required: PrimeReact animations\\n\"), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 53,\n columnNumber: 21\n }\n }, \"Structure\"), /*#__PURE__*/React.createElement(\"p\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 54,\n columnNumber: 21\n }\n }, \"Sakai consists of 2 main parts; the application layout and the resources. \", /*#__PURE__*/React.createElement(\"b\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 54,\n columnNumber: 98\n }\n }, \"App.js\"), \" inside src folder is the main component containing the template for the base layout whereas required resources such as SASS structure for the layout are placed inside the \", /*#__PURE__*/React.createElement(\"b\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 55,\n columnNumber: 116\n }\n }, \"src/layout\"), \" folder.\"), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 57,\n columnNumber: 21\n }\n }, \"Application Template\"), /*#__PURE__*/React.createElement(\"p\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 58,\n columnNumber: 21\n }\n }, \"Main layout is the JSX template of the App.js, it is divided into a couple of child components such as topbar, profile, menu and footer. Here is render method of the App.js component that implements the logic such as menu state, layout modes and so on.\"), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 62,\n columnNumber: 21\n }\n }, \"Menu\"), /*#__PURE__*/React.createElement(\"p\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 63,\n columnNumber: 21\n }\n }, \"Menu is a separate component defined in AppMenu.js file based on PrimeReact MenuModel API. In order to define the menuitems, navigate to App.js file and define your own model as a nested structure. Here is the menu component from the demo application.\"), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 66,\n columnNumber: 21\n }\n }, \"PrimeReact Theme\"), /*#__PURE__*/React.createElement(\"p\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 67,\n columnNumber: 21\n }\n }, \"Sakai theming is based on the PrimeReact theme being used. Default theme is \", /*#__PURE__*/React.createElement(\"b\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 67,\n columnNumber: 100\n }\n }, \"lara-light-indigo\"), \".\"), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 69,\n columnNumber: 21\n }\n }, \"SASS Variables\"), /*#__PURE__*/React.createElement(\"p\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 70,\n columnNumber: 21\n }\n }, \"In case you'd like to customize the main layout variables, open \", /*#__PURE__*/React.createElement(\"b\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 70,\n columnNumber: 88\n }\n }, \"_variables.scss\"), \" file under src/layout folder. Saving the changes will be reflected instantly at your browser.\"), /*#__PURE__*/React.createElement(\"h6\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 74,\n columnNumber: 21\n }\n }, \"src/layout/_variables.scss\"), /*#__PURE__*/React.createElement(CodeHighlight, {\n lang: \"scss\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 75,\n columnNumber: 1\n }\n }, \"\\n/* General */\\n$fontSize:14px;\\n$borderRadius:12px;\\n$transitionDuration:.2s;\\n\"))));\n};\n\nvar comparisonFn = function comparisonFn(prevProps, nextProps) {\n return prevProps.location.pathname === nextProps.location.pathname;\n};\n\nexport default React.memo(Documentation, comparisonFn);","map":{"version":3,"names":["React","CodeHighlight","Documentation","comparisonFn","prevProps","nextProps","location","pathname","memo"],"sources":["/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/Documentation.js"],"sourcesContent":["import React from 'react';\nimport { CodeHighlight } from './CodeHighlight';\n\nconst Documentation = () => {\n\n return (\n
\n
\n
\n

Current Version

\n

React 17.x and PrimeReact 7.x

\n\n
Getting Started
\n

Sakai is an application template for React based on the popular create-react-app that allows\n creating React apps with no configuration. To get started, clone the repository from GitHub and install the dependencies with npm or yarn.

\n\n{`\n\"npm install\" or \"yarn\"\n`}\n\n\n

Next step is running the application using the start script and navigate to http://localhost:3000/ to view the application.\n That is it, you may now start with the development of your application using the Sakai template.

\n\n\n{`\n\"npm start\" or \"yarn start\"\n`}\n\n\n
React Scripts
\n

Following commands are derived from create-app-app.

\n\n{`\n\"npm start\" or \"yarn start\": Starts the development server\n\"npm test\" or \"yarn test\": Runs the tests.\n\"npm run build\" or \"yarn run build\": Creates a production build.\n`}\n\n\n
Dependencies
\n

Dependencies of Sakai are listed below and needs to be defined at package.json.

\n\n\n{`\n\"primereact\": \"...\", //required: PrimeReact components\n\"primeicons\": \"...\", //required: Icons\n\"primeflex\": \"...\", //optional: Sample pages\n\"react-transition-group\": \"^4.4.1\", //required: PrimeReact animations\n`}\n\n\n
Structure
\n

Sakai consists of 2 main parts; the application layout and the resources. App.js inside src folder is the main component containing the template for the base layout\n whereas required resources such as SASS structure for the layout are placed inside the src/layout folder.

\n\n
Application Template
\n

Main layout is the JSX template of the App.js, it is divided into a couple of child components such as topbar, profile, menu and footer. Here is render method of the\n App.js component that implements the logic such as menu state, layout modes and so on.\n

\n\n
Menu
\n

Menu is a separate component defined in AppMenu.js file based on PrimeReact MenuModel API. In order to define the menuitems,\n navigate to App.js file and define your own model as a nested structure. Here is the menu component from the demo application.

\n\n
PrimeReact Theme
\n

Sakai theming is based on the PrimeReact theme being used. Default theme is lara-light-indigo.

\n\n
SASS Variables
\n

In case you'd like to customize the main layout variables, open _variables.scss file under src/layout folder. Saving the changes\n will be reflected instantly at your browser.\n

\n\n
src/layout/_variables.scss
\n\n{`\n/* General */\n$fontSize:14px;\n$borderRadius:12px;\n$transitionDuration:.2s;\n`}\n\n
\n
\n
\n )\n}\n\nconst comparisonFn = function (prevProps, nextProps) {\n return prevProps.location.pathname === nextProps.location.pathname;\n};\n\nexport default React.memo(Documentation, comparisonFn);\n"],"mappings":"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"},"metadata":{},"sourceType":"module"}