@nodeblocks/frontend-search-by-chip-block 0.0.2 → 0.1.0

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.
@@ -0,0 +1,17 @@
1
+ import { ReactNode } from 'react';
2
+ type SearchByChipContextValue = {
3
+ searchByChipTitle: ReactNode;
4
+ sectionTitle: ReactNode;
5
+ subtitle: ReactNode;
6
+ onClickChip: (value: string) => void;
7
+ chips: {
8
+ value: string;
9
+ label: string;
10
+ }[];
11
+ };
12
+ export declare const SearchByChipProvider: ({ children, ...value }: SearchByChipContextValue & {
13
+ children: ReactNode;
14
+ }) => import("react/jsx-runtime").JSX.Element;
15
+ export declare const useSearchByChipContext: () => SearchByChipContextValue;
16
+ export {};
17
+ //# sourceMappingURL=context.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D,KAAK,wBAAwB,GAAG;IAC9B,iBAAiB,EAAE,SAAS,CAAC;IAC7B,YAAY,EAAE,SAAS,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;CACL,CAAC;AAIF,eAAO,MAAM,oBAAoB,GAAI,wBAGlC,wBAAwB,GAAG;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAEA,CAAC;AAEF,eAAO,MAAM,sBAAsB,gCAOlC,CAAC"}
package/dist/index.cjs.js CHANGED
@@ -1,6 +1,107 @@
1
+
2
+
3
+ if (typeof global === 'undefined') {
4
+ var global = window;
5
+ }
6
+
1
7
  'use strict';
2
8
 
3
9
  var jsxRuntime = require('react/jsx-runtime');
10
+ var react = require('react');
11
+
12
+ const SearchByChipContext = react.createContext(undefined);
13
+ const SearchByChipProvider = ({ children, ...value }) => {
14
+ return jsxRuntime.jsx(SearchByChipContext.Provider, { value: value, children: children });
15
+ };
16
+ const useSearchByChipContext = () => {
17
+ const context = react.useContext(SearchByChipContext);
18
+ if (!context) {
19
+ throw new Error('useSearchByChipContext must be used within a SearchByChipProvider');
20
+ }
21
+ return context;
22
+ };
23
+
24
+ /**
25
+ * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.
26
+ *
27
+ * @param components - A map of default block keys to component functions.
28
+ *
29
+ * @example
30
+ * const defaultBlocks = createDefaultBlocks({
31
+ * title: Title,
32
+ * description: Description,
33
+ * form: Form,
34
+ * });
35
+ */
36
+ function createDefaultBlocks(components) {
37
+ return Object.fromEntries(Object.entries(components).map(([key, Component]) => [key, react.createElement(Component, { key })]));
38
+ }
39
+ /**
40
+ * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.
41
+ * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.
42
+ *
43
+ * @param props
44
+ * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).
45
+ * @param props.defaultBlocks - The default blocks of outer component.
46
+ * @param props.children - A function returning the JSX to render.
47
+ *
48
+ * @example
49
+ * <BlocksOverrideComponent
50
+ * defaultBlocks={defaultFormBlocks}
51
+ * blocksOverride={children}
52
+ * >
53
+ * {({ blocks, blockOrder }) =>
54
+ * blockOrder.map((key) => (
55
+ * <Fragment key={String(key)}>{blocks[key]}</Fragment>
56
+ * ))
57
+ * }
58
+ * </BlocksOverrideComponent>
59
+ */
60
+ function BlocksOverrideComponent({ blocksOverride, defaultBlocks, defaultBlockOrder, children, }) {
61
+ if (blocksOverride === undefined) {
62
+ return children({
63
+ // TODO: Remove this assertion
64
+ blocks: defaultBlocks,
65
+ blockOrder: defaultBlockOrder,
66
+ });
67
+ }
68
+ if (typeof blocksOverride === 'function') {
69
+ const { blocks, blockOrder } = blocksOverride({
70
+ defaultBlocks,
71
+ defaultBlockOrder,
72
+ });
73
+ return children({ blocks, blockOrder });
74
+ }
75
+ return blocksOverride;
76
+ }
77
+ function deepMerge(obj1, obj2) {
78
+ const result = { ...obj1 };
79
+ for (const key in obj2) {
80
+ if (obj2.hasOwnProperty(key)) {
81
+ const val1 = result[key];
82
+ const val2 = obj2[key];
83
+ if (Array.isArray(val1) || Array.isArray(val2)) {
84
+ // If either is an array, replace entirely with obj2's value
85
+ result[key] = val2;
86
+ }
87
+ else if (typeof val1 === 'object' && val1 !== null && typeof val2 === 'object' && val2 !== null) {
88
+ result[key] = deepMerge(val1, val2);
89
+ }
90
+ else {
91
+ result[key] = val2;
92
+ }
93
+ }
94
+ }
95
+ return result;
96
+ }
97
+ /**
98
+ * Utility function to join class names together, ignoring undefined or nil values.
99
+ * @param classes - The class names to join.
100
+ * @returns The joined class names.
101
+ */
102
+ function classNames(...classes) {
103
+ return classes.flat().filter(Boolean).join(' ');
104
+ }
4
105
 
5
106
  function styleInject(css, ref) {
6
107
  if ( ref === void 0 ) ref = {};
@@ -29,49 +130,44 @@ function styleInject(css, ref) {
29
130
  }
30
131
  }
31
132
 
32
- var css_248z = ".nbb-search-by-chip {\n --color-object-accent-primary: #006EAD;\n --color-object-accent-primary-emphasis: #006EAD;\n --border-radius: 8px;\n --color-text-mid-emphasis: #000;\n --color-surface-secondary: #f5f5f5;\n --color-surface-primary: #fff;\n --color-title: #333;\n --color-subtitle: #006EAD;\n --color-section-title: #000;\n --chip-border-color: #C9D0DA;\n --chip-hover-background: #eef;\n --chip-shadow-color: rgba(0, 0, 0, 0.1);\n}\n\n.nbb-search-by-chip {\n font-family: var(--font-family);\n padding: 16px;\n background-color: var(--color-surface-primary);\n}\n\n.nbb-search-by-chip-section {\n margin-bottom: 32px;\n}\n\n.nbb-search-by-chip-title {\n font-size: 25px;\n font-weight: bold;\n color: var(--color-title);\n margin: 0 0 40px 0;\n}\n\n.nbb-search-by-chip-subtitle {\n font-size: 18px;\n font-weight: bold;\n color: var(--color-subtitle);\n margin: 0 0 4px 0;\n}\n\n.nbb-search-by-chip-section-title {\n font-size: 22px;\n font-weight: bold;\n color: var(--color-section-title);\n margin: 0 0 20px 0;\n}\n\n.nbb-search-by-chip-items {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n}\n\n.nbb-search-by-chip-item {\n padding: 10px 16px;\n background-color: var(--color-surface-primary);\n color: var(--color-title);\n font-size: 14px;\n text-decoration: none;\n border: 1px solid var(--chip-border-color);\n border-radius: var(--border-radius);\n transition: background-color 0.2s ease, box-shadow 0.2s ease;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n gap: 4px;\n}\n\n.nbb-search-by-chip-item:hover {\n background-color: var(--chip-hover-background);\n box-shadow: 0 2px 6px var(--chip-shadow-color);\n}\n\n.nbb-search-by-chip-icon {\n height: 16px;\n}\n\n@media (min-width: 680px) {\n .nbb-search-by-chip-items {\n justify-content: center;\n }\n}";
133
+ var css_248z = ".nbb-search-by-chip {\n --color-object-accent-primary: #006ead;\n --color-object-accent-primary-emphasis: #006ead;\n --border-radius: 8px;\n --color-text-mid-emphasis: #000;\n --color-surface-secondary: #f5f5f5;\n --color-surface-primary: #fff;\n --color-title: #333;\n --color-subtitle: #006ead;\n --color-section-title: #000;\n --chip-border-color: #c9d0da;\n --chip-hover-background: #eef;\n --chip-shadow-color: rgba(0, 0, 0, 0.1);\n}\n\n.nbb-search-by-chip {\n font-family: var(--font-family);\n padding: 16px;\n background-color: var(--color-surface-primary);\n}\n\n.nbb-search-by-chip-section {\n margin-bottom: 32px;\n}\n\n.nbb-search-by-chip-title {\n font-size: 25px;\n font-weight: bold;\n color: var(--color-title);\n margin: 0 0 40px 0;\n}\n\n.nbb-search-by-chip-subtitle {\n font-size: 18px;\n font-weight: bold;\n color: var(--color-subtitle);\n margin: 0 0 4px 0;\n}\n\n.nbb-search-by-chip-section-title {\n font-size: 22px;\n font-weight: bold;\n color: var(--color-section-title);\n margin: 0 0 20px 0;\n}\n\n.nbb-search-by-chip-items {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n}\n\n.nbb-search-by-chip-item {\n padding: 10px 16px;\n background-color: var(--color-surface-primary);\n color: var(--color-title);\n font-size: 14px;\n text-decoration: none;\n border: 1px solid var(--chip-border-color);\n border-radius: var(--border-radius);\n transition:\n background-color 0.2s ease,\n box-shadow 0.2s ease;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n gap: 4px;\n}\n\n.nbb-search-by-chip-item:hover {\n background-color: var(--chip-hover-background);\n box-shadow: 0 2px 6px var(--chip-shadow-color);\n}\n\n.nbb-search-by-chip-icon {\n height: 16px;\n}\n\n@media (min-width: 680px) {\n .nbb-search-by-chip-items {\n justify-content: center;\n }\n}\n";
33
134
  styleInject(css_248z);
34
135
 
