@helsenorge/lightbox 12.10.0 → 12.11.2-beta.0

package/__scripts__/entries.js

@@ -0,0 +1,23 @@
+import { globSync } from 'glob';
+
+const getEntryName = name => {
+  return name.replace(/^src[/\\]/, '').replace(/\.tsx?$/, '');
+};
+
+const createEntries = (entryList, entry) => {
+  const name = getEntryName(entry);
+
+  if (name in entryList) {
+    throw new Error(`${name} finnes flere ganger i listen med entries`);
+  }
+  entryList[name] = entry;
+
+  return entryList;
+};
+
+export const alwaysIgnore = ['**/__snapshots__/**/*', '**/*.stories.tsx', '**/*.test.tsx', '**/*.scss', '**/*.scss.d.ts', '**/*.d.ts'];
+
+const components = globSync(`src/components/**/index.{ts,tsx}`, { ignore: alwaysIgnore });
+const hooksAndExtras = globSync(`src/**/*.{ts,tsx}`, { ignore: [...alwaysIgnore, 'src/components/**/*'] });
+
+export const entries = [...components, ...hooksAndExtras].sort((a, b) => a.localeCompare(b)).reduce(createEntries, {});

package/package.json

@@ -1,20 +1,84 @@
 {
   "name": "@helsenorge/lightbox",
-  "type": "module",
+  "sideEffects": false,
+  "private": false,
+  "version": "12.11.2-beta.0",
   "description": "The official Helsenorge lightbox.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "12.10.0",
   "author": "Helsenorge",
+  "maintainers": [
+    "Frankenstein"
+  ],
   "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "directory": "lib",
+    "access": "public"
+  },
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js"
+    },
+    "./components/*": {
+      "types": "./lib/components/*/index.d.ts",
+      "import": "./lib/components/*/index.js"
+    },
+    "./scss/*": "./lib/scss/*",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "prebuild": "npm-run-all clean generate:cssdefinitions",
+    "build": "vite build",
+    "clean": "rimraf lib",
+    "generate:cssdefinitions": "typed-scss-modules \"src/**/*.module.scss\" --nameFormat none --exportType default --includePaths node_modules ../../node_modules",
+    "eslint": "eslint \"src/**/*.{ts,tsx}\"",
+    "eslint:fix": "npm run eslint -- --fix",
+    "stylelint": "stylelint \"src/**/*.{css,scss}\"",
+    "stylelint:fix": "npm run stylelint -- --fix",
+    "prettier": "prettier --check \"src/**/*.{js,jsx,ts,tsx,css,scss,md,json}\"",
+    "prettier:fix": "npm run prettier -- --write",
+    "pretypecheck": "tsc -v",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest"
+  },
   "peerDependencies": {
     "@helsenorge/designsystem-react": "^12.0.0",
     "classnames": "^2.5.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
-  "sideEffects": false
+  "devDependencies": {
+    "@helsenorge/designsystem-react": "^12.11.1",
+    "@helsenorge/typed-scss-modules": "^9.0.0",
+    "@rollup/plugin-replace": "^6.0.1",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.2",
+    "@vitest/coverage-istanbul": "^3.1.2",
+    "@vitest/coverage-v8": "^3.1.2",
+    "classnames": "^2.5.1",
+    "frankenstein-build-tools": "file:../build-tools",
+    "jsdom": "^26.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-zoom-pan-pinch": "^3.6.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.1",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^3.1.2"
+  }
 }

