@j2-health/design-system 0.3.0 → 0.3.2
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.
|
@@ -17,12 +17,24 @@ const FiltersForm = ({
|
|
|
17
17
|
initialValues,
|
|
18
18
|
maxFiltersPerField = 5
|
|
19
19
|
}) => {
|
|
20
|
-
const {
|
|
20
|
+
const {
|
|
21
|
+
dispatch,
|
|
22
|
+
filterGroups,
|
|
23
|
+
newFilter,
|
|
24
|
+
isNewFilterInputOpen,
|
|
25
|
+
isValid,
|
|
26
|
+
isEmpty
|
|
27
|
+
} = useFiltersForm.useFiltersForm({
|
|
21
28
|
initialValues
|
|
22
29
|
});
|
|
23
30
|
const handleSubmit = () => {
|
|
31
|
+
var _a;
|
|
32
|
+
const pending = newFilter && (((_a = newFilter.errors) == null ? void 0 : _a.length) ?? 0) === 0 && filterHelpers.isFilter(newFilter) && !filterHelpers.isEmptyFilter(newFilter) ? [newFilter] : [];
|
|
24
33
|
onSubmit({
|
|
25
|
-
filters:
|
|
34
|
+
filters: [
|
|
35
|
+
...filterGroups.flatMap((group) => group.filters).filter((filter) => filterHelpers.isFilter(filter)).filter((filter) => !filterHelpers.isEmptyFilter(filter)),
|
|
36
|
+
...pending
|
|
37
|
+
]
|
|
26
38
|
});
|
|
27
39
|
};
|
|
28
40
|
const availableFilterConfigs = React.useMemo(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FiltersForm.cjs","sources":["../../../../src/components/filterform/FiltersForm.tsx"],"sourcesContent":["import { Button } from '../button'\nimport { PlusCircleIcon, TrashIcon } from '@phosphor-icons/react'\nimport s from './FiltersForm.module.css'\nimport cx from 'classnames'\nimport { FilterForm, FilterConfig } from '.'\nimport { isEmptyFilter, isFilter } from './filterHelpers'\nimport { useMemo } from 'react'\nimport { FilterInput } from './FilterInput'\nimport { useFiltersForm } from './useFiltersForm'\nimport { FilterGroup } from './FilterGroup'\n\ntype Props = {\n filterConfigs: FilterConfig[]\n title?: string\n onSubmit: (values: FilterForm) => void\n initialValues?: FilterForm\n maxFiltersPerField?: number\n}\n\nexport const FiltersForm = ({\n title,\n filterConfigs,\n onSubmit,\n initialValues,\n maxFiltersPerField = 5,\n}: Props) => {\n const { dispatch, filterGroups, isNewFilterInputOpen, isValid, isEmpty } =\n useFiltersForm({\n initialValues,\n })\n\n const handleSubmit = () => {\n onSubmit({\n filters: filterGroups\n .flatMap((group) => group.filters)\n .filter((filter) => isFilter(filter))\n .filter((filter) => !isEmptyFilter(filter)),\n })\n }\n\n const availableFilterConfigs = useMemo(() => {\n const filterFieldCounts = filterGroups.reduce(\n (acc, filterGroup) => {\n acc[filterGroup.field] = filterGroup.filters.length\n return acc\n },\n {} as Record<string, number>\n )\n\n return filterConfigs.map((config) => ({\n ...config,\n disabled: (filterFieldCounts[config.field] || 0) >= maxFiltersPerField,\n }))\n }, [\n filterConfigs,\n filterGroups.map((g) => `${g.field}-${g.filters.length}`).join(','),\n maxFiltersPerField,\n ])\n\n return (\n <div className={cx(s.j2FilterForm)}>\n <div\n className={cx(\n s.filterFormFieldsContainer,\n 'flex flex-col gap-4',\n 'p-4 mb-6'\n )}\n >\n {title && <span className={s.filterFormTitle}>{title}</span>}\n {filterGroups.map((filterGroup, groupIndex) => (\n <div\n key={`filter-group-${filterGroup.field}-${filterGroup.filters.length}`}\n className={cx('flex gap-3', {\n 'items-center': filterGroup.filters.length === 1,\n })}\n >\n {groupIndex > 0 ? (\n <span\n className={cx(s.filterFormConjunction, {\n 'pt-4': filterGroup.filters.length > 1,\n })}\n >\n and\n </span>\n ) : null}\n <FilterGroup\n filterGroup={filterGroup}\n groupIndex={groupIndex}\n filterConfigs={availableFilterConfigs}\n className=\"grow\"\n onChange={(filter, filterIndex) => {\n dispatch({\n type: 'changeFilter',\n payload: { groupIndex, filterIndex, filter },\n })\n }}\n onDone={(filter, filterIndex) => {\n dispatch({\n type: 'updateFilter',\n payload: { groupIndex, filterIndex, filter },\n })\n }}\n onRemove={(filterIndex) => {\n dispatch({\n type: 'removeFilter',\n payload: { groupIndex, filterIndex },\n })\n }}\n />\n </div>\n ))}\n {isNewFilterInputOpen && (\n <div className={cx('flex gap-3 items-center')}>\n {filterGroups.length > 0 ? (\n <span className={cx(s.filterFormConjunction)}>and</span>\n ) : null}\n <div className={cx('flex items-center justify-between', 'grow')}>\n <FilterInput\n key={JSON.stringify(filterGroups)}\n filterConfigs={availableFilterConfigs}\n className=\"flex-1\"\n onChange={(filter) => {\n dispatch({ type: 'changeNewFilter', payload: filter })\n }}\n onBlur={(filter) => {\n dispatch({ type: 'addNewFilter', payload: filter })\n }}\n />\n <div className=\"mr-3\">\n {filterGroups.length > 0 ? (\n <Button\n type=\"text\"\n icon={<TrashIcon />}\n onClick={() => dispatch({ type: 'removeNewFilter' })}\n />\n ) : (\n <div className=\"w-8\" />\n )}\n </div>\n </div>\n </div>\n )}\n <div className=\"flex items-center\">\n <Button\n icon={<PlusCircleIcon />}\n onClick={() => dispatch({ type: 'openNewFilterInput' })}\n disabled={!isValid}\n >\n Add Rule\n </Button>\n <Button\n type=\"text\"\n onClick={() => {\n dispatch({\n type: 'clearAllFilters',\n })\n }}\n >\n Clear All Rules\n </Button>\n </div>\n </div>\n <div className=\"flex justify-end\">\n <Button\n onClick={handleSubmit}\n type=\"primary\"\n disabled={isEmpty ? false : !isValid}\n >\n Apply Filters\n </Button>\n </div>\n </div>\n )\n}\n"],"names":["useFiltersForm","isFilter","isEmptyFilter","useMemo","s","jsxs","jsx","FilterGroup","FilterInput","Button","TrashIcon","PlusCircleIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FiltersForm.cjs","sources":["../../../../src/components/filterform/FiltersForm.tsx"],"sourcesContent":["import { Button } from '../button'\nimport { PlusCircleIcon, TrashIcon } from '@phosphor-icons/react'\nimport s from './FiltersForm.module.css'\nimport cx from 'classnames'\nimport { FilterForm, FilterConfig } from '.'\nimport { isEmptyFilter, isFilter } from './filterHelpers'\nimport { useMemo } from 'react'\nimport { FilterInput } from './FilterInput'\nimport { useFiltersForm } from './useFiltersForm'\nimport { FilterGroup } from './FilterGroup'\n\ntype Props = {\n filterConfigs: FilterConfig[]\n title?: string\n onSubmit: (values: FilterForm) => void\n initialValues?: FilterForm\n maxFiltersPerField?: number\n}\n\nexport const FiltersForm = ({\n title,\n filterConfigs,\n onSubmit,\n initialValues,\n maxFiltersPerField = 5,\n}: Props) => {\n const {\n dispatch,\n filterGroups,\n newFilter,\n isNewFilterInputOpen,\n isValid,\n isEmpty,\n } = useFiltersForm({\n initialValues,\n })\n\n const handleSubmit = () => {\n // A rule still in the \"new rule\" input only joins `filterGroups` when\n // that input blurs. Clicking Apply does blur it, but the commit is not\n // guaranteed to have landed by the time this handler reads the groups\n // (the inputs defer their blur so a chip committed during it isn't\n // lost), so a user who types a value and clicks Apply straight away\n // would submit without the rule they just wrote. `newFilter` tracks\n // that input on every change, so include it here when it is complete;\n // once the blur commit lands it is cleared, so it is never counted twice.\n // `errors` lives on the form-side FormFilter, so it is read before\n // `isFilter` narrows to the public Filter type.\n const pending =\n newFilter &&\n (newFilter.errors?.length ?? 0) === 0 &&\n isFilter(newFilter) &&\n !isEmptyFilter(newFilter)\n ? [newFilter]\n : []\n onSubmit({\n filters: [\n ...filterGroups\n .flatMap((group) => group.filters)\n .filter((filter) => isFilter(filter))\n .filter((filter) => !isEmptyFilter(filter)),\n ...pending,\n ],\n })\n }\n\n const availableFilterConfigs = useMemo(() => {\n const filterFieldCounts = filterGroups.reduce(\n (acc, filterGroup) => {\n acc[filterGroup.field] = filterGroup.filters.length\n return acc\n },\n {} as Record<string, number>\n )\n\n return filterConfigs.map((config) => ({\n ...config,\n disabled: (filterFieldCounts[config.field] || 0) >= maxFiltersPerField,\n }))\n }, [\n filterConfigs,\n filterGroups.map((g) => `${g.field}-${g.filters.length}`).join(','),\n maxFiltersPerField,\n ])\n\n return (\n <div className={cx(s.j2FilterForm)}>\n <div\n className={cx(\n s.filterFormFieldsContainer,\n 'flex flex-col gap-4',\n 'p-4 mb-6'\n )}\n >\n {title && <span className={s.filterFormTitle}>{title}</span>}\n {filterGroups.map((filterGroup, groupIndex) => (\n <div\n key={`filter-group-${filterGroup.field}-${filterGroup.filters.length}`}\n className={cx('flex gap-3', {\n 'items-center': filterGroup.filters.length === 1,\n })}\n >\n {groupIndex > 0 ? (\n <span\n className={cx(s.filterFormConjunction, {\n 'pt-4': filterGroup.filters.length > 1,\n })}\n >\n and\n </span>\n ) : null}\n <FilterGroup\n filterGroup={filterGroup}\n groupIndex={groupIndex}\n filterConfigs={availableFilterConfigs}\n className=\"grow\"\n onChange={(filter, filterIndex) => {\n dispatch({\n type: 'changeFilter',\n payload: { groupIndex, filterIndex, filter },\n })\n }}\n onDone={(filter, filterIndex) => {\n dispatch({\n type: 'updateFilter',\n payload: { groupIndex, filterIndex, filter },\n })\n }}\n onRemove={(filterIndex) => {\n dispatch({\n type: 'removeFilter',\n payload: { groupIndex, filterIndex },\n })\n }}\n />\n </div>\n ))}\n {isNewFilterInputOpen && (\n <div className={cx('flex gap-3 items-center')}>\n {filterGroups.length > 0 ? (\n <span className={cx(s.filterFormConjunction)}>and</span>\n ) : null}\n <div className={cx('flex items-center justify-between', 'grow')}>\n <FilterInput\n key={JSON.stringify(filterGroups)}\n filterConfigs={availableFilterConfigs}\n className=\"flex-1\"\n onChange={(filter) => {\n dispatch({ type: 'changeNewFilter', payload: filter })\n }}\n onBlur={(filter) => {\n dispatch({ type: 'addNewFilter', payload: filter })\n }}\n />\n <div className=\"mr-3\">\n {filterGroups.length > 0 ? (\n <Button\n type=\"text\"\n icon={<TrashIcon />}\n onClick={() => dispatch({ type: 'removeNewFilter' })}\n />\n ) : (\n <div className=\"w-8\" />\n )}\n </div>\n </div>\n </div>\n )}\n <div className=\"flex items-center\">\n <Button\n icon={<PlusCircleIcon />}\n onClick={() => dispatch({ type: 'openNewFilterInput' })}\n disabled={!isValid}\n >\n Add Rule\n </Button>\n <Button\n type=\"text\"\n onClick={() => {\n dispatch({\n type: 'clearAllFilters',\n })\n }}\n >\n Clear All Rules\n </Button>\n </div>\n </div>\n <div className=\"flex justify-end\">\n <Button\n onClick={handleSubmit}\n type=\"primary\"\n disabled={isEmpty ? false : !isValid}\n >\n Apply Filters\n </Button>\n </div>\n </div>\n )\n}\n"],"names":["useFiltersForm","isFilter","isEmptyFilter","useMemo","s","jsxs","jsx","FilterGroup","FilterInput","Button","TrashIcon","PlusCircleIcon"],"mappings":"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"}
|
|
@@ -15,12 +15,24 @@ const FiltersForm = ({
|
|
|
15
15
|
initialValues,
|
|
16
16
|
maxFiltersPerField = 5
|
|
17
17
|
}) => {
|
|
18
|
-
const {
|
|
18
|
+
const {
|
|
19
|
+
dispatch,
|
|
20
|
+
filterGroups,
|
|
21
|
+
newFilter,
|
|
22
|
+
isNewFilterInputOpen,
|
|
23
|
+
isValid,
|
|
24
|
+
isEmpty
|
|
25
|
+
} = useFiltersForm({
|
|
19
26
|
initialValues
|
|
20
27
|
});
|
|
21
28
|
const handleSubmit = () => {
|
|
29
|
+
var _a;
|
|
30
|
+
const pending = newFilter && (((_a = newFilter.errors) == null ? void 0 : _a.length) ?? 0) === 0 && isFilter(newFilter) && !isEmptyFilter(newFilter) ? [newFilter] : [];
|
|
22
31
|
onSubmit({
|
|
23
|
-
filters:
|
|
32
|
+
filters: [
|
|
33
|
+
...filterGroups.flatMap((group) => group.filters).filter((filter) => isFilter(filter)).filter((filter) => !isEmptyFilter(filter)),
|
|
34
|
+
...pending
|
|
35
|
+
]
|
|
24
36
|
});
|
|
25
37
|
};
|
|
26
38
|
const availableFilterConfigs = useMemo(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FiltersForm.js","sources":["../../../../src/components/filterform/FiltersForm.tsx"],"sourcesContent":["import { Button } from '../button'\nimport { PlusCircleIcon, TrashIcon } from '@phosphor-icons/react'\nimport s from './FiltersForm.module.css'\nimport cx from 'classnames'\nimport { FilterForm, FilterConfig } from '.'\nimport { isEmptyFilter, isFilter } from './filterHelpers'\nimport { useMemo } from 'react'\nimport { FilterInput } from './FilterInput'\nimport { useFiltersForm } from './useFiltersForm'\nimport { FilterGroup } from './FilterGroup'\n\ntype Props = {\n filterConfigs: FilterConfig[]\n title?: string\n onSubmit: (values: FilterForm) => void\n initialValues?: FilterForm\n maxFiltersPerField?: number\n}\n\nexport const FiltersForm = ({\n title,\n filterConfigs,\n onSubmit,\n initialValues,\n maxFiltersPerField = 5,\n}: Props) => {\n const {
|
|
1
|
+
{"version":3,"file":"FiltersForm.js","sources":["../../../../src/components/filterform/FiltersForm.tsx"],"sourcesContent":["import { Button } from '../button'\nimport { PlusCircleIcon, TrashIcon } from '@phosphor-icons/react'\nimport s from './FiltersForm.module.css'\nimport cx from 'classnames'\nimport { FilterForm, FilterConfig } from '.'\nimport { isEmptyFilter, isFilter } from './filterHelpers'\nimport { useMemo } from 'react'\nimport { FilterInput } from './FilterInput'\nimport { useFiltersForm } from './useFiltersForm'\nimport { FilterGroup } from './FilterGroup'\n\ntype Props = {\n filterConfigs: FilterConfig[]\n title?: string\n onSubmit: (values: FilterForm) => void\n initialValues?: FilterForm\n maxFiltersPerField?: number\n}\n\nexport const FiltersForm = ({\n title,\n filterConfigs,\n onSubmit,\n initialValues,\n maxFiltersPerField = 5,\n}: Props) => {\n const {\n dispatch,\n filterGroups,\n newFilter,\n isNewFilterInputOpen,\n isValid,\n isEmpty,\n } = useFiltersForm({\n initialValues,\n })\n\n const handleSubmit = () => {\n // A rule still in the \"new rule\" input only joins `filterGroups` when\n // that input blurs. Clicking Apply does blur it, but the commit is not\n // guaranteed to have landed by the time this handler reads the groups\n // (the inputs defer their blur so a chip committed during it isn't\n // lost), so a user who types a value and clicks Apply straight away\n // would submit without the rule they just wrote. `newFilter` tracks\n // that input on every change, so include it here when it is complete;\n // once the blur commit lands it is cleared, so it is never counted twice.\n // `errors` lives on the form-side FormFilter, so it is read before\n // `isFilter` narrows to the public Filter type.\n const pending =\n newFilter &&\n (newFilter.errors?.length ?? 0) === 0 &&\n isFilter(newFilter) &&\n !isEmptyFilter(newFilter)\n ? [newFilter]\n : []\n onSubmit({\n filters: [\n ...filterGroups\n .flatMap((group) => group.filters)\n .filter((filter) => isFilter(filter))\n .filter((filter) => !isEmptyFilter(filter)),\n ...pending,\n ],\n })\n }\n\n const availableFilterConfigs = useMemo(() => {\n const filterFieldCounts = filterGroups.reduce(\n (acc, filterGroup) => {\n acc[filterGroup.field] = filterGroup.filters.length\n return acc\n },\n {} as Record<string, number>\n )\n\n return filterConfigs.map((config) => ({\n ...config,\n disabled: (filterFieldCounts[config.field] || 0) >= maxFiltersPerField,\n }))\n }, [\n filterConfigs,\n filterGroups.map((g) => `${g.field}-${g.filters.length}`).join(','),\n maxFiltersPerField,\n ])\n\n return (\n <div className={cx(s.j2FilterForm)}>\n <div\n className={cx(\n s.filterFormFieldsContainer,\n 'flex flex-col gap-4',\n 'p-4 mb-6'\n )}\n >\n {title && <span className={s.filterFormTitle}>{title}</span>}\n {filterGroups.map((filterGroup, groupIndex) => (\n <div\n key={`filter-group-${filterGroup.field}-${filterGroup.filters.length}`}\n className={cx('flex gap-3', {\n 'items-center': filterGroup.filters.length === 1,\n })}\n >\n {groupIndex > 0 ? (\n <span\n className={cx(s.filterFormConjunction, {\n 'pt-4': filterGroup.filters.length > 1,\n })}\n >\n and\n </span>\n ) : null}\n <FilterGroup\n filterGroup={filterGroup}\n groupIndex={groupIndex}\n filterConfigs={availableFilterConfigs}\n className=\"grow\"\n onChange={(filter, filterIndex) => {\n dispatch({\n type: 'changeFilter',\n payload: { groupIndex, filterIndex, filter },\n })\n }}\n onDone={(filter, filterIndex) => {\n dispatch({\n type: 'updateFilter',\n payload: { groupIndex, filterIndex, filter },\n })\n }}\n onRemove={(filterIndex) => {\n dispatch({\n type: 'removeFilter',\n payload: { groupIndex, filterIndex },\n })\n }}\n />\n </div>\n ))}\n {isNewFilterInputOpen && (\n <div className={cx('flex gap-3 items-center')}>\n {filterGroups.length > 0 ? (\n <span className={cx(s.filterFormConjunction)}>and</span>\n ) : null}\n <div className={cx('flex items-center justify-between', 'grow')}>\n <FilterInput\n key={JSON.stringify(filterGroups)}\n filterConfigs={availableFilterConfigs}\n className=\"flex-1\"\n onChange={(filter) => {\n dispatch({ type: 'changeNewFilter', payload: filter })\n }}\n onBlur={(filter) => {\n dispatch({ type: 'addNewFilter', payload: filter })\n }}\n />\n <div className=\"mr-3\">\n {filterGroups.length > 0 ? (\n <Button\n type=\"text\"\n icon={<TrashIcon />}\n onClick={() => dispatch({ type: 'removeNewFilter' })}\n />\n ) : (\n <div className=\"w-8\" />\n )}\n </div>\n </div>\n </div>\n )}\n <div className=\"flex items-center\">\n <Button\n icon={<PlusCircleIcon />}\n onClick={() => dispatch({ type: 'openNewFilterInput' })}\n disabled={!isValid}\n >\n Add Rule\n </Button>\n <Button\n type=\"text\"\n onClick={() => {\n dispatch({\n type: 'clearAllFilters',\n })\n }}\n >\n Clear All Rules\n </Button>\n </div>\n </div>\n <div className=\"flex justify-end\">\n <Button\n onClick={handleSubmit}\n type=\"primary\"\n disabled={isEmpty ? false : !isValid}\n >\n Apply Filters\n </Button>\n </div>\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@j2-health/design-system",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "J2 Health shared React component library",
|
|
6
6
|
"repository": {
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"classnames": "^2.5.1",
|
|
60
60
|
"formik": "^2.4.6",
|
|
61
61
|
"formik-antd": "^3.0.0-beta.9",
|
|
62
|
-
"highcharts": "^13.0.1",
|
|
62
|
+
"highcharts": "^12.5.0 || ^13.0.1",
|
|
63
63
|
"lodash": "^4.17.0",
|
|
64
64
|
"react": "^18.3.1",
|
|
65
65
|
"react-dom": "^18.3.1",
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"@storybook/addon-onboarding": "^10.3.0",
|
|
77
77
|
"@storybook/react-vite": "^10.3.0",
|
|
78
78
|
"@testing-library/jest-dom": "^7.0.1",
|
|
79
|
-
"@testing-library/react": "^16.
|
|
79
|
+
"@testing-library/react": "^16.3.3",
|
|
80
80
|
"@types/lodash": "^4.17.14",
|
|
81
81
|
"@types/react": "^18.3.10",
|
|
82
82
|
"@types/react-dom": "^18.3.0",
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
"happy-dom": "^20.9.0",
|
|
99
99
|
"highcharts": "^13.0.1",
|
|
100
100
|
"lodash": "^4.18.1",
|
|
101
|
-
"postcss": "^8.5.
|
|
101
|
+
"postcss": "^8.5.28",
|
|
102
102
|
"prettier": "^3.3.3",
|
|
103
103
|
"react": "^18.3.1",
|
|
104
104
|
"react-dom": "^18.3.1",
|
|
@@ -109,8 +109,8 @@
|
|
|
109
109
|
"typescript-eslint": "^8.15.0",
|
|
110
110
|
"vite": "^6.4.3",
|
|
111
111
|
"vite-plugin-dts": "^5.0.3",
|
|
112
|
-
"vite-plugin-svgr": "^
|
|
113
|
-
"vitest": "^4.
|
|
112
|
+
"vite-plugin-svgr": "^5.2.0",
|
|
113
|
+
"vitest": "^4.1.11",
|
|
114
114
|
"yup": "^1.4.0"
|
|
115
115
|
},
|
|
116
116
|
"optionalDependencies": {
|