# shiftplanner

> A Shift planner package

Latest version **2.3.0** (published 2022-09-27) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install shiftplanner
pnpm add shiftplanner
yarn add shiftplanner
bun add shiftplanner
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.0 |
| Published | 2022-09-27 |
| First published | 2022-07-18 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 155.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Pawan Gujral |
| Maintainers | pawangujral |
| Keywords | react, typescript, npm |

## Links

- npm: https://www.npmjs.com/package/shiftplanner
- Repository: https://github.com/pawangujral/ShiftPlanner
- Homepage: https://github.com/pawangujral/ShiftPlanner#readme
- Issues: https://github.com/pawangujral/ShiftPlanner/issues
- npm.io page: https://npm.io/package/shiftplanner

## Dependencies (7)

- [express](https://npm.io/package/express.md) ^4.18.1
- [@mui/styles](https://npm.io/package/@mui/styles.md) ^5.8.6
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.8.6
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.9.3
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.9.3
- [react-json-pretty](https://npm.io/package/react-json-pretty.md) ^2.2.0
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^5.8.4

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.3.0 (latest) — 2022-09-27
- 2.2.1 — 2022-09-26
- 2.2.0 — 2022-09-26
- 2.1.0 — 2022-09-22
- 2.0.0 — 2022-08-08
- 1.6.3 — 2022-08-07
- 1.6.2 — 2022-08-07
- 1.6.1 — 2022-08-07
- 1.5.13 — 2022-08-07
- 1.6.0 — 2022-08-07
- 1.5.12 — 2022-08-07
- 1.5.11 — 2022-08-07
- 1.5.10 — 2022-08-07
- 1.5.9 — 2022-08-07
- 1.5.8 — 2022-08-07
- … 15 more at https://npm.io/package/shiftplanner/versions

## README

<h1 align="center"> 
  <br>
  Shift Planner
</h1>
 
<p align="center">
  <a href="https://www.npmjs.com/package/shiftplanner" rel="nofollow"><img alt="npm" src="https://img.shields.io/npm/v/shiftplanner"></a> 
</p>

<blockquote align="center">
  <em>Shift Planner</em> is a lightweight React library to plan your shifts/tasks & show them in nice & interactive mode.
</blockquote>

<p align="center"> 
  <a href="#getting-started">Getting started</a>&nbsp;|&nbsp;
  <a href="#theme">Theme</a>&nbsp;|&nbsp;
  <a href="#Contact">Contact</a>&nbsp;|&nbsp;
  <a href="#license">License</a>&nbsp;|&nbsp;
  <a href="https://shiftplanner-pawangujral.herokuapp.com/">Demo</a>
</p> 

## Getting started

Use the package manager yarn/npm to install ShiftPlanner.

```bash
$ npm install shiftplanner 
```

### Usage

#### ES6 modules

```javascript
import ShiftPlanner from 'shiftplanner'; 

 <ShiftPlanner plan={data} /> // Pass value in `plan` prop as per schema below.
```

You can pass following props to `ShiftPlanner` component

| Prop                | Type             | Default Value  | Required     | Description               |
| ------------------- | ---------------- | ---------------|--------------| --------------------------|
| plan                | `IPlanner`       | `undefined`    | true         | Plan values               |
| Actions             | `IPlanActions[]` | `undefined`    | false        | Actions for Shift         |
| handlePrevDateClick | `fn`             | `undefined`    | false        | Change date to previous   |
| handleNextDateClick | `fn`             | `undefined`    | false        | Change date to next       |
| handleAssigneeClick | `fn`             | `undefined`    | false        | Click `fn` for assignee   |
| theme               | `ThemeOptions`   | `defaultTheme` | false        | Customized `MUI` theme    |
| dark                | `boolean`        | `false`        | false        | enable dark theme         |


#### Schema

You can pass your values in `plan` prop. Shift Planner component required data in specific way.

FYI: `duration` of task/shift is figured out by `startTime` & `endTime`.

* `IPlanner`
```ts
{
    id: string; 
    metaData: IMetaData;
    shifts: IShift[];
}
```

* `IMetaData` // (holds basic information about planner)
```ts
{
    currentDate: string;  
    location: string; 
    status?: string; // status of shift
    rawData?: any; // Here you can send your original value as in stringify format & see in UI. 
}
```

* `IShift` // Collection of task Groups
```ts
{
    id: string; 
    name: string;
    startTime: string;
    endTime: string;
    createdAt: string;
    updatedAt: string;
    groups: IGroup[];
    assignee?: IAssignee[]; 
    isActionEnabled?: boolean;
}
```

* `IGroup` // Collection of Tasks
```ts
{
    id: string;  
    name: string;
    createdAt: string;
    updatedAt: string;
    tasks: ITask[];
}
```

* `ITask` // Collection of Tasks
```ts
{
    id: string; 
    name: string;
    startTime: string;
    endTime: string;
    assignee?: IAssignee[];
    createdAt?: string;
    updatedAt?: string;
    additionalInfo?: string; 
    isActionEnabled?: boolean;
}
```

* `IAssignee` // Action for assignee user
```ts
{
    id: string; 
    name: string;
    image: string; 
    description?: string;
}
```

* `IPlanActions` 
You can attach action to shift & task & even disable is specific shift/task. 
```ts
{
  shift: IAction[],
  task: IAction[], 
}
```

### Action Prop

* `IAction` 
```ts
{
  text: string;
  onClick: (event:  React.MouseEvent<HTMLElement>) => void;
}
```  

You can disable it for specific shift/task by setting boolean value for `isActionEnabled` in payload.

Task of shift/task is already set by data attribute `data-id`. You can access it by using this.

```ts
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
  const elem = event.target as HTMLElement; 
  console.log(elem.dataset.id) // This will be the ID of shift/task you have clicked.
};
```

## Config 
coming soon...

## Theme 
Package is build on material UI. You can customize theme as per your choice & pass as prop to component.
Feel free to use these tools.

- [MUI Theme](https://mui.com/material-ui/customization/theming/)
- [mui-theme-creator](https://bareynol.github.io/mui-theme-creator/)
- [Material palette generator](https://material.io/inline-tools/color/)

#### For SSR (e.g: `NextJs`) Project

You need to disable SSR for this component. There are many ways to disable CSS for Non-SSR Friendly component. Simple way is to use `react-no-ssr` package.

```bash
npm i --save react-no-ssr
npm i --save-dev @types/react-no-ssr // for typescript
```

```ts
import NoSSR from 'react-no-ssr';
import ShiftPlanner from 'shiftplanner';

 <NoSSR>
    <ShiftPlanner plan={data} />
</NoSSR>
```

## Contact
Created by [@Pawan Gujral](https://github.com/pawangujral) - feel free to contact me for any issue OR feedback.

## License 
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

---
_Source: https://npm.io/package/shiftplanner · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._