Merge pull request #84 from buildingwatsize/feature-migrate-ts

merge feature migrate ts

CHANGELOG.md

@@ -1,12 +1,25 @@
 # Changelog
 
+## 🎉 Release - v2 🎉
+
+## [v2.0.0] - `2024-09-09`
+
+### Added
+
+- `TypeScript` is now supported.
+- Added new props `noIntegratedStyle` which can be define to exclude integrated css
+
+### Updated
+
+- Updated dependencies
+
 ## 🎉 Release - v1 🎉
 
 ## [v1.3.6] - `2024-08-15`
 
 ### Updated
 
-- dependencies
+- Updated dependencies
 
 ## [v1.3.5] - `2024-06-21`
 
@@ -190,6 +203,7 @@ I have to skipping for the old versions which was unpublished once on first crea
 
 - Initialized Project
 
+[v2.0.0]: https://github.com/buildingwatsize/thaidatepicker-react/releases/tag/v2.0.0
 [v1.3.6]: https://github.com/buildingwatsize/thaidatepicker-react/releases/tag/v1.3.6
 [v1.3.5]: https://github.com/buildingwatsize/thaidatepicker-react/releases/tag/v1.3.5
 [v1.3.4]: https://github.com/buildingwatsize/thaidatepicker-react/releases/tag/v1.3.4

example/with-next-tailwind-ts/.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+*.DS_Store
+.next
+!.next/standalone
+!.next/static
+.gitignore
+README.md
+.dockerignore
+LICENSE
+.docker

example/with-next-tailwind-ts/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

example/with-next-tailwind-ts/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+git_auto.sh
+certificates

example/with-next-tailwind-ts/.prettierignore

@@ -0,0 +1 @@
+.next

example/with-next-tailwind-ts/.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "prettier-plugin-tailwindcss"
+  ]
+}

example/with-next-tailwind-ts/README.md

