https://app-r.referens.sys.kth.se/static/components/
npm install @kth/kth-reactstraphttps://app-r.referens.sys.kth.se/static/components/
Library of React components based on KTH-style and reactstrap
Installation:
``
npm run install
The following commands should be used:
`
npm run start (start documentation web server)
npm run test:unit (start unit tests in watch mode)
npm run dev (run start and test:unit above)
npm run test (run unit tests)
npm run build (build the code for npm package)
Checklist for new category (e.g. team/group)
One-time setup, given a new category named 'demo':
- create folder 'src/components/demo'
- create index file '/components/demo/index.ts'
- add reference to demo in '/components/index.ts'
- create folder 'src/stories/demo'
And then create components (and stories to document them):
- create component in 'src/components/demo'
- add import/export of component in 'src/components/demo/index.ts'
- create story in 'src/stories/demo'
- describe/use component in story
Navigate to http://localhost:3241/
All the scss styles for the kth-stylea and some fixed for the components are is now loaded inside the index.scss, and it is available at dist/component/index.css after build.
it is recomended to load the index.css in your project, otherwise you need to use the css fixes inside the index.scss and other loaded styles in your project by yourself.
All the scripts that you need are now available at dist/js, it is recommended to load the scripts in the index.html of your project. (if you use the KthHeader component now it has a param called loadScipts, the default value is false but if you set true for that param it will load the KPM script by itself and you will have the enterance menu. read more here: https://app.kth.se/style/en/components/kpm)
it is recomended to have the scripts on your project to have functionalities like back-to-top.
you may need kth logotype or icons, they are now available in dist/img now after the build process.
after upgrading to kth-style version 10 the alert is changed to be aligned with the latest version of kth-style. now you can choose on of these as type of the Alert: 'info' | 'warning' | 'success' | 'danger'.
Note that: warning and danger are the same, since the kth style the alert types are only 'info' | 'warning' | 'success'. read more here: https://app.kth.se/style/en/components/alert
This is the new component that has been added, it has been used only at this project as the sidebar menu for the stories. You can use it by seeing example usage in the App.tsx file in this project
This is now changed to kth-button and use kth-button style in the background as you can see here: https://app.kth.se/style/en/components/button
All the functionalitie are the same as before, required changes has been made to keep the functionality of this component. you can visit this page to know more about kth-button: https://app.kth.se/style/en/components/button
It needs to be mentioned that, a new decoration has been added to the Button which is "previous" but it will act exactly the same as "back".
now the "back" class is used in Backlink component and in Button component back acts as previous in kth-button.
It is now using the latest classes related to kth-style 10, to be sure that the app is wrapped in correct classes.
The styles is now upgraded to kth-style 10 and two parameter is now added, now you can set true value for "loadScripts" and then you will have the KMP scripts added automatically in the index.html of your project which will add the entrance menu.
Another parameter that has been added is variant, the value can be one of these, 'external' | 'student-web' | 'intranet'. you can read more about variants here: https://app.kth.se/style/en/components/header
The styles is now upgraded to kth-style 10 and onetwo parameter is now added,
The parameter that has been added is variant, the value can be one of these, 'external' | 'student-web' | 'intranet'. you can read more about variants here: https://app.kth.se/style/en/components/header
In KTH we are getting header, footer and some more sections from cortina and we call them cortina blocks. Now this pacakge is used an appraoch to get footer directly from the cortina. the script is inside the generate.js will get the selected blocks by blockID and save them in cortina.json and later you can use the block which is an html string. you can use 'html-react-parser' to insert html inside the jsx.
If in further developments you decide to test this package locally you need to fisrt run this command:
- "npm (or yarn) link ../{consuming project name}/node_modules/react (we are assuming
that both projects are at the same folder)
Then run this command for this package:
- "npm (or yarn) link"
Finaly in the consuming project run this command:
- "npm (or yarn) link @kth/kth-reactstrap"
Consider that you need to run the build script before link the package to a consuming project.
The reason that we are linking the consuming project react to this project is that we want to use the same react bundler for both pacakge and consuming project (to prevent hooks to be undefiend). read more here: https://react.dev/warnings/invalid-hook-call-warning