trepur_components 2.3.1 → 2.3.2

package/README.md

@@ -10,7 +10,7 @@ In the project directory, you can run:
 
 compile the dist folder made from the lib directory as specified in the build script in package.json
 
-### `npm adduser`
+### `npm login`
 
 You will need to log into npm if you have not done so already
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "trepur_components",
   "description": "component lib",
   "author": "trepur_ttenneb",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "private": false,
   "keywords": [
     "react",
@@ -16,31 +16,49 @@
     "dist",
     "README.md"
   ],
-  "dependencies": {
-    "@babel/polyfill": "^7.12.1",
-    "@storybook/addon-links": "^7.0.8",
-    "@storybook/addon-postcss": "^2.0.0",
-    "classnames": "^2.3.1",
-    "core-js": "^3.30.1",
-    "keen-slider": "^6.7.0",
-    "postcss-cli": "^10.0.0",
-    "react": "^18.1.0",
-    "react-calendar": "^4.0.0",
-    "react-dom": "^18.1.0",
-    "tsconfig-paths-webpack-plugin": "^4.0.0"
-  },
   "scripts": {
+    "build": "rm -rf lib && concurrently -n \"VITE,CSS,SB\" -c \"magenta,blue,red\" \"npx vite build\" \"npm run build-css\" \"npm run storybook-css\"",
+    "build-css": "tailwindcss -i ./src/styles/base.css -o ./lib/styles/base.css --minify",
+    "build-storybook": "npm run storybook-css && storybook build -o ./storybook-build --quiet",
+    "storybook-css": "tailwindcss -i ./.storybook/tailwind/style.css -o ./.storybook/tailwind/preview.css --minify",
     "compile:ts": "tsc && tsc-alias -p tsconfig.json",
     "compile:css": "postcss src/**/**/**/*.css --base . --dir dist -m --verbose",
     "compile": "rm -rf dist && npm run prettier:fix && npm run lint:fix && npm run compile:ts && npm run compile:css",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build -s public",
     "lint": "eslint src --ext .tsx",
     "lint:fix": "npm run lint -- --fix",
     "prettier:check": "prettier --check .",
     "prettier:fix": "prettier --write .",
     "prepare": "husky install"
   },
+  "peerDependencies": {
+    "@types/react": ">=17",
+    "@types/react-dom": ">=17",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "tailwindcss": "^3.0.23"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-common-types": "^6.5.1",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "class-variance-authority": "^0.7.0",
+    "classnames": "^2.5.1",
+    "clsx": "^2.0.0",
+    "cmdk": "^0.2.0",
+    "d3-array": "^3.2.4",
+    "embla-carousel-react": "^8.0.0-rc17",
+    "keen-slider": "^6.7.0",
+    "luxon": "^3.4.4",
+    "react-calendar": "^5.0.0",
+    "react-hook-form": "^7.49.2",
+    "snapsvg-cjs": "^0.0.6",
+    "sonner": "^1.4.0",
+    "tailwind-merge": "^2.1.0",
+    "tailwind-scrollbar": "^3.0.5",
+    "tailwindcss-animate": "^1.0.7",
+    "what-input": "^5.2.12"
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -54,37 +72,65 @@
     ]
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-typescript": "^7.21.5",
-    "@storybook/addon-actions": "^7.0.8",
-    "@storybook/addon-essentials": "^7.0.8",
-    "@storybook/addon-styling": "^1.0.6",
-    "@storybook/cli": "^7.0.8",
-    "@storybook/manager-api": "^7.0.8",
-    "@storybook/react": "^7.0.8",
-    "@storybook/react-webpack5": "^7.0.8",
-    "@storybook/theming": "^7.0.8",
-    "@types/react": "^18.2.14",
-    "@types/react-calendar": "^3.9.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-config-standard-with-typescript": "^34.0.1",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-n": "^15.7.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-storybook": "^0.6.12",
-    "husky": "^8.0.1",
-    "postcss": "^8.4.23",
-    "prettier": "2.8.8",
+    "@hookform/resolvers": "^3.3.2",
+    "@storybook/addon-a11y": "^7.6.17",
+    "@storybook/addon-actions": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/manager-api": "^7.6.17",
+    "@storybook/preview-api": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@storybook/router": "^7.6.17",
+    "@storybook/test": "^7.6.17",
+    "@storybook/test-runner": "^0.16.0",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.6.17",
+    "@tanstack/react-table": "^8.11.2",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/d3-array": "^3.2.1",
+    "@types/luxon": "^3.3.7",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "axe-playwright": "^1.2.3",
+    "chromatic": "^10.1.0",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.56.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-storybook": "^0.6.15",
+    "http-server": "^14.1.1",
+    "husky": "^8.0.3",
+    "i18next": "^23.9.0",
+    "i18next-browser-languagedetector": "^7.2.0",
+    "lint-staged": "^15.2.0",
+    "postcss": "^8.4.32",
+    "prettier": "^3.1.1",
+    "prettier-plugin-tailwindcss": "^0.5.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^14.0.5",
     "snapsvg-cjs": "0.0.6",
