math-main-components 0.0.8 → 0.0.9

package/package.json

@@ -1,27 +1,40 @@
 {
     "name": "math-main-components",
-    "version": "0.0.8",
+    "version": "0.0.9",
     "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",
-        "typescript": "^5.2.2",
-        "webpack": "^5.88.2"
+    "main": "dist/index.cjs.js",
+    "module": "dist/index.esm.js",
+    "types": "dist/index.d.ts",
+    "license": "MIT",
+    "devDependencies": {
+        "@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",
+        "postcss": "^8.4.14",
+        "postcss-modules": "^4.3.1",
+        "postcss-preset-env": "^7.6.0",
+        "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": "^4.7.4",
+        "typescript-plugin-css-modules": "^3.4.0"
+    },
+    "peerDependencies": {
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+    },
+    "scripts": {
+        "clean": "rm -rf dist",
+        "build": "npm run build:js && build:types",
+        "build:js": "rollup -c",
+        "build:types": "tsc --emitDeclarationOnly --outDir dist"
     }
 }

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/index.tsx

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

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/Dialog.types.ts

@@ -1,5 +0,0 @@
-export interface DialogProps {
-    active?: boolean
-    onClose?: (event: React.MouseEventHandler<HTMLDivElement>) => void
-    children: any
-}

package/src/components/Dialog/index.tsx

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

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/Gap.types.ts

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

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/SvgIcon/index.ts

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

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;
-}