Naturalizer Design System (naturalizer-design-system)

Official Design System for Mirae Asset Financial Group — "Building on Principles"

Engineered with an Atomic Design Architecture, powered by Material-UI (MUI v7) + React + TypeScript, featuring the official brand color palette (Mirae Asset Orange #F58220 and Mirae Asset Blue #043B72), and typographic hierarchy using Spoqa Han Sans Neo.

1. Installation

npm install naturalizer-design-system

Ensure peer dependencies are present in your consuming application:

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

2. Quick Start

A. Setup Brand Theme Provider

In your application root (e.g. App.tsx or main.tsx):

import React from 'react';
import { AppThemeProvider, lightTheme, darkTheme } from 'naturalizer-design-system';

export function App() {
  return (
    <AppThemeProvider>
      {/* Your application components */}
    </AppThemeProvider>
  );
}

Or inject directly into your existing MUI setup:

import { ThemeProvider } from '@mui/material/styles';
import { lightTheme } from '@mirae/design-system';

<ThemeProvider theme={lightTheme}>
  <YourApp />
</ThemeProvider>

B. Using Atomic Components

import React from 'react';
import {
  MiraeButton,
  MiraeBadge,
  MiraeChip,
  MiraeInput,
  MiraeTable,
  SearchBar,
  primaryColors,
} from '@mirae/design-system';

export function DashboardWidget() {
  const columns = [
    { id: 'ticker', label: 'Ticker', sortable: true },
    { id: 'name', label: 'Company Name', sortable: true },
    { id: 'price', label: 'Last Price', align: 'right', sortable: true },
  ];

  const data = [
    { ticker: 'BBCA', name: 'Bank Central Asia Tbk', price: 'Rp 10.250' },
    { ticker: 'BBRI', name: 'Bank Rakyat Indonesia Tbk', price: 'Rp 5.150' },
  ];

  return (
    <div>
      {/* Table Component */}
      <MiraeTable
        title="Featured Stocks"
        columns={columns}
        data={data}
        searchable
        pagination
        headerVariant="blue"
      />
    </div>
  );
}

C. Accessing Brand Design Constants

import {
  primaryColors,
  graphIllustrationColors,
  digitalBackgroundLineColors,
  fontWeights,
} from '@mirae/design-system/constants';
// Note: Can also be imported from '@mirae/design-system' directly or '@mirae/design-system/palette'

// Mirae Asset Orange: #F58220 (PANTONE 158C)
console.log(primaryColors.orange.hex);

// Mirae Asset Blue: #043B72 (PANTONE 295C)
console.log(primaryColors.blue.hex);

// Graph sub-colors for data visualization
console.log(graphIllustrationColors);

3. How to Publish to GCP Artifact Registry

Step 1: Set Your GCP Registry in package.json

Add publishConfig to package.json pointing to your Artifact Registry repository:

{
  "publishConfig": {
    "registry": "https://<REGION>-npm.pkg.dev/<PROJECT_ID>/<REPOSITORY_NAME>/"
  }
}

(Example: https://asia-northeast3-npm.pkg.dev/my-gcp-project/mirae-npm/)

Step 2: Authenticate with Google Cloud Artifact Registry

Run Google's official credential helper:

npx google-artifactregistry-auth

This configures your local ~/.npmrc with OAuth credentials for your repository.

Step 3: Build & Publish

# 1. Build library (outputs ESM, CJS, and TypeScript .d.ts in dist/)
npm run build

# 2. Publish package to GCP Artifact Registry
npm publish

4. Development & Showcase App

To run the interactive documentation & showcase portal locally:

npm run dev

Open http://localhost:3005.

To build the static showcase portal:

npm run build:app
# Output in dist-app/