@amoa/casting 0.1.3 → 0.1.4

package/dist/packages/ingots/src/file/input/index.js

@@ -0,0 +1,261 @@
+import * as React from 'react';
+import { build } from '../../../../forge/src/classes.js';
+import { shake } from '../../../../forge/src/strings/index.js';
+import { j as jsxRuntimeExports } from '../../../../../_virtual/jsx-runtime.js';
+import Path from '../../../../runes/src/paths/arrow/path.js';
+import Fill from '../../../../runes/src/paths/check/fill.js';
+import Alert from '../../../../runes/src/paths/alert.js';
+import Click from '../../../../runes/src/paths/click.js';
+import Download from '../../../../runes/src/paths/download.js';
+import Card from '../card/index.js';
+import styles from './index.module.css.js';
+
+const icons = {
+  idle: Download,
+  dragging: Click,
+  importing: Path,
+  imported: Fill,
+  error: Alert,
+  incompatible: Alert,
+  larger: Alert
+};
+const messages = {
+  idle: "Importez ici votre fichier",
+  dragging: "Déposez ici votre fichier",
+  importing: "Votre fichier est en cours d’import...",
+  imported: "Votre fichier a bien été importé !",
+  error: "Nous avons rencontré une erreur",
+  larger: "Le fichier est trop volumineux",
+  incompatible: "Format du fichier incompatible"
+};
+const colors = {
+  imported: "green",
+  error: "red",
+  larger: "red",
+  incompatible: "red"
+};
+const TYPES = {
+  jpeg: {
+    title: "jpeg",
+    code: "image/jpeg"
+  },
+  png: {
+    title: "png",
+    code: "image/png"
+  },
+  webp: {
+    title: "webp",
+    code: "image/webp"
+  },
+  pdf: {
+    title: "pdf",
+    code: "application/pdf"
+  },
+  zip: {
+    title: "zip",
+    code: "application/zip"
+  }
+};
+const types = {
+  jpg: TYPES.jpeg,
+  jpeg: TYPES.jpeg,
+  png: TYPES.png,
+  webp: TYPES.webp,
+  pdf: TYPES.pdf,
+  zip: TYPES.zip,
+  ".jpg": TYPES.jpeg,
+  ".jpeg": TYPES.jpeg,
+  ".png": TYPES.png,
+  ".webp": TYPES.webp,
+  ".pdf": TYPES.pdf,
+  ".zip": TYPES.zip,
+  "image/jpeg": TYPES.jpeg,
+  "image/png": TYPES.png,
+  "image/webp": TYPES.webp,
+  "application/pdf": TYPES.pdf,
+  "application/zip": TYPES.zip
+};
+const accept = formats => {
+  return formats?.reduce((acc, format) => {
+    if (!types[format]) return acc;
+    const {
+      title,
+      code
+    } = types[format];
+    return {
+      acceptance: [...acc.acceptance, code],
+      accepted: [...acc.accepted, title]
+    };
+  }, {
+    acceptance: [],
+    accepted: []
+  });
+};
+const insert = (list, word) => {
+  const index = list.length - 1;
+  const uppercase = list.map(item => item.toUpperCase());
+  const major = uppercase.slice(0, index);
+  const last = uppercase[index];
+  if (index === 0) return last;
+  return `${major.join(", ")} ${word} ${last}`;
+};
+const File = ({
+  className,
+  onSelected,
+  onChange,
+  multiple,
+  formats = ["pdf", "jpg", "png"],
+  size = 8,
+  single,
+  error,
+  value,
+  helper,
+  small,
+  reset,
+  list = "",
+  required,
+  children,
+  name,
+  label = false
+}) => {
+  const [files, setFiles] = React.useState(value || []);
+  const [status, setStatus] = React.useState("idle");
+  const {
+    acceptance,
+    accepted
+  } = accept(formats);
+  const ref = React.useRef();
+  const Icon = icons[status];
+  const color = colors[status];
+  const description = `${insert(accepted, "ou")} - ${size}MB max.`;
+  const imported = single ? "Cliquez ici pour remplacer par un nouveau fichier" : "Importer un nouveau fichier";
+  const invalid = required && files.length < 1;
+  const id = name || `file-${shake(undefined, 4, 4)}`;
+  const descriptions = {
+    idle: description,
+    dragging: description,
+    imported,
+    error: "Réessayer",
+    larger: "Réessayer",
+    incompatible: "Réessayer"
+  };
+  const add = dropped => {
+    if (!dropped?.length) return;
+    const added = Array.from(dropped);
+    const larger = added.some(file => file.size > 1048576 * size);
+    const wrong = !added.some(({
+      type
+    }) => acceptance.includes(type));
+    if (larger) return setStatus("larger");
+    if (wrong) return setStatus("incompatible");
+    setStatus("imported");
+    if (single) setFiles([...added]);else setFiles(files => [...files, ...added]);
+    if (!single) window.setTimeout(() => setStatus("idle"), 3000);
+  };
+  const _onChange = event => {
+    const files = event.target.files;
+    add(files);
+  };
+  const onDrop = event => {
+    event.preventDefault();
+    const {
+      dataTransfer
+    } = event;
+    const {
+      files
+    } = dataTransfer;
+    add(files);
+  };
+  const onDragEnter = event => {
+    event.preventDefault();
+    setStatus("dragging");
+  };
+  const onDragOver = event => {
+    event.preventDefault();
+  };
+  const onDelete = lastModified => () => () => {
+    const list = files.filter(file => file.lastModified !== lastModified);
+    setFiles(list);
+    !list.length && setStatus("idle");
+  };
+  React.useEffect(() => {
+    if (files.length > 0) {
+      setFiles(value || []);
+      ref.current.files = new DataTransfer().files;
+      setStatus("idle");
+    }
+  }, [reset]);
+  React.useEffect(() => {
+    if (typeof onSelected === "function" && files.length > 0) onSelected(files);
+    if (typeof onChange === "function") onChange(files);
+  }, [files, onSelected, onChange]);
+  React.useEffect(() => {
+    if (error) setStatus("error");
+  }, [error]);
+  const classes = build(className, styles.root, {
+    [styles.files]: files.length,
+    [styles[color]]: color,
+    [styles[status]]: status,
+    [styles.small]: small
+  });
+  return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+    className: classes,
+    children: [children && label && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+      className: styles.question,
+      children: children
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs("label", {
+      htmlFor: id,
+      className: styles.label,
+      onDrop: onDrop,
+      onDragEnter: onDragEnter,
+      onDragOver: onDragOver,
+      children: [/*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+        className: styles.information,
+        "data-invalid": invalid,
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
+          className: styles.icon,
+          children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {
+            width: 28,
+            height: 28
+          })
+        }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+          className: styles.text,
+          children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
+            className: styles.title,
+            children: messages[status]
+          }), /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+            className: styles.description,
+            children: descriptions[status]
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntimeExports.jsx("input", {
+        className: styles.input,
+        type: "file",
+        id: id,
+        onChange: _onChange,
+        accept: acceptance.join(","),
+        multiple: multiple,
+        hidden: true,
+        ref: ref
+      })]
+    }), files.length > 0 && list && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+      className: styles.list,
+      children: files.map(({
+        lastModified,
+        name
+      }, index) => {
+        return /*#__PURE__*/jsxRuntimeExports.jsx(Card, {
+          className: styles.file,
+          onDelete: onDelete(lastModified),
+          title: name,
+          small: list === "small"
+        }, `file-${index}`);
+      })
+    }), helper && /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+      className: styles.helper,
+      children: helper
+    })]
+  });
+};
+
+export { File as default };

