@ndlib/component-library 0.0.7-9.1

package/dist/theme/typography.d.ts

@@ -0,0 +1,100 @@
+export declare enum FONT {
+    BRANDED = "branded",
+    BRANDED2 = "branded2",
+    SERIF = "serif",
+    NORMAL = "normal"
+}
+export declare enum FONT_SIZE {
+    XXS = "xxs",
+    XS = "xs",
+    SM = "sm",
+    MS = "ms",
+    MD = "md",
+    ML = "ml",
+    LG = "lg",
+    XL = "xl",
+    XXL = "xxl"
+}
+export declare const getIconSize: (fontSize: FONT_SIZE) => FONT_SIZE;
+export declare enum FONT_WEIGHT {
+    NORMAL = "normal",
+    HEADING = "heading",
+    BOLD = "bold"
+}
+export declare enum LINE_HEIGHT {
+    NORMAL = "normal",
+    CONDENSED = "condensed"
+}
+export declare const fontSizeMap: {
+    xxs: string;
+    xs: string;
+    sm: string;
+    ms: string;
+    md: string;
+    ml: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+};
+export declare const fontStyles: {
+    fonts: {
+        branded: string;
+        branded2: string;
+        serif: string;
+        normal: string;
+    };
+    fontSizes: {
+        xxs: string;
+        xs: string;
+        sm: string;
+        ms: string;
+        md: string;
+        ml: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+    lineHeights: {
+        normal: number;
+        condensed: number;
+    };
+    fontWeights: {
+        normal: number;
+        heading: number;
+        bold: number;
+    };
+};
+export declare enum TYPOGRAPHY_TYPE {
+    PARAGRAPH_XSMALL = "paragraphXSmall",
+    PARAGRAPH_SMALL = "paragraphSmall",
+    PARAGRAPH_MEDIUM = "paragraphMedium",
+    PARAGRAPH_LARGE = "paragraphLarge",
+    CONDENSED_TEXT_XSMALL = "condensedTextXSmall",
+    CONDENSED_TEXT_SMALL = "condensedTextSmall",
+    CONDENSED_TEXT_MEDIUM = "condensedTextMedium",
+    CONDENSED_TEXT_LARGE = "condensedTextLarge",
+    HEADING_SMALL = "headingSmall",
+    HEADING_MEDIUM = "headingMedium",
+    HEADING_LARGE = "headingLarge",
+    HEADING_XLARGE = "headingXLarge",
+    CONTROL_SMALL = "controlSmall",
+    CONTROL_MEDIUM = "controlMedium",
+    CONTROL_LARGE = "controlLarge",
+    HEADLINE_SMALL = "headlineSmall",
+    HEADLINE_MEDIUM = "headlineMedium",
+    HEADLINE_LARGE = "headlineLarge"
+}
+export declare const typographyStyleMap: {
+    [key in TYPOGRAPHY_TYPE]: {
+        fontFamily: FONT;
+        fontSize: FONT_SIZE;
+        fontWeight?: FONT_WEIGHT;
+        lineHeight: LINE_HEIGHT;
+    };
+};
+export declare const getTypographyStyles: (typography?: TYPOGRAPHY_TYPE) => {
+    fontFamily: FONT;
+    fontSize: FONT_SIZE;
+    fontWeight?: FONT_WEIGHT | undefined;
+    lineHeight: LINE_HEIGHT;
+};

package/dist/theme/typography.js

@@ -0,0 +1,206 @@
+export var FONT;
+(function (FONT) {
+    FONT["BRANDED"] = "branded";
+    FONT["BRANDED2"] = "branded2";
+    FONT["SERIF"] = "serif";
+    FONT["NORMAL"] = "normal";
+})(FONT || (FONT = {}));
+export var FONT_SIZE;
+(function (FONT_SIZE) {
+    FONT_SIZE["XXS"] = "xxs";
+    FONT_SIZE["XS"] = "xs";
+    FONT_SIZE["SM"] = "sm";
+    FONT_SIZE["MS"] = "ms";
+    FONT_SIZE["MD"] = "md";
+    FONT_SIZE["ML"] = "ml";
+    FONT_SIZE["LG"] = "lg";
+    FONT_SIZE["XL"] = "xl";
+    FONT_SIZE["XXL"] = "xxl";
+})(FONT_SIZE || (FONT_SIZE = {}));
+export const getIconSize = (fontSize) => {
+    return {
+        [FONT_SIZE.XXS]: FONT_SIZE.XS,
+        [FONT_SIZE.XS]: FONT_SIZE.SM,
+        [FONT_SIZE.SM]: FONT_SIZE.SM,
+        [FONT_SIZE.MS]: FONT_SIZE.MD,
+        [FONT_SIZE.MD]: FONT_SIZE.MD,
+        [FONT_SIZE.ML]: FONT_SIZE.LG,
+        [FONT_SIZE.LG]: FONT_SIZE.LG,
+        [FONT_SIZE.XL]: FONT_SIZE.XXL,
+        [FONT_SIZE.XXL]: FONT_SIZE.XXL,
+    }[fontSize];
+};
+export var FONT_WEIGHT;
+(function (FONT_WEIGHT) {
+    FONT_WEIGHT["NORMAL"] = "normal";
+    FONT_WEIGHT["HEADING"] = "heading";
+    FONT_WEIGHT["BOLD"] = "bold";
+})(FONT_WEIGHT || (FONT_WEIGHT = {}));
+export var LINE_HEIGHT;
+(function (LINE_HEIGHT) {
+    LINE_HEIGHT["NORMAL"] = "normal";
+    LINE_HEIGHT["CONDENSED"] = "condensed";
+})(LINE_HEIGHT || (LINE_HEIGHT = {}));
+export const fontSizeMap = {
+    [FONT_SIZE.XXS]: '0.675rem',
+    [FONT_SIZE.XS]: '0.75rem',
+    [FONT_SIZE.SM]: '0.875rem',
+    [FONT_SIZE.MS]: '1rem',
+    [FONT_SIZE.MD]: '1.25rem',
+    [FONT_SIZE.ML]: '1.5rem',
+    [FONT_SIZE.LG]: '1.75rem',
+    [FONT_SIZE.XL]: '2.0rem',
+    [FONT_SIZE.XXL]: '2.25rem',
+};
+export const fontStyles = {
+    fonts: {
+        [FONT.BRANDED]: 'GPMed, sans-serif',
+        [FONT.BRANDED2]: 'GPCMed, sans-serif',
+        [FONT.SERIF]: '"Sumana", Georgia, "Times New Roman", Times, serif;',
+        [FONT.NORMAL]: '"Libre Franklin", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;',
+    },
+    fontSizes: fontSizeMap,
+    lineHeights: {
+        [LINE_HEIGHT.NORMAL]: 1.625,
+        [LINE_HEIGHT.CONDENSED]: 1.3,
+    },
+    fontWeights: {
+        [FONT_WEIGHT.NORMAL]: 400,
+        [FONT_WEIGHT.HEADING]: 600,
+        [FONT_WEIGHT.BOLD]: 700,
+    },
+};
+export var TYPOGRAPHY_TYPE;
+(function (TYPOGRAPHY_TYPE) {
+    TYPOGRAPHY_TYPE["PARAGRAPH_XSMALL"] = "paragraphXSmall";
+    TYPOGRAPHY_TYPE["PARAGRAPH_SMALL"] = "paragraphSmall";
+    TYPOGRAPHY_TYPE["PARAGRAPH_MEDIUM"] = "paragraphMedium";
+    TYPOGRAPHY_TYPE["PARAGRAPH_LARGE"] = "paragraphLarge";
+    TYPOGRAPHY_TYPE["CONDENSED_TEXT_XSMALL"] = "condensedTextXSmall";
+    TYPOGRAPHY_TYPE["CONDENSED_TEXT_SMALL"] = "condensedTextSmall";
+    TYPOGRAPHY_TYPE["CONDENSED_TEXT_MEDIUM"] = "condensedTextMedium";
+    TYPOGRAPHY_TYPE["CONDENSED_TEXT_LARGE"] = "condensedTextLarge";
+    TYPOGRAPHY_TYPE["HEADING_SMALL"] = "headingSmall";
+    TYPOGRAPHY_TYPE["HEADING_MEDIUM"] = "headingMedium";
+    TYPOGRAPHY_TYPE["HEADING_LARGE"] = "headingLarge";
+    TYPOGRAPHY_TYPE["HEADING_XLARGE"] = "headingXLarge";
+    TYPOGRAPHY_TYPE["CONTROL_SMALL"] = "controlSmall";
+    TYPOGRAPHY_TYPE["CONTROL_MEDIUM"] = "controlMedium";
+    TYPOGRAPHY_TYPE["CONTROL_LARGE"] = "controlLarge";
+    TYPOGRAPHY_TYPE["HEADLINE_SMALL"] = "headlineSmall";
+    TYPOGRAPHY_TYPE["HEADLINE_MEDIUM"] = "headlineMedium";
+    TYPOGRAPHY_TYPE["HEADLINE_LARGE"] = "headlineLarge";
+})(TYPOGRAPHY_TYPE || (TYPOGRAPHY_TYPE = {}));
+export const typographyStyleMap = {
+    [TYPOGRAPHY_TYPE.PARAGRAPH_XSMALL]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.XS,
+        lineHeight: LINE_HEIGHT.NORMAL,
+        fontWeight: FONT_WEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.PARAGRAPH_SMALL]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.SM,
+        lineHeight: LINE_HEIGHT.NORMAL,
+        fontWeight: FONT_WEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.MS,
+        lineHeight: LINE_HEIGHT.NORMAL,
+        fontWeight: FONT_WEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.PARAGRAPH_LARGE]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.MD,
+        lineHeight: LINE_HEIGHT.NORMAL,
+        fontWeight: FONT_WEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.CONDENSED_TEXT_XSMALL]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.XS,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+        fontWeight: FONT_WEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.CONDENSED_TEXT_SMALL]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.SM,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+        fontWeight: FONT_WEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.MS,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+        fontWeight: FONT_WEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.CONDENSED_TEXT_LARGE]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.MD,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+        fontWeight: FONT_WEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.HEADING_SMALL]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.MD,
+        fontWeight: FONT_WEIGHT.HEADING,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+    },
+    [TYPOGRAPHY_TYPE.HEADING_MEDIUM]: {
+        fontFamily: FONT.BRANDED2,
+        fontSize: FONT_SIZE.LG,
+        fontWeight: FONT_WEIGHT.HEADING,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+    },
+    [TYPOGRAPHY_TYPE.HEADING_LARGE]: {
+        fontFamily: FONT.BRANDED2,
+        fontSize: FONT_SIZE.XL,
+        fontWeight: FONT_WEIGHT.HEADING,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+    },
+    [TYPOGRAPHY_TYPE.HEADING_XLARGE]: {
+        fontFamily: FONT.BRANDED2,
+        fontSize: FONT_SIZE.XXL,
+        fontWeight: FONT_WEIGHT.HEADING,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+    },
+    [TYPOGRAPHY_TYPE.CONTROL_SMALL]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.SM,
+        fontWeight: FONT_WEIGHT.BOLD,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+    },
+    [TYPOGRAPHY_TYPE.CONTROL_MEDIUM]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.MS,
+        fontWeight: FONT_WEIGHT.BOLD,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+    },
+    [TYPOGRAPHY_TYPE.CONTROL_LARGE]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.MD,
+        fontWeight: FONT_WEIGHT.BOLD,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+    },
+    [TYPOGRAPHY_TYPE.HEADLINE_SMALL]: {
+        fontFamily: FONT.SERIF,
+        fontSize: FONT_SIZE.MD,
+        fontWeight: FONT_WEIGHT.NORMAL,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+    },
+    [TYPOGRAPHY_TYPE.HEADLINE_MEDIUM]: {
+        fontFamily: FONT.SERIF,
+        fontSize: FONT_SIZE.ML,
+        fontWeight: FONT_WEIGHT.NORMAL,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+    },
+    [TYPOGRAPHY_TYPE.HEADLINE_LARGE]: {
+        fontFamily: FONT.SERIF,
+        fontSize: FONT_SIZE.LG,
+        fontWeight: FONT_WEIGHT.NORMAL,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+    },
+};
+export const getTypographyStyles = (typography) => {
+    return typographyStyleMap[typography || TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM];
+};

