Update v1.2.0 (#8)

Features

- Increase CSS class rename from 6 to 8 letters
- Add games section
- Add APICount component
- Add game methods to service
- Add game explorer and details pages
- Add width to icon and Align to center on InfoBox component
- Add Description component
- Add SubTitle component
- Add Section components and Validation before showing links
- Add SimpleIcon component
- Add flexibility to Alert component
- Add (fixed) height to PaginationItem

Changes

- Update dependencies
- Update VerticalCard style
- Replace import type from Card components
- Replace import type from Link components
- Replace import type from Title components
- Replace h1 tag with Title Component
- Rename SimpleTitle to Title

Fixes

- Application crashing when handling null reference

*Bump version to 1.2.0*
*Upgrade to yarn 4.X*

.gitignore

@@ -1,5 +1,14 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
 # dependencies
 /node_modules
 /.pnp

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

docs/GETTING_STARTED.md

@@ -41,7 +41,7 @@ This tutorial gives a brief introduction to how to run this react (nextjs) proje
     │   │   ├── Loading
     │   │   └── Title
     │   │       ├── EffectTitle
-    │   │       └── SimpleTitle
+    │   │       └── Title
     │   ├── data
     │   │   ├── Reference
     │   │   └── Row

next.config.js

@@ -12,7 +12,7 @@ const hashOnlyIdent = (context, _, exportName) =>
       ),
       'md4',
       'base64',
-      6
+      8
     )
     .replace(/[^a-zA-Z0-9-_]/g, '_')
     .replace(/^(-?\d|--)/, '_$1');

package.json

@@ -1,5 +1,6 @@
 {
   "name": "hawbrary",
+  "packageManager": "yarn@4.0.1",
   "version": "1.1.0",
   "private": true,
   "scripts": {
@@ -9,24 +10,24 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@hawapi/js-sdk": "^1.1.0",
+    "@hawapi/js-sdk": "^1.2.0",
     "next": "13.4.19",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "swr": "^2.2.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "swr": "2.2.2"
   },
   "devDependencies": {
     "@iconify-icon/react": "^1.0.8",
-    "@types/node": "20.5.7",
-    "@types/react": "18.2.21",
-    "@types/react-dom": "18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.5.0",
-    "@typescript-eslint/parser": "^6.5.0",
-    "eslint": "8.48.0",
+    "@types/node": "^20.9.0",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "eslint": "^8.53.0",
     "eslint-config-next": "13.4.19",
     "eslint-config-prettier": "^9.0.0",
     "loader-utils": "^3.2.1",
     "prettier": "^3.0.3",
-    "typescript": "5.2.2"
+    "typescript": "^5.2.2"
   }
 }

src/components/core/Alert/Alert.module.css

@@ -4,13 +4,19 @@
   padding: 1rem 0;
   background-color: rgba(var(--background-rgb), 0.3);
   backdrop-filter: blur(2px);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
 }
 
 .message {
   display: flex;
+  align-items: center;
   justify-content: center;
   gap: 0.2rem;
   font-size: 0.9rem;
+  text-align: center;
 }
 
 .close {
@@ -22,3 +28,19 @@
   display: flex;
   align-items: center;
 }
+
+@media (max-width: 780px) {
+  .message {
+    width: 80%;
+    flex-direction: column;
+  }
+
+  .close {
+    height: initial;
+    width: 100%;
+    top: initial;
+    right: 0;
+    position: relative;
+    justify-content: center;
+  }
+}

src/components/core/Alert/index.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@iconify-icon/react/dist/iconify.js';
 import { useEffect, useState, type ReactNode } from 'react';