-    "storybook": "^7.0.8",
-    "storybook-css-modules-preset": "^1.1.1",
-    "tailwindcss": "^3.0.23",
-    "typescript": "^4.8.4",
-    "webpack": "^5.69.1"
+    "storybook": "^7.6.17",
+    "storybook-addon-themes": "^6.1.0",
+    "storybook-react-i18next": "^2.0.10",
+    "tailwindcss": "^3.4.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.6.4",
+    "vite-plugin-static-copy": "^1.0.0",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-plugin-turbosnap": "^1.0.3",
+    "vite-tsconfig-paths": "^4.2.2",
+    "vitest": "^1.3.1",
+    "wait-on": "^7.2.0",
+    "zod": "^3.22.4"
   }
 }

package/dist/src/lib/components/Accordion/Accordion.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export interface Props {
-    id?: string;
-    className?: string;
-    items: any;
-}
-declare const Accordion: React.FC<Props>;
-export default Accordion;

package/dist/src/lib/components/Accordion/Accordion.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import Collapsible from '../Collapsible/Collapsible';
-import classNames from 'classnames';
-const Accordion = ({ id, className, items }) => {
-    return (React.createElement("div", { id: id, className: classNames(className, 'theme-local') }, items === null || items === void 0 ? void 0 : items.map((item, i) => {
-        return (React.createElement(Collapsible, Object.assign({ key: `collapsible_item_${i}` }, item), item.children));
-    })));
-};
-export default Accordion;
-//# sourceMappingURL=Accordion.js.map

package/dist/src/lib/components/Accordion/Accordion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../../../src/lib/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,WAAW,MAAM,qCAAqC,CAAA;AAC7D,OAAO,UAAU,MAAM,YAAY,CAAA;AAQnC,MAAM,SAAS,GAAoB,CAAC,EAClC,EAAE,EACF,SAAS,EACT,KAAK,EACC,EAAe,EAAE;IACvB,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,aAAa,CAAC,IACzD,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,CAAC,IAAS,EAAE,CAAS,EAAE,EAAE;QACnC,OAAO,CACL,oBAAC,WAAW,kBAAC,GAAG,EAAE,oBAAoB,CAAC,EAAE,IAAM,IAAI,GAChD,IAAI,CAAC,QAAQ,CACF,CACf,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/src/lib/components/AlertBar/AlertBar.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import { type Props as iconProps } from '../Icon/Icon';
-export interface Props {
-    id?: string;
-    className?: string;
-    type?: 'success' | 'warning' | 'error' | 'info';
-    text?: string;
-    leftIconProps?: iconProps;
-    rightIconProps?: iconProps;
-    textCenter?: boolean;
-    isDismissable?: boolean;
-    onDismissClick?: React.MouseEventHandler;
-}
-declare const AlertBar: ({ id, className, type, text, leftIconProps, rightIconProps, textCenter, isDismissable, onDismissClick }: Props) => JSX.Element;
-export default AlertBar;

package/dist/src/lib/components/AlertBar/AlertBar.js

@@ -1,58 +0,0 @@
-import React, { useState } from 'react';
-import Icon from '../Icon/Icon';
-import classNames from 'classnames';
-import style from './style.module.css';
-const AlertBar = ({ id, className, type = 'warning', text, leftIconProps, rightIconProps, textCenter = false, isDismissable = false, onDismissClick }) => {
-    const [alertBarStatus, setAlertBarStatus] = useState({
-        state: 'open',
-        display: true
-    });
-    const iconLeft = leftIconProps != null && React.createElement(Icon, Object.assign({}, leftIconProps));
-    const iconRight = rightIconProps != null && React.createElement(Icon, Object.assign({}, rightIconProps));
-    const bgColor = classNames({
-        [style.success]: type === 'success',
-        [style.warning]: type === 'warning',
-        [style.error]: type === 'error',
-        [style.info]: type === 'info'
-    });
-    const alertBarState = classNames({
-        [style.visible]: alertBarStatus.state === 'open',
-        [style.invisible]: alertBarStatus.state === 'closed',
-        hidden: !alertBarStatus.display
-    });
-    const classList = classNames(className, bgColor, alertBarState, [style.alertBar], 'theme-local', 'w-parent transition-opactiy');
-    const textClassList = classNames({
-        [style.textCenter]: textCenter,
-        [style.textLeftWithIcon]: !textCenter && leftIconProps !== null,
-        [style.textLeft]: !textCenter && leftIconProps === null
-    }, [style.textClassList]);
-    const rightIconClasses = classNames({
-        [style.dismissable]: isDismissable
-    }, [style.rightIconClassList]);
-    const closeAlertBar = (e) => {
-        setAlertBarStatus({
-            state: 'closed',
-            display: alertBarStatus.display
-        });
-        setTimeout(() => {
-            setAlertBarStatus({
-                state: 'closed',
-                display: false
-            });
-        }, 700);
-        if (onDismissClick != null) {
-            onDismissClick(e);
-        }
-    };
-    const dismissIcon = React.createElement(Icon, { type: 'multiply', colour: 'white' });
-    return (React.createElement("div", { id: id, className: classList },
-        leftIconProps != null && (React.createElement("span", { className: style.leftIconClassList }, iconLeft)),
-        React.createElement("h3", { className: textClassList }, text),
-        isDismissable && (React.createElement("a", { className: rightIconClasses, onClick: (e) => {
-                closeAlertBar(e);
-            } },
-            React.createElement("span", null, dismissIcon))),
-        iconRight != null && !isDismissable && (React.createElement("span", { className: rightIconClasses }, iconRight))));
-};
-export default AlertBar;
-//# sourceMappingURL=AlertBar.js.map

