planby Download - planby Source Code Download

وصف

Planby هو عنصر قائم على رد الفعل للتنفيذ السريع لـ EPG ، الجداول الزمنية ، البث المباشر ، أحداث الموسيقى ، الجداول الزمنية والعديد من الأفكار الأخرى. يستخدم طريقة عرض افتراضية مخصصة تتيح لك العمل على عدد كبير من البيانات. يحتوي المكون على واجهة برمجة تطبيقات بسيطة يمكنك الاندماج بسهولة مع مكتبات واجهة المستخدم الجهات الخارجية الأخرى. يتم تخصيص موضوع المكون لاحتياجات تصميم التطبيق.

مثال CODESANDBOX

مثال مباشر - codesandbox

مثال مباشر - TypeScript CodesandBox

مثال مباشر - موقع الويب مع لوحة تحكم

شهادات

كن راعيا!

كن راعياً ودعمًا ومساعدتنا في مواصلة تطورنا. -> opencollective

ابدء

تثبيت

غزل

yarn add planby

npm install planby

الاستخدام

 import { useEpg , Epg , Layout } from 'planby' ;

const channels = React . useMemo (
  ( ) => [
    {
      logo : 'https://via.placeholder.com' ,
      uuid : '10339a4b-7c48-40ab-abad-f3bcaf95d9fa' ,
      ...
    } ,
  ] ,
  [ ]
) ;

const epg = React . useMemo (
  ( ) => [
    {
      channelUuid : '30f5ff1c-1346-480a-8047-a999dd908c1e' ,
      description :
        'Ut anim nisi consequat minim deserunt...' ,
      id : 'b67ccaa3-3dd2-4121-8256-33dbddc7f0e6' ,
      image : 'https://via.placeholder.com' ,
      since : "2022-02-02T23:50:00" ,
      till : "2022-02-02T00:55:00" ,
      title : 'Title' ,
      ...
    } ,
  ] ,
  [ ]
) ;

const {
  getEpgProps ,
  getLayoutProps ,
  onScrollToNow ,
  onScrollLeft ,
  onScrollRight ,
} = useEpg ( {
  epg ,
  channels ,
  startDate : '2022/02/02' , // or 2022-02-02T00:00:00
} ) ;

return (
  < div >
    < div style = { { height : '600px' , width : '1200px' } } >
      < Epg { ... getEpgProps ( ) } >
        < Layout
          { ... getLayoutProps ( ) }
        />
      </ Epg >
    </ div >
  </ div >
) ;

أو

العرض المخصص والارتفاع

 const {
  getEpgProps ,
  getLayoutProps ,
  ...
} = useEpg ( {
  epg ,
  channels ,
 startDate : '2022/02/02' , // or 2022-02-02T00:00:00
  width : 1200 ,
  height : 600
} ) ;

