jcicl 0.0.345 → 1.0.1

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 (25) hide show
  1. package/.chunks/AppHeader.js +222 -0
  2. package/.chunks/ButtonBase.js +1 -1
  3. package/.chunks/Portal.js +1 -1
  4. package/.chunks/TransitionGroupContext.js +2 -2
  5. package/AppContainer/AppContainer.js +161 -154
  6. package/AppHeader/AppHeader.js +11 -219
  7. package/AppHeader/index.js +2 -2
  8. package/Button/Button.js +76 -67
  9. package/DefaultTemplate/DefaultTemplate.js +93 -98
  10. package/LabeledDropdown/LabeledDropdown.js +67 -67
  11. package/LabeledInput/LabeledInput.js +15 -13
  12. package/LabeledTextArea/LabeledTextArea.js +5 -5
  13. package/Nav/Nav.d.ts +5 -0
  14. package/Nav/Nav.js +390 -89
  15. package/README.md +106 -106
  16. package/Search/Search.js +29 -27
  17. package/Table/Table.js +311 -250
  18. package/ThemeContext.d.ts +3 -0
  19. package/ThemeContext.js +10 -0
  20. package/index.js +5 -5
  21. package/package.json +2 -1
  22. package/theme.d.ts +79 -1
  23. package/theme.js +52 -10
  24. package/themeUtils.d.ts +35 -0
  25. package/themeUtils.js +88 -0