package/dist/utils/hooks/useCheckMidClick.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const useCheckMidClick: () => {
+    elementProps: {
+        onMouseDown: () => void;
+        onMouseUp: () => void;
+    };
+    isMidClick: React.MutableRefObject<boolean>;
+};

package/dist/utils/hooks/useCheckMidClick.js

@@ -0,0 +1,17 @@
+import React from 'react';
+export const useCheckMidClick = () => {
+    const isMidClick = React.useRef(false);
+    const onMouseDown = () => {
+        isMidClick.current = true;
+    };
+    const onMouseUp = () => {
+        isMidClick.current = false;
+    };
+    return React.useMemo(() => ({
+        elementProps: {
+            onMouseDown,
+            onMouseUp,
+        },
+        isMidClick,
+    }), []);
+};

package/dist/utils/hooks/useCheckMidKeyPress.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const useCheckMidKeyPress: () => {
+    elementProps: {
+        onKeyDown: (e: React.KeyboardEvent) => void;
+        onKeyUp: () => void;
+        onBlur: () => void;
+    };
+    isMidKeyPress: React.MutableRefObject<boolean>;
+};

package/dist/utils/hooks/useCheckMidKeyPress.js

@@ -0,0 +1,23 @@
+import React from 'react';
+export const useCheckMidKeyPress = () => {
+    const isMidKeyPress = React.useRef(false);
+    const onKeyDown = (e) => {
+        if (e.key === 'Tab' || e.key === 'Escape')
+            return;
+        isMidKeyPress.current = true;
+    };
+    const onKeyUp = () => {
+        isMidKeyPress.current = false;
+    };
+    const onBlur = () => {
+        isMidKeyPress.current = false;
+    };
+    return React.useMemo(() => ({
+        elementProps: {
+            onKeyDown,
+            onKeyUp,
+            onBlur,
+        },
+        isMidKeyPress,
+    }), []);
+};

