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.

# 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.

"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:

# 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:

// 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.

// 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>