jcicl 0.0.22 → 0.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/.chunks/NavLink.js +1 -1
  2. package/README.md +12 -15
  3. package/base/Avatar/{Avatar/Avatar.js → Avatar.js} +4 -4
  4. package/base/Avatar/index.d.ts +1 -2
  5. package/base/Avatar/index.js +2 -4
  6. package/base/{Avatar/AvatarWithImage → AvatarWithImage}/AvatarWithImage.js +3 -3
  7. package/base/AvatarWithImage/index.d.ts +1 -0
  8. package/base/Button/Button.js +27 -31
  9. package/base/Divider/index.d.ts +1 -1
  10. package/base/Flex/Flex.js +6 -5
  11. package/base/Flex/index.d.ts +1 -1
  12. package/base/Grid/index.d.ts +1 -1
  13. package/base/Input/Input.js +61 -61
  14. package/base/ScrollContainer/ScrollContainer.d.ts +10 -0
  15. package/base/ScrollContainer/ScrollContainer.js +42 -0
  16. package/base/index.d.ts +2 -2
  17. package/base/index.js +2 -2
  18. package/composite/WithLabel/WithLabel.d.ts +6 -0
  19. package/composite/WithLabel/WithLabel.js +9 -0
  20. package/composite/WithLabel/index.d.ts +1 -0
  21. package/composite/WithLabel/index.js +4 -0
  22. package/composite/index.d.ts +1 -0
  23. package/composite/index.js +4 -0
  24. package/index.d.ts +1 -1
  25. package/index.js +9 -9
  26. package/package.json +1 -1
  27. package/supercomposite/AppBar/AppBar.js +1 -1
  28. package/supercomposite/AppHeader/AppHeader.js +16 -16
  29. package/supercomposite/Nav/Nav.d.ts +10 -10
  30. package/supercomposite/Nav/Nav.js +73 -614
  31. package/supercomposite/Nav/index.d.ts +1 -2
  32. package/supercomposite/OldNav/Nav.d.ts +13 -0
  33. package/supercomposite/OldNav/Nav.js +626 -0
  34. package/supercomposite/OldNav/index.d.ts +2 -0
  35. package/supercomposite/OldNav/index.js +4 -0
  36. package/supercomposite/{Nav → OldNav}/subcomponents/NavItem/subcomponents/NavLinkButton.d.ts +1 -1
  37. package/supercomposite/{Nav → OldNav}/subcomponents/NavItem/subcomponents/NavMenu.d.ts +1 -1
  38. package/supercomposite/{Nav → OldNav}/subcomponents/NavItem/types.d.ts +1 -1
  39. package/supercomposite/index.d.ts +1 -1
  40. package/templates/AppContainer/AppContainer.d.ts +1 -1
  41. package/templates/AppContainer/AppContainer.js +22 -22
  42. package/templates/BasicPage/BasicPage.d.ts +1 -1
  43. package/templates/BasicPage/BasicPage.js +8 -8
  44. package/theme.d.ts +32 -24
  45. package/theme.js +17 -4
  46. package/base/Avatar/Avatar/index.d.ts +0 -1
  47. package/base/Avatar/Avatar/index.js +0 -4
  48. package/base/Avatar/AvatarWithImage/index.d.ts +0 -1
  49. package/composite/ContactCard/ContactCard.d.ts +0 -2
  50. package/composite/ContactListItem/ContactListItem.js +0 -1
  51. package/supercomposite/CompactNav/CompactNav.d.ts +0 -17
  52. package/supercomposite/CompactNav/CompactNav.js +0 -72
  53. package/supercomposite/CompactNav/index.d.ts +0 -1
  54. package/supercomposite/CompactNav/index.js +0 -4
  55. /package/base/Avatar/{Avatar/Avatar.d.ts → Avatar.d.ts} +0 -0
  56. /package/base/{Avatar/AvatarWithImage → AvatarWithImage}/AvatarWithImage.d.ts +0 -0
  57. /package/base/{Avatar/AvatarWithImage → AvatarWithImage}/index.js +0 -0
  58. /package/composite/{ContactListItem/ContactListItem.d.ts → List/List.d.ts} +0 -0
  59. /package/composite/{ContactCard/ContactCard.js → List/List.js} +0 -0
  60. /package/supercomposite/{Nav → OldNav}/subcomponents/NavItem/NavItem.d.ts +0 -0
  61. /package/supercomposite/{Nav → OldNav}/subcomponents/NavItem/NavItem.js +0 -0
  62. /package/supercomposite/{Nav → OldNav}/subcomponents/NavItem/subcomponents/NavLink.d.ts +0 -0
  63. /package/supercomposite/{Nav → OldNav}/subcomponents/NavItem/subcomponents/NavLink.js +0 -0
  64. /package/supercomposite/{Nav → OldNav}/subcomponents/NavItem/subcomponents/NavLinkButton.js +0 -0
  65. /package/supercomposite/{Nav → OldNav}/subcomponents/NavItem/subcomponents/NavLinkText.d.ts +0 -0
  66. /package/supercomposite/{Nav → OldNav}/subcomponents/NavItem/subcomponents/NavLinkText.js +0 -0
  67. /package/supercomposite/{Nav → OldNav}/subcomponents/NavItem/subcomponents/NavMenu.js +0 -0
  68. /package/supercomposite/{Nav → OldNav}/subcomponents/NavItem/types.js +0 -0
  69. /package/supercomposite/{Nav → OldNav}/types.d.ts +0 -0
  70. /package/supercomposite/{Nav → OldNav}/types.js +0 -0
