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
modern-agile-team · Oct 3, 2022 · b67d60f · b67d60f
1 parent a84c4fa
commit b67d60f
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 94 deletions.
diff --git 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
@@ -1,21 +1,17 @@
-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 {
     title,
     todayTitle,
     totalTitle,
     todayVisitor,
+    todayVisitorColor,
     totalVisitor,
+    totalVisitorColor,
     backgroundColor,
     size,
-    todayBoldColor,
-    totalBoldColor,
     titleColor,
     todayTitleColor,
     totalTitleColor,
@@ -24,19 +20,19 @@ export const BigSize = (props: VisitorCounterPropsType) => {
   return (
     <Wrap backgroundColor={backgroundColor} size={size} titleColor={titleColor}>
       <span className="title">{title}</span>
-      <Today todayBoldColor={todayBoldColor} todayTitleColor={todayTitleColor}>
+      <Today todayVisitorColor={todayVisitorColor} todayTitleColor={todayTitleColor}>
         <span className="today">{todayTitle}</span>
         <span className="today-visitor">{todayVisitor}</span>
       </Today>
-      <Total totalBoldColor={totalBoldColor} totalTitleColor={totalTitleColor}>
+      <Total totalVisitorColor={totalVisitorColor} totalTitleColor={totalTitleColor}>
         <span className="total">{totalTitle}</span>
         <span className="total-visitor">{totalVisitor}</span>
       </Total>
     </Wrap>
   );
 };
 
-const Wrap = styled.div<VisitorCounterStylePropsType>`
+const Wrap = styled.div<VisitorCounterPropsType>`
   display: flex;
   flex-wrap: wrap;
   text-align: center;
@@ -53,7 +49,7 @@ const Wrap = styled.div<VisitorCounterStylePropsType>`
   }
 `;
 
-const Today = styled.div<VisitorCounterStylePropsType>`
+const Today = styled.div<VisitorCounterPropsType>`
   flex-grow: 1;
   padding: 10px;
   .today {
@@ -62,11 +58,11 @@ const Today = styled.div<VisitorCounterStylePropsType>`
   }
   .today-visitor {
     font-weight: bold;
-    color: ${({ todayBoldColor }) => todayBoldColor ?? 'red'};
+    color: ${({ todayVisitorColor }) => todayVisitorColor ?? 'red'};
   }
 `;
 
-const Total = styled.div<VisitorCounterStylePropsType>`
+const Total = styled.div<VisitorCounterPropsType>`
   flex-grow: 1;
   padding: 10px;
   .total {
@@ -75,6 +71,6 @@ const Total = styled.div<VisitorCounterStylePropsType>`
   }
   .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
@@ -1,27 +1,28 @@
-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 (
     <Wrap size={size}>
       <Counter backgroundColor={backgroundColor} titleColor={titleColor}>
         <span className="title">{title}</span>
-        <span className="today">{todayVisitor}</span>
-        <span className="total">{totalVisitor}</span>
+        <span className="today" style={{ color: `${todayVisitorColor}` }}>
+          {todayVisitor}
+        </span>
+        <span className="total" style={{ color: `${totalVisitorColor}` }}>
+          {totalVisitor}
+        </span>
       </Counter>
     </Wrap>
   );
 };
 
 export default Default;
 
-const Wrap = styled.div<VisitorCounterStylePropsType>`
+const Wrap = styled.div<VisitorCounterPropsType>`
   display: flex;
   align-items: center;
   font-size: ${({ size }) => size ?? '14px'};
@@ -30,7 +31,7 @@ const Wrap = styled.div<VisitorCounterStylePropsType>`
   }
 `;
 
-const Counter = styled.div<VisitorCounterStylePropsType>`
+const Counter = styled.div<VisitorCounterPropsType>`
   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
@@ -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,17 +8,17 @@ export const Simple = (props: VisitorCounterPropsType) => {
     totalTitle,
     totalVisitor,
     size,
-    todayBoldColor,
-    totalBoldColor,
+    todayVisitorColor,
+    totalVisitorColor,
     todayTitleColor,
     totalTitleColor,
   } = props;
 
   return (
     <Wrap
       size={size}
-      todayBoldColor={todayBoldColor}
-      totalBoldColor={totalBoldColor}
+      todayVisitorColor={todayVisitorColor}
+      totalVisitorColor={totalVisitorColor}
       todayTitleColor={todayTitleColor}
       totalTitleColor={totalTitleColor}
     >
@@ -34,7 +30,7 @@ export const Simple = (props: VisitorCounterPropsType) => {
   );
 };
 
-const Wrap = styled.div<VisitorCounterStylePropsType>`
+const Wrap = styled.div<VisitorCounterPropsType>`
   font-size: ${({ size }) => size ?? '14px'};
   span {
     padding: 3px;
@@ -44,7 +40,7 @@ const Wrap = styled.div<VisitorCounterStylePropsType>`
   }
   .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<VisitorCounterStylePropsType>`
   }
   .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
@@ -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',
 };