package/dist/packages/ingots/src/file/input/index.module.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index-module_root__SMoii {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.index-module_question__NtE-j {\n  display: flex;\n  justify-content: space-between;\n  padding: 0 8px;\n  font-weight: 600;\n}\n\n.index-module_label__VPiEN {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 60px;\n  width: 100%;\n  padding: 12px;\n  cursor: pointer;\n  background-color: var(--light-background);\n  border-radius: var(--border-radius);\n  border: 1px dashed var(--bright-blue);\n  transition:\n    background-color var(--transition-short),\n    border var(--transition-short),\n    filter var(--transition-short);\n}\n\n.index-module_label__VPiEN:hover {\n  background-color: var(--lighter-stroke);\n  border: 1px solid var(--lighter-stroke);\n}\n\n.index-module_label__VPiEN:active,\n.index-module_label__VPiEN:focus {\n  box-shadow: 0 0 0 3px rgba(var(--dropshadow-blue), 0.3);\n}\n\n.index-module_information__rv2fk {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.index-module_icon__-R9vX {\n  display: flex;\n  padding: 4px;\n  border-radius: var(--border-radius);\n  background-color: var(--lighter-stroke);\n}\n\n.index-module_text__zUJtP {\n  display: flex;\n  flex-direction: column;\n}\n\n.index-module_title__xr0dD {\n  font-weight: 600;\n}\n\n.index-module_description__G1hgH {\n  font-size: 14px;\n  color: var(--tertiary-text);\n}\n\n.index-module_helper__G6BNR {\n  font-size: 14px;\n  color: var(--tertiary-text);\n}\n\n.index-module_input__ydnxA {\n  display: none;\n}\n\n.index-module_list__V5K24 {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n}\n\n.index-module_file__8mj9e {\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.index-module_file__8mj9e > div > span > span {\n  position: relative;\n  width: auto;\n}\n\n.index-module_dragging__jntWV:hover {\n  box-shadow: 0 0 0 3px rgba(var(--dropshadow-blue), 0.3);\n}\n\n.index-module_imported__iqs3y .index-module_label__VPiEN {\n  border: 1px solid var(--stroke-blue);\n}\n\n.index-module_red__poyEv .index-module_icon__-R9vX,\n.index-module_red__poyEv .index-module_title__xr0dD {\n  color: var(--strong-red);\n}\n\n.index-module_green__9le1e .index-module_icon__-R9vX,\n.index-module_green__9le1e .index-module_title__xr0dD {\n  color: var(--green);\n}\n\n.index-module_small__Q0es2 .index-module_helper__G6BNR,\n.index-module_small__Q0es2 .index-module_question__NtE-j {\n  font-size: 12px;\n}\n\n.index-module_small__Q0es2 .index-module_information__rv2fk {\n  gap: 8px;\n}\n\n.index-module_small__Q0es2 .index-module_description__G1hgH,\n.index-module_small__Q0es2 .index-module_title__xr0dD {\n  font-size: 12px;\n}\n\n.index-module_small__Q0es2 .index-module_icon__-R9vX {\n  padding: 8px;\n}\n\n.index-module_small__Q0es2 .index-module_icon__-R9vX > svg {\n  width: 20px;\n  height: 20px;\n}\n";
+var styles = {"root":"index-module_root__SMoii","question":"index-module_question__NtE-j","label":"index-module_label__VPiEN","information":"index-module_information__rv2fk","icon":"index-module_icon__-R9vX","text":"index-module_text__zUJtP","title":"index-module_title__xr0dD","description":"index-module_description__G1hgH","helper":"index-module_helper__G6BNR","input":"index-module_input__ydnxA","list":"index-module_list__V5K24","file":"index-module_file__8mj9e","dragging":"index-module_dragging__jntWV","imported":"index-module_imported__iqs3y","red":"index-module_red__poyEv","green":"index-module_green__9le1e","small":"index-module_small__Q0es2"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/packages/ingots/src/input/index.js

@@ -0,0 +1,75 @@
+import 'react';
+import Button from '../button/index.js';
+import Checkbox from '../checkbox/index.js';
+import Textarea from '../textarea/index.js';
+import Input$1 from '../date/input/index.js';
+import File from '../file/input/index.js';
+import Select from '../select/index.js';
+import Toggle from '../toggle/index.js';
+import Address from '../address/index.js';
+import Text from '../text/index.js';
+import { email } from './src/validation/index.js';
+import { j as jsxRuntimeExports } from '../../../../_virtual/jsx-runtime.js';
+
+const Fallback = ({
+  type
+}) => {
+  console.warn(`Type ${type} non pris en compte.`);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+    children: ["Type $", type, " non pris en compte."]
+  });
+};
+const Input = ({
+  type,
+  ...props
+}) => {
+  switch (type) {
+    case "button":
+      return /*#__PURE__*/jsxRuntimeExports.jsx(Button, {
+        ...props
+      });
+    case "checkbox":
+      return /*#__PURE__*/jsxRuntimeExports.jsx(Checkbox, {
+        ...props
+      });
+    case "date":
+      return /*#__PURE__*/jsxRuntimeExports.jsx(Input$1, {
+        ...props
+      });
+    case "color":
+      return /*#__PURE__*/jsxRuntimeExports.jsx(Fallback, {
+        type: type
+      });
+    case "file":
+      return /*#__PURE__*/jsxRuntimeExports.jsx(File, {
+        ...props
+      });
+    case "textarea":
+      return /*#__PURE__*/jsxRuntimeExports.jsx(Textarea, {
+        ...props
+      });
+    case "select":
+      return /*#__PURE__*/jsxRuntimeExports.jsx(Select, {
+        ...props
+      });
+    case "toggle":
+      return /*#__PURE__*/jsxRuntimeExports.jsx(Toggle, {
+        ...props
+      });
+    case "address":
+      return /*#__PURE__*/jsxRuntimeExports.jsx(Address, {
+        ...props
+      });
+    case "email":
+      return /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+        validation: email,
+        ...props
+      });
+  }
+  return /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+    type: type,
+    ...props
+  });
+};
+
+export { Input as default };

