@ndlib/component-library 0.0.7

package/dist/theme/colors.js

@@ -0,0 +1,23 @@
+export var COLOR;
+(function (COLOR) {
+    COLOR["TEXT"] = "text";
+    COLOR["BACKGROUND"] = "background";
+    COLOR["TRANSPARENT"] = "transparent";
+    COLOR["PRIMARY"] = "primary";
+    COLOR["PRIMARY_HIGHLIGHT"] = "primaryHighlight";
+    COLOR["SECONDARY"] = "secondary";
+    COLOR["SECONDARY_HIGHLIGHT"] = "secondaryHighlight";
+    COLOR["TEXT_ON_PRIMARY"] = "textOnPrimary";
+    COLOR["TEXT_ON_SECONDARY"] = "textOnSecondary";
+})(COLOR || (COLOR = {}));
+export const colors = {
+    [COLOR.TEXT]: '#222222',
+    [COLOR.BACKGROUND]: '#ffffff',
+    [COLOR.TRANSPARENT]: 'rgba(0,0,0,0)',
+    [COLOR.PRIMARY]: '#0c2340',
+    [COLOR.PRIMARY_HIGHLIGHT]: '#000d1d',
+    [COLOR.TEXT_ON_PRIMARY]: '#ffffff',
+    [COLOR.SECONDARY]: '#f8e999',
+    [COLOR.SECONDARY_HIGHLIGHT]: '#ddcc70',
+    [COLOR.TEXT_ON_SECONDARY]: '#242111',
+};

package/dist/theme/index.d.ts

@@ -0,0 +1,19 @@
+import { PropsWithChildren } from 'react';
+import { Theme, ThemeUICSSObject } from 'theme-ui';
+import { FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT } from './typography';
+import { COLOR } from './colors';
+export declare const theme: Theme;
+export type StylesProp = ThemeUICSSObject & {
+    color?: COLOR;
+    bg?: COLOR;
+    borderColor?: COLOR;
+    fontSize?: FONT_SIZE;
+    font?: FONT;
+    fontWeight?: FONT_WEIGHT;
+    lineHeight?: LINE_HEIGHT;
+};
+export type StyledElementProps<E extends Element, CustomProps = object> = {
+    sx?: StylesProp;
+    children?: React.ReactNode;
+} & React.HTMLAttributes<E> & CustomProps;
+export declare const ThemeProvider: React.FC<PropsWithChildren>;

package/dist/theme/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider as ThemeUiProvider, } from 'theme-ui';
+import { fontStyles, } from './typography';
+import { colors } from './colors';
+export const theme = Object.assign(Object.assign({}, fontStyles), { colors, space: [
+        '0rem',
+        '0.25rem',
+        '0.5rem',
+        '0.75rem',
+        '1rem',
+        '1.5rem',
+        '2rem',
+        '3rem',
+        '4rem',
+    ] });
+export const ThemeProvider = ({ children }) => {
+    return _jsx(ThemeUiProvider, Object.assign({ theme: theme }, { children: children }));
+};

package/dist/theme/spacing.js

@@ -0,0 +1 @@
+"use strict";

package/dist/theme/typography.d.ts

@@ -0,0 +1,52 @@
+/** @jsxImportSource theme-ui */
+import { Theme } from 'theme-ui';
+export declare enum FONT {
+    BRANDED = "branded",
+    BRANDED2 = "branded2",
+    NORMAL = "normal"
+}
+export declare enum FONT_SIZE {
+    XS = "xs",
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl",
+    XXL = "xxl"
+}
+export declare enum FONT_WEIGHT {
+    NORMAL = "normal",
+    BOLD = "bold"
+}
+export declare enum LINE_HEIGHT {
+    NORMAL = "normal",
+    CONDENSED = "condensed",
+    EXTRA = "extra"
+}
+export declare const fontStyles: Partial<Theme>;
+export declare enum TYPOGRAPHY_TYPE {
+    PARAGRAPH_SMALL = "paragraphSmall",
+    PARAGRAPH_MEDIUM = "paragraphMedium",
+    PARAGRAPH_LARGE = "paragraphLarge",
+    HEADING_XSMALL = "headingXSmall",
+    HEADING_SMALL = "headingSmall",
+    HEADING_MEDIUM = "headingMedium",
+    HEADING_LARGE = "headingLarge",
+    HEADING_XLARGE = "headingXLarge",
+    CONTROL_SMALL = "controlSmall",
+    CONTROL_MEDIUM = "controlMedium",
+    CONTROL_LARGE = "controlLarge"
+}
+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 | undefined;
+};

