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/coreui": "4.0.1",
"@coreui/icons": "^2.0.1", "@coreui/icons": "^2.0.1",
"@coreui/icons-react": "^2.0.0-rc.5", "@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/react-chartjs": "2.0.0-rc.0",
"@coreui/utils": "^1.3.1", "@coreui/utils": "^1.3.1",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.3", "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
"chart.js": "^3.5.0", "chart.js": "^3.5.1",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"core-js": "^3.16.1", "core-js": "^3.16.2",
"enzyme": "^3.11.0", "enzyme": "^3.11.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^17.0.2", "react": "^17.0.2",
@ -51,10 +51,10 @@
"auto-changelog": "~2.3.0", "auto-changelog": "~2.3.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0", "eslint-plugin-prettier": "^3.4.1",
"prettier": "2.3.2", "prettier": "2.3.2",
"react-scripts": "^4.0.3", "react-scripts": "^4.0.3",
"sass": "^1.37.5" "sass": "^1.38.0"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "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 React from 'react'
import PropTypes from 'prop-types' 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 CIcon from '@coreui/icons-react'
import { cibFacebook, cibLinkedin, cibTwitter, cilCalendar } from '@coreui/icons' import { cibFacebook, cibLinkedin, cibTwitter, cilCalendar } from '@coreui/icons'
import { CChart } from '@coreui/react-chartjs' import { CChart } from '@coreui/react-chartjs'
@ -37,36 +37,34 @@ const WidgetsBrand = ({ withCharts }) => {
return ( return (
<CRow> <CRow>
<CCol sm={6} lg={3}> <CCol sm={6} lg={3}>
<CWidgetBrand <CWidgetStatsD
className="mb-4" className="mb-4"
headerChildren={ {...(withCharts && {
<> chart: (
<CIcon icon={cibFacebook} height={52} className="my-4 text-white" /> <CChart
{withCharts && ( className="position-absolute w-100 h-100"
<CChart type="line"
className="position-absolute w-100 h-100" data={{
type="line" labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
data={{ datasets: [
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], {
datasets: [ backgroundColor: 'rgba(255,255,255,.1)',
{ borderColor: 'rgba(255,255,255,.55)',
backgroundColor: 'rgba(255,255,255,.1)', pointHoverBackgroundColor: '#fff',
borderColor: 'rgba(255,255,255,.55)', borderWidth: 2,
pointHoverBackgroundColor: '#fff', data: [65, 59, 84, 84, 51, 55, 40],
borderWidth: 2, fill: true,
data: [65, 59, 84, 84, 51, 55, 40], },
fill: true, ],
}, }}
], options={chartOptions}
}} />
options={chartOptions} ),
/> })}
)} icon={<CIcon icon={cibFacebook} height={52} className="my-4 text-white" />}
</>
}
values={[ values={[
['89k', 'friends'], { title: 'friends', value: '89K' },
['459', 'feeds'], { title: 'feeds', value: '459' },
]} ]}
style={{ style={{
'--cui-card-cap-bg': '#3b5998', '--cui-card-cap-bg': '#3b5998',
@ -75,36 +73,34 @@ const WidgetsBrand = ({ withCharts }) => {
</CCol> </CCol>
<CCol sm={6} lg={3}> <CCol sm={6} lg={3}>
<CWidgetBrand <CWidgetStatsD
className="mb-4" className="mb-4"
headerChildren={ {...(withCharts && {
<> chart: (
<CIcon icon={cibTwitter} height={52} className="my-4 text-white" /> <CChart
{withCharts && ( className="position-absolute w-100 h-100"
<CChart type="line"
className="position-absolute w-100 h-100" data={{
type="line" labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
data={{ datasets: [
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], {
datasets: [ backgroundColor: 'rgba(255,255,255,.1)',
{ borderColor: 'rgba(255,255,255,.55)',
backgroundColor: 'rgba(255,255,255,.1)', pointHoverBackgroundColor: '#fff',
borderColor: 'rgba(255,255,255,.55)', borderWidth: 2,
pointHoverBackgroundColor: '#fff', data: [1, 13, 9, 17, 34, 41, 38],
borderWidth: 2, fill: true,
data: [1, 13, 9, 17, 34, 41, 38], },
fill: true, ],
}, }}
], options={chartOptions}
}} />
options={chartOptions} ),
/> })}
)} icon={<CIcon icon={cibTwitter} height={52} className="my-4 text-white" />}
</>
}
values={[ values={[
['973k', 'followers'], { title: 'followers', value: '973k' },
['1.792', 'tweets'], { title: 'tweets', value: '1.792' },
]} ]}
style={{ style={{
'--cui-card-cap-bg': '#00aced', '--cui-card-cap-bg': '#00aced',
@ -113,36 +109,34 @@ const WidgetsBrand = ({ withCharts }) => {
</CCol> </CCol>
<CCol sm={6} lg={3}> <CCol sm={6} lg={3}>
<CWidgetBrand <CWidgetStatsD
className="mb-4" className="mb-4"
headerChildren={ {...(withCharts && {
<> chart: (
<CIcon icon={cibLinkedin} height={52} className="my-4 text-white" /> <CChart
{withCharts && ( className="position-absolute w-100 h-100"
<CChart type="line"
className="position-absolute w-100 h-100" data={{
type="line" labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
data={{ datasets: [
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], {
datasets: [ backgroundColor: 'rgba(255,255,255,.1)',
{ borderColor: 'rgba(255,255,255,.55)',
backgroundColor: 'rgba(255,255,255,.1)', pointHoverBackgroundColor: '#fff',
borderColor: 'rgba(255,255,255,.55)', borderWidth: 2,
pointHoverBackgroundColor: '#fff', data: [78, 81, 80, 45, 34, 12, 40],
borderWidth: 2, fill: true,
data: [78, 81, 80, 45, 34, 12, 40], },
fill: true, ],
}, }}
], options={chartOptions}
}} />
options={chartOptions} ),
/> })}
)} icon={<CIcon icon={cibLinkedin} height={52} className="my-4 text-white" />}
</>
}
values={[ values={[
['500+', 'contacts'], { title: 'contacts', value: '500' },
['292', 'feeds'], { title: 'feeds', value: '1.292' },
]} ]}
style={{ style={{
'--cui-card-cap-bg': '#4875b4', '--cui-card-cap-bg': '#4875b4',
@ -151,37 +145,35 @@ const WidgetsBrand = ({ withCharts }) => {
</CCol> </CCol>
<CCol sm={6} lg={3}> <CCol sm={6} lg={3}>
<CWidgetBrand <CWidgetStatsD
className="mb-4" className="mb-4"
color="warning" color="warning"
headerChildren={ {...(withCharts && {
<> chart: (
<CIcon icon={cilCalendar} height={52} className="my-4 text-white" /> <CChart
{withCharts && ( className="position-absolute w-100 h-100"
<CChart type="line"
className="position-absolute w-100 h-100" data={{
type="line" labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
data={{ datasets: [
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], {
datasets: [ backgroundColor: 'rgba(255,255,255,.1)',
{ borderColor: 'rgba(255,255,255,.55)',
backgroundColor: 'rgba(255,255,255,.1)', pointHoverBackgroundColor: '#fff',
borderColor: 'rgba(255,255,255,.55)', borderWidth: 2,
pointHoverBackgroundColor: '#fff', data: [35, 23, 56, 22, 97, 23, 64],
borderWidth: 2, fill: true,
data: [35, 23, 56, 22, 97, 23, 64], },
fill: true, ],
}, }}
], options={chartOptions}
}} />
options={chartOptions} ),
/> })}
)} icon={<CIcon icon={cilCalendar} height={52} className="my-4 text-white" />}
</>
}
values={[ values={[
['12+', 'events'], { title: 'events', value: '12+' },
['4', 'meetings'], { title: 'meetings', value: '4' },
]} ]}
/> />
</CCol> </CCol>

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

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

41
yarn.lock
View File

@ -1222,7 +1222,7 @@
resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.0.tgz#52ebe0197411a829ba48057ade61923e05859eec" resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.0.tgz#52ebe0197411a829ba48057ade61923e05859eec"
integrity sha512-8vH6fJrmvCR/Oy5v0E+/1AL3Ygb4jhQ7NXK2fMYWJyK13BePDm9muB3y6S0IdqkpBwjY3hHVwHyt2lJqJdesmQ== integrity sha512-8vH6fJrmvCR/Oy5v0E+/1AL3Ygb4jhQ7NXK2fMYWJyK13BePDm9muB3y6S0IdqkpBwjY3hHVwHyt2lJqJdesmQ==
"@coreui/coreui@4.0.1", "@coreui/coreui@^4.0.1": "@coreui/coreui@4.0.1":
version "4.0.1" version "4.0.1"
resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.1.tgz#e5faf540aeea31b0cc8d428d73080a364e4bc6fd" resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.1.tgz#e5faf540aeea31b0cc8d428d73080a364e4bc6fd"
integrity sha512-1mrWnbqoWb7+8ZAMUdlWt0AqVzDEkJglk7F3OaFsQtxienezFvlMNsd1YPPNo+taRzF7HZ8xSDIAItCvlOaMVg== integrity sha512-1mrWnbqoWb7+8ZAMUdlWt0AqVzDEkJglk7F3OaFsQtxienezFvlMNsd1YPPNo+taRzF7HZ8xSDIAItCvlOaMVg==
@ -1252,12 +1252,10 @@
"@coreui/chartjs" "^3.0.0" "@coreui/chartjs" "^3.0.0"
chart.js "^3.4.1" chart.js "^3.4.1"
"@coreui/react@4.0.0-beta.4": "@coreui/react@4.0.0-rc.0":
version "4.0.0-beta.4" version "4.0.0-rc.0"
resolved "https://registry.yarnpkg.com/@coreui/react/-/react-4.0.0-beta.4.tgz#b41b5270707784a200bf39b0008d4a324cc98dec" resolved "https://registry.yarnpkg.com/@coreui/react/-/react-4.0.0-rc.0.tgz#a5bcc13f13e1acec273ffb32f085452d2a7da116"
integrity sha512-yjbAk5u3G2w/gJn+tfE/6mQagQoFp94EghHaes4E7GJlGcHwdfTp5AB5nRZp9DvYFy4vm3WsqWGD4yfQ34oilA== integrity sha512-vJ8MqBChFfxtYqmvFzcxwNU+98LniLlGmaIrY7Xa7Ckr29ZRh1d4aBJhM1gGtE2kefsra4B8hzw/6rzEXYdLlQ==
dependencies:
"@coreui/coreui" "^4.0.1"
"@coreui/utils@^1.3.1": "@coreui/utils@^1.3.1":
version "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" resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw== 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" version "3.5.0"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.0.tgz#6eb075332d4ebbbb20a94e5a07a234052ed6c4fb" resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.0.tgz#6eb075332d4ebbbb20a94e5a07a234052ed6c4fb"
integrity sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA== 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: check-types@^11.1.1:
version "11.1.2" version "11.1.2"
resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.1.2.tgz#86a7c12bf5539f6324eb0e70ca8896c0e38f3e2f" 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" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ== 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" version "3.16.1"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.1.tgz#f4485ce5c9f3c6a7cb18fa80488e08d362097249" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.1.tgz#f4485ce5c9f3c6a7cb18fa80488e08d362097249"
integrity sha512-AAkP8i35EbefU+JddyWi12AWE9f2N/qr/pwnDtWz4nyUIBGMJPX99ANFFRSw6FefM374lDujdtLDyhN2A/btHw== 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: core-util-is@~1.0.0:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" 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: dependencies:
prettier-linter-helpers "^1.0.0" 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: eslint-plugin-react-hooks@^4.2.0:
version "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" 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" schema-utils "^3.0.0"
semver "^7.3.2" semver "^7.3.2"
sass@^1.37.5: sass@^1.38.0:
version "1.37.5" version "1.38.0"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.37.5.tgz#f6838351f7cc814c4fcfe1d9a20e0cabbd1e7b3c" resolved "https://registry.yarnpkg.com/sass/-/sass-1.38.0.tgz#2f3e60a1efdcdc910586fa79dc89d3399a145b4f"
integrity sha512-Cx3ewxz9QB/ErnVIiWg2cH0kiYZ0FPvheDTVC6BsiEGBTZKKZJ1Gq5Kq6jy3PKtL6+EJ8NIoaBW/RSd2R6cZOA== integrity sha512-WBccZeMigAGKoI+NgD7Adh0ab1HUq+6BmyBUEaGxtErbUtWUevEbdgo5EZiJQofLUGcKtlNaO2IdN73AHEua5g==
dependencies: dependencies:
chokidar ">=3.0.0 <4.0.0" chokidar ">=3.0.0 <4.0.0"