CI/GitHub test workflow (#7)

.github/workflows/lint.yml

@@ -0,0 +1,37 @@
+name: Lint
+
+on:
+  pull_request:
+    branches:
+      - 'master'
+      - 'release'
+  push:
+    branches:
+      - 'master'
+      - 'release'
+
+permissions:
+  actions: write
+  contents: read
+
+jobs:
+  lint:
+    name: ⬣ ESLint
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.11.0
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.17.x
+
+      - name: 📥 Download deps
+        run: yarn install --frozen-lockfile
+
+      - name: 🔬 Lint
+        run: yarn lint

.github/workflows/test.yml

@@ -0,0 +1,37 @@
+name: Test
+
+on:
+  pull_request:
+    branches:
+      - 'master'
+      - 'release'
+  push:
+    branches:
+      - 'master'
+      - 'release'
+
+permissions:
+  actions: write
+  contents: read
+
+jobs:
+  unit-test:
+    name: ʦ Vitest
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.11.0
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.17.x
+
+      - name: 📥 Download deps
+        run: yarn install --frozen-lockfile
+
+      - name: 🔎 Type check
+        run: yarn test

.husky/pre-commit

@@ -0,0 +1,3 @@
+yarn test
+
+yarn format

apps/docs/src/components/examples/PhoneInput/Default.tsx

@@ -1,17 +1,17 @@
-import { useState } from 'react';
+import { useState } from "react";
 import {
   PhoneInput,
   PhoneInputChangeMetadata,
-} from '@react-awesome/phone-input';
+} from "@react-awesome/phone-input";
 
 export const DefaultPhoneInput = (props: any) => {
   const [value, setValue] = useState<PhoneInputChangeMetadata>({
     isPossible: false,
     isValid: false,
-    e164Value: '',
-    country: 'VN',
-    phoneCode: '84',
-    formattedValue: '',
+    e164Value: "",
+    country: "VN",
+    phoneCode: "84",
+    formattedValue: "",
     isSupported: true,
   });
 

apps/docs/src/components/examples/PhoneInput/SupportCountry.tsx

@@ -1,17 +1,17 @@
-import { useState } from 'react';
+import { useState } from "react";
 import {
   PhoneInput,
   PhoneInputChangeMetadata,
-} from '@react-awesome/phone-input';
+} from "@react-awesome/phone-input";
 
 export const SupportCountryPhoneInput = () => {
   const [value, setValue] = useState<PhoneInputChangeMetadata>({
     isPossible: false,
     isValid: false,
-    e164Value: '',
-    country: 'VN',
-    phoneCode: '84',
-    formattedValue: '',
+    e164Value: "",
+    country: "VN",
+    phoneCode: "84",
+    formattedValue: "",
     isSupported: true,
   });
 
@@ -24,7 +24,7 @@ export const SupportCountryPhoneInput = () => {
         }}
         value={value?.formattedValue}
         defaultCountry={value.country}
-        supportedCountries={['US', 'CA', 'VN']}
+        supportedCountries={["US", "CA", "VN"]}
       />
 
       <h3 className="mt-3 font-bold text-xl underline underline-offset-4">

apps/docs/src/components/examples/index.ts

@@ -1,2 +1,2 @@
-export * from './PhoneInput/Default';
-export * from './PhoneInput/SupportCountry';
+export * from "./PhoneInput/Default";
+export * from "./PhoneInput/SupportCountry";

apps/docs/src/components/pages/LandingPage.tsx

