@ldelia/react-media 0.4.2 → 0.4.4

package/dist/components/__tests__/timeline/timeline.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/reproduction-widget/ReproductionWidget.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Reproduction } from './models/Reproduction';
+interface BaseProps {
+    trainingMode: boolean;
+    onInit: (reproduction: Reproduction) => void;
+}
+interface TrainingProps extends BaseProps {
+    trainingMode: true;
+    videoId: string;
+}
+interface NonTrainingProps extends BaseProps {
+    trainingMode: false;
+    videoId?: never;
+}
+export type ReproductionWidgetProps = TrainingProps | NonTrainingProps;
+export declare const ReproductionWidget: ({ trainingMode, videoId, onInit, }: ReproductionWidgetProps) => React.JSX.Element;
+export {};

package/dist/components/reproduction-widget/index.js

@@ -0,0 +1 @@
+export * from './ReproductionWidget';

package/dist/components/reproduction-widget/inner-players/PlayAlongInnerPlayer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    onReady: (event: {
+        target: string;
+    }) => void;
+}
+export declare const PlayAlongInnerPlayer: ({ onReady }: Props) => React.JSX.Element;
+export {};

package/dist/components/reproduction-widget/inner-players/YouTubeInnerPlayer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { YouTubePlayer as InnerYouTubePlayer } from 'react-youtube';
+interface Props {
+    videoId: string;
+    onReady: (event: {
+        target: InnerYouTubePlayer;
+    }) => void;
+}
+export declare const YouTubeInnerPlayer: ({ videoId, onReady }: Props) => React.JSX.Element;
+export {};

package/dist/components/reproduction-widget/models/Player/PlayAlongPlayer.d.ts

@@ -0,0 +1,30 @@
+declare const dispatchOnReadyHandlers: unique symbol;
+declare const dispatchOnFinishHandlers: unique symbol;
+export declare class PlayAlongPlayer {
+    private readonly duration;
+    private currentTime;
+    private isRunning;
+    private currentPlaybackRate;
+    private innerPlayer;
+    private interval;
+    private [dispatchOnReadyHandlers];
+    private [dispatchOnFinishHandlers];
+    static get EVENTS(): {
+        readonly READY: "READY";
+        readonly FINISH: "FINISH";
+    };
+    constructor(duration: number, innerPlayer: string);
+    private setInnerPlayer;
+    play(): void;
+    pause(): void;
+    stop(): void;
+    seekTo(seconds: number): void;
+    getCurrentTime(): number;
+    getDuration(): number;
+    isAvailable(): boolean;
+    getAvailablePlaybackRates(): number[];
+    setPlaybackRate(playbackRate: number): void;
+    on(eventName: keyof typeof PlayAlongPlayer.EVENTS, handler: () => void): number | undefined;
+    dispatch(eventName: keyof typeof PlayAlongPlayer.EVENTS): void;
+}
+export {};

package/dist/components/reproduction-widget/models/Player/PlayerEvents.d.ts

@@ -0,0 +1,4 @@
+export declare const PLAYER_EVENTS: {
+    readonly READY: "READY";
+    readonly FINISH: "FINISH";
+};

package/dist/components/reproduction-widget/models/Player/YouTubePlayer.d.ts

@@ -0,0 +1,30 @@
+import { YouTubePlayer as InnerYouTubePlayer } from 'react-youtube';
+import { PlayAlongPlayer } from './PlayAlongPlayer';
+declare const dispatchOnReadyHandlers: unique symbol;
+declare const dispatchOnFinishHandlers: unique symbol;
+export declare class YouTubePlayer {
+    private currentTime;
+    private isRunning;
+    private innerPlayer;
+    private [dispatchOnReadyHandlers];
+    private [dispatchOnFinishHandlers];
+    static get EVENTS(): {
+        readonly READY: "READY";
+        readonly FINISH: "FINISH";
+    };
+    constructor(innerPlayer: InnerYouTubePlayer);
+    private setInnerPlayer;
+    getInnerPlayer(): any;
+    play(): void;
+    pause(): void;
+    stop(): void;
+    seekTo(seconds: number): void;
+    getCurrentTime(): any;
+    getDuration(): any;
+    getAvailablePlaybackRates(): any;
+    setPlaybackRate(playbackRate: number): void;
+    isAvailable(): boolean;
+    on(eventName: keyof typeof PlayAlongPlayer.EVENTS, handler: () => void): number | undefined;
+    dispatch(eventName: keyof typeof PlayAlongPlayer.EVENTS): void;
+}
+export {};

