Updated - v1.3.0

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## 🎉 Release - v1 🎉
 
+## [v1.3.0] - `2024-04-18`
+
+- Added supported `dayjs/locale/th` as default
+- Added supported `dayjs/plugin/buddhistEra` as default
+- Updated dependencies
+- Updated `example/with-vite-andt-tailwind`'s deps, source code, and also bumps the vite major version
+
 ## [v1.2.1] - `2024-02-20`
 
 ### Edited

example/with-vite-antd-tailwind/package.json

@@ -13,20 +13,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.0.0",
-    "@vercel/analytics": "^0.1.11",
-    "antd": "^5.1.5",
-    "autoprefixer": "^10.4.13",
-    "postcss": "^8.4.21",
+    "@ant-design/icons": "^5.3.6",
+    "@vercel/analytics": "^1.2.2",
+    "antd": "^5.16.2",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
     "react": "link:../../node_modules/react",
     "react-dom": "link:../../node_modules/react-dom",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.4.3",
     "thaidatepicker-react": "link:../.."
   },
   "devDependencies": {
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react": "^3.0.1",
-    "vite": "^4.0.5"
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.2.9"
   }
 }

example/with-vite-antd-tailwind/src/App.jsx

@@ -1,10 +1,11 @@
-import { Layout, Menu } from "antd";
+import { Layout, Menu, Tag } from "antd";
 import React, { useEffect, useState } from "react";
 
+import Donate from "components/Donate";
 import Header from "components/Header";
 import Loading from "components/Loading";
 import { GetHash, ReplaceHash } from "utils/function";
-import "./App.css";
+import "./App.css?inline";
 
 const AdvancedGuide = React.lazy(() => import("components/AdvancedGuide.jsx"));
 const Basic = React.lazy(() => import("components/Basic.jsx"));
@@ -29,12 +30,24 @@ const items = [
     key: "advanced",
     label: "Advanced Guide",
   },
