math-main-components 0.0.8 → 0.0.10

package/dist/components/Accordeon/Accordeon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AccordeonProps } from './Accordeon.types';
+export declare function Accordeon({ title, children }: AccordeonProps): React.JSX.Element;

package/dist/components/Accordeon/Accordeon.types.d.ts

@@ -0,0 +1,4 @@
+export interface AccordeonProps {
+    title?: string;
+    children?: any;
+}

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DialogProps } from "./Dialog.types";
+export declare function Dialog({ active, onClose, children }: DialogProps): React.JSX.Element;

package/{src/components/Dialog/Dialog.types.ts → dist/components/Dialog/Dialog.types.d.ts}

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 export interface DialogProps {
-    active?: boolean
-    onClose?: (event: React.MouseEventHandler<HTMLDivElement>) => void
-    children: any
-}
+    active?: boolean;
+    onClose?: (event: React.MouseEventHandler<HTMLDivElement>) => void;
+    children: any;
+}

package/dist/components/Gap/Gap.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { GapProps } from "./Gap.types";
+export declare function Gap({ size }: GapProps): React.JSX.Element;

package/{src/components/Gap/Gap.types.ts → dist/components/Gap/Gap.types.d.ts}

@@ -1,3 +1,3 @@
 export interface GapProps {
     size?: string;
-}
+}

package/dist/components/Gap/index.d.ts

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

package/dist/components/SvgIcon/SvgIcon.d.ts

@@ -0,0 +1,4 @@
+import "external-svg-loader";
+import React from 'react';
+import { SvgIconProps } from "./SvgIcon.types";
+export declare function SvgIcon({ iconName, size, className, onClick }: SvgIconProps): React.JSX.Element;

package/dist/components/SvgIcon/SvgIcon.types.d.ts

@@ -0,0 +1,8 @@
+import { MouseEventHandler } from "react";
+export interface SvgIconProps {
+    iconName?: string;
+    size?: string;
+    fill?: string;
+    className?: string;
+    onClick?: MouseEventHandler<HTMLSpanElement>;
+}

package/{src/components/SvgIcon/index.ts → dist/components/SvgIcon/index.d.ts}

@@ -1,2 +1 @@
-
 export * from './SvgIcon';

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export { Accordeon } from './Accordeon';
+export { Dialog } from './Dialog';
+export { Gap } from './Gap';
+export { SvgIcon } from './SvgIcon';

