@ldelia/react-media 0.4.1 → 0.4.3

package/dist/index.js

@@ -1,17 +1 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./components"), exports);
+export * from './components';

package/dist/setupTests.js

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 // jest-dom adds custom jest matchers for asserting on DOM nodes.
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-require("@testing-library/jest-dom");
+import '@testing-library/jest-dom';

package/dist/stories/timeline.stories.js

@@ -1,57 +1,51 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Minimalist = exports.WithoutTimeBlocks = exports.WithCustomClassName = exports.WithSelectedRange = exports.Default = void 0;
-const react_1 = __importDefault(require("react"));
-const timeline_1 = require("../components/timeline");
-const styled_components_1 = __importDefault(require("styled-components"));
-require("./timeline.stories.custom.css");
-const StyledTimeline = (0, styled_components_1.default)(timeline_1.Timeline) `
+import React from 'react';
+import { Timeline } from '../components/timeline';
+import styled from 'styled-components';
+import './timeline.stories.custom.css';
+const StyledTimeline = styled(Timeline) `
   .media-timeline-value-line {
     background-color: red;
     width: 5px;
   }
 `;
-exports.default = {
+export default {
     title: 'Timeline',
-    component: timeline_1.Timeline,
+    component: Timeline,
     argTypes: {
         onChange: { action: 'changed' },
         onRangeChange: { action: 'range changed' },
     },
 };
-const Template = (args) => (react_1.default.createElement(StyledTimeline, Object.assign({}, args)));
-exports.Default = Template.bind({});
-exports.Default.args = {
+const Template = (args) => (React.createElement(StyledTimeline, Object.assign({}, args)));
+export const Default = Template.bind({});
+Default.args = {
     duration: 305,
     value: 301,
     zoomLevel: 0,
 };
-exports.WithSelectedRange = Template.bind({});
-exports.WithSelectedRange.args = {
+export const WithSelectedRange = Template.bind({});
+WithSelectedRange.args = {
     duration: 305,
     value: 31,
     zoomLevel: 0,
     selectedRange: [20, 30],
 };
-exports.WithCustomClassName = Template.bind({});
-exports.WithCustomClassName.args = {
+export const WithCustomClassName = Template.bind({});
+WithCustomClassName.args = {
     duration: 305,
     value: 31,
     zoomLevel: 0,
     className: 'this-class-redefines-styles',
 };
-exports.WithoutTimeBlocks = Template.bind({});
-exports.WithoutTimeBlocks.args = {
+export const WithoutTimeBlocks = Template.bind({});
+WithoutTimeBlocks.args = {
     duration: 305,
     value: 31,
     zoomLevel: 0,
     withTimeBlocks: false,
 };
-exports.Minimalist = Template.bind({});
-exports.Minimalist.args = {
+export const Minimalist = Template.bind({});
+Minimalist.args = {
     duration: 305,
     value: 31,
     zoomLevel: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "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;

package/config/getHttpsConfig.js

@@ -1,66 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const crypto = require('crypto');
-const chalk = require('react-dev-utils/chalk');
-const paths = require('./paths');
-
-// Ensure the certificate and key provided are valid and if not
-// throw an easy to debug error
-function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
-  let encrypted;
-  try {
-    // publicEncrypt will throw an error with an invalid cert
-    encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
-  } catch (err) {
-    throw new Error(
-      `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
-    );
-  }
-
-  try {
-    // privateDecrypt will throw an error with an invalid key
-    crypto.privateDecrypt(key, encrypted);
-  } catch (err) {
-    throw new Error(
-      `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
-        err.message
-      }`
-    );
-  }
-}
-
-// Read file and throw an error if it doesn't exist
-function readEnvFile(file, type) {
-  if (!fs.existsSync(file)) {
-    throw new Error(
-      `You specified ${chalk.cyan(
-        type
-      )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
-    );
-  }
-  return fs.readFileSync(file);
-}
-
-// Get the https config
-// Return cert files if provided in env, otherwise just true or false
-function getHttpsConfig() {
-  const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
-  const isHttps = HTTPS === 'true';
-
-  if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
-    const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
-    const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
-    const config = {
-      cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
-      key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
-    };
-
-    validateKeyAndCerts({ ...config, keyFile, crtFile });
-    return config;
-  }
-  return isHttps;
-}
-
-module.exports = getHttpsConfig;

package/config/jest/babelTransform.js

@@ -1,29 +0,0 @@
-'use strict';
-
-const babelJest = require('babel-jest').default;
-
-const hasJsxRuntime = (() => {
-  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
-    return false;
-  }
-
-  try {
-    require.resolve('react/jsx-runtime');
-    return true;
-  } catch (e) {
-    return false;
-  }
-})();
-
-module.exports = babelJest.createTransformer({
-  presets: [
-    [
-      require.resolve('babel-preset-react-app'),
-      {
-        runtime: hasJsxRuntime ? 'automatic' : 'classic',
-      },
-    ],
-  ],
-  babelrc: false,
-  configFile: false,
-});

package/config/jest/cssTransform.js

@@ -1,14 +0,0 @@
-'use strict';
-
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process() {
-    return 'module.exports = {};';
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return 'cssTransform';
-  },
-};

package/config/jest/fileTransform.js

@@ -1,40 +0,0 @@
-'use strict';
-
-const path = require('path');
-const camelcase = require('camelcase');
-
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process(src, filename) {
-    const assetFilename = JSON.stringify(path.basename(filename));
-
-    if (filename.match(/\.svg$/)) {
-      // Based on how SVGR generates a component name:
-      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
-      const pascalCaseFilename = camelcase(path.parse(filename).name, {
-        pascalCase: true,
-      });
-      const componentName = `Svg${pascalCaseFilename}`;
-      return `const React = require('react');
-      module.exports = {
-        __esModule: true,
-        default: ${assetFilename},
-        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
-          return {
-            $$typeof: Symbol.for('react.element'),
-            type: 'svg',
-            ref: ref,
-            key: null,
-            props: Object.assign({}, props, {
-              children: ${assetFilename}
-            })
-          };
-        }),
-      };`;
-    }
-
-    return `module.exports = ${assetFilename};`;
-  },
-};