package/dist/packages/ingots/src/input/src/validation/index.js

@@ -0,0 +1,3 @@
+const email = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+export { email };

package/dist/packages/ingots/src/loader/index.js

@@ -0,0 +1,23 @@
+import 'react';
+import { build } from '../../../forge/src/classes.js';
+import Spinner from './variants/spinner/index.js';
+import styles from './index.module.css.js';
+import { j as jsxRuntimeExports } from '../../../../_virtual/jsx-runtime.js';
+
+const variants = {
+  spinner: Spinner
+};
+const Loader = ({
+  variant = "spinner",
+  className,
+  ...props
+}) => {
+  const Variant = variants[variant];
+  const classes = build(styles.loader, className);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(Variant, {
+    className: classes,
+    ...props
+  });
+};
+
+export { Loader as default };

package/dist/packages/ingots/src/loader/index.module.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "";
+var styles = {};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/packages/ingots/src/loader/variants/spinner/index.js

@@ -0,0 +1,31 @@
+import 'react';
+import { build } from '../../../../../forge/src/classes.js';
+import styles from './index.module.css.js';
+import { j as jsxRuntimeExports } from '../../../../../../_virtual/jsx-runtime.js';
+
+const hexaPattern = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{3})$/;
+const checkHexa = string => hexaPattern.test(string);
+const shader = shade => {
+  const isHexa = checkHexa(shade);
+  return isHexa ? {
+    borderBottomColor: shade
+  } : {};
+};
+const Spinner = ({
+  color,
+  shade,
+  className
+}) => {
+  const classes = build(styles.root, className, {
+    [styles.color]: color
+  });
+  const style = {
+    ...shader(shade)
+  };
+  return /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+    className: classes,
+    style: style
+  });
+};
+
+export { Spinner as default };