package/src/components/LightBox/LightBox.stories.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+
+import { StoryObj, Meta } from '@storybook/react-vite';
+import { Docs } from 'frankenstein-build-tools';
+import { action } from 'storybook/actions';
+
+import longLoremText from '@helsenorge/designsystem-react/utils/loremtext';
+
+import LightBox from './LightBox';
+
+const meta = {
+  title: '@helsenorge/lightbox/LightBox',
+  component: LightBox,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Beskrivelse av LightBox',
+      },
+      story: {
+        inline: false,
+        iframeHeight: '40rem',
+      },
+      page: (): React.JSX.Element => <Docs component={LightBox} />,
+    },
+  },
+  args: {
+    ariaLabelCloseButton: 'Lukk Lightbox',
+    ariaLabelLeftArrow: 'Forrige bilde',
+    ariaLabelLightBox: 'Bildevisning',
+    ariaLabelRightArrow: 'Neste bilde',
+    ariaLabelCloseTextBox: 'Lukk tekstboks',
+    ariaLabelOpenTextBox: 'Åpne tekstboks',
+    ariaLabelZoomIn: 'Zoom inn',
+    ariaLabelZoomOut: 'Zoom ut',
+    ariaLabelZoomSlider: 'Zoom',
+    closeTextAfterSeconds: 3,
+    imageAlt: 'A random cat',
+    imageSrc: 'https://placehold.co/640x480',
+    testId: 'lightBox',
+    imageText: 'En søt pus eller kanskje flere',
+    onClose: action('Close button clicked'),
+    onLeftArrowClick: action('Left arrow clicked'),
+    onRightArrowClick: action('Right arrow clicked'),
+  },
+  argTypes: {},
+} satisfies Meta<typeof LightBox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: args => <LightBox {...args} />,
+};
+
+export const LangBildetekst: Story = {
+  render: args => (
+    <LightBox
+      {...args}
+      imageText={
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu turpis posuere, dignissim ex at, interdum metus. Etiam efficitur ut lectus et condimentum. Suspendisse ornare suscipit metus sit amet luctus. Quisque risus orci, molestie sit amet tempus non, semper a ligula. Etiam volutpat scelerisque magna vel feugiat. Sed ac venenatis justo. Aliquam iaculis ante a eros sagittis, id gravida felis placerat. Cras luctus mi quam, non venenatis lorem condimentum vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer nulla sem, placerat non blandit ac, interdum vel augue. Nulla fermentum orci non augue pulvinar, sed posuere neque scelerisque. Aenean pulvinar commodo lorem vel consectetur. Nam augue lectus, tempus vitae finibus id, dignissim id eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar commodo lorem vel consectetur. Nam augue lectus, tempus vitae finibus id, dignissim id eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+      }
+      closeTextAfterSeconds={undefined}
+    />
+  ),
+};
+
+const AapnesOverSideRender = (args: React.ComponentProps<typeof LightBox>): React.ReactElement => {
+  const [lightboxOpen, setLightboxOpen] = React.useState(false);
+
+  return (
+    <div>
+      <button onClick={() => setLightboxOpen(true)} id="åpne">
+        {'Åpne LightBox over side'}
+      </button>
+
+      <section>{longLoremText}</section>
+      <section>{longLoremText}</section>
+      <section>{longLoremText}</section>
+
+      <button id="tilfeldig" onClick={() => null}>
+        {'Tilfeldig knapp'}
+      </button>
+
+      <section>{longLoremText}</section>
+      <section>{longLoremText}</section>
+      <section>{longLoremText}</section>
+
+      {lightboxOpen && (
+        <LightBox
+          {...args}
+          onClose={() => setLightboxOpen(false)}
+          imageText="Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
+          closeTextAfterSeconds={undefined}
+        />
+      )}
+    </div>
+  );
+};
+
+export const ÅpnesOverSide: Story = {
+  render: args => <AapnesOverSideRender {...args} />,
+};
+
+export const EgetOppsettPåTekst: Story = {
+  args: {
+    closeTextAfterSeconds: undefined,
+  },
+  render: args => (
+    <LightBox
+      {...args}
+      imageText={
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <span>{'Tekst over flere'}</span>
+          <span>
+            {'linjer og med '}
+            <strong>{'styling'}</strong>
+          </span>
+        </div>
+      }
+    />
+  ),
+};

package/src/components/LightBox/LightBox.test.tsx

