Setup husky, eslint, prettier and commitlint (codse#75)

Author: sudhashrestha

.eslintignore

@@ -0,0 +1 @@
+/components/ui

.eslintrc.cjs

@@ -0,0 +1,23 @@
+module.exports = {
+  extends: [
+    "next",
+    "next/core-web-vitals",
+    "plugin:storybook/recommended",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
+  plugins: ["react", "@typescript-eslint"],
+  parserOptions: {
+    ecmaVersion: 2021,
+    sourceType: "module",
+  },
+  rules: {
+    "react/react-in-jsx-scope": "off",
+    quotes: ["error", "double"],
+    "@typescript-eslint/no-explicit-any": "warn",
+    "react/no-unknown-property": ["error", { ignore: ["vaul-drawer-wrapper"] }],
+    "@next/next/no-img-element": "off",
+  },
+};

.eslintrc.json

@@ -0,0 +1 @@
+npx --no-install commitlint --edit "$1"

.husky/commit-msg

@@ -0,0 +1 @@
+npx lint-staged

.husky/pre-commit

@@ -0,0 +1,11 @@
+module.exports = {
+  semi: true,
+  singleQuote: false,
+  printWidth: 100,
+  plugins: ["prettier-plugin-tailwindcss"],
+  tailwindConfig: "./tailwind.config.ts",
+  tailwindFunctions: [
+    "clsx",
+    "cn"
+  ]
+};

.prettierrc

@@ -25,8 +25,8 @@ export const Primary: Story = {
           <span>Priority notifications</span>
         </h4>
         <p className="break-words text-sm text-black/80">
-          You can set up priority notifications to be alerted on your phone or
-          computer for important emails.
+          You can set up priority notifications to be alerted on your phone or computer for
+          important emails.
         </p>
       </div>
     ),

.prettierrc.cjs

@@ -1,19 +1,8 @@
 import { cn } from "@/lib/utils";
 
-function BentoCard({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
+function BentoCard({ children, className }: { children: React.ReactNode; className?: string }) {
   return (
-    <div
-      className={cn(
-        "relative h-full w-full overflow-hidden rounded-2xl p-4",
-        className,
-      )}
-    >
+    <div className={cn("relative h-full w-full overflow-hidden rounded-2xl p-4", className)}>
       {children}
     </div>
   );

animata/background/moving-gradient.stories.tsx

@@ -1,19 +1,8 @@
 import { cn } from "@/lib/utils";
 
-function BentoCard({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
+function BentoCard({ children, className }: { children: React.ReactNode; className?: string }) {
   return (
-    <div
-      className={cn(
-        "relative h-full w-full overflow-hidden rounded-2xl p-4",
-        className,
-      )}
-    >
+    <div className={cn("relative h-full w-full overflow-hidden rounded-2xl p-4", className)}>
       {children}
     </div>
   );