package/dist/components/reproduction-widget/models/Reproduction.d.ts

@@ -0,0 +1,66 @@
+import { ReproductionBuilder } from './ReproductionBuilder';
+import { PlayAlongPlayer } from './Player/PlayAlongPlayer';
+import { YouTubePlayer } from './Player/YouTubePlayer';
+type Player = PlayAlongPlayer | YouTubePlayer;
+declare const dispatchOnReadyHandlers: unique symbol;
+declare const dispatchOnSongStartHandlers: unique symbol;
+declare const dispatchOnCountingInHandlers: unique symbol;
+declare const dispatchOnPlayHandlers: unique symbol;
+declare const dispatchOnPlayingHandlers: unique symbol;
+declare const dispatchOnPausedHandlers: unique symbol;
+declare const dispatchOnFinishHandlers: unique symbol;
+export declare class Reproduction {
+    private player;
+    private requiresCountingIn;
+    private songTempo;
+    private state;
+    private ready;
+    private interval;
+    private countingInCounter;
+    private [dispatchOnReadyHandlers];
+    private [dispatchOnSongStartHandlers];
+    private [dispatchOnCountingInHandlers];
+    private [dispatchOnPlayHandlers];
+    private [dispatchOnPlayingHandlers];
+    private [dispatchOnPausedHandlers];
+    private [dispatchOnFinishHandlers];
+    static get EVENTS(): {
+        readonly READY: "READY";
+        readonly START: "START";
+        readonly COUNTING_IN: "COUNTING_IN";
+        readonly PLAY: "PLAY";
+        readonly PLAYING: "PLAYING";
+        readonly PAUSED: "PAUSED";
+        readonly FINISH: "FINISH";
+    };
+    static get STATES(): {
+        STOPPED: number;
+        COUNTING_IN: number;
+        PLAYING: number;
+        PAUSED: number;
+    };
+    constructor(player: Player, requiresCountingIn: boolean, songTempo: number);
+    on(eventName: keyof typeof Reproduction.EVENTS, handler: () => void): number | undefined;
+    dispatch(eventName: keyof typeof Reproduction.EVENTS): void;
+    private countIn;
+    start(): void;
+    play(): void;
+    pause(): void;
+    stop(): void;
+    isReady(): boolean;
+    isPlaying(): boolean;
+    isStopped(): boolean;
+    isPaused(): boolean;
+    isCountingIn(): boolean;
+    getPlayer(): Player;
+    getTempo(): number;
+    getCurrentTime(): any;
+    getDuration(): any;
+    seekTo(seconds: number): void;
+    getAvailablePlaybackRates(): any;
+    setPlaybackRate(playbackRate: number): void;
+    isAvailable(): boolean;
+    getBPMInterval(): number;
+    static newBuilder(): ReproductionBuilder;
+}
+export {};

package/dist/components/reproduction-widget/models/ReproductionBuilder.d.ts

