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.