package/README.md CHANGED
@@ -1,106 +1,106 @@
1
- # Welcome to the Johnson County Component Library!
2
-
3
- ## Quick Start
4
-
5
- ### Runtime Enviromnent
6
-
7
- 1. Please download and install [NVM for Windows](https://github.com/coreybutler/nvm-windows?tab=readme-ov-file)
8
- 2. `nvm install 22.11.0`
9
- 3. `nvm use 22`
10
-
11
- ### Usage
12
-
13
- `npm install jcicl@latest`
14
-
15
- ```js
16
- import Button, { ButtonProps } from 'jcicl/Button';
17
- import Nav, { NavProps } from 'jcicl/Nav';
18
-
19
- const Component: React.FC<ButtonProps> = ({ ...buttonProps }) => <Button {...buttonProps}>Johnson County Button</Button>;
20
- ```
21
-
22
- ### Adding the fonts and scrollbar styles
23
-
24
- In your project entry point (most likely `main.tsx`), add:
25
-
26
- ```js
27
- import '@fontsource/roboto/300.css';
28
- import '@fontsource/roboto/400.css';
29
- import '@fontsource/roboto/500.css';
30
- import '@fontsource/roboto/700.css';
31
- import '@fontsource/material-icons';
32
- import 'overlayscrollbars/overlayscrollbars.css';
33
- ```
34
-
35
- Alternatively, add to project root `index.html` `<head />`:
36
-
37
- ```html
38
- <link rel="preconnect" href="https://fonts.googleapis.com" />
39
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
40
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
41
- ```
42
-
43
- #### Viewing Storybook Documentation
44
-
45
- We are using [Storybook](https://storybook.js.org/docs/get-started/frameworks/react-vite?renderer=react) to document our component library
46
-
47
- Please use `npm run storybook` or `npm start` from the root directory to start the storybook application. You can see helpful documentation links under the `Configure your project` section of the Storybook application.
48
-
49
- ## Development
50
-
51
- ### Getting started
52
-
53
- [Please ensure your react development environment is set up](https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_wiki/wikis/Business-Solutions-Delivery.wiki?wikiVersion=GBwikiMaster&pagePath=%2FSetting%20Up%20React&pageId=219).
54
-
55
- From the root project directory, please run `npm install`
56
-
57
- ### Dependencies
58
-
59
- For this component library, we are extending [Material UI](https://mui.com/material-ui/getting-started/) and customizing with [Emotion/Styled](https://emotion.sh/docs/styled)
60
-
61
- ### Components Directory Structure
62
-
63
- In each components folder, you should see a `[Component].stories.tsx` file. You can copy the established pattern to create stories for new components, or customize as you please according to the above documentation
64
-
65
- #### Base
66
-
67
- Base components are intended to be the foundational building blocks of our web pages here at Johnson County
68
-
69
- #### Composite
70
-
71
- Composite components are intended to be reusable chunks of HTML built from base components and complimentary TSX (TypeScript XML)
72
-
73
- #### Superomposite
74
-
75
- Composite with a higher level of complexity
76
-
77
- #### Templates
78
-
79
- Templates are intended to render the HTML for predefined page layouts comprised of composite components, base components, and complimentary TSX
80
-
81
- #### **All of the above component types are inteded to be importable and reusable throughout the suite of Johnson County web applications** 😊
82
-
83
- ### Process
84
-
85
- 1. Add or update any components you wish. For new components, please create the associated `[NewComponent].stories.tsx` file to allow for documentation. In `.storybook/main.ts`, we are using the default string matching pattern to automatically index `*.stories.*` files 😊
86
- 2. Export any newly created components in the relevant index files: `(base/(super)composite/templates)/[NewComponent]/index.ts` and `components/index.ts`.
87
- 3. Export any newly created types for the component from `(base/(super)composite/templates)/[NewComponent]/index.ts`
88
- 4. Publish the library and update relevant project dependencies
89
-
90
- ### Publishing the library
91
-
92
- The library will automatically publish a new minor version on merges to master. If you need to manually publish a new version:
93
-
94
- `npm run bp`
95
-
96
- - Creates a new minor version (`0.0.x`), builds, and publishes the library to the npm registry
97
-
98
- `npm run bpMinor` for minor versions (`0.x.0`), and `npm run bpMajor` for major versions (`x.0.0`)
99
-
100
- For more details on scripting commands, please see the [npm CLI documentation](https://docs.npmjs.com/cli/v9/commands)
101
-
102
- ### Deploying storybook
103
-
104
- TODO: Automate
105
-
106
- Build the library with `npm run storybook`, then copy all of the files in `storybook-static` into `windu\E:\ComponentLibrary`
1
+ # Welcome to the Johnson County Component Library!
2
+
3
+ ## Quick Start
4
+
5
+ ### Runtime Enviromnent
6
+
7
+ 1. Please download and install [NVM for Windows](https://github.com/coreybutler/nvm-windows?tab=readme-ov-file)
8
+ 2. `nvm install 22.11.0`
9
+ 3. `nvm use 22`
10
+
11
+ ### Usage
12
+
13
+ `npm install jcicl@latest`
14
+
15
+ ```js
16
+ import Button, { ButtonProps } from 'jcicl/Button';
17
+ import Nav, { NavProps } from 'jcicl/Nav';
18
+
19
+ const Component: React.FC<ButtonProps> = ({ ...buttonProps }) => <Button {...buttonProps}>Johnson County Button</Button>;
20
+ ```
21
+
22
+ ### Adding the fonts and scrollbar styles
23
+
24
+ In your project entry point (most likely `main.tsx`), add:
25
+
26
+ ```js
27
+ import '@fontsource/roboto/300.css';
28
+ import '@fontsource/roboto/400.css';
29
+ import '@fontsource/roboto/500.css';
30
+ import '@fontsource/roboto/700.css';
31
+ import '@fontsource/material-icons';
32
+ import 'overlayscrollbars/overlayscrollbars.css';
33
+ ```
34
+
35
+ Alternatively, add to project root `index.html` `<head />`:
36
+
37
+ ```html
38
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
39
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
40
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
41
+ ```
42
+
43
+ #### Viewing Storybook Documentation
44
+
45
+ We are using [Storybook](https://storybook.js.org/docs/get-started/frameworks/react-vite?renderer=react) to document our component library
46
+
47
+ Please use `npm run storybook` or `npm start` from the root directory to start the storybook application. You can see helpful documentation links under the `Configure your project` section of the Storybook application.
48
+
49
+ ## Development
50
+
51
+ ### Getting started
52
+
53
+ [Please ensure your react development environment is set up](https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_wiki/wikis/Business-Solutions-Delivery.wiki?wikiVersion=GBwikiMaster&pagePath=%2FSetting%20Up%20React&pageId=219).
54
+
55
+ From the root project directory, please run `npm install`
56
+
57
+ ### Dependencies
58
+
59
+ For this component library, we are extending [Material UI](https://mui.com/material-ui/getting-started/) and customizing with [Emotion/Styled](https://emotion.sh/docs/styled)
60
+
61
+ ### Components Directory Structure
62
+
63
+ In each components folder, you should see a `[Component].stories.tsx` file. You can copy the established pattern to create stories for new components, or customize as you please according to the above documentation
64
+
65
+ #### Base
66
+
67
+ Base components are intended to be the foundational building blocks of our web pages here at Johnson County
68
+
69
+ #### Composite
70
+
71
+ Composite components are intended to be reusable chunks of HTML built from base components and complimentary TSX (TypeScript XML)
72
+
73
+ #### Superomposite
74
+
75
+ Composite with a higher level of complexity
76
+
77
+ #### Templates
78
+
79
+ Templates are intended to render the HTML for predefined page layouts comprised of composite components, base components, and complimentary TSX
80
+
81
+ #### **All of the above component types are inteded to be importable and reusable throughout the suite of Johnson County web applications** 😊
82
+
83
+ ### Process
84
+
85
+ 1. Add or update any components you wish. For new components, please create the associated `[NewComponent].stories.tsx` file to allow for documentation. In `.storybook/main.ts`, we are using the default string matching pattern to automatically index `*.stories.*` files 😊
86
+ 2. Export any newly created components in the relevant index files: `(base/(super)composite/templates)/[NewComponent]/index.ts` and `components/index.ts`.
87
+ 3. Export any newly created types for the component from `(base/(super)composite/templates)/[NewComponent]/index.ts`
88
+ 4. Publish the library and update relevant project dependencies
89
+
90
+ ### Publishing the library
91
+
92
+ The library will automatically publish a new minor version on merges to master. If you need to manually publish a new version:
93
+
94
+ `npm run bp`
95
+
96
+ - Creates a new minor version (`0.0.x`), builds, and publishes the library to the npm registry
97
+
98
+ `npm run bpMinor` for minor versions (`0.x.0`), and `npm run bpMajor` for major versions (`x.0.0`)
99
+
100
+ For more details on scripting commands, please see the [npm CLI documentation](https://docs.npmjs.com/cli/v9/commands)
101
+
102
+ ### Deploying storybook
103
+
104
+ TODO: Automate
105
+
106
+ Build the library with `npm run storybook`, then copy all of the files in `storybook-static` into `windu\E:\ComponentLibrary`
package/Search/Search.js CHANGED
@@ -1,17 +1,17 @@
1
- import { jsx as r, jsxs as v } from "react/jsx-runtime";
1
+ import { jsx as o, jsxs as v } from "react/jsx-runtime";
2
2
  import { useState as S } from "react";
3
3
  import { n as s } from "../.chunks/emotion-styled.browser.esm.js";
4
4
  import { c as l } from "../.chunks/emotion-react.browser.esm.js";
5
5
  import e from "../theme.js";
6
- import z from "../Icon/Icon.js";
6
+ import y from "../Icon/Icon.js";
7
7
  import { Button as p } from "../Button/Button.js";
8
8
  import { c as m } from "../.chunks/createSvgIcon.js";
9
- import { T as y } from "../.chunks/TextField.js";
10
- const F = m(/* @__PURE__ */ r("path", {
9
+ import { T as z } from "../.chunks/TextField.js";
10
+ const F = m(/* @__PURE__ */ o("path", {
11
11
  d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
12
- }), "Search"), j = m(/* @__PURE__ */ r("path", {
12
+ }), "Search"), C = m(/* @__PURE__ */ o("path", {
13
13
  d: "M10 18h4v-2h-4zM3 6v2h18V6zm3 7h12v-2H6z"
14
- }), "FilterList"), k = s("div")(() => ({
14
+ }), "FilterList"), j = ["borderColor", "borderFocusColor", "shadowTertiary"], k = s("div")(() => ({
15
15
  ...l`
16
16
  position: relative;
17
17
  width: 100%;
@@ -19,11 +19,13 @@ const F = m(/* @__PURE__ */ r("path", {
19
19
  flex-direction: column;
20
20
  align-items: center;
21
21
  `
22
- })), C = s(y)(({ borderColor: o, borderFocusColor: i, shadowTertiary: a }) => ({
22
+ })), I = s(z, {
23
+ shouldForwardProp: (r) => !j.includes(r)
24
+ })(({ borderColor: r, borderFocusColor: i, shadowTertiary: a }) => ({
23
25
  backgroundColor: e.colors.white,
24
26
  borderRadius: "1rem",
25
27
  height: "2rem",
26
- border: `1px solid ${o}`,
28
+ border: `1px solid ${r}`,
27
29
  transition: "313ms all ease-out",
28
30
  zIndex: 1327,
29
31
  ".MuiInputBase-root": {
@@ -74,7 +76,7 @@ const F = m(/* @__PURE__ */ r("path", {
74
76
  boxShadow: a
75
77
  },
76
78
  "&:focus-visible": {
77
- borderColor: o,
79
+ borderColor: r,
78
80
  borderWidth: "2px"
79
81
  },
80
82
  fieldset: {
@@ -91,7 +93,7 @@ const F = m(/* @__PURE__ */ r("path", {
91
93
  padding: "2px"
92
94
  }
93
95
  }
94
- })), I = s("div")(({ open: o }) => ({
96
+ })), M = s("div")(({ open: r }) => ({
95
97
  ...l`
96
98
  box-sizing: border-box;
97
99
  position: absolute;
@@ -103,10 +105,10 @@ const F = m(/* @__PURE__ */ r("path", {
103
105
  gap: 1rem;
104
106
  background-color: ${e.colors.white};
105
107
  box-shadow: ${e.boxShadows.midnight};
106
- padding: ${o ? "2rem 1rem 1rem 1rem" : 0};
108
+ padding: ${r ? "2rem 1rem 1rem 1rem" : 0};
107
109
  transition: 313ms all ease-in-out;
108
110
  display: grid;
109
- grid-template-rows: ${o ? "1fr" : "0fr"};
111
+ grid-template-rows: ${r ? "1fr" : "0fr"};
110
112
 
111
113
  .jcFiltersWrapper {
112
114
  overflow: hidden;
@@ -116,7 +118,7 @@ const F = m(/* @__PURE__ */ r("path", {
116
118
  width: calc(100% - 6px);
117
119
  }
118
120
  `
119
- })), M = s("div")(() => ({
121
+ })), R = s("div")(() => ({
120
122
  ...l`
121
123
  display: grid;
122
124
  grid-template-columns: repeat(3, 1fr);
@@ -140,8 +142,8 @@ const F = m(/* @__PURE__ */ r("path", {
140
142
  justify-self: center;
141
143
  }
142
144
  `
143
- })), P = ({
144
- borderColor: o = e.colors.green,
145
+ })), D = ({
146
+ borderColor: r = e.colors.green,
145
147
  // border primary
146
148
  borderFocusColor: i = e.colors.darkGreen,
147
149
  // icon primary
@@ -152,14 +154,14 @@ const F = m(/* @__PURE__ */ r("path", {
152
154
  }) => {
153
155
  const [c, g] = S(!1), u = (n) => {
154
156
  n.preventDefault(), n.key === "Enter" && d && d();
155
- }, x = { borderColor: o, borderFocusColor: i, shadowTertiary: a, ...h }, b = t && t.length > 0;
157
+ }, x = { borderColor: r, borderFocusColor: i, shadowTertiary: a, ...h }, b = t && t.length > 0;
156
158
  return /* @__PURE__ */ v(k, { className: "jcInputContainer", children: [
157
- /* @__PURE__ */ r(
158
- C,
159
+ /* @__PURE__ */ o(
160
+ I,
159
161
  {
160
162
  slotProps: {
161
163
  input: {
162
- startAdornment: /* @__PURE__ */ r(
164
+ startAdornment: /* @__PURE__ */ o(
163
165
  p,
164
166
  {
165
167
  variant: "icon",
@@ -168,15 +170,15 @@ const F = m(/* @__PURE__ */ r("path", {
168
170
  color: i,
169
171
  highlightColor: "transparent",
170
172
  className: "searchIcon",
171
- children: /* @__PURE__ */ r(F, {})
173
+ children: /* @__PURE__ */ o(F, {})
172
174
  }
173
175
  ),
174
- endAdornment: b && /* @__PURE__ */ r(
175
- z,
176
+ endAdornment: b && /* @__PURE__ */ o(
177
+ y,
176
178
  {
177
179
  onClick: () => g(!c),
178
- icon: /* @__PURE__ */ r(j, {}),
179
- backgroundColor: o,
180
+ icon: /* @__PURE__ */ o(C, {}),
181
+ backgroundColor: r,
180
182
  iconColor: e.colors.white,
181
183
  size: 28,
182
184
  padding: 3
@@ -189,10 +191,10 @@ const F = m(/* @__PURE__ */ r("path", {
189
191
  onKeyUp: u
190
192
  }
191
193
  ),
192
- /* @__PURE__ */ r(I, { open: c, className: "jcFiltersContainer", children: /* @__PURE__ */ r(M, { className: "jcFiltersWrapper", children: t == null ? void 0 : t.map(({ name: n, onClick: f, active: w }) => /* @__PURE__ */ r(p, { className: "jcFiltersButton", variant: "filter", onClick: f, active: w, children: n }, n)) }) })
194
+ /* @__PURE__ */ o(M, { open: c, className: "jcFiltersContainer", children: /* @__PURE__ */ o(R, { className: "jcFiltersWrapper", children: t == null ? void 0 : t.map(({ name: n, onClick: f, active: w }) => /* @__PURE__ */ o(p, { className: "jcFiltersButton", variant: "filter", onClick: f, active: w, children: n }, n)) }) })
193
195
  ] });
194
196
  };
195
197
  export {
196
- P as Search,
197
- P as default
198
+ D as Search,
199
+ D as default
198
200
  };