react-chrono - npm Package Compare versions

Comparing version 1.13.2 to 1.13.3

dist/components/icons/close.d.ts

@@ -1,3 +0,2 @@
-/// <reference types="react" />
 declare function SvgComponent(): JSX.Element;
 export default SvgComponent;

dist/components/icons/menu.d.ts

@@ -1,3 +0,2 @@
-/// <reference types="react" />
 declare function SvgComponent(): JSX.Element;
 export default SvgComponent;

dist/components/icons/triangle-right.d.ts

@@ -1,3 +0,2 @@
-/// <reference types="react" />
 declare function SvgComponent(): JSX.Element;
 export default SvgComponent;

dist/components/timeline-elements/memoized/index.d.ts

 import React from 'react';
 import { Theme } from '../../../models/Theme';
 interface Title {
+    active?: boolean;
+    color?: string;
+    dir?: string;
+    theme?: Theme;
     title?: string;
     url?: string;
-    theme?: Theme;
-    color?: string;
-    dir?: string;
-    active?: boolean;
 }
 interface Content {
+    color?: string;
     content?: string;
-    color?: string;
     dir?: string;
@@ -15,0 +15,0 @@ theme?: Theme;

dist/components/timeline-elements/timeline-card-content/timeline-card-content.styles.d.ts

@@ -8,8 +8,8 @@ /// <reference types="react" />
 } & {
-    theme?: Theme | undefined;
-    noMedia?: boolean | undefined;
+    borderLess?: boolean | undefined;
+    maxWidth?: number | undefined;
     minHeight?: number | undefined;
-    maxWidth?: number | undefined;
     mode?: TimelineMode | undefined;
-    borderLess?: boolean | undefined;
+    noMedia?: boolean | undefined;
+    theme?: Theme | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
@@ -31,4 +31,4 @@ export declare const TimelineCardHeader: import("@emotion/styled").StyledComponent<{
 } & {
+    dir?: string | undefined;
     theme: Theme;
-    dir?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
@@ -49,6 +49,6 @@ export declare const TimelineContentDetails: import("@emotion/styled").StyledComponent<{
 } & {
+    borderLess?: boolean | undefined;
+    customContent?: boolean | undefined;
     theme?: Theme | undefined;
-    customContent?: boolean | undefined;
     useReadMore?: boolean | undefined;
-    borderLess?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -66,6 +66,6 @@ export declare const ShowMore: import("@emotion/styled").StyledComponent<{
 } & {
+    color?: string | undefined;
+    duration?: number | undefined;
+    paused?: boolean | undefined;
     startWidth?: number | undefined;
-    paused?: boolean | undefined;
-    duration?: number | undefined;
-    color?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
@@ -72,0 +72,0 @@ export declare const ChevronIconWrapper: import("@emotion/styled").StyledComponent<{

dist/components/timeline-elements/timeline-card-media/timeline-card-media.styles.d.ts

@@ -8,8 +8,8 @@ /// <reference types="react" />
 } & {
-    theme?: Theme | undefined;
     active?: boolean | undefined;
+    cardHeight?: number | undefined;
+    dir?: string | undefined;
     mode?: TimelineMode | undefined;
-    dir?: string | undefined;
     slideShowActive?: boolean | undefined;
-    cardHeight?: number | undefined;
+    theme?: Theme | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -20,6 +20,6 @@ export declare const CardImage: import("@emotion/styled").StyledComponent<{
 } & {
+    active?: boolean | undefined;
+    dir?: string | undefined;
     mode?: TimelineMode | undefined;
     visible?: boolean | undefined;
-    active?: boolean | undefined;
-    dir?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
@@ -26,0 +26,0 @@ export declare const CardVideo: import("@emotion/styled").StyledComponent<{

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

@@ -16,4 +16,4 @@ /// <reference types="react" />
 interface CircleModel {
+    dimension?: number;
     theme?: Theme;
-    dimension?: number;
 }
@@ -32,5 +32,5 @@ export declare const Circle: import("@emotion/styled").StyledComponent<{
 } & {
+    active?: boolean | undefined;
     position?: string | undefined;
-    active?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

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

@@ -20,5 +20,5 @@ /// <reference types="react" />
 } & {
-    theme?: Theme | undefined;
     mode?: TimelineMode | undefined;
     rotate?: "TRUE" | "FALSE" | undefined;
+    theme?: Theme | undefined;
 }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
@@ -25,0 +25,0 @@ export declare const TimelineControlContainer: import("@emotion/styled").StyledComponent<{

dist/components/timeline-elements/timeline-item-title/timeline-card-title.styles.d.ts

@@ -7,5 +7,5 @@ /// <reference types="react" />
 } & {
+    align?: string | undefined;
+    hide?: boolean | undefined;
     theme?: Theme | undefined;
-    hide?: boolean | undefined;
-    align?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

dist/components/timeline-elements/timeline-outline/timeline-outline.d.ts

@@ -9,4 +9,4 @@ import React from 'react';
 export interface TimelineOutlineItem {
+    id?: string;
     name?: string;
-    id?: string;
     selected?: boolean;
@@ -16,7 +16,7 @@ }
     items?: TimelineOutlineItem[];
+    mode?: TimelineMode;
     onSelect?: (index: number) => void;
     theme?: Theme;
-    mode?: TimelineMode;
 }
 declare const TimelineOutline: React.FunctionComponent<TimelineOutlineModel>;
 export { TimelineOutline };

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

@@ -8,4 +8,4 @@ /// <reference types="react" />
 } & {
+    open?: boolean | undefined;
     position?: OutlinePosition | undefined;
-    open?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -22,5 +22,5 @@ export declare const OutlinePane: import("@emotion/styled").StyledComponent<{
 } & {
-    theme?: Theme | undefined;
     open?: boolean | undefined;
     position?: OutlinePosition | undefined;
+    theme?: Theme | undefined;
 }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
@@ -39,4 +39,4 @@ export declare const List: import("@emotion/styled").StyledComponent<{
 } & {
+    selected?: boolean | undefined;
     theme?: Theme | undefined;
-    selected?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
@@ -47,4 +47,4 @@ export declare const ListItemBullet: import("@emotion/styled").StyledComponent<{
 } & {
+    selected?: boolean | undefined;
     theme?: Theme | undefined;
-    selected?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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

@@ -11,4 +11,4 @@ /// <reference types="react" />
 } & {
+    alternateCards?: boolean | undefined;
     cardHeight?: number | undefined;
-    alternateCards?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -19,4 +19,4 @@ export declare const VerticalCircleWrapper: import("@emotion/styled").StyledComponent<{
 } & {
+    alternateCards?: boolean | undefined;
     bg?: string | undefined;
-    alternateCards?: boolean | undefined;
     width?: number | undefined;
@@ -29,4 +29,4 @@ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
     alternateCards?: boolean | undefined;
+    flip?: boolean | undefined;
     noTitle?: boolean | undefined;
-    flip?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -42,5 +42,5 @@ export declare const VerticalCircleContainer: import("@emotion/styled").StyledComponent<{
     alternateCards?: boolean | undefined;
+    flip?: boolean | undefined;
+    hide?: boolean | undefined;
     mode?: TimelineMode | undefined;
-    hide?: boolean | undefined;
-    flip?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

dist/components/timeline/timeline.style.d.ts

@@ -14,7 +14,7 @@ /// <reference types="react" />
 } & {
-    theme?: Theme | undefined;
+    mode?: TimelineMode | undefined;
     scrollable?: boolean | {
         scrollbar: boolean;
     } | undefined;
-    mode?: TimelineMode | undefined;
+    theme?: Theme | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -36,4 +36,4 @@ export declare const TimelineMain: import("@emotion/styled").StyledComponent<{
 } & {
+    active?: boolean | undefined;
     mode?: TimelineMode | undefined;
-    active?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -40,0 +40,0 @@ export declare const TimelineContentRender: import("@emotion/styled").StyledComponent<{

dist/models/Theme.d.ts

 export interface Theme {
+    cardBgColor?: string;
+    cardForeColor?: string;
     primary?: string;
     secondary?: string;
     textColor?: string;
-    cardBgColor?: string;
-    cardForeColor?: string;
     titleColor?: string;
 }

dist/models/TimelineCardTitleModel.d.ts

 import { Theme } from './Theme';
 export interface TitleModel {
-    title?: string;
     active?: boolean;
+    align?: 'left' | 'right';
     theme?: Theme;
-    align?: 'left' | 'right';
+    title?: string;
 }

dist/models/TimelineContentModel.d.ts

@@ -6,9 +6,13 @@ /// <reference types="react" />
     active?: boolean;
+    branchDir?: string;
     content?: string;
+    customContent?: React.ReactNode;
     detailedText?: string | string[];
+    flip?: boolean;
+    hasFocus?: boolean;
     id?: string;
     media?: Media;
     onClick?: (id: string) => void;
+    onElapsed?: (id?: string) => void;
     onShowMore: () => void;
-    onElapsed?: (id?: string) => void;
     slideShowActive?: boolean;
@@ -18,6 +22,2 @@ theme?: Theme;
     url?: string;
-    branchDir?: string;
-    customContent?: React.ReactNode;
-    hasFocus?: boolean;
-    flip?: boolean;
 }

dist/models/TimelineControlModel.d.ts

@@ -5,11 +5,11 @@ import { Theme } from './Theme';
     disableRight: boolean;
+    id?: string;
+    onFirst: () => void;
+    onLast: () => void;
     onNext: () => void;
     onPrevious: () => void;
-    onFirst: () => void;
-    onLast: () => void;
-    theme?: Theme;
+    onReplay?: () => void;
     slideShowEnabled?: boolean;
     slideShowRunning?: boolean;
-    onReplay?: () => void;
-    id?: string;
+    theme?: Theme;
 }

dist/models/TimelineHorizontalModel.d.ts

@@ -7,13 +7,13 @@ import { ReactNode } from 'react';
     autoScroll: (t: Partial<Scroll>) => void;
+    contentDetailsChildren?: ReactNode | ReactNode[];
     handleItemClick: (id?: string) => void;
+    hasFocus?: boolean;
+    iconChildren?: ReactNode;
     itemWidth?: number;
     items: TimelineCardModel[];
     mode?: TimelineMode;
+    onElapsed?: (id?: string) => void;
     slideShowRunning?: boolean;
     theme?: Theme;
     wrapperId: string;
-    onElapsed?: (id?: string) => void;
-    contentDetailsChildren?: ReactNode | ReactNode[];
-    iconChildren?: ReactNode;
-    hasFocus?: boolean;
 }
@@ -36,3 +36,3 @@ export interface Scroll {
     /**
-     * Height of the timeline point
+     * Offset of the timeline point
      *
@@ -42,5 +42,5 @@ * @type {number}
      */
-    timelinePointHeight: number;
+    pointOffset: number;
     /**
-     * Offset of the timeline point
+     * Width of the timeline point
      *
@@ -50,5 +50,5 @@ * @type {number}
      */
-    pointOffset: number;
+    pointWidth: number;
     /**
-     * Width of the timeline point
+     * Height of the timeline point
      *
@@ -58,3 +58,3 @@ * @type {number}
      */
-    pointWidth: number;
+    timelinePointHeight: number;
 }

dist/models/TimelineItemModel.d.ts

@@ -17,3 +17,2 @@ /// <reference types="react" />
     cardTitle?: string;
-    url?: string;
     id?: string;
@@ -23,2 +22,3 @@ media?: Media;
     title?: string;
+    url?: string;
     visible?: boolean;
@@ -28,13 +28,13 @@ }
     autoScroll: ({ pointOffset, pointWidth, timelinePointHeight, contentHeight, }: Partial<Scroll>) => void;
+    cardHeight?: number;
+    customContent?: React.ReactNode | React.ReactNode[];
+    hasFocus?: boolean;
+    iconChild?: React.ReactNode;
     mode: TimelineMode;
     onClick: (id?: string) => void;
+    onElapsed?: (id?: string) => void;
+    slideItemDuration?: number;
     slideShowRunning?: boolean;
     theme?: Theme;
     wrapperId: string;
-    cardHeight?: number;
-    slideItemDuration?: number;
-    onElapsed?: (id?: string) => void;
-    customContent?: React.ReactNode | React.ReactNode[];
-    hasFocus?: boolean;
-    iconChild?: React.ReactNode;
 }

dist/models/TimelineMediaModel.d.ts

 import { Theme } from './Theme';
 export declare type MediaType = 'VIDEO' | 'IMAGE';
 export interface MediaSource {
+    type?: string;
     url: string;
-    type?: string;
 }
 export interface Media {
     name?: string;
+    source: MediaSource;
     type: MediaType;
-    source: MediaSource;
 }
@@ -12,0 +12,0 @@ export interface MediaState {

dist/models/TimelineModel.d.ts

@@ -39,2 +39,4 @@ /// <reference types="react" />
     children?: React.ReactElement | React.ReactElement[];
+    disableAutoScrollOnClick?: boolean;
+    disableClickOnCircle?: boolean;
     disableNavOnKey?: boolean;
@@ -46,2 +48,3 @@ enableOutline?: boolean;
     items?: TimelineItemModel[];
+    lineWidth?: number;
     mode?: TimelineMode;
@@ -57,8 +60,5 @@ onItemSelected?: (data: TimelineItemModel) => void;
     theme?: Theme;
+    timelineCircleDimension?: number;
     useReadMore?: boolean;
-    timelineCircleDimension?: number;
-    lineWidth?: number;
-    disableClickOnCircle?: boolean;
-    disableAutoScrollOnClick?: boolean;
 }
 export declare type TimelineMode = 'VERTICAL' | 'HORIZONTAL' | 'VERTICAL_ALTERNATING';

dist/models/TimelineVerticalModel.d.ts

@@ -10,4 +10,7 @@ /// <reference types="react" />
     cardHeight?: number;
+    disableClickOnCircle?: boolean;
+    enableOutline?: boolean;
     flipLayout?: boolean;
     hasFocus?: boolean;
+    lineWidth?: number;
     mode?: TimelineMode;
@@ -19,6 +22,3 @@ onClick: (id?: string) => void;
     theme?: Theme;
-    enableOutline?: boolean;
     timelineCircleDimension?: number;
-    lineWidth?: number;
-    disableClickOnCircle?: boolean;
 }
@@ -31,4 +31,4 @@ interface CommonVerticalModel extends CommonPropsModel {
 export interface VerticalCircleModel extends CommonVerticalModel {
+    iconChild?: React.ReactNode;
     onActive: (pointOffset: number) => void;
-    iconChild?: React.ReactNode;
 }
@@ -43,2 +43,3 @@ export interface VerticalItemModel extends CommonVerticalModel {
     media?: Media;
+    onActive: (pointOffset: number, contentHeight: number, contentOffset: number) => void;
     onShowMore?: () => void;
@@ -48,3 +49,2 @@ title?: string;
     visible?: boolean;
-    onActive: (pointOffset: number, contentHeight: number, contentOffset: number) => void;
 }
@@ -51,0 +51,0 @@ export interface TimelineVerticalModel extends CommonPropsModel {

package.json

 {
   "name": "react-chrono",
-  "version": "1.13.2",
+  "version": "1.13.3",
   "license": "MIT",
@@ -20,12 +20,14 @@ "description": "A Modern Timeline component for React",
     "cypress:record": "cypress run --record --key 0a753295-339a-4351-bf1d-6b91d4bcb937",
-    "cypress:runner": "start-server-and-test start http://localhost:8080 cypress:record",
-    "cypress:test": "start-server-and-test start http://localhost:8080 cypress",
-    "eslint": "eslint ./src/**/*.tsx",
+    "cypress:runner": "start-server-and-test start http://localhost:3000 cypress:record",
+    "cypress:test": "start-server-and-test start http://localhost:3000 cypress",
+    "eslint": "eslint src/**/*.{tsx,ts}",
+    "fix-js": "eslint src/**/*.{tsx,ts} --fix",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint:all": "yarn run eslint && yarn run lint:css && yarn run lint",
-    "lint:css": "stylelint ./src/**/*style.ts",
+    "lint:css": "stylelint src/**/*style.ts --custom-syntax @stylelint/postcss-css-in-js",
     "rollup": "rimraf ./dist && rollup -c",
     "snyk": "snyk test",
-    "dev": "snowpack dev --polyfill-node"
+    "prepare": "husky install",
+    "dev": "vite --config vite.config.ts"
   },
@@ -44,6 +46,6 @@ "dependencies": {
   "devDependencies": {
-    "@babel/core": "^7.16.7",
+    "@babel/core": "^7.17.0",
     "@babel/plugin-proposal-optional-chaining": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.16.8",
-    "@babel/preset-env": "^7.16.8",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
@@ -57,9 +59,5 @@ "@babel/preset-typescript": "^7.16.7",
     "@rollup/plugin-strip": "^2.1.0",
-    "@snowpack/app-scripts-react": "^2.0.1",
-    "@snowpack/plugin-dotenv": "^2.2.0",
-    "@snowpack/plugin-react-refresh": "^2.5.0",
-    "@snowpack/plugin-typescript": "^1.2.1",
-    "@snowpack/web-test-runner-plugin": "^0.2.2",
-    "@testing-library/dom": "^8.11.2",
-    "@testing-library/jest-dom": "^5.16.1",
+    "@stylelint/postcss-css-in-js": "^0.37.2",
+    "@testing-library/dom": "^8.11.3",
+    "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
@@ -69,19 +67,24 @@ "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.4.0",
-    "@types/node": "^17.0.8",
-    "@types/react": "^17.0.38",
+    "@types/node": "^17.0.15",
+    "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.10",
-    "@types/react-router-dom": "^5.3.2",
-    "@types/snowpack-env": "^2.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.9.1",
-    "@typescript-eslint/parser": "^5.9.1",
+    "@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",
     "babel-loader": "^8.2.3",
-    "cssnano": "^5.0.15",
-    "cypress": "^9.2.1",
-    "eslint": "^8.7.0",
+    "cssnano": "^5.0.16",
+    "cypress": "^9.4.1",
+    "eslint": "^8.8.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-sort-keys-fix": "^1.1.2",
+    "eslint-plugin-typescript-sort-keys": "^2.1.0",
     "husky": "^7.0.4",
     "jest": "^27.4.7",
-    "lint-staged": "^12.1.7",
-    "postcss": "^8.4.5",
+    "lint-staged": "^12.3.3",
+    "postcss": "^8.4.6",
+    "postcss-syntax": "^0.36.2",
     "prettier": "^2.5.1",
@@ -93,15 +96,16 @@ "react": "^17.0.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.64.0",
+    "rollup": "^2.67.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.31.1",
-    "snowpack": "^3.8.8",
-    "snyk": "^1.827.0",
+    "rollup-plugin-typescript2": "^0.31.2",
+    "snyk": "^1.848.0",
     "start-server-and-test": "^1.14.0",
-    "stylelint": "^14.2.0",
+    "stylelint": "^14.3.0",
     "stylelint-config-recommended": "^6.0.0",
     "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-order": "^5.0.0",
     "stylelint-processor-styled-components": "^1.10.0",
     "ts-jest": "^27.1.3",
-    "typescript": "^4.5.3"
+    "typescript": "^4.5.5",
+    "vite": "^2.7.13"
   },
@@ -108,0 +112,0 @@ "peerDependencies": {

README.md

@@ -495,3 +495,2 @@ <div align="center">
 - Styled with [emotion](https://emotion.sh/).
-- Powered by [snowpack](https://www.snowpack.dev/)
 
@@ -514,3 +513,2 @@ ## Meta
 [emotion]: https://emotion.sh/
-[snowpack]: https://www.snowpack.dev/
 
@@ -517,0 +515,0 @@ ## Contributors ✨

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

Worsened metrics

Total package byte prevSize

325181

decreased by-0.02%

Dev dependency count

61

increased by3.39%

Lines of code

1904

decreased by-0.16%

Number of lines in readme file

537

decreased by-0.37%

No dependency changes