asma-core-ui 0.0.1

package/dist/components/StyledButton.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export declare const StyledButton: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined;
+    disabled?: boolean | undefined;
+    disableElevation?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    endIcon?: import("react").ReactNode;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    startIcon?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "text" | "outlined" | "contained" | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/components/index.d.ts

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

package/dist/helpers/index.d.ts

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

package/dist/helpers/tokenOptimizer.helper.d.ts

@@ -0,0 +1 @@
+export declare function tokenOptimizer<T>(object: T): T;

package/dist/index.d.ts

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

package/dist/style.css

@@ -0,0 +1 @@
+:root{--colors-teal-50: #e9fcfc;--colors-teal-100: #dffafa;--colors-teal-200: #bef4f4;--colors-teal-300: #78e8e8;--colors-teal-400: #32dcdc;--colors-teal-500: #1ca1a1;--colors-teal-600: #157a7a;--colors-teal-700: #105c5c;--colors-teal-800: #0b4141;--colors-teal-900: #093434;--colors-blue-50: #e6f2f8;--colors-blue-100: #cce6f1;--colors-blue-200: #99cce4;--colors-blue-300: #66b3d6;--colors-blue-400: #3399c9;--colors-blue-500: #0080bb;--colors-blue-600: #0073a8;--colors-blue-700: #005a83;--colors-blue-800: #00405e;--colors-blue-900: #002638;--colors-xanadu-50: #eff4f2;--colors-xanadu-100: #dee8e4;--colors-xanadu-200: #ceddd7;--colors-xanadu-300: #bdd1c9;--colors-xanadu-400: #adc6bc;--colors-xanadu-500: #9cb2a9;--colors-xanadu-600: #8a9e96;--colors-xanadu-700: #798b84;--colors-xanadu-800: #4e5955;--colors-xanadu-900: #2f3533;--colors-primary-50: #e6f2f8;--colors-primary-100: #cce6f1;--colors-primary-200: #99cce4;--colors-primary-300: #66b3d6;--colors-primary-400: #3399c9;--colors-primary-500: #0080bb;--colors-primary-600: #0073a8;--colors-primary-700: #005a83;--colors-primary-800: #00405e;--colors-primary-900: #002638}[data-theme=fretex]{--colors-primary-50: #eff4f2;--colors-primary-100: #dee8e4;--colors-primary-200: #ceddd7;--colors-primary-300: #bdd1c9;--colors-primary-400: #adc6bc;--colors-primary-500: #9cb2a9;--colors-primary-600: #8a9e96;--colors-primary-700: #798b84;--colors-primary-800: #4e5955;--colors-primary-900: #2f3533}[data-theme=greenish]{--colors-primary-50: #e9fcfc;--colors-primary-100: #dffafa;--colors-primary-200: #bef4f4;--colors-primary-300: #78e8e8;--colors-primary-400: #32dcdc;--colors-primary-500: #1ca1a1;--colors-primary-600: #157a7a;--colors-primary-700: #105c5c;--colors-primary-800: #0b4141;--colors-primary-900: #093434}.border-primary-main{border-color:var(--colors-primary-600)!important}.bg-primary-main{background-color:var(--colors-primary-600)!important}.bg-gray-200{--tw-bg-opacity: 1 !important;background-color:rgb(229 231 235 / var(--tw-bg-opacity))!important}.bg-primary-700{background-color:var(--colors-primary-700)!important}.bg-primary-100{background-color:var(--colors-primary-100)!important}.normal-case{text-transform:none!important}.text-gray-400{--tw-text-opacity: 1 !important;color:rgb(156 163 175 / var(--tw-text-opacity))!important}.text-primary-dark{color:var(--colors-primary-900)!important}.overline{text-decoration-line:overline!important}.shadow-\[0_0_0_3px\]{--tw-shadow: 0 0 0 3px !important;--tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.shadow-primary-400{--tw-shadow-color: var(--colors-primary-400) !important;--tw-shadow: var(--tw-shadow-colored) !important}.hover\:border-primary-500:hover{border-color:var(--colors-primary-500)!important}.hover\:bg-primary-700:hover{background-color:var(--colors-primary-700)!important}.hover\:bg-primary-500:hover{background-color:var(--colors-primary-500)!important}.hover\:text-gray-50:hover{--tw-text-opacity: 1 !important;color:rgb(249 250 251 / var(--tw-text-opacity))!important}.active\:bg-primary-dark:active{background-color:var(--colors-primary-900)!important}

package/dist/styles/fretex-tokens/index.d.ts

@@ -0,0 +1,4 @@
+import JSONColors from './fretexTokens.json';
+type ITOKEN = typeof JSONColors;
+export declare const fretexTokens: () => ITOKEN;
+export {};

package/dist/styles/greenish-tokens/index.d.ts

@@ -0,0 +1,4 @@
+import JSONColors from './greenishTokens.json';
+type ITOKEN = typeof JSONColors;
+export declare const greenishTokens: () => ITOKEN;
+export {};

package/dist/styles/tokens/index.d.ts

@@ -0,0 +1,4 @@
+import JSONColors from './tokens.json';
+type ITOKEN = typeof JSONColors;
+export declare const tokens: () => ITOKEN;
+export {};

package/dist/theme/customMuiColors.d.ts

@@ -0,0 +1,61 @@
+declare const customPalettes: {
+    greenish: {
+        primary: {
+            "50": string;
+            "100": string;
+            "200": string;
+            "300": string;
+            "400": string;
+            "500": string;
+            "600": string;
+            "700": string;
+            "800": string;
+            "900": string;
+            light: string;
+            main: string;
+            dark: string;
+            contrastText: string;
+        };
+    };
+    fretex: {
+        primary: {
+            "50": string;
+            "100": string;
+            "200": string;
+            "300": string;
+            "400": string;
+            "500": string;
+            "600": string;
+            "700": string;
+            "800": string;
+            "900": string;
+            light: string;
+            main: string;
+            dark: string;
+            contrastText: string;
+        };
+        secondary: {
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+        };
+    };
+    role: {
+        patient: {
+            light: string;
+            main: string;
+            dark: string;
+        };
+        network: {
+            light: string;
+            main: string;
+            dark: string;
+        };
+    };
+};
+export default customPalettes;

package/dist/theme/index.d.ts

@@ -0,0 +1,2 @@
+export { default as customPalettes } from './customMuiColors';
+export { default as theme } from './theme';

package/dist/theme/theme.d.ts

@@ -0,0 +1,107 @@
+import type { SimplePaletteColorOptions } from '@mui/material';
+declare const theme: {
+    palette: {
+        primary: {
+            "50": string;
+            "100": string;
+            "200": string;
+            "300": string;
+            "400": string;
+            "500": string;
+            "600": string;
+            "700": string;
+            "800": string;
+            "900": string;
+            light: string;
+            main: string;
+            dark: string;
+            contrastText: string;
+        };
+        error: {
+            main: string;
+            light: string;
+        };
+        success: {
+            light: string;
+            main: string;
+            dark: string;
+        };
+        warning: {
+            light: string;
+            main: string;
+            dark: string;
+        };
+    };
+    typography: {
+        fontFamily: string;
+        fontSize: number;
+        h1: {
+            fontSize: string;
+            fontWeight: string;
+            marginBottom: string;
+        };
+        h2: {
+            fontSize: string;
+            fontWeight: string;
+            marginBottom: string;
+        };
+        h3: {
+            fontSize: string;
+            fontWeight: string;
+            marginBottom: string;
+        };
+        subtitle1: {
+            fontSize: string;
+            fontWeight: string;
+        };
+        subtitle2: {
+            fontSize: string;
+            fontWeight: number;
+        };
+        body1: {
+            fontSize: string;
+            fontWeight: string;
+        };
+        body2: {
+            fontSize: string;
+            fontWeight: string;
+        };
+        button: {
+            fontSize: string;
+            fontWeight: number;
+        };
+        caption: {
+            fontSize: string;
+            fontWeight: string;
+        };
+        overline: {
+            fontSize: string;
+            fontWeight: string;
+        };
+    };
+};
+export default theme;
+declare module '@mui/material/styles' {
+    interface Theme {
+        palette: {
+            primary: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                light: string;
+                main: string;
+                dark: string;
+            };
+            success: SimplePaletteColorOptions;
+            warning: SimplePaletteColorOptions;
+            error: SimplePaletteColorOptions;
+        };
+    }
+}

