- We have updated this product from Bootstrap 3 to Bootstrap 4, so in essence, this is a new product
- For this, we have followed the guidelines from here and here
- We also did not add Bootstrap variables as part of our styles (we will do so in one of our next updates, probably in version 3.0.0 when we'll add Bootstrap 5)
- Renamed all files to
.js
, instead of.jsx
- Refactor all files from class components to functional ones, so now, you can use React Hooks
- creativetimofficial/light-bootstrap-dashboard-react#62
- creativetimofficial/light-bootstrap-dashboard-react#58
- creativetimofficial/light-bootstrap-dashboard-react#52
- creativetimofficial/light-bootstrap-dashboard-react#50
- Since the update from Bootstrap 3 to Bootstrap 4, all styles have been changed
- src/components/Card/Card.jsx (we'll use the simple React Bootstrap tags instead)
- src/components/CustomButton/CustomButton.jsx (we'll use the simple React Bootstrap tags instead)
- src/components/CustomCheckbox/CustomCheckbox.jsx (we'll use the simple React Bootstrap tags instead)
- src/components/CustomRadio/CustomRadio.jsx (we'll use the simple React Bootstrap tags instead)
- src/components/FormInputs/FormInputs.jsx (we'll use the simple React Bootstrap tags instead)
- src/components/StatsCard/StatsCard.jsx (we'll use the simple React Bootstrap tags instead)
- src/components/Tasks/Tasks.jsx (we'll use the simple React Bootstrap tags instead)
- src/components/UserCard/UserCard.jsx (we'll use the simple React Bootstrap tags instead)
- react-notification-system (we'll use react-notification-alert from now on)
- @types/googlemaps
- @types/markerclustererplus
- @types/react
- react-google-maps (we'll use simple Google Maps API with Vanilla JS)
- react-toggle (we'll use the simple React-Bootstrap Form.Check as a switch instead)
- react-notification-alert@0.0.13 (instead of the react-notification-system)
- reactstrap@8.9.0 (as part of the react-notification-alert)
- jquery@3.5.1 (since Bootstrap requires it)
- @fortawesome/fontawesome-free@5.15.2 (For easier update of the package - instead of a link inside public/index.html)
- gulp-append-prepend@1.0.8 (For Creative Tim licenses)
- gulp@4.0.2 (For Creative Tim licenses)
bootstrap 3.3.7 → 4.6.0
node-sass 4.12.0 → 4.14.1
react 16.8.6 → 17.0.1
react-bootstrap 0.32.4 → 1.4.3
react-chartist 0.13.3 → 0.14.3
react-dom 16.8.6 → 17.0.1
react-router 5.0.0 → 5.2.0
react-router-dom 5.0.0 → 5.2.0
react-scripts 3.0.0 → 4.0.1
typescript 3.4.3 → 4.1.3
The TypeScript and jQuery dependencies are installed only to stop console warnings on install. They are not actually used in our product. So the product is not based on TypeScript or jQuery! The following warnings will appear when running the installation command, but they do not affect the UI or the functionality of the product (they will be solved in our next update):
npm WARN react-chartist@0.14.3 requires a peer of react@^0.14.9 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-popper@1.3.7 requires a peer of react@0.14.x || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN create-react-context@0.3.0 requires a peer of react@^0.14.0 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
If they will persist in our 2.4.* version, we will drop their usages and replace them with other plugins. In development mode, some of the above plugins will throw a warning because they still use React v16 syntax. If the error will persist in our 2.4.* version, we will drop their usage and replace them with other plugins.
- Updated all packages from
package.json
usingnpm-upgrade
, link here: https://www.npmjs.com/package/npm-upgrade - Renamed all
ControlLabel
components toFormLabel
(this refers to the react-bootstrap components) - Renamed all
Grid
components toContainer
(this refers to the react-bootstrap components) - Rename all
HelpBlock
components toFormText
- Rename all
MenuItem
components toDropdown.Item
andNavDropdown.Item
- Rename all Panel components to Card
- Deleted variables folder
- Change the usage of
React Big Calendar
to the new API, so instead of
import BigCalendar from "react-big-calendar";
- And
const localizer = BigCalendar.momentLocalizer(moment);
- We will have:
import { Calendar as BigCalendar, momentLocalizer } from "react-big-calendar";
- And
const localizer = momentLocalizer(moment);
- Change Panels with new react-bootstrap components
- For Col componets, replaced
size={number1} sizeOffest={number2}
withsize={{span: number1, offset: number2}}
where size can bexs
,sm
,md
,lg
- Changed
bsStyle
tovariant
- Changed
bsSize
tosize
- Replace
<Navbar.Header>
with<div className=“navbar-header”>
- Replace
<Navbar.Form>
with<div className="navbar-search-form navbar-form navbar-left">
- Replace
<FormGroup>
with<Form.Group>
- Replace
<InputGroup.Addon>
with<InputGroup.Prepend><InputGroup.Text>
and<InputGroup.Append><InputGroup.Text>
- All required images have a default prop at the end now, example:
const us_flag = require("../assets/img/flags/US.png");
was changed toconst us_flag = require("../assets/img/flags/US.png").default;
- Rename all .jsx files to .js
- Added Row and Col inside StatsCard
- Delete eventKey from NavDropdown components
- Deleted noCaret from NavDropdown components
- Replace Navbar fluid with Navbar → Container fluid
- Add fontawesome as dependencie instead of font link insde public/index.html, it is now imported insde src/index.js
- In addition to these changes, we’ve chaned the structure of the pages and components as well to match those from the HTML version of the product: https://www.creative-tim.com/product/light-bootstrap-dashboard
- Renamed
src/layouts/Dashboard/Dashboard.jsx
tosrc/layouts/Admin.jsx
- Renamed
src/views/Dashboard/Dashboard.jsx
tosrc/views/Dashboard.jsx
- Renamed
src/views/Dashboard/Dashboard.jsx
tosrc/views/Icons.jsx
- Renamed
src/views/Dashboard/Dashboard.jsx
tosrc/views/Maps.jsx
- Renamed
src/views/Dashboard/Dashboard.jsx
tosrc/views/Notifications.jsx
- Renamed
src/views/Dashboard/Dashboard.jsx
tosrc/views/TableList.jsx
- Renamed
src/views/Dashboard/Dashboard.jsx
tosrc/views/Typography.jsx
- Renamed
src/views/Dashboard/Dashboard.jsx
tosrc/views/Upgrade.jsx
- Renamed
src/views/Dashboard/Dashboard.jsx
tosrc/views/UserProfile.jsx
- Renamed
src/components/Header
tosrc/components/Navbars
- Renamed
src/components/Navbars/Header.jsx
tosrc/components/Navbars/AdminNavbar.jsx
- Renamed
src/components/Navbars/HeaderLinks.jsx
tosrc/components/Navbars/AdminNavbarLinks.jsx
- Changes caused by running the prettier command for .jsx, .js, .html and .css files
- Changed our buggy routing system, now it should work flawlessly, for more info, please refer to our live docs here
- Solved
- creativetimofficial/light-bootstrap-dashboard-react#48
- creativetimofficial/light-bootstrap-dashboard-react#47
- creativetimofficial/light-bootstrap-dashboard-react#34
- creativetimofficial/light-bootstrap-dashboard-react#30
- creativetimofficial/light-bootstrap-dashboard-react#19
- creativetimofficial/light-bootstrap-dashboard-react#17
- creativetimofficial/light-bootstrap-dashboard-react#15
- Removed
.env
file and replaced it withjsconfig.json
- Small bug fixes
- Deleted
src/routes/*
folder - node-sass-chokidar
- npm-run-all
- Added
src/routes.js
file (instead of the three files fromsrc/routes/*
) - @types/markerclustererplus@2.1.33 (to stop install warnings)
- @types/googlemaps@3.30.19 (to stop install warnings)
- @types/react@16.8.13 (to stop install warnings)
- typescript@3.4.3 (to stop install warnings)
- react-router@5.0.0 (react-router-dom auto-installs this package, but it is better to have them both inside package.json)
- react-toggle@4.0.2
- node-sass 4.6.1 → 4.12.0
- react 16.2.0 → 16.8.6
- react-bootstrap 0.32.1 → 0.32.4
- react-chartist 0.13.1 → 0.13.3
- react-dom 16.2.0 → 16.8.6
- react-router-dom 4.2.2 → 5.0.0
- react-scripts 1.1.1 → 3.0.0
- Added
fluid
prop onGrid
component inFooter
- Moved all the contents of
elements
folder tocomponents
folder and delete it - Renamed
containers
folder tolayouts
- Renamed
App/App.jsx
toDashboard/Dashboard.jsx
- Renamed
src/routes/app.jsx
tosrc/routes/dashboard.jsx
- Renamed
appRoutes
todashboardRoutes
- Added
src/routes/index.jsx
and made the routes insrc/index.js
dynamically based onindexRoutes
fromsrc/routes/index.jsx
(users can now make new layouts and routes for them easier)
google-maps-react@1.1.0
react-router@4.1.2
node-sass@4.6.1
react-google-maps@9.4.5
(insted ofgoogle-maps-react@1.1.0
)bootstrap@3.3.7
(and deletedsrc/assets/bootstrap.min.css?v=3.3.5
)
npm-run-all@4.1.1
tonpm-run-all@4.1.2
react@15.6.1
toreact@16.2.0
react-bootstrap@0.31.1
toreact-bootstrap@0.32.1
react-chartist@0.13.0
toreact-chartist@0.13.1
react-dom@15.6.1
toreact-dom@16.2.0
react-notification-system@0.2.15
toreact-notification-system@0.2.17
react-router-dom@4.1.2
toreact-router-dom@4.2.2
react-scripts@1.0.10
toreact-scripts@1.1.1
- Changed property of
isChecked
inCustomCheckbox
- Removed hover state for checkboxes and radios
- Moved
NotificationSystem
outside of.main-panel
(for responsive issues) - All
div
's with Bootstrap classes (.container
,.container-fluid
,.row
,.col-*
) were changed in React-Bootstrap components - Changed
Notifications Places
buttons from buttons withclassName
to our own button componentCustomButton
- Added property
round
inCustomButton
(for the button class.btn-round
) - Added dynamic routes
- Added React-Bootstrap as base framework
- Added design from Light Bootstrap Dashboard by Creative Tim