diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8f322f0 --- /dev/null +++ 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 index 7869700..7054e03 100644 --- 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 +``` \ No newline at end of file diff --git a/app/favicon.ico b/app/favicon.ico new file mode 100644 index 0000000..718d6fe Binary files /dev/null and b/app/favicon.ico differ diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..64a99c6 --- /dev/null +++ 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"; \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..ae84562 --- /dev/null +++ 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 ( + + {children} + + ) +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..f816bf6 --- /dev/null +++ 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 ( + + + + + + + ); +} +export default App; \ No newline at end of file diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..767719f --- /dev/null +++ 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 new file mode 100644 index 0000000..ac5689d --- /dev/null +++ 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 new file mode 100644 index 0000000..33ad091 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/public/next.svg b/public/next.svg new file mode 100644 index 0000000..5174b28 --- /dev/null +++ b/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/vercel.svg b/public/vercel.svg new file mode 100644 index 0000000..d2f8422 --- /dev/null +++ b/public/vercel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 0000000..c7ead80 --- /dev/null +++ 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 new file mode 100644 index 0000000..c714696 --- /dev/null +++ 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"] +}