@douglasneuroinformatics/libui 3.6.6 → 3.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components.d.ts +5 -1
- package/dist/components.js +4 -1
- package/dist/components.js.map +1 -1
- package/dist/douglasneuroinformatics-libui-3.7.1.tgz +0 -0
- package/dist/tailwind/config.cjs +7 -4
- package/dist/tailwind/config.cjs.map +1 -1
- package/dist/tailwind/config.d.cts +2 -1
- package/package.json +1 -1
- package/src/components/Form/Form.stories.tsx +8 -3
- package/src/components/Form/Form.tsx +7 -0
- package/src/tailwind/config.cts +8 -4
- package/dist/douglasneuroinformatics-libui-3.6.6.tgz +0 -0
|
Binary file
|
package/dist/tailwind/config.cjs
CHANGED
|
@@ -35,13 +35,16 @@ var config = ({
|
|
|
35
35
|
content = [],
|
|
36
36
|
include = [],
|
|
37
37
|
root = void 0,
|
|
38
|
+
libuiInclude = true,
|
|
38
39
|
plugins = [],
|
|
39
40
|
extend = {}
|
|
40
41
|
} = {}) => {
|
|
41
|
-
if (
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
if (libuiInclude) {
|
|
43
|
+
if (isDev) {
|
|
44
|
+
content.push(path.resolve(packageRoot, "src/**/*.{js,jsx,ts,tsx}"));
|
|
45
|
+
} else {
|
|
46
|
+
content.push(path.resolve(packageRoot, "dist/**/*.js"));
|
|
47
|
+
}
|
|
45
48
|
}
|
|
46
49
|
for (const id of include) {
|
|
47
50
|
const baseDir = path.dirname(require.resolve(`${id}/package.json`, { paths: root ? [root] : void 0 }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tailwind/config.cts"],"sourcesContent":["import type { Config } from 'tailwindcss';\nimport type { CustomThemeConfig, PluginsConfig } from 'tailwindcss/types/config';\n\nimport fs = require('node:fs');\nimport path = require('node:path');\n\nimport animate = require('tailwindcss-animate');\nimport containerQueries = require('@tailwindcss/container-queries');\nimport plugin = require('tailwindcss/plugin');\nimport _ = require('lodash-es');\n\nconst packageRoot = path.dirname(require.resolve('@douglasneuroinformatics/libui/package.json'));\n\nconst isDev = fs.existsSync(path.resolve(packageRoot, 'src'));\n\ntype ConfigOptions = {\n content?: string[];\n include?: string[];\n plugins?: PluginsConfig;\n root?: string;\n extend?: {\n theme?: Partial<CustomThemeConfig>;\n };\n};\n\nconst config = ({\n content = [],\n include = [],\n root = undefined,\n plugins = [],\n extend = {}\n}: ConfigOptions = {}): Config => {\n if (isDev) {\n
|
|
1
|
+
{"version":3,"sources":["../../src/tailwind/config.cts"],"sourcesContent":["import type { Config } from 'tailwindcss';\nimport type { CustomThemeConfig, PluginsConfig } from 'tailwindcss/types/config';\n\nimport fs = require('node:fs');\nimport path = require('node:path');\n\nimport animate = require('tailwindcss-animate');\nimport containerQueries = require('@tailwindcss/container-queries');\nimport plugin = require('tailwindcss/plugin');\nimport _ = require('lodash-es');\n\nconst packageRoot = path.dirname(require.resolve('@douglasneuroinformatics/libui/package.json'));\n\nconst isDev = fs.existsSync(path.resolve(packageRoot, 'src'));\n\ntype ConfigOptions = {\n content?: string[];\n include?: string[];\n plugins?: PluginsConfig;\n root?: string;\n libuiInclude?: boolean;\n extend?: {\n theme?: Partial<CustomThemeConfig>;\n };\n};\n\nconst config = ({\n content = [],\n include = [],\n root = undefined,\n libuiInclude = true,\n plugins = [],\n extend = {}\n}: ConfigOptions = {}): Config => {\n if (libuiInclude) {\n if (isDev) {\n content.push(path.resolve(packageRoot, 'src/**/*.{js,jsx,ts,tsx}'));\n } else {\n content.push(path.resolve(packageRoot, 'dist/**/*.js'));\n }\n }\n\n for (const id of include) {\n const baseDir = path.dirname(require.resolve(`${id}/package.json`, { paths: root ? [root] : undefined }));\n content.push(path.resolve(baseDir, 'src/**/*.{js,ts,jsx,tsx}'));\n }\n\n return {\n content,\n darkMode: ['class', '[data-mode=\"dark\"]'],\n plugins: [\n animate,\n containerQueries,\n plugin((api) => {\n api.addUtilities({\n '.scrollbar-none': {\n '&::-webkit-scrollbar': {\n display: 'none'\n },\n '-ms-overflow-style': 'none',\n 'scrollbar-width': 'none'\n }\n });\n }),\n ...plugins\n ],\n theme: {\n container: {\n center: true,\n padding: {\n DEFAULT: '1rem',\n md: '2rem',\n xl: '3rem'\n }\n },\n extend: _.merge(\n {\n animation: {\n 'accordion-down': 'accordion-down 0.2s ease-out',\n 'accordion-up': 'accordion-up 0.2s ease-out',\n spinner: 'spinner-spin 1.7s infinite ease, round 1.7s infinite ease'\n },\n borderRadius: {\n lg: `var(--radius)`,\n md: `calc(var(--radius) - 2px)`,\n sm: 'calc(var(--radius) - 4px)'\n },\n colors: {\n accent: {\n DEFAULT: 'var(--accent)',\n foreground: 'var(--accent-foreground)'\n },\n background: 'var(--background)',\n border: 'var(--border)',\n card: {\n DEFAULT: 'var(--card)',\n foreground: 'var(--card-foreground)'\n },\n destructive: {\n DEFAULT: 'var(--destructive)',\n foreground: 'var(--destructive-foreground)'\n },\n foreground: 'var(--foreground)',\n input: 'var(--input)',\n muted: {\n DEFAULT: 'var(--muted)',\n foreground: 'var(--muted-foreground)'\n },\n popover: {\n DEFAULT: 'var(--popover)',\n foreground: 'var(--popover-foreground)'\n },\n primary: {\n DEFAULT: 'var(--primary)',\n foreground: 'var(--primary-foreground)'\n },\n ring: 'var(--ring)',\n secondary: {\n DEFAULT: 'var(--secondary)',\n foreground: 'var(--secondary-foreground)'\n }\n },\n keyframes: {\n 'accordion-down': {\n from: { height: '0' },\n to: { height: 'var(--radix-accordion-content-height)' }\n },\n 'accordion-up': {\n from: { height: 'var(--radix-accordion-content-height)' },\n to: { height: '0' }\n },\n round: {\n '0%': {\n transform: 'rotate(0deg)'\n },\n '100%': {\n transform: 'rotate(360deg)'\n }\n },\n 'spinner-spin': {\n '0%, 5%, 95%, 100%': {\n boxShadow: `0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em`\n },\n '10%, 59%': {\n boxShadow: `0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em`\n },\n '20%': {\n boxShadow: `0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em`\n },\n '38%': {\n boxShadow: `0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em`\n }\n }\n },\n screens: {\n '2xl': '1400px'\n }\n },\n extend.theme\n )\n }\n };\n};\n\nexport = config;\n"],"mappings":"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","names":[]}
|
|
@@ -6,10 +6,11 @@ type ConfigOptions = {
|
|
|
6
6
|
include?: string[];
|
|
7
7
|
plugins?: PluginsConfig;
|
|
8
8
|
root?: string;
|
|
9
|
+
libuiInclude?: boolean;
|
|
9
10
|
extend?: {
|
|
10
11
|
theme?: Partial<CustomThemeConfig>;
|
|
11
12
|
};
|
|
12
13
|
};
|
|
13
|
-
declare const config: ({ content, include, root, plugins, extend }?: ConfigOptions) => Config;
|
|
14
|
+
declare const config: ({ content, include, root, libuiInclude, plugins, extend }?: ConfigOptions) => Config;
|
|
14
15
|
|
|
15
16
|
export = config;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@douglasneuroinformatics/libui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "3.
|
|
4
|
+
"version": "3.7.1",
|
|
5
5
|
"packageManager": "pnpm@9.12.1",
|
|
6
6
|
"description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
|
|
7
7
|
"author": "Joshua Unrau",
|
|
@@ -26,7 +26,11 @@ const $ExampleFormData = z.object({
|
|
|
26
26
|
date: z.date().optional(),
|
|
27
27
|
numberInput: z.number().optional(),
|
|
28
28
|
numberSlider: z.number().optional(),
|
|
29
|
-
numberRecord: z.
|
|
29
|
+
numberRecord: z.object({
|
|
30
|
+
q1: z.number(),
|
|
31
|
+
q2: z.number(),
|
|
32
|
+
q3: z.number()
|
|
33
|
+
}),
|
|
30
34
|
numberRadio: z.number().min(1).max(5).int().optional(),
|
|
31
35
|
numberSelect: z.number().min(1).max(5).int().optional(),
|
|
32
36
|
stringSelect: z.enum(['a', 'b', 'c']).optional(),
|
|
@@ -405,8 +409,9 @@ export const WithInitialValues: StoryObj<typeof Form> = {
|
|
|
405
409
|
numberInput: 44,
|
|
406
410
|
numberSlider: 45,
|
|
407
411
|
numberRecord: {
|
|
408
|
-
|
|
409
|
-
|
|
412
|
+
q1: 1,
|
|
413
|
+
q2: 2,
|
|
414
|
+
q3: 3
|
|
410
415
|
},
|
|
411
416
|
numberRadio: 3,
|
|
412
417
|
numberSelect: 4,
|
|
@@ -24,6 +24,10 @@ import type { FormErrors } from './types';
|
|
|
24
24
|
|
|
25
25
|
type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>> = {
|
|
26
26
|
[key: `data-${string}`]: unknown;
|
|
27
|
+
additionalButtons?: {
|
|
28
|
+
left?: React.ReactNode;
|
|
29
|
+
right?: React.ReactNode;
|
|
30
|
+
};
|
|
27
31
|
className?: string;
|
|
28
32
|
content: FormContent<TData>;
|
|
29
33
|
fieldsFooter?: React.ReactNode;
|
|
@@ -41,6 +45,7 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
|
|
|
41
45
|
|
|
42
46
|
// eslint-disable-next-line max-lines-per-function
|
|
43
47
|
const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>>({
|
|
48
|
+
additionalButtons,
|
|
44
49
|
className,
|
|
45
50
|
content,
|
|
46
51
|
fieldsFooter,
|
|
@@ -173,6 +178,7 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
|
|
|
173
178
|
)}
|
|
174
179
|
{fieldsFooter}
|
|
175
180
|
<div className="flex w-full gap-3">
|
|
181
|
+
{additionalButtons?.left}
|
|
176
182
|
{/** Note - aria-label is used for testing in downstream packages */}
|
|
177
183
|
<Button aria-label="Submit" className="block w-full" disabled={readOnly} type="submit" variant="primary">
|
|
178
184
|
{submitBtnLabel ?? t('form.submit')}
|
|
@@ -189,6 +195,7 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
|
|
|
189
195
|
{t('form.reset')}
|
|
190
196
|
</Button>
|
|
191
197
|
)}
|
|
198
|
+
{additionalButtons?.right}
|
|
192
199
|
</div>
|
|
193
200
|
{Boolean(rootErrors.length) && <ErrorMessage error={rootErrors} />}
|
|
194
201
|
</form>
|
package/src/tailwind/config.cts
CHANGED
|
@@ -18,6 +18,7 @@ type ConfigOptions = {
|
|
|
18
18
|
include?: string[];
|
|
19
19
|
plugins?: PluginsConfig;
|
|
20
20
|
root?: string;
|
|
21
|
+
libuiInclude?: boolean;
|
|
21
22
|
extend?: {
|
|
22
23
|
theme?: Partial<CustomThemeConfig>;
|
|
23
24
|
};
|
|
@@ -27,13 +28,16 @@ const config = ({
|
|
|
27
28
|
content = [],
|
|
28
29
|
include = [],
|
|
29
30
|
root = undefined,
|
|
31
|
+
libuiInclude = true,
|
|
30
32
|
plugins = [],
|
|
31
33
|
extend = {}
|
|
32
34
|
}: ConfigOptions = {}): Config => {
|
|
33
|
-
if (
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
if (libuiInclude) {
|
|
36
|
+
if (isDev) {
|
|
37
|
+
content.push(path.resolve(packageRoot, 'src/**/*.{js,jsx,ts,tsx}'));
|
|
38
|
+
} else {
|
|
39
|
+
content.push(path.resolve(packageRoot, 'dist/**/*.js'));
|
|
40
|
+
}
|
|
37
41
|
}
|
|
38
42
|
|
|
39
43
|
for (const id of include) {
|
|
Binary file
|