Rename to 'front' for consistency

Author: robmorieson

README.md

@@ -7,7 +7,7 @@
 
 An npm module that allows you to mitigate the negative performance and user
 experience impact of chat tools. `react-live-chat-loader` shows a fake widget
-until the page has become idle or users are ready to interact with chat. Currently works with [Intercom](#intercom), [Help Scout](#help-scout), [Drift](#drift), [Messenger](#messenger), [Userlike](#userlike), [Front](#frontChat) and [Chatwoot](#chatwoot).
+until the page has become idle or users are ready to interact with chat. Currently works with [Intercom](#intercom), [Help Scout](#help-scout), [Drift](#drift), [Messenger](#messenger), [Userlike](#userlike), [Front](#front) and [Chatwoot](#chatwoot).
 
 Made by the team at [♠ Calibre](https://calibreapp.com/), your performance companion.
 
@@ -122,7 +122,7 @@ export const LoadChatButton = () => {
 
 You can pass the following props to the `LiveChatLoaderProvider` provider:
 
-- `provider`: Choose from `helpScout`, `intercom`, `drift`, `frontChat` or `messenger` ([see below](#-supported-providers))
+- `provider`: Choose from `helpScout`, `intercom`, `drift`, `front` or `messenger` ([see below](#-supported-providers))
 - `providerKey`: Provider API Key ([see below](#-supported-providers))
 - `idlePeriod`: How long to wait in ms before loading the provider. Default is
   `2000`. Set to `0` to never load. This value is used in a `setTimeout` in
@@ -348,30 +348,30 @@ You can customise the Chatwoot placeholder by passing the following props to the
 </details>
 
 <details>
-<summary id="frontChat">FrontChat</summary>
+<summary id="front">Front</summary>
 
-To use FrontChat import the `LiveChatLoaderProvider` and set the `provider` prop
-as `frontChat` and the `providerKey` prop as your FrontChat `chatId`.
+To use Front import the `LiveChatLoaderProvider` and set the `provider` prop
+as `front` and the `providerKey` prop as your Front Chat `chatId`.
 
-Then import the `FrontChat` component.
+Then import the `Front` component.
 
 ```jsx
-import { LiveChatLoaderProvider, FrontChat } from 'react-live-chat-loader'
+import { LiveChatLoaderProvider, Front } from 'react-live-chat-loader'
 
 export default () => {
   return (
     <LiveChatLoaderProvider
-      providerKey="YourFrontChat-chatId"
-      provider="frontChat"
+      providerKey="your-front-chat-chatId"
+      provider="front"
     >
       /* ... */
-      <FrontChat />
+      <Front />
     </LiveChatLoaderProvider>
   )
 }
 ```
 
-You can customise the FrontChat placeholder icon by passing the following props to the `FrontChat` component:
+You can customise the Front placeholder icon by passing the following props to the `Front` component:
 
 - `color`: The background color of the placeholder widget.
 - `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`

src/components/FrontChat/index.tsx src/components/Front/index.tsxsrc/components/FrontChat/index.tsx renamed to src/components/Front/index.tsx

@@ -10,8 +10,7 @@ const styles: {
 } = {
   wrapper: {
     position: 'fixed',
-    // z-index is 1 more than FrontChat's actual launcher as when the real widget loads
-    // it might not initially reflect the fake icon's current state (open/closed)
+    // z-index is 1 more than Front's actual launcher as when the real widget loads
     zIndex: 100000000,
     bottom: '20px',
     right: '20px',
@@ -47,7 +46,7 @@ interface Props extends ProviderProps {
   color?: string
 }
 
-const FrontChat = ({
+const Front = ({
   color = '#333333',
   containerClass = ClassNames.container
 }: Props) => {
@@ -115,4 +114,4 @@ const FrontChat = ({
   )
 }
 
-export default FrontChat
+export default Front

src/index.ts

@@ -6,5 +6,5 @@ export { default as Intercom } from './components/Intercom'
 export { default as Messenger } from './components/Messenger'
 export { default as Userlike } from './components/Userlike'
 export { default as Chatwoot } from './components/Chatwoot'
-export { default as FrontChat } from './components/FrontChat'
+export { default as Front } from './components/Front'
 export { default as LiveChatLoaderProvider } from './components/LiveChatLoaderProvider'

src/providers/frontChat.ts src/providers/front.tssrc/providers/frontChat.ts renamed to src/providers/front.ts

@@ -4,4 +4,4 @@ export { default as intercom } from './intercom'
 export { default as messenger } from './messenger'
 export { default as userlike } from './userlike'
 export { default as chatwoot } from './chatwoot'
-export { default as frontChat } from './frontChat'
+export { default as front } from './front'

src/providers/index.ts

@@ -14,4 +14,4 @@ export type Provider =
   | 'drift'
   | 'userlike'
   | 'chatwoot'
-  | 'frontChat'
+  | 'front'

src/types.ts

@@ -34,8 +34,8 @@ const ExampleLinks = () => (
       </Link>
     </li>
     <li>
-      <Link href="/frontchat">
-        <a>FrontChat</a>
+      <Link href="/front">
+        <a>Front</a>
       </Link>
     </li>
   </ul>

website/components/exampleLinks.js

@@ -1,21 +1,21 @@
 import React from 'react'
-import { LiveChatLoaderProvider, FrontChat } from 'react-live-chat-loader'
+import { LiveChatLoaderProvider, Front } from 'react-live-chat-loader'
 import type { NextPage } from 'next'
 
 import Layout from '../layouts/main'
 import ExampleLinks from '../components/exampleLinks'
 
 const Page: NextPage = () => (
   <LiveChatLoaderProvider
-    provider="frontChat"
-    providerKey="68cdc08b45c2d546d827398bb8d0d857"
+    provider="front"
+    providerKey="b2b8dcd0c63c934d363e6704cfa6af86"
   >
-    <Layout title="React Live Chat Loader: FrontChat">
+    <Layout title="React Live Chat Loader: Front">
       <div className="wrapper">
         <div className="inner">
-          <h1>React Live Chat Loader: FrontChat</h1>
+          <h1>React Live Chat Loader: Front</h1>
           <p>
-            This is an example implementation of the FrontChat chat widget using{' '}
+            This is an example implementation of the Front chat widget using{' '}
             <a href="https://github.com/calibreapp/react-live-chat-loader">
               react-live-chat-loader
             </a>
@@ -25,7 +25,7 @@ const Page: NextPage = () => (
           <ExampleLinks />
         </div>
       </div>
-      <FrontChat color="#333333" />
+      <Front color="#333333" />
     </Layout>
   </LiveChatLoaderProvider>
 )