Merge pull request #941 from 4Efficiency-Services/master

Author: Ilaiwi

CHANGELOG.md

@@ -14,7 +14,8 @@ Huge update made by @Remco4EF and @remcoblumink
  * Updates dependencies to latest versions
  * Updates react usage to 18+
  * REMOVED enzyme for tests --> testing does not work atm
-
+ * Added option to drag from external element to the timeline
+ * Added nextjs15 demo to test #939 and removed bundled stylesheet (added somewhere in 0.30.0 reworks...)
 
 ## 0.28.0
 

demo-next/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

demo-next/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

demo-next/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

demo-next/next.config.ts

@@ -0,0 +1,17 @@
+import type { NextConfig } from "next";
+import path from 'node:path'
+import { resolve } from 'path'
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  webpack: (config, { isServer }) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      'react-calendar-timeline/dist/Timeline.scss': resolve(__dirname, '../src/lib/Timeline.scss'),
+      'react-calendar-timeline/style.css': resolve(__dirname, '../dist/style.css'),
+      'react-calendar-timeline': resolve(__dirname, '../src/index.ts'),
+    }
+    return config
+  }
+}
+export default nextConfig;

demo-next/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "demo-next",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "15.0.3",
+    "randomcolor": "^0.6.2",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-calendar-timeline": "file:../dist/",
+    "react-dom": "19.0.0-rc-66855b96-20241106"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/randomcolor": "^0.5.9",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3",
+    "typescript": "^5"
+  }
+}

demo-next/public/file.svg

@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "React-calendar-timeline with Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+      </body>
+    </html>
+  );
+}

demo-next/public/globe.svg

@@ -0,0 +1,18 @@
+
+
+import dynamic from 'next/dynamic'
+//Either use default stylesheet
+import  "react-calendar-timeline/style.css"
+//Or create your own...
+//import '@/components/Timeline.scss'
+const MyTimeline = dynamic(()=>import ('@/components/My-Timeline'),{loading:()=><p>asdsda</p>})
+export default function Home() {
+  return (
+    <div >
+      <main >
+        <MyTimeline/>
+      </main>
+
+    </div>
+  );
+}

demo-next/public/next.svg

@@ -0,0 +1,36 @@
+'use client'
+
+import { CursorMarker, Timeline, TimelineMarkers, TodayMarker } from 'react-calendar-timeline'
+import dayjs from 'dayjs'
+import generateFakeData, { FakeDataItem, FakeGroup } from '@/components/generate-fake-data'
+import { useEffect, useState } from 'react'
+
+
+const MyTimeline = () => {
+  var minTime = dayjs().add(-6, 'months').hour(0).minute(0).second(0).millisecond(0).valueOf()
+  var maxTime = dayjs().add(6, 'months').hour(0).minute(0).second(0).millisecond(0).valueOf()
+  const [init, setInit] = useState<boolean>(false)
+  const [groups, setGroups] = useState<FakeGroup[]>([])
+  const [items, setItems] = useState<FakeDataItem[]>([])
+  useEffect(() => {
+    const { groups: gr, items: fakeItems } = generateFakeData(15, 100)
+    setItems(fakeItems.splice(0, Math.floor(fakeItems.length / 2)))
+
+    setGroups(gr)
+    setInit(true)
+  }, [])
+
+  return (init ?
+      <>
+        <Timeline groups={groups} items={items} visibleTimeStart={minTime} visibleTimeEnd={maxTime}>
+            <TimelineMarkers>
+              <TodayMarker />
+              <CursorMarker/>
+            </TimelineMarkers>
+        </Timeline>
+      </> : 'please wait...'
+  )
+}
+
+
+export default MyTimeline

demo-next/public/vercel.svg

@@ -0,0 +1,4 @@
+@use 'react-calendar-timeline/dist/Timeline.scss' as * with (
+$sidebar-background-color: #2196f3,
+//$weekend:#29b31a
+) ;

demo-next/public/window.svg

@@ -0,0 +1,93 @@
+import {faker} from '@faker-js/faker'
+import randomColor from 'randomcolor'
+import dayjs from 'dayjs'
+import {HTMLProps} from "react";
+import {TimelineGroupBase, TimelineItemBase} from "react-calendar-timeline";
+
+export type FakeGroup = TimelineGroupBase &  {
+  id:string;
+  label: string
+  bgColor: string
+}
+export type FakeDataItem = TimelineItemBase<number> & {
+  id: number
+  group: string
+  title: string
+  start_time: number
+  end_time: number
+  canMove?: boolean
+  canResize?: false | 'left' | 'right' | 'both'
+  className?: string
+  bgColor?:string,
+  selectedBgColor?:string
+  color?:string
+  itemProps?: HTMLProps<HTMLDivElement>
+}
+export default function (groupCount = 30, itemCount = 1000, daysInPast = 30) {
+  let randomSeed = Math.floor(Math.random() * 1000)
+  let groups :FakeGroup[]= []
+  for (let i = 0; i < groupCount; i++) {
+    groups.push({
+      id:`${i + 1}`,
+      title: faker.person.firstName(),
+      rightTitle: faker.person.lastName(),
+      label: `Label ${faker.person.firstName()}`,
+      bgColor: randomColor({luminosity: 'light', seed: randomSeed + i}),
+    })
+  }
+
+  let items:FakeDataItem[] = []
+  for (let i = 0; i < itemCount; i++) {
+    const startDate =
+      faker.date.recent({days: daysInPast}).valueOf() +
+      daysInPast * 0.3 * 86400 * 1000
+    const startValue =
+      Math.floor(dayjs(startDate).valueOf() / 10000000) * 10000000
+    const endValue = dayjs(
+      startDate + faker.number.int({min: 2, max: 20}) * 15 * 60 * 1000,
+    ).valueOf()
+
+    const itemProps: HTMLProps<HTMLDivElement> = { style: {}   }
+    // @ts-ignore
+    itemProps['data-tip']= faker.hacker.phrase();
+    items.push({
+      id: i,
+      group: faker.number.int({min: 1, max: groups.length}) + '',
+      title: faker.hacker.phrase(),
+      start_time: startValue,
+      end_time: endValue,
+      canMove: startValue > new Date().getTime(),
+      canResize:
+        startValue > new Date().getTime()
+          ? endValue > new Date().getTime()
+            ? 'both'
+            : 'left'
+          : endValue > new Date().getTime()
+            ? 'right'
+            : false,
+      className:
+        dayjs(startDate).day() === 6 || dayjs(startDate).day() === 0
+          ? 'item-weekend'
+          : '',
+      bgColor: randomColor({
+        luminosity: 'light',
+        seed: randomSeed + i,
+        format: 'rgba',
+        alpha: 0.6,
+      }),
+      selectedBgColor: randomColor({
+        luminosity: 'light',
+        seed: randomSeed + i,
+        format: 'rgba',
+        alpha: 1,
+      }),
+      color: randomColor({luminosity: 'dark', seed: randomSeed + i}),
+      // itemProps:itemProps
+
+    })
+  }
+
+  items = items.sort((a, b) => b.start_time - a.start_time)
+
+  return {groups, items}
+}

demo-next/src/app/favicon.ico

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "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": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

demo-next/src/app/fonts/GeistMonoVF.woff

@@ -1,30 +1,3 @@
-# React + TypeScript + Vite
+# React-Calendar-timeline Vite
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+These demos give some examples of how to use the library with Vite.

demo-next/src/app/fonts/GeistVF.woff

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
 
-    <title>Vite + React + TS</title>
+    <title>React-Calendar-Timeline Demo's</title>
   </head>
   <body>
     <div id="root"></div>