package/dist/utils/hooks/useHover.d.ts

@@ -0,0 +1,7 @@
+export declare const useHover: () => {
+    isHovered: boolean;
+    anchorElementProps: {
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+    };
+};

package/dist/utils/hooks/useHover.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export const useHover = () => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const anchorElementProps = {
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+    };
+    return {
+        isHovered,
+        anchorElementProps,
+    };
+};

package/dist/utils/hooks/useStorage.d.ts

@@ -0,0 +1,14 @@
+interface _Storage {
+    getItem: (key: string) => string | null;
+    setItem: (key: string, value: string) => void;
+}
+declare class StorageAdaptor implements _Storage {
+    prefix?: string;
+    storage: _Storage;
+    constructor(prefix?: string);
+    getStorageKey(key: string): string;
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+}
+export declare const useStorage: (prefix?: string) => StorageAdaptor;
+export {};

package/dist/utils/hooks/useStorage.js

@@ -0,0 +1,37 @@
+import React from 'react';
+const fallbackMemory = {};
+const isBrowser = typeof window !== 'undefined';
+const fallbackStorage = {
+    getItem(key) {
+        return fallbackMemory[key];
+    },
+    setItem(key, value) {
+        fallbackMemory[key] = value;
+    },
+};
+class StorageAdaptor {
+    constructor(prefix) {
+        if (isBrowser) {
+            this.storage = window.sessionStorage || fallbackStorage;
+        }
+        else {
+            this.storage = fallbackStorage;
+        }
+        this.prefix = prefix;
+    }
+    getStorageKey(key) {
+        return this.prefix ? `${this.prefix}-${key}` : key;
+    }
+    getItem(key) {
+        return this.storage.getItem(this.getStorageKey(key));
+    }
+    setItem(key, value) {
+        this.storage.setItem(this.getStorageKey(key), value);
+    }
+}
+export const useStorage = (prefix) => {
+    const storage = React.useMemo(() => {
+        return new StorageAdaptor(prefix);
+    }, [prefix]);
+    return storage;
+};

