Skip to content

Commit 724ea4c

Browse files
Mohamed7ImranMohamed7Imran
committed
851650-Committed Kanban in Nextjs
1 parent 9c77bc4 commit 724ea4c

File tree

14 files changed

+213
-2
lines changed

14 files changed

+213
-2
lines changed

‎.eslintrc.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎.gitignore‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env*.local
29+
30+
# vercel
31+
.vercel
32+
33+
# typescript
34+
*.tsbuildinfo
35+
next-env.d.ts

‎README.md‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,37 @@
1-
# syncfusion-react-kanban-component-in-nextjs
2-
This application demonstrates the usage of the Syncfusion React kanban component in Next.js
1+
# Getting Started with React UI Components using Next.js
2+
3+
This application demonstrates the usage of the Syncfusion React kanban component in Next.js.
4+
5+
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).
6+
7+
## Clone the repository
8+
9+
* To clone the sample repository locally, open the command prompt in the desired location and execute the following command.
10+
11+
```sh
12+
13+
git clone https://github.com/SyncfusionExamples/syncfusion-react-kanban-component-in-nextjs
14+
15+
```
16+
17+
* Navigate to the project directory:
18+
19+
```sh
20+
cd syncfusion-react-kanban-component-in-nextjs
21+
```
22+
23+
## Installing Packages
24+
25+
Install the required node modules by running the following command:
26+
27+
```sh
28+
npm install
29+
```
30+
31+
## Run the application
32+
33+
To run the application, use the following command:
34+
35+
```bash
36+
npm run dev
37+
```

‎app/favicon.ico‎

25.3 KB
Binary file not shown.

‎app/globals.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
2+
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
3+
@import "../node_modules/@syncfusion/ej2-layouts/styles/material.css";
4+
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
5+
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
6+
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
7+
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
8+
@import "../node_modules/@syncfusion/ej2-react-kanban/styles/material.css";

‎app/layout.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import './globals.css'
2+
import type { Metadata } from 'next'
3+
import { Inter } from 'next/font/google'
4+
5+
const inter = Inter({ subsets: ['latin'] })
6+
7+
export const metadata: Metadata = {
8+
title: 'Create Next App',
9+
description: 'Generated by create next app',
10+
}
11+
12+
export default function RootLayout({
13+
children,
14+
}: {
15+
children: React.ReactNode
16+
}) {
17+
return (
18+
<html lang="en">
19+
<body className={inter.className}>{children}</body>
20+
</html>
21+
)
22+
}

‎app/page.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
'use client'
2+
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
3+
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
4+
function App(this: any) {
5+
let data = new DataManager({
6+
url: 'https://ej2services.syncfusion.com/production/web-services/api/Kanban',
7+
adaptor: new ODataAdaptor
8+
});
9+
function DialogOpen(args: { cancel: boolean; }) {
10+
args.cancel = true;
11+
}
12+
return (<KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }} allowDragAndDrop={false} dialogOpen={DialogOpen.bind(this)}>
13+
<ColumnsDirective>
14+
<ColumnDirective headerText="To Do" keyField="Open"/>
15+
<ColumnDirective headerText="In Progress" keyField="InProgress"/>
16+
<ColumnDirective headerText="Testing" keyField="Testing"/>
17+
<ColumnDirective headerText="Done" keyField="Close"/>
18+
</ColumnsDirective>
19+
</KanbanComponent>);
20+
}
21+
export default App;

‎next.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {}
3+
4+
module.exports = nextConfig

‎package.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "ej2-nextjs-kanban",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-react-kanban": "^23.1.36",
13+
"next": "13.5.4",
14+
"react": "^18",
15+
"react-dom": "^18"
16+
},
17+
"devDependencies": {
18+
"@types/node": "^20",
19+
"@types/react": "^18",
20+
"@types/react-dom": "^18",
21+
"autoprefixer": "^10",
22+
"eslint": "^8",
23+
"eslint-config-next": "13.5.4",
24+
"postcss": "^8",
25+
"tailwindcss": "^3",
26+
"typescript": "^5"
27+
}
28+
}

‎postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

0 commit comments

Comments
 (0)