math-main-components 0.0.1

package/dist/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";require("react");
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

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

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

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

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

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

package/dist/cjs/types/components/Dialog/index.d.ts

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

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

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

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

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

package/dist/cjs/types/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/dist/cjs/types/components/SvgIcon/index.d.ts

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

package/dist/cjs/types/components/index.d.ts

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

package/dist/cjs/types/index.d.ts

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

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+import"react";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

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

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

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

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

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

package/dist/esm/types/components/Dialog/index.d.ts

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

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

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

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

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

package/dist/esm/types/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/dist/esm/types/components/SvgIcon/index.d.ts

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

package/dist/esm/types/components/index.d.ts

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

package/dist/esm/types/index.d.ts

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

package/dist/types.d.ts

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

package/package.json

@@ -0,0 +1,36 @@
+{
+    "name": "math-main-components",
+    "version": "0.0.1",
+    "author": "Emilian Scheel",
+    "license": "MIT",
+    "main": "dist/cjs/index.js",
+    "module": "dist/esm/index.js",
+    "types": "dist/index.d.ts",
+    "scripts": {
+        "build": "rollup -c --bundleConfigAsCjs"
+    },
+    "dependencies": {
+        "@rollup/plugin-commonjs": "^25.0.4",
+        "@rollup/plugin-node-resolve": "^15.2.1",
+        "@rollup/plugin-typescript": "^11.1.3",
+        "rollup-plugin-dts": "^6.0.2",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-terser": "^7.0.2",
+        "tslib": "^2.6.2"
+    },
+    "devDependencies": {
+        "@types/node-sass": "^4.11.4",
+        "@types/react": "^18.2.22",
+        "css-loader": "^6.8.1",
+        "css-modules-typescript-loader": "^4.0.1",
+        "node-sass": "^9.0.0",
+        "rollup": "^3.29.2",
+        "sass": "^1.67.0",
+        "sass-loader": "^13.3.2",
+        "typescript": "^5.2.2"
+    },
+    "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    }
+}

package/rollup.config.js

@@ -0,0 +1,39 @@
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import { terser } from "rollup-plugin-terser";
+
+const packageJson = require("./package.json");
+
+export default [
+    {
+        input: "src/index.ts",
+        output: [
+            {
+                file: packageJson.main,
+                format: "cjs",
+                sourcemap: true,
+            },
+            {
+                file: packageJson.module,
+                format: "esm",
+                sourcemap: true,
+            },
+        ],
+        plugins: [
+            peerDepsExternal(),
+            resolve(),
+            commonjs(),
+            typescript({ tsconfig: "./tsconfig.json" }),
+            terser(),
+        ],
+        external: ["react", "react-dom", "styled-components"],
+    },
+    {
+        input: "src/index.ts",
+        output: [{ file: "dist/types.d.ts", format: "es" }],
+        plugins: [dts.default()],
+    },
+];

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

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

package/src/components/Accordeon/index.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+import SvgIcon from '../SvgIcon'
+import { AccordeonProps } from './Accordeon.types'
+import styles from './styles.module.scss'
+
+export default 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/styles.module.scss

@@ -0,0 +1,66 @@
+.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.types.ts

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

package/src/components/Dialog/index.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { DialogProps } from "./Dialog.types";
+import styles from './styles.module.scss';
+
+
+
+export default 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

@@ -0,0 +1,32 @@
+.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.types.ts

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

package/src/components/Gap/index.tsx

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

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

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

package/src/components/SvgIcon/index.tsx

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

package/src/components/index.ts

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

package/src/index.ts

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

package/src/types/typings.d.ts

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

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+    "compilerOptions": {
+        "esModuleInterop": true,
+        "strict": true,
+        "skipLibCheck": true,
+        "jsx": "react",
+        "module": "ESNext",
+        "declaration": true,
+        "declarationDir": "types",
+        "sourceMap": true,
+        "outDir": "dist",
+        "moduleResolution": "node",
+        "emitDeclarationOnly": false,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "include": [
+        "src/types/typings.d.ts",
+        "src/**/*"
+    ],
+    "exclude": [
+        "dist",
+        "node_modules",
+        "src/**/*.test.tsx",
+        "src/**/*.stories.tsx"
+    ]
+}