package/dist/index.cjs.js

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('external-svg-loader');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function SvgIcon({ iconName, size = "24px", className = "", onClick }) {
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("span", { onClick: onClick, className: `material-symbols-outlined ${className}`, style: { fontSize: size } }, iconName),
+        "Lib"));
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = ".styles-module_container__3IVfB {\n  margin-top: 40px;\n  background: white;\n  border-radius: 30px;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px 20px;\n  color: grey;\n  background: #F1F1F1;\n  border-radius: 30px;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  transition: 0.2s ease-in-out;\n  gap: 10px;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb span {\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb h3 {\n  margin: 0;\n  font-weight: 400;\n  font-size: 16px;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb:hover {\n  background: #e2e2e2;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R {\n  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_head__xFYQb span {\n  rotate: 180deg;\n}\n.styles-module_container__3IVfB .styles-module_content__XAf02 {\n  transition: all 0.3s ease-in-out;\n  line-height: 1.5;\n}\n.styles-module_container__3IVfB.styles-module_not_active__JcVLz .styles-module_content__XAf02 {\n  height: 0;\n  max-height: 0;\n  overflow: hidden;\n  opacity: 0;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_content__XAf02 {\n  max-height: auto;\n  overflow: visible;\n  opacity: 1;\n  padding: 10px 0px;\n}";
+var styles$1 = {"container":"styles-module_container__3IVfB","head":"styles-module_head__xFYQb","active":"styles-module_active__soD8R","content":"styles-module_content__XAf02","not_active":"styles-module_not_active__JcVLz"};
+styleInject(css_248z$1);
+
+function Accordeon({ title, children }) {
+    const [isActive, setActive] = React.useState(false);
+    return (React__default["default"].createElement("div", { className: [styles$1.container, isActive ? styles$1.active : styles$1.not_active].join(" ") },
+        React__default["default"].createElement("div", { className: styles$1.head, onClick: () => setActive(!isActive) },
+            React__default["default"].createElement(SvgIcon, { iconName: "expand_more" }),
+            React__default["default"].createElement("h3", null, title)),
+        React__default["default"].createElement("div", { className: styles$1.content }, children)));
+}
+
+var css_248z = ".styles-module_container__9-1MH {\n  position: fixed;\n  height: 100vh;\n  width: 100vw;\n  background: rgba(255, 255, 255, 0.659);\n  backdrop-filter: blur(10px) brightness(70%);\n  left: 0;\n  top: 0;\n  z-index: 10000;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.styles-module_container__9-1MH.styles-module_active__AXoyo {\n  opacity: 1;\n}\n.styles-module_container__9-1MH.styles-module_disabled__sELpy {\n  pointer-events: none;\n  opacity: 0;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M {\n  background: white;\n  border-radius: 20px;\n  padding: 20px;\n  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n  cursor: auto;\n}";
+var styles = {"container":"styles-module_container__9-1MH","active":"styles-module_active__AXoyo","disabled":"styles-module_disabled__sELpy","dialog_window":"styles-module_dialog_window__0Bn2M"};
+styleInject(css_248z);
+
+function Dialog({ active = false, onClose = (event) => { }, children = null }) {
+    function onClick(event) {
+        if (event.target.id == 'dialog-backdrop') {
+            onClose(event);
+        }
+    }
+    return (React__default["default"].createElement("div", { id: "dialog-backdrop", className: `${styles.container} ${active ? styles.active : styles.disabled}`, onClick: onClick },
+        React__default["default"].createElement("div", { className: styles.dialog_window }, children)));
+}
+
+function Gap({ size }) {
+    return (React__default["default"].createElement("div", { style: { height: size } }));
+}
+
+exports.Accordeon = Accordeon;
+exports.Dialog = Dialog;
+exports.Gap = Gap;
+exports.SvgIcon = SvgIcon;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { Accordeon, Dialog, Gap, SvgIcon } from './components';

package/dist/index.esm.js

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import 'external-svg-loader';
+
+function SvgIcon({ iconName, size = "24px", className = "", onClick }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { onClick: onClick, className: `material-symbols-outlined ${className}`, style: { fontSize: size } }, iconName),
+        "Lib"));
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = ".styles-module_container__3IVfB {\n  margin-top: 40px;\n  background: white;\n  border-radius: 30px;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px 20px;\n  color: grey;\n  background: #F1F1F1;\n  border-radius: 30px;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  transition: 0.2s ease-in-out;\n  gap: 10px;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb span {\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb h3 {\n  margin: 0;\n  font-weight: 400;\n  font-size: 16px;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb:hover {\n  background: #e2e2e2;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R {\n  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_head__xFYQb span {\n  rotate: 180deg;\n}\n.styles-module_container__3IVfB .styles-module_content__XAf02 {\n  transition: all 0.3s ease-in-out;\n  line-height: 1.5;\n}\n.styles-module_container__3IVfB.styles-module_not_active__JcVLz .styles-module_content__XAf02 {\n  height: 0;\n  max-height: 0;\n  overflow: hidden;\n  opacity: 0;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_content__XAf02 {\n  max-height: auto;\n  overflow: visible;\n  opacity: 1;\n  padding: 10px 0px;\n}";
+var styles$1 = {"container":"styles-module_container__3IVfB","head":"styles-module_head__xFYQb","active":"styles-module_active__soD8R","content":"styles-module_content__XAf02","not_active":"styles-module_not_active__JcVLz"};
+styleInject(css_248z$1);
+
+function Accordeon({ title, children }) {
+    const [isActive, setActive] = useState(false);
+    return (React.createElement("div", { className: [styles$1.container, isActive ? styles$1.active : styles$1.not_active].join(" ") },
+        React.createElement("div", { className: styles$1.head, onClick: () => setActive(!isActive) },
+            React.createElement(SvgIcon, { iconName: "expand_more" }),
+            React.createElement("h3", null, title)),
+        React.createElement("div", { className: styles$1.content }, children)));
+}
+
+var css_248z = ".styles-module_container__9-1MH {\n  position: fixed;\n  height: 100vh;\n  width: 100vw;\n  background: rgba(255, 255, 255, 0.659);\n  backdrop-filter: blur(10px) brightness(70%);\n  left: 0;\n  top: 0;\n  z-index: 10000;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.styles-module_container__9-1MH.styles-module_active__AXoyo {\n  opacity: 1;\n}\n.styles-module_container__9-1MH.styles-module_disabled__sELpy {\n  pointer-events: none;\n  opacity: 0;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M {\n  background: white;\n  border-radius: 20px;\n  padding: 20px;\n  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n  cursor: auto;\n}";
+var styles = {"container":"styles-module_container__9-1MH","active":"styles-module_active__AXoyo","disabled":"styles-module_disabled__sELpy","dialog_window":"styles-module_dialog_window__0Bn2M"};
+styleInject(css_248z);
+
+function Dialog({ active = false, onClose = (event) => { }, children = null }) {
+    function onClick(event) {
+        if (event.target.id == 'dialog-backdrop') {
+            onClose(event);
+        }
+    }
+    return (React.createElement("div", { id: "dialog-backdrop", className: `${styles.container} ${active ? styles.active : styles.disabled}`, onClick: onClick },
+        React.createElement("div", { className: styles.dialog_window }, children)));
+}
+
+function Gap({ size }) {
+    return (React.createElement("div", { style: { height: size } }));
+}
+
+export { Accordeon, Dialog, Gap, SvgIcon };