@@ -1,5 +1,5 @@
1
1
  import { jsx as l, jsxs as C } from "react/jsx-runtime";
2
- import { NavLinkText as J } from "../supercomposite/Nav/subcomponents/NavItem/subcomponents/NavLinkText.js";
2
+ import { NavLinkText as J } from "../supercomposite/OldNav/subcomponents/NavItem/subcomponents/NavLinkText.js";
3
3
  import { l as K, N as Q } from "./NavLinkButton.js";
4
4
  import * as a from "react";
5
5
  import { g as w, a as k, s as L, u as O, c as x, P as e, b as U } from "./DefaultPropsProvider.js";
package/README.md CHANGED
@@ -1,28 +1,27 @@
1
1
  # Welcome to the Johnson County Component Library!
2
2
 
3
- ## Usage
3
+ ## Quick Start
4
4
 
5
5
  ### Runtime Enviromnent
6
6
 
7
7
  1. Please download and install [NVM for Windows](https://github.com/coreybutler/nvm-windows?tab=readme-ov-file)
8
- 2. Run `nvm install 20.18.0` to install the current LTS version of node
9
- 3. Run `nvm use 20`
8
+ 2. `nvm install 20.18.0`
9
+ 3. `nvm use 20`
10
10
 
11
- ### Quick Start
11
+ ### Usage
12
12
 
13
- #### Usage within an existing React project
13
+ `npm install jcicl@latest`
14
14
 
15
- To add the Johnson County Component Library to your React project, from the root directory of your project, please run `npm install jccomponentlibrary`
16
-
17
- ### Add the fonts
15
+ ```js
16
+ import Button, { ButtonProps } from 'jcicl/base/Button';
17
+ import Nav, { NavProps } from 'jcicl/supercomposite/Nav';
18
18
 
19
- ```console
20
- npm install @fontsource/roboto
21
- npm install @fontsource/material-icons
22
- npm install @mui/icons-material
19
+ const Component: React.FC<ButtonProps> = ({ ...buttonProps }) => <Button {...buttonProps}>Johnson County Button</Button>;
23
20
  ```
24
21
 
25
- Then, in your project entry (most likely `main.tsx`) point, add:
22
+ ### Adding the fonts
23
+
24
+ In your project entry point (most likely `main.tsx`), add:
26
25
 
27
26
  ```js
28
27
  import '@fontsource/roboto/300.css';
@@ -40,8 +39,6 @@ Alternatively, add to project root `index.html` `<head />`:
40
39
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
41
40
  ```
42
41
 
43
- **After installation, import any components you wish to use: `import { Component } from jccomponentlibrary`**
44
-
45
42
  #### Viewing Storybook Documentation
46
43
 
47
44
  We are using [Storybook](https://storybook.js.org/docs/get-started/frameworks/react-vite?renderer=react) to document our component library
@@ -1,8 +1,8 @@
1
1
  import { jsx as t } from "react/jsx-runtime";
2
- import { c } from "../../../.chunks/createSvgIcon.js";
3
- import { B as d } from "../../../.chunks/ButtonBase.js";
4
- import i from "../../../theme.js";
5
- import { n as a, i as l } from "../../../.chunks/emotion-styled.browser.esm.js";
2
+ import { c } from "../../.chunks/createSvgIcon.js";
3
+ import { B as d } from "../../.chunks/ButtonBase.js";
4
+ import i from "../../theme.js";
5
+ import { n as a, i as l } from "../../.chunks/emotion-styled.browser.esm.js";
6
6
  const m = c(/* @__PURE__ */ t("path", {
7
7
  d: "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4m0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4"
8
8
  }), "PersonOutlineOutlined"), s = a(m, {
@@ -1,2 +1 @@
1
- export { default as Avatar } from './Avatar';
2
- export { default as AvatarWithImage } from './AvatarWithImage';
1
+ export { default, type AvatarProps } from './Avatar';
@@ -1,6 +1,4 @@
1
- import { default as t } from "./Avatar/Avatar.js";
2
- import { AvatarWithImage as o } from "./AvatarWithImage/AvatarWithImage.js";
1
+ import { default as o } from "./Avatar.js";
3
2
  export {
4
- t as Avatar,
5
- o as AvatarWithImage
3
+ o as default
6
4
  };
@@ -1,7 +1,7 @@
1
1
  import { jsx as n } from "react/jsx-runtime";
2
- import { B as l } from "../../../.chunks/ButtonBase.js";
3
- import m from "../../../theme.js";
4
- import { n as d } from "../../../.chunks/emotion-styled.browser.esm.js";
2
+ import { B as l } from "../../.chunks/ButtonBase.js";
3
+ import m from "../../theme.js";
4
+ import { n as d } from "../../.chunks/emotion-styled.browser.esm.js";
5
5
  const s = d("img")(
6
6
  ({ borderColor: o = m.colors.darkGreen, size: r = 40, objectFit: e = "cover" }) => ({
7
7
  border: `1px solid ${o}`,
@@ -0,0 +1 @@
1
+ export { default, type AvatarWithImageProps } from './AvatarWithImage.tsx';
@@ -1,6 +1,6 @@
1
1
  import { jsxs as D, jsx as d } from "react/jsx-runtime";
2
- import * as b from "react";
3
- import { a as F, g as U, s as c, r as _, e, h as H, u as A, c as w, P as t, b as q, d as g } from "../../.chunks/DefaultPropsProvider.js";
2
+ import * as g from "react";
3
+ import { a as F, g as U, s as c, r as _, e, h as H, u as A, c as w, P as t, b as q, d as b } from "../../.chunks/DefaultPropsProvider.js";
4
4
  import { m as J } from "../../.chunks/memoTheme.js";
5
5
  import { c as K } from "../../.chunks/createSimplePaletteValueFilter.js";
6
6
  import { B as Q } from "../../.chunks/ButtonBase.js";
@@ -8,9 +8,9 @@ import i from "../../theme.js";
8
8
  function X(o) {
9
9
  return F("MuiButton", o);
10
10
  }
11
- const l = U("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), I = /* @__PURE__ */ b.createContext({});
11
+ const l = U("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), I = /* @__PURE__ */ g.createContext({});
12
12
  process.env.NODE_ENV !== "production" && (I.displayName = "ButtonGroupContext");
13
- const h = /* @__PURE__ */ b.createContext(void 0);
13
+ const h = /* @__PURE__ */ g.createContext(void 0);
14
14
  process.env.NODE_ENV !== "production" && (h.displayName = "ButtonGroupButtonContext");
15
15
  const Y = (o) => {
16
16
  const {
@@ -20,16 +20,16 @@ const Y = (o) => {
20
20
  size: s,
21
21
  variant: p,
22
22
  classes: u
23
- } = o, f = {
23
+ } = o, y = {
24
24
  root: ["root", p, `${p}${e(a)}`, `size${e(s)}`, `${p}Size${e(s)}`, `color${e(a)}`, n && "disableElevation", r && "fullWidth"],
25
25
  label: ["label"],
26
26
  startIcon: ["icon", "startIcon", `iconSize${e(s)}`],
27
27
  endIcon: ["icon", "endIcon", `iconSize${e(s)}`]
28
- }, y = q(f, X, u);
28
+ }, f = q(y, X, u);
29
29
  return {
30
30
  ...u,
31
31
  // forward the focused, disabled, etc. classes to the ButtonBase
32
- ...y
32
+ ...f
33
33
  };
34
34
  }, O = [{
35
35
  props: {
@@ -144,15 +144,15 @@ const Y = (o) => {
144
144
  style: {
145
145
  "--variant-textColor": (o.vars || o).palette[r].main,
146
146
  "--variant-outlinedColor": (o.vars || o).palette[r].main,
147
- "--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / 0.5)` : g(o.palette[r].main, 0.5),
147
+ "--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / 0.5)` : b(o.palette[r].main, 0.5),
148
148
  "--variant-containedColor": (o.vars || o).palette[r].contrastText,
149
149
  "--variant-containedBg": (o.vars || o).palette[r].main,
150
150
  "@media (hover: hover)": {
151
151
  "&:hover": {
152
152
  "--variant-containedBg": (o.vars || o).palette[r].dark,
153
- "--variant-textBg": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette[r].main, o.palette.action.hoverOpacity),
153
+ "--variant-textBg": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette[r].main, o.palette.action.hoverOpacity),
154
154
  "--variant-outlinedBorder": (o.vars || o).palette[r].main,
155
- "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette[r].main, o.palette.action.hoverOpacity)
155
+ "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette[r].main, o.palette.action.hoverOpacity)
156
156
  }
