react-timelane 0.0.5 → 1.0.0

package/dist/stories/FullExamplePage/FullExamplePage.d.ts

@@ -0,0 +1,4 @@
+import { TimelaneProps } from '../../components/Timelane/Timelane';
+export interface FullExamplePageProps extends TimelaneProps {
+}
+export declare function FullExamplePage(settings: FullExamplePageProps): import("react/jsx-runtime").JSX.Element;

package/dist/stories/FullExamplePage/FullExamplePage.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react-vite';
+import { FullExamplePage } from './FullExamplePage';
+declare const meta: {
+    title: string;
+    component: typeof FullExamplePage;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        showDays: {
+            control: {
+                type: "boolean";
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Example: Story;

package/dist/stories/FullExamplePage/MyTimelane.d.ts

@@ -0,0 +1,20 @@
+import { MouseEvent } from 'react';
+import { default as Allocation } from '../models/Allocation';
+import { default as Resource } from '../models/Resource';
+import { TimelaneProps } from '../../components/Timelane/Timelane';
+interface MyTimelaneProps {
+    resources: Resource[];
+    allocations: Allocation[];
+    focusedDay?: Date | null;
+    timelaneParameters: TimelaneProps;
+    setFocusedResource?: (resource: Resource | null) => void;
+    setFocusedDay?: (day: Date | null) => void;
+    onAllocationCreate?: (allocation: Allocation) => void;
+    onAllocationUpdate?: (allocation: Allocation) => void;
+    onAllocationDelete?: (allocation: Allocation) => void;
+    onAllocationClick?: (allocation: Allocation, e: MouseEvent | null) => void;
+    onAllocationContextMenu?: (allocation: Allocation, e: MouseEvent) => void;
+    onAreaClick?: (area: Resource, e: MouseEvent) => void;
+}
+export declare function MyTimelane({ resources, allocations, focusedDay, timelaneParameters, setFocusedDay, onAllocationCreate, onAllocationUpdate, }: MyTimelaneProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/stories/constants.d.ts

@@ -0,0 +1,7 @@
+import { default as Allocation } from './models/Allocation';
+import { default as Resource } from './models/Resource';
+export declare const DEFAULT_ALLOCATION_COLOR = "#A7C7E7";
+export declare const DEFAULT_ALLOCATION_DESCRIPTION = "empty description";
+export declare const DEFAULT_ALLOCATION_NAME = "New Allocation";
+export declare const DEFAULT_RESOURCES: Resource[];
+export declare const DEFAULT_ALLOCATIONS: Allocation[];

package/dist/stories/hooks/useLocalStorage.d.ts

@@ -0,0 +1,2 @@
+import { Dispatch, SetStateAction } from 'react';
+export default function useLocalStorage<T>(key: string, defaultValue: T): [T, Dispatch<SetStateAction<T>>];

package/dist/stories/models/Allocation.d.ts

@@ -0,0 +1,11 @@
+export default interface Allocation {
+    id: number;
+    resourceId: number;
+    name: string;
+    description: string;
+    start: Date;
+    end: Date;
+    size: number;
+    offset: number;
+    color: string;
+}

package/dist/stories/models/AllocationId.d.ts

@@ -0,0 +1 @@
+export type AllocationId = number;

package/dist/stories/models/Resource.d.ts

@@ -0,0 +1,7 @@
+import { ResourceId } from './ResourceId';
+export default interface Resource {
+    id: ResourceId;
+    name: string;
+    description: string;
+    capacity: number;
+}

package/dist/stories/models/ResourceId.d.ts

@@ -0,0 +1 @@
+export type ResourceId = number;

package/dist/types/EnableResizing.d.ts

@@ -0,0 +1,6 @@
+export interface EnableResizing {
+    top?: boolean;
+    left?: boolean;
+    bottom?: boolean;
+    right?: boolean;
+}

package/dist/types/Pixels.d.ts

@@ -1,4 +1,4 @@
 export interface Pixels {
     pixelsPerDay: number;
-    pixelsPerResource: number;
+    pixelsPerLane: number;
 }

package/dist/types/TimelaneSettings.d.ts

@@ -1,11 +1,14 @@
+import { EnableResizing } from './EnableResizing';
 export interface TimelaneSettings {
     start: Date;
     end: Date;
     pixelsPerDay: number;
-    pixelsPerResource: number;
+    pixelsPerLane: number;
     showMonths: boolean;
     showWeeks: boolean;
     showDays: boolean;
     allowOverlaps: boolean;
     focusedDate: Date | null;
+    enableItemResizing: boolean | EnableResizing;
+    enableItemDragging: boolean;
 }

package/dist/types/index.d.ts

@@ -13,3 +13,4 @@ export { type Lane } from './Lane';
 export { type DateBounds } from './DateBounds';
 export { type OffsetBounds } from './OffsetBounds';
 export { type TimelaneSettings } from './TimelaneSettings';
+export { type EnableResizing } from './EnableResizing';

package/eslint.config.js

@@ -1,28 +1,28 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
 
-export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
+export default tseslint.config({ ignores: ['dist'] }, {
+  extends: [js.configs.recommended, ...tseslint.configs.recommended],
+  files: ['**/*.{ts,tsx}'],
+  languageOptions: {
+    ecmaVersion: 2020,
+    globals: globals.browser,
+  },
+  plugins: {
+    'react-hooks': reactHooks,
+    'react-refresh': reactRefresh,
+  },
+  rules: {
+    ...reactHooks.configs.recommended.rules,
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
   },
-)
+}, storybook.configs["flat/recommended"]);

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "react-timelane",
-  "version": "0.0.5",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.7.2",
@@ -17,7 +19,11 @@
     "tiny-invariant": "^1.3.3"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^4.0.1",
     "@eslint/js": "^9.25.0",
+    "@storybook/addon-docs": "^9.0.12",
+    "@storybook/addon-onboarding": "^9.0.12",
+    "@storybook/react-vite": "^9.0.12",
     "@types/node": "^24.0.1",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
@@ -25,9 +31,12 @@
     "eslint": "^9.25.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "^9.0.12",
     "globals": "^16.0.0",
+    "react-styleguidist": "^13.1.4",
     "sass": "^1.89.2",
     "sass-embedded": "^1.89.2",
+    "storybook": "^9.0.12",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.30.1",
     "vite": "^6.3.5",
@@ -40,4 +49,4 @@
     },
     "./style.css": "./dist/react-timelane.css"
   }
-}
+}