package/dist/packages/ingots/src/loader/variants/spinner/index.module.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index-module_root__ndbCK {\n  display: table;\n  justify-self: center;\n  align-self: center;\n  width: 42px;\n  height: 42px;\n  margin: auto;\n  border: 6px solid var(--square-blue, #f5f5f5);\n  border-bottom-color: var(--strong-blue);\n  box-sizing: border-box;\n  border-radius: 50%;\n  animation: index-module_loader-spining__1bCLc 640ms ease infinite, index-module_loader-color__YUfwS 1280ms ease infinite;\n}\n\n@keyframes index-module_loader-spining__1bCLc {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes index-module_loader-color__YUfwS {\n  0% {\n    filter: contrast(1);\n  }\n  50% {\n    filter: contrast(0.8);\n  }\n  100% {\n    filter: contrast(1);\n  }\n}\n";
+var styles = {"root":"index-module_root__ndbCK"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/packages/ingots/src/select/card/index.js

@@ -0,0 +1,33 @@
+import 'react';
+import { build } from '../../../../forge/src/classes.js';
+import { j as jsxRuntimeExports } from '../../../../../_virtual/jsx-runtime.js';
+import Regular from '../../../../runes/src/paths/cross/regular.js';
+import styles from './index.module.css.js';
+
+const Card = ({
+  title,
+  value,
+  formatter,
+  onDelete,
+  small
+}) => {
+  const classes = build(styles.root, {
+    [styles.small]: small
+  });
+  const text = typeof formatter === "function" ? formatter(value, title) : title;
+  const onClick = () => {
+    onDelete(value);
+  };
+  return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+    className: classes,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
+      className: styles.text,
+      children: text
+    }), /*#__PURE__*/jsxRuntimeExports.jsx(Regular, {
+      className: styles.delete,
+      onClick: onClick
+    })]
+  });
+};
+
+export { Card as default };