package/dist/src/lib/components/AlertBar/AlertBar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AlertBar.js","sourceRoot":"","sources":["../../../../../src/lib/components/AlertBar/AlertBar.tsx"],"names":[],"mappings":"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"}

package/dist/src/lib/components/AlertBar/style.module.css

@@ -1,93 +0,0 @@
-.alertBar {
-
-    display: flex;
-
-    padding-top: 0.5rem;
-
-    padding-bottom: 0.5rem;
-
-    color: var(--color-white);
-
-    transition-duration: 700ms
-}
-
-.visible {
-
-    opacity: 1
-}
-
-.invisible {
-
-    opacity: 0
-}
-
-.dismissable:hover {
-
-    cursor: pointer
-}
-
-.rightIconClassList {
-
-    position: absolute;
-
-    right: 0px;
-
-    padding-right: 2rem;
-
-    padding-top: 0.75rem
-}
-
-.leftIconClassList {
-
-    position: absolute;
-
-    padding-top: 0.75rem;
-
-    padding-left: 2rem
-}
-
-.textCenter {
-
-    text-align: center
-}
-
-.textLeft {
-
-    padding-left: 1rem
-}
-
-.textLeftWithIcon {
-
-    padding-left: 5rem
-}
-
-.textClassList {
-
-    width: 100%;
-
-    padding-top: 0.75rem;
-
-    padding-bottom: 0.75rem
-}
-
-.success {
-
-    background-color: var(--color-success)
-}
-
-.warning {
-
-    background-color: var(--color-warning)
-}
-
-.info {
-
-    background-color: var(--color-info-light)
-}
-
-.error {
-
-    background-color: var(--color-error)
-}
-
-/*# sourceMappingURL=style.module.css.map */

package/dist/src/lib/components/AlertBar/style.module.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../../src/lib/components/AlertBar/style.module.css"],"names":[],"mappings":"AACE;;IAAA,aAAwC;;IAAxC,mBAAwC;;IAAxC,sBAAwC;;IAAxC,yBAAwC;;IAAxC;AAAwC;;AAIxC;;IAAA;AAAkB;;AAIlB;;IAAA;AAAgB;;AAIhB;;IAAA;AAAqB;;AAIrB;;IAAA,kBAAiC;;IAAjC,UAAiC;;IAAjC,mBAAiC;;IAAjC;AAAiC;;AAIjC;;IAAA,kBAAyB;;IAAzB,oBAAyB;;IAAzB;AAAyB;;AAIzB;;IAAA;AAAkB;;AAIlB;;IAAA;AAAW;;AAIX;;IAAA;AAAY;;AAIZ;;IAAA,WAAkB;;IAAlB,oBAAkB;;IAAlB;AAAkB;;AAIlB;;IAAA;AAAiB;;AAIjB;;IAAA;AAAiB;;AAIjB;;IAAA;AAAoB;;AAIpB;;IAAA;AAAe","file":"style.module.css","sourcesContent":[".alertBar {\n  @apply text-white flex py-2 duration-700;\n}\n\n.visible {\n  @apply opacity-100;\n}\n\n.invisible {\n  @apply opacity-0;\n}\n\n.dismissable:hover {\n  @apply cursor-pointer;\n}\n\n.rightIconClassList {\n  @apply absolute right-0 pr-8 pt-3;\n}\n\n.leftIconClassList {\n  @apply absolute pt-3 pl-8;\n}\n\n.textCenter {\n  @apply text-center;\n}\n\n.textLeft {\n  @apply pl-4;\n}\n\n.textLeftWithIcon {\n  @apply pl-20;\n}\n\n.textClassList {\n  @apply w-full py-3;\n}\n\n.success {\n  @apply bg-success;\n}\n\n.warning {\n  @apply bg-warning;\n}\n\n.info {\n  @apply bg-info-light;\n}\n\n.error {\n  @apply bg-error;\n}\n"]}

package/dist/src/lib/components/Avatar/Avatar.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const Avatar: React.FC;
-export default Avatar;