react-chrono - npm Package Compare versions

Comparing version 1.13.3 to 1.14.0

dist/components/timeline-elements/timeline-control/timeline-control.styles.d.ts

@@ -28,2 +28,3 @@ /// <reference types="react" />
 } & {
+    flip?: boolean | undefined;
     slideShowActive?: boolean | undefined;
@@ -30,0 +31,0 @@ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

dist/components/timeline-horizontal/timeline-horizontal.styles.d.ts

@@ -5,2 +5,4 @@ /// <reference types="react" />
     as?: import("react").ElementType<any> | undefined;
+} & {
+    flipLayout?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
@@ -7,0 +9,0 @@ export declare const TimelineItemWrapper: import("@emotion/styled").StyledComponent<{

dist/components/timeline-vertical/timeline-vertical.styles.d.ts

@@ -13,2 +13,3 @@ /// <reference types="react" />
     cardHeight?: number | undefined;
+    cardLess?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -21,2 +22,3 @@ export declare const VerticalCircleWrapper: import("@emotion/styled").StyledComponent<{
     bg?: string | undefined;
+    cardLess?: boolean | undefined;
     width?: number | undefined;
@@ -29,3 +31,5 @@ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
     alternateCards?: boolean | undefined;
+    cardLess?: boolean | undefined;
     flip?: boolean | undefined;
+    height?: number | undefined;
     noTitle?: boolean | undefined;
@@ -32,0 +36,0 @@ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

dist/models/TimelineControlModel.d.ts

 import { Theme } from './Theme';
 export interface TimelineControlModel {
+    activeTimelineItem?: number;
     disableLeft: boolean;
@@ -4,0 +5,0 @@ disableRight: boolean;

dist/models/TimelineItemModel.d.ts

@@ -24,3 +24,3 @@ /// <reference types="react" />
 }
-export interface TimelineCardModel extends TimelineItemModel {
+export declare type TimelineCardModel = Pick<TimelineItemModel, 'id' | 'visible' | 'title' | 'active' | 'cardDetailedText' | 'cardSubtitle' | 'cardTitle' | 'media' | 'url'> & {
     autoScroll: ({ pointOffset, pointWidth, timelinePointHeight, contentHeight, }: Partial<Scroll>) => void;
@@ -38,2 +38,2 @@ cardHeight?: number;
     wrapperId: string;
-}
+};

dist/models/TimelineModel.d.ts

@@ -11,3 +11,3 @@ /// <reference types="react" />
  */
-export interface TimelineModel extends TimelineProps {
+export declare type TimelineModel = Pick<TimelineProps, 'items' | 'onItemSelected' | 'onRestartSlideshow' | 'theme' | 'slideShow' | 'onScrollEnd'> & {
     activeTimelineItem: number;
@@ -25,3 +25,3 @@ contentDetailsChildren?: React.ReactNode | React.ReactNode[];
     slideShowRunning?: boolean;
-}
+};
 /**
@@ -33,3 +33,3 @@ * Main props used by the host app.
  */
-export interface TimelineProps {
+export declare type TimelineProps = {
     activeItemIndex?: number;
@@ -39,2 +39,3 @@ allowDynamicUpdate?: boolean;
     cardHeight?: number;
+    cardLess?: boolean;
     cardPositionHorizontal?: 'TOP' | 'BOTTOM';
@@ -64,3 +65,3 @@ cardWidth?: number;
     useReadMore?: boolean;
-}
+};
 export declare type TimelineMode = 'VERTICAL' | 'HORIZONTAL' | 'VERTICAL_ALTERNATING';

dist/models/TimelineVerticalModel.d.ts

@@ -6,12 +6,6 @@ /// <reference types="react" />
 import { Media } from './TimelineMediaModel';
-import { TimelineMode } from './TimelineModel';
-interface CommonPropsModel {
+import { TimelineProps } from './TimelineModel';
+export declare type Props = Pick<TimelineProps, 'flipLayout' | 'theme' | 'mode' | 'timelineCircleDimension' | 'lineWidth' | 'cardHeight' | 'enableOutline' | 'disableClickOnCircle' | 'cardLess'> & {
     alternateCards?: boolean;
-    cardHeight?: number;
-    disableClickOnCircle?: boolean;
-    enableOutline?: boolean;
-    flipLayout?: boolean;
     hasFocus?: boolean;
-    lineWidth?: number;
-    mode?: TimelineMode;
     onClick: (id?: string) => void;
@@ -22,14 +16,13 @@ onElapsed?: (id?: string) => void;
     theme?: Theme;
-    timelineCircleDimension?: number;
-}
-interface CommonVerticalModel extends CommonPropsModel {
+};
+declare type VerticalModel = Pick<Props, 'alternateCards' | 'hasFocus' | 'onClick' | 'onElapsed' | 'slideShowRunning' | 'theme' | 'mode' | 'timelineCircleDimension' | 'lineWidth' | 'disableClickOnCircle' | 'cardLess'> & {
     active?: boolean;
     className: string;
     id?: string;
-}
-export interface VerticalCircleModel extends CommonVerticalModel {
+};
+export interface VerticalCircleModel extends VerticalModel {
     iconChild?: React.ReactNode;
     onActive: (pointOffset: number) => void;
 }
-export interface VerticalItemModel extends CommonVerticalModel {
+export interface VerticalItemModel extends VerticalModel {
     cardDetailedText?: string | string[];
@@ -48,3 +41,3 @@ cardSubtitle?: string;
 }
-export interface TimelineVerticalModel extends CommonPropsModel {
+export declare type TimelineVerticalModel = Pick<Props, 'alternateCards' | 'enableOutline' | 'mode' | 'onClick' | 'onElapsed' | 'slideShowRunning' | 'theme' | 'hasFocus' | 'cardLess'> & {
     activeTimelineItem: number;
@@ -57,3 +50,3 @@ autoScroll: (s: Partial<Scroll>) => void;
     onOutlineSelection?: (index: number) => void;
-}
+};
 export {};

package.json

 {
   "name": "react-chrono",
-  "version": "1.13.3",
+  "version": "1.14.0",
   "license": "MIT",
@@ -45,3 +45,3 @@ "description": "A Modern Timeline component for React",
   "devDependencies": {
-    "@babel/core": "^7.17.0",
+    "@babel/core": "^7.17.5",
     "@babel/plugin-proposal-optional-chaining": "^7.16.7",
@@ -61,17 +61,17 @@ "@babel/plugin-transform-runtime": "^7.17.0",
     "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
     "@types/classnames": "^2.3.1",
     "@types/jest": "^27.4.0",
-    "@types/node": "^17.0.15",
+    "@types/node": "^17.0.18",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.10",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.10.2",
-    "@typescript-eslint/parser": "^5.10.2",
-    "@vitejs/plugin-react": "^1.1.4",
+    "@typescript-eslint/eslint-plugin": "^5.12.0",
+    "@typescript-eslint/parser": "^5.12.0",
+    "@vitejs/plugin-react": "^1.2.0",
     "babel-loader": "^8.2.3",
-    "cssnano": "^5.0.16",
-    "cypress": "^9.4.1",
-    "eslint": "^8.8.0",
+    "cssnano": "^5.0.17",
+    "cypress": "^9.5.0",
+    "eslint": "^8.9.0",
     "eslint-config-prettier": "^8.3.0",
@@ -84,7 +84,8 @@ "eslint-plugin-import": "^2.25.4",
     "husky": "^7.0.4",
-    "jest": "^27.4.7",
-    "lint-staged": "^12.3.3",
+    "jest": "^27.5.1",
+    "lint-staged": "^12.3.4",
     "postcss": "^8.4.6",
     "postcss-syntax": "^0.36.2",
     "prettier": "^2.5.1",
+    "pretty-quick": "^3.1.3",
     "react": "^17.0.2",
@@ -95,9 +96,9 @@ "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.67.0",
+    "rollup": "^2.67.3",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
-    "snyk": "^1.848.0",
+    "snyk": "^1.855.0",
     "start-server-and-test": "^1.14.0",
-    "stylelint": "^14.3.0",
+    "stylelint": "^14.5.1",
     "stylelint-config-recommended": "^6.0.0",
@@ -109,3 +110,3 @@ "stylelint-config-styled-components": "^0.1.1",
     "typescript": "^4.5.5",
-    "vite": "^2.7.13"
+    "vite": "^2.8.4"
   },
@@ -131,7 +132,2 @@ "peerDependencies": {
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "browserslist": [
@@ -143,2 +139,7 @@ "last 3 versions",
   ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  },
   "main": "dist/react-chrono.js",
@@ -145,0 +146,0 @@ "module": "dist/react-chrono.esm.js",

README.md

@@ -7,10 +7,10 @@ <div align="center">
 
-  [![Build Status](https://dev.azure.com/prabhummurthy/react-chrono/_apis/build/status/prabhuignoto.react-chrono?branchName=master)](https://dev.azure.com/prabhummurthy/react-chrono/_build/latest?definitionId=7&branchName=master)
-  [![DeepScan grade](https://deepscan.io/api/teams/10074/projects/13644/branches/234929/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=10074&pid=13644&bid=234929)
-  [![Codacy Badge](https://app.codacy.com/project/badge/Grade/f2e24a98defd4e4fa7f6f24d86b8dab5)](https://www.codacy.com/manual/prabhuignoto/react-chrono?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=prabhuignoto/react-chrono&amp;utm_campaign=Badge_Grade)
-  [![react-chrono](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/8zb5a5&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/8zb5a5/runs)
-  ![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/prabhuignoto/react-chrono?style=flat)
-  [![Depfu](https://badges.depfu.com/badges/48a23a6a830309649b7e516467cd9a48/overview.svg)](https://depfu.com/github/prabhuignoto/react-chrono?project_id=15325)
-  ![https://badgen.net/bundlephobia/min/react](https://badgen.net/bundlephobia/min/react)
-  <a href="https://5f985eb478dcb00022cfd60e-ywtootfinv.chromatic.com/?path=/story/example-vertical--vertical-basic" target="_blank"><img src="https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg"></a>
+[![Build Status](https://dev.azure.com/prabhummurthy/react-chrono/_apis/build/status/prabhuignoto.react-chrono?branchName=master)](https://dev.azure.com/prabhummurthy/react-chrono/_build/latest?definitionId=7&branchName=master)
+[![DeepScan grade](https://deepscan.io/api/teams/10074/projects/13644/branches/234929/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=10074&pid=13644&bid=234929)
+[![Codacy Badge](https://app.codacy.com/project/badge/Grade/f2e24a98defd4e4fa7f6f24d86b8dab5)](https://www.codacy.com/manual/prabhuignoto/react-chrono?utm_source=github.com&utm_medium=referral&utm_content=prabhuignoto/react-chrono&utm_campaign=Badge_Grade)
+[![react-chrono](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/8zb5a5&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/8zb5a5/runs)
+![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/prabhuignoto/react-chrono?style=flat)
+[![Depfu](https://badges.depfu.com/badges/48a23a6a830309649b7e516467cd9a48/overview.svg)](https://depfu.com/github/prabhuignoto/react-chrono?project_id=15325)
+![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-chrono)
+<a href="https://5f985eb478dcb00022cfd60e-ywtootfinv.chromatic.com/?path=/story/example-vertical--vertical-basic" target="_blank"><img src="https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg"></a>
 
@@ -83,3 +83,3 @@ <div>
   import { Chrono } from "react-chrono";
-  
+
   const Home = () => {
@@ -160,26 +160,27 @@ const items = [{
 | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------ |
-| activeItemIndex          | selects the active timeline item on load.                                                                                                                                | 0            |
-| allowDynamicUpdate       | allows timeline items to be updated dynamically.                                                                                                                         | false        |
-| borderLessCards          | removes the border & shadow from the timeline item cards.                                                                                                                | false        |
-| cardHeight               | sets the minimum height of the timeline card.                                                                                                                            | 200          |
-| cardPositionHorizontal   | positions the card in `HORIZONTAL` mode. can be either `TOP` or `BOTTOM`.                                                                                                |              |
-| cardWidth                | sets the maximum width of the timeline card.                                                                                                                             |              |
-| disableAutoScrollOnClick | disables the timeline from auto scrolling on clicking a timeline item.                                                                                                   | false        |
-| disableClickOnCircle     | disables click action on the timeline circle points.                                                                                                                     | false        |
-| disableNavOnKey          | disables the keyboard navigation.                                                                                                                                        | false        |
-| enableOutline            | enables the outline menu on `VERTICAL` and `VERTICAL_ALTERNATING` mode.                                                                                                  | false        |
-| flipLayout               | flips the layout (RTL). applicable only to `VERTICAL` and `VERTICAL_ALTERNATING`.                                                                                        | false        |
-| hideControls             | hides the navigation controls.                                                                                                                                           | false        |
-| itemWidth                | width of the timeline section in `HORIZONTAL` mode.                                                                                                                      | 300          |
-| items                    | collection of [Timeline Item Model](#timeline-item-model).                                                                                                               | []           |
-| lineWidth                | prop to customize the width of the timeline track line.                                                                                                                  | 3px          |
-| mode                     | sets the mode of the component. can be `HORIZONTAL`, `VERTICAL` or `VERTICAL_ALTERNATING`.                                                                               | `HORIZONTAL` |
-| onItemSelected           | callback invoked on a item selection. passes all of the data pertinent to the item.                                                                                      |              |
-| onScrollEnd              | use the `onScrollEnd` to detect the end of the timeline.                                                                                                                 |              |
-| scrollable               | makes the timeline [scrollable](#scrollable) (applicable for `VERTICAL` & `VERTICAL_ALTERNATING`).                                                                       | true         |
-| slideItemDuration        | duration (in ms), the timeline card is active during  a `slideshow`.                                                                                                     | 5000         |
-| slideShow                | enables the slideshow control.                                                                                                                                           | false        |
-| theme                    | prop to customize the colors.                                                                                                                                            |              |
-| timelineCircleDimension  | dimension of the timeline circular points.                                                                                                                               | false        |
-| useReadMore              | enables or disables the read more button.The read more function is enabled only when the height <br /> of the text content exceeds the overall height of the card itself | true         |
+| activeItemIndex          | Selects the active timeline item on load.                                                                                                                                | 0            |
+| allowDynamicUpdate       | Allows timeline items to be updated dynamically.                                                                                                                         | false        |
+| borderLessCards          | Removes the border & shadow from the timeline cards.                                                                                                                     | false        |
+| cardHeight               | Sets the minimum height of the timeline card.                                                                                                                            | 200          |
+| cardLess                 | Disables timeline cards on both horizontal and vertical modes.                                                                                                           | false        |
+| cardPositionHorizontal   | Positions the card in `HORIZONTAL` mode. can be either `TOP` or `BOTTOM`.                                                                                                |              |
+| cardWidth                | Sets the maximum width of the timeline card.                                                                                                                             |              |
+| disableAutoScrollOnClick | Disables the timeline from auto scrolling on clicking a timeline item.                                                                                                   | false        |
+| disableClickOnCircle     | Disables click action on the timeline circle points.                                                                                                                     | false        |
+| disableNavOnKey          | Disables the keyboard navigation.                                                                                                                                        | false        |
+| enableOutline            | Enables the outline menu on `VERTICAL` and `VERTICAL_ALTERNATING` mode.                                                                                                  | false        |
+| flipLayout               | Flips the layout (RTL).                                                                                                                                                  | false        |
+| hideControls             | Hides the navigation controls.                                                                                                                                           | false        |
+| itemWidth                | Width of the timeline section in `HORIZONTAL` mode.                                                                                                                      | 300          |
+| items                    | Collection of [Timeline Item Model](#timeline-item-model).                                                                                                               | []           |
+| lineWidth                | Prop to customize the width of the timeline track line.                                                                                                                  | 3px          |
+| mode                     | Sets the mode of the component. can be `HORIZONTAL`, `VERTICAL` or `VERTICAL_ALTERNATING`.                                                                               | `HORIZONTAL` |
+| onItemSelected           | Callback invoked on a item selection. passes all of the data pertinent to the item.                                                                                      |              |
+| onScrollEnd              | Use the `onScrollEnd` to detect the end of the timeline.                                                                                                                 |              |
+| scrollable               | Makes the timeline [scrollable](#scrollable) (applicable for `VERTICAL` & `VERTICAL_ALTERNATING`).                                                                       | true         |
+| slideItemDuration        | Duration (in ms), the timeline card is active during a `slideshow`.                                                                                                      | 5000         |
+| slideShow                | Enables the slideshow control.                                                                                                                                           | false        |
+| theme                    | Prop to customize the colors.                                                                                                                                            |              |
+| timelineCircleDimension  | Dimension of the timeline circular points.                                                                                                                               | false        |
+| useReadMore              | Enables or disables the read more button.The read more function is enabled only when the height <br /> of the text content exceeds the overall height of the card itself | true         |
 
@@ -257,3 +258,3 @@ ### Mode
 
->Both images and videos can be embedded in the timeline.
+> Both images and videos can be embedded in the timeline.
 
@@ -342,3 +343,3 @@ Just add the `media` attribute to the [Timeline Item model](#timeline-item-model) and the component will take care of the rest.
 
->The items collection will also work nicely with any custom content that is passed.
+> The items collection will also work nicely with any custom content that is passed.
 
@@ -371,12 +372,12 @@ The following snippet sets the the `title` and `cardTitle` for the custom contents.
 
- ```sh
-  <Chrono items={items} mode="VERTICAL_ALTERNATING">
-    <div className="chrono-icons">
-      <img src="image1.svg" alt="image1" />
-      <img src="image2.svg" alt="image2" />
-    </div>
-  </Chrono>
- ```
+```sh
+ <Chrono items={items} mode="VERTICAL_ALTERNATING">
+   <div className="chrono-icons">
+     <img src="image1.svg" alt="image1" />
+     <img src="image2.svg" alt="image2" />
+   </div>
+ </Chrono>
+```
 
->custom icons also works if you are [rendering custom content](#rendering-custom-content) inside the cards.
+> custom icons also works if you are [rendering custom content](#rendering-custom-content) inside the cards.
 
@@ -430,3 +431,3 @@ ```sh
   items={items}
-  theme={{ 
+  theme={{
     primary: "red",
@@ -447,3 +448,3 @@ secondary: "blue",
 - [Vertical All Images](https://codesandbox.io/s/react-chrono-tree-vertical-images-b5zri?file=/src/App.js)
-- [Vertical Custom content](https://codesandbox.io/s/react-chrono-vertical-custom-qepnm?file=/src/App.js)  
+- [Vertical Custom content](https://codesandbox.io/s/react-chrono-vertical-custom-qepnm?file=/src/App.js)
 - [Vertical Custom content with items collections](https://codesandbox.io/s/react-chrono-vertical-custom-2-uctcp?file=/src/App.js)
@@ -461,3 +462,3 @@ - [Custom Icons](https://codesandbox.io/s/react-chrono-custom-icons-x9s2k?file=/src/App.js)
 
-``` bash
+```bash
 # install dependencies
@@ -514,3 +515,3 @@ yarn install
 
-  <a href="https://www.buymeacoffee.com/prabhuignoto" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-red.png" alt="Buy Me A Coffee" height="41" width="174" ></a>
+<a href="https://www.buymeacoffee.com/prabhuignoto" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-red.png" alt="Buy Me A Coffee" height="41" width="174" ></a>
 
@@ -517,0 +518,0 @@ <!-- Markdown link & img dfn's -->

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

326022

increased by0.26%

Lines of code

1906

increased by0.11%

Number of lines in readme file

538

increased by0.19%

Number of low supply chain risk alerts

324

decreased by-1.82%

Worsened metrics

Dev dependency count

62

increased by1.64%

No dependency changes