package/dist/packages/ingots/src/select/card/index.module.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index-module_root__lLUIk {\n  flex: 0 1 auto;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background-color: var(--light-background);\n  border: 0.5px solid var(--stroke);\n  border-radius: 4px;\n  padding: 4px 8px;\n  min-width: 0;\n  box-shadow: 0px 0px 2px 0px rgba(var(--japanese-indigo), 0.2);\n}\n\n.index-module_root__lLUIk:hover {\n  background-color: var(--lighter-stroke);\n}\n\n.index-module_text__IrSLW {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 12px;\n}\n\n.index-module_delete__1S-5A {\n  color: var(--red);\n  width: 12px;\n  height: 12px;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.index-module_delete__1S-5A:hover {\n  color: var(--strong-red);\n}\n\n.index-module_small__d5SxP {\n  padding: 2px 4px;\n  gap: 2px;\n}\n\n.index-module_small__d5SxP .index-module_text__IrSLW {\n  font-size: 10px;\n}\n";
+var styles = {"root":"index-module_root__lLUIk","text":"index-module_text__IrSLW","delete":"index-module_delete__1S-5A","small":"index-module_small__d5SxP"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/packages/ingots/src/select/category/index.js

@@ -0,0 +1,13 @@
+import styles from './index.module.css.js';
+import { j as jsxRuntimeExports } from '../../../../../_virtual/jsx-runtime.js';
+
+const Category = ({
+  title
+}) => {
+  return /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+    className: styles.root,
+    children: title
+  });
+};
+
+export { Category as default };

package/dist/packages/ingots/src/select/category/index.module.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index-module_root__9df-r {\n  display: flex;\n  width: 100%;\n  padding: 8px 12px;\n  font-weight: 600;\n  background-color: var(--lighter-stroke);\n}\n";
+var styles = {"root":"index-module_root__9df-r"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/packages/ingots/src/select/content/index.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import Option from '../option/index.js';
+import Category from '../category/index.js';
+import { j as jsxRuntimeExports } from '../../../../../_virtual/jsx-runtime.js';
+
+const Content = ({
+  options,
+  multiple,
+  small,
+  onOptionClick,
+  formatter,
+  selected
+}) => {
+  const props = {
+    multiple,
+    small,
+    onOptionClick,
+    formatter
+  };
+  return options.map((option, index) => {
+    const {
+      suboptions
+    } = option || {};
+    return !!suboptions ? /*#__PURE__*/jsxRuntimeExports.jsxs(React.Fragment, {
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Category, {
+        title: option.title
+      }), suboptions.map(({
+        value,
+        title
+      }, subIndex) => /*#__PURE__*/jsxRuntimeExports.jsx(Option, {
+        selected: selected.some(item => value === item.value),
+        title: title,
+        value: value,
+        ...props
+      }, `${option.value}-suboption-${subIndex}`))]
+    }, `${option.value}-${index}`) : /*#__PURE__*/jsxRuntimeExports.jsx(Option, {
+      selected: selected.some(({
+        value
+      }) => value === option.value),
+      ...option,
+      ...props
+    }, `option-${index}`);
+  });
+};
+
+export { Content as default };