From b45ae22b442920138b06326b80ceb1e656fd8539 Mon Sep 17 00:00:00 2001 From: prabhuignoto Date: Wed, 11 Jun 2025 20:12:34 +0530 Subject: [PATCH 1/2] refactor: rename project to React Chrono UI and update related files --- README.md | 30 +++++++++---------- browserstack.json | 4 +-- index.html | 2 +- package.json | 8 ++--- rollup.config.mjs | 4 +-- .../__tests__/GlobalContext.test.tsx | 2 +- .../contexts/OptimizedContextProvider.tsx | 2 +- src/components/contexts/StableContext.tsx | 2 +- src/components/contexts/hooks.tsx | 6 ++-- src/components/timeline/timeline.tsx | 2 +- src/demo/README.md | 4 +-- src/{react-chrono.ts => react-chrono-ui.ts} | 0 src/styles/z-index.ts | 2 +- 13 files changed, 34 insertions(+), 34 deletions(-) rename src/{react-chrono.ts => react-chrono-ui.ts} (100%) diff --git a/README.md b/README.md index 901fefa89..53583b467 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,32 @@
- React Chrono Logo -

React Chrono

+ React Chrono UI Logo +

React Chrono UI

A flexible and modern timeline component for React.

-[![npm version](https://img.shields.io/npm/v/react-chrono.svg?style=flat)](https://www.npmjs.com/package/react-chrono) -![npm downloads](https://img.shields.io/npm/dm/react-chrono.svg?label=npm%20downloads&style=flat) -![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-chrono) +[![npm version](https://img.shields.io/npm/v/react-chrono-ui.svg?style=flat)](https://www.npmjs.com/package/react-chrono-ui) +![npm downloads](https://img.shields.io/npm/dm/react-chrono-ui.svg?label=npm%20downloads&style=flat) +![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-chrono-ui) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![styled with Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://prettier.io/) -[![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) +[![Build Status](https://dev.azure.com/prabhummurthy/react-chrono-ui/_apis/build/status/prabhuignoto.react-chrono-ui?branchName=master)](https://dev.azure.com/prabhummurthy/react-chrono-ui/_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) -[![Known Vulnerabilities](https://snyk.io/test/github/prabhuignoto/react-chrono/badge.svg)](https://snyk.io/test/github/prabhuignoto/react-chrono) -[![Depfu](https://badges.depfu.com/badges/48a23a6a830309649b7e516467cd9a48/overview.svg)](https://depfu.com/github/prabhuignoto/react-chrono?project_id=15325) -[![Coverage Status](https://coveralls.io/repos/github/prabhuignoto/react-chrono/badge.svg?branch=master)](https://coveralls.io/github/prabhuignoto/react-chrono?branch=master) +[![Codacy Badge](https://app.codacy.com/project/badge/Grade/f2e24a98defd4e4fa7f6f24d86b8dab5)](https://www.codacy.com/manual/prabhuignoto/react-chrono-ui?utm_source=github.com&utm_medium=referral&utm_content=prabhuignoto/react-chrono-ui&utm_campaign=Badge_Grade) +[![react-chrono-ui](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/8zb5a5&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/8zb5a5/runs) +[![Known Vulnerabilities](https://snyk.io/test/github/prabhuignoto/react-chrono-ui/badge.svg)](https://snyk.io/test/github/prabhuignoto/react-chrono-ui) +[![Depfu](https://badges.depfu.com/badges/48a23a6a830309649b7e516467cd9a48/overview.svg)](https://depfu.com/github/prabhuignoto/react-chrono-ui?project_id=15325) +[![Coverage Status](https://coveralls.io/repos/github/prabhuignoto/react-chrono-ui/badge.svg?branch=master)](https://coveralls.io/github/prabhuignoto/react-chrono-ui?branch=master) Storybook
+[![Edit react-chrono-ui](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-chrono-bg56e?fontsize=14&hidenavigation=1&theme=dark) --> React Chrono is a modern timeline component for React that offers a variety of features and customization options. It allows you to render timelines in horizontal, vertical, and vertical-alternating modes, display images and videos, and much more. @@ -86,10 +86,10 @@ React Chrono is a modern timeline component for React that offers a variety of f ```bash # Using yarn -yarn add react-chrono +yarn add react-chrono-ui # Using npm -npm install react-chrono +npm install react-chrono-ui ``` ## 🚀 Getting Started @@ -102,7 +102,7 @@ By default, if no `mode` is specified, the component renders in `HORIZONTAL` mod ```jsx import React from 'react'; -import { Chrono } from 'react-chrono'; +import { Chrono } from 'react-chrono-ui'; const App = () => { const items = [ diff --git a/browserstack.json b/browserstack.json index ccf2a42e6..8cd537ea1 100644 --- a/browserstack.json +++ b/browserstack.json @@ -15,8 +15,8 @@ ], "run_settings": { "cypress_config_file": "./cypress.json", - "project_name": "project-name", - "build_name": "build-name", + "project_name": "react-chrono-ui", + "build_name": "react-chrono-ui-build", "exclude": [], "parallels": "5", "npm_dependencies": { diff --git a/index.html b/index.html index 8606b2a8f..dbb7f733d 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - React Chrono + React Chrono UI
diff --git a/package.json b/package.json index f09c0b9a3..3082f5eb9 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "react-chrono", + "name": "react-chrono-ui", "version": "2.9.1", "license": "MIT", "description": "A Modern Timeline component for React", @@ -165,15 +165,15 @@ ], "size-limit": [ { - "path": "dist/react-chrono.js", + "path": "dist/react-chrono-ui.js", "limit": "110 KB" }, { - "path": "dist/react-chrono.esm.js", + "path": "dist/react-chrono-ui.esm.js", "limit": "110 KB" }, { - "path": "dist/react-chrono.umd.js", + "path": "dist/react-chrono-ui.umd.js", "limit": "110 KB" } ], diff --git a/rollup.config.mjs b/rollup.config.mjs index 126a93c2a..64cfd5193 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -33,7 +33,7 @@ const isProduction = process.env.NODE_ENV === 'production'; export default { cache: true, external: ['react', 'react-dom'], - input: 'src/react-chrono.ts', + input: 'src/react-chrono-ui.ts', onwarn(warning) { if (warning.code === 'EXPERIMENTAL_WARNING') return; console.warn(warning); @@ -66,7 +66,7 @@ export default { 'react/jsx-runtime': 'jsxRuntime', 'styled-components': 'styled', }, - name: 'ReactChrono', + name: 'ReactChronoUI', strict: true, sourcemap: true, }, diff --git a/src/components/__tests__/GlobalContext.test.tsx b/src/components/__tests__/GlobalContext.test.tsx index 1791b0e82..80d84ca2f 100644 --- a/src/components/__tests__/GlobalContext.test.tsx +++ b/src/components/__tests__/GlobalContext.test.tsx @@ -606,7 +606,7 @@ describe('GlobalContext', () => { expect(context.timelinePointShape).toBe('circle'); expect(context.titleDateFormat).toBe('MMM DD, YYYY'); expect(context.toolbarPosition).toBe('top'); - expect(context.uniqueId).toBe('react-chrono'); + expect(context.uniqueId).toBe('react-chrono-ui'); expect(context.useReadMore).toBe(true); expect(context.scrollable).toEqual({ scrollbar: false }); }); diff --git a/src/components/contexts/OptimizedContextProvider.tsx b/src/components/contexts/OptimizedContextProvider.tsx index 1b6b55876..9f03110e5 100644 --- a/src/components/contexts/OptimizedContextProvider.tsx +++ b/src/components/contexts/OptimizedContextProvider.tsx @@ -121,7 +121,7 @@ export const OptimizedContextProvider: FunctionComponent< timelinePointShape: props.timelinePointShape ?? ('circle' as const), titleDateFormat: props.titleDateFormat ?? 'MMM DD, YYYY', toolbarPosition: props.toolbarPosition ?? ('top' as const), - uniqueId: props.uniqueId ?? 'react-chrono', + uniqueId: props.uniqueId ?? 'react-chrono-ui', useReadMore: props.useReadMore ?? true, disableTimelinePoint: props.disableTimelinePoint ?? false, isChild: props.isChild ?? false, diff --git a/src/components/contexts/StableContext.tsx b/src/components/contexts/StableContext.tsx index 8f12d637d..996858c36 100644 --- a/src/components/contexts/StableContext.tsx +++ b/src/components/contexts/StableContext.tsx @@ -110,7 +110,7 @@ export const StableContext = createContext({ timelinePointShape: 'circle', titleDateFormat: 'MMM DD, YYYY', toolbarPosition: 'top', - uniqueId: 'react-chrono', + uniqueId: 'react-chrono-ui', useReadMore: true, }, computedCardHeight: 200, diff --git a/src/components/contexts/hooks.tsx b/src/components/contexts/hooks.tsx index e8125dc5a..8dad625f8 100644 --- a/src/components/contexts/hooks.tsx +++ b/src/components/contexts/hooks.tsx @@ -47,7 +47,7 @@ const convertLegacyToStable = (legacyContext: any): StableContextProps => { timelinePointShape: legacyContext?.timelinePointShape ?? 'circle', titleDateFormat: legacyContext?.titleDateFormat ?? 'MMM DD, YYYY', toolbarPosition: legacyContext?.toolbarPosition ?? 'top', - uniqueId: legacyContext?.uniqueId ?? 'react-chrono', + uniqueId: legacyContext?.uniqueId ?? 'react-chrono-ui', useReadMore: legacyContext?.useReadMore ?? true, }, computedCardHeight: legacyContext?.cardHeight ?? 200, @@ -128,10 +128,10 @@ export const useStableContext = (): StableContextProps => { const stableContext = useContext(StableContext); // Check if we have properly initialized optimized context - // The uniqueId being 'react-chrono' indicates default/uninitialized context + // The uniqueId being 'react-chrono-ui' indicates default/uninitialized context if ( stableContext && - stableContext.staticDefaults.uniqueId !== 'react-chrono' + stableContext.staticDefaults.uniqueId !== 'react-chrono-ui' ) { return stableContext; } diff --git a/src/components/timeline/timeline.tsx b/src/components/timeline/timeline.tsx index 23d35ff8a..9a74df43f 100644 --- a/src/components/timeline/timeline.tsx +++ b/src/components/timeline/timeline.tsx @@ -75,7 +75,7 @@ const Timeline: React.FunctionComponent = ( // Memoize ID generation to prevent unnecessary regeneration const id = useMemo( - () => `react-chrono-timeline-${noUniqueId ? uniqueId : getUniqueID()}`, + () => `react-chrono-ui-timeline-${noUniqueId ? uniqueId : getUniqueID()}`, [noUniqueId, uniqueId], ); diff --git a/src/demo/README.md b/src/demo/README.md index d5c374e8e..b2f8d4b25 100644 --- a/src/demo/README.md +++ b/src/demo/README.md @@ -1,6 +1,6 @@ -# React Chrono Demo +# React Chrono UI Demo -This directory contains the organized demo application for React Chrono, showcasing various timeline configurations and use cases. +This directory contains the organized demo application for React Chrono UI, showcasing various timeline configurations and use cases. ## Directory Structure diff --git a/src/react-chrono.ts b/src/react-chrono-ui.ts similarity index 100% rename from src/react-chrono.ts rename to src/react-chrono-ui.ts diff --git a/src/styles/z-index.ts b/src/styles/z-index.ts index 2265e4b2d..23bc6badf 100644 --- a/src/styles/z-index.ts +++ b/src/styles/z-index.ts @@ -1,5 +1,5 @@ /** - * Z-index hierarchy for react-chrono + * Z-index hierarchy for react-chrono-ui * * This file defines a consistent z-index layering system to prevent * issues with component stacking and overlapping, such as timeline points From 966cef0a9f83e59b1ff27a142c1ee247d7a9b791 Mon Sep 17 00:00:00 2001 From: prabhuignoto Date: Wed, 11 Jun 2025 20:28:26 +0530 Subject: [PATCH 2/2] fix: update tsconfig to reference the correct entry file for React Chrono UI --- tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 8870046d9..9513134cb 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -44,5 +44,5 @@ "cypress", "cypress.config.ts" ], - "files": ["src/react-chrono.ts"] + "files": ["src/react-chrono-ui.ts"] }