Merge pull request #45 from ogticrd/refactor/webpack-integration

Refactor/webpack integration
ogticrd · Jul 29, 2024 · 4d6c6ad · 4d6c6ad
2 parents 8259435 + 1197f65
commit 4d6c6ad
Show file tree

Hide file tree

Showing 65 changed files with 2,251 additions and 1,198 deletions.
diff --git a/.github/workflows/npm-publish-github-packages.yml b/.github/workflows/npm-publish-github-packages.yml
@@ -31,7 +31,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install
       - name: Build project with pnpm
-        run: pnpm rollup-build-lib
+        run: pnpm webpack-build-lib
 
   publish-npm:
     needs: build-lib

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,6 +1,7 @@
 import type { Preview } from "@storybook/react";
-
-import { withThemeByClassName } from "@storybook/addon-styling";
+import { withThemeFromJSXProvider } from "@storybook/addon-styling";
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import { theme } from "../theme";
 
 import "../theme/index.css";
 import "../index";
@@ -19,12 +20,16 @@ const preview: Preview = {
   decorators: [
     // Adds theme switching support.
     // NOTE: requires setting "darkMode" to "class" in your tailwind config
-    withThemeByClassName({
+    withThemeFromJSXProvider({
       themes: {
-        light: "light",
-        dark: "dark",
+        light: theme,
+        dark: theme,
+        // light: 'light',
+        // dark: 'dark',
       },
       defaultTheme: "light",
+      Provider: ThemeProvider,
+      GlobalStyles: CssBaseline,
     }),
   ],
 };

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -16,7 +16,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        {children}
+      </body>
     </html>
   )
 }
diff --git a/components/accordion/index.tsx b/components/accordion/index.tsx
@@ -1,22 +1,21 @@
-import * as React from 'react';
+import React from 'react';
 import MUIAccordion from '@mui/material/Accordion';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