package/dist/utils/misc.d.ts

@@ -0,0 +1,14 @@
+export type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+export declare const firstChildAltSelector = ":first-of-type:not(style):not(:first-of-type ~ *),style + *";
+export declare enum KEY_CODES {
+    ENTER = "Enter",
+    ARROW_UP = "ArrowUp",
+    ARROW_DOWN = "ArrowDown",
+    ARROW_RIGHT = "ArrowRight",
+    ARROW_LEFT = "ArrowLeft",
+    ESCAPE = "Escape"
+}
+export declare const equals: (a: any, b: any) => boolean;
+export declare function importedDefaultComponentShim<T>(component: T): T;

package/dist/utils/misc.js

@@ -0,0 +1,19 @@
+export const firstChildAltSelector = ':first-of-type:not(style):not(:first-of-type ~ *),style + *';
+export var KEY_CODES;
+(function (KEY_CODES) {
+    KEY_CODES["ENTER"] = "Enter";
+    KEY_CODES["ARROW_UP"] = "ArrowUp";
+    KEY_CODES["ARROW_DOWN"] = "ArrowDown";
+    KEY_CODES["ARROW_RIGHT"] = "ArrowRight";
+    KEY_CODES["ARROW_LEFT"] = "ArrowLeft";
+    KEY_CODES["ESCAPE"] = "Escape";
+})(KEY_CODES || (KEY_CODES = {}));
+export const equals = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+export function importedDefaultComponentShim(component) {
+    if (component && typeof component === 'object' && 'default' in component) {
+        return component.default;
+    }
+    else {
+        return component;
+    }
+}

