Merge pull request #1 from handywijaya/migration/tailwindcss

Migrate to tailwindcss as main styling

README.md

@@ -9,6 +9,8 @@ Check it out at [handywijaya.github.io](https://handywijaya.github.io)!
 # Credits
 1. [React](https://reactjs.org) and [Create React App](https://github.com/facebook/create-react-app) as quick bootstrapper of the project.
 1. [Typescript](https://www.typescriptlang.org) as general security of the codes.
+1. [Tailwind CSS](https://tailwindcss.com/) and [Sass](https://sass-lang.com/) as main styling framework
 1. [Github](https://www.github.com) as the deployment server.
 1. [Flaticon](https://www.flaticon.com) as the icon provider.
 1. Deployment script by [KonardLinkowski](https://gist.github.com/KonradLinkowski/4b2b825d2540c4eecfc5dc1f9e42a87f).
+1. [ChatGPT](https://chatgpt.com/) as my instructor to build the whole project.

package.json

@@ -14,13 +14,15 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.1.1",
-    "react-scripts": "^5.0.1"
+    "react-scripts": "^5.0.1",
+    "tailwindcss": "^3.4.17"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "build:css": "tailwindcss build -i src/index.css -o src/output.css"
   },
   "eslintConfig": {
     "extends": [

src/_theme.scss

@@ -31,7 +31,7 @@ $colors: (
       &-button {
         background: map.get($theme-values, button);
         color: white;
-        transition: background-color 0.3s, transform 0.3s;
+        transition: background-color 0.125s, transform 0.125s;
 
         &:hover {
           background-color: map.get($theme-values, button-hover);

src/components/Album/index.tsx

@@ -1,6 +1,4 @@
 import React, { useState, useRef } from 'react'
-import './_styles.scss';
-import cn from 'classnames'
 
 import { Collection, CollectionImage, CollectionImageType } from '../../interfaces/Collections'
 
@@ -66,15 +64,15 @@ const Album: React.FC<Props> = ({ collection }) => {
     alt: string,
     bgColor: string
   ) => (
-    <img
-      key={key}
-      src={previewUrl}
-      onMouseMove={(e) => onFrameHover(e, title, bgColor)}
-      onMouseOut={onFrameOut}
-      className={cn('Image', imageType === CollectionImageType.LANDSCAPE ? 'Image-landscape' : 'Image-portrait')}
-      alt={alt}
-      onClick={() => openImage(url)}
-    />
+      <img
+        key={key}
+        src={previewUrl}
+        onMouseMove={(e) => onFrameHover(e, title, bgColor)}
+        onMouseOut={onFrameOut}
+        className="cursor-pointer rounded-lg shadow-md self-center transition-all duration-125 hover:scale-105"
+        alt={alt}
+        onClick={() => openImage(url)}
+      />
   )
 
   const renderFrames = (collectionId: string, images: Array<CollectionImage>, popupColor: string) => {
@@ -85,15 +83,19 @@ const Album: React.FC<Props> = ({ collection }) => {
   }
 
   const renderPhotoBook = (collection: Collection) => (
-    <div className="Album-pages">
+    <div className="grid justify-evenly items-center justify-items-center content-center
+    grid-cols-[repeat(auto-fit,_minmax(320px,_1fr))]
+    gap-[16px]">
       {renderFrames(collection.id, collection.images, collection.popupColor)}
     </div>
   )
 
   return (
-    <div className="Album">
-      <h2 className="Album-title">{collection.title}</h2>
-      <p className="Album-caption">{collection.caption}</p>
+    <div className="mb-[20px] text-center max-w-screen-lg m-auto">
+      <div className="mb-[20px]">
+        <h2 className="m-0 font-semibold text-[40px] drop-shadow-lg">{collection.title}</h2>
+        <p className="text-[16px] text-slate-700">{collection.caption}</p>
+      </div>
       {renderPhotoBook(collection)}
       <ToolTip
         show={popup.show}

src/components/PopupMessage/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import './_styles.scss';
 import cn from 'classnames'
 
 interface Props {
@@ -10,12 +9,13 @@ interface Props {
 
 const PopupMessage: React.FC<Props> = ({ show, message, bgColor }) => {
   const bg = bgColor || 'transparent'
+  const className=cn(
+    'rounded-md pointer-events-none select-none bg-white py-[4px] px-[8px] transition-opacity duration-125 ease-linear text-xs',
+    show ? 'opacity-1' : 'opacity-0'
+  )
 
   return (
-    <div
-      className={cn('PopupMessage', show ? 'PopupMessage-showed' : 'PopupMessage-hidden')}
-      style={{ background: bg }}
-    >
+    <div className={className} style={{ background: bg }}>
       {message}
     </div>
   )

src/components/PreviewAlbum/index.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback } from 'react';
-import './_styles.scss';
 import '../../_theme.scss';
 import cn from 'classnames';
 
@@ -11,8 +10,6 @@ interface Props {
   onOpenCollection: (collectionPath: string) => void;
 }
 
-// TODO: ganti semua jadi _scss
-
 const PreviewAlbum: React.FC<Props> = ({ collection, onOpenCollection }) => {
   const [popup, setPopup] = React.useState({
     show: false,
@@ -21,19 +18,12 @@ const PreviewAlbum: React.FC<Props> = ({ collection, onOpenCollection }) => {
     y: 0,
     bgColor: 'white',
   });
-  // const result = extract.renderSync({
-  //   file: '../../theme.scss'
-  // })
 
   const onFrameHover = useCallback(
     (e: React.MouseEvent<HTMLImageElement>, caption: string, bgColor: string, collectionId: string) => {
       const x = e.clientX;
       const y = e.clientY;
 
-      // console.log(styles.colors[collectionId])
-      // console.log('test', `${collectionId}`)
-      // console.log('test2', theme[collectionId])
-
       setPopup({
         show: true,
         caption,
@@ -70,10 +60,10 @@ const PreviewAlbum: React.FC<Props> = ({ collection, onOpenCollection }) => {
         onMouseMove={(e) => onFrameHover(e, collectionImage.caption, collection.popupColor, collection.id)}
         onMouseOut={onFrameOut}
         className={cn(
-          'PreviewImage',
+          'cursor-pointer transition-all duration-125 hover:opacity-90 hover:scale-105',
           collectionImage.type === CollectionImageType.LANDSCAPE
-            ? 'PreviewImage-landscape'
-            : 'PreviewImage-portrait'
+            ? 'w-full h-[200px]'
+            : 'h-full w-auto m-auto'
         )}
         alt={collectionImage.title}
         onClick={() => openImage(collectionImage.url)}
@@ -82,13 +72,15 @@ const PreviewAlbum: React.FC<Props> = ({ collection, onOpenCollection }) => {
   }, [collection, onFrameHover, onFrameOut, openImage]);
 
   const theme = `Theme-${collection.id}`;
+  const className = cn('border border-gray-300 rounded-lg shadow-lg overflow-hidden max-w-[300px] text-center mb-[20px]', theme)
+  const btnClassName = cn('button my-[16px]', `${theme}-button`)
   return (
-    <div className={cn('PreviewAlbum', theme)}>
+    <div className={className}>
       {renderPreviewImages()}
-      <h2 className="PreviewAlbum-title">{collection.title}</h2>
-      <p className="PreviewAlbum-caption">{collection.caption}</p>
+      <h2 className="font-bold text-[20px]">{collection.title}</h2>
+      <p className="text-slate-500 italic text-[16px]">{collection.caption}</p>
       <div
-        className={cn('PreviewAlbum-pages-button', `${theme}-button`)}
+        className={btnClassName}
         onClick={() => openCollection(collection.id)}
       >
         View Full Album

src/components/ToolTip/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import './_styles.scss';
 
 import PopupMessage from '../PopupMessage'
 
@@ -13,7 +12,7 @@ interface Props {
 
 const ToolTip: React.FC<Props> = ({ show, message, mouseX, mouseY, bgColor }) => {
   return (
-    <div className="ToolTip"
+    <div className="fixed transition-opacity duration-125 ease-linear select-none pointer-events-none"
       style={{ top: (mouseY + 5) + 'px', left: (mouseX + 5) + 'px' }}>
       <PopupMessage
         show={show}