@@ -1,5 +1,5 @@
-import Link from 'next/link';
-import { ArrowRight, Code2, Rabbit, Feather, Server } from 'lucide-react';
+import Link from "next/link";
+import { ArrowRight, Code2, Rabbit, Feather, Server } from "lucide-react";
 
 const Card = ({
   title,
@@ -27,10 +27,10 @@ export const LandingPage = () => {
       <div className="mx-auto max-w-[900px] px-4 sm:px-8 xl:px-0 relative z-1">
         <div className="text-center">
           <h1 className="mb-6 text-4xl font-extrabold sm:text-6xl xl:text-heading-1">
-            A collection of{' '}
+            A collection of{" "}
             <span className="bg-gradient-to-r from-blue-600 via-green-500 to-indigo-400 inline-block text-transparent bg-clip-text">
               Awesome
-            </span>{' '}
+            </span>{" "}
             React components and hooks.
           </h1>
           <p className="max-w-[600px] mx-auto mb-9 md:text-lg">

apps/docs/theme.config.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { useRouter } from 'next/router';
-import { useConfig } from 'nextra-theme-docs';
+import React from "react";
+import { useRouter } from "next/router";
+import { useConfig } from "nextra-theme-docs";
 
 const logo = (
   <svg
@@ -35,21 +35,21 @@ const logo = (
 export default {
   logo,
   project: {
-    link: 'https://github.com/trinhthinh388/react-awesome-components',
+    link: "https://github.com/trinhthinh388/react-awesome-components",
   },
   docsRepositoryBase:
-    'https://github.com/trinhthinh388/react-awesome-components/blob/master/apps/docs',
+    "https://github.com/trinhthinh388/react-awesome-components/blob/master/apps/docs",
   useNextSeoProps() {
     const { asPath } = useRouter();
-    if (asPath !== '/') {
+    if (asPath !== "/") {
       return {
-        titleTemplate: '%s – React Awesome Components',
+        titleTemplate: "%s – React Awesome Components",
       };
     }
   },
   sidebar: {
     titleComponent({ title, type }) {
-      if (type === 'separator') {
+      if (type === "separator") {
         return <span className="cursor-default">{title}</span>;
       }
       return <>{title}</>;
@@ -89,7 +89,7 @@ export default {
   },
   head: function useHead() {
     const { title } = useConfig();
-    const socialCard = 'https://react-awesome-components.vercel.app/og.svg';
+    const socialCard = "https://react-awesome-components.vercel.app/og.svg";
 
     return (
       <>
@@ -119,8 +119,8 @@ export default {
           name="og:title"
           content={
             title
-              ? title + ' – React Awesome Components'
-              : 'React Awesome Components'
+              ? title + " – React Awesome Components"
+              : "React Awesome Components"
           }
         />
         <meta name="og:image" content={socialCard} />

package.json

@@ -6,15 +6,18 @@
     "dev": "turbo dev",
     "lint": "turbo lint",
     "test": "turbo test",
+    "typecheck": "turbo typecheck",
     "clean": "turbo clean && rimraf node_modules",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "format:fix": "prettier --write \"**/*.{ts,tsx,md}\"",
     "changeset": "changeset",
     "version-packages": "changeset version",
     "release": "turbo build --filter=docs^... && changeset publish",
     "docs": "yarn workspace @react-awesome/docs",
     "phone-input": "yarn workspace @react-awesome/phone-input",
     "hooks": "yarn workspace @react-awesome/hooks",
-    "eslint": "yarn workspace @react-awesome/eslint-config"
+    "eslint": "yarn workspace @react-awesome/eslint-config",
+    "prepare": "husky"
   },
   "devDependencies": {
     "@changesets/cli": "2.26.2",
@@ -25,6 +28,7 @@
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.56.0",
+    "husky": "^9.0.6",
     "prettier": "^3.1.1",
     "rimraf": "^5.0.5",
     "tty-table": "^4.2.3",

packages/components/declaration.d.ts

@@ -1 +1 @@
-declare module '*.scss';
+declare module "*.scss";

packages/components/package.json

@@ -16,8 +16,7 @@
     "build": "vite --config ../../vite.config.ts build",
     "dev": "vite --watch --config ../../vite.config.ts build",
     "lint": "eslint \"src/**/*.ts*\"",
-    "clean": "rimraf .turbo && rimraf node_modules && rimraf dist",
-    "test": "vitest --config ../../vite.config.ts --coverage"
+    "clean": "rimraf .turbo && rimraf node_modules && rimraf dist"
   },
   "devDependencies": {
     "@react-awesome/eslint-config": "*",

packages/components/src/index.ts

@@ -1,2 +1,2 @@
-export * from '@react-awesome/phone-input'
-export * from '@react-awesome/hooks'
+export * from "@react-awesome/phone-input";
+export * from "@react-awesome/hooks";

packages/hooks/package.json

@@ -16,7 +16,8 @@
     "build": "vite --config ../../vite.config.ts build",
     "dev": "vite --watch --config ../../vite.config.ts build",
     "lint": "eslint \"src/**/*.ts*\"",
-    "clean": "rimraf .turbo && rimraf node_modules && rimraf dist"
+    "clean": "rimraf .turbo && rimraf node_modules && rimraf dist",
+    "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
     "@react-awesome/eslint-config": "*",

packages/hooks/src/index.ts

@@ -1,5 +1,5 @@
-export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
-export { usePrevious } from './usePrevious/usePrevious';
-export { useSelectionRange } from './useSelectionRange/useSelectionRange';
-export { usePreserveInputCaretPosition } from './usePreserveInputCaretPosition/usePreserveInputCaretPosition';
-export { useClickOutside } from './useClickOutside/useClickOutside';
+export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect";
+export { usePrevious } from "./usePrevious/usePrevious";
+export { useSelectionRange } from "./useSelectionRange/useSelectionRange";
+export { usePreserveInputCaretPosition } from "./usePreserveInputCaretPosition/usePreserveInputCaretPosition";
+export { useClickOutside } from "./useClickOutside/useClickOutside";

packages/hooks/src/useClickOutside/useClickOutside.tsx

@@ -1,8 +1,8 @@
-import { useEffect } from 'react';
+import { useEffect } from "react";
 
 export const useClickOutside = (
   el: HTMLElement | null,
-  callback?: (event: MouseEvent) => any
+  callback?: (event: MouseEvent) => any,
 ) => {
   useEffect(() => {
     if (!callback) return;
@@ -11,10 +11,10 @@ export const useClickOutside = (
         callback(e);
       }
     };
-    window.document.addEventListener('click', check);
+    window.document.addEventListener("click", check);
 
     return () => {
-      window.document.removeEventListener('click', check);
+      window.document.removeEventListener("click", check);
     };
   }, [callback, el]);
 };