157
157
  }
158
158
  }
@@ -167,8 +167,8 @@ const Y = (o) => {
167
167
  "@media (hover: hover)": {
168
168
  "&:hover": {
169
169
  "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : n,
170
- "--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette.text.primary, o.palette.action.hoverOpacity),
171
- "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette.text.primary, o.palette.action.hoverOpacity)
170
+ "--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette.text.primary, o.palette.action.hoverOpacity),
171
+ "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette.text.primary, o.palette.action.hoverOpacity)
172
172
  }
173
173
  }
174
174
  }
@@ -296,13 +296,13 @@ const Y = (o) => {
296
296
  marginRight: -2
297
297
  }
298
298
  }, ...O]
299
- }), R = /* @__PURE__ */ b.forwardRef(function(a, n) {
300
- const r = b.useContext(I), s = b.useContext(h), p = H(r, a), u = A({
299
+ }), R = /* @__PURE__ */ g.forwardRef(function(a, n) {
300
+ const r = g.useContext(I), s = g.useContext(h), p = H(r, a), u = A({
301
301
  props: p,
302
302
  name: "MuiButton"
303
303
  }), {
304
- children: f,
305
- color: y = "primary",
304
+ children: y,
305
+ color: f = "primary",
306
306
  component: S = "button",
307
307
  className: N,
308
308
  disabled: z = !1,
@@ -312,25 +312,25 @@ const Y = (o) => {
312
312
  focusVisibleClassName: T,
313
313
  fullWidth: P = !1,
314
314
  size: W = "medium",
315
- startIcon: m,
316
- type: $,
315
+ startIcon: $,
316
+ type: m,
317
317
  variant: M = "text",
318
318
  ...V
319
319
  } = u, x = {
320
320
  ...u,
321
- color: y,
321
+ color: f,
322
322
  component: S,
323
323
  disabled: z,
324
324
  disableElevation: k,
325
325
  disableFocusRipple: B,
326
326
  fullWidth: P,
327
327
  size: W,
328
- type: $,
328
+ type: m,
329
329
  variant: M
330
- }, v = Y(x), L = m && /* @__PURE__ */ d(oo, {
330
+ }, v = Y(x), L = $ && /* @__PURE__ */ d(oo, {
331
331
  className: v.startIcon,
332
332
  ownerState: x,
333
- children: m
333
+ children: $
334
334
  }), j = C && /* @__PURE__ */ d(to, {
335
335
  className: v.endIcon,
336
336
  ownerState: x,
@@ -344,10 +344,10 @@ const Y = (o) => {
344
344
  focusRipple: !B,
345
345
  focusVisibleClassName: w(v.focusVisible, T),
346
346
  ref: n,
347
- type: $,
347
+ type: m,
348
348
  ...V,
349
349
  classes: v,
350
- children: [L, f, j]
350
+ children: [L, y, j]
351
351
  });
352
352
  });
353
353
  process.env.NODE_ENV !== "production" && (R.propTypes = {
@@ -453,10 +453,6 @@ const E = c(R)`
453
453
  justify-content: center;
454
454
  align-items: center;
455
455
  }
456
-
457
- p {
458
- margin: 0;
459
- }
460
456
  `, ao = c(E)`
461
457
  background-color: ${i.colors.green};
462
458
  border-radius: 0;
@@ -468,11 +464,11 @@ const E = c(R)`
468
464
  font-weight: 400;
469
465
  padding: 0.75rem 2rem;
470
466
  font-size: 1rem;
471
- box-shadow: 0px 0px 2px 1px rgba(100, 100, 100, 0.63);
467
+ box-shadow: ${i.boxShadow.gray63};
472
468
  &:hover,
473
469
  :focus {
474
470
  background-color: ${i.colors.darkGreen};
475
- box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.63);
471
+ box-shadow: ${i.boxShadow.black63};
476
472
  }
477
473
  &:disabled {
478
474
  background-color: ${i.colors.darkGreen};
@@ -481,7 +477,7 @@ const E = c(R)`
481
477
  color: ${i.colors.black};
482
478
  border: 3px solid ${i.colors.blue};
483
479
  padding: 0.5rem 2rem;
484
- `, po = ({ variant: o = 1, children: a, ...n }) => o === 2 ? /* @__PURE__ */ d(no, { ...n, children: /* @__PURE__ */ d("p", { children: a }) }) : /* @__PURE__ */ d(ao, { ...n, children: /* @__PURE__ */ d("p", { children: a }) });
480
+ `, po = ({ variant: o = 1, children: a, ...n }) => o === 2 ? /* @__PURE__ */ d(no, { ...n, children: /* @__PURE__ */ d("span", { children: a }) }) : /* @__PURE__ */ d(ao, { ...n, children: /* @__PURE__ */ d("span", { children: a }) });
485
481
  export {
486
482
  po as Button,
487
483
  po as default
@@ -1 +1 @@
1
- export { default } from './Divider';
1
+ export { default, type DividerProps } from './Divider';
package/base/Flex/Flex.js CHANGED
@@ -1,9 +1,9 @@
1
- import { jsx as m } from "react/jsx-runtime";
1
+ import { jsx as d } from "react/jsx-runtime";
2
2
  import { n as x, i as p } from "../../.chunks/emotion-styled.browser.esm.js";
3
3
  const w = x("div", {
4
4
  shouldForwardProp: (t) => p(t) && typeof t == "string" && t !== "wrap"
5
5
  })(
6
- ({ column: t, alignItems: r, justifyContent: n, center: e, wrap: s, full: o, width: l, height: f, styles: d, padding: a, gap: i }) => ({
6
+ ({ column: t, alignItems: r, justifyContent: n, center: e, wrap: s, full: o, width: l, height: f, styles: m, padding: a, gap: i }) => ({
7
7
  display: "flex",
8
8
  flexDirection: t ? "column" : "row",
9
9
  flexWrap: s ? "wrap" : "nowrap",
@@ -13,9 +13,10 @@ const w = x("div", {
13
13
  height: f ?? (o ? "100%" : "auto"),
14
14
  gap: i ? `${i}rem` : 0,
15
15
  padding: a ? `${a}rem` : 0,
16
- ...d
16
+ fontFamily: "Roboto, sans-serif",
17
+ ...m
17
18
  })
18
- ), h = ({ children: t, ...r }) => /* @__PURE__ */ m(w, { ...r, children: t });
19
+ ), y = ({ children: t, ...r }) => /* @__PURE__ */ d(w, { ...r, children: t });
19
20
  export {
20
- h as default
21
+ y as default
21
22
  };
@@ -1 +1 @@
1
- export { default } from './Flex';
1
+ export { default, type FlexProps } from './Flex';
@@ -1 +1 @@
1
- export { default } from './Grid';
1
+ export { default, type GridProps } from './Grid';