package/package.json

@@ -1,27 +1,43 @@
 {
     "name": "math-main-components",
-    "version": "0.0.8",
+    "version": "0.0.10",
     "author": "Emilian Scheel",
-    "license": "MIT",
-    "main": "src/index.ts",
     "files": [
-        "src/**/*"
+        "dist/**/*"
     ],
-    "dependencies": {
-        "@tsconfig/recommended": "^1.0.3",
-        "@types/react": "^18.2.22",
-        "css-loader": "^6.8.1",
-        "css-modules-typescript-loader": "^4.0.1",
-        "node-sass": "^9.0.0",
-        "prop-types": "^15.8.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "sass": "^1.67.0",
-        "sass-loader": "^13.3.2",
-        "style-loader": "^3.3.3",
-        "ts-loader": "^9.4.4",
-        "tsc": "^2.0.4",
+    "main": "dist/index.cjs.js",
+    "module": "dist/index.esm.js",
+    "types": "dist/index.d.ts",
+    "license": "MIT",
+    "devDependencies": {
+        "@babel/core": "^7.22.20",
+        "@rollup/plugin-commonjs": "^22.0.1",
+        "@rollup/plugin-node-resolve": "^13.3.0",
+        "@rollup/plugin-typescript": "^8.3.4",
+        "@types/react": "^18.0.15",
+        "@types/react-dom": "^18.0.6",
+        "autoprefixer": "^10.4.7",
+        "babel": "^6.23.0",
+        "babel-loader": "^9.1.3",
+        "postcss": "^8.4.14",
+        "postcss-modules": "^4.3.1",
+        "rollup": "^2.77.2",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-postcss": "^4.0.2",
+        "sass": "^1.51.0",
+        "string-hash": "^1.1.3",
         "typescript": "^5.2.2",
-        "webpack": "^5.88.2"
-    }
+        "typescript-plugin-css-modules": "^5.0.1"
+    },
+    "peerDependencies": {
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+    },
+    "scripts": {
+        "clean": "rm -rf dist",
+        "build": "npm run build:js && npm run build:types",
+        "build:js": "rollup -c",
+        "build:types": "tsc --emitDeclarationOnly --outDir dist"
+    },
+    "dependencies": {}
 }

package/src/components/Accordeon/Accordeon.tsx

@@ -1,24 +0,0 @@
-import React, { useState } from 'react'
-import { SvgIcon } from '../SvgIcon'
-import { AccordeonProps } from './Accordeon.types'
-import styles from './styles.module.scss'
-
-export function Accordeon({
-    title,
-    children
-}: AccordeonProps) {
-
-    const [isActive, setActive] = useState(false)
-
-    return (
-        <div className={[styles.container, isActive ? styles.active : styles.not_active].join(" ")}>
-            <div className={styles.head} onClick={() => setActive(!isActive)}>
-                <SvgIcon iconName="expand_more" />
-                <h3>{title}</h3>
-            </div>
-            <div className={styles.content}>
-                {children}
-            </div>
-        </div>
-    )
-}

package/src/components/Accordeon/Accordeon.types.ts

