gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update to @coreui/react@v4.0.0-rc.0

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-08-23 16:28:36 +02:00
parent e34547654e
commit c41bb25b4e
5 changed files with 674 additions and 559 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package.json
View File

@ -30,13 +30,13 @@
"@coreui/coreui": "4.0.1",
"@coreui/icons": "^2.0.1",
"@coreui/icons-react": "^2.0.0-rc.5",
"@coreui/react": "4.0.0-beta.4",
"@coreui/react": "4.0.0-rc.0",
"@coreui/react-chartjs": "2.0.0-rc.0",
"@coreui/utils": "^1.3.1",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
"chart.js": "^3.5.0",
"chart.js": "^3.5.1",
"classnames": "^2.3.1",
"core-js": "^3.16.1",
"core-js": "^3.16.2",
"enzyme": "^3.11.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
@ -51,10 +51,10 @@
"auto-changelog": "~2.3.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-prettier": "^3.4.1",
"prettier": "2.3.2",
"react-scripts": "^4.0.3",
"sass": "^1.37.5"
"sass": "^1.38.0"
},
"scripts": {
"start": "react-scripts start",

922
src/views/components/widgets/Widgets.js
View File

File diff suppressed because it is too large Load Diff

218
src/views/components/widgets/WidgetsBrand.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import { CWidgetBrand, CRow, CCol } from '@coreui/react'
import { CWidgetStatsD, CRow, CCol } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cibFacebook, cibLinkedin, cibTwitter, cilCalendar } from '@coreui/icons'
import { CChart } from '@coreui/react-chartjs'
@ -37,36 +37,34 @@ const WidgetsBrand = ({ withCharts }) => {
return (
<CRow>
<CCol sm={6} lg={3}>
<CWidgetBrand
<CWidgetStatsD
className="mb-4"
headerChildren={
<>
<CIcon icon={cibFacebook} height={52} className="my-4 text-white" />
{withCharts && (
<CChart
className="position-absolute w-100 h-100"
type="line"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [65, 59, 84, 84, 51, 55, 40],
fill: true,
},
],
}}
options={chartOptions}
/>
)}
</>
}
{...(withCharts && {
chart: (
<CChart
className="position-absolute w-100 h-100"
type="line"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [65, 59, 84, 84, 51, 55, 40],
fill: true,
},
],
}}
options={chartOptions}
/>
),
})}
icon={<CIcon icon={cibFacebook} height={52} className="my-4 text-white" />}
values={[
['89k', 'friends'],
['459', 'feeds'],
{ title: 'friends', value: '89K' },
{ title: 'feeds', value: '459' },
]}
style={{
'--cui-card-cap-bg': '#3b5998',
@ -75,36 +73,34 @@ const WidgetsBrand = ({ withCharts }) => {
</CCol>
<CCol sm={6} lg={3}>
<CWidgetBrand
<CWidgetStatsD
className="mb-4"
headerChildren={
<>
<CIcon icon={cibTwitter} height={52} className="my-4 text-white" />
{withCharts && (
<CChart
className="position-absolute w-100 h-100"
type="line"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [1, 13, 9, 17, 34, 41, 38],
fill: true,
},
],
}}
options={chartOptions}
/>
)}
</>
}
{...(withCharts && {
chart: (
<CChart
className="position-absolute w-100 h-100"
type="line"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [1, 13, 9, 17, 34, 41, 38],
fill: true,
},
],
}}
options={chartOptions}
/>
),
})}
icon={<CIcon icon={cibTwitter} height={52} className="my-4 text-white" />}
values={[
['973k', 'followers'],
['1.792', 'tweets'],
{ title: 'followers', value: '973k' },
{ title: 'tweets', value: '1.792' },
]}
style={{
'--cui-card-cap-bg': '#00aced',
@ -113,36 +109,34 @@ const WidgetsBrand = ({ withCharts }) => {
</CCol>
<CCol sm={6} lg={3}>
<CWidgetBrand
<CWidgetStatsD
className="mb-4"
headerChildren={
<>
<CIcon icon={cibLinkedin} height={52} className="my-4 text-white" />
{withCharts && (
<CChart
className="position-absolute w-100 h-100"
type="line"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [78, 81, 80, 45, 34, 12, 40],
fill: true,
},
],
}}
options={chartOptions}
/>
)}
</>
}
{...(withCharts && {
chart: (
<CChart
className="position-absolute w-100 h-100"
type="line"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [78, 81, 80, 45, 34, 12, 40],
fill: true,
},
],
}}
options={chartOptions}
/>
),
})}
icon={<CIcon icon={cibLinkedin} height={52} className="my-4 text-white" />}
values={[
['500+', 'contacts'],
['292', 'feeds'],
{ title: 'contacts', value: '500' },
{ title: 'feeds', value: '1.292' },
]}
style={{
'--cui-card-cap-bg': '#4875b4',
@ -151,37 +145,35 @@ const WidgetsBrand = ({ withCharts }) => {
</CCol>
<CCol sm={6} lg={3}>
<CWidgetBrand
<CWidgetStatsD
className="mb-4"
color="warning"
headerChildren={
<>
<CIcon icon={cilCalendar} height={52} className="my-4 text-white" />
{withCharts && (
<CChart
className="position-absolute w-100 h-100"
type="line"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [35, 23, 56, 22, 97, 23, 64],
fill: true,
},
],
}}
options={chartOptions}
/>
)}
</>
}
{...(withCharts && {
chart: (
<CChart
className="position-absolute w-100 h-100"
type="line"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [35, 23, 56, 22, 97, 23, 64],
fill: true,
},
],
}}
options={chartOptions}
/>
),
})}
icon={<CIcon icon={cilCalendar} height={52} className="my-4 text-white" />}
values={[
['12+', 'events'],
['4', 'meetings'],
{ title: 'events', value: '12+' },
{ title: 'meetings', value: '4' },
]}
/>
</CCol>

