Merge branch 'release/v0.1'

znacer · Feb 6, 2024 · 6b4e5a2 · 6b4e5a2
2 parents f6a4888 + dce7813
commit 6b4e5a2
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 52 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bitnoi.se/react-scheduler",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "type": "module",
   "license": "MIT",
   "repository": {

diff --git a/readme.md b/readme.md
@@ -7,6 +7,8 @@
     Open sourced, typescript oriented, light-weight, and ultra fast React Component for creating gantt charts.
   </p>
   <div align="center">
+    <a href="https://bit.ly/react_scheduler">Youtube Tutorial</a>
+    <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
     <a href="https://www.npmjs.com/package/@bitnoi.se/react-scheduler">npm</a>
     <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
     <a href="https://github.com/Bitnoise/react-scheduler/issues/new">Report an issue</a>
@@ -18,9 +20,9 @@
 
 ```bash
 # yarn
-yarn add @bitnoi.se/react-scheduler
+yarn add '@bitnoi.se/react-scheduler'
 # npm
-npm install @bitnoi.se/react-scheduler
+npm install '@bitnoi.se/react-scheduler'
 ```
 
 ### Example usage
@@ -150,7 +152,7 @@ array of chart rows with shape of
 | Property Name | Type | Description |
 | -------- | --------------------- | -------------------------------- |
 | id | `string` | unique row id |
-| label | `string` | row's label, `e.g person's name` |
+| label | `SchedulerRowLabel` | row's label, `e.g person's name, surname, icon` |
 | data | `Array<ResourceItem>` | array of `resources` |
 
 ##### Left Colum Item Data

diff --git a/src/App.tsx b/src/App.tsx
@@ -58,7 +58,6 @@ function App() {
   return (
     <>
       <ConfigPanel values={values} onSubmit={setValues} />
-
       {isFullscreen ? (
         <Scheduler
           startDate={values.startDate ? new Date(values.startDate).toISOString() : undefined}

diff --git a/src/components/Calendar/Grid/Grid.tsx b/src/components/Calendar/Grid/Grid.tsx
@@ -3,6 +3,7 @@ import { drawGrid } from "@/utils/drawGrid/drawGrid";
 import { boxHeight, canvasWrapperId, leftColumnWidth, screenWidthMultiplier } from "@/constants";
 import { Loader, Tiles } from "@/components";
 import { useCalendar } from "@/context/CalendarProvider";
+import { resizeCanvas } from "@/utils/resizeCanvas";
 import { GridProps } from "./types";
 import { StyledCanvas, StyledInnerWrapper, StyledSpan, StyledWrapper } from "./styles";
 
@@ -17,7 +18,9 @@ const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(
 
   const handleResize = useCallback(
     (ctx: CanvasRenderingContext2D) => {
-      ctx.canvas.width = window.innerWidth * screenWidthMultiplier;
+      const width = window.innerWidth * screenWidthMultiplier;
+      const height = rows * boxHeight + 1;
+      resizeCanvas(ctx, width, height);
       drawGrid(ctx, zoom, rows, cols, startDate);
     },
     [cols, startDate, rows, zoom]
@@ -42,8 +45,6 @@ const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
-    ctx.canvas.height = rows * boxHeight + 1;
-
     handleResize(ctx);
   }, [date, rows, zoom, handleResize]);
 

diff --git a/src/components/Calendar/Header/Header.tsx b/src/components/Calendar/Header/Header.tsx
@@ -1,8 +1,9 @@
 import { FC, useCallback, useEffect, useRef } from "react";
-import { boxHeight, headerHeight, screenWidthMultiplier, canvasHeaderWrapperId } from "@/constants";
+import { headerHeight, screenWidthMultiplier, canvasHeaderWrapperId } from "@/constants";
 import { useCalendar } from "@/context/CalendarProvider";
 import { useLanguage } from "@/context/LocaleProvider";
 import { drawHeader } from "@/utils/drawHeader/drawHeader";
+import { resizeCanvas } from "@/utils/resizeCanvas";
 import { HeaderProps } from "./types";
 import { StyledCanvas, StyledOuterWrapper, StyledWrapper } from "./styles";
 import Topbar from "./Topbar";
@@ -14,8 +15,9 @@ const Header: FC<HeaderProps> = ({ zoom, topBarWidth }) => {
 
   const handleResize = useCallback(
     (ctx: CanvasRenderingContext2D) => {
-      ctx.canvas.width = window.innerWidth * screenWidthMultiplier;
-      ctx.canvas.height = headerHeight + 1;
+      const width = window.innerWidth * screenWidthMultiplier;
+      const height = headerHeight + 1;
+      resizeCanvas(ctx, width, height);
 
       drawHeader(ctx, zoom, cols, startDate, week, dayOfYear);
     },
@@ -39,8 +41,6 @@ const Header: FC<HeaderProps> = ({ zoom, topBarWidth }) => {
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
-    ctx.canvas.height = boxHeight + headerHeight;
-
     handleResize(ctx);
   }, [date, zoom, handleResize]);
 

diff --git a/src/components/Calendar/Header/Topbar/styles.ts b/src/components/Calendar/Header/Topbar/styles.ts
@@ -6,6 +6,9 @@ const resetBtnStyles = `
   background: none;
   outline: none;
   border: none;
+  font-size: 100%;
+  line-height: 1.15
+  margin: 0
 `;
 
 export const Wrapper = styled.div<TopbarProps>`

diff --git a/src/components/ConfigPanel/styles.ts b/src/components/ConfigPanel/styles.ts
@@ -1,13 +1,13 @@
 import styled from "styled-components";
-import { leftColumnWidth } from "@/constants";
 
 type WrapperProps = {
   isExpanded: boolean;
 };
 
 export const StyledWrapper = styled.div<WrapperProps>`
+  box-sizing: border-box;
+  font-family: Inter;
   padding: 0 0.5rem;
-  width: ${leftColumnWidth}px;
   height: 125px;
   position: fixed;
   top: ${({ isExpanded }) => (isExpanded ? 0 : "-129px")};

diff --git a/src/components/Scheduler/Scheduler.tsx b/src/components/Scheduler/Scheduler.tsx
@@ -4,7 +4,7 @@ import dayjs from "dayjs";
 import { Calendar } from "@/components";
 import CalendarProvider from "@/context/CalendarProvider";
 import LocaleProvider from "@/context/LocaleProvider";
-import { theme } from "@/styles";
+import { GlobalStyle, theme } from "@/styles";
 import { Config } from "@/types/global";
 import { outsideWrapperId } from "@/constants";
 import { SchedulerProps } from "./types";
@@ -51,32 +51,35 @@ const Scheduler = ({
 
   if (!outsideWrapperRef.current) null;
   return (
-    <ThemeProvider theme={theme}>
-      <LocaleProvider lang={appConfig.lang}>
-        <CalendarProvider
-          data={data}
-          isLoading={!!isLoading}
-          config={appConfig}
-          onRangeChange={onRangeChange}
-          defaultStartDate={defaultStartDate}
-          onFilterData={onFilterData}
-          onClearFilterData={onClearFilterData}>
-          <StyledOutsideWrapper
-            showScroll={!!data.length}
-            id={outsideWrapperId}
-            ref={outsideWrapperRef}>
-            <StyledInnerWrapper>
-              <Calendar
-                data={data}
-                onTileClick={onTileClick}
-                topBarWidth={topBarWidth ?? 0}
-                onItemClick={onItemClick}
-              />
-            </StyledInnerWrapper>
-          </StyledOutsideWrapper>
-        </CalendarProvider>
-      </LocaleProvider>
-    </ThemeProvider>
+    <>
+      <GlobalStyle />
+      <ThemeProvider theme={theme}>
+        <LocaleProvider lang={appConfig.lang}>
+          <CalendarProvider
+            data={data}
+            isLoading={!!isLoading}
+            config={appConfig}
+            onRangeChange={onRangeChange}
+            defaultStartDate={defaultStartDate}
+            onFilterData={onFilterData}
+            onClearFilterData={onClearFilterData}>
+            <StyledOutsideWrapper
+              showScroll={!!data.length}
+              id={outsideWrapperId}
+              ref={outsideWrapperRef}>
+              <StyledInnerWrapper>
+                <Calendar
+                  data={data}
+                  onTileClick={onTileClick}
+                  topBarWidth={topBarWidth ?? 0}
+                  onItemClick={onItemClick}
+                />
+              </StyledInnerWrapper>
+            </StyledOutsideWrapper>
+          </CalendarProvider>
+        </LocaleProvider>
+      </ThemeProvider>
+    </>
   );
 };
 

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,4 +1,4 @@
-import { theme } from "./styles";
+import { prefixId, theme } from "./styles";
 
 export const dayWidth = 50;
 export const headerMonthHeight = 24;
@@ -24,9 +24,9 @@ export const screenWidthMultiplier = 3;
 export const dayNameYoffset = 1.6;
 export const dayNumYOffset = 4.5;
 export const monthsInYear = 12;
-export const canvasHeaderWrapperId = "canvasHeaderWrapper";
-export const canvasWrapperId = "canvasWrapper";
-export const outsideWrapperId = "outsideWrapper";
+export const canvasHeaderWrapperId = "reactSchedulerCanvasHeaderWrapper";
+export const canvasWrapperId = "reactSchedulerCanvasWrapper";
+export const outsideWrapperId = prefixId;
 export const tileYOffset = 4;
 export const tileHeight = 48;
 export const formFieldsIds = {

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,11 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
-import { GlobalStyle } from "./styles";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <GlobalStyle />
     <App />
   </React.StrictMode>
 );
diff --git a/src/styles.ts b/src/styles.ts
@@ -1,16 +1,23 @@
-import { normalize } from "styled-normalize";
 import styled, { createGlobalStyle, type DefaultTheme } from "styled-components";
 
+export const prefixId = "reactSchedulerOutsideWrapper";
+
 export const GlobalStyle = createGlobalStyle`
-  ${normalize}
 
-  body {
+  #${prefixId} {
     font-family: 'Inter', sans-serif;
     box-sizing: border-box;
+    line-height: 1.15;
+    -webkit-text-size-adjust: 100%;
+    margin: 0;
   }
 
-  *, *:before, *:after {
+ #${prefixId} *,
+ #${prefixId} *:before,
+ #${prefixId} *:after {
     box-sizing: inherit;
+    font-family: inherit;
+    line-height: inherit;
   }
 `;
 

diff --git a/src/utils/resizeCanvas.ts b/src/utils/resizeCanvas.ts
@@ -0,0 +1,7 @@
+export const resizeCanvas = (ctx: CanvasRenderingContext2D, width: number, height: number) => {
+  ctx.canvas.width = width * window.devicePixelRatio;
+  ctx.canvas.height = height * window.devicePixelRatio;
+  ctx.canvas.style.width = width + "px";
+  ctx.canvas.style.height = height + "px";
+  ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+};