# AIDT Design System

This document provides guidelines for developing learning materials according to the AIDT design system.

For any requirements, please contact Elice.

## Installation

For external learning material installation, we recommend installing the package via npm.  
This package is intended for use in web environments only.

```shell
# npm
npm install @elicecontents/content-ui --save

# yarn
yarn add @elicecontents/content-ui
```
## Peer Dependencies

To ensure proper functionality, this package requires the following **peer dependencies** to be installed in your project.  
Please make sure you have them installed before using the package.

```json
"peerDependencies": {
  "@base-ui-components/react": "^1.0.0-alpha.6",
  "@emotion/react": "^11.10.0",
  "@emotion/styled": "^11.10.0",
  "@mui/icons-material": "^5.14.10",
  "@mui/material": "^5.14.10",
  "@mui/x-data-grid": "^6.7.0",
  "@mui/x-date-pickers": "^6.7.0",
  "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
  "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
}
```

## Installing Peer Dependencies
If these dependencies are not already installed in your project, you can install them with the following command:

```shell
# Using npm
npm install @base-ui-components/react @emotion/react @emotion/styled \
  @mui/icons-material @mui/material @mui/x-data-grid @mui/x-date-pickers \
  react react-dom --save

# Using yarn
yarn add @base-ui-components/react @emotion/react @emotion/styled \
  @mui/icons-material @mui/material @mui/x-data-grid @mui/x-date-pickers \
  react react-dom

```

### 📌 Note:
- These dependencies are not automatically installed when you install this package.
- Ensure they are installed in your project to avoid compatibility issues.
- If your project already has a different version of react or @mui/material, check for compatibility before installing.

## Basic Theme Configuration

The AIDT design system provides a fundamental design framework and supports custom color configurations.

### 📖 AIDT Theme Usage Guide

`createAIDTTheme` dynamically generates a Material-UI (MUI) theme that aligns with the AIDT design system.  
This guide explains how to use `createAIDTTheme` and provides a component example (`Layout`).  

To apply `createAIDTTheme`, use `ThemeProvider` from MUI:

```ts
// Example usage of createAIDTTheme
import React from "react";
import { ThemeProvider, CssBaseline } from "@mui/material";
import { createAIDTTheme } from "@elicecontents/content-ui";

const theme = createAIDTTheme({
  paletteMode: "light", // Theme mode
  palettePublisher: "elice", // Brand
  paletteSubject: "korean", // Subject
  paletteLevel: "elementary", // Education level ('elementary', 'middle', 'high')
  typographyFontFamily: "pretendard", // Default font
});

const App = () => (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <h1>Hello, AIDT Theme!</h1>
  </ThemeProvider>
);

export default App;
```

Once applied, MUI's default styles will be adapted to the AIDT theme.

Below is an example of a basic `Layout` component with the AIDT theme.  
`EliceLayout` follows a **composable component structure**, allowing for flexible UI composition.

```ts
// Layout component example
<EliceLayout>
  <EliceLayout.HeaderContainer>
    <EliceLayout.HeaderTitle>Title</EliceLayout.HeaderTitle>
    <EliceLayout.HeaderSubTitle>
      ...
    </EliceLayout.HeaderSubTitle>
  </EliceLayout.HeaderContainer>

  <EliceLayout.Content>
    <Typography>Content area</Typography>
  </EliceLayout.Content>

  <EliceLayout.FooterContainer>
    <EliceLayout.FooterPaging />
    <EliceLayout.FooterSubmit />
  </EliceLayout.FooterContainer>
</EliceLayout>