-interface IAcordeonChildren {
+export interface IAccordionChildren {
   title: string;
   subtitle?: string;
   content: string | React.ReactNode;
 }
 
-interface IAcordeonProps {
-  elements: IAcordeonChildren[];
+export interface IAccordionProps {
+  elements: IAccordionChildren[];
 }
 
-
-export const Accordion = ({ elements }: IAcordeonProps) => {
+export const Accordion = ({ elements }: IAccordionProps) => {
   const [expanded, setExpanded] = React.useState<string | false>(false);
 
   const handleChange =
@@ -26,7 +25,7 @@ export const Accordion = ({ elements }: IAcordeonProps) => {
 
   return (
     <div>
-      {(elements || []).map((child: IAcordeonChildren, index: number) => (
+      {(elements || []).map((child: IAccordionChildren, index: number) => (
         <MUIAccordion key={index} expanded={expanded === 'panel' + index} onChange={handleChange('panel' + index)}>
           <AccordionSummary
             expandIcon={<ExpandMoreIcon />}

diff --git a/components/alert/index.tsx b/components/alert/index.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
+import React from 'react';
 import MUIAlert from '@mui/material/Alert';
 import { AlertTitle } from '@mui/material';
 
-export interface IProps {
+export interface IAlertProps {
   severity?: 'info' | 'success' | 'warning' | 'error'
   variant?: 'filled' | 'outlined' | 'standard';
   text: string;
@@ -14,7 +14,7 @@ export const Alert = ({
   variant = 'filled',
   text,
   title,
-}: IProps) => {
+}: IAlertProps) => {
 
   return (
     <MUIAlert variant={variant} severity={severity}>

diff --git a/components/badge/index.tsx b/components/badge/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import Chip from '@mui/material/Chip';
 import Stack from '@mui/material/Stack';
 

diff --git a/components/banner/index.tsx b/components/banner/index.tsx
@@ -1,15 +1,16 @@
-import * as React from 'react';
+import React from 'react';
+
 import styles from './style.module.css'
 
-export interface IPropsBanner {
+export interface IBannerProps {
   img: any;
   widthImg?: string;
   heightBanner?: string;
   direction?: 'ltr' | 'rtl';
   children: React.ReactNode;
 }
 
-export const Banner = ({ img, widthImg, heightBanner, direction, children }: IPropsBanner) => {
+export const Banner = ({ img, widthImg, heightBanner, direction, children }: IBannerProps) => {
 
   return (
     <div

diff --git a/components/box/index.tsx b/components/box/index.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
+import React from 'react';
 import MUIBox from '@mui/material/Box';
 
-export interface IPropsContainer {
+export interface IBoxProps {
   children: React.ReactNode;
 }
 
-export const Box = ({ children }: IPropsContainer) => {
+export const Box = ({ children }: IBoxProps) => {
 
   return (
     <MUIBox>

diff --git a/components/breadcrumbs/index.tsx b/components/breadcrumbs/index.tsx
@@ -1,23 +1,24 @@
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
+import React from 'react';
 import MUIBreadcrumbs from '@mui/material/Breadcrumbs';
 import Link from '@mui/material/Link';
 
-export interface IPropsBreadcrumbs {
-  links: ILinks[];
-}
-
-interface ILinks {
+export interface IBreadcrumbsChildren {
   name: string;
   link: string;
 }
 
-function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
-  event.preventDefault();
-  console.info('You clicked a breadcrumb.');
+export interface IBreadcrumbsProps {
+  links: IBreadcrumbsChildren[];
 }
 
-export const Breadcrumbs = ({ links = [] }: IPropsBreadcrumbs) => {
+
+export const Breadcrumbs = ({ links = [] }: IBreadcrumbsProps) => {
+
+  function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+    event.preventDefault();
+    console.info('You clicked a breadcrumb.');
+  }
+
   return (
     <div role="presentation" onClick={handleClick}>
       <MUIBreadcrumbs aria-label="breadcrumb">

diff --git a/components/card/index.tsx b/components/card/index.tsx
@@ -1,8 +1,7 @@
-import * as React from 'react';
+import React from 'react';
 import MUICard from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
-import { theme } from '../../theme';
 
 export interface ICardProps {
   title?: string;
@@ -18,13 +17,13 @@ export const Card = ({ title, subTitle, children, dark }: ICardProps) => {
       border: `${dark ? "" : "1px solid #E2E2E2"}`,
       borderTop: `${dark ? "" : "4px solid red"}`,
       boxShadow: "0px 3px 6px #f3f3f3",
-      background: `${dark ? theme.palette.primary.main : ""}`,
+      background: `${dark ? "#003876" : ""}`,
     }}
       elevation={0}
     >
       <CardContent sx={{ color: `${dark ? "#fff" : ""}` }}>
         {title &&
-          <Typography sx={{ color: `${dark ? "#fff" : ""}` }} variant="h5" component="div" color={theme.palette.primary.main} fontWeight="bold" gutterBottom>
+          <Typography sx={{ color: `${dark ? "#fff" : ""}` }} variant="h5" component="div" color={"#003876"} fontWeight="bold" gutterBottom>
             {title}
           </Typography>
         }

diff --git a/components/cardElevatedImage/index.tsx b/components/cardElevatedImage/index.tsx
@@ -1,14 +1,14 @@
-import * as React from 'react';
+import React from 'react';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
 
-export interface ICardProps {
+export interface ICardElevatedImageProps {
   title?: string;
   img?: string;
   description?: string;
 }
 
-export const CardElevatedImage = ({ title, img, description }: ICardProps) => {
+export const CardElevatedImage = ({ title, img, description }: ICardElevatedImageProps) => {
   return (
     <div style={{ minWidth: 275, boxShadow: "0px 3px 6px #f3f3f3", borderRadius: "5px", background: "white" }}>
       {img &&

diff --git a/components/cardImage/index.tsx b/components/cardImage/index.tsx
@@ -1,16 +1,15 @@
-import * as React from 'react';
+import React from 'react';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
-import { theme } from '../../theme';
 
-export interface ICardProps {
+export interface ICardImageProps {
   title?: string;
   img?: string;
   subTitle?: string;
   children?: any;
 }
 
-export const CardImage = ({ title, img, subTitle, children }: ICardProps) => {
+export const CardImage = ({ title, img, subTitle, children }: ICardImageProps) => {
   return (
     <div style={{ minWidth: 275, border: "2px solid #0087FF", borderRadius: "5px", background: "white" }}>
       {img &&
@@ -28,7 +27,7 @@ export const CardImage = ({ title, img, subTitle, children }: ICardProps) => {
       }
       <CardContent>
         {title &&
-          <Typography variant="h5" component="div" color={theme.palette.primary.main} fontWeight="bold" gutterBottom>
+          <Typography variant="h5" component="div" color={"#003876"} fontWeight="bold" gutterBottom>
             {title}
           </Typography>
         }

diff --git a/components/cardList/index.tsx b/components/cardList/index.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Typography } from "../typography";
+
+export interface ICardListProps {
+  title?: string;
+  subTitle?: string;
+  image?: any;
+  status?: string;
+  tags?: string[];
+}
+
+export const CardList = ({ title, subTitle, image, status, tags = [] }: ICardListProps) => {
+  return (
+    <div style={{
+      background: "white",
+      borderTop: "3px solid #003876",
+      boxShadow: "17px 17px 80px 0px #0000001A",
+      padding: "5px 17px",
+      borderRadius: "4px",
+    }}>
+      <div style={{
+        display: "flex",
+        alignItems: "center",
+        minHeight: "90px",
+      }}>
+        {image &&
+          <div>
+            <img src={image} width={57} style={{ minWidth: '57px' }} />
+          </div>
+        }
+
+        <div style={{ flexGrow: "1", margin: '0 20px' }}>
+          <Typography fontWeight={700} fontSize={16} color="primary">
+            {title}
+          </Typography>
+          <Typography fontWeight={500} fontSize={16}>
+            {subTitle}
+          </Typography>
+        </div>
+
+        <div>
+          <Typography fontWeight={700} fontSize={16} color="primary" textAlign="right">
+            {status && status}
+          </Typography>
+          <Typography fontWeight={500} fontSize={16} textAlign="right">
+            {tags[0] ?
+              tags.map((tag, index) => {
+                if (index + 1 === tags.length) return tag
+
+                return `${tag} | `
+              })
+              : null
+            }
+          </Typography>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/cardNumber/index.tsx b/components/cardNumber/index.tsx
@@ -1,14 +1,13 @@
-import * as React from 'react';
+import React from 'react';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
-import { theme } from '../../theme';
 
-export interface ICardProps {
+export interface ICardNumberProps {
   number: string;
   description: string;
 }
 
-export const CardNumber = ({ number, description }: ICardProps) => {
+export const CardNumber = ({ number, description }: ICardNumberProps) => {
   return (
     <div style={{ minWidth: 275, borderRadius: "5px", background: "#0066cc" }}>
       <CardContent>

diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 import 'swiper/css';
@@ -7,12 +7,12 @@ import './styles.css';
 
 import { Autoplay, Pagination } from 'swiper/modules';
 
-export interface IPropsCarousel {
+export interface ICarouselProps {
   childrens: React.ReactNode[];
   delayAutoplay?: number;
 }
 
-export const Carousel = ({ childrens, delayAutoplay }: IPropsCarousel) => {
+export const Carousel = ({ childrens, delayAutoplay }: ICarouselProps) => {
   return (
     <Swiper
       autoplay={{
@@ -25,8 +25,8 @@ export const Carousel = ({ childrens, delayAutoplay }: IPropsCarousel) => {
       modules={[Autoplay, Pagination]}
       className="mySwiper"
     >
-      {childrens && childrens.map((children: any) => (
-        <SwiperSlide>{children}</SwiperSlide>
+      {childrens && childrens.map((children: any, index: number) => (
+        <SwiperSlide key={index}>{children}</SwiperSlide>
       ))}
     </Swiper>
   );