package/dist/utils/sortByKey.d.ts

@@ -0,0 +1,12 @@
+export declare enum SORT_DIRECTION {
+    ASC = "ASC",
+    DESC = "DESC"
+}
+export type SortConfig<RowData> = {
+    key: keyof RowData;
+    direction: SORT_DIRECTION;
+};
+export declare function sortByKey<Item = any>(params: {
+    items: Item[];
+    config: SortConfig<Item>;
+}): Item[];

package/dist/utils/sortByKey.js

@@ -0,0 +1,20 @@
+export var SORT_DIRECTION;
+(function (SORT_DIRECTION) {
+    SORT_DIRECTION["ASC"] = "ASC";
+    SORT_DIRECTION["DESC"] = "DESC";
+})(SORT_DIRECTION || (SORT_DIRECTION = {}));
+export function sortByKey(params) {
+    const { items, config: { key, direction }, } = params;
+    const newItems = [...items];
+    return newItems.sort((a, b) => {
+        if (a[key] < b[key] && direction === SORT_DIRECTION.ASC) {
+            return -1;
+        }
+        else if (b[key] < a[key] && direction === SORT_DIRECTION.DESC) {
+            return -1;
+        }
+        else {
+            return 1;
+        }
+    });
+}

package/dist/utils/test.d.ts

@@ -0,0 +1,2 @@
+import { UiConfig } from '../components/providers/ui';
+export declare const render: (component: React.ReactNode, configParam?: UiConfig) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;

package/dist/utils/test.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render as rtlRender } from '@testing-library/react';
+import { UiProvider } from '../components/providers/ui';
+export const render = (component, configParam) => {
+    const config = configParam || {};
+    return rtlRender(_jsx(UiProvider, Object.assign({ env: config.env, components: config.components, alertsConfig: {
+            disable: true,
+        } }, { children: component })));
+};

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@ndlib/component-library",
+  "version": "0.0.79.1",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "global.css"
+  ],
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./global.css": "./global.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ndlibrary/hesburgh-component-library.git"
+  },
+  "scripts": {
+    "prepare": "husky install",
+    "test-build": "echo '\n\nTesting Build...' && tsc --noEmit",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives && yarn prettier && yarn test-build",
+    "lint:fix": "eslint src --ext ts,tsx --report-unused-disable-directives --fix && yarn prettify && yarn test-build",
+    "test": "vitest",
+    "prettier": "prettier --check \"src/**/*.{ts,tsx}\"",
+    "prettify": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "start": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o storybook && touch storybook/.nojekyll",
+    "build": "tsc",
+    "debug": "echo src/**/*.tsx"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.11.16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "theme-ui": "^0.16.1"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.11.16",
+    "@storybook/addon-essentials": "^7.0.17",
+    "@storybook/addon-interactions": "^7.0.18",
+    "@storybook/addon-links": "^7.0.17",
+    "@storybook/blocks": "^7.0.17",
+    "@storybook/react": "^7.0.17",
+    "@storybook/react-vite": "^7.0.17",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/pretty": "^2.0.1",
+    "@types/react": "^18.0.28",
+    "@types/react-beautiful-dnd": "^13.1.5",
+    "@types/react-datepicker": "^4.15.0",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-modal": "^3.16.0",
+    "@types/sanitize-html": "^2.9.0",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "@vitejs/plugin-react-swc": "^3.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "eslint-plugin-storybook": "^0.6.12",
+    "husky": "^8.0.3",
+    "jsdom": "^22.1.0",
+    "prettier": "^3.0.3",
+    "pretty": "^2.0.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.17",
+    "theme-ui": "^0.16.1",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9",
+    "vitest": "^0.31.4"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "semi": false,
+    "trailingComma": "all"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.24.5",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-datepicker": "^4.16.0",
+    "react-markdown": "^8.0.7",
+    "react-modal": "^3.16.1",
+    "rehype-raw": "^6.1.1",
+    "sanitize-html": "^2.11.0",
+    "schema-dts": "^1.1.2"
+  }
+}