@@ -0,0 +1,98 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import LightBox from './LightBox';
+
+describe('Gitt at LightBox skal vises', (): void => {
+  describe('Når LightBox vises', (): void => {
+    test('Så vises LightBox', (): void => {
+      render(
+        <LightBox
+          ariaLabelCloseButton={''}
+          ariaLabelLeftArrow={''}
+          ariaLabelRightArrow={''}
+          ariaLabelCloseTextBox={''}
+          ariaLabelOpenTextBox={''}
+          imageAlt={''}
+          imageSrc={''}
+          onClose={() => null}
+          ariaLabelZoomOut={''}
+          ariaLabelZoomIn={''}
+          ariaLabelLightBox={''}
+          ariaLabelZoomSlider={''}
+        />
+      );
+    });
+
+    test('Så vises lukkeknapp med riktig label', (): void => {
+      render(
+        <LightBox
+          ariaLabelCloseButton="Lukk"
+          ariaLabelLeftArrow=""
+          ariaLabelRightArrow=""
+          ariaLabelCloseTextBox=""
+          ariaLabelOpenTextBox=""
+          imageAlt=""
+          imageSrc=""
+          onClose={() => null}
+          ariaLabelZoomOut=""
+          ariaLabelZoomIn=""
+          ariaLabelLightBox={''}
+          ariaLabelZoomSlider={''}
+        />
+      );
+
+      const closeButton = screen.getByLabelText('Lukk');
+      expect(closeButton).toBeInTheDocument();
+    });
+
+    test('Så vises begge pilknapper når callback er gitt', (): void => {
+      render(
+        <LightBox
+          ariaLabelCloseButton=""
+          ariaLabelLeftArrow="Forrige bilde"
+          onLeftArrowClick={() => null}
+          ariaLabelRightArrow="Neste bilde"
+          onRightArrowClick={() => null}
+          ariaLabelCloseTextBox=""
+          ariaLabelOpenTextBox=""
+          imageAlt=""
+          imageSrc=""
+          onClose={() => null}
+          ariaLabelZoomOut=""
+          ariaLabelZoomIn=""
+          ariaLabelLightBox={''}
+          ariaLabelZoomSlider={''}
+        />
+      );
+
+      const rightArrow = screen.getByLabelText('Neste bilde');
+      const leftArrow = screen.getByLabelText('Forrige bilde');
+      expect(rightArrow).toBeInTheDocument();
+      expect(leftArrow).toBeInTheDocument();
+    });
+
+    test('Så blir onClose funksjonen kalt når lukkeknappen trykkes', (): void => {
+      const onCloseMock = vi.fn();
+      render(
+        <LightBox
+          ariaLabelCloseButton="Lukk"
+          ariaLabelLeftArrow=""
+          ariaLabelRightArrow=""
+          ariaLabelCloseTextBox=""
+          ariaLabelOpenTextBox=""
+          imageAlt=""
+          imageSrc=""
+          onClose={onCloseMock}
+          ariaLabelZoomOut=""
+          ariaLabelZoomIn=""
+          ariaLabelLightBox={''}
+          ariaLabelZoomSlider={''}
+        />
+      );
+      const closeButton = screen.getByLabelText('Lukk');
+      fireEvent.click(closeButton);
+      expect(onCloseMock).toHaveBeenCalled();
+    });
+  });
+});

package/src/components/LightBox/LightBox.tsx