package/package.json

@@ -0,0 +1,104 @@
+{
+    "name": "asma-core-ui",
+    "private": false,
+    "version": "0.0.1",
+    "type": "module",
+    "files": [
+        "dist/**/*",
+        "dist/style.css",
+        "tailwind-configs"
+    ],
+    "keywords": [],
+    "author": "asma-team",
+    "types": "./dist/index.d.ts",
+    "main": "./dist/asma-core-ui.es.js",
+    "module": "./dist/asma-core-ui.es.js",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && rm -rf ./dist && vite build",
+        "preview": "vite preview",
+        "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
+        "lint:fix": "eslint --fix src/**/*.{jsx,ts,tsx}",
+        "prettier": "prettier --write src//**/*.{ts,tsx,scss} --config ./.prettierrc",
+        "storybook": "start-storybook -p 6006",
+        "storybook:node18": "export NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",
+        "build-storybook": "build-storybook",
+        "create-index": "ctix create -p ./tsconfig.json -w -a ./src"
+    },
+    "license": "UNLICENSED",
+    "dependencies": {
+        "@emotion/react": "^11.10.6",
+        "@emotion/styled": "^11.10.6",
+        "@fontsource/material-icons": "^4.5.4",
+        "@fontsource/roboto": "^4.5.8",
+        "@mui/material": "^5.11.13",
+        "@storybook/addon-styling": "^0.3.1",
+        "@storybook/addons": "^6.5.16",
+        "ctix": "^1.8.2",
+        "lodash-es": "^4.17.21",
+        "rollup-plugin-typescript2": "^0.34.1",
+        "storybook": "^6.5.16"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.20.12",
+        "@rollup/plugin-commonjs": "21",
+        "@storybook/addon-actions": "^6.5.15",
+        "@storybook/addon-essentials": "^6.5.15",
+        "@storybook/addon-interactions": "^6.5.15",
+        "@storybook/addon-links": "^6.5.15",
+        "@storybook/builder-vite": "^0.2.6",
+        "@storybook/react": "^6.5.15",
+        "@storybook/testing-library": "^0.0.13",
+        "@types/lodash-es": "^4.17.7",
+        "@types/react": "^18.0.26",
+        "@types/react-dom": "^18.0.9",
+        "@typescript-eslint/eslint-plugin": "^5.0.0",
+        "@typescript-eslint/parser": "^5.38.1",
+        "@vitejs/plugin-react": "^3.0.0",
+        "autoprefixer": "^10.4.12",
+        "babel-loader": "^8.3.0",
+        "eslint": "^8.0.1",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-import-resolver-typescript": "^3.5.1",
+        "eslint-plugin-import": "^2.25.2",
+        "eslint-plugin-jsx-a11y": "^6.6.1",
+        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-promise": "^6.0.0",
+        "eslint-plugin-react": "^7.31.8",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-simple-import-sort": "^8.0.0",
+        "eslint-plugin-storybook": "^0.6.8",
+        "eslint-plugin-unused-imports": "^2.0.0",
+        "less": "^4.1.3",
+        "lint-staged": "^13.0.3",
+        "node-sass": "^8.0.0",
+        "postcss": "^8.4.16",
+        "prettier": "^2.7.1",
+        "prettier-plugin-tailwindcss": "^0.1.13",
+        "react": "^18.*",
+        "react-dom": "^18.*",
+        "react-hooks": "^1.0.1",
+        "sass": "^1.57.1",
+        "tailwind": "^4.0.0",
+        "tailwindcss": "^3.1.8",
+        "typescript": "^4.9.3",
+        "typescript-plugin-css-modules": "^3.4.0",
+        "vite": "^4.0.0",
+        "vite-plugin-dts": "^2.1.0",
+        "vite-tsconfig-paths": "^4.0.3"
+    },
+    "peerDependencies": {
+        "@emotion/react": "^11.*",
+        "@emotion/styled": "^11.*",
+        "@mui/material": "^5.*",
+        "react": "^18.*",
+        "react-dom": "^18.*"
+    },
+    "exports": {
+        ".": {
+            "import": "./dist/asma-core-ui.es.js"
+        },
+        "./dist/style.css": "./dist/style.css",
+        "./tailwind-configs/tw_configs.cjs": "./tailwind-configs/tw_configs.cjs"
+    }
+}