42
src/views/components/widgets/WidgetsDropdown.js
View File

@ -6,7 +6,7 @@ import {
CDropdownMenu,
CDropdownItem,
CDropdownToggle,
CWidgetDropdown,
CWidgetStatsA,
} from '@coreui/react'
import { getStyle } from '@coreui/utils'
import { CChartBar, CChartLine } from '@coreui/react-chartjs'
@ -17,13 +17,15 @@ const WidgetsDropdown = () => {
return (
<CRow>
<CCol sm={6} lg={3}>
<CWidgetDropdown
<CWidgetStatsA
className="mb-4"
color="primary"
value="26K"
change={
value={
<>
(-12.4% <CIcon icon={cilArrowBottom} />)
26K{' '}
<span className="fs-6 fw-normal">
(-12.4% <CIcon icon={cilArrowBottom} />)
</span>
</>
}
title="Users"
@ -102,13 +104,15 @@ const WidgetsDropdown = () => {
/>
</CCol>
<CCol sm={6} lg={3}>
<CWidgetDropdown
<CWidgetStatsA
className="mb-4"
color="info"
value="$6.200"
change={
value={
<>
(40.9% <CIcon icon={cilArrowTop} />)
$6.200{' '}
<span className="fs-6 fw-normal">
(40.9% <CIcon icon={cilArrowTop} />)
</span>
</>
}
title="Income"
@ -186,13 +190,15 @@ const WidgetsDropdown = () => {
/>
</CCol>
<CCol sm={6} lg={3}>
<CWidgetDropdown
<CWidgetStatsA
className="mb-4"
color="warning"
value="2.49%"
change={
value={
<>
(84.7% <CIcon icon={cilArrowTop} />)
2.49{' '}
<span className="fs-6 fw-normal">
(84.7% <CIcon icon={cilArrowTop} />)
</span>
</>
}
title="Conversion Rate"
@ -257,13 +263,15 @@ const WidgetsDropdown = () => {
/>
</CCol>
<CCol sm={6} lg={3}>
<CWidgetDropdown
<CWidgetStatsA
className="mb-4"
color="danger"
value="44K"
change={
value={
<>
(-23.6% <CIcon icon={cilArrowBottom} />)
44K{' '}
<span className="fs-6 fw-normal">
(-23.6% <CIcon icon={cilArrowBottom} />)
</span>
</>
}
title="Sessions"

41
yarn.lock
View File

@ -1222,7 +1222,7 @@
resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.0.tgz#52ebe0197411a829ba48057ade61923e05859eec"
integrity sha512-8vH6fJrmvCR/Oy5v0E+/1AL3Ygb4jhQ7NXK2fMYWJyK13BePDm9muB3y6S0IdqkpBwjY3hHVwHyt2lJqJdesmQ==
"@coreui/coreui@4.0.1", "@coreui/coreui@^4.0.1":
"@coreui/coreui@4.0.1":
version "4.0.1"
resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.1.tgz#e5faf540aeea31b0cc8d428d73080a364e4bc6fd"
integrity sha512-1mrWnbqoWb7+8ZAMUdlWt0AqVzDEkJglk7F3OaFsQtxienezFvlMNsd1YPPNo+taRzF7HZ8xSDIAItCvlOaMVg==
@ -1252,12 +1252,10 @@
"@coreui/chartjs" "^3.0.0"
chart.js "^3.4.1"
"@coreui/react@4.0.0-beta.4":
version "4.0.0-beta.4"
resolved "https://registry.yarnpkg.com/@coreui/react/-/react-4.0.0-beta.4.tgz#b41b5270707784a200bf39b0008d4a324cc98dec"
integrity sha512-yjbAk5u3G2w/gJn+tfE/6mQagQoFp94EghHaes4E7GJlGcHwdfTp5AB5nRZp9DvYFy4vm3WsqWGD4yfQ34oilA==
dependencies:
"@coreui/coreui" "^4.0.1"
"@coreui/react@4.0.0-rc.0":
version "4.0.0-rc.0"
resolved "https://registry.yarnpkg.com/@coreui/react/-/react-4.0.0-rc.0.tgz#a5bcc13f13e1acec273ffb32f085452d2a7da116"
integrity sha512-vJ8MqBChFfxtYqmvFzcxwNU+98LniLlGmaIrY7Xa7Ckr29ZRh1d4aBJhM1gGtE2kefsra4B8hzw/6rzEXYdLlQ==
"@coreui/utils@^1.3.1":
version "1.3.1"
@ -3276,11 +3274,16 @@ char-regex@^1.0.2:
resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
chart.js@^3.4.0, chart.js@^3.4.1, chart.js@^3.5.0:
chart.js@^3.4.0, chart.js@^3.4.1:
version "3.5.0"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.0.tgz#6eb075332d4ebbbb20a94e5a07a234052ed6c4fb"
integrity sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA==
chart.js@^3.5.1:
version "3.5.1"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.1.tgz#73e24d23a4134a70ccdb5e79a917f156b6f3644a"
integrity sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ==
check-types@^11.1.1:
version "11.1.2"
resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.1.2.tgz#86a7c12bf5539f6324eb0e70ca8896c0e38f3e2f"
@ -3674,11 +3677,16 @@ core-js@^2.4.0:
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
core-js@^3.0.1, core-js@^3.16.1, core-js@^3.6.5:
core-js@^3.0.1, core-js@^3.6.5:
version "3.16.1"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.1.tgz#f4485ce5c9f3c6a7cb18fa80488e08d362097249"
integrity sha512-AAkP8i35EbefU+JddyWi12AWE9f2N/qr/pwnDtWz4nyUIBGMJPX99ANFFRSw6FefM374lDujdtLDyhN2A/btHw==
core-js@^3.16.2:
version "3.16.2"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.2.tgz#3f485822889c7fc48ef463e35be5cc2a4a01a1f4"
integrity sha512-P0KPukO6OjMpjBtHSceAZEWlDD1M2Cpzpg6dBbrjFqFhBHe/BwhxaP820xKOjRn/lZRQirrCusIpLS/n2sgXLQ==
core-util-is@~1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@ -4718,6 +4726,13 @@ eslint-plugin-prettier@^3.4.0:
dependencies:
prettier-linter-helpers "^1.0.0"
eslint-plugin-prettier@^3.4.1:
version "3.4.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz#e9ddb200efb6f3d05ffe83b1665a716af4a387e5"
integrity sha512-htg25EUYUeIhKHXjOinK4BgCcDwtLHjqaxCDsMy5nbnUMkKFvIhMVCp+5GFUXQ4Nr8lBsPqtGAqBenbpFqAA2g==
dependencies:
prettier-linter-helpers "^1.0.0"
eslint-plugin-react-hooks@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
@ -9973,10 +9988,10 @@ sass-loader@^10.0.5:
schema-utils "^3.0.0"
semver "^7.3.2"
sass@^1.37.5:
version "1.37.5"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.37.5.tgz#f6838351f7cc814c4fcfe1d9a20e0cabbd1e7b3c"
integrity sha512-Cx3ewxz9QB/ErnVIiWg2cH0kiYZ0FPvheDTVC6BsiEGBTZKKZJ1Gq5Kq6jy3PKtL6+EJ8NIoaBW/RSd2R6cZOA==
sass@^1.38.0:
version "1.38.0"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.38.0.tgz#2f3e60a1efdcdc910586fa79dc89d3399a145b4f"
integrity sha512-WBccZeMigAGKoI+NgD7Adh0ab1HUq+6BmyBUEaGxtErbUtWUevEbdgo5EZiJQofLUGcKtlNaO2IdN73AHEua5g==
dependencies:
chokidar ">=3.0.0 <4.0.0"