return (
  < div >
     < Epg { ... getEpgProps ( ) } >
        < Layout
          { ... getLayoutProps ( ) }
        />
      </ Epg >
  </ div >

أو

نطاق الوقت

 const {
  getEpgProps ,
  getLayoutProps ,
  ...
} = useEpg ( {
  epg ,
  channels ,
  startDate : '2022-02-02T10:00:00' ,
  endDate : '2022-02-02T20:00:00' ,
  width : 1200 ,
  height : 600
} ) ;

return (
  < div >
     < Epg { ... getEpgProps ( ) } >
        < Layout
          { ... getLayoutProps ( ) }
        />
      </ Epg >
  </ div >

API

useepg

خيارات

الخيارات المتاحة في usepg

ملكية	يكتب	حالة	وصف	وصول
`channels`	`array`	مطلوب	صفيف مع بيانات القنوات
`epg`	`array`	مطلوب	صفيف مع بيانات EPG
`width`	`number`	خياري	عرض EPG
`height`	`number`	خياري	ارتفاع EPG
`sidebarWidth`	`number`	خياري	عرض الشريط الجانبي مع القنوات
`timelineHeight`	`number`	خياري	ارتفاع الجدول الزمني	`PRO`
`itemHeight`	`number`	خياري	ارتفاع القنوات والبرامج في EPG. القيمة الافتراضية هي 80
`dayWidth`	`number`	خياري	عرض اليوم. القيمة الافتراضية هي 7200. حساب لإعداد عرض اليوم مع قيمة عرض الساعة الخاصة ، على سبيل المثال ، 24H * 300px (عرض ساعة مخصصة) = 7200px -> `dayWidth`
`startDate`	`string`	خياري	تاريخ التاريخ `2022/02/02` أو `2022-02-02T00:00:00` . يمكنك تعيين وقت البدء الخاص بك ، على سبيل المثال ، `2022-02-02T10:00:00` ، `2022-02-02T14:00:00` ، إلخ. ساعات الساعة الكاملة فقط
`endDate`	`string`	خياري	تنسيق التاريخ `2022-02-02T00:00:00` ، `2022-02-02T20:00:00` ، وما إلى ذلك ، يجب أن تكون في نفس فترة 24 ساعة مثل `startDate` . ساعات ساعة كاملة فقط. قم بالتمرير خلال `multiple days` ويتوفر وضع الجدول الزمني فقط في الخطة `PRO` .	`PRO`
`hoursInDays`	`array`	خياري	اضبط وقت البدء ووقت الانتهاء من كل يوم في `multiple days` إذا كانت بياناتك لكل يوم تحتوي على مسافات زمنية بين العناصر في اليوم.	`PRO`
`initialScrollPositions`	`object`	خياري	تعيين موضع التمرير الأولي في التصميم ، على سبيل المثال ، `initialScrollPositions: { top: 500, left: 800 }`	`PRO`
`liveRefreshTime`	`number`	خياري	حية تحديث وقت الأحداث. القيمة الافتراضية هي 120 ثانية.	`PRO`
`isBaseTimeFormat`	`boolean`	خياري	تحويل إلى تنسيق لمدة 12 ساعة ، على سبيل المثال ، `2:00am` ، `4:00pm` ، إلخ. القيمة الافتراضية خاطئة.
`isCurrentTime`	`boolean`	خياري	إظهار الوقت الحالي في الجدول الزمني. القيمة الافتراضية خاطئة.	`PRO`
`isInitialScrollToNow`	`boolean`	خياري	قم بالتمرير إلى العنصر المباشر الحالي.	`PRO`
`isVerticalMode`	`boolean`	خياري	إظهار الجدول الزمني في عرض عمودي. القيمة الافتراضية خاطئة.	`PRO`
`isResize`	`boolean`	خياري	إمكانية تغيير حجم العنصر.	`PRO`
`isSidebar`	`boolean`	خياري	عرض/إخفاء الشريط الجانبي
`isTimeline`	`boolean`	خياري	عرض/إخفاء الجدول الزمني
`isLine`	`boolean`	خياري	إظهار/إخفاء الخط
`isRTL`	`boolean`	خياري	تغيير الاتجاه إلى RTL أو LTR. القيمة الافتراضية خاطئة.	`PRO`
`theme`	`object`	خياري	اعتراض مع مخطط الموضوع
`timezone`	`object`	خياري	تحويل البيانات وعرضها من تنسيق UTC إلى منطقتك الزمنية الخاصة بك	`PRO`
`areas`	`array`	خياري	تعطي المنطقة إمكانيات لإضافة نطاقات الحقل إلى تخطيط الجدول الزمني.	`PRO`
`mode`	`object`	خياري	نوع القيم: `day/week/month` . قيم النمط: `default/modern` تحديد وضع وأسلوب الجدول الزمني. الوضع الافتراضي هو `day` والأناقة `default`	`PRO`
`overlap`	`object`	خياري	تمكين العنصر يتداخل في التصميم. قيم الوضع: `stack/layer` ، LayerOverlAplevel: `number`	`PRO`
`drag and drop`	`object`	خياري	اسحب ونقل العنصر في التصميم. قيم الوضع: `row/multi-rows`	`PRO`
`grid layout`	`object`	خياري	شبكة الخلفية على التصميم. وضع Hoverhighlight القيم: `true/false` ، OnGridItemClick: وظيفة مع جميع الخصائص على شبكة العنصر النقر فوق	`PRO`
`channelMapKey`	`string`	خياري	يمكن التحكم في سمة `uuid` القناة بواسطة Prop. تعطي الخريطة الرئيسية إمكانيات لاستخدام دعامة محددة من البيانات الخاصة بدلاً من الحاجة إلى تعيين إلى UUID في البيانات الخاصة	`PRO`
`programChannelMapKey`	`string`	خياري	يمكن السيطرة على سمات `channelUuid` للبرامج بواسطة Prop. تعطي الخريطة الرئيسية إمكانيات لاستخدام دعامة محددة من البيانات الخاصة بدلاً من الحاجة إلى تحديد الخريطة إلى القناة في بياناتك	`PRO`
`globalStyles`	`string`	خياري	حقن الأنماط العالمية المخصصة والخط. وزن الخط: 400،500،600. الخط الافتراضي هو "inter"	`PRO`

ملاحظة حول الدعائم العرض والارتفاع

دون إعلان خصائص width length ، يأخذ المكون أبعاد العنصر الأصل.

Globalstyles

حقن الخط المخصص الخاص والأساليب العالمية الأخرى.

 const globalStyles = `
  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

/* Available in PRO plan */
 .planby {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  /* Layout */
  .planby-layout {}

  /* Line */
  .planby-line {}

  /* Current time */
  .planby-current-time {}
  .planby-current-content {}

  /* Channels */
  .planby-channels {}

  /* Channel */
  .planby-channel {}

  /* Program */
  .planby-program {}
  .planby-program-content {}
  .planby-program-flex {}
  .planby-program-stack {}
  .planby-program-title {}
  .planby-program-text {}

  /* Timeline */
  .planby-timeline-wrapper {}
  .planby-timeline-box {}
  .planby-timeline-time {}
  .planby-timeline-dividers {}
  .planby-timeline-wrapper {}
}
  
` ;

خصائص مثيل

العقارات التي تم إرجاعها من useepg

ملكية	يكتب	وصف
`scrollY`	`number`	قيمة التمرير الحالية y
`scrollX`	`number`	قيمة التمرير الحالية x
`onScrollLeft`	`function(value: number)`	القيمة الافتراضية هي 300
`onScrollRight`	`function(value: number)`	القيمة الافتراضية هي 300
`onScrollToNow`	`function()`	قم بالتمرير إلى الوقت الحالي/البرامج الحية
`onScrollTop`	`function(value: number)`	القيمة الافتراضية هي 300

مخطط القناة

ملكية	يكتب	حالة
`logo`	`string`	مطلوب
`uuid`	`string`	مطلوب

مخطط EPG

ملكية	يكتب	حالة	وصف	وصول
`channelUuid`	`string`	مطلوب
`id`	`string`	مطلوب
`image`	`string`	مطلوب
`since`	`string`	مطلوب
`till`	`string`	مطلوب
`title`	`string`	مطلوب
`fixedVisibility`	`boolean`	خياري	العنصر مرئي دائمًا في التصميم أثناء أحداث التمرير	الرعاة

EPG

الدعائم الأساسية

الدعائم المتاحة في EPG

ملكية	يكتب	وصف	حالة
`isLoading`	`boolean`	دولة اللودر	خياري
`loader`	`Component`	مكون مخصص لوادر	خياري

تَخطِيط

الدعائم الأساسية

الدعائم المتاحة في التصميم.

ملكية	يكتب	وصف	حالة	وصول
`renderProgram`	`function({ program: { data: object, position: object})`	يحتوي كائن `data` على جميع الخصائص المتعلقة بالبرنامج ، ويشمل كائن `position` جميع أنماط الموضع	خياري
`renderChannel`	`function({ channel: { ..., position: object})`	يحتوي كائن `channel` على جميع الخصائص المتعلقة بالقناة ، ويشمل كائن `position` جميع أنماط الموضع	خياري
`renderTimeline`	`function({sidebarWidth: number})`	قيمة `sidebarWidth` لعرض الشريط الجانبي للقناة	خياري
`renderLine`	`function({styles: object})`	`styles` الأساسية وقيم `position` لخط التتبع المباشر المخصص	خياري	`Sponsors`
`renderCurrentTime`	`function({styles: object, isRTL: boolean, isBaseTimeFormat: boolean, time: string})`	قيم `styles` الأساسية للوقت الحالي المخصص	خياري	`Sponsors`

تقديم وظائف

يمكنك استخدام مكونات نمط Plaby لتطوير الميزات الرئيسية. علاوة على ذلك ، يمكنك الاندماج مع مكتبة واجهة المستخدم من طرف ثالث على سبيل المثال. chakra ui ، واجهة المستخدم المادية وغيرها أو صنع أنماط مخصصة.

RenderProgram

فيما يلي مثال يتيح لك تقديم مكون البرنامج المخصص الخاص بك باستخدام مكونات نمط PLABY.

 import {
  useEpg ,
  Epg ,
  Layout ,
  ProgramBox ,
  ProgramContent ,
  ProgramFlex ,
  ProgramStack ,
  ProgramTitle ,
  ProgramText ,
  ProgramImage ,
  useProgram ,
  Program ,
  ProgramItem
} from "planby" ;


const Item = ( { program , ... rest } : ProgramItem ) => {
  const { styles , formatTime , isLive , isMinWidth } = useProgram ( { program , ... rest } ) ;

  const { data } = program ;
  const { image , title , since , till } = data ;

  const sinceTime = formatTime ( since ) ;
  const tillTime = formatTime ( till ) ;

  return (
    < ProgramBox width = { styles . width } style = { styles . position } >
      < ProgramContent
        width = { styles . width }
        isLive = { isLive }
      >
        < ProgramFlex >
          { isLive && isMinWidth && < ProgramImage src = { image } alt = "Preview" /> }
          < ProgramStack >
            < ProgramTitle > { title } </ ProgramTitle >
            < ProgramText >
              { sinceTime } - { tillTime }
            </ ProgramText >
          </ ProgramStack >
        </ ProgramFlex >
      </ ProgramContent >
    </ ProgramBox >
  ) ;
} ;

function App ( ) {

  ...

 const {
  getEpgProps ,
  getLayoutProps ,
} = useEpg ( {
  epg ,
  channels ,
  startDate : '2022/02/02' , // or 2022-02-02T00:00:00
} ) ;

return (
  < div >
    < div style = { { height : '600px' , width : '1200px' } } >
      < Epg { ... getEpgProps ( ) } >
        < Layout
            { ... getLayoutProps ( ) }
            renderProgram = { ( { program , ... rest } ) => (
              < Item key = { program . data . id } program = { program } { ... rest } />
            ) }
          />
      </ Epg >
    </ div >
  </ div >
) ;
}

export default App ;

RenderProgram - تنسيق الوقت 12 ساعة

فيما يلي مثال يتيح لك تقديم مكون البرنامج المخصص الخاص بك بتنسيق زمني لمدة 12 ساعة باستخدام مكونات نمط PLABY.

...
const Item = ( { program , ... rest } : ProgramItem ) => {
  const {
    styles ,
    formatTime ,
    set12HoursTimeFormat ,
    isLive ,
    isMinWidth ,
  } = useProgram ( {
    program ,
    ... rest
  } ) ;

  const { data } = program ;
  const { image , title , since , till } = data ;

  const sinceTime = formatTime ( since , set12HoursTimeFormat ( ) ) . toLowerCase ( ) ;
  const tillTime = formatTime ( 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 >
            < 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 ;

RenderProgram - اتجاه RTL

فيما يلي مثال يتيح لك تقديم مكون البرنامج المخصص الخاص بك مع اتجاه RTL باستخدام مكونات نمط PLABY.

...
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

فيما يلي مثال يتيح لك تقديم مكون القناة المخصص الخاص بك باستخدام مكونات نمط PLABY.

 import { useEpg , Epg , Layout , ChannelBox , ChannelLogo , Channel } from 'planby' ;

interface ChannelItemProps {
  channel : Channel ;
}

const ChannelItem = ( { channel } : ChannelItemProps ) => {
  const { position , logo } = channel ;
  return (
    < ChannelBox { ... position } >
      < ChannelLogo
        onClick = { ( ) => console . log ( 'channel' , channel ) }
        src = { logo }
        alt = "Logo"
      />
    </ ChannelBox >
  ) ;
} ;


function App ( ) {

  ...

  const {
    getEpgProps ,
    getLayoutProps ,
  } = useEpg ( {
    epg ,
    channels ,
    startDate : '2022/02/02' , // or 2022-02-02T00:00:00
  } ) ;

  return (
    < div >
      < div style = { { height : '600px' , width : '1200px' } } >
        < Epg { ... getEpgProps ( ) } >
          < Layout
              { ... getLayoutProps ( ) }
              renderChannel = { ( { channel } ) => (
              < ChannelItem key = { channel . uuid } channel = { channel } />
            ) }
            />
        </ Epg >
      </ div >
    </ div >
  ) ;
}

Rendertimeline

فيما يلي مثال يتيح لك تقديم مكونك الزمني المخصص باستخدام مكونات نمط PLABY.

 import {
  TimelineWrapper ,
  TimelineBox ,
  TimelineTime ,
  TimelineDivider ,
  TimelineDividers ,
  useTimeline ,
} from 'planby' ;

interface TimelineProps {
  isBaseTimeFormat : boolean ;
  isSidebar : boolean ;
  dayWidth : number ;
  hourWidth : number ;
  numberOfHoursInDay : number ;
  offsetStartHoursRange : number ;
  sidebarWidth : number ;
}

export function Timeline ( {
  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 >
        { formatTime ( index + offsetStartHoursRange ) . toLowerCase ( ) }
      </ TimelineTime >
      < TimelineDividers > { renderDividers ( ) } </ TimelineDividers >
    </ TimelineBox >
  ) ;

  const renderDividers = ( ) =>
    dividers . map ( ( _ , index ) => (
      < TimelineDivider key = { index } width = { hourWidth } />
    ) ) ;

  return (
    < TimelineWrapper
      dayWidth = { dayWidth }
      sidebarWidth = { sidebarWidth }
      isSidebar = { isSidebar }
    >
      { time . map ( ( _ , index ) => renderTime ( index ) ) }
    </ TimelineWrapper >
  ) ;
}

function App ( ) {

  ...

  const {
    getEpgProps ,
    getLayoutProps ,
  } = useEpg ( {
    epg ,
    channels ,
    startDate : '2022/02/02' , // or 2022-02-02T00:00:00
  } ) ;

  return (
    < div >
      < div style = { { height : '600px' , width : '1200px' } } >
        < Epg { ... getEpgProps ( ) } >
          < Layout
              { ... getLayoutProps ( ) }
              renderTimeline = { ( props ) => < Timeline { ... props } /> }
            />
        </ Epg >
      </ div >
    </ div >
  ) ;
}

export default App ;

Rendertimeline - اتجاه RTL

فيما يلي مثال يتيح لك تقديم مكونك الزمني المخصص باستخدام مكونات نمط PLABY.

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

 ...
}

سمة

مخطط

اجعل موضوعك مخصصًا. فيما يلي مخطط السمة الذي يمكنك اجتيازه كأحد الخيارات useEpg Hook.

 const theme = {
  primary : {
    600 : '#1a202c' ,
    900 : '#171923' ,
  } ,
  grey : { 300 : '#d1d1d1' } ,
  white : '#fff' ,
  green : {
    300 : '#2C7A7B' ,
  } ,
  loader : {
    teal : '#5DDADB' ,
    purple : '#3437A2' ,
    pink : '#F78EB6' ,
    bg : '#171923db' ,
  } ,
  scrollbar : {
    border : '#ffffff' ,
    thumb : {
      bg : '#e1e1e1' ,
    } ,
  } ,
  gradient : {
    blue : {
      300 : '#002eb3' ,
      600 : '#002360' ,
      900 : '#051937' ,
    } ,
  } ,
  text : {
    grey : {
      300 : '#a0aec0' ,
      500 : '#718096' ,
    } ,
  } ,
  timeline : {
    divider : {
      bg : '#718096' ,
    } ,
  } ,
} ;

جميع خيارات الاستيراد

 import {
  Epg ,
  Layout ,
  ChannelBox ,
  ChannelLogo ,
  ProgramBox ,
  ProgramContent ,
  ProgramFlex ,
  ProgramStack ,
  ProgramTitle ,
  ProgramText ,
  ProgramImage ,
  TimelineWrapper ,
  TimelineBox ,
  TimelineTime ,
  TimelineDividers ,
  useEpg ,
  useProgram ,
  useTimeline ,
  Program , // Interface
  Channel , // Interface
  ProgramItem , // Interface for program render
  Theme , // Interface
} from 'planby' ;

رخصة

اتصال

Karol Kozer - Kozerkarol_twitter

رابط المشروع: https://github.com/karolkozer/planby

يوسع