@@ -0,0 +1,16 @@
+import { Reproduction } from './Reproduction';
+import { YouTubePlayer as InnerYouTubePlayer } from 'react-youtube';
+export declare class ReproductionBuilder {
+    private trainingMode;
+    private requiresCountingIn;
+    private songDuration;
+    private songTempo;
+    private innerPlayer;
+    constructor();
+    withSongDuration(songDuration: number): this;
+    withSongTempo(songTempo: number): this;
+    withTrainingMode(trainingMode: boolean): this;
+    withCountingIn(requiresCountingIn: boolean): this;
+    withInnerPlayer(innerPlayer: InnerYouTubePlayer | string): this;
+    createReproduction(): Reproduction;
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface RangeSelectorCanvasProps {
+    selectedRange: number[];
+    onChange: (value: number) => void;
+    onRangeChange: (value: number[]) => void;
+}
+declare const _default: React.NamedExoticComponent<RangeSelectorCanvasProps>;
+export default _default;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface TimelineProps {
+    duration: number;
+    value: number;
+    zoomLevel?: number;
+    className?: string;
+    selectedRange?: number[];
+    withTimeBlocks?: boolean;
+    onChange?: (value: number) => void;
+    onRangeChange?: (value: number[]) => void;
+}
+export declare const Timeline: React.FC<TimelineProps>;

package/dist/components/timeline/TimelineCanvas/TickTime.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type Props = {
+    start: number;
+    leftPosition: string;
+};
+declare const TickTime: React.FC<Props>;
+export default TickTime;

package/dist/components/timeline/TimelineCanvas/TickTimeCollectionDisplay.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface TickTimeCollectionDisplayProps {
+    tickTimes: number[];
+}
+declare const TickTimeCollectionDisplay: React.FC<TickTimeCollectionDisplayProps>;
+export default TickTimeCollectionDisplay;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface VaLueLineCanvasProps {
+    duration: number;
+    withTimeBlocks: boolean;
+}
+declare const TimelineCanvas: React.ForwardRefExoticComponent<VaLueLineCanvasProps & React.RefAttributes<HTMLCanvasElement>>;
+export default TimelineCanvas;

package/dist/components/timeline/TimelineCanvas/drawTimeBlocksOnCanvas.d.ts

@@ -0,0 +1,2 @@
+import { ZoomContextType } from '../ZoomContext/ZoomContext';
+export declare const drawTimeBlocksOnCanvas: (canvas: HTMLCanvasElement, blockStartingTimes: number[], zoomContextValue: ZoomContextType) => void;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    canvasRef: React.RefObject<HTMLCanvasElement>;
+    value: number;
+}
+export declare const TimelineValue: React.FC<Props>;
+export {};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export type ZoomContextType = {
+    blockOffset: number;
+    pixelsInSecond: number;
+    timelineWrapperWidth: number;
+};
+export declare const ZoomContext: React.Context<ZoomContextType>;

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

@@ -0,0 +1 @@
+export declare const zoomLevelConfigurations: number[][];

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

@@ -0,0 +1,7 @@
+import { ZoomContextType } from '../ZoomContext/ZoomContext';
+export declare const secondsToPixel: (zoomContextValue: ZoomContextType, seconds: number) => number;
+export declare const pixelToSeconds: (zoomContextValue: ZoomContextType, pixel: number) => number;
+export declare const getComputedElementWidth: (element: HTMLElement) => number;
+export declare const numberToPxString: (number: number) => string;
+export declare const getTimelineWrapperWidth: (timeLineContainerWidth: number, zoomLevel: number) => number;
+export declare function getBlockOffsetForZoomLevel(zoomLevel: number, duration: number, timelineWrapperWidth: number): number;

package/dist/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/stories/reproduction-widget.stories.d.ts

@@ -0,0 +1,4 @@
+import { ReproductionWidgetProps } from '../components/reproduction-widget';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/dist/types-a5624094").R, import("@storybook/csf").Args>;
+export default _default;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, ReproductionWidgetProps>;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "A React components collection for media-related features.",
   "private": false,
   "keywords": [
@@ -11,7 +11,51 @@
   "license": "MIT",
   "bugs": "https://github.com/ldelia/react-media/issues",
   "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "start": "node scripts/start.js",
+    "build": "tsc",
+    "test": "node scripts/test.js",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "plugin:storybook/recommended",
+      "prettier"
+    ],
+    "plugins": [
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": "error"
+    }
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "dependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@svgr/webpack": "^8.1.0",
@@ -64,40 +108,6 @@
     "webpack-manifest-plugin": "^4.0.2",
     "workbox-webpack-plugin": "^6.4.1"
   },
