SyncfusionExamples · Mohamed7Imran · Jan 12, 2024 · Jan 12, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# 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
diff --git a/README.md b/README.md
@@ -1,2 +1,37 @@
-# syncfusion-react-kanban-component-in-nextjs
-This application demonstrates the usage of the Syncfusion React kanban component in Next.js
+# Getting Started with React UI Components using Next.js
+
+This application demonstrates the usage of the Syncfusion React kanban component in Next.js.
+
+To know how to configure the Syncfusion React kanban component in Next.js, refer to the [documentation](https://ej2.syncfusion.com/react/documentation/kanban/nextjs-getting-started).
+
+## Clone the repository
+
+* To clone the sample repository locally, open the command prompt in the desired location and execute the following command.
+
+```sh
+
+git clone https://github.com/SyncfusionExamples/syncfusion-react-kanban-component-in-nextjs
+
+```
+
+* Navigate to the project directory:
+
+```sh
+cd syncfusion-react-kanban-component-in-nextjs
+```
+
+## Installing Packages
+
+Install the required node modules by running the following command:
+
+```sh
+npm install
+```
+
+## Run the application
+
+To run the application, use the following command:
+
+```bash
+npm run dev
+```
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/globals.css b/app/globals.css
@@ -0,0 +1,8 @@
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-layouts/styles/material.css";
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-react-kanban/styles/material.css";
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,22 @@
+import './globals.css'
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,21 @@
+'use client'
+import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
+import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
+function App(this: any) {
+    let data = new DataManager({
+        url: 'https://ej2services.syncfusion.com/production/web-services/api/Kanban',
+        adaptor: new ODataAdaptor
+    });
+    function DialogOpen(args: { cancel: boolean; }) {
+        args.cancel = true;
+    }
+    return (<KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }} allowDragAndDrop={false} dialogOpen={DialogOpen.bind(this)}>
+        <ColumnsDirective>
+              <ColumnDirective headerText="To Do" keyField="Open"/>
+              <ColumnDirective headerText="In Progress" keyField="InProgress"/>
+              <ColumnDirective headerText="Testing" keyField="Testing"/>
+              <ColumnDirective headerText="Done" keyField="Close"/>
+            </ColumnsDirective>
+        </KanbanComponent>);
+}
+export default App;
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "ej2-nextjs-kanban",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@syncfusion/ej2-react-kanban": "^23.1.36",
+    "next": "13.5.4",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10",
+    "eslint": "^8",
+    "eslint-config-next": "13.5.4",
+    "postcss": "^8",
+    "tailwindcss": "^3",
+    "typescript": "^5"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/next.svg b/public/next.svg
diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -0,0 +1,20 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}