Guide to Using NextPederationPlugin: Package Setup and Basic Configuration

1. Package Overview

By using NextPederationPlugin, you can integrate multiple modules and develop their functionalities independently. This guide explains step-by-step how to configure the ui-system package, flight module, hotel module, and the app-front application that integrates them. Each package and module has its own role, and by connecting them organically, you can create an integrated system.

2. UI System Package Configuration (`ui-system`)

1. package.json and Main Scripts

The `ui-system` package provides common UI components. The `package.json` file of this package is configured as follows:

{
	"name": "@amu/amu-ui-system",
	"version": "0.3.23",
	"description": "",
	"main": "dist/index.es.js",
	"types": "dist/index.d.ts",
	"author": "attrest medialab Co, Ltd.",
	"license": "ISC",
	"files": ["dist"],
	"scripts": {
		"preinstall": "npx only-allow pnpm",
		"dev": "vite",
		"build": "rm -rf dist && tsc -p ./tsconfig.build.json && vite build",
		"serve": "vite preview",
		"storybook": "storybook dev -p 6006",
		"build-storybook": "storybook build",
		"test": "vitest",
		"test:run": "vitest run --coverage"
	},
	"dependencies": {
		"typescript": "^4.5.2"
	},
	"peerDependencies": {
		"react": "^17.0.2",
		"react-dom": "^17.0.2",
		"styled-components": "^5.3.3"
	},
	"devDependencies": {
		"prettier": "^2.4.1",
		"storybook": "^6.4.0",
		"vite": "^2.6.4",
		"webpack": "^5.58.2"
	}
}

preinstall: Forces the use of the `pnpm` package manager.
dev: Runs the `vite` development server.
build: Deletes the `dist` directory, compiles TypeScript, and runs the `vite` build.
storybook: Runs the Storybook development server.

2. Main Dependency Settings

dependencies: Main packages to be used in the project, including TypeScript.
peerDependencies: Ensures that packages like React, React-DOM, and Styled-Components use the same versions in the project.
devDependencies: Tools to be used in the development environment.

3. Developing and Building UI Components

1. Creating the `Button` Component

The `Button` component for configuring the UI system is defined as follows:

import React, { forwardRef, useRef } from 'react';
import styled from 'styled-components';
import { ButtonProps, ButtonSize } from './type';
import useRipple from '@/hooks/useRipple';

const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
	{
		children,
		size = 32,
		type = 'button',
		color = 'system1',
		variant = 'filled',
		startIcon,
		endIcon,
		width,
		...props
	}, 
	ref,
) {
	const innerRef = useRef<HTMLButtonElement | null>(null);
	const ripples = useRipple(innerRef);
	
	return (
		<StyledButton
			{...props}
			type={type}
			$size={size}
			$color={color}
			$variant={variant}
			$width={width}
			ref={(node) => {
				innerRef.current = node;
				if (typeof ref === 'function') {
					ref(node);
				} else if (ref) {
					ref.current = node;
				}
			}}
		>
			{startIcon}
			{children}
			<RippleContainer>{ripples}</RippleContainer>
			{endIcon}
		</StyledButton>
	);
});

const StyledButton = styled.button`
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: ${({ $width }) => $width ?? 'auto' };
	${({ $size }) => `
		height: ${$size}px;
		font-size: ${$size / 2}px;
	`}
	background-color: ${({ $color, theme }) => theme.color[$color]};
`;

export default Button;

2. Setting Up the Theme (Colors, Fonts, etc.)

Define the theme colors in the `color.ts` file:

const system1 = '#000000';
const primaryMain = '#1a73e8';

const color = {
	system1,
	primaryMain,
	// Other color definitions
};

export default color;

3. Defining and Applying Global Styles

Define global styles in the `globalStyle.ts` file:

import { createGlobalStyle } from 'styled-components';
import PoppinsR from './fonts/poppins-v19-latin-regular.woff';
import NotoSansB from './fonts/NotoSans-Bold.woff';

const GlobalStyle = createGlobalStyle`
	@font-face {
		font-family: 'Poppins';
		src: url(${PoppinsR}) format('woff');
		font-weight: 400;
	}
	@font-face {
		font-family: 'NotoSansKR';
		src: url(${NotoSansB}) format('woff');
		font-weight: 700;
	}
	body {
		font-family: 'Poppins', 'NotoSansKR', sans-serif;
	}
`;

export default GlobalStyle;

Conclusion

In this article, we covered how to configure the ui-system package, main settings, and develop UI components. In the next article, we will discuss how to configure the flight and hotel module applications and implement actual functionalities.