package/dist/theme/typography.js

@@ -0,0 +1,135 @@
+export var FONT;
+(function (FONT) {
+    FONT["BRANDED"] = "branded";
+    FONT["BRANDED2"] = "branded2";
+    FONT["NORMAL"] = "normal";
+})(FONT || (FONT = {}));
+export var FONT_SIZE;
+(function (FONT_SIZE) {
+    FONT_SIZE["XS"] = "xs";
+    FONT_SIZE["SM"] = "sm";
+    FONT_SIZE["MD"] = "md";
+    FONT_SIZE["LG"] = "lg";
+    FONT_SIZE["XL"] = "xl";
+    FONT_SIZE["XXL"] = "xxl";
+})(FONT_SIZE || (FONT_SIZE = {}));
+export var FONT_WEIGHT;
+(function (FONT_WEIGHT) {
+    FONT_WEIGHT["NORMAL"] = "normal";
+    FONT_WEIGHT["BOLD"] = "bold";
+})(FONT_WEIGHT || (FONT_WEIGHT = {}));
+// export enum LETTER_SPACING {
+//   NORMAL='normal',
+//   EXTRA='extra',
+// }
+export var LINE_HEIGHT;
+(function (LINE_HEIGHT) {
+    LINE_HEIGHT["NORMAL"] = "normal";
+    LINE_HEIGHT["CONDENSED"] = "condensed";
+    LINE_HEIGHT["EXTRA"] = "extra";
+})(LINE_HEIGHT || (LINE_HEIGHT = {}));
+export const fontStyles = {
+    fonts: {
+        [FONT.BRANDED]: 'GPMed, sans-serif',
+        [FONT.BRANDED2]: 'GPCMed, sans-serif',
+        [FONT.NORMAL]: "Inter, Roboto, 'Helvetica Neue', sans-serif",
+    },
+    fontSizes: {
+        [FONT_SIZE.XS]: '0.75rem',
+        [FONT_SIZE.SM]: '0.875rem',
+        [FONT_SIZE.MD]: '1rem',
+        [FONT_SIZE.LG]: '1.25rem',
+        [FONT_SIZE.XL]: '2rem',
+        [FONT_SIZE.XXL]: '3rem',
+    },
+    lineHeights: {
+        [LINE_HEIGHT.NORMAL]: 1.2,
+        [LINE_HEIGHT.CONDENSED]: 1.1,
+        [LINE_HEIGHT.EXTRA]: 1.3,
+    },
+    fontWeights: {
+        [FONT_WEIGHT.NORMAL]: 400,
+        [FONT_WEIGHT.BOLD]: 700,
+    },
+    // letterSpacings: {
+    //   [LETTER_SPACING.NORMAL]: 'none',
+    //   [LETTER_SPACING.EXTRA]: '0.5px'
+    // }
+};
+export var TYPOGRAPHY_TYPE;
+(function (TYPOGRAPHY_TYPE) {
+    TYPOGRAPHY_TYPE["PARAGRAPH_SMALL"] = "paragraphSmall";
+    TYPOGRAPHY_TYPE["PARAGRAPH_MEDIUM"] = "paragraphMedium";
+    TYPOGRAPHY_TYPE["PARAGRAPH_LARGE"] = "paragraphLarge";
+    TYPOGRAPHY_TYPE["HEADING_XSMALL"] = "headingXSmall";
+    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 || (TYPOGRAPHY_TYPE = {}));
+export const typographyStyleMap = {
+    [TYPOGRAPHY_TYPE.PARAGRAPH_SMALL]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.SM,
+        lineHeight: LINE_HEIGHT.EXTRA,
+    },
+    [TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.MD,
+        lineHeight: LINE_HEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.PARAGRAPH_LARGE]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.LG,
+        lineHeight: LINE_HEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.HEADING_XSMALL]: {
+        fontFamily: FONT.BRANDED2,
+        fontSize: FONT_SIZE.SM,
+        lineHeight: LINE_HEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.HEADING_SMALL]: {
+        fontFamily: FONT.BRANDED2,
+        fontSize: FONT_SIZE.MD,
+        lineHeight: LINE_HEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.HEADING_MEDIUM]: {
+        fontFamily: FONT.BRANDED,
+        fontSize: FONT_SIZE.LG,
+        lineHeight: LINE_HEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.HEADING_LARGE]: {
+        fontFamily: FONT.BRANDED,
+        fontSize: FONT_SIZE.XL,
+        lineHeight: LINE_HEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.HEADING_XLARGE]: {
+        fontFamily: FONT.BRANDED,
+        fontSize: FONT_SIZE.XXL,
+        lineHeight: LINE_HEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.CONTROL_SMALL]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.SM,
+        fontWeight: FONT_WEIGHT.BOLD,
+        lineHeight: LINE_HEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.CONTROL_MEDIUM]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.MD,
+        fontWeight: FONT_WEIGHT.BOLD,
+        lineHeight: LINE_HEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.CONTROL_LARGE]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.LG,
+        fontWeight: FONT_WEIGHT.BOLD,
+        lineHeight: LINE_HEIGHT.NORMAL,
+    },
+};
+export const getTypographyStyles = (typography) => {
+    return typographyStyleMap[typography || TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM];
+};