+  {
+    key: "donate",
+    label: (
+      <div className="flex justify-between">
+        <span>Donate</span>
+        <Tag className="h-fit self-center leading-snug" color="#ff0000">
+          NEW
+        </Tag>
+      </div>
+    ),
+  },
 ];
 const renderItem = {
   get_started: <GetStarted />,
   basic: <Basic />,
   form: <EasyForm />,
   advanced: <AdvancedGuide />,
+  donate: <Donate />,
 };
 
 const App = () => {

example/with-vite-antd-tailwind/src/components/AdvancedGuide.jsx

@@ -58,10 +58,10 @@ const AdvancedGuide = () => {
   onChange={(christDate) => setValue(christDate)}
   clearable={false}
   reactDatePickerProps={{
-    customInput: <input />
+    customInput: <input className="w-full bg-blue-300" />, // <-- ✅ className can be used on this line
   }}
   inputProps={{
-    className: "w-full bg-red-300"
+    className: "bg-red-300",                               // <-- ❌ this is not working anymore
   }}
 />`}
       >
@@ -70,10 +70,10 @@ const AdvancedGuide = () => {
           onChange={(christDate) => setValue(christDate)}
           clearable={false}
           reactDatePickerProps={{
-            customInput: <input />, // you need to place the `className` alongside the <input /> on this line
+            customInput: <input className="w-full bg-blue-300" />, // className can be used on this line
           }}
           inputProps={{
-            className: "w-full bg-red-300",
+            className: "bg-red-300", // <-- ❌ this is not working anymore
           }}
         />
       </RenderWithCode>
@@ -127,25 +127,25 @@ const AdvancedGuide = () => {
   value={value}
   onChange={(christDate) => setValue(christDate)}
   inputProps={{
-    displayFormat: "D MMM YY",   // << using this instead!
+    displayFormat: "D MMM YY",   // <-- ✅ using this instead!
     className: "w-full",
   }}
-  dateFormat="yyyy_MM_dd"        // this won't work anymore!
+  dateFormat="yyyy_MM_dd"        // <-- ❌ this won't work anymore!
   reactDatePickerProps={{
-    dateFormat: "yyyy MM dd",    // and this won't work anymore too!
+    dateFormat: "yyyy MM dd",    // <-- ❌ and this won't work anymore too!
   }}
 />`}
       >
         <ThaiDatePicker
           value={value}
           onChange={(christDate) => setValue(christDate)}
           inputProps={{
-            displayFormat: "D MMM YY", // << using this instead!
+            displayFormat: "D MMM YY", // <-- ✅ using this instead!
             className: "w-full",
           }}
-          dateFormat="yyyy_MM_dd" // this won't work anymore!
+          dateFormat="yyyy_MM_dd" // <-- ❌ this won't work anymore!
           reactDatePickerProps={{
-            dateFormat: "yyyy MM dd", // and this won't work anymore too!
+            dateFormat: "yyyy MM dd", // <-- ❌ and this won't work anymore too!
           }}
         />
       </RenderWithCode>

example/with-vite-antd-tailwind/src/components/Basic.jsx

@@ -1,6 +1,7 @@
 import { Typography } from "antd";
 import React, { useState } from "react";
 import { ThaiDatePicker } from "thaidatepicker-react";
+import { basicSrcCode } from "utils/constant";
 
 const Basic = () => {
   const [selectedDate, setSelectedDate] = useState();
@@ -36,6 +37,10 @@ const Basic = () => {
           </div>
         </div>
       </div>
+      <Typography.Title level={4}>Source Code </Typography.Title>
+      <Typography.Paragraph copyable={{ text: basicSrcCode }}>
+        <pre>{basicSrcCode}</pre>
+      </Typography.Paragraph>
     </>
   );
 };

example/with-vite-antd-tailwind/src/components/Donate.jsx

@@ -0,0 +1,28 @@
+import { Image, Typography } from "antd";
+import React from "react";
+
+const Donate = () => {
+  return (
+    <>
+      <Typography.Title level={4}>Donate</Typography.Title>
+      <div className="flex justify-between gap-2">
+        <div>
+          <Typography.Paragraph>
+            Simple ways to make the world a better place. Please checkout to
+            another site.
+          </Typography.Paragraph>
+          <Typography.Link
+            href="https://resume-watsize.vercel.app/donate"
+            target="_blank"
+            rel="noopener"
+          >
+            https://resume-watsize.vercel.app/donate
+          </Typography.Link>
+        </div>
+        <Image src="/donate.png" alt="donate" />
+      </div>
+    </>
+  );
+};
+
+export default Donate;

example/with-vite-antd-tailwind/src/components/EasyForm.jsx

@@ -1,8 +1,7 @@
 import { Button, Form, Input, Typography } from "antd";
 import React, { useCallback } from "react";
 import { ThaiDatePicker } from "thaidatepicker-react";
-
-import "./CustomThaiDatePicker.css";
+import { easySrcCode } from "utils/constant";
 
 const EasyForm = () => {
   const handleValuesChange = useCallback((values) => {
@@ -15,7 +14,7 @@ const EasyForm = () => {
   return (
     <div>
       <Typography.Title level={4}>
-        Ant Design Form with thai-datepicker
+        Ant Design Form with thaidatepicker-react
       </Typography.Title>
       <Form
         name="EasyForm"
@@ -38,7 +37,13 @@ const EasyForm = () => {
         </Form.Item>
 
         <Form.Item label="Date of birth" name="date_of_birth">
-          <ThaiDatePicker placeholder="I'm here 👋" customInput={Input} />
+          <ThaiDatePicker
+            placeholder="I'm here 👋"
+            customInput={Input}
+            inputProps={{
+              displayFormat: "D MMMM YYYY", // also works with "D MMMM BBBB"
+            }}
+          />
         </Form.Item>
 
         <Typography.Title level={5}>Address</Typography.Title>
@@ -67,6 +72,11 @@ const EasyForm = () => {
           </Button>
         </Form.Item>
       </Form>
+
+      <Typography.Title level={4}>Source Code</Typography.Title>
+      <Typography.Paragraph copyable={{ text: easySrcCode }}>
+        <pre>{easySrcCode}</pre>
+      </Typography.Paragraph>
     </div>
   );
 };

example/with-vite-antd-tailwind/src/components/GetStarted.jsx

@@ -50,22 +50,21 @@ const GetStarted = () => {
             reactDatePickerProps={{ popperClassName: "!z-10" }} // which used temporary for displaying over the Properties table
           />
           <span className="italic text-black/40">
-            Note: just for showcase the calendar
+            Note: just for showcase the calendar (unable to select)
           </span>
         </>
       ),
     },
     {
       title: "Properties",
       content: (
-        <div className="overflow-scroll">
+        <>
           <Table
             dataSource={propsDataSource}
             columns={propsColumns}
             pagination={{ pageSize: 100, hideOnSinglePage: true }}
-            scroll={{ x: true }}
           />
-        </div>
+        </>
       ),
     },
   ];

example/with-vite-antd-tailwind/src/utils/constant.js

@@ -199,3 +199,11 @@ const App = () => {
   };
   
   export default App;`;
+
+export const easySrcCode = `<ThaiDatePicker
+  placeholder="I'm here 👋"
+  customInput={Input}
+  inputProps={{
+    displayFormat: "D MMMM YYYY", // also works with "D MMMM BBBB"
+  }}
+/>`;