@@ -0,0 +1,285 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import classNames from 'classnames';
+import { TransformWrapper, TransformComponent, useTransformComponent, useControls } from 'react-zoom-pan-pinch';
+
+import Icon from '@helsenorge/designsystem-react/components/Icon';
+import ChevronLeft from '@helsenorge/designsystem-react/components/Icons/ChevronLeft';
+import ChevronRight from '@helsenorge/designsystem-react/components/Icons/ChevronRight';
+import ChevronsDown from '@helsenorge/designsystem-react/components/Icons/ChevronsDown';
+import ChevronsUp from '@helsenorge/designsystem-react/components/Icons/ChevronsUp';
+import Minus from '@helsenorge/designsystem-react/components/Icons/Minus';
+import PlusSmall from '@helsenorge/designsystem-react/components/Icons/PlusSmall';
+import X from '@helsenorge/designsystem-react/components/Icons/X';
+import { IconSize, KeyboardEventKey, ZIndex } from '@helsenorge/designsystem-react/constants';
+import { useFocusTrap } from '@helsenorge/designsystem-react/hooks/useFocusTrap';
+import { useReturnFocusOnUnmount } from '@helsenorge/designsystem-react/hooks/useReturnFocusOnUnmount';
+import { useSize } from '@helsenorge/designsystem-react/hooks/useSize';
+import { disableBodyScroll, enableBodyScroll } from '@helsenorge/designsystem-react/utils/scroll';
+
+import { useKeyboardEvent } from '@helsenorge/designsystem-react';
+
+import MiniSlider from './MiniSlider';
+
+import styles from './styles.module.scss';
+
+export interface LightBoxProps {
+  /** Aria label for the close button */
+  ariaLabelCloseButton: string;
+  /** Aria label for the text box button when its open */
+  ariaLabelCloseTextBox: string;
+  /** Aria label for the left arrow button */
+  ariaLabelLeftArrow?: string;
+  /** Aria label for the full modal describing what the modal contains */
+  ariaLabelLightBox: string;
+  /** Aria label for the right arrow button */
+  ariaLabelRightArrow?: string;
+  /** Aria label for the text box button when its closed */
+  ariaLabelOpenTextBox: string;
+  /** Aria label for the zoom in button */
+  ariaLabelZoomIn: string;
+  /** Aria label for the zoom out button */
+  ariaLabelZoomOut: string;
+  /** Aria label for the slider input component */
+  ariaLabelZoomSlider: string;
+  /** If set the text box closes automatically after the given seconds */
+  closeTextAfterSeconds?: number;
+  /** Alt text for the image */
+  imageAlt: string;
+  /** Source of the image that will be shown */
+  imageSrc: string;
+  /** The text for the image that shows in the textbox */
+  imageText?: string | React.ReactNode;
+  /** Function is called when user clicks the close button */
+  onClose: () => void;
+  /** Function is called when user clicks the left arrow button. If not given the arrow will not show. */
+  onLeftArrowClick?: () => void;
+  /** Function is called when user clicks the right arrow button. If not given the arrow will not show. */
+  onRightArrowClick?: () => void;
+  /** Sets the data-testid attribute. */
+  testId?: string;
+}
+
+const LightBox: React.FC<LightBoxProps> = ({
+  ariaLabelCloseButton,
+  ariaLabelLeftArrow,
+  ariaLabelLightBox,
+  ariaLabelRightArrow,
+  ariaLabelCloseTextBox,
+  ariaLabelOpenTextBox,
+  ariaLabelZoomIn,
+  ariaLabelZoomOut,
+  ariaLabelZoomSlider,
+  closeTextAfterSeconds,
+  imageAlt,
+  imageSrc,
+  imageText,
+  onClose,
+  onLeftArrowClick,
+  onRightArrowClick,
+  testId,
+}) => {
+  const [imageTextOpen, setImageTextOpen] = React.useState(true);
+  const lightBoxRef = useRef<HTMLDivElement>(null);
+  const textBoxRef = useRef<HTMLParagraphElement>(null);
+  const { height: textBoxHeight = 0 } = useSize(textBoxRef) || {};
+  const [zoom, setZoom] = useState(1.0);
+  useFocusTrap(lightBoxRef, true);
+  useReturnFocusOnUnmount(lightBoxRef);
+
+  useKeyboardEvent(lightBoxRef, onClose, [KeyboardEventKey.Escape]);
+
+  const updateStates = (newZoom: number): void => {
+    if (zoom === newZoom) return;
+    setZoom(newZoom);
+  };
+
+  useEffect(() => {
+    if (!closeTextAfterSeconds) return;
+    const timer = setTimeout(() => {
+      setImageTextOpen(false);
+    }, closeTextAfterSeconds * 1000);
+    return (): void => {
+      clearTimeout(timer);
+    };
+  }, []);
+
+  useEffect(() => {
+    lightBoxRef.current?.focus();
+  }, []);
+
+  return (
+    <div
+      data-testid={testId}
+      className={styles.lightBox}
+      style={{ zIndex: ZIndex.OverlayScreen }}
+      role="dialog"
+      aria-modal={true}
+      tabIndex={-1}
+      aria-label={ariaLabelLightBox}
+      ref={lightBoxRef}
+    >
+      <button
+        onClick={onClose}
+        aria-label={ariaLabelCloseButton}
+        data-testid="closeButton"
+        className={classNames(styles.button, styles['close-button'])}
+        style={{ zIndex: ZIndex.LightBoxButtons }}
+      >
+        <Icon svgIcon={X} color="white" size={IconSize.XSmall} />
+      </button>
+      {onLeftArrowClick && (
+        <button
+          className={classNames(styles.button, styles['arrow-button'], styles['arrow-button--left'])}
+          onClick={onLeftArrowClick}
+          aria-label={ariaLabelLeftArrow}
+          data-testid="leftArrow"
+          style={{ zIndex: ZIndex.LightBoxButtons }}
+        >
+          <Icon svgIcon={ChevronLeft} color="white" size={IconSize.XSmall} />
+        </button>
+      )}
+      {onRightArrowClick && (
+        <button
+          className={classNames(styles.button, styles['arrow-button'], styles['arrow-button--right'])}
+          onClick={onRightArrowClick}
+          aria-label={ariaLabelRightArrow}
+          data-testid="rightarrow"
+          style={{ zIndex: ZIndex.LightBoxButtons }}
+        >
+          <Icon svgIcon={ChevronRight} color="white" size={IconSize.XSmall} />
+        </button>
+      )}
+      {imageText && (
+        <div
+          className={styles['image-text-box']}
+          style={{ bottom: imageTextOpen ? '0' : '-' + textBoxHeight + 'px', transition: '0.5s', zIndex: ZIndex.LightBoxButtons }}
+        >
+          <button
+            className={classNames(styles.button, styles['image-text-box__button'])}
+            onClick={() => setImageTextOpen(!imageTextOpen)}
+            style={{ zIndex: ZIndex.LightBoxButtons }}
+            aria-label={imageTextOpen ? ariaLabelCloseTextBox : ariaLabelOpenTextBox}
+            aria-expanded={imageTextOpen}
+          >
+            {imageTextOpen ? (
+              <Icon svgIcon={ChevronsDown} color="white" size={IconSize.XSmall} />
+            ) : (
+              <Icon svgIcon={ChevronsUp} color="white" size={IconSize.XSmall} />
+            )}
+          </button>
+          <div>
+            {typeof imageText === 'string' ? (
+              <p ref={textBoxRef} className={styles['image-text-box__text']}>
+                {imageText}
+              </p>
+            ) : (
+              <div ref={textBoxRef} className={styles['image-text-box__text']}>
+                {imageText}
+              </div>
+            )}
+            <div className={styles['image-text-box__overflow-border']}></div>
+          </div>
+        </div>
+      )}
+      <TransformWrapper smooth={false} initialScale={1} maxScale={4} doubleClick={{ mode: 'toggle', step: 4 }}>
+        {({ setTransform }) => (
+          <>
+            <Controls
+              transform={setTransform}
+              updateStates={updateStates}
+              zoom={zoom}
+              ariaLabelZoomIn={ariaLabelZoomIn}
+              ariaLabelZoomOut={ariaLabelZoomOut}
+              ariaLabelZoomSlider={ariaLabelZoomSlider}
+            />
+            <TransformComponent
+              wrapperStyle={{
+                zIndex: 1,
+                width: '100%',
+                height: '100%',
+              }}
+              contentStyle={{
+                width: '100%',
+                height: '100%',
+              }}
+            >
+              <img src={imageSrc} alt={imageAlt} />
+            </TransformComponent>
+          </>
+        )}
+      </TransformWrapper>
+    </div>
+  );
+};
+
+const Controls = ({
+  transform,
+  updateStates,
+  zoom,
+  ariaLabelZoomIn,
+  ariaLabelZoomOut,
+  ariaLabelZoomSlider,
+}: {
+  transform: (newPositionX: number, newPositionY: number, newScale: number, animationTime?: number | undefined) => void;
+  updateStates: (newZoom: number) => void;
+  zoom: number;
+  ariaLabelZoomIn: string;
+  ariaLabelZoomOut: string;
+  ariaLabelZoomSlider: string;
+}): React.JSX.Element => {
+  useTransformComponent(({ state }) => {
+    updateStates(state.scale);
+  });
+  const { zoomIn, zoomOut, centerView } = useControls();
+  let centerTimeout: number;
+
+  const calculateZoomCenter = (newScale: number): number[] => {
+    const element = document.getElementsByClassName('react-transform-component')[0];
+    const style = window.getComputedStyle(element);
+    const matrix = new WebKitCSSMatrix(style.transform);
+    const ratio = (newScale - zoom) / zoom + 1;
+    const x = (matrix.m41 - (window.innerWidth / 2) * (1 - zoom / newScale)) * ratio;
+    const y = (matrix.m42 - (window.innerHeight / 2) * (1 - zoom / newScale)) * ratio;
+    return [x, y];
+  };
+  const adjustZoom = (newScale: number | undefined): void => {
+    if (newScale === undefined || newScale === zoom) return;
+    if (newScale < 1) newScale = 1;
+    if (newScale > 4) newScale = 4;
+    const [x, y] = calculateZoomCenter(newScale);
+    transform(x, y, newScale, 1);
+
+    if (centerTimeout) {
+      clearTimeout(centerTimeout);
+    }
+
+    // Starter sentrering timeout hvis det zoomes ut
+    if (newScale - zoom < 0) {
+      centerTimeout = window.setTimeout(() => {
+        centerView();
+      }, 160);
+    }
+  };
+
+  useEffect(() => {
+    disableBodyScroll();
+    return (): void => {
+      enableBodyScroll();
+    };
+  }, []);
+
+  return (
+    <div className={classNames(styles['zoom-buttons'])} style={{ zIndex: ZIndex.LightBoxButtons }}>
+      <button className={classNames(styles.button)} onClick={() => zoomOut()} aria-label={ariaLabelZoomOut}>
+        <Icon svgIcon={Minus} color="white" size={IconSize.XSmall} />
+      </button>
+      <MiniSlider minValue={1} maxValue={4} onChange={adjustZoom} value={zoom} ariaLabel={ariaLabelZoomSlider} />
+      <button className={classNames(styles.button)} onClick={() => zoomIn()} aria-label={ariaLabelZoomIn}>
+        <Icon svgIcon={PlusSmall} color="white" size={IconSize.XSmall} />
+      </button>
+    </div>
+  );
+};
+
+export default LightBox;