35
- function setBlocks(defaultBlocks, defaultOptions, children) {
36
- const results = children
37
- ? children({ defaultBlocks, ...defaultOptions })
38
- : { blocks: {}, ...defaultOptions };
39
- const { blocks: customBlocks = {} } = results;
40
- return {
41
- ...results,
42
- blocks: Object.fromEntries(Object.entries(defaultBlocks).map(([key, defaultComponent]) => [
43
- key,
44
- customBlocks[key] || defaultComponent,
45
- ])),
46
- };
47
- }
48
- /**
49
- * Utility function to join class names together, ignoring undefined or nil values.
50
- * @param classes - The class names to join.
51
- * @returns The joined class names.
52
- */
53
- function classNames(...classes) {
54
- return classes.flat().filter(Boolean).join(' ');
55
- }
56
-
57
- const DefaultTitle = ({ children }) => (jsxRuntime.jsx("h4", { className: "nbb-search-by-chip-title", children: children }));
58
- const DefaultSubtitle = ({ children }) => (jsxRuntime.jsx("h6", { className: "nbb-search-by-chip-subtitle", children: children }));
59
- const DefaultSectionTitle = ({ children }) => (jsxRuntime.jsx("h6", { className: "nbb-search-by-chip-section-title", children: children }));
60
- const DefaultChipItem = ({ onClickChip, value, label, ChipIcon }) => (jsxRuntime.jsxs("button", { onClick: () => onClickChip(value), className: "nbb-search-by-chip-item", children: [jsxRuntime.jsx(ChipIcon, {}), jsxRuntime.jsx("span", { children: label })] }));
61
- const DefaultChipIcon = () => (jsxRuntime.jsx("div", { className: 'nbb-search-by-chip-icon', children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M5.86339 10.5831L3.08339 7.80312L2.13672 8.74312L5.86339 12.4698L13.8634 4.46979L12.9234 3.52979L5.86339 10.5831Z", fill: "#006EAD" }) }) }));
62
- const defaultBlocks = {
63
- Title: DefaultTitle,
64
- Subtitle: DefaultSubtitle,
65
- SectionTitle: DefaultSectionTitle,
66
- ChipItem: DefaultChipItem,
67
- ChipIcon: DefaultChipIcon,
136
+ const SearchByChip = ({ searchByChipTitle, sectionTitle, subtitle, onClickChip, chips, className, children, ...props }) => {
137
+ return (jsxRuntime.jsx("div", { className: classNames('nbb-search-by-chip', className), ...props, children: jsxRuntime.jsx(SearchByChipProvider, { searchByChipTitle,
138
+ sectionTitle,
139
+ subtitle,
140
+ onClickChip,
141
+ chips, children: jsxRuntime.jsx(BlocksOverrideComponent, { defaultBlocks: defaultBlocks, defaultBlockOrder: Object.keys(defaultBlocks), blocksOverride: children, children: ({ blocks: { chipIcon, chipItem, sectionTitle, ...blocks }, blockOrder }) => blockOrder
142
+ .filter((key) => key in blocks)
143
+ .map((key) => jsxRuntime.jsx(react.Fragment, { children: blocks[key] }, String(key))) }) }) }));
68
144
  };
69
-
70
- const SearchByChip = ({ title, subtitle, sections, onClickChip, className, children }) => {
71
- const { blocks } = setBlocks(defaultBlocks, {}, children);
72
- const { Title, Subtitle, SectionTitle, ChipItem, ChipIcon } = blocks;
73
- return (jsxRuntime.jsxs("div", { className: classNames("nbb-search-by-chip", className), children: [jsxRuntime.jsx(Subtitle, { children: subtitle }), jsxRuntime.jsx(Title, { children: title }), sections.map((section, index) => (jsxRuntime.jsxs("div", { className: "nbb-search-by-chip-section", children: [jsxRuntime.jsx(SectionTitle, { children: section.title }), jsxRuntime.jsx("div", { className: "nbb-search-by-chip-items", children: section.items.map((item, idx) => (jsxRuntime.jsx(ChipItem, { onClickChip: onClickChip, value: item.value, label: item.label, ChipIcon: ChipIcon }, idx))) })] }, index)))] }));
145
+ SearchByChip.Title = (props) => {
146
+ const { children, className, searchByChipTitle } = deepMerge(useSearchByChipContext(), props);
147
+ return (jsxRuntime.jsx("h4", { className: classNames('nbb-search-by-chip-title', className), ...props, children: children || searchByChipTitle }));
148
+ };
149
+ SearchByChip.Subtitle = (props) => {
150
+ const { children, className, subtitle } = deepMerge(useSearchByChipContext(), props);
151
+ return (jsxRuntime.jsx("h6", { className: classNames('nbb-search-by-chip-subtitle', className), ...props, children: children || subtitle }));
152
+ };
153
+ SearchByChip.SectionTitle = (props) => {
154
+ const { children, className, sectionTitle } = deepMerge(useSearchByChipContext(), props);
155
+ return (jsxRuntime.jsx("h6", { className: classNames('nbb-search-by-chip-section-title', className), ...props, children: children || sectionTitle }));
156
+ };
157
+ SearchByChip.ChipItem = ({ onClickChip, value, label, ...props }) => (jsxRuntime.jsxs("button", { onClick: () => onClickChip(value), className: "nbb-search-by-chip-item", ...props, children: [jsxRuntime.jsx(SearchByChip.ChipIcon, {}), jsxRuntime.jsx("span", { children: label })] }));
158
+ SearchByChip.ChipIcon = () => (jsxRuntime.jsx("div", { className: "nbb-search-by-chip-icon", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M5.86339 10.5831L3.08339 7.80312L2.13672 8.74312L5.86339 12.4698L13.8634 4.46979L12.9234 3.52979L5.86339 10.5831Z", fill: "#006EAD" }) }) }));
159
+ SearchByChip.ChipSection = (props) => {
160
+ const { children, className, chips, sectionTitle, onClickChip } = deepMerge(useSearchByChipContext(), props);
161
+ return (jsxRuntime.jsx("div", { className: classNames('nbb-search-by-chip-subtitle', className), ...props, children: children || (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SearchByChip.SectionTitle, { children: sectionTitle }), jsxRuntime.jsx("div", { className: "nbb-search-by-chip-items", children: chips?.map((item, i) => (jsxRuntime.jsx(SearchByChip.ChipItem, { onClickChip: onClickChip, value: item.value, label: item.label }, i))) })] })) }));
74
162
  };
163
+ const defaultBlocks = createDefaultBlocks({
164
+ subtitle: SearchByChip.Subtitle,
165
+ title: SearchByChip.Title,
166
+ sectionTitle: SearchByChip.SectionTitle,
167
+ chipIcon: SearchByChip.ChipIcon,
168
+ chipItem: SearchByChip.ChipItem,
169
+ chipSection: SearchByChip.ChipSection,
170
+ });
75
171
 
76
172
  exports.SearchByChip = SearchByChip;
77
173
  //# sourceMappingURL=index.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/lib.ts","../src/blocks.tsx","../src/search-by-chips.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import { DefaultBlocks, DefaultOptions } from './types';\n\n/**\n * Sets the blocks by merging default blocks with custom blocks provided by the children function.\n *\n * @param defaultBlocks - The default blocks to be used.\n * @param children - An optional function that returns custom blocks and arguments.\n * @param args - Additional unknown arguments.\n * @returns An object containing the merged blocks and additional arguments.\n */\n\n\ntype ChildrenProps = {\n defaultBlocks: DefaultBlocks;\n};\n\nexport function setBlocks(\n defaultBlocks: DefaultBlocks,\n defaultOptions: DefaultOptions,\n children?: (props: ChildrenProps) => DefaultOptions & {\n blocks: { [x: string]: any };\n },\n) {\n const results = children\n ? children({ defaultBlocks, ...defaultOptions })\n : { blocks: {}, ...defaultOptions };\n const {\n blocks: customBlocks = {}\n } = results;\n return {\n ...results,\n blocks: Object.fromEntries(\n Object.entries(defaultBlocks).map(([key, defaultComponent]) => [\n key,\n customBlocks[key] || defaultComponent,\n ])\n ),\n };\n}\n\ntype ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n return classes.flat().filter(Boolean).join(' ');\n}\n","import React from 'react';\nimport { DefaultBlocks } from './types';\n\n\nconst DefaultTitle: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <h4 className=\"nbb-search-by-chip-title\">{children}</h4>\n);\n\nconst DefaultSubtitle: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <h6 className=\"nbb-search-by-chip-subtitle\">{children}</h6>\n);\n\nconst DefaultSectionTitle: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <h6 className=\"nbb-search-by-chip-section-title\">{children}</h6>\n);\n\nconst DefaultChipItem: React.FC<{ onClickChip: (value: string) => void; value: string, label: string, ChipIcon: React.FC }> = ({ onClickChip, value, label, ChipIcon }) => (\n <button onClick={() => onClickChip(value)} className=\"nbb-search-by-chip-item\">\n <ChipIcon />\n <span>{label}</span>\n </button>\n);\nconst DefaultChipIcon: React.FC = () => (\n <div className='nbb-search-by-chip-icon'>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.86339 10.5831L3.08339 7.80312L2.13672 8.74312L5.86339 12.4698L13.8634 4.46979L12.9234 3.52979L5.86339 10.5831Z\" fill=\"#006EAD\" />\n </svg>\n </div>\n);\n\nexport const defaultBlocks: DefaultBlocks = {\n Title: DefaultTitle,\n Subtitle: DefaultSubtitle,\n SectionTitle: DefaultSectionTitle,\n ChipItem: DefaultChipItem,\n ChipIcon: DefaultChipIcon,\n};","import React from 'react';\nimport './search-by-chips.css';\nimport { classNames, setBlocks } from './lib';\nimport { defaultBlocks } from './blocks'\nimport { Section, Chip, SearchByChipProps } from './types';\n\n\n\nconst SearchByChip = ({ title, subtitle, sections, onClickChip, className, children }: SearchByChipProps) => {\n const { blocks } = setBlocks(defaultBlocks, {}, children);\n const { Title, Subtitle, SectionTitle, ChipItem, ChipIcon } = blocks;\n return (\n <div className={classNames(\"nbb-search-by-chip\", className)}>\n <Subtitle>{subtitle}</Subtitle>\n <Title>{title}</Title>\n {sections.map((section: Section, index: number) => (\n <div key={index} className=\"nbb-search-by-chip-section\">\n <SectionTitle>{section.title}</SectionTitle>\n <div className=\"nbb-search-by-chip-items\">\n {section.items.map((item: Chip, idx: number) => (\n <ChipItem key={idx} onClickChip={onClickChip} value={item.value} label={item.label} ChipIcon={ChipIcon} />\n ))}\n </div>\n </div>\n ))}\n </div>\n );\n};\n\nexport default SearchByChip;"],"names":["_jsx","_jsxs"],"mappings":"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","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"index.cjs.js","sources":["../src/context.tsx","../src/lib.ts","../node_modules/style-inject/dist/style-inject.es.js","../src/search-by-chip.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext } from 'react';\n\ntype SearchByChipContextValue = {\n searchByChipTitle: ReactNode;\n sectionTitle: ReactNode;\n subtitle: ReactNode;\n onClickChip: (value: string) => void;\n chips: {\n value: string;\n label: string;\n }[];\n};\n\nconst SearchByChipContext = createContext<SearchByChipContextValue | undefined>(undefined);\n\nexport const SearchByChipProvider = ({\n children,\n ...value\n}: SearchByChipContextValue & {\n children: ReactNode;\n}) => {\n return <SearchByChipContext.Provider value={value}>{children}</SearchByChipContext.Provider>;\n};\n\nexport const useSearchByChipContext = () => {\n const context = useContext<SearchByChipContextValue | undefined>(SearchByChipContext);\n\n if (!context) {\n throw new Error('useSearchByChipContext must be used within a SearchByChipProvider');\n }\n return context;\n};\n","import { ComponentProps, createElement, FunctionComponent, ReactElement, ReactNode } from 'react';\n\n/**\n * The function to be passed into a block component as `children` to selectively override default blocks, or just a `ReactNode`.\n *\n * @example\n * <Block>\n * {({ defaultBlocks: { header, ...defaultBlocks }, defaultBlockOrder }) => ({\n * blocks: {\n * ...defaultBlocks,\n * header: {\n * ...header,\n * props: {\n * ...header.props,\n * label: \"Custom Label\"\n * }\n * },\n * subheader: <CustomComponent />\n * },\n * blockOrder: [\"header\", \"subheader\", \"body\", \"footer\"]\n * })}\n * </Block>\n */\nexport type BlocksOverride<DefaultBlocks, CustomBlocks> =\n | (({\n defaultBlocks,\n defaultBlockOrder,\n }: {\n defaultBlocks: DefaultBlocks;\n defaultBlockOrder: readonly (keyof DefaultBlocks)[];\n }) => {\n blocks: Partial<DefaultBlocks> & CustomBlocks;\n // NOTE: This specific combination allows proper autocomplete.\n blockOrder: readonly (keyof DefaultBlocks)[] | readonly (keyof CustomBlocks)[];\n })\n | ReactNode;\n\n/**\n * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.\n *\n * @param components - A map of default block keys to component functions.\n *\n * @example\n * const defaultBlocks = createDefaultBlocks({\n * title: Title,\n * description: Description,\n * form: Form,\n * });\n */\nexport function createDefaultBlocks<T extends Record<string, FunctionComponent<any>>>(\n components: T\n): {\n [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n} {\n return Object.fromEntries(\n Object.entries(components).map(([key, Component]) => [key, createElement(Component, { key })])\n ) as {\n [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n };\n}\n\n/**\n * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.\n * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.\n *\n * @param props\n * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).\n * @param props.defaultBlocks - The default blocks of outer component.\n * @param props.children - A function returning the JSX to render.\n *\n * @example\n * <BlocksOverrideComponent\n * defaultBlocks={defaultFormBlocks}\n * blocksOverride={children}\n * >\n * {({ blocks, blockOrder }) =>\n * blockOrder.map((key) => (\n * <Fragment key={String(key)}>{blocks[key]}</Fragment>\n * ))\n * }\n * </BlocksOverrideComponent>\n */\nexport function BlocksOverrideComponent<\n DefaultBlocks extends Record<string, ReactNode>,\n CustomBlocks extends Record<string, ReactNode>,\n>({\n blocksOverride,\n defaultBlocks,\n defaultBlockOrder,\n children,\n}: {\n blocksOverride: BlocksOverride<DefaultBlocks, CustomBlocks>;\n defaultBlocks: DefaultBlocks;\n defaultBlockOrder: (keyof DefaultBlocks)[];\n children: ({\n blocks,\n blockOrder,\n }: {\n // TODO: Possibly find an alternative to Partial<CustomBlocks>\n blocks: Partial<DefaultBlocks> & Partial<CustomBlocks>;\n blockOrder: readonly (keyof DefaultBlocks | keyof CustomBlocks)[];\n }) => ReactNode;\n}) {\n if (blocksOverride === undefined) {\n return children({\n // TODO: Remove this assertion\n blocks: defaultBlocks as DefaultBlocks & Partial<CustomBlocks>,\n blockOrder: defaultBlockOrder,\n });\n }\n\n if (typeof blocksOverride === 'function') {\n const { blocks, blockOrder } = blocksOverride({\n defaultBlocks,\n defaultBlockOrder,\n });\n\n return children({ blocks, blockOrder });\n }\n\n return blocksOverride;\n}\n\ntype MergeTypes<Object1, Object2> = {\n [K in keyof Object1 | keyof Object2]: K extends keyof Object1\n ? Object1[K]\n : K extends keyof Object2\n ? Object2[K]\n : never;\n};\n\nexport function deepMerge<A extends Record<string, any>, B extends Record<string, any>>(obj1: A, obj2: B) {\n const result: Record<string, any> = { ...obj1 };\n\n for (const key in obj2) {\n if (obj2.hasOwnProperty(key)) {\n const val1 = result[key];\n const val2 = obj2[key];\n\n if (Array.isArray(val1) || Array.isArray(val2)) {\n // If either is an array, replace entirely with obj2's value\n result[key] = val2;\n } else if (typeof val1 === 'object' && val1 !== null && typeof val2 === 'object' && val2 !== null) {\n result[key] = deepMerge(val1, val2);\n } else {\n result[key] = val2;\n }\n }\n }\n\n return result as MergeTypes<B, A>;\n}\n\ntype ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n return classes.flat().filter(Boolean).join(' ');\n}\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import { ComponentProps, Fragment, ReactNode } from 'react';\nimport { SearchByChipProvider, useSearchByChipContext } from './context';\nimport { BlocksOverride, BlocksOverrideComponent, classNames, createDefaultBlocks, deepMerge } from './lib';\nimport './search-by-chip.css';\n\nconst SearchByChip = <CustomBlocks extends Record<string, ReactNode> = {}>({\n searchByChipTitle,\n sectionTitle,\n subtitle,\n onClickChip,\n chips,\n className,\n children,\n ...props\n}: Omit<ComponentProps<'div'>, 'children'> & {\n searchByChipTitle: ReactNode;\n sectionTitle: ReactNode;\n subtitle: ReactNode;\n onClickChip: (value: string) => void;\n chips: {\n value: string;\n label: string;\n }[];\n children?: BlocksOverride<typeof defaultBlocks, CustomBlocks>;\n}) => {\n return (\n <div className={classNames('nbb-search-by-chip', className)} {...props}>\n <SearchByChipProvider\n {...{\n searchByChipTitle,\n sectionTitle,\n subtitle,\n onClickChip,\n chips,\n }}\n >\n <BlocksOverrideComponent\n defaultBlocks={defaultBlocks}\n defaultBlockOrder={Object.keys(defaultBlocks) as (keyof typeof defaultBlocks)[]}\n blocksOverride={children}\n >\n {({ blocks: { chipIcon, chipItem, sectionTitle, ...blocks }, blockOrder }) =>\n blockOrder\n .filter((key) => key in blocks)\n .map<ReactNode>((key) => <Fragment key={String(key)}>{blocks[key]}</Fragment>)\n }\n </BlocksOverrideComponent>\n </SearchByChipProvider>\n </div>\n );\n};\n\nSearchByChip.Title = (props: Partial<ComponentProps<'h4'>>) => {\n const { children, className, searchByChipTitle } = deepMerge(useSearchByChipContext(), props);\n\n return (\n <h4 className={classNames('nbb-search-by-chip-title', className)} {...props}>\n {children || searchByChipTitle}\n </h4>\n );\n};\n\nSearchByChip.Subtitle = (props: Partial<ComponentProps<'h6'>>) => {\n const { children, className, subtitle } = deepMerge(useSearchByChipContext(), props);\n\n return (\n <h6 className={classNames('nbb-search-by-chip-subtitle', className)} {...props}>\n {children || subtitle}\n </h6>\n );\n};\n\nSearchByChip.SectionTitle = (props: Partial<ComponentProps<'h6'>>) => {\n const { children, className, sectionTitle } = deepMerge(useSearchByChipContext(), props);\n\n return (\n <h6 className={classNames('nbb-search-by-chip-section-title', className)} {...props}>\n {children || sectionTitle}\n </h6>\n );\n};\n\nSearchByChip.ChipItem = ({\n onClickChip,\n value,\n label,\n ...props\n}: ComponentProps<'button'> & {\n onClickChip: (value: string) => void;\n value: string;\n label: ReactNode;\n}) => (\n <button onClick={() => onClickChip(value)} className=\"nbb-search-by-chip-item\" {...props}>\n <SearchByChip.ChipIcon />\n <span>{label}</span>\n </button>\n);\n\nSearchByChip.ChipIcon = () => (\n <div className=\"nbb-search-by-chip-icon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.86339 10.5831L3.08339 7.80312L2.13672 8.74312L5.86339 12.4698L13.8634 4.46979L12.9234 3.52979L5.86339 10.5831Z\"\n fill=\"#006EAD\"\n />\n </svg>\n </div>\n);\n\nSearchByChip.ChipSection = (\n props: Partial<\n ComponentProps<'div'> & {\n chips: {\n value: string;\n label: string;\n }[];\n sectionTitle: ReactNode;\n }\n >\n) => {\n const { children, className, chips, sectionTitle, onClickChip } = deepMerge(useSearchByChipContext(), props);\n\n return (\n <div className={classNames('nbb-search-by-chip-subtitle', className)} {...props}>\n {children || (\n <>\n <SearchByChip.SectionTitle>{sectionTitle}</SearchByChip.SectionTitle>\n <div className=\"nbb-search-by-chip-items\">\n {chips?.map((item, i) => (\n <SearchByChip.ChipItem key={i} onClickChip={onClickChip} value={item.value} label={item.label} />\n ))}\n </div>\n </>\n )}\n </div>\n );\n};\n\nconst defaultBlocks = createDefaultBlocks({\n subtitle: SearchByChip.Subtitle,\n title: SearchByChip.Title,\n sectionTitle: SearchByChip.SectionTitle,\n chipIcon: SearchByChip.ChipIcon,\n chipItem: SearchByChip.ChipItem,\n chipSection: SearchByChip.ChipSection,\n});\n\nexport default SearchByChip;\n"],"names":["createContext","_jsx","useContext","createElement","Fragment","_jsxs","_Fragment"],"mappings":"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","x_google_ignoreList":[2]}
package/dist/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export { default as SearchByChip } from './search-by-chips';
1
+ export { default as SearchByChip } from './search-by-chip';
2
2
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC"}
package/dist/index.esm.js CHANGED
@@ -1,4 +1,105 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
1
+
2
+
3
+ if (typeof global === 'undefined') {
4
+ var global = window;
5
+ }
6
+
7
+ import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
8
+ import { createContext, useContext, createElement, Fragment } from 'react';
9
+
10
+ const SearchByChipContext = createContext(undefined);
11
+ const SearchByChipProvider = ({ children, ...value }) => {
12
+ return jsx(SearchByChipContext.Provider, { value: value, children: children });
13
+ };
14
+ const useSearchByChipContext = () => {
15
+ const context = useContext(SearchByChipContext);
16
+ if (!context) {
17
+ throw new Error('useSearchByChipContext must be used within a SearchByChipProvider');
18
+ }
19
+ return context;
20
+ };
21
+
22
+ /**
23
+ * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.
24
+ *
25
+ * @param components - A map of default block keys to component functions.
26
+ *
27
+ * @example
28
+ * const defaultBlocks = createDefaultBlocks({
29
+ * title: Title,
30
+ * description: Description,
31
+ * form: Form,
32
+ * });
33
+ */
34
+ function createDefaultBlocks(components) {
35
+ return Object.fromEntries(Object.entries(components).map(([key, Component]) => [key, createElement(Component, { key })]));
36
+ }
37
+ /**
38
+ * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.
39
+ * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.
40
+ *
41
+ * @param props
42
+ * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).
43
+ * @param props.defaultBlocks - The default blocks of outer component.
44
+ * @param props.children - A function returning the JSX to render.
45
+ *
46
+ * @example
47
+ * <BlocksOverrideComponent
48
+ * defaultBlocks={defaultFormBlocks}
49
+ * blocksOverride={children}
50
+ * >
51
+ * {({ blocks, blockOrder }) =>
52
+ * blockOrder.map((key) => (
53
+ * <Fragment key={String(key)}>{blocks[key]}</Fragment>
54
+ * ))
55
+ * }
56
+ * </BlocksOverrideComponent>
57
+ */
58
+ function BlocksOverrideComponent({ blocksOverride, defaultBlocks, defaultBlockOrder, children, }) {
59
+ if (blocksOverride === undefined) {
60
+ return children({
61
+ // TODO: Remove this assertion
62
+ blocks: defaultBlocks,
63
+ blockOrder: defaultBlockOrder,
64
+ });
65
+ }
66
+ if (typeof blocksOverride === 'function') {
67
+ const { blocks, blockOrder } = blocksOverride({
68
+ defaultBlocks,
69
+ defaultBlockOrder,
70
+ });
71
+ return children({ blocks, blockOrder });
72
+ }
73
+ return blocksOverride;
74
+ }
75
+ function deepMerge(obj1, obj2) {
76
+ const result = { ...obj1 };
77
+ for (const key in obj2) {
78
+ if (obj2.hasOwnProperty(key)) {
79
+ const val1 = result[key];
80
+ const val2 = obj2[key];
81
+ if (Array.isArray(val1) || Array.isArray(val2)) {
82
+ // If either is an array, replace entirely with obj2's value
83
+ result[key] = val2;
84
+ }
85
+ else if (typeof val1 === 'object' && val1 !== null && typeof val2 === 'object' && val2 !== null) {
86
+ result[key] = deepMerge(val1, val2);
87
+ }
88
+ else {
89
+ result[key] = val2;
90
+ }
91
+ }
92
+ }
93
+ return result;
94
+ }
95
+ /**
96
+ * Utility function to join class names together, ignoring undefined or nil values.
97
+ * @param classes - The class names to join.
98
+ * @returns The joined class names.
99
+ */
100
+ function classNames(...classes) {
101
+ return classes.flat().filter(Boolean).join(' ');
102
+ }
2
103
 
3
104
  function styleInject(css, ref) {
4
105
  if ( ref === void 0 ) ref = {};
@@ -27,49 +128,44 @@ function styleInject(css, ref) {
27
128
  }
28
129
  }
29
130
 
30
- var css_248z = ".nbb-search-by-chip {\n --color-object-accent-primary: #006EAD;\n --color-object-accent-primary-emphasis: #006EAD;\n --border-radius: 8px;\n --color-text-mid-emphasis: #000;\n --color-surface-secondary: #f5f5f5;\n --color-surface-primary: #fff;\n --color-title: #333;\n --color-subtitle: #006EAD;\n --color-section-title: #000;\n --chip-border-color: #C9D0DA;\n --chip-hover-background: #eef;\n --chip-shadow-color: rgba(0, 0, 0, 0.1);\n}\n\n.nbb-search-by-chip {\n font-family: var(--font-family);\n padding: 16px;\n background-color: var(--color-surface-primary);\n}\n\n.nbb-search-by-chip-section {\n margin-bottom: 32px;\n}\n\n.nbb-search-by-chip-title {\n font-size: 25px;\n font-weight: bold;\n color: var(--color-title);\n margin: 0 0 40px 0;\n}\n\n.nbb-search-by-chip-subtitle {\n font-size: 18px;\n font-weight: bold;\n color: var(--color-subtitle);\n margin: 0 0 4px 0;\n}\n\n.nbb-search-by-chip-section-title {\n font-size: 22px;\n font-weight: bold;\n color: var(--color-section-title);\n margin: 0 0 20px 0;\n}\n\n.nbb-search-by-chip-items {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n}\n\n.nbb-search-by-chip-item {\n padding: 10px 16px;\n background-color: var(--color-surface-primary);\n color: var(--color-title);\n font-size: 14px;\n text-decoration: none;\n border: 1px solid var(--chip-border-color);\n border-radius: var(--border-radius);\n transition: background-color 0.2s ease, box-shadow 0.2s ease;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n gap: 4px;\n}\n\n.nbb-search-by-chip-item:hover {\n background-color: var(--chip-hover-background);\n box-shadow: 0 2px 6px var(--chip-shadow-color);\n}\n\n.nbb-search-by-chip-icon {\n height: 16px;\n}\n\n@media (min-width: 680px) {\n .nbb-search-by-chip-items {\n justify-content: center;\n }\n}";
131
+ var css_248z = ".nbb-search-by-chip {\n --color-object-accent-primary: #006ead;\n --color-object-accent-primary-emphasis: #006ead;\n --border-radius: 8px;\n --color-text-mid-emphasis: #000;\n --color-surface-secondary: #f5f5f5;\n --color-surface-primary: #fff;\n --color-title: #333;\n --color-subtitle: #006ead;\n --color-section-title: #000;\n --chip-border-color: #c9d0da;\n --chip-hover-background: #eef;\n --chip-shadow-color: rgba(0, 0, 0, 0.1);\n}\n\n.nbb-search-by-chip {\n font-family: var(--font-family);\n padding: 16px;\n background-color: var(--color-surface-primary);\n}\n\n.nbb-search-by-chip-section {\n margin-bottom: 32px;\n}\n\n.nbb-search-by-chip-title {\n font-size: 25px;\n font-weight: bold;\n color: var(--color-title);\n margin: 0 0 40px 0;\n}\n\n.nbb-search-by-chip-subtitle {\n font-size: 18px;\n font-weight: bold;\n color: var(--color-subtitle);\n margin: 0 0 4px 0;\n}\n\n.nbb-search-by-chip-section-title {\n font-size: 22px;\n font-weight: bold;\n color: var(--color-section-title);\n margin: 0 0 20px 0;\n}\n\n.nbb-search-by-chip-items {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n}\n\n.nbb-search-by-chip-item {\n padding: 10px 16px;\n background-color: var(--color-surface-primary);\n color: var(--color-title);\n font-size: 14px;\n text-decoration: none;\n border: 1px solid var(--chip-border-color);\n border-radius: var(--border-radius);\n transition:\n background-color 0.2s ease,\n box-shadow 0.2s ease;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n gap: 4px;\n}\n\n.nbb-search-by-chip-item:hover {\n background-color: var(--chip-hover-background);\n box-shadow: 0 2px 6px var(--chip-shadow-color);\n}\n\n.nbb-search-by-chip-icon {\n height: 16px;\n}\n\n@media (min-width: 680px) {\n .nbb-search-by-chip-items {\n justify-content: center;\n }\n}\n";
31
132
  styleInject(css_248z);
32
133
 
33
- function setBlocks(defaultBlocks, defaultOptions, children) {
34
- const results = children
35
- ? children({ defaultBlocks, ...defaultOptions })
36
- : { blocks: {}, ...defaultOptions };
37
- const { blocks: customBlocks = {} } = results;
38
- return {
39
- ...results,
40
- blocks: Object.fromEntries(Object.entries(defaultBlocks).map(([key, defaultComponent]) => [
41
- key,
42
- customBlocks[key] || defaultComponent,
43
- ])),
44
- };
45
- }
46
- /**
47
- * Utility function to join class names together, ignoring undefined or nil values.
48
- * @param classes - The class names to join.
49
- * @returns The joined class names.
50
- */
51
- function classNames(...classes) {
52
- return classes.flat().filter(Boolean).join(' ');
53
- }
54
-
55
- const DefaultTitle = ({ children }) => (jsx("h4", { className: "nbb-search-by-chip-title", children: children }));
56
- const DefaultSubtitle = ({ children }) => (jsx("h6", { className: "nbb-search-by-chip-subtitle", children: children }));
57
- const DefaultSectionTitle = ({ children }) => (jsx("h6", { className: "nbb-search-by-chip-section-title", children: children }));
58
- const DefaultChipItem = ({ onClickChip, value, label, ChipIcon }) => (jsxs("button", { onClick: () => onClickChip(value), className: "nbb-search-by-chip-item", children: [jsx(ChipIcon, {}), jsx("span", { children: label })] }));
59
- const DefaultChipIcon = () => (jsx("div", { className: 'nbb-search-by-chip-icon', children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M5.86339 10.5831L3.08339 7.80312L2.13672 8.74312L5.86339 12.4698L13.8634 4.46979L12.9234 3.52979L5.86339 10.5831Z", fill: "#006EAD" }) }) }));
60
- const defaultBlocks = {
61
- Title: DefaultTitle,
62
- Subtitle: DefaultSubtitle,
63
- SectionTitle: DefaultSectionTitle,
64
- ChipItem: DefaultChipItem,
65
- ChipIcon: DefaultChipIcon,
134
+ const SearchByChip = ({ searchByChipTitle, sectionTitle, subtitle, onClickChip, chips, className, children, ...props }) => {
135
+ return (jsx("div", { className: classNames('nbb-search-by-chip', className), ...props, children: jsx(SearchByChipProvider, { searchByChipTitle,
136
+ sectionTitle,
137
+ subtitle,
138
+ onClickChip,
139
+ chips, children: jsx(BlocksOverrideComponent, { defaultBlocks: defaultBlocks, defaultBlockOrder: Object.keys(defaultBlocks), blocksOverride: children, children: ({ blocks: { chipIcon, chipItem, sectionTitle, ...blocks }, blockOrder }) => blockOrder
140
+ .filter((key) => key in blocks)
141
+ .map((key) => jsx(Fragment, { children: blocks[key] }, String(key))) }) }) }));
66
142
  };
67
-
68
- const SearchByChip = ({ title, subtitle, sections, onClickChip, className, children }) => {
69
- const { blocks } = setBlocks(defaultBlocks, {}, children);
70
- const { Title, Subtitle, SectionTitle, ChipItem, ChipIcon } = blocks;
71
- return (jsxs("div", { className: classNames("nbb-search-by-chip", className), children: [jsx(Subtitle, { children: subtitle }), jsx(Title, { children: title }), sections.map((section, index) => (jsxs("div", { className: "nbb-search-by-chip-section", children: [jsx(SectionTitle, { children: section.title }), jsx("div", { className: "nbb-search-by-chip-items", children: section.items.map((item, idx) => (jsx(ChipItem, { onClickChip: onClickChip, value: item.value, label: item.label, ChipIcon: ChipIcon }, idx))) })] }, index)))] }));
143
+ SearchByChip.Title = (props) => {
144
+ const { children, className, searchByChipTitle } = deepMerge(useSearchByChipContext(), props);
145
+ return (jsx("h4", { className: classNames('nbb-search-by-chip-title', className), ...props, children: children || searchByChipTitle }));
146
+ };
147
+ SearchByChip.Subtitle = (props) => {
148
+ const { children, className, subtitle } = deepMerge(useSearchByChipContext(), props);
149
+ return (jsx("h6", { className: classNames('nbb-search-by-chip-subtitle', className), ...props, children: children || subtitle }));
150
+ };
151
+ SearchByChip.SectionTitle = (props) => {
152
+ const { children, className, sectionTitle } = deepMerge(useSearchByChipContext(), props);
153
+ return (jsx("h6", { className: classNames('nbb-search-by-chip-section-title', className), ...props, children: children || sectionTitle }));
154
+ };
155
+ SearchByChip.ChipItem = ({ onClickChip, value, label, ...props }) => (jsxs("button", { onClick: () => onClickChip(value), className: "nbb-search-by-chip-item", ...props, children: [jsx(SearchByChip.ChipIcon, {}), jsx("span", { children: label })] }));
156
+ SearchByChip.ChipIcon = () => (jsx("div", { className: "nbb-search-by-chip-icon", children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M5.86339 10.5831L3.08339 7.80312L2.13672 8.74312L5.86339 12.4698L13.8634 4.46979L12.9234 3.52979L5.86339 10.5831Z", fill: "#006EAD" }) }) }));
157
+ SearchByChip.ChipSection = (props) => {
158
+ const { children, className, chips, sectionTitle, onClickChip } = deepMerge(useSearchByChipContext(), props);
159
+ return (jsx("div", { className: classNames('nbb-search-by-chip-subtitle', className), ...props, children: children || (jsxs(Fragment$1, { children: [jsx(SearchByChip.SectionTitle, { children: sectionTitle }), jsx("div", { className: "nbb-search-by-chip-items", children: chips?.map((item, i) => (jsx(SearchByChip.ChipItem, { onClickChip: onClickChip, value: item.value, label: item.label }, i))) })] })) }));
72
160
  };
161
+ const defaultBlocks = createDefaultBlocks({
162
+ subtitle: SearchByChip.Subtitle,
163
+ title: SearchByChip.Title,
164
+ sectionTitle: SearchByChip.SectionTitle,
165
+ chipIcon: SearchByChip.ChipIcon,
166
+ chipItem: SearchByChip.ChipItem,
167
+ chipSection: SearchByChip.ChipSection,
168
+ });
73
169
 
74
170
  export { SearchByChip };
75
171
  //# sourceMappingURL=index.esm.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/lib.ts","../src/blocks.tsx","../src/search-by-chips.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import { DefaultBlocks, DefaultOptions } from './types';\n\n/**\n * Sets the blocks by merging default blocks with custom blocks provided by the children function.\n *\n * @param defaultBlocks - The default blocks to be used.\n * @param children - An optional function that returns custom blocks and arguments.\n * @param args - Additional unknown arguments.\n * @returns An object containing the merged blocks and additional arguments.\n */\n\n\ntype ChildrenProps = {\n defaultBlocks: DefaultBlocks;\n};\n\nexport function setBlocks(\n defaultBlocks: DefaultBlocks,\n defaultOptions: DefaultOptions,\n children?: (props: ChildrenProps) => DefaultOptions & {\n blocks: { [x: string]: any };\n },\n) {\n const results = children\n ? children({ defaultBlocks, ...defaultOptions })\n : { blocks: {}, ...defaultOptions };\n const {\n blocks: customBlocks = {}\n } = results;\n return {\n ...results,\n blocks: Object.fromEntries(\n Object.entries(defaultBlocks).map(([key, defaultComponent]) => [\n key,\n customBlocks[key] || defaultComponent,\n ])\n ),\n };\n}\n\ntype ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n return classes.flat().filter(Boolean).join(' ');\n}\n","import React from 'react';\nimport { DefaultBlocks } from './types';\n\n\nconst DefaultTitle: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <h4 className=\"nbb-search-by-chip-title\">{children}</h4>\n);\n\nconst DefaultSubtitle: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <h6 className=\"nbb-search-by-chip-subtitle\">{children}</h6>\n);\n\nconst DefaultSectionTitle: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <h6 className=\"nbb-search-by-chip-section-title\">{children}</h6>\n);\n\nconst DefaultChipItem: React.FC<{ onClickChip: (value: string) => void; value: string, label: string, ChipIcon: React.FC }> = ({ onClickChip, value, label, ChipIcon }) => (\n <button onClick={() => onClickChip(value)} className=\"nbb-search-by-chip-item\">\n <ChipIcon />\n <span>{label}</span>\n </button>\n);\nconst DefaultChipIcon: React.FC = () => (\n <div className='nbb-search-by-chip-icon'>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.86339 10.5831L3.08339 7.80312L2.13672 8.74312L5.86339 12.4698L13.8634 4.46979L12.9234 3.52979L5.86339 10.5831Z\" fill=\"#006EAD\" />\n </svg>\n </div>\n);\n\nexport const defaultBlocks: DefaultBlocks = {\n Title: DefaultTitle,\n Subtitle: DefaultSubtitle,\n SectionTitle: DefaultSectionTitle,\n ChipItem: DefaultChipItem,\n ChipIcon: DefaultChipIcon,\n};","import React from 'react';\nimport './search-by-chips.css';\nimport { classNames, setBlocks } from './lib';\nimport { defaultBlocks } from './blocks'\nimport { Section, Chip, SearchByChipProps } from './types';\n\n\n\nconst SearchByChip = ({ title, subtitle, sections, onClickChip, className, children }: SearchByChipProps) => {\n const { blocks } = setBlocks(defaultBlocks, {}, children);\n const { Title, Subtitle, SectionTitle, ChipItem, ChipIcon } = blocks;\n return (\n <div className={classNames(\"nbb-search-by-chip\", className)}>\n <Subtitle>{subtitle}</Subtitle>\n <Title>{title}</Title>\n {sections.map((section: Section, index: number) => (\n <div key={index} className=\"nbb-search-by-chip-section\">\n <SectionTitle>{section.title}</SectionTitle>\n <div className=\"nbb-search-by-chip-items\">\n {section.items.map((item: Chip, idx: number) => (\n <ChipItem key={idx} onClickChip={onClickChip} value={item.value} label={item.label} ChipIcon={ChipIcon} />\n ))}\n </div>\n </div>\n ))}\n </div>\n );\n};\n\nexport default SearchByChip;"],"names":["_jsx","_jsxs"],"mappings":"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","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"index.esm.js","sources":["../src/context.tsx","../src/lib.ts","../node_modules/style-inject/dist/style-inject.es.js","../src/search-by-chip.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext } from 'react';\n\ntype SearchByChipContextValue = {\n searchByChipTitle: ReactNode;\n sectionTitle: ReactNode;\n subtitle: ReactNode;\n onClickChip: (value: string) => void;\n chips: {\n value: string;\n label: string;\n }[];\n};\n\nconst SearchByChipContext = createContext<SearchByChipContextValue | undefined>(undefined);\n\nexport const SearchByChipProvider = ({\n children,\n ...value\n}: SearchByChipContextValue & {\n children: ReactNode;\n}) => {\n return <SearchByChipContext.Provider value={value}>{children}</SearchByChipContext.Provider>;\n};\n\nexport const useSearchByChipContext = () => {\n const context = useContext<SearchByChipContextValue | undefined>(SearchByChipContext);\n\n if (!context) {\n throw new Error('useSearchByChipContext must be used within a SearchByChipProvider');\n }\n return context;\n};\n","import { ComponentProps, createElement, FunctionComponent, ReactElement, ReactNode } from 'react';\n\n/**\n * The function to be passed into a block component as `children` to selectively override default blocks, or just a `ReactNode`.\n *\n * @example\n * <Block>\n * {({ defaultBlocks: { header, ...defaultBlocks }, defaultBlockOrder }) => ({\n * blocks: {\n * ...defaultBlocks,\n * header: {\n * ...header,\n * props: {\n * ...header.props,\n * label: \"Custom Label\"\n * }\n * },\n * subheader: <CustomComponent />\n * },\n * blockOrder: [\"header\", \"subheader\", \"body\", \"footer\"]\n * })}\n * </Block>\n */\nexport type BlocksOverride<DefaultBlocks, CustomBlocks> =\n | (({\n defaultBlocks,\n defaultBlockOrder,\n }: {\n defaultBlocks: DefaultBlocks;\n defaultBlockOrder: readonly (keyof DefaultBlocks)[];\n }) => {\n blocks: Partial<DefaultBlocks> & CustomBlocks;\n // NOTE: This specific combination allows proper autocomplete.\n blockOrder: readonly (keyof DefaultBlocks)[] | readonly (keyof CustomBlocks)[];\n })\n | ReactNode;\n\n/**\n * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.\n *\n * @param components - A map of default block keys to component functions.\n *\n * @example\n * const defaultBlocks = createDefaultBlocks({\n * title: Title,\n * description: Description,\n * form: Form,\n * });\n */\nexport function createDefaultBlocks<T extends Record<string, FunctionComponent<any>>>(\n components: T\n): {\n [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n} {\n return Object.fromEntries(\n Object.entries(components).map(([key, Component]) => [key, createElement(Component, { key })])\n ) as {\n [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n };\n}\n\n/**\n * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.\n * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.\n *\n * @param props\n * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).\n * @param props.defaultBlocks - The default blocks of outer component.\n * @param props.children - A function returning the JSX to render.\n *\n * @example\n * <BlocksOverrideComponent\n * defaultBlocks={defaultFormBlocks}\n * blocksOverride={children}\n * >\n * {({ blocks, blockOrder }) =>\n * blockOrder.map((key) => (\n * <Fragment key={String(key)}>{blocks[key]}</Fragment>\n * ))\n * }\n * </BlocksOverrideComponent>\n */\nexport function BlocksOverrideComponent<\n DefaultBlocks extends Record<string, ReactNode>,\n CustomBlocks extends Record<string, ReactNode>,\n>({\n blocksOverride,\n defaultBlocks,\n defaultBlockOrder,\n children,\n}: {\n blocksOverride: BlocksOverride<DefaultBlocks, CustomBlocks>;\n defaultBlocks: DefaultBlocks;\n defaultBlockOrder: (keyof DefaultBlocks)[];\n children: ({\n blocks,\n blockOrder,\n }: {\n // TODO: Possibly find an alternative to Partial<CustomBlocks>\n blocks: Partial<DefaultBlocks> & Partial<CustomBlocks>;\n blockOrder: readonly (keyof DefaultBlocks | keyof CustomBlocks)[];\n }) => ReactNode;\n}) {\n if (blocksOverride === undefined) {\n return children({\n // TODO: Remove this assertion\n blocks: defaultBlocks as DefaultBlocks & Partial<CustomBlocks>,\n blockOrder: defaultBlockOrder,\n });\n }\n\n if (typeof blocksOverride === 'function') {\n const { blocks, blockOrder } = blocksOverride({\n defaultBlocks,\n defaultBlockOrder,\n });\n\n return children({ blocks, blockOrder });\n }\n\n return blocksOverride;\n}\n\ntype MergeTypes<Object1, Object2> = {\n [K in keyof Object1 | keyof Object2]: K extends keyof Object1\n ? Object1[K]\n : K extends keyof Object2\n ? Object2[K]\n : never;\n};\n\nexport function deepMerge<A extends Record<string, any>, B extends Record<string, any>>(obj1: A, obj2: B) {\n const result: Record<string, any> = { ...obj1 };\n\n for (const key in obj2) {\n if (obj2.hasOwnProperty(key)) {\n const val1 = result[key];\n const val2 = obj2[key];\n\n if (Array.isArray(val1) || Array.isArray(val2)) {\n // If either is an array, replace entirely with obj2's value\n result[key] = val2;\n } else if (typeof val1 === 'object' && val1 !== null && typeof val2 === 'object' && val2 !== null) {\n result[key] = deepMerge(val1, val2);\n } else {\n result[key] = val2;\n }\n }\n }\n\n return result as MergeTypes<B, A>;\n}\n\ntype ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n return classes.flat().filter(Boolean).join(' ');\n}\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import { ComponentProps, Fragment, ReactNode } from 'react';\nimport { SearchByChipProvider, useSearchByChipContext } from './context';\nimport { BlocksOverride, BlocksOverrideComponent, classNames, createDefaultBlocks, deepMerge } from './lib';\nimport './search-by-chip.css';\n\nconst SearchByChip = <CustomBlocks extends Record<string, ReactNode> = {}>({\n searchByChipTitle,\n sectionTitle,\n subtitle,\n onClickChip,\n chips,\n className,\n children,\n ...props\n}: Omit<ComponentProps<'div'>, 'children'> & {\n searchByChipTitle: ReactNode;\n sectionTitle: ReactNode;\n subtitle: ReactNode;\n onClickChip: (value: string) => void;\n chips: {\n value: string;\n label: string;\n }[];\n children?: BlocksOverride<typeof defaultBlocks, CustomBlocks>;\n}) => {\n return (\n <div className={classNames('nbb-search-by-chip', className)} {...props}>\n <SearchByChipProvider\n {...{\n searchByChipTitle,\n sectionTitle,\n subtitle,\n onClickChip,\n chips,\n }}\n >\n <BlocksOverrideComponent\n defaultBlocks={defaultBlocks}\n defaultBlockOrder={Object.keys(defaultBlocks) as (keyof typeof defaultBlocks)[]}\n blocksOverride={children}\n >\n {({ blocks: { chipIcon, chipItem, sectionTitle, ...blocks }, blockOrder }) =>\n blockOrder\n .filter((key) => key in blocks)\n .map<ReactNode>((key) => <Fragment key={String(key)}>{blocks[key]}</Fragment>)\n }\n </BlocksOverrideComponent>\n </SearchByChipProvider>\n </div>\n );\n};\n\nSearchByChip.Title = (props: Partial<ComponentProps<'h4'>>) => {\n const { children, className, searchByChipTitle } = deepMerge(useSearchByChipContext(), props);\n\n return (\n <h4 className={classNames('nbb-search-by-chip-title', className)} {...props}>\n {children || searchByChipTitle}\n </h4>\n );\n};\n\nSearchByChip.Subtitle = (props: Partial<ComponentProps<'h6'>>) => {\n const { children, className, subtitle } = deepMerge(useSearchByChipContext(), props);\n\n return (\n <h6 className={classNames('nbb-search-by-chip-subtitle', className)} {...props}>\n {children || subtitle}\n </h6>\n );\n};\n\nSearchByChip.SectionTitle = (props: Partial<ComponentProps<'h6'>>) => {\n const { children, className, sectionTitle } = deepMerge(useSearchByChipContext(), props);\n\n return (\n <h6 className={classNames('nbb-search-by-chip-section-title', className)} {...props}>\n {children || sectionTitle}\n </h6>\n );\n};\n\nSearchByChip.ChipItem = ({\n onClickChip,\n value,\n label,\n ...props\n}: ComponentProps<'button'> & {\n onClickChip: (value: string) => void;\n value: string;\n label: ReactNode;\n}) => (\n <button onClick={() => onClickChip(value)} className=\"nbb-search-by-chip-item\" {...props}>\n <SearchByChip.ChipIcon />\n <span>{label}</span>\n </button>\n);\n\nSearchByChip.ChipIcon = () => (\n <div className=\"nbb-search-by-chip-icon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.86339 10.5831L3.08339 7.80312L2.13672 8.74312L5.86339 12.4698L13.8634 4.46979L12.9234 3.52979L5.86339 10.5831Z\"\n fill=\"#006EAD\"\n />\n </svg>\n </div>\n);\n\nSearchByChip.ChipSection = (\n props: Partial<\n ComponentProps<'div'> & {\n chips: {\n value: string;\n label: string;\n }[];\n sectionTitle: ReactNode;\n }\n >\n) => {\n const { children, className, chips, sectionTitle, onClickChip } = deepMerge(useSearchByChipContext(), props);\n\n return (\n <div className={classNames('nbb-search-by-chip-subtitle', className)} {...props}>\n {children || (\n <>\n <SearchByChip.SectionTitle>{sectionTitle}</SearchByChip.SectionTitle>\n <div className=\"nbb-search-by-chip-items\">\n {chips?.map((item, i) => (\n <SearchByChip.ChipItem key={i} onClickChip={onClickChip} value={item.value} label={item.label} />\n ))}\n </div>\n </>\n )}\n </div>\n );\n};\n\nconst defaultBlocks = createDefaultBlocks({\n subtitle: SearchByChip.Subtitle,\n title: SearchByChip.Title,\n sectionTitle: SearchByChip.SectionTitle,\n chipIcon: SearchByChip.ChipIcon,\n chipItem: SearchByChip.ChipItem,\n chipSection: SearchByChip.ChipSection,\n});\n\nexport default SearchByChip;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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","x_google_ignoreList":[2]}
package/dist/lib.d.ts CHANGED
@@ -1,25 +1,81 @@
1
- import { DefaultBlocks, DefaultOptions } from './types';
1
+ import { ComponentProps, FunctionComponent, ReactElement, ReactNode } from 'react';
2
2
  /**
3
- * Sets the blocks by merging default blocks with custom blocks provided by the children function.
3
+ * The function to be passed into a block component as `children` to selectively override default blocks, or just a `ReactNode`.
4
4
  *
5
- * @param defaultBlocks - The default blocks to be used.
6
- * @param children - An optional function that returns custom blocks and arguments.
7
- * @param args - Additional unknown arguments.
8
- * @returns An object containing the merged blocks and additional arguments.
5
+ * @example
6
+ * <Block>
7
+ * {({ defaultBlocks: { header, ...defaultBlocks }, defaultBlockOrder }) => ({
8
+ * blocks: {
9
+ * ...defaultBlocks,
10
+ * header: {
11
+ * ...header,
12
+ * props: {
13
+ * ...header.props,
14
+ * label: "Custom Label"
15
+ * }
16
+ * },
17
+ * subheader: <CustomComponent />
18
+ * },
19
+ * blockOrder: ["header", "subheader", "body", "footer"]
20
+ * })}
21
+ * </Block>
9
22
  */
10
- type ChildrenProps = {
23
+ export type BlocksOverride<DefaultBlocks, CustomBlocks> = (({ defaultBlocks, defaultBlockOrder, }: {
11
24
  defaultBlocks: DefaultBlocks;
25
+ defaultBlockOrder: readonly (keyof DefaultBlocks)[];
26
+ }) => {
27
+ blocks: Partial<DefaultBlocks> & CustomBlocks;
28
+ blockOrder: readonly (keyof DefaultBlocks)[] | readonly (keyof CustomBlocks)[];
29
+ }) | ReactNode;
30
+ /**
31
+ * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.
32
+ *
33
+ * @param components - A map of default block keys to component functions.
34
+ *
35
+ * @example
36
+ * const defaultBlocks = createDefaultBlocks({
37
+ * title: Title,
38
+ * description: Description,
39
+ * form: Form,
40
+ * });
41
+ */
42
+ export declare function createDefaultBlocks<T extends Record<string, FunctionComponent<any>>>(components: T): {
43
+ [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;
12
44
  };
13
- export declare function setBlocks(defaultBlocks: DefaultBlocks, defaultOptions: DefaultOptions, children?: (props: ChildrenProps) => DefaultOptions & {
14
- blocks: {
15
- [x: string]: any;
16
- };
17
- }): {
18
- blocks: {
19
- [k: string]: any;
20
- };
21
- hideTitle?: boolean;
45
+ /**
46
+ * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.
47
+ * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.
48
+ *
49
+ * @param props
50
+ * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).
51
+ * @param props.defaultBlocks - The default blocks of outer component.
52
+ * @param props.children - A function returning the JSX to render.
53
+ *
54
+ * @example
55
+ * <BlocksOverrideComponent
56
+ * defaultBlocks={defaultFormBlocks}
57
+ * blocksOverride={children}
58
+ * >
59
+ * {({ blocks, blockOrder }) =>
60
+ * blockOrder.map((key) => (
61
+ * <Fragment key={String(key)}>{blocks[key]}</Fragment>
62
+ * ))
63
+ * }
64
+ * </BlocksOverrideComponent>
65
+ */
66
+ export declare function BlocksOverrideComponent<DefaultBlocks extends Record<string, ReactNode>, CustomBlocks extends Record<string, ReactNode>>({ blocksOverride, defaultBlocks, defaultBlockOrder, children, }: {
67
+ blocksOverride: BlocksOverride<DefaultBlocks, CustomBlocks>;
68
+ defaultBlocks: DefaultBlocks;
69
+ defaultBlockOrder: (keyof DefaultBlocks)[];
70
+ children: ({ blocks, blockOrder, }: {
71
+ blocks: Partial<DefaultBlocks> & Partial<CustomBlocks>;
72
+ blockOrder: readonly (keyof DefaultBlocks | keyof CustomBlocks)[];
73
+ }) => ReactNode;
74
+ }): ReactNode;
75
+ type MergeTypes<Object1, Object2> = {
76
+ [K in keyof Object1 | keyof Object2]: K extends keyof Object1 ? Object1[K] : K extends keyof Object2 ? Object2[K] : never;
22
77
  };
78
+ export declare function deepMerge<A extends Record<string, any>, B extends Record<string, any>>(obj1: A, obj2: B): MergeTypes<B, A>;
23
79
  type ClassName = string | ClassName[] | undefined | null;
24
80
  /**
25
81
  * Utility function to join class names together, ignoring undefined or nil values.
package/dist/lib.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAExD;;;;;;;GAOG;AAGH,KAAK,aAAa,GAAG;IACnB,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEF,wBAAgB,SAAS,CACvB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,cAAc,GAAG;IACpD,MAAM,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;CAC9B;;;;;EAiBF;AAED,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAE1D"}
1
+ {"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAiB,iBAAiB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElG;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,cAAc,CAAC,aAAa,EAAE,YAAY,IAClD,CAAC,CAAC,EACA,aAAa,EACb,iBAAiB,GAClB,EAAE;IACD,aAAa,EAAE,aAAa,CAAC;IAC7B,iBAAiB,EAAE,SAAS,CAAC,MAAM,aAAa,CAAC,EAAE,CAAC;CACrD,KAAK;IACJ,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,YAAY,CAAC;IAE9C,UAAU,EAAE,SAAS,CAAC,MAAM,aAAa,CAAC,EAAE,GAAG,SAAS,CAAC,MAAM,YAAY,CAAC,EAAE,CAAC;CAChF,CAAC,GACF,SAAS,CAAC;AAEd;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,GAAG,CAAC,CAAC,EAClF,UAAU,EAAE,CAAC,GACZ;KACA,CAAC,IAAI,MAAM,CAAC,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;CACzD,CAMA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,uBAAuB,CACrC,aAAa,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAC/C,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAC9C,EACA,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,QAAQ,GACT,EAAE;IACD,cAAc,EAAE,cAAc,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC;IAC5D,aAAa,EAAE,aAAa,CAAC;IAC7B,iBAAiB,EAAE,CAAC,MAAM,aAAa,CAAC,EAAE,CAAC;IAC3C,QAAQ,EAAE,CAAC,EACT,MAAM,EACN,UAAU,GACX,EAAE;QAED,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;QACvD,UAAU,EAAE,SAAS,CAAC,MAAM,aAAa,GAAG,MAAM,YAAY,CAAC,EAAE,CAAC;KACnE,KAAK,SAAS,CAAC;CACjB,aAmBA;AAED,KAAK,UAAU,CAAC,OAAO,EAAE,OAAO,IAAI;KACjC,CAAC,IAAI,MAAM,OAAO,GAAG,MAAM,OAAO,GAAG,CAAC,SAAS,MAAM,OAAO,GACzD,OAAO,CAAC,CAAC,CAAC,GACV,CAAC,SAAS,MAAM,OAAO,GACrB,OAAO,CAAC,CAAC,CAAC,GACV,KAAK;CACZ,CAAC;AAEF,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAmBrF,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,CAClC;AAED,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAE1D"}
@@ -0,0 +1,62 @@
1
+ import { ComponentProps, ReactNode } from 'react';
2
+ import { BlocksOverride } from './lib';
3
+ import './search-by-chip.css';
4
+ declare const SearchByChip: {
5
+ <CustomBlocks extends Record<string, ReactNode> = {}>({ searchByChipTitle, sectionTitle, subtitle, onClickChip, chips, className, children, ...props }: Omit<ComponentProps<"div">, "children"> & {
6
+ searchByChipTitle: ReactNode;
7
+ sectionTitle: ReactNode;
8
+ subtitle: ReactNode;
9
+ onClickChip: (value: string) => void;
10
+ chips: {
11
+ value: string;
12
+ label: string;
13
+ }[];
14
+ children?: BlocksOverride<typeof defaultBlocks, CustomBlocks>;
15
+ }): import("react/jsx-runtime").JSX.Element;
16
+ Title(props: Partial<ComponentProps<"h4">>): import("react/jsx-runtime").JSX.Element;
17
+ Subtitle(props: Partial<ComponentProps<"h6">>): import("react/jsx-runtime").JSX.Element;
18
+ SectionTitle(props: Partial<ComponentProps<"h6">>): import("react/jsx-runtime").JSX.Element;
19
+ ChipItem({ onClickChip, value, label, ...props }: ComponentProps<"button"> & {
20
+ onClickChip: (value: string) => void;
21
+ value: string;
22
+ label: ReactNode;
23
+ }): import("react/jsx-runtime").JSX.Element;
24
+ ChipIcon(): import("react/jsx-runtime").JSX.Element;
25
+ ChipSection(props: Partial<ComponentProps<"div"> & {
26
+ chips: {
27
+ value: string;
28
+ label: string;
29
+ }[];
30
+ sectionTitle: ReactNode;
31
+ }>): import("react/jsx-runtime").JSX.Element;
32
+ };
33
+ declare const defaultBlocks: {
34
+ subtitle: import("react").ReactElement<Partial<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>, (props: Partial<ComponentProps<"h6">>) => import("react/jsx-runtime").JSX.Element>;
35
+ title: import("react").ReactElement<Partial<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>, (props: Partial<ComponentProps<"h4">>) => import("react/jsx-runtime").JSX.Element>;
36
+ sectionTitle: import("react").ReactElement<Partial<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>, (props: Partial<ComponentProps<"h6">>) => import("react/jsx-runtime").JSX.Element>;
37
+ chipIcon: import("react").ReactElement<unknown, () => import("react/jsx-runtime").JSX.Element>;
38
+ chipItem: import("react").ReactElement<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
39
+ onClickChip: (value: string) => void;
40
+ value: string;
41
+ label: ReactNode;
42
+ }, ({ onClickChip, value, label, ...props }: ComponentProps<"button"> & {
43
+ onClickChip: (value: string) => void;
44
+ value: string;
45
+ label: ReactNode;
46
+ }) => import("react/jsx-runtime").JSX.Element>;
47
+ chipSection: import("react").ReactElement<Partial<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
48
+ chips: {
49
+ value: string;
50
+ label: string;
51
+ }[];
52
+ sectionTitle: ReactNode;
53
+ }>, (props: Partial<ComponentProps<"div"> & {
54
+ chips: {
55
+ value: string;
56
+ label: string;
57
+ }[];
58
+ sectionTitle: ReactNode;
59
+ }>) => import("react/jsx-runtime").JSX.Element>;
60
+ };
61
+ export default SearchByChip;
62
+ //# sourceMappingURL=search-by-chip.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"search-by-chip.d.ts","sourceRoot":"","sources":["../src/search-by-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAuE,MAAM,OAAO,CAAC;AAC5G,OAAO,sBAAsB,CAAC;AAE9B,QAAA,MAAM,YAAY;KAAI,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,yGASjE,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;QAC3C,iBAAiB,EAAE,SAAS,CAAC;QAC7B,YAAY,EAAE,SAAS,CAAC;QACxB,QAAQ,EAAE,SAAS,CAAC;QACpB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QACrC,KAAK,EAAE;YACL,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACf,EAAE,CAAC;QACJ,QAAQ,CAAC,EAAE,cAAc,CAAC,OAAO,aAAa,EAAE,YAAY,CAAC,CAAC;KAC/D;iBA4B4B,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;oBAU1B,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;wBAUzB,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;sDAe9D,cAAc,CAAC,QAAQ,CAAC,GAAG;QAC5B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QACrC,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,SAAS,CAAC;KAClB;;uBAmBQ,OAAO,CACZ,cAAc,CAAC,KAAK,CAAC,GAAG;QACtB,KAAK,EAAE;YACL,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACf,EAAE,CAAC;QACJ,YAAY,EAAE,SAAS,CAAC;KACzB,CACF;CApEF,CAAC;AAwFF,QAAA,MAAM,aAAa;uKA5Ea,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;oKAVhC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;2KAoBtB,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;;;qBAgBlD,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;eAC7B,MAAM;eACN,SAAS;iDAHf,cAAc,CAAC,QAAQ,CAAC,GAAG;QAC5B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QACrC,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,SAAS,CAAC;KAClB;;eAqBY;YACL,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACf,EAAE;sBACW,SAAS;gBANpB,OAAO,CACZ,cAAc,CAAC,KAAK,CAAC,GAAG;QACtB,KAAK,EAAE;YACL,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACf,EAAE,CAAC;QACJ,YAAY,EAAE,SAAS,CAAC;KACzB,CACF;CA2BD,CAAC;AAEH,eAAe,YAAY,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nodeblocks/frontend-search-by-chip-block",
3
- "version": "0.0.2",
3
+ "version": "0.1.0",
4
4
  "main": "dist/index.cjs.js",
5
5
  "module": "dist/index.esm.js",
6
6
  "browser": "dist/index.iife.js",
@@ -15,10 +15,10 @@
15
15
  },
16
16
  "peerDependencies": {
17
17
  "react": "^18.3.1",
18
- "react-dom": "^18.0.0"
18
+ "react-dom": "^18.3.1"
19
19
  },
20
20
  "devDependencies": {
21
- "@rollup/plugin-commonjs": "^28.0.1",
21
+ "@rollup/plugin-commonjs": "^28.0.6",
22
22
  "@rollup/plugin-json": "^6.1.0",
23
23
  "@rollup/plugin-node-resolve": "^15.3.0",
24
24
  "@rollup/plugin-typescript": "^12.1.1",
@@ -26,6 +26,7 @@
26
26
  "@types/react-dom": "^18.3.1",
27
27
  "rollup": "^4.28.0",
28
28
  "rollup-plugin-peer-deps-external": "^2.2.4",
29
+ "rollup-plugin-polyfill-node": "^0.13.0",
29
30
  "rollup-plugin-postcss": "^4.0.2",
30
31
  "rollup-plugin-serve": "^1.1.1",
31
32
  "tslib": "^2.8.1",
package/readme.md CHANGED
@@ -3,24 +3,29 @@
3
3
  Welcome to the Nodeblocks Frontend Starter Kit! 🎉 This kit is designed to make building frontend libraries in React super easy, helping you streamline your development workflow with minimal fuss. Let's dive in! 🤿
4
4
 
5
5
  ### ✨ Features
6
+
6
7
  - **🚀 Bundling with Rollup:** Get a clean, minimalistic approach to bundling your JavaScript files for smoother frontend development.
7
8
  - **💙 TypeScript Support:** We've included a pre-configured `tsconfig.json` to ensure your TypeScript setup is strict, efficient, and ready to go.
8
9
  - **⚙️ Peer Dependencies:** Keep bundle sizes lean with React and React DOM set as peer dependencies.
9
10
  - **🎨 CSS Support:** Easily import and process CSS files, giving you more control over your styles.
10
11
 
11
12
  ### 🛠️ How to Use
13
+
12
14
  1. **Clone this repository** 🌀:
15
+
13
16
  ```bash
14
17
  git clone <repository-url>
15
18
  cd <repository-directory>
16
19
  ```
17
20
 
18
21
  2. **Install dependencies** 📦:
22
+
19
23
  ```bash
20
24
  npm install
21
25
  ```
22
26
 
23
27
  3. **Start development** 🛠️:
28
+
24
29
  ```bash
25
30
  npm run watch
26
31
  ```
@@ -48,10 +53,12 @@ This ensures Nodeblocks libraries integrate seamlessly with different workflows.
48
53
  npm link
49
54
  ```
50
55
  2. In the test project you want to run:
56
+
51
57
  ```bash
52
58
  npm i
53
59
  npm link @basaldev/frontend-starter-kit
54
60
  ```
55
- (Note that in real life your library would not be called frontend-starter-kit.)
56
61
 
57
- 3. Then you can follow your usual workflow either with **Create React App** (`npm start`) or with Vite (`npm run dev`). This will give you a development environment where whenever you change your library it will be available in your test project.
62
+ (Note that in real life your library would not be called frontend-starter-kit.)
63
+
64
+ 3. Then you can follow your usual workflow either with **Create React App** (`npm start`) or with Vite (`npm run dev`). This will give you a development environment where whenever you change your library it will be available in your test project.
package/dist/blocks.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { DefaultBlocks } from './types';
2
- export declare const defaultBlocks: DefaultBlocks;
3
- //# sourceMappingURL=blocks.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../src/blocks.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AA6BxC,eAAO,MAAM,aAAa,EAAE,aAM3B,CAAC"}
@@ -1,5 +0,0 @@
1
- import './search-by-chips.css';
2
- import { SearchByChipProps } from './types';
3
- declare const SearchByChip: ({ title, subtitle, sections, onClickChip, className, children }: SearchByChipProps) => import("react/jsx-runtime").JSX.Element;
4
- export default SearchByChip;
5
- //# sourceMappingURL=search-by-chips.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"search-by-chips.d.ts","sourceRoot":"","sources":["../src/search-by-chips.tsx"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC;AAG/B,OAAO,EAAiB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAI3D,QAAA,MAAM,YAAY,GAAI,iEAAiE,iBAAiB,4CAmBvG,CAAC;AAEF,eAAe,YAAY,CAAC"}
package/dist/types.d.ts DELETED
@@ -1,47 +0,0 @@
1
- import React from "react";
2
- export type DefaultBlocks = {
3
- Title: React.FC<{
4
- children: React.ReactNode;
5
- }>;
6
- Subtitle: React.FC<{
7
- children: React.ReactNode;
8
- }>;
9
- SectionTitle: React.FC<{
10
- children: React.ReactNode;
11
- }>;
12
- ChipItem: React.FC<{
13
- onClickChip: (value: string) => void;
14
- value: string;
15
- label: string;
16
- ChipIcon: React.FC;
17
- }>;
18
- ChipIcon: React.FC;
19
- };
20
- export type DefaultOptions = {
21
- hideTitle?: boolean;
22
- };
23
- export declare const defaultOptions: DefaultOptions;
24
- export type ChildrenProps = {
25
- defaultBlocks: DefaultBlocks;
26
- };
27
- export type Chip = {
28
- value: string;
29
- label: string;
30
- };
31
- export type Section = {
32
- title: string;
33
- items: Chip[];
34
- };
35
- export type SearchByChipProps = {
36
- title: string;
37
- subtitle: string;
38
- className: string;
39
- onClickChip: (value: string) => void;
40
- sections: Section[];
41
- children: (props: ChildrenProps) => DefaultOptions & {
42
- blocks: {
43
- [x: string]: any;
44
- };
45
- };
46
- };
47
- //# sourceMappingURL=types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,aAAa,GAAG;IACxB,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;KAAE,CAAC,CAAC;IAChD,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;KAAE,CAAC,CAAC;IACnD,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;KAAE,CAAC,CAAC;IACvD,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAA;KAAE,CAAC,CAAC;IAC/G,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,cAE5B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IACxB,aAAa,EAAE,aAAa,CAAC;CAChC,CAAC;AACF,MAAM,MAAM,IAAI,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAA;AACD,MAAM,MAAM,OAAO,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;CACjB,CAAA;AACD,MAAM,MAAM,iBAAiB,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,cAAc,GAAG;QACjD,MAAM,EAAE;YAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;SAAE,CAAC;KAChC,CAAA;CACJ,CAAA"}