+import SimpleIcon from '../SimpleIcon';
 import styles from './Alert.module.css';
 
 interface Props {
@@ -25,7 +25,7 @@ export default function Alert({ id, children }: Props) {
     <div className={styles.banner}>
       <span className={styles.message}>{children}</span>
       <span className={styles.close} onClick={dismissAlert}>
-        <Icon icon="mdi:close" width="18" />
+        <SimpleIcon icon="mdi:close" size="18" />
       </span>
     </div>
   );

src/components/core/Banner/index.tsx

@@ -1,4 +1,6 @@
 import Image from 'next/image';
+import { Description } from '../Description';
+import Title from '../Title/Title';
 import styles from './Banner.module.css';
 
 interface Props {
@@ -11,8 +13,8 @@ export default function Banner({ title, description, thumbnail }: Props) {
   return (
     <div className={styles.banner}>
       <div className={styles.container}>
-        <h1>{title}</h1>
-        <p>{description}</p>
+        <Title value={title} />
+        <Description value={description} textAlign="center" />
       </div>
       <Image
         src={thumbnail}

src/components/core/Card/HorizontalCard/index.tsx

@@ -1,6 +1,7 @@
 import { getDetailsUrl } from '@/lib/url';
 import Image from 'next/image';
 import Link from 'next/link';
+import { Description } from '../../Description';
 import styles from './HorizontalCard.module.css';
 
 interface Props {
@@ -11,7 +12,7 @@ interface Props {
   thumbnail: string;
 }
 
-export default function HorizontalCard({
+export function HorizontalCard({
   uuid,
   target,
   title,
@@ -23,7 +24,7 @@ export default function HorizontalCard({
       <div className={styles.card}>
         <div className={styles.info}>
           <h2>{title}</h2>
-          <p>{description}</p>
+          <Description value={description} />
         </div>
         <Image
           src={thumbnail}

src/components/core/Card/PersonCard/index.tsx

@@ -1,6 +1,7 @@
 import { getDetailsUrl } from '@/lib/url';
 import Image from 'next/image';
 import Link from 'next/link';
+import SubTitle from '../../Title/SubTitle';
 import styles from './PersonCard.module.css';
 
 interface Props {
@@ -11,7 +12,7 @@ interface Props {
   thumbnail: string;
 }
 
-export default function PersonCard({
+export function PersonCard({
   uuid,
   target,
   name,
@@ -29,7 +30,7 @@ export default function PersonCard({
           className={styles.image}
         />
         <div className={styles.container}>
-          <h1 className={styles.name}>{name}</h1>
+          <SubTitle value={name} />
           {description.map((item, key) => {
             return (
               <span key={key} className={styles.description}>

src/components/core/Card/SimpleCard/index.tsx

@@ -1,6 +1,7 @@
 import { getDetailsUrl } from '@/lib/url';
 import Image from 'next/image';
 import Link from 'next/link';
+import SubTitle from '../../Title/SubTitle';
 import styles from './SimpleCard.module.css';
 
 interface Props {
@@ -11,7 +12,7 @@ interface Props {
   thumbnail: string;
 }
 
-export default function SimpleCard({
+export function SimpleCard({
   uuid,
   target,
   title,
@@ -29,7 +30,7 @@ export default function SimpleCard({
           className={styles.image}
         />
         <div className={styles.container}>
-          <h1 className={styles.title}>{title}</h1>
+          <SubTitle value={title} />
           <p className={styles.description}>{description}</p>
         </div>
       </div>

src/components/core/Card/VerticalCard/VerticalCard.module.css

@@ -1,6 +1,7 @@
 .card {
-  width: 100%;
   height: 32rem;
+  width: 100%;
+  max-width: 24rem;
   border: 1px solid #dd0400;
   border-radius: 20px;
   position: relative;
@@ -14,7 +15,6 @@
 }
 
 .more {
-  height: 13rem;
   width: 100%;
   display: flex;
   gap: 2rem;
@@ -40,6 +40,10 @@
 
 .description {
   font-size: 0.9em;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .routers {

src/components/core/Card/VerticalCard/index.tsx

@@ -9,7 +9,7 @@ interface Props {
   children?: ReactNode;
 }
 
-export default function VerticalCard(props: Props) {
+export function VerticalCard(props: Props) {
   return (
     <div className={styles.card}>
       <Image

src/components/core/Card/index.ts

@@ -1,11 +1,4 @@
-import HorizontalCard from './HorizontalCard';
-import PersonCard from './PersonCard';
-import SimpleCard from './SimpleCard';
-import VerticalCard from './VerticalCard';
-
-export const Card = {
-  Simple: SimpleCard,
-  Horizontal: HorizontalCard,
-  Vertical: VerticalCard,
-  Person: PersonCard,
-};
+export * from './HorizontalCard';
+export * from './PersonCard';
+export * from './SimpleCard';
+export * from './VerticalCard';

src/components/core/Description/Description.module.css

@@ -0,0 +1,5 @@
+.description {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

src/components/core/Description/index.tsx

@@ -0,0 +1,22 @@
+import type { Property } from 'csstype';
+import styles from './Description.module.css';
+
+interface Props {
+  value?: string;
+  children?: string;
+  textAlign?: Property.TextAlign;
+  fontSize?: string;
+}
+
+export function Description({
+  value,
+  children,
+  textAlign = 'initial',
+  fontSize = '1em',
+}: Props) {
+  return (
+    <p className={styles.description} style={{ textAlign, fontSize }}>
+      {value ?? children}
+    </p>
+  );
+}

src/components/core/Link/SecondaryLink/index.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@iconify-icon/react/dist/iconify.js';
 import Link from 'next/link';
+import SimpleIcon from '../../SimpleIcon';
 import styles from './SecondaryLink.module.css';
 
 interface Props {
@@ -13,7 +13,7 @@ export function SecondaryLink({ href, name, isLocal = false }: Props) {
     <Link href={href} target={isLocal ? undefined : '_blank'}>
       <div className={styles.button}>
         {name}
-        {!isLocal && <Icon icon="mdi:open-in-new" width="16" />}
+        {!isLocal && <SimpleIcon icon="mdi:open-in-new" />}
       </div>
     </Link>
   );

src/components/core/Link/SimpleLink/SimpleLink.module.css

@@ -2,6 +2,7 @@
   color: red;
   border-bottom: 1px solid transparent;
   transition: all 0.2s;
+  display: flex;
 }
 
 .link:hover {

src/components/core/Link/SimpleLink/index.tsx

@@ -1,19 +1,21 @@
-import { Icon } from '@iconify-icon/react/dist/iconify.js';
 import Link from 'next/link';
+import SimpleIcon from '../../SimpleIcon';
 import styles from './SimpleLink.module.css';
 
 interface Props {
   href: string;
   name: string;
   isLocal?: boolean;
   showIcon?: boolean;
+  iconSize?: string;
 }
 
-export default function SimpleLink({
+export function SimpleLink({
   href,
   name,
   isLocal = false,
   showIcon = true,
+  iconSize = '15',
 }: Props) {
   return (
     <Link
@@ -22,7 +24,9 @@ export default function SimpleLink({
       target={isLocal ? undefined : '_blank'}
     >
       {name}
-      {!isLocal && showIcon && <Icon icon="mdi:open-in-new" width="15" />}
+      {!isLocal && showIcon && (
+        <SimpleIcon icon="mdi:open-in-new" size={iconSize} />
+      )}
     </Link>
   );
 }

src/components/core/Link/index.ts

@@ -1,9 +1,3 @@
-import { PrimaryLink } from './PrimaryLink';
-import { SecondaryLink } from './SecondaryLink';
-import SimpleLink from './SimpleLink';
-
-export const Link = {
-  Primary: PrimaryLink,
-  Secondary: SecondaryLink,
-  Simple: SimpleLink,
-};
+export * from './PrimaryLink';
+export * from './SecondaryLink';
+export * from './SimpleLink';