@ldelia/react-media 0.2.5 → 0.2.6

package/dist/components/timeline/Timeline.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Timeline.css';
 export interface TimelineProps {
     duration: number;
     value: number;

package/dist/components/timeline/Timeline.js

@@ -32,7 +32,21 @@ const TickTimeCollectionDisplay_1 = __importDefault(require("./TickTimeCollectio
 const VaLueLineCanvas_1 = __importDefault(require("./VaLueLineCanvas"));
 const RangeSelectorCanvas_1 = __importDefault(require("./RangeSelectorCanvas"));
 const constants_1 = require("./constants");
-require("./Timeline.css");
+const styled_components_1 = __importDefault(require("styled-components"));
+const TimelineContainer = styled_components_1.default.div `
+  background-color: #f0f0f0;
+  border: 1px solid #c9c9c9;
+  height: 80px;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  position: relative;
+  display: flex;
+`;
+const TimelineWrapper = styled_components_1.default.div `
+  position: absolute;
+  height: 100%;
+`;
 exports.ZoomContext = react_1.default.createContext({
     blockOffset: 0,
     pixelsInSecond: 0,
@@ -75,8 +89,8 @@ const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], withTime
         const scrollPosition = value * zoomParams.pixelsInSecond - 300;
         timeLineWrapper.scrollLeft = Math.max(0, scrollPosition);
     }, [value, zoomParams]);
-    return (react_1.default.createElement("div", { ref: timeLineContainerRef, className: `timeline-container ${className}` },
-        react_1.default.createElement("div", { className: 'timeline-wrapper', style: { width: duration * zoomParams.pixelsInSecond + 'px' } },
+    return (react_1.default.createElement(TimelineContainer, { ref: timeLineContainerRef, className: className },
+        react_1.default.createElement(TimelineWrapper, { style: { width: duration * zoomParams.pixelsInSecond + 'px' } },
             react_1.default.createElement(exports.ZoomContext.Provider, { value: zoomParams },
                 react_1.default.createElement(VaLueLineCanvas_1.default, { blockStartingTimes: withTimeBlocks ? blockStartingTimes : [], value: value }),
                 react_1.default.createElement(RangeSelectorCanvas_1.default, { selectedRange: selectedRange, onChange: onChange, onRangeChange: onRangeChange }),

package/dist/stories/timeline.stories.d.ts

@@ -1,8 +1,9 @@
 import { TimelineProps } from '../components/timeline';
+import { Meta } from '@storybook/react';
 import './timeline.stories.custom.css';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-bf5e6555").R, import("@storybook/types").Args>;
+declare const _default: Meta;
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
-export declare const WithSelectedRange: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
-export declare const WithCustomClassName: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
-export declare const WithOutTimeBlocks: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;
+export declare const WithSelectedRange: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;
+export declare const WithCustomClassName: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;
+export declare const WithOutTimeBlocks: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "A React components collection for media-related features.",
   "private": false,
   "keywords": [

package/src/components/timeline/Timeline.tsx

@@ -3,8 +3,22 @@ import TickTimeCollectionDisplay from './TickTimeCollectionDisplay';
 import VaLueLineCanvas from './VaLueLineCanvas';
 import RangeSelectorCanvas from './RangeSelectorCanvas';
 import { zoomLevelConfigurations } from './constants';
+import styled from 'styled-components';
 
-import './Timeline.css';
+const TimelineContainer = styled.div`
+  background-color: #f0f0f0;
+  border: 1px solid #c9c9c9;
+  height: 80px;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  position: relative;
+  display: flex;
+`;
+const TimelineWrapper = styled.div`
+  position: absolute;
+  height: 100%;
+`;
 
 export interface TimelineProps {
   duration: number; // duration in seconds
@@ -88,12 +102,8 @@ export const Timeline: React.FC<TimelineProps> = ({
   }, [value, zoomParams]);
 
   return (
-    <div
-      ref={timeLineContainerRef}
-      className={`timeline-container ${className}`}
-    >
-      <div
-        className={'timeline-wrapper'}
+    <TimelineContainer ref={timeLineContainerRef} className={className}>
+      <TimelineWrapper
         style={{ width: duration * zoomParams.pixelsInSecond + 'px' }}
       >
         <ZoomContext.Provider value={zoomParams}>
@@ -110,7 +120,7 @@ export const Timeline: React.FC<TimelineProps> = ({
             <TickTimeCollectionDisplay tickTimes={blockStartingTimes} />
           )}
         </ZoomContext.Provider>
-      </div>
-    </div>
+      </TimelineWrapper>
+    </TimelineContainer>
   );
 };

package/dist/stories/Button.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-import './button.css';
-interface ButtonProps {
-    /**
-     * Is this the principal call to action on the page?
-     */
-    primary?: boolean;
-    /**
-     * What background color to use
-     */
-    backgroundColor?: string;
-    /**
-     * How large should the button be?
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Button contents
-     */
-    label: string;
-    /**
-     * Optional click handler
-     */
-    onClick?: () => void;
-}
-/**
- * Primary UI component for user interaction
- */
-export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => React.JSX.Element;
-export {};

package/dist/stories/Button.js

@@ -1,30 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const react_1 = __importDefault(require("react"));
-require("./button.css");
-/**
- * Primary UI component for user interaction
- */
-const Button = (_a) => {
-    var { primary = false, size = 'medium', backgroundColor, label } = _a, props = __rest(_a, ["primary", "size", "backgroundColor", "label"]);
-    const mode = primary
-        ? 'storybook-button--primary'
-        : 'storybook-button--secondary';
-    return (react_1.default.createElement("button", Object.assign({ type: "button", className: ['storybook-button', `storybook-button--${size}`, mode].join(' '), style: { backgroundColor } }, props), label));
-};
-exports.Button = Button;

package/dist/stories/Button.stories.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Small = exports.Large = exports.Secondary = exports.Primary = void 0;
-const test_1 = require("@storybook/test");
-const Button_1 = require("./Button");
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-    title: 'Example/Button',
-    component: Button_1.Button,
-    parameters: {
-        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-        layout: 'centered',
-    },
-    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-    tags: ['autodocs'],
-    // More on argTypes: https://storybook.js.org/docs/api/argtypes
-    argTypes: {
-        backgroundColor: { control: 'color' },
-    },
-    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-    args: { onClick: (0, test_1.fn)() },
-};
-exports.default = meta;
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-exports.Primary = {
-    args: {
-        primary: true,
-        label: 'Button',
-    },
-};
-exports.Secondary = {
-    args: {
-        label: 'Button',
-    },
-};
-exports.Large = {
-    args: {
-        size: 'large',
-        label: 'Button',
-    },
-};
-exports.Small = {
-    args: {
-        size: 'small',
-        label: 'Button',
-    },
-};

package/src/components/timeline/Timeline.css

@@ -1,15 +0,0 @@
-.timeline-container {
-    background-color: #f0f0f0;
-    border: 1px solid #c9c9c9;
-    height: 80px;
-    width: 100%;
-    max-width: 100%;
-    overflow-x: auto;
-    position: relative;
-    display: flex;
-}
-
-.timeline-wrapper {
-    position: absolute;
-    height: 100%;
-}