Merge branch 'develop'

README.md

@@ -201,6 +201,7 @@ Available options in useEpg
 | `isSidebar`        | `boolean` | optional | Show/hide sidebar                                                                                                                                                |
 | `isTimeline`       | `boolean` | optional | Show/hide timeline                                                                                                                                               |
 | `isLine`           | `boolean` | optional | Show/hide line                                                                                                                                                   |
+| `isRTL`            | `boolean` | optional | Change direction to RTL or LTR. Default value is false                                                                                                           |
 | `theme`            | `object`  | optional | Object with theme schema                                                                                                                                         |
 
 #### Note about width and height props
@@ -412,6 +413,76 @@ function App() {
 export default App;
 ```
 
+## renderProgram - RTL direction
+
+Below is an example that allows you to render your custom Program component with RTL direction using Plaby's style components.
+
+```tsx
+...
+const Item = ({ program, ...rest }: ProgramItem) => {
+  const {
+    isRTL,
+    isLive,
+    isMinWidth,
+    formatTime,
+    styles,
+    set12HoursTimeFormat,
+    getRTLSinceTime,
+    getRTLTillTime,
+  } = useProgram({
+    program,
+    ...rest
+  });
+
+  const { data } = program;
+  const { image, title, since, till } = data;
+
+  const sinceTime = formatTime(
+    getRTLSinceTime(since),
+    set12HoursTimeFormat()
+  ).toLowerCase();
+  const tillTime = formatTime(
+    getRTLTillTime(till),
+    set12HoursTimeFormat()
+  ).toLowerCase();
+
+  return (
+    <ProgramBox width={styles.width} style={styles.position}>
+      <ProgramContent width={styles.width} isLive={isLive}>
+        <ProgramFlex>
+          {isLive && isMinWidth && <ProgramImage src={image} alt="Preview" />}
+          <ProgramStack isRTL={isRTL}>
+            <ProgramTitle>{title}</ProgramTitle>
+            <ProgramText>
+              {sinceTime} - {tillTime}
+            </ProgramText>
+          </ProgramStack>
+        </ProgramFlex>
+      </ProgramContent>
+    </ProgramBox>
+  );
+};
+
+function App() {
+
+  ...
+
+ const {
+  getEpgProps,
+  getLayoutProps,
+} = useEpg({
+  epg,
+  channels,
+  isBaseTimeFormat: true,
+  startDate: '2022/02/02', // or 2022-02-02T00:00:00
+});
+
+...
+}
+
+export default App;
+```
+
 ## renderChannel
 
 Below is an example that allows you to render your custom Channel component using Plaby's style components.
@@ -561,6 +632,60 @@ function App() {
 export default App;
 ```
 
+## renderTimeline - RTL direction
+
+Below is an example that allows you to render your custom Timeline component using Plaby's style components.
+
+```tsx
+import {
+  TimelineWrapper,
+  TimelineBox,
+  TimelineTime,
+  TimelineDivider,
+  TimelineDividers,
+  useTimeline,
+} from 'planby';
+
+interface TimelineProps {
+  isRTL: boolean;
+  isBaseTimeFormat: boolean;
+  isSidebar: boolean;
+  dayWidth: number;
+  hourWidth: number;
+  numberOfHoursInDay: number;
+  offsetStartHoursRange: number;
+  sidebarWidth: number;
+}
+
+export function Timeline({
+  isRTL,
+  isBaseTimeFormat,
+  isSidebar,
+  dayWidth,
+  hourWidth,
+  numberOfHoursInDay,
+  offsetStartHoursRange,
+  sidebarWidth,
+}: TimelineProps) {
+  const { time, dividers, formatTime } = useTimeline(
+    numberOfHoursInDay,
+    isBaseTimeFormat
+  );
+
+  const renderTime = (index: number) => (
+    <TimelineBox key={index} width={hourWidth}>
+      <TimelineTime isBaseTimeFormat={isBaseTimeFormat} isRTL={isRTL}>
+        {formatTime(index + offsetStartHoursRange).toLowerCase()}
+      </TimelineTime>
+      <TimelineDividers>{renderDividers()}</TimelineDividers>
+    </TimelineBox>
+  );
+
+ ...
+}
+
+```
+
 ## Theme
 
 ### Schema

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planby",
   "author": "Karol Kozer",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "MIT",
   "repository": {
     "type": "git",

src/Epg/Epg.tsx

@@ -16,6 +16,7 @@ import { Loader } from "./components";
 interface EpgProps {
   width?: number;
   height?: number;
+  isRTL?: boolean;
   isSidebar: boolean;
   isTimeline?: boolean;
   isLoading?: boolean;
@@ -35,6 +36,7 @@ export const Epg = React.forwardRef<HTMLDivElement, EpgProps>(
       height,
       theme,
       sidebarWidth,
+      isRTL = false,
       isSidebar = true,
       isTimeline = true,
       isLoading = false,
@@ -57,6 +59,7 @@ export const Epg = React.forwardRef<HTMLDivElement, EpgProps>(
           <Wrapper>
             {isSidebar && isTimeline && (
               <Box
+                isRTL={isRTL}
                 width={sidebarWidth}
                 height={TIMELINE_HEIGHT}
                 left={0}

src/Epg/components/Channels.tsx

@@ -1,27 +1,28 @@
-import * as React from 'react';
+import * as React from "react";
 // Import interfaces
-import { ChannelWithPosiiton } from '../helpers/types';
+import { ChannelWithPosiiton } from "../helpers/types";
 
 // Import styles
-import { ChannelsStyled } from '../styles';
+import { ChannelsStyled } from "../styles";
 
 // Import Components
-import { Channel } from '../components';
+import { Channel } from "../components";
 
 interface ChannelsProps {
+  isTimeline: boolean;
+  isRTL: boolean;
+  isChannelVisible: (position: any) => boolean;
   channels: ChannelWithPosiiton[];
   scrollY: number;
   sidebarWidth: number;
-  isTimeline: boolean;
-  isChannelVisible: (position: any) => boolean;
   renderChannel?: (v: { channel: ChannelWithPosiiton }) => React.ReactNode;
 }
 
 const { Box } = ChannelsStyled;
 
 export function Channels(props: ChannelsProps) {
   const { channels, scrollY, sidebarWidth, renderChannel } = props;
-  const { isTimeline, isChannelVisible } = props;
+  const { isRTL, isTimeline, isChannelVisible } = props;
 
   const renderChannels = (channel: ChannelWithPosiiton) => {
     const isVisible = isChannelVisible(channel.position);
@@ -35,8 +36,9 @@ export function Channels(props: ChannelsProps) {
   return (
     <Box
       data-testid="sidebar"
-      width={sidebarWidth}
+      isRTL={isRTL}
       isTimeline={isTimeline}
+      width={sidebarWidth}
       bottom={scrollY}
     >
       {channels.map(renderChannels)}

src/Epg/components/Layout.tsx

@@ -20,12 +20,13 @@ import { EpgStyled } from "../styles";
 import { Timeline, Channels, Program, Line } from "../components";
 
 interface RenderTimeline {
+  isBaseTimeFormat: BaseTimeFormat;
+  isSidebar: boolean;
+  isRTL: boolean;
   sidebarWidth: number;
   hourWidth: number;
   numberOfHoursInDay: number;
   offsetStartHoursRange: number;
-  isBaseTimeFormat: BaseTimeFormat;
-  isSidebar: boolean;
   dayWidth: number;
 }
 
@@ -44,6 +45,7 @@ interface LayoutProps {
   onScroll: (
     e: React.UIEvent<HTMLDivElement, UIEvent> & { target: Element }
   ) => void;
+  isRTL?: boolean;
   isBaseTimeFormat?: BaseTimeFormat;
   isSidebar?: boolean;
   isTimeline?: boolean;
@@ -52,6 +54,7 @@ interface LayoutProps {
   isChannelVisible: (position: Pick<Position, "top">) => boolean;
   renderProgram?: (v: {
     program: ProgramItem;
+    isRTL: boolean;
     isBaseTimeFormat: BaseTimeFormat;
   }) => React.ReactNode;
   renderChannel?: (v: { channel: ChannelWithPosiiton }) => React.ReactNode;
@@ -70,6 +73,7 @@ export const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(
       isTimeline = true,
       isLine = true,
       isBaseTimeFormat = false,
+      isRTL = false,
     } = props;
 
     const {
@@ -97,11 +101,13 @@ export const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(
         if (renderProgram)
           return renderProgram({
             program: options,
+            isRTL,
             isBaseTimeFormat,
           });
         return (
           <Program
             key={program.data.id}
+            isRTL={isRTL}
             isBaseTimeFormat={isBaseTimeFormat}
             program={options}
           />
@@ -112,9 +118,10 @@ export const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(
 
     const renderTopbar = () => {
       const props = {
+        sidebarWidth,
+        isSidebar,
+        isRTL,
         dayWidth,
-        sidebarWidth: sidebarWidth,
-        isSidebar: isSidebar,
         numberOfHoursInDay,
       };
       const timeProps = {
@@ -130,7 +137,7 @@ export const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(
     };
 
     return (
-      <ScrollBox ref={scrollBoxRef} onScroll={onScroll}>
+      <ScrollBox isRTL={isRTL} ref={scrollBoxRef} onScroll={onScroll}>
         {isLine && isFuture && (
           <Line
             dayWidth={dayWidth}
@@ -144,9 +151,10 @@ export const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(
         {isTimeline && renderTopbar()}
         {isSidebar && (
           <Channels
-            sidebarWidth={sidebarWidth}
+            isRTL={isRTL}
             isTimeline={isTimeline}
             isChannelVisible={isChannelVisible}
+            sidebarWidth={sidebarWidth}
             channels={channels as ChannelWithPosiiton[]}
             scrollY={scrollY}
             renderChannel={renderChannel}

src/Epg/components/Program.tsx

@@ -14,8 +14,9 @@ import { ProgramStyled } from "../styles";
 import { useProgram } from "../hooks";
 
 interface ProgramProps<T> {
-  program: T;
+  isRTL?: boolean;
   isBaseTimeFormat: BaseTimeFormat;
+  program: T;
   onClick?: (v: ProgramType) => void;
 }
 
@@ -31,26 +32,37 @@ const {
 
 export function Program<T extends ProgramItem>({
   program,
-  isBaseTimeFormat,
   onClick,
   ...rest
 }: ProgramProps<T>) {
   const {
+    isRTL,
+    isLive,
+    isMinWidth,
     styles,
     formatTime,
     set12HoursTimeFormat,
-    isLive,
-    isMinWidth,
+    getRTLSinceTime,
+    getRTLTillTime,
   } = useProgram({
     program,
-    isBaseTimeFormat,
+    ...rest,
   });
 
   const { data } = program;
   const { image, title, since, till } = data;
 
   const handleOnContentClick = () => onClick?.(data);
 
+  const sinceTime = formatTime(
+    getRTLSinceTime(since),
+    set12HoursTimeFormat()
+  ).toLowerCase();
+  const tillTime = formatTime(
+    getRTLTillTime(till),
+    set12HoursTimeFormat()
+  ).toLowerCase();
+
   return (
     <ProgramBox
       data-testid="program-item"
@@ -66,11 +78,10 @@ export function Program<T extends ProgramItem>({
       >
         <ProgramFlex>
           {isLive && isMinWidth && <ProgramImage src={image} alt="Preview" />}
-          <ProgramStack>
+          <ProgramStack isRTL={isRTL}>
             <ProgramTitle>{title}</ProgramTitle>
             <ProgramText aria-label="program time">
-              {formatTime(since, set12HoursTimeFormat())} -{" "}
-              {formatTime(till, set12HoursTimeFormat())}
+              {sinceTime} - {tillTime}
             </ProgramText>
           </ProgramStack>
         </ProgramFlex>