Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-chrono
Advanced tools
react-chrono - npm Package Compare versions
Comparing version 1.12.5 to 1.13.0
@@ -0,2 +1,3 @@ | ||
| /// <reference types="react" /> | ||
| declare function SvgComponent(): JSX.Element; | ||
| export default SvgComponent; |
@@ -0,2 +1,3 @@ | ||
| /// <reference types="react" /> | ||
| declare function SvgComponent(): JSX.Element; | ||
| export default SvgComponent; |
@@ -0,2 +1,3 @@ | ||
| /// <reference types="react" /> | ||
| declare function SvgComponent(): JSX.Element; | ||
| export default SvgComponent; |
@@ -17,2 +17,3 @@ /// <reference types="react" /> | ||
| theme?: Theme; | ||
| dimension?: number; | ||
| } | ||
@@ -19,0 +20,0 @@ export declare const Circle: import("@emotion/styled").StyledComponent<{ |
@@ -20,2 +20,3 @@ /// <reference types="react" /> | ||
| alternateCards?: boolean | undefined; | ||
| width?: number | undefined; | ||
| }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>; | ||
@@ -22,0 +23,0 @@ export declare const TimelineCardContentWrapper: import("@emotion/styled").StyledComponent<{ |
@@ -29,2 +29,3 @@ /// <reference types="react" /> | ||
| color?: string | undefined; | ||
| height?: number | undefined; | ||
| }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>; | ||
@@ -31,0 +32,0 @@ export declare const TimelineControlContainer: import("@emotion/styled").StyledComponent<{ |
@@ -34,2 +34,3 @@ /// <reference types="react" /> | ||
| allowDynamicUpdate?: boolean; | ||
| borderLessCards?: boolean; | ||
| cardHeight?: number; | ||
@@ -56,4 +57,7 @@ cardPositionHorizontal?: 'TOP' | 'BOTTOM'; | ||
| useReadMore?: boolean; | ||
| borderLessCards?: boolean; | ||
| timelineCircleDimension?: number; | ||
| lineWidth?: number; | ||
| disableClickOnCircle?: boolean; | ||
| disableAutoScrollOnClick?: boolean; | ||
| } | ||
| export declare type TimelineMode = 'VERTICAL' | 'HORIZONTAL' | 'VERTICAL_ALTERNATING'; |
@@ -19,2 +19,5 @@ /// <reference types="react" /> | ||
| enableOutline?: boolean; | ||
| timelineCircleDimension?: number; | ||
| lineWidth?: number; | ||
| disableClickOnCircle?: boolean; | ||
| } | ||
@@ -21,0 +24,0 @@ interface CommonVerticalModel extends CommonPropsModel { |
| { | ||
| "name": "react-chrono", | ||
| "version": "1.12.5", | ||
| "version": "1.13.0", | ||
| "license": "MIT", | ||
@@ -18,19 +18,18 @@ "description": "A Modern Timeline component for React", | ||
| "scripts": { | ||
| "build": "snowpack build", | ||
| "cypress": "cypress open", | ||
| "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", | ||
| "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", | ||
| "rollup": "rimraf ./dist && rollup -c", | ||
| "start": "snowpack dev --polyfill-node", | ||
| "lint:all": "yarn run eslint && yarn run lint:css && yarn run lint", | ||
| "cypress": "cypress open", | ||
| "cypress:test": "start-server-and-test start http://localhost:8080 cypress", | ||
| "cypress:record": "cypress run --record --key 0a753295-339a-4351-bf1d-6b91d4bcb937", | ||
| "cypress:runner": "start-server-and-test start http://localhost:8080 cypress:record", | ||
| "snyk": "snyk test" | ||
| "snyk": "snyk test", | ||
| "dev": "snowpack dev --polyfill-node" | ||
| }, | ||
| "dependencies": { | ||
| "@emotion/core": "^11.0.0-next.10", | ||
| "@emotion/react": "^11.7.0", | ||
| "@emotion/react": "^11.7.1", | ||
| "@emotion/styled": "^11.6.0", | ||
@@ -45,13 +44,13 @@ "classnames": "^2.3.1", | ||
| "devDependencies": { | ||
| "@babel/core": "^7.16.0", | ||
| "@babel/plugin-proposal-optional-chaining": "^7.16.0", | ||
| "@babel/plugin-transform-runtime": "^7.16.4", | ||
| "@babel/preset-env": "^7.16.4", | ||
| "@babel/preset-react": "^7.16.0", | ||
| "@babel/preset-typescript": "^7.16.0", | ||
| "@emotion/babel-plugin": "^11.3.0", | ||
| "@babel/core": "^7.16.5", | ||
| "@babel/plugin-proposal-optional-chaining": "^7.16.5", | ||
| "@babel/plugin-transform-runtime": "^7.16.5", | ||
| "@babel/preset-env": "^7.16.5", | ||
| "@babel/preset-react": "^7.16.5", | ||
| "@babel/preset-typescript": "^7.16.5", | ||
| "@emotion/babel-plugin": "^11.7.2", | ||
| "@rollup/plugin-babel": "^5.3.0", | ||
| "@rollup/plugin-buble": "^0.21.3", | ||
| "@rollup/plugin-commonjs": "^21.0.1", | ||
| "@rollup/plugin-node-resolve": "^13.0.6", | ||
| "@rollup/plugin-node-resolve": "^13.1.1", | ||
| "@rollup/plugin-strip": "^2.1.0", | ||
@@ -69,19 +68,19 @@ "@snowpack/app-scripts-react": "^2.0.1", | ||
| "@types/jest": "^27.0.2", | ||
| "@types/node": "^16.11.12", | ||
| "@types/react": "^17.0.37", | ||
| "@types/node": "^17.0.5", | ||
| "@types/react": "^17.0.38", | ||
| "@types/react-dom": "^17.0.10", | ||
| "@types/react-router-dom": "^5.3.2", | ||
| "@types/snowpack-env": "^2.3.4", | ||
| "@typescript-eslint/eslint-plugin": "^5.6.0", | ||
| "@typescript-eslint/parser": "^5.6.0", | ||
| "@typescript-eslint/eslint-plugin": "^5.8.1", | ||
| "@typescript-eslint/parser": "^5.8.1", | ||
| "babel-loader": "^8.2.3", | ||
| "cssnano": "^5.0.12", | ||
| "cypress": "^9.1.1", | ||
| "eslint": "^8.4.1", | ||
| "cssnano": "^5.0.14", | ||
| "cypress": "^9.2.0", | ||
| "eslint": "^8.5.0", | ||
| "eslint-plugin-jsx-a11y": "^6.4.1", | ||
| "eslint-plugin-react": "^7.26.1", | ||
| "eslint-plugin-react": "^7.28.0", | ||
| "husky": "^7.0.4", | ||
| "jest": "^27.4.3", | ||
| "lint-staged": "^12.1.2", | ||
| "postcss": "^8.4.4", | ||
| "jest": "^27.4.5", | ||
| "lint-staged": "^12.1.4", | ||
| "postcss": "^8.4.5", | ||
| "prettier": "^2.5.1", | ||
@@ -91,5 +90,5 @@ "react": "^17.0.2", | ||
| "react-is": "^17.0.2", | ||
| "react-router-dom": "^6.0.2", | ||
| "react-router-dom": "^6.2.1", | ||
| "rimraf": "^3.0.2", | ||
| "rollup": "^2.61.0", | ||
| "rollup": "^2.62.0", | ||
| "rollup-plugin-postcss": "^4.0.2", | ||
@@ -99,5 +98,5 @@ "rollup-plugin-terser": "^7.0.2", | ||
| "snowpack": "^3.8.8", | ||
| "snyk": "^1.787.0", | ||
| "snyk": "^1.811.0", | ||
| "start-server-and-test": "^1.14.0", | ||
| "stylelint": "^14.1.0", | ||
| "stylelint": "^14.2.0", | ||
| "stylelint-config-recommended": "^6.0.0", | ||
@@ -107,3 +106,3 @@ "stylelint-config-styled-components": "^0.1.1", | ||
| "ts-jest": "^27.1.1", | ||
| "typescript": "^4.5.2" | ||
| "typescript": "^4.5.3" | ||
| }, | ||
@@ -110,0 +109,0 @@ "peerDependencies": { |
@@ -87,3 +87,3 @@ <div align="center"> | ||
| cardTitle: "Dunkirk", | ||
| url: "http://www.history.com | ||
| url: "http://www.history.com", | ||
| cardSubtitle:"Men of the British Expeditionary Force (BEF) wade out to..", | ||
@@ -157,24 +157,28 @@ cardDetailedText: "Men of the British Expeditionary Force (BEF) wade out to..", | ||
| | name | description | default | | ||
| | ----------------- | ------------------------------------------------------------------------------------- | ------------ | | ||
| | 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. | | | ||
| | 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). | [] | | ||
| | 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. | | | ||
| | useReadMore | enables or disables the read more button. when disabled the card will auto expand to fit the content| true | | ||
| | name | description | default | | ||
| | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------ | | ||
| | 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 | | ||
@@ -199,10 +203,10 @@ ### Mode | ||
| | name | description | type | | ||
| |----------------------|----------------------------------------------|--------| | ||
| | title | title of the timeline item | String | | ||
| | cardTitle | title that is displayed on the timeline card | String | | ||
| | cardSubtitle | text displayed in the timeline card | String | | ||
| | cardDetailedText | detailed text displayed in the timeline card | String or String[] | | ||
| | media | media object to set image or video. | Object | | ||
| | url | url to be used in the title. | String | | ||
| | name | description | type | | ||
| | ---------------- | -------------------------------------------- | ------------------ | | ||
| | title | title of the timeline item | String | | ||
| | cardTitle | title that is displayed on the timeline card | String | | ||
| | cardSubtitle | text displayed in the timeline card | String | | ||
| | cardDetailedText | detailed text displayed in the timeline card | String or String[] | | ||
| | media | media object to set image or video. | Object | | ||
| | url | url to be used in the title. | String | | ||
@@ -456,16 +460,16 @@ ```sh | ||
| # start dev setup | ||
| yarn run start | ||
| # start dev | ||
| yarn dev | ||
| # run css linting | ||
| yarn run lint:css | ||
| yarn lint:css | ||
| # eslint | ||
| yarn run eslint | ||
| yarn eslint | ||
| # prettier | ||
| yarn run lint | ||
| yarn lint | ||
| # package lib | ||
| yarn run rollup | ||
| yarn rollup | ||
| ``` | ||
@@ -477,6 +481,6 @@ | ||
| # run unit tests | ||
| yarn run test | ||
| yarn test | ||
| # run cypress tests | ||
| yarn run cypress:test | ||
| yarn cypress:test | ||
| ``` | ||
@@ -525,6 +529,8 @@ | ||
| <tr> | ||
| <td align="center"><a href="http://aloisdg.github.io/"><img src="https://avatars.githubusercontent.com/u/3449303?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Alois</b></sub></a><br /><a href="https://github.com/prabhuignoto/react-chrono/commits?author=aloisdg" title="Documentation">📖</a></td> | ||
| <td align="center"><a href="https://kojikoji.ga"><img src="https://avatars.githubusercontent.com/u/474225?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Koji</b></sub></a><br /><a href="https://github.com/prabhuignoto/react-chrono/commits?author=koji" title="Documentation">📖</a></td> | ||
| <td align="center"><a href="http://alexgirard.com"><img src="https://avatars.githubusercontent.com/u/373?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Alexandre Girard</b></sub></a><br /><a href="https://github.com/prabhuignoto/react-chrono/commits?author=alx" title="Code">💻</a></td> | ||
| <td align="center"><a href="https://github.com/Ryuyxx"><img src="https://avatars.githubusercontent.com/u/69892552?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ryuya</b></sub></a><br /><a href="https://github.com/prabhuignoto/react-chrono/commits?author=Ryuyxx" title="Documentation">📖</a></td> | ||
| <td align="center"><a href="http://aloisdg.github.io/"><img src="https://avatars.githubusercontent.com/u/3449303?v=4?s=60" width="60px;" alt=""/><br /><sub><b>Alois</b></sub></a><br /><a href="https://github.com/prabhuignoto/react-chrono/commits?author=aloisdg" title="Documentation">📖</a></td> | ||
| <td align="center"><a href="https://kojikoji.ga"><img src="https://avatars.githubusercontent.com/u/474225?v=4?s=60" width="60px;" alt=""/><br /><sub><b>Koji</b></sub></a><br /><a href="https://github.com/prabhuignoto/react-chrono/commits?author=koji" title="Documentation">📖</a></td> | ||
| <td align="center"><a href="http://alexgirard.com"><img src="https://avatars.githubusercontent.com/u/373?v=4?s=60" width="60px;" alt=""/><br /><sub><b>Alexandre Girard</b></sub></a><br /><a href="https://github.com/prabhuignoto/react-chrono/commits?author=alx" title="Code">💻</a></td> | ||
| <td align="center"><a href="https://github.com/Ryuyxx"><img src="https://avatars.githubusercontent.com/u/69892552?v=4?s=60" width="60px;" alt=""/><br /><sub><b>Ryuya</b></sub></a><br /><a href="https://github.com/prabhuignoto/react-chrono/commits?author=Ryuyxx" title="Documentation">📖</a></td> | ||
| <td align="center"><a href="https://github.com/taqi457"><img src="https://avatars.githubusercontent.com/u/2155219?v=4?s=60" width="60px;" alt=""/><br /><sub><b>Taqi Abbas</b></sub></a><br /><a href="https://github.com/prabhuignoto/react-chrono/commits?author=taqi457" title="Code">💻</a></td> | ||
| <td align="center"><a href="https://github.com/megasoft78"><img src="https://avatars.githubusercontent.com/u/514958?v=4?s=60" width="60px;" alt=""/><br /><sub><b>megasoft78</b></sub></a><br /><a href="https://github.com/prabhuignoto/react-chrono/commits?author=megasoft78" title="Code">💻</a></td> | ||
| </tr> | ||
@@ -531,0 +537,0 @@ </table> |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by2%
325208
- Lines of code
- increased by1.22%
1906
- Number of lines in readme file
- increased by1.13%
539
Dependency changes
Updated@emotion/react@^11.7.1