refactor: rename project to React Chrono UI and update related files

README.md

@@ -1,32 +1,32 @@
 <div align="center">
-  <img src="./readme-assets/social-logo-small.png" alt="React Chrono Logo" />
-  <h1>React Chrono</h1>
+  <img src="./readme-assets/social-logo-small.png" alt="React Chrono UI Logo" />
+  <h1>React Chrono UI</h1>
   <p>A flexible and modern timeline component for React.</p>
 </div>
 
 <div align="center">
 
-[![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 & Quality Badges -->
 
-[![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)
 <a href="https://5f985eb478dcb00022cfd60e-axcjutcmmg.chromatic.com/?path=/story/example-vertical--vertical-basic" target="_blank"><img src="https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg" alt="Storybook"></a>
 
 </div>
 
 <!-- **Try it on CodeSandbox!**
-[![Edit react-chrono](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-chrono-bg56e?fontsize=14&hidenavigation=1&theme=dark) -->
+[![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 = [

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": {

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>React Chrono</title>
+    <title>React Chrono UI</title>
   </head>
   <body>
     <div id="root"></div>

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"
     }
   ],

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,
     },

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 });
     });

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,

src/components/contexts/StableContext.tsx

@@ -110,7 +110,7 @@ export const StableContext = createContext<StableContextProps>({
     timelinePointShape: 'circle',
     titleDateFormat: 'MMM DD, YYYY',
     toolbarPosition: 'top',
-    uniqueId: 'react-chrono',
+    uniqueId: 'react-chrono-ui',
     useReadMore: true,
   },
   computedCardHeight: 200,

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;
   }

src/components/timeline/timeline.tsx

@@ -75,7 +75,7 @@ const Timeline: React.FunctionComponent<TimelineModel> = (
 
   // 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],
   );
 

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
 

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

tsconfig.json

@@ -44,5 +44,5 @@
     "cypress",
     "cypress.config.ts"
   ],
-  "files": ["src/react-chrono.ts"]
+  "files": ["src/react-chrono-ui.ts"]
 }