@rubin-epo/epo-widget-lib 0.2.0

package/README.MD

@@ -0,0 +1,86 @@
+# epo-widget-lib
+
+React widgets for Rubin Observatory Education & Public Outreach projects
+
+## Use
+
+### Install
+
+Install from npm.
+
+`yarn add @rubin-epo/epo-widget-lib`
+
+### Dependencies
+
+EPO React Library has 5 peer dependencies required to pull it in to your application.
+
+`yarn add react react-dom styled-components i18next react-i18next`
+
+### Styles
+
+After installing the package library, the global styles will need to be added to the top level of your application.
+
+```
+import { GlobalStyles } from "@rubin-epo/epo-widget-lib";
+
+const App = () => {
+  return <main><GlobalStyles></main>
+}
+```
+
+If you have already imported the global styles from `epo-react-lib` this step is unnecessary.
+
+### Translations
+
+Import `localeStrings` from `@rubin-epo/epo-widget-lib`, it contains individual locales that can be added to your project's i18next setup.
+
+## Build
+
+### Vite
+
+This project uses Vite in library mode to package the contents of `/packages/epo-widget-lib/src` into modules located in `/packages/epo-widget-lib/dist/epo-widget-lib.[es|umd].js` and TypeScript typings in `/packages/epo-widget-lib/dist/index.d.ts`
+
+To build from source:
+
+```
+cd packages/epo-widget-lib
+yarn
+yarn build # production build
+# yarn dev # development server
+```
+
+### Storybook
+
+Storybook is used to create an interactive display of the components in the EPO React Library.
+
+Stories from component folders following the `\*\*.stories.[t|j]sx will be included in the Storybook bundle.
+
+To run Storybook:
+
+```
+yarn build
+yarn storybook
+```
+
+## Test
+
+Each component in EPO Widget Library contains a Jest unit test. Tests should be co-located with component code and their stories and follow the `**.test.[t|j]sx` naming format.
+
+```
+yarn test
+# yarn test:generate-output # will save to .jest-test-results.json for Storybook
+```
+
+To add a unit test to it's Storybook page add the filename of the unit test to the `parameters` property of the story
+
+```
+export const Primary: ComponentStoryObj<typeof DemoButton> = {
+  args: {
+    disabled: false,
+    children: "Hello",
+  },
+  parameters: {
+    jest: "DemoButton.test.tsx",
+  },
+};
+```

package/dist/assets/locales/index.d.ts

@@ -0,0 +1,115 @@
+declare const _default: {
+    en: {
+        translation: {
+            blinker: {
+                controls: {
+                    rewind: string;
+                    forward: string;
+                    play: string;
+                    pause: string;
+                };
+            };
+            elapsed_time: {
+                title: string;
+                step: {
+                    day_one: string;
+                    day_other: string;
+                    hour_one: string;
+                    hour_other: string;
+                    minute_one: string;
+                    minute_other: string;
+                    second_one: string;
+                    second_other: string;
+                    year_one: string;
+                    year_other: string;
+                };
+            };
+            filterTool: {
+                title: string;
+                filter: string;
+                whiteLight: string;
+                prism: string;
+                selectLabel: string;
+                colors: {
+                    violet: string;
+                    blue: string;
+                    green: string;
+                    yellow: string;
+                    orange: string;
+                    red: string;
+                    none: string;
+                };
+            };
+            colorTool: {
+                labels: {
+                    object_type: string;
+                    object: string;
+                    object_selected: string;
+                    filter: string;
+                    color: string;
+                    color_intensity: string;
+                };
+                actions: {
+                    select_an_object: string;
+                    select_filter: string;
+                    reset: string;
+                };
+            };
+            source_selector: {
+                messages: {
+                    success: string;
+                    failure: string;
+                };
+            };
+            camera_filter: {
+                title: string;
+                labels: {
+                    select: string;
+                    option: string;
+                    option_none: string;
+                    captured_range: string;
+                    captured_range_no_filter: string;
+                    ultraviolet: string;
+                    visible: string;
+                    infrared: string;
+                };
+            };
+        };
+    };
+    es: {
+        translation: {
+            elapsed_time: {
+                title: string;
+                step: {
+                    day_one: string;
+                    day_other: string;
+                    hour_one: string;
+                    hour_other: string;
+                    minute_one: string;
+                    minute_other: string;
+                    second_one: string;
+                    second_other: string;
+                    year_one: string;
+                    year_other: string;
+                };
+            };
+            filterTool: {
+                title: string;
+                filter: string;
+                whiteLight: string;
+                prism: string;
+                selectLabel: string;
+                colors: {
+                    violet: string;
+                    blue: string;
+                    green: string;
+                    yellow: string;
+                    orange: string;
+                    red: string;
+                    none: string;
+                };
+            };
+        };
+    };
+};
+export default _default;

package/dist/atomic/Blinker/Blinker.d.ts

@@ -0,0 +1,14 @@
+import { FunctionComponent } from "react";
+import { Image } from "@rubin-epo/epo-react-lib/dist/types/image";
+export interface BlinkerProps {
+    images: Image[];
+    activeIndex?: number;
+    autoplay?: boolean;
+    loop?: boolean;
+    interval?: number;
+    blinkCallback?: (activeIndex: number) => void;
+    loadedCallback?: () => void;
+    className?: string;
+}
+declare const Blinker: FunctionComponent<BlinkerProps>;
+export default Blinker;

package/dist/atomic/Blinker/Controls/Controls.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent, MouseEventHandler } from "react";
+export interface ControlsProps {
+    playing: boolean;
+    handleStartStop: MouseEventHandler<HTMLButtonElement>;
+    handleNext: MouseEventHandler<HTMLButtonElement>;
+    handlePrevious: MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+    isDisabled?: boolean;
+}
+declare const Controls: FunctionComponent<ControlsProps>;
+export default Controls;

package/dist/atomic/Blinker/Controls/styles.d.ts

@@ -0,0 +1 @@
+export declare const ControlsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/atomic/Blinker/Image/Image.d.ts

@@ -0,0 +1,9 @@
+import { Image } from "@rubin-epo/epo-react-lib/dist/types/image";
+import { FunctionComponent } from "react";
+interface ImageProps {
+    image: Image;
+    active: boolean;
+    loadCallback: () => void;
+}
+declare const BlinkerImage: FunctionComponent<ImageProps>;
+export default BlinkerImage;

package/dist/atomic/Blinker/Image/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const BlinkerImage: import("styled-components").StyledComponent<"img", any, {
+    active: boolean;
+}, never>;

package/dist/atomic/Blinker/Images/Images.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent } from "react";
+import { BlinkerProps } from "../Blinker";
+export interface ImagesProps extends Pick<BlinkerProps, "images" | "activeIndex"> {
+    loadedCallback?: () => void;
+    className?: string;
+}
+declare const Images: FunctionComponent<ImagesProps>;
+export default Images;

package/dist/atomic/Blinker/Images/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const BlinkContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LoadingContainer: import("styled-components").StyledComponent<"div", any, {
+    isLoading: boolean;
+}, never>;

package/dist/atomic/Blinker/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./Blinker";

package/dist/atomic/Blinker/styles.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const BlinkerContainer: import("styled-components").StyledComponent<"div", any, {
+    isCondensed: boolean;
+}, never>;
+export declare const BlinkerControls: import("styled-components").StyledComponent<import("react").FunctionComponent<import("./Controls/Controls").ControlsProps>, any, {
+    isCondensed: boolean;
+}, never>;
+export declare const BlinkerImages: import("styled-components").StyledComponent<import("react").FunctionComponent<import("./Images/Images").ImagesProps>, any, {
+    isCondensed: boolean;
+}, never>;

package/dist/atomic/ElapsedTime/ElapsedTime.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent } from "react";
+type TimeInterval = "year" | "day" | "hour" | "minute" | "second";
+type TimeSteps = {
+    [key in TimeInterval]?: number;
+};
+export interface TimeStepProps extends TimeSteps {
+    className?: string;
+}
+declare const ElapsedTime: FunctionComponent<TimeStepProps>;
+export default ElapsedTime;

package/dist/atomic/ElapsedTime/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./ElapsedTime";

package/dist/atomic/ElapsedTime/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const ElapsedTimeContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Header: import("styled-components").StyledComponent<"h2", any, {}, never>;
+export declare const Time: import("styled-components").StyledComponent<"time", any, {}, never>;
+export declare const Interval: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Number: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Step: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/atomic/PlaybackControl/PlaybackControl.d.ts

@@ -0,0 +1,9 @@
+import { FunctionComponent, HTMLProps, MouseEventHandler } from "react";
+import { IconKey } from "@rubin-epo/epo-react-lib/dist/svg/icons";
+interface PlaybackControlProps extends HTMLProps<HTMLButtonElement> {
+    icon: IconKey;
+    label: string;
+    handleClick: MouseEventHandler<HTMLButtonElement>;
+}
+declare const PlaybackControl: FunctionComponent<PlaybackControlProps>;
+export default PlaybackControl;

package/dist/atomic/PlaybackControl/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./PlaybackControl";

package/dist/atomic/PlaybackControl/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PlaybackButton: import("styled-components").StyledComponent<"button", any, {}, never>;