From b67d60f24baf86da0243661b5946d1acd9d26ab2 Mon Sep 17 00:00:00 2001 From: woorim960 Date: Mon, 3 Oct 2022 18:18:12 +0900 Subject: [PATCH] feat(visitorcounter): update props name and update typedoc #164 update props name to 'totalVisitorColor' and 'todayVisitorColor' BREAKING CHANGE: update props names following... 1. todayCisitorColor 2. totalVisitorColor --- .../ComponentTypes/VisitorCounterType.ts | 77 ++++++++----------- src/lib/components/VisitorCounter/BigSize.tsx | 24 +++--- src/lib/components/VisitorCounter/Default.tsx | 21 ++--- src/lib/components/VisitorCounter/Simple.tsx | 20 ++--- .../VisitorCounter/VisitorCounter.tsx | 34 ++++---- 5 files changed, 82 insertions(+), 94 deletions(-) diff --git a/src/lib/common/types/ComponentTypes/VisitorCounterType.ts b/src/lib/common/types/ComponentTypes/VisitorCounterType.ts index f9d6805..5ef1574 100644 --- a/src/lib/common/types/ComponentTypes/VisitorCounterType.ts +++ b/src/lib/common/types/ComponentTypes/VisitorCounterType.ts @@ -1,72 +1,63 @@ export interface VisitorCounterPropsType { /** - * Hit title used in 'default' and 'big-size' (default: hit) + * You can dramatically change the UI of the VisitorCounter by choosing one of the following themes: `'default' | 'big-size' | 'simple'`. (default: 'default') + * + * @type `'default' | 'big-size' | 'simple'` */ - title: string; + theme?: VisitorCounterThemeType; /** - * Number of today's visitors (default: 0) + * Hit title text used only on `'default'` and `'big-size'` themes. (default: 'hit') */ - todayVisitor: number; + title?: string; /** - * Number of total visitors (default: 123) + * title color style. (default: 'black') */ - totalVisitor: number; + titleColor?: string; /** - * Title of today's visit count used in 'big-size' and 'simple' (default: today) + * Number of today's visitors. (default: 0) */ - todayTitle?: string; + todayVisitor?: number; /** - * Title of totla visit count used in 'big-size' and 'simple'(default: total) + * todayVisitor color style. (default: 'red') */ - totalTitle?: string; + todayVisitorColor?: string; /** - * Background color (default: #91c230c4) + * Number of total visitors. (default: 123) */ - backgroundColor?: string; + totalVisitor?: number; /** - * Font size of all text used in VisitorCounter Component (default: 14px) (unit: px) + * totalVisitor color style. (default: 'red') */ - size?: string; + totalVisitorColor?: string; /** - * Color of today's visit count used in 'big-size' and 'simple' (default: red) + * Title of today's the number of visitors used only on `'big-size'` and `'simple'` themes. (default: 'today') */ - todayBoldColor?: string; + todayTitle?: string; /** - * Color of total visit count used in 'big-size' and 'simple' (default: red) + * todayTitle color style. (default: 'black') */ - totalBoldColor?: string; - titleColor?: string; todayTitleColor?: string; - totalTitleColor?: string; -} - -export interface IndexPropsType extends VisitorCounterPropsType { /** - * Visitor Counter theme 'default' | 'big-size' | 'simple' (default: 'default') + * Title of total's the number of visitors used only on `'big-size'` and `'simple'` themes. (default: 'total') */ - theme?: VisitorCounterThemeType; -} - -type VisitorCounterThemeType = 'default' | 'big-size' | 'simple'; - -export interface VisitorCounterStylePropsType { - /** - * Background color of todayTitle (default: #91c230c4) - */ - backgroundColor?: string; + totalTitle?: string; /** - * Font size of all text used in VisitorCounter Component (default: 14px) (unit: px) + * totalTitle color style. (default: 'black') */ - size?: string; + totalTitleColor?: string; /** - * Color of today's visit count used in 'big-size' and 'simple' (default: red) + * Background color of todayTitle. (default: '#91c230c4') */ - todayBoldColor?: string; + backgroundColor?: string; /** - * Color of total visit count used in 'big-size' and 'simple' (default: red) + * Font size of all text used in VisitorCounter Component (default: '14px') (unit: px) */ - totalBoldColor?: string; - titleColor?: string; - todayTitleColor?: string; - totalTitleColor?: string; + size?: string; } + +/** + * You can dramatically change the UI of the VisitorCounter by choosing one of the following themes: `'default' | 'big-size' | 'simple'`. + * + * @type `'default' | 'big-size' | 'simple'` + */ +type VisitorCounterThemeType = 'default' | 'big-size' | 'simple'; diff --git a/src/lib/components/VisitorCounter/BigSize.tsx b/src/lib/components/VisitorCounter/BigSize.tsx index 73c1879..15d6836 100644 --- a/src/lib/components/VisitorCounter/BigSize.tsx +++ b/src/lib/components/VisitorCounter/BigSize.tsx @@ -1,9 +1,5 @@ -import React from 'react'; import styled from 'styled-components'; -import { - VisitorCounterPropsType, - VisitorCounterStylePropsType, -} from '../../common/types/ComponentTypes/VisitorCounterType'; +import { VisitorCounterPropsType } from '../../common/types/ComponentTypes/VisitorCounterType'; export const BigSize = (props: VisitorCounterPropsType) => { const { @@ -11,11 +7,11 @@ export const BigSize = (props: VisitorCounterPropsType) => { todayTitle, totalTitle, todayVisitor, + todayVisitorColor, totalVisitor, + totalVisitorColor, backgroundColor, size, - todayBoldColor, - totalBoldColor, titleColor, todayTitleColor, totalTitleColor, @@ -24,11 +20,11 @@ export const BigSize = (props: VisitorCounterPropsType) => { return ( {title} - + {todayTitle} {todayVisitor} - + {totalTitle} {totalVisitor} @@ -36,7 +32,7 @@ export const BigSize = (props: VisitorCounterPropsType) => { ); }; -const Wrap = styled.div` +const Wrap = styled.div` display: flex; flex-wrap: wrap; text-align: center; @@ -53,7 +49,7 @@ const Wrap = styled.div` } `; -const Today = styled.div` +const Today = styled.div` flex-grow: 1; padding: 10px; .today { @@ -62,11 +58,11 @@ const Today = styled.div` } .today-visitor { font-weight: bold; - color: ${({ todayBoldColor }) => todayBoldColor ?? 'red'}; + color: ${({ todayVisitorColor }) => todayVisitorColor ?? 'red'}; } `; -const Total = styled.div` +const Total = styled.div` flex-grow: 1; padding: 10px; .total { @@ -75,6 +71,6 @@ const Total = styled.div` } .total-visitor { font-weight: bold; - color: ${({ totalBoldColor }) => totalBoldColor ?? 'red'}; + color: ${({ totalVisitorColor }) => totalVisitorColor ?? 'red'}; } `; diff --git a/src/lib/components/VisitorCounter/Default.tsx b/src/lib/components/VisitorCounter/Default.tsx index 2b3eec9..0d990a9 100644 --- a/src/lib/components/VisitorCounter/Default.tsx +++ b/src/lib/components/VisitorCounter/Default.tsx @@ -1,19 +1,20 @@ -import React from 'react'; import styled from 'styled-components'; -import { - VisitorCounterPropsType, - VisitorCounterStylePropsType, -} from '../../common/types/ComponentTypes/VisitorCounterType'; +import { VisitorCounterPropsType } from '../../common/types/ComponentTypes/VisitorCounterType'; const Default = (props: VisitorCounterPropsType) => { - const { title, todayVisitor, totalVisitor, backgroundColor, size, titleColor } = props; + const { title, todayVisitor, todayVisitorColor, totalVisitor, totalVisitorColor, backgroundColor, size, titleColor } = + props; return ( {title} - {todayVisitor} - {totalVisitor} + + {todayVisitor} + + + {totalVisitor} + ); @@ -21,7 +22,7 @@ const Default = (props: VisitorCounterPropsType) => { export default Default; -const Wrap = styled.div` +const Wrap = styled.div` display: flex; align-items: center; font-size: ${({ size }) => size ?? '14px'}; @@ -30,7 +31,7 @@ const Wrap = styled.div` } `; -const Counter = styled.div` +const Counter = styled.div` padding: 5px 0px; border: 1px solid #989898; border-radius: 5px; diff --git a/src/lib/components/VisitorCounter/Simple.tsx b/src/lib/components/VisitorCounter/Simple.tsx index 7eac2ce..c7a52e5 100644 --- a/src/lib/components/VisitorCounter/Simple.tsx +++ b/src/lib/components/VisitorCounter/Simple.tsx @@ -1,9 +1,5 @@ -import React from 'react'; import styled from 'styled-components'; -import { - VisitorCounterPropsType, - VisitorCounterStylePropsType, -} from '../../common/types/ComponentTypes/VisitorCounterType'; +import { VisitorCounterPropsType } from '../../common/types/ComponentTypes/VisitorCounterType'; export const Simple = (props: VisitorCounterPropsType) => { const { @@ -12,8 +8,8 @@ export const Simple = (props: VisitorCounterPropsType) => { totalTitle, totalVisitor, size, - todayBoldColor, - totalBoldColor, + todayVisitorColor, + totalVisitorColor, todayTitleColor, totalTitleColor, } = props; @@ -21,8 +17,8 @@ export const Simple = (props: VisitorCounterPropsType) => { return ( @@ -34,7 +30,7 @@ export const Simple = (props: VisitorCounterPropsType) => { ); }; -const Wrap = styled.div` +const Wrap = styled.div` font-size: ${({ size }) => size ?? '14px'}; span { padding: 3px; @@ -44,7 +40,7 @@ const Wrap = styled.div` } .today-visitor { font-weight: bold; - color: ${({ todayBoldColor }) => todayBoldColor ?? 'red'}; + color: ${({ todayVisitorColor }) => todayVisitorColor ?? 'red'}; ::after { content: '|'; margin-left: 8px; @@ -57,6 +53,6 @@ const Wrap = styled.div` } .total-visitor { font-weight: bold; - color: ${({ totalBoldColor }) => totalBoldColor ?? 'black'}; + color: ${({ totalVisitorColor }) => totalVisitorColor ?? 'black'}; } `; diff --git a/src/lib/components/VisitorCounter/VisitorCounter.tsx b/src/lib/components/VisitorCounter/VisitorCounter.tsx index 30773c7..d04d12c 100644 --- a/src/lib/components/VisitorCounter/VisitorCounter.tsx +++ b/src/lib/components/VisitorCounter/VisitorCounter.tsx @@ -1,23 +1,25 @@ -import React from 'react'; -import { IndexPropsType } from '../../common/types/ComponentTypes/VisitorCounterType'; +import { VisitorCounterPropsType } from '../../common/types/ComponentTypes/VisitorCounterType'; import { BigSize } from './BigSize'; import Default from './Default'; import { Simple } from './Simple'; /** + * You can use VisitorCounter for recording the number of hits of users who visit the your site. * - * @props title: Hit title used in 'default' and 'big-size' (default: hit) - * @props theme: Visitor Counter theme 'default' | 'big-size' | 'simple' (default: 'default') - * @props todayVisitor: Number of today's visitors (default: 0) - * @props totalVisitor: Number of total visitors (default: 123) - * @props todayTitle: Title of today's visit count used in 'big-size' and 'simple' (default: today) - * @props totalTitle: Title of totla visit count used in 'big-size' and 'simple'(default: total) - * @props backgroundColor: Background color of todayTitle (default: #91c230c4) - * @props size: Font size of all text used in VisitorCounter Component (default: 14px) (unit: px) - * @props todayBoldColor: Color of today's visit count used in 'big-size' and 'simple' (default: red) - * @props totalBoldColor: Color of total visit count used in 'big-size' and 'simple' (default: red) + * @props theme: You can dramatically change the UI of the VisitorCounter by choosing one of the following themes: `'default' | 'big-size' | 'simple'`. (default: 'default') + * @props title: Hit title text used only on `'default'` and `'big-size'` themes. (default: 'hit') + * @props todayVisitor: Number of today's visitors. (default: 0) + * @props todayVisitorColor: todayVisitor color style. (default: 'red') + * @props totalVisitor: Number of total visitors. (default: 123) + * @props totalVisitorColor: totalVisitor color style. (default: 'red') + * @props todayTitle: Title of today's the number of visitors used only on `'big-size'` and `'simple'` themes. (default: 'today') + * @props todayTitleColor: todayTitle color style. (default: 'black') + * @props totalTitle: Title of total's the number of visitors used only on `'big-size'` and `'simple'` themes. (default: 'total') + * @props totalTitleColor: totalTitle color style. (default: 'black') + * @props backgroundColor: Background color of todayTitle. (default: '#91c230c4') + * @props size: Font size of all text used in VisitorCounter Component (default: '14px') (unit: px) */ -const VisitorCounter = (props: IndexPropsType) => { +const VisitorCounter = (props: VisitorCounterPropsType) => { const { theme } = props; switch (theme) { @@ -36,8 +38,10 @@ export default VisitorCounter; VisitorCounter.defaultProps = { title: 'hits', - todayVisitor: '0', - totalVisitor: '123', + todayVisitor: 0, + totalVisitor: 123, todayTitle: 'today', + todayTitleColor: 'black', totalTitle: 'total', + totalTitleColor: 'black', };