jcicl 0.0.341 → 0.0.345
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.
- package/.chunks/createLucideIcon.js +94 -0
- package/ContactCard/ContactCard.d.ts +10 -0
- package/ContactCard/ContactCard.js +97 -0
- package/ContactCard/index.d.ts +1 -0
- package/ContactCard/index.js +4 -0
- package/DetailItemWithIcon/DetailItemWithIcon.d.ts +10 -0
- package/DetailItemWithIcon/DetailItemWithIcon.js +31 -0
- package/DetailItemWithIcon/index.d.ts +1 -0
- package/DetailItemWithIcon/index.js +4 -0
- package/DetailPageComponents/DetailPageComponents.d.ts +24 -0
- package/DetailPageComponents/DetailPageComponents.js +127 -0
- package/DetailPageComponents/index.d.ts +1 -0
- package/DetailPageComponents/index.js +8 -0
- package/EditableDetailItemWithIcon/EditableDetailItemWithIcon.d.ts +15 -0
- package/EditableDetailItemWithIcon/EditableDetailItemWithIcon.js +125 -0
- package/EditableDetailItemWithIcon/index.d.ts +1 -0
- package/EditableDetailItemWithIcon/index.js +4 -0
- package/Memo/Memo.d.ts +8 -0
- package/Memo/Memo.js +44 -0
- package/Memo/index.d.ts +1 -0
- package/Memo/index.js +4 -0
- package/README.md +106 -106
- package/SquareIcon/SquareIcon.d.ts +10 -0
- package/SquareIcon/SquareIcon.js +27 -0
- package/SquareIcon/index.d.ts +1 -0
- package/SquareIcon/index.js +4 -0
- package/SquareIconButton/SquareIconButton.d.ts +13 -0
- package/SquareIconButton/SquareIconButton.js +43 -0
- package/SquareIconButton/index.d.ts +1 -0
- package/SquareIconButton/index.js +4 -0
- package/Table/Table.d.ts +2 -2
- package/Table/Table.js +399 -501
- package/package.json +1 -1
- package/utils.d.ts +7 -0
- package/utils.js +8 -3
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`
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ForwardRefExoticComponent } from 'react';
|
|
2
|
+
import { LucideProps } from 'lucide-react';
|
|
3
|
+
export interface SquareIconProps {
|
|
4
|
+
icon: ForwardRefExoticComponent<Omit<LucideProps, 'ref'>>;
|
|
5
|
+
iconSize?: number;
|
|
6
|
+
color?: string;
|
|
7
|
+
backgroundColor?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const SquareIcon: React.FC<SquareIconProps>;
|
|
10
|
+
export default SquareIcon;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { n as i } from "../.chunks/emotion-styled.browser.esm.js";
|
|
3
|
+
import { c as n } from "../.chunks/emotion-react.browser.esm.js";
|
|
4
|
+
import s from "../theme.js";
|
|
5
|
+
const l = i("div")(
|
|
6
|
+
({ size: r, backgroundColor: o, color: e }) => ({
|
|
7
|
+
...n`
|
|
8
|
+
flex-shrink: 0;
|
|
9
|
+
width: ${r}px;
|
|
10
|
+
height: ${r}px;
|
|
11
|
+
background-color: ${o};
|
|
12
|
+
border-radius: 17%;
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
color: ${e};
|
|
17
|
+
`
|
|
18
|
+
})
|
|
19
|
+
), f = ({
|
|
20
|
+
icon: r,
|
|
21
|
+
iconSize: o = 20,
|
|
22
|
+
color: e = s.colors.white,
|
|
23
|
+
backgroundColor: c = s.colors.green
|
|
24
|
+
}) => /* @__PURE__ */ t(l, { size: o * 2, backgroundColor: c, color: e, children: /* @__PURE__ */ t(r, { size: o }) });
|
|
25
|
+
export {
|
|
26
|
+
f as default
|
|
27
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default, type SquareIconProps } from './SquareIcon';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ForwardRefExoticComponent } from 'react';
|
|
2
|
+
import { LucideProps } from 'lucide-react';
|
|
3
|
+
export type SquareIconButtonProps = SquareIconWrapperProps & {
|
|
4
|
+
icon: ForwardRefExoticComponent<Omit<LucideProps, 'ref'>>;
|
|
5
|
+
onClick: () => void;
|
|
6
|
+
};
|
|
7
|
+
interface SquareIconWrapperProps {
|
|
8
|
+
backgroundColor?: string;
|
|
9
|
+
color?: string;
|
|
10
|
+
size?: number;
|
|
11
|
+
}
|
|
12
|
+
declare const SquareIconButton: React.FC<SquareIconButtonProps>;
|
|
13
|
+
export default SquareIconButton;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { n as c } from "../.chunks/emotion-styled.browser.esm.js";
|
|
3
|
+
import { c as l } from "../.chunks/emotion-react.browser.esm.js";
|
|
4
|
+
import n from "../theme.js";
|
|
5
|
+
const a = c("button")(({ backgroundColor: r, color: e, size: o }) => ({
|
|
6
|
+
...l`
|
|
7
|
+
width: ${o}px;
|
|
8
|
+
height: ${o}px;
|
|
9
|
+
background-color: ${r};
|
|
10
|
+
color: ${e};
|
|
11
|
+
border-radius: 17%;
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
transition: all 0.21s ease;
|
|
17
|
+
transform: scale(1);
|
|
18
|
+
border: none;
|
|
19
|
+
outline: none;
|
|
20
|
+
|
|
21
|
+
&:hover,
|
|
22
|
+
&:focus,
|
|
23
|
+
&:focus-visible {
|
|
24
|
+
border: none;
|
|
25
|
+
outline: none;
|
|
26
|
+
filter: brightness(92%);
|
|
27
|
+
transform: scale(1.1);
|
|
28
|
+
|
|
29
|
+
.lucide {
|
|
30
|
+
filter: brightness(200%) !important;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
`
|
|
34
|
+
})), d = ({
|
|
35
|
+
color: r = n.colors.white,
|
|
36
|
+
backgroundColor: e = n.colors.green,
|
|
37
|
+
size: o = 20,
|
|
38
|
+
onClick: s,
|
|
39
|
+
icon: i
|
|
40
|
+
}) => /* @__PURE__ */ t(a, { backgroundColor: e, color: r, size: o * 2, onClick: s, children: /* @__PURE__ */ t(i, { size: o }) });
|
|
41
|
+
export {
|
|
42
|
+
d as default
|
|
43
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default, type SquareIconButtonProps } from './SquareIconButton';
|
package/Table/Table.d.ts
CHANGED