package/dist/utils/misc.d.ts

@@ -0,0 +1,3 @@
+export type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;

package/dist/utils/misc.js

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

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,7 @@
+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 }, { children: component })));
+};

package/global.css

@@ -0,0 +1,59 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+	font-size: 16px;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+@font-face {
+  font-family: GPCMed;
+  font-display: swap;
+  src: url('https://static.nd.edu/fonts/gp-min/gpc-medium.woff2');
+  src:url("https://static.nd.edu/fonts/gp-min/gpc-medium.woff2") format("woff2"),url("https://static.nd.edu/fonts/gp-min/gpc-medium.woff") format("woff"),url("https://static.nd.edu/fonts/gp-min/gpc-medium.ttf") format("truetype")
+}
+
+@font-face {
+  font-family: GPMed;
+  font-display: swap;
+  src: url('https://static.nd.edu/fonts/gp-min/gp-medium.woff2');
+  src:url("https://static.nd.edu/fonts/gp-min/gp-medium.woff2") format("woff2"),url("https://static.nd.edu/fonts/gp-min/gp-medium.woff") format("woff"),url("https://static.nd.edu/fonts/gp-min/gp-medium.ttf") format("truetype")
+}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@ndlib/component-library",
+  "version": "0.0.7",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "global.css"
+  ],
+  "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": {
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives && yarn prettier",
+    "lint:fix": "eslint src --ext ts,tsx --report-unused-disable-directives --fix && yarn prettify",
+    "test": "vitest",
+    "prettier": "prettier --check src/**/*.{ts,tsx}",
+    "prettify": "prettier --write src/**/*.{ts,tsx}",
+    "start": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o docs && touch docs/.nojekyll",
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@mui/lab": "^5.0.0-alpha.133",
+    "formik": "^2.2.9",
+    "theme-ui": "^0.15.7"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@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/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@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",
+    "jsdom": "^22.1.0",
+    "prettier": "^2.8.8",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.17",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.2",
+    "vitest": "^0.31.4"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "semi": false
+  }
+}