@@ -1,4 +0,0 @@
-export interface AccordeonProps {
-    title?: string,
-    children?: any
-}

package/src/components/Accordeon/styles.module.scss

@@ -1,66 +0,0 @@
-.container {
-    margin-top: 40px;
-    background: white;
-    border-radius: 30px;
-    transition: 0.2s ease-in-out;
-
-    .head {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: 16px 20px;
-        color: grey;
-        background: #F1F1F1;
-        border-radius: 30px;
-        cursor: pointer;
-        user-select: none;
-        -webkit-user-select: none;
-        transition: 0.2s ease-in-out;
-
-        gap: 10px;
-
-        span {
-            transition: 0.2s ease-in-out;
-        }
-
-        h3 {
-            margin: 0;
-            font-weight: 400;
-            font-size: 16px;
-            user-select: none;
-            -webkit-user-select: none;
-        }
-
-        &:hover {
-            background: #e2e2e2;
-        }
-    }
-
-    &.active {
-        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
-            rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
-    }
-
-    &.active .head span {
-        rotate: 180deg;
-    }
-
-    .content {
-        transition: all 0.3s ease-in-out;
-        line-height: 1.5;
-    }
-
-    &.not_active .content {
-        height: 0;
-        max-height: 0;
-        overflow: hidden;
-        opacity: 0;
-    }
-
-    &.active .content {
-        max-height: auto;
-        overflow: visible;
-        opacity: 1;
-        padding: 10px 0px;
-    }
-}

package/src/components/Dialog/Dialog.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { DialogProps } from "./Dialog.types";
-import styles from './styles.module.scss';
-
-
-
-export function Dialog({
-    active = false,
-    onClose = (event: any) => { },
-    children = null
-}: DialogProps) {
-
-    function onClick(event: any) {
-        if (event.target.id == 'dialog-backdrop') {
-            onClose(event)
-        }
-    }
-
-    return (
-        <div id="dialog-backdrop" className={`${styles.container} ${active ? styles.active : styles.disabled}`} onClick={onClick}>
-            <div className={styles.dialog_window}>
-                {children}
-            </div>
-        </div>
-    )
-}

package/src/components/Dialog/styles.module.scss

@@ -1,32 +0,0 @@
-.container {
-    position: fixed;
-    height: 100vh;
-    width: 100vw;
-    background: rgba(255, 255, 255, 0.659);
-    backdrop-filter: blur(10px) brightness(70%);
-    left: 0;
-    top: 0;
-    z-index: 10000;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-
-    &.active {
-        opacity: 1;
-    }
-
-    &.disabled {
-        pointer-events: none;
-        opacity: 0;
-    }
-
-    .dialog_window {
-        background: white;
-        border-radius: 20px;
-        padding: 20px;
-        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-        cursor: auto;
-    }
-}

package/src/components/Gap/Gap.tsx

@@ -1,9 +0,0 @@
-import React from "react";
-import { GapProps } from "./Gap.types";
-
-
-export function Gap({ size }: GapProps) {
-    return (
-        <div style={{ height: size }}></div>
-    )
-}

package/src/components/Gap/index.tsx

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

package/src/components/SvgIcon/SvgIcon.tsx

@@ -1,19 +0,0 @@
-import "external-svg-loader";
-import { SvgIconProps } from "./SvgIcon.types";
-
-
-export function SvgIcon({
-    iconName,
-    size = "24px",
-    className = "",
-    onClick
-}: SvgIconProps) {
-    return (
-        <>
-            <span onClick={onClick} className={`material-symbols-outlined ${className}`} style={{ fontSize: size }}>
-                {iconName}
-            </span >
-            Lib
-        </>
-    )
-}

package/src/components/SvgIcon/SvgIcon.types.ts

@@ -1,9 +0,0 @@
-import { MouseEventHandler } from "react"
-
-export interface SvgIconProps {
-    iconName?: string
-    size?: string
-    fill?: string
-    className?: string
-    onClick?: MouseEventHandler<HTMLSpanElement>
-}

package/src/components/index.ts

@@ -1,5 +0,0 @@
-export * from './Accordeon';
-export * from './Dialog';
-export * from './Gap';
-export * from './SvgIcon';
-

package/src/index.ts

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

package/src/types/index.d.ts

@@ -1,4 +0,0 @@
-declare module '*.scss' {
-    const content: Record<string, string>;
-    export default content;
-}