@@ -0,0 +1,132 @@
+# 🔺 next-tailwind-ts 🔺
+
+## 📘 About
+
+The NextJS template with TypeScript, and tailwindcss for scaffolding your project.
+
+## 📝 Table of Contents
+
+- [🔺 next-tailwind-ts 🔺](#-next-tailwind-ts-)
+  - [📘 About](#-about)
+  - [📝 Table of Contents](#-table-of-contents)
+  - [📦 Template contains](#-template-contains)
+  - [💎 Pre-loaded dependencies](#-pre-loaded-dependencies)
+  - [📝 Versions (Last 2 Minor Version)](#-versions-last-2-minor-version)
+    - [v0.3.0 - `2024-09-04`](#v030---2024-09-04)
+    - [v0.2.8 - `2024-08-15`](#v028---2024-08-15)
+    - [v0.2.7 - `2024-08-15`](#v027---2024-08-15)
+    - [v0.2.6 - `2024-04-18`](#v026---2024-04-18)
+    - [v0.2.5 - `2024-04-17`](#v025---2024-04-17)
+    - [v0.2.4 - `2024-02-21`](#v024---2024-02-21)
+    - [v0.2.3 - `2024-02-07`](#v023---2024-02-07)
+    - [v0.2.2 - `2024-02-06`](#v022---2024-02-06)
+    - [v0.2.1 - `2024-02-06`](#v021---2024-02-06)
+    - [v0.2.0 - `2024-01-30`](#v020---2024-01-30)
+    - [v0.1.0 - `2023-12-28`](#v010---2023-12-28)
+    - [Version History](#version-history)
+  - [📌 Get Started](#-get-started)
+    - [Want some more ?](#want-some-more-)
+
+## 📦 Template contains
+
+- [x] React 18.x
+- [x] NextJS 14.x
+- [x] TailwindCSS 3.x
+- [x] TypeScript 5.x
+
+## 💎 Pre-loaded dependencies
+
+```bash
+npx create-next-app@latest
+yarn add -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+## 📝 Versions (Last 2 Minor Version)
+
+### v0.3.0 - `2024-09-04`
+
+- Added supported cacheHandler with Redis for scalable infrastructure
+- Added Prettier configuration files
+- Updated Docker and dockerignore
+- Fixed known vulnerabilities via `npx yarn-audit-fix`
+
+### v0.2.8 - `2024-08-15`
+
+- Updated dependencies
+
+### v0.2.7 - `2024-08-15`
+
+- Updated dependencies
+
+### v0.2.6 - `2024-04-18`
+
+- Updated dependencies
+
+### v0.2.5 - `2024-04-17`
+
+- Updated dependencies
+
+### v0.2.4 - `2024-02-21`
+
+- Updated dependencies
+
+### v0.2.3 - `2024-02-07`
+
+- Updated default csp header
+- Adjusted compiler config for non-production env
+
+### v0.2.2 - `2024-02-06`
+
+- Added default CSP (pre-defined)
+
+### v0.2.1 - `2024-02-06`
+
+- Updated Dependencies
+- Added default next config
+
+### v0.2.0 - `2024-01-30`
+
+- Updated Next 14.1
+
+### v0.1.0 - `2023-12-28`
+
+- Initialized code structure with [Pantone Color of the year 2024](https://www.pantone.com/color-of-the-year/2024)
+- Icon from [Google Material Icons](https://iconbuddy.app/ic)
+- Palette from [coolors](https://coolors.co/ffbe98-d35269-c7efcf-826aed-0c1821)
+
+### Version History
+
+... [more](./CHANGELOG.md)
+
+## 📌 Get Started
+
+1. Initialized (don't forget to rename `my-project`)
+
+    ```bash
+    npx degit buildingwatsize/next-tailwind-ts#main my-project
+    ```
+
+2. Go to project folder
+
+    ```bash
+    cd my-project
+    ```
+
+3. Set up dependencies
+
+    ```bash
+    yarn
+    ```
+
+4. Run!
+
+    ```bash
+    yarn dev
+    ```
+
+### Want some more ?
+
+see [NextJS Doc](https://nextjs.org/docs)
+
+🌈 NextJS Template – Made with ❤️ by Watsize 🌈

example/with-next-tailwind-ts/next.config.js

@@ -0,0 +1,37 @@
+/** @type {import('next').NextConfig} */
+const cspHeader = `
+  script-src 'self' 'unsafe-eval' 'unsafe-inline';
+  style-src 'self' 'unsafe-inline';
+  img-src 'self' blob: data:;
+  font-src 'self';
+  object-src 'none';
+  base-uri 'self';
+  form-action 'self';
+  frame-ancestors 'none';
+`;
+// default-src 'self';
+const nextConfig = {
+  async headers() {
+    return [
+      {
+        source: "/(.*)",
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value: cspHeader.replace(/\n/g, ""),
+          },
+        ],
+      },
+    ];
+  },
+  compiler: {
+    // removeConsole: {
+    //   exclude: process.env.NODE_ENV === "production" ? ["error"] : [],
+    // }, // suppress logs on production
+    reactRemoveProperties: process.env.NODE_ENV === "production", // remove react properties on production (Included: ^data-test)
+  },
+  reactStrictMode: true,
+  output: "standalone",
+};
+
+module.exports = nextConfig;

example/with-next-tailwind-ts/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "next-tailwind-ts",
+  "version": "0.3.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "^14.2.5",
+    "react": "link:../../node_modules/react",
+    "react-datepicker": "^7.3.0",
+    "react-dom": "link:../../node_modules/react-dom",
+    "thaidatepicker-react": "file:../.."
+  },
+  "devDependencies": {
+    "@types/node": "^22.3.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/typescript-estree": "^8.1.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.2.5",
+    "postcss": "^8.4.41",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.6",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.5.4"
+  }
+}

example/with-next-tailwind-ts/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

example/with-next-tailwind-ts/src/app/globals.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  input {
+    @apply rounded-md border border-black ps-1;
+  }
+}

example/with-next-tailwind-ts/src/app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata, Viewport } from "next";
+import { IBM_Plex_Sans_Thai } from "next/font/google";
+
+import "./globals.css";
+
+const font = IBM_Plex_Sans_Thai({
+  weight: ["400", "600"],
+  subsets: ["thai", "latin"],
+});
+
+export const metadata: Metadata = {
+  title: "REPLACE_WITH_YOUR_APP_NAME",
+  description: "Powered by buildingwatsize/next-tailwind-ts",
+};
+
+export const viewport: Viewport = {
+  themeColor: "#FFBE98",
+};
+
+const RootLayout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return (
+    <html lang="en">
+      <body className={font.className}>
+        <main className="flex min-h-screen flex-col items-center justify-center p-8 sm:p-12">
+          {children}
+        </main>
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;

example/with-next-tailwind-ts/src/app/page.tsx

@@ -0,0 +1,12 @@
+import DateInput from "@/component/DateInput";
+
+const Page = () => {
+  return (
+    <div>
+      <h1>thaidatepicker-react + NextJS Demo</h1>
+      <DateInput />
+    </div>
+  );
+};
+
+export default Page;