@imj_media/uicompos v0.0.61

React + TypeScript + 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 uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Usage example

import { Timeline } from '@imj_media/uicompos';
import '@imj_media/uicompos/styles.css';
import moment from 'moment';

function App() {
  const [count, setCount] = useState(0)
  
  const groups = [
    { id: 1, title: "group 1" },
    { id: 2, title: "group 2" },
    ];

    const items = [
    {
        id: 1,
        group: 1,
        title: "item 1",
        start_time: moment(),
        end_time: moment().add(1, "hour"),
    },
    {
        id: 2,
        group: 2,
        title: "item 2",
        start_time: moment().add(-0.5, "hour"),
        end_time: moment().add(0.5, "hour"),
    },
    {
        id: 3,
        group: 1,
        title: "item 3",
        start_time: moment().add(2, "hour"),
        end_time: moment().add(3, "hour"),
    },
    ];

  return (
      <Timeline
         defaultTimeStart={moment().add(-12, "hour")}
         defaultTimeEnd={moment().add(12, "hour")}
         groups={groups}
         items={items}
      />
  )
}

Documentation

For comprehensive information and detailed documentation on the react-calendar-timeline npm package, please visit the official npm page at https://www.npmjs.com/package/react-calendar-timeline.

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:

   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 and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list