feat: add vietnamese

corca-ai · Jul 5, 2024 · 161d1a9 · 161d1a9
1 parent 34e944c
commit 161d1a9
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 26 deletions.
diff --git a/src/components/DatePicker/DateTime/CustomTimeInput.tsx b/src/components/DatePicker/DateTime/CustomTimeInput.tsx
@@ -6,7 +6,7 @@ import { Button } from '../../Button';
 import { B3 } from '../../Text';
 import { color, typography } from '../../styles';
 import { AMPM_FORMAT } from '../constant';
-import { SupportLocale } from 'src/utils';
+import { DatePickerLocale } from 'src/utils';
 
 export interface Time {
   hh: string;
@@ -22,7 +22,7 @@ export enum AMPM {
 
 export interface CustomTimeInputProps {
   newDate: Date;
-  language: SupportLocale;
+  language: DatePickerLocale;
   onConfirm: () => void;
   setNewDate: (date: Date) => void;
 }
@@ -93,7 +93,7 @@ export const CustomTimeInput = ({
             onChangeDate(time);
           }}
         >
-          <B3> {AMPM_FORMAT[language][inputValue.amPm]}</B3>
+          <B3>{AMPM_FORMAT[language][inputValue.amPm]}</B3>
         </AmPmButton>
         <TimeInputWrapper>
           <TimeInput

diff --git a/src/components/DatePicker/DateTime/index.tsx b/src/components/DatePicker/DateTime/index.tsx
@@ -12,7 +12,7 @@ import {
   HeaderText,
   HeaderWrapper,
 } from '../SingleDate';
-import { LOCALE, MONTHS } from '../constant';
+import { MONTHS } from '../constant';
 import { CustomTimeInput } from './CustomTimeInput';
 export * from './CustomTimeInput';
 
@@ -33,7 +33,7 @@ export function DateTime({
       <DatePicker
         {...props}
         ref={datePickerRef}
-        locale={LOCALE[language]}
+        locale={language}
         selected={newDate}
         onChange={date => setNewDate(date)}
         required={inputProps?.required}

diff --git a/src/components/DatePicker/SingleDate/index.tsx b/src/components/DatePicker/SingleDate/index.tsx
@@ -4,18 +4,18 @@ import DatePicker, { type ReactDatePickerProps } from 'react-datepicker';
 import styled from '@emotion/styled';
 
 import { formatDateByLanguage } from '../../../utils/date';
-import { type SupportLocale } from '../../../utils/types/locale.types';
+import { type DatePickerLocale } from '../../../utils/types/locale.types';
 import Icon from '../../Icon';
 import { DateInput, type DateInputProps } from '../../Input/DateInput';
 import { color } from '../../styles';
-import { LOCALE, MONTHS } from '../constant';
+import { MONTHS } from '../constant';
 
 export interface DatePickerProps extends ReactDatePickerProps {
   selected: Date | null;
   onChange: (date: Date) => void;
-  language: SupportLocale;
+  language: DatePickerLocale;
   inputProps?: Omit<DateInputProps, 'disabled'>;
-  dateFormatter?: (date: Date, language: SupportLocale) => string;
+  dateFormatter?: (date: Date, language: DatePickerLocale) => string;
 }
 
 export function SingleDate({
@@ -33,7 +33,7 @@ export function SingleDate({
       <DatePicker
         {...props}
         ref={datePickerRef}
-        locale={LOCALE[language]}
+        locale={language}
         selected={selected}
         required={inputProps?.required}
         onChange={date => {

diff --git a/src/components/DatePicker/constant.ts b/src/components/DatePicker/constant.ts
@@ -1,18 +1,7 @@
-import en from 'date-fns/locale/en-US';
-import ko from 'date-fns/locale/ko';
-import vi from 'date-fns/locale/vi';
-
+import { type DatePickerLocale } from '../../utils/types/locale.types';
 import { AMPM } from './DateTime/CustomTimeInput';
-import { type SupportLocale } from '../../utils/types/locale.types';
-import { Locale } from 'date-fns';
-
-export const LOCALE: Record<SupportLocale, Locale> = {
-  ko,
-  en,
-  vn: vi,
-};
 
-export const AMPM_FORMAT: Record<SupportLocale, Record<AMPM, AMPM | '오전' | '오후'>> = {
+export const AMPM_FORMAT: Record<DatePickerLocale, Record<AMPM, AMPM | '오전' | '오후'>> = {
   ko: {
     AM: '오전',
     PM: '오후',
@@ -21,7 +10,7 @@ export const AMPM_FORMAT: Record<SupportLocale, Record<AMPM, AMPM | '오전' | '
     AM: AMPM.AM,
     PM: AMPM.PM,
   },
-  vn: {
+  vi: {
     AM: AMPM.AM,
     PM: AMPM.PM,
   },

diff --git a/src/components/DatePicker/index.tsx b/src/components/DatePicker/index.tsx
@@ -1,5 +1,6 @@
 import { DateTime, CustomTimeInputProps } from './DateTime';
 import { SingleDate, DatePickerProps, CustomInputProps } from './SingleDate';
+import { type DatePickerLocale } from '../../utils/types/locale.types';
 export * from './constant';
 
 /**
@@ -8,4 +9,4 @@ export * from './constant';
 const DatePicker = { Date: SingleDate, DateTime };
 export default DatePicker;
 
-export type { DatePickerProps, CustomInputProps, CustomTimeInputProps };
+export type { DatePickerProps, CustomInputProps, CustomTimeInputProps, DatePickerLocale };
diff --git a/src/stories/DatePicker.stories.tsx b/src/stories/DatePicker.stories.tsx
@@ -27,6 +27,7 @@ export default {
 export function SingleDate() {
   const [dateKo, setDateKo] = useState<Date | null>(null);
   const [dateEn, setDateEn] = useState<Date | null>(null);
+  const [dateVi, setDateVi] = useState<Date | null>(null);
   const [dateErr, setDateErr] = useState<Date | null>(null);
   return (
     <>
@@ -44,6 +45,13 @@ export function SingleDate() {
         language={'en'}
         inputProps={{ width: 400 }}
       />
+      Vietnamese
+      <DatePicker.Date
+        selected={dateEn}
+        onChange={setDateVi}
+        language={'vi'}
+        inputProps={{ width: 400 }}
+      />
       Disabled
       <DatePicker.Date
         selected={null}
@@ -68,6 +76,7 @@ export function SingleDate() {
 export function DateTime() {
   const [dateKo, setDateKo] = useState<Date | null>(null);
   const [dateEn, setDateEn] = useState<Date | null>(null);
+  const [dateVi, setDateVi] = useState<Date | null>(null);
   const [dateErr, setDateErr] = useState<Date | null>(null);
   return (
     <>
@@ -85,6 +94,13 @@ export function DateTime() {
         language={'en'}
         inputProps={{ width: 400 }}
       />
+      Vietnamese
+      <DatePicker.DateTime
+        selected={dateEn}
+        onChange={setDateVi}
+        language={'vi'}
+        inputProps={{ width: 400 }}
+      />
       Disabled
       <DatePicker.DateTime
         selected={null}

diff --git a/src/utils/types/locale.types.ts b/src/utils/types/locale.types.ts
@@ -1 +1,4 @@
-export type SupportLocale = 'ko' | 'en' | 'vn';
+/**
+ * this should follow the official country code
+ */
+export type DatePickerLocale = 'ko' | 'en' | 'vi';