naturalizer-design-system 1.0.0

package/README.md

@@ -0,0 +1,166 @@
+# 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
+
+```bash
+npm install naturalizer-design-system
+```
+
+Ensure peer dependencies are present in your consuming application:
+```bash
+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`):
+
+```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:
+```tsx
+import { ThemeProvider } from '@mui/material/styles';
+import { lightTheme } from '@mirae/design-system';
+
+<ThemeProvider theme={lightTheme}>
+  <YourApp />
+</ThemeProvider>
+```
+
+---
+
+### B. Using Atomic Components
+
+```tsx
+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
+
+```tsx
+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:
+```json
+{
+  "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:
+```bash
+npx google-artifactregistry-auth
+```
+This configures your local `~/.npmrc` with OAuth credentials for your repository.
+
+### Step 3: Build & Publish
+
+```bash
+# 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:
+```bash
+npm run dev
+```
+Open [http://localhost:3005](http://localhost:3005).
+
+To build the static showcase portal:
+```bash
+npm run build:app
+# Output in dist-app/
+```

package/dist/App.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export declare const App: React.FC;
+export default App;

package/dist/components/atoms/MSAvatar.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { AvatarProps } from '@mui/material/Avatar';
+export interface MSAvatarProps extends AvatarProps {
+    status?: 'online' | 'offline' | 'busy';
+    brandMonogram?: boolean;
+}
+export type MiraeAvatarProps = MSAvatarProps;
+export declare const MSAvatar: React.FC<MSAvatarProps>;
+export declare const MiraeAvatar: React.FC<MSAvatarProps>;

package/dist/components/atoms/MSBadge.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export type MSBadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'neutral';
+export type MiraeBadgeVariant = MSBadgeVariant;
+export interface MSBadgeProps {
+    label: React.ReactNode;
+    variant?: MSBadgeVariant;
+    dot?: boolean;
+    size?: 'sm' | 'md';
+}
+export type MiraeBadgeProps = MSBadgeProps;
+export declare const MSBadge: React.FC<MSBadgeProps>;
+export declare const MiraeBadge: React.FC<MSBadgeProps>;

package/dist/components/atoms/MSButton.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { ButtonProps } from '@mui/material/Button';
+export type MSButtonVariant = 'primary' | 'secondary' | 'outlined' | 'soft' | 'ghost';
+export type MiraeButtonVariant = MSButtonVariant;
+export interface MSButtonProps extends Omit<ButtonProps, 'variant'> {
+    brandVariant?: MSButtonVariant;
+    loading?: boolean;
+}
+export type MiraeButtonProps = MSButtonProps;
+export declare const MSButton: React.ForwardRefExoticComponent<Omit<MSButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const MiraeButton: React.ForwardRefExoticComponent<Omit<MSButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/atoms/MSChip.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ChipProps } from '@mui/material/Chip';
+export interface MSChipProps extends Omit<ChipProps, 'color'> {
+    trend?: 'up' | 'down';
+    brandColor?: 'orange' | 'blue' | 'graph' | 'neutral';
+}
+export type MiraeChipProps = MSChipProps;
+export declare const MSChip: React.FC<MSChipProps>;
+export declare const MiraeChip: React.FC<MSChipProps>;

package/dist/components/atoms/MSDivider.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { DividerProps } from '@mui/material/Divider';
+export interface MSDividerProps extends DividerProps {
+    colorVariant?: 'subtle' | 'medium' | 'dark' | 'orange' | 'blue';
+}
+export type MiraeDividerProps = MSDividerProps;
+export declare const MSDivider: React.FC<MSDividerProps>;
+export declare const MiraeDivider: React.FC<MSDividerProps>;

package/dist/components/atoms/MSInput.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { TextFieldProps } from '@mui/material/TextField';
+export interface MSInputProps extends Omit<TextFieldProps, 'variant'> {
+    focusColor?: 'orange' | 'blue';
+    prefixIcon?: React.ReactNode;
+    onPrefixClick?: () => void;
+    prefixAriaLabel?: string;
+    suffixIcon?: React.ReactNode;
+    onSuffixClick?: () => void;
+    suffixAriaLabel?: string;
+}
+export type MiraeInputProps = MSInputProps;
+export declare const MSInput: React.FC<MSInputProps>;
+export declare const MiraeInput: React.FC<MSInputProps>;

package/dist/components/atoms/MSSekuritasLogo.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { BoxProps } from '@mui/material/Box';
+import { TooltipProps } from '@mui/material/Tooltip';
+export type MSSekuritasLogoVariant = 'horizontal' | 'stacked' | 'symbol' | 'mstock';
+export interface MSSekuritasLogoProps extends BoxProps {
+    variant?: MSSekuritasLogoVariant;
+    showOjkBadge?: boolean;
+    height?: number | string;
+    /**
+     * Menampilkan info window spesifikasi & tipe varian saat mouse diarahkan (hover).
+     * Default: true
+     */
+    showVariantInfo?: boolean;
+    /**
+     * Posisi penempatan info window tooltip.
+     * Default: 'bottom'
+     */
+    infoPlacement?: TooltipProps['placement'];
+    /**
+     * Konten custom info window (opsional override).
+     */
+    infoContent?: React.ReactNode;
+}
+export type MiraeSekuritasLogoProps = MSSekuritasLogoProps;
+export declare const MSSekuritasLogo: React.ForwardRefExoticComponent<Omit<MSSekuritasLogoProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const MiraeSekuritasLogo: React.ForwardRefExoticComponent<Omit<MSSekuritasLogoProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/atoms/MSTooltip.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { TooltipProps } from '@mui/material/Tooltip';
+export type MSTooltipProps = TooltipProps;
+export type MiraeTooltipProps = MSTooltipProps;
+export declare const MSTooltip: React.FC<MSTooltipProps>;
+export declare const MiraeTooltip: React.FC<TooltipProps>;

package/dist/components/atoms/MSTypography.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { TypographyProps } from '@mui/material/Typography';
+export type SpoqaWeight = 'thin' | 'light' | 'regular' | 'medium' | 'bold';
+export type MSTextColor = 'default' | 'orange' | 'blue' | 'muted' | 'white';
+export type MiraeTextColor = MSTextColor;
+export interface MSTypographyProps extends TypographyProps {
+    weight?: SpoqaWeight;
+    textColor?: MSTextColor;
+}
+export type MiraeTypographyProps = MSTypographyProps;
+export declare const MSTypography: React.FC<MSTypographyProps>;
+export declare const MiraeTypography: React.FC<MSTypographyProps>;

package/dist/components/atoms/index.d.ts

@@ -0,0 +1,9 @@
+export * from './MSButton';
+export * from './MSTypography';
+export * from './MSBadge';
+export * from './MSChip';
+export * from './MSInput';
+export * from './MSAvatar';
+export * from './MSDivider';
+export * from './MSTooltip';
+export * from './MSSekuritasLogo';

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './atoms';
+export * from './molecules';
+export * from './templates';
+export * from './pages';

package/dist/components/molecules/MSAlertBanner.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export type MSAlertBannerType = 'orange' | 'blue' | 'success' | 'warning' | 'error';
+export type AlertBannerType = MSAlertBannerType;
+export interface MSAlertBannerProps {
+    type?: MSAlertBannerType;
+    title: string;
+    message?: string;
+    actionText?: string;
+    onAction?: () => void;
+    onClose?: () => void;
+}
+export type AlertBannerProps = MSAlertBannerProps;
+export declare const MSAlertBanner: React.FC<MSAlertBannerProps>;
+export declare const AlertBanner: React.FC<MSAlertBannerProps>;

package/dist/components/molecules/MSCarousel.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+export interface MSCarouselSlide {
+    id: string;
+    badge?: string;
+    badgeVariant?: 'primary' | 'secondary' | 'success' | 'warning' | 'info';
+    title: string;
+    subtitle: string;
+    description: string;
+    ctaText?: string;
+    onCtaClick?: () => void;
+    secondaryCtaText?: string;
+    onSecondaryCtaClick?: () => void;
+    backgroundColor: string;
+    tag?: string;
+    metrics?: {
+        label: string;
+        value: string;
+    }[];
+}
+export type CarouselSlide = MSCarouselSlide;
+export interface MSCarouselProps {
+    slides?: MSCarouselSlide[];
+    autoplay?: boolean;
+    interval?: number;
+    height?: number | string | {
+        xs?: number | string;
+        sm?: number | string;
+        md?: number | string;
+        lg?: number | string;
+    };
+}
+export type MiraeCarouselProps = MSCarouselProps;
+export declare const MSCarousel: React.FC<MSCarouselProps>;
+export declare const defaultSlidesId: MSCarouselSlide[];
+export declare const defaultSlidesEn: MSCarouselSlide[];
+export declare const defaultSlides: MSCarouselSlide[];
+export declare const MiraeCarousel: React.FC<MSCarouselProps>;

package/dist/components/molecules/MSFormField.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { MSInputProps } from '../atoms/MSInput';
+export interface MSFormFieldProps extends MSInputProps {
+    label: string;
+    required?: boolean;
+    hint?: string;
+    errorMessage?: string;
+}
+export type FormFieldProps = MSFormFieldProps;
+export declare const MSFormField: React.FC<MSFormFieldProps>;
+export declare const FormField: React.FC<MSFormFieldProps>;

package/dist/components/molecules/MSSearchBar.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface MSSearchBarProps {
+    placeholder?: string;
+    categories?: string[];
+    onSearch?: (query: string, category?: string) => void;
+}
+export type SearchBarProps = MSSearchBarProps;
+export declare const MSSearchBar: React.FC<MSSearchBarProps>;
+export declare const SearchBar: React.FC<MSSearchBarProps>;

package/dist/components/molecules/MSTable.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface MSTableColumn<T> {
+    id: string;
+    label: string;
+    minWidth?: number;
+    align?: 'right' | 'left' | 'center';
+    sortable?: boolean;
+    render?: (row: T, index: number) => React.ReactNode;
+    sticky?: 'left' | 'right';
+}
+export type MiraeTableColumn<T> = MSTableColumn<T>;
+export interface MSTableProps<T> {
+    columns: MSTableColumn<T>[];
+    data: T[];
+    title?: string;
+    subtitle?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    selectable?: boolean;
+    pagination?: boolean;
+    rowsPerPageOptions?: number[];
+    defaultRowsPerPage?: number;
+    loading?: boolean;
+    emptyText?: string;
+    striped?: boolean;
+    headerVariant?: 'subtle' | 'blue' | 'dark';
+    onRowClick?: (row: T) => void;
+    actions?: React.ReactNode;
+    borderRadius?: number | string;
+    sx?: SxProps<Theme>;
+    stickyFirstColumn?: boolean;
+    stickyLastColumn?: boolean;
+    showColumnCount?: boolean;
+    minTableWidth?: number | string;
+}
+export type MiraeTableProps<T> = MSTableProps<T>;
+export declare function MSTable<T extends Record<string, any>>({ columns, data, title, subtitle, searchable, searchPlaceholder, selectable, pagination, rowsPerPageOptions, defaultRowsPerPage, loading, emptyText, striped, headerVariant, onRowClick, actions, borderRadius, sx, stickyFirstColumn, stickyLastColumn, showColumnCount, minTableWidth, }: MSTableProps<T>): React.JSX.Element;
+export declare const MiraeTable: typeof MSTable;

package/dist/components/molecules/index.d.ts

@@ -0,0 +1,5 @@
+export * from './MSSearchBar';
+export * from './MSFormField';
+export * from './MSAlertBanner';
+export * from './MSTable';
+export * from './MSCarousel';

package/dist/components/pages/LandingPage.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const LandingPage: React.FC;

package/dist/components/pages/demo/BackToTop.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface BackToTopProps {
+    threshold?: number;
+    color?: 'orange' | 'blue';
+    size?: 'small' | 'medium' | 'large';
+    ariaLabel?: string;
+}
+export declare const BackToTop: React.FC<BackToTopProps>;

package/dist/components/pages/demo/BrandNavbar.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface BrandNavbarProps {
+    currentTab: string;
+    onTabChange: (tab: string) => void;
+    onMobileMenuOpen?: () => void;
+}
+export declare const BrandNavbar: React.FC<BrandNavbarProps>;

package/dist/components/pages/demo/CodeSnippet.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface CodeSnippetProps {
+    code: string;
+    language?: string;
+    maxHeight?: number | string;
+}
+export declare const CodeSnippet: React.FC<CodeSnippetProps>;

package/dist/components/pages/demo/ColorPaletteShowcase.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const ColorPaletteShowcase: React.FC;

package/dist/components/pages/demo/ColorSwatch.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { ColorToken } from '../../../constants/colors';
+export interface ColorSwatchProps {
+    token: ColorToken;
+    isPrimary?: boolean;
+}
+export declare const ColorSwatch: React.FC<ColorSwatchProps>;

package/dist/components/pages/demo/ComponentDocumentation.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const ComponentDocumentation: React.FC;

package/dist/components/pages/demo/ComponentPlayground.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export declare const defaultPlaygroundScope: Record<string, any>;
+export interface ComponentPlaygroundProps {
+    initialCode: string;
+    isOpen: boolean;
+    onToggle: () => void;
+    title?: string;
+    scope?: Record<string, any>;
+    previewMinHeight?: number | string;
+}
+export declare const ComponentPlayground: React.FC<ComponentPlaygroundProps>;

package/dist/components/pages/demo/DesignSystemLayout.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface DesignSystemLayoutProps {
+    currentTab: string;
+    onTabChange: (tab: string) => void;
+    children: React.ReactNode;
+}
+export declare const DesignSystemLayout: React.FC<DesignSystemLayoutProps>;

package/dist/components/pages/demo/HeroSection.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export interface HeroSectionProps {
+    onNavigate: (tab: string) => void;
+}
+export declare const HeroSection: React.FC<HeroSectionProps>;

package/dist/components/pages/demo/IconShowcase.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const IconShowcase: React.FC;

package/dist/components/pages/demo/TypographyShowcase.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const TypographyShowcase: React.FC;

package/dist/components/pages/demo/UsageGuide.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const UsageGuide: React.FC;

package/dist/components/pages/demo/index.d.ts

@@ -0,0 +1,12 @@
+export * from './BackToTop';
+export * from './BrandNavbar';
+export * from './CodeSnippet';
+export * from './ColorSwatch';
+export * from './ComponentPlayground';
+export * from './DesignSystemLayout';
+export * from './HeroSection';
+export * from './UsageGuide';
+export * from './ColorPaletteShowcase';
+export * from './TypographyShowcase';
+export * from './IconShowcase';
+export * from './ComponentDocumentation';

package/dist/components/pages/index.d.ts

@@ -0,0 +1,2 @@
+export * from './LandingPage';
+export * from './demo';

package/dist/components/templates/index.d.ts

@@ -0,0 +1 @@
+export * from '../pages/demo/DesignSystemLayout';

package/dist/constants/colors.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Mirae Asset Brand Color Tokens
+ * Source: Mirae Asset Brand Guide - Color (2020.05)
+ */
+export interface ColorToken {
+    name: string;
+    role: string;
+    pantone?: string;
+    cmyk: string;
+    rgb: string;
+    hex: string;
+    contrastText: string;
+    description?: string;
+}
+export declare const primaryColors: Record<'orange' | 'blue', ColorToken>;
+export declare const graphIllustrationColors: ColorToken[];
+export declare const digitalBackgroundLineColors: ColorToken[];
+export declare const semanticColors: {
+    success: string;
+    successLight: string;
+    warning: string;
+    warningLight: string;
+    error: string;
+    errorLight: string;
+    info: string;
+    infoLight: string;
+};

package/dist/constants/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Mirae Asset Official Brand Design Constants
+ * Colors, Typography, Spacing, Radius & Elevation Specifications
+ */
+export * from './colors';
+export * from './typography';
+export * from './spacing';

package/dist/constants/spacing.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Spacing, Elevation & Radius Tokens
+ */
+export declare const spacing: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    xxxl: number;
+};
+export declare const radii: {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+};
+export declare const shadows: {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    orangeGlow: string;
+    blueGlow: string;
+};