-  "scripts": {
-    "start": "node scripts/start.js",
-    "build": "tsc",
-    "test": "node scripts/test.js",
-    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest",
-      "plugin:storybook/recommended",
-      "prettier"
-    ],
-    "plugins": [
-      "prettier"
-    ],
-    "rules": {
-      "prettier/prettier": "error"
-    }
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "devDependencies": {
     "@babel/core": "^7.24.9",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",

package/.bitmap

@@ -1,48 +0,0 @@
-/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
-
-{
-    "ldelia.react-media/timeline@1.0.8": {
-        "files": [
-            {
-                "relativePath": "src/components/timeline/README.md",
-                "test": false,
-                "name": "README.md"
-            },
-            {
-                "relativePath": "src/components/timeline/RangeSelectorCanvas.tsx",
-                "test": false,
-                "name": "RangeSelectorCanvas.tsx"
-            },
-            {
-                "relativePath": "src/components/timeline/TickTime.tsx",
-                "test": false,
-                "name": "TickTime.tsx"
-            },
-            {
-                "relativePath": "src/components/timeline/TickTimeCollectionDisplay.tsx",
-                "test": false,
-                "name": "TickTimeCollectionDisplay.tsx"
-            },
-            {
-                "relativePath": "src/components/timeline/VaLueLineCanvas.tsx",
-                "test": false,
-                "name": "VaLueLineCanvas.tsx"
-            },
-            {
-                "relativePath": "src/components/timeline/index.tsx",
-                "test": false,
-                "name": "index.tsx"
-            },
-            {
-                "relativePath": "src/components/timeline/utils/utils.ts",
-                "test": false,
-                "name": "utils.ts"
-            }
-        ],
-        "mainFile": "src/components/timeline/index.tsx",
-        "trackDir": "src/components/timeline",
-        "origin": "AUTHORED",
-        "exported": true
-    },
-    "version": "14.8.8"
-}

package/.eslintcache

@@ -1 +0,0 @@
-[{"/home/ldelia/Proyectos/react-media/src/components/timeline/index.tsx":"1","/home/ldelia/Proyectos/react-media/src/components/timeline/VaLueLineCanvas.tsx":"2","/home/ldelia/Proyectos/react-media/src/components/timeline/TickTimeCollectionDisplay.tsx":"3","/home/ldelia/Proyectos/react-media/src/components/timeline/RangeSelectorCanvas.tsx":"4","/home/ldelia/Proyectos/react-media/src/components/timeline/utils/utils.ts":"5","/home/ldelia/Proyectos/react-media/src/components/timeline/TickTime.tsx":"6","/home/ldelia/Proyectos/react-media/src/stories/timeline.stories.tsx":"7","/home/ldelia/Proyectos/react-media/src/components/timeline/constants.ts":"8"},{"size":4115,"mtime":1612815036821,"results":"9","hashOfConfig":"10"},{"size":3108,"mtime":1611772905837,"results":"11","hashOfConfig":"10"},{"size":1159,"mtime":1611772905837,"results":"12","hashOfConfig":"10"},{"size":6266,"mtime":1611772905837,"results":"13","hashOfConfig":"10"},{"size":404,"mtime":1611772905841,"results":"14","hashOfConfig":"10"},{"size":988,"mtime":1611772905837,"results":"15","hashOfConfig":"10"},{"size":860,"mtime":1611772905841,"results":"16","hashOfConfig":"10"},{"size":319,"mtime":1612814974971,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"v8ab83",{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/ldelia/Proyectos/react-media/src/components/timeline/index.tsx",[],"/home/ldelia/Proyectos/react-media/src/components/timeline/VaLueLineCanvas.tsx",[],"/home/ldelia/Proyectos/react-media/src/components/timeline/TickTimeCollectionDisplay.tsx",[],"/home/ldelia/Proyectos/react-media/src/components/timeline/RangeSelectorCanvas.tsx",[],"/home/ldelia/Proyectos/react-media/src/components/timeline/utils/utils.ts",[],"/home/ldelia/Proyectos/react-media/src/components/timeline/TickTime.tsx",[],"/home/ldelia/Proyectos/react-media/src/stories/timeline.stories.tsx",[],"/home/ldelia/Proyectos/react-media/src/components/timeline/constants.ts",[]]

package/.prettierignore

@@ -1,3 +0,0 @@
-node_modules
-dist
-build

package/.prettierrc

@@ -1,7 +0,0 @@
-{
-  "singleQuote": true,
-  "semi": true,
-  "trailingComma": "all",
-  "printWidth": 80,
-  "tabWidth": 2
-}

package/.storybook/main.js

@@ -1,38 +0,0 @@
-module.exports = {
-    "stories": [
-        "../src/**/*.stories.mdx",
-        "../src/**/*.stories.@(js|jsx|ts|tsx)"
-    ],
-    "addons": [
-        "@storybook/addon-links",
-        "@storybook/addon-essentials",
-        '@storybook/addon-docs',
-    ],
-    "framework": {
-        name: "@storybook/react-webpack5",
-        options: {},
-    },
-    webpackFinal: async (config) => {
-        config.module.rules.push({
-            test: /\.(ts|tsx)$/,
-            use: [
-                {
-                    loader: require.resolve('babel-loader'),
-                    options: {
-                        presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
-                    },
-                },
-                {
-                    loader: require.resolve('ts-loader'),
-                    options: {
-                        transpileOnly: true, // Disable type checking
-                    },
-                },
-            ],
-        });
-
-        config.resolve.extensions.push('.ts', '.tsx');
-
-        return config;
-    },
-}

package/.storybook/preview.js

@@ -1,4 +0,0 @@
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-}

package/config/env.js

@@ -1,104 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
-
-// Make sure that including paths.js after env.js will read .env variables.
-delete require.cache[require.resolve('./paths')];
-
-const NODE_ENV = process.env.NODE_ENV;
-if (!NODE_ENV) {
-  throw new Error(
-    'The NODE_ENV environment variable is required but was not specified.'
-  );
-}
-
-// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
-const dotenvFiles = [
-  `${paths.dotenv}.${NODE_ENV}.local`,
-  // Don't include `.env.local` for `test` environment
-  // since normally you expect tests to produce the same
-  // results for everyone
-  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
-  `${paths.dotenv}.${NODE_ENV}`,
-  paths.dotenv,
-].filter(Boolean);
-
-// Load environment variables from .env* files. Suppress warnings using silent
-// if this file is missing. dotenv will never modify any environment variables
-// that have already been set.  Variable expansion is supported in .env files.
-// https://github.com/motdotla/dotenv
-// https://github.com/motdotla/dotenv-expand
-dotenvFiles.forEach(dotenvFile => {
-  if (fs.existsSync(dotenvFile)) {
-    require('dotenv-expand')(
-      require('dotenv').config({
-        path: dotenvFile,
-      })
-    );
-  }
-});
-
-// We support resolving modules according to `NODE_PATH`.
-// This lets you use absolute paths in imports inside large monorepos:
-// https://github.com/facebook/create-react-app/issues/253.
-// It works similar to `NODE_PATH` in Node itself:
-// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
-// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
-// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
-// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
-// We also resolve them to make sure all tools using them work consistently.
-const appDirectory = fs.realpathSync(process.cwd());
-process.env.NODE_PATH = (process.env.NODE_PATH || '')
-  .split(path.delimiter)
-  .filter(folder => folder && !path.isAbsolute(folder))
-  .map(folder => path.resolve(appDirectory, folder))
-  .join(path.delimiter);
-
-// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
-// injected into the application via DefinePlugin in webpack configuration.
-const REACT_APP = /^REACT_APP_/i;
-
-function getClientEnvironment(publicUrl) {
-  const raw = Object.keys(process.env)
-    .filter(key => REACT_APP.test(key))
-    .reduce(
-      (env, key) => {
-        env[key] = process.env[key];
-        return env;
-      },
-      {
-        // Useful for determining whether we’re running in production mode.
-        // Most importantly, it switches React into the correct mode.
-        NODE_ENV: process.env.NODE_ENV || 'development',
-        // Useful for resolving the correct path to static assets in `public`.
-        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
-        // This should only be used as an escape hatch. Normally you would put
-        // images into the `src` and `import` them in code to get their paths.
-        PUBLIC_URL: publicUrl,
-        // We support configuring the sockjs pathname during development.
-        // These settings let a developer run multiple simultaneous projects.
-        // They are used as the connection `hostname`, `pathname` and `port`
-        // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
-        // and `sockPort` options in webpack-dev-server.
-        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
-        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
-        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
-        // Whether or not react-refresh is enabled.
-        // It is defined here so it is available in the webpackHotDevClient.
-        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
-      }
-    );
-  // Stringify all values so we can feed into webpack DefinePlugin
-  const stringified = {
-    'process.env': Object.keys(raw).reduce((env, key) => {
-      env[key] = JSON.stringify(raw[key]);
-      return env;
-    }, {}),
-  };
-
-  return { raw, stringified };
-}
-
-module.exports = getClientEnvironment;