package/src/components/LightBox/MiniSlider.tsx

@@ -0,0 +1,44 @@
+import React, { ChangeEvent } from 'react';
+
+import styles from './styles.module.scss';
+
+interface MiniSliderProps {
+  value: number;
+  minValue: number;
+  maxValue: number;
+  onChange: (newValue: number) => void;
+  ariaLabel: string;
+}
+
+const MiniSlider = (props: MiniSliderProps): React.JSX.Element => {
+  const handleOnChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    event.preventDefault();
+    const newValue = parseFloat(event.target.value);
+    props.onChange(newValue);
+  };
+
+  const ariaValueText = `${Math.round(props.value * 100)}%`;
+
+  return (
+    <div className={styles.slider} aria-live="polite">
+      <div key={props.value} className={styles.slider__announcements}>
+        {ariaValueText}
+      </div>
+      <input
+        onChange={handleOnChange}
+        type="range"
+        min={props.minValue}
+        max={props.maxValue}
+        value={props.value}
+        aria-valuenow={props.value}
+        aria-valuemin={props.minValue}
+        aria-valuemax={props.maxValue}
+        aria-valuetext={ariaValueText}
+        aria-label={props.ariaLabel}
+        step={0.1}
+      />
+    </div>
+  );
+};
+
+export default MiniSlider;

package/{components/LightBox/index.d.ts → src/components/LightBox/index.ts}

@@ -1,3 +1,3 @@
-import { default as LightBox } from './LightBox';
+import LightBox from './LightBox';
 export * from './LightBox';
 export default LightBox;

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["vitest/globals"]
+  },
+  "include": ["src"],
+  "exclude": ["**/*.test.snap.tsx", "**/*.stories.tsx"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}