package/dist/components/Timelane.d.ts

@@ -1,17 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { TimelaneLane } from './TimelaneLane/TimelaneLane';
-import { TimelaneBody } from './TimelaneBody';
-import { TimelaneLayout } from './TimelaneLayout/TimelaneLayout';
-import { TimelaneHeader } from './TimelaneHeader/TimelaneHeader';
-import { TimelaneBackground } from './TimelaneBackground';
-import { TimelaneAside } from './TimelaneAside';
-export declare function Timelane({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
-export declare namespace Timelane {
-    var Container: typeof Timelane;
-    var Header: typeof TimelaneHeader;
-    var Body: typeof TimelaneBody;
-    var Background: typeof TimelaneBackground;
-    var Aside: typeof TimelaneAside;
-    var Lane: typeof TimelaneLane;
-    var Layout: typeof TimelaneLayout;
-}

package/dist/components/TimelaneSettingsProvider.d.ts

@@ -1,7 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { TimelaneSettings } from '../types/TimelaneSettings';
-interface TimelaneSettingsProviderProps {
-    settings: TimelaneSettings;
-}
-export declare const TimelaneSettingsProvider: ({ settings: _settings, children, }: PropsWithChildren<TimelaneSettingsProviderProps>) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/TimelaneWrapper.d.ts

@@ -1,20 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { Lane } from '../types';
-interface TimelaneWrapperProps {
-    focusedDay?: Date | null;
-    focusedLane?: Lane | null;
-    start?: Date;
-    end?: Date;
-    pixelsPerDay?: number;
-    pixelsPerResource?: number;
-    showMonths?: boolean;
-    showWeeks?: boolean;
-    showDays?: boolean;
-    allowOverlaps?: boolean;
-    focusedDate?: Date | null;
-}
-/**
- * @deprecated The component should not be used
- */
-export default function TimelaneWrapper({ children, start, end, pixelsPerDay, pixelsPerResource, showMonths, showWeeks, showDays, allowOverlaps, focusedDate, }: PropsWithChildren<TimelaneWrapperProps>): import("react/jsx-runtime").JSX.Element;
-export {};