package/tailwind-configs/tw_animation.cjs

@@ -0,0 +1,43 @@
+module.exports = {
+    animation: {
+        'slide-in': 'slide-in 0.3s linear',
+        'slide-out': 'slide-out 0.3s linear',
+        'opacity-in': 'opacity-in 0.1s linear',
+        'opacity-in-5': 'opacity-in 0.5s linear',
+        'opacity-appear-3': 'opacity-appear 0.3s linear',
+        'opacity-out': 'opacity-out 0.3s linear',
+    },
+    keyframes: {
+        'slide-in': {
+            '0%': { margin: '0 0 0 -320px' },
+            '100%': { margin: '0' },
+        },
+        'slide-out': {
+            '0%': { margin: '0' },
+            '100%': { margin: '0 0 0 -320px' },
+        },
+        'opacity-in': {
+            '0%': {
+                opacity: '0',
+                height: '100%',
+            },
+            '100%': {
+                opacity: '1',
+                height: '100%',
+            },
+        },
+        'opacity-appear': {
+            '0%': {
+                opacity: '0',
+            },
+            '100%': {
+                opacity: '1',
+            },
+        },
+        'opacity-out': {
+            '0%': { opacity: '1', height: '100%' },
+            '60%': { opacity: '1', height: '100%' },
+            '100%': { opacity: '0', height: '100%' },
+        },
+    },
+}

package/tailwind-configs/tw_box_shadow.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+    ash: '-1px 8px 18px -20px black',
+}

package/tailwind-configs/tw_configs.cjs

@@ -0,0 +1,8 @@
+const twBoxShadow = require('./tw_box_shadow.cjs')
+const twAnimation = require('./tw_animation.cjs')
+
+module.exports = {
+    boxShadow: twBoxShadow,
+    animation: twAnimation.animation,
+    keyframes: twAnimation.keyframes,
+}