diff --git a/README.md b/README.md index ab2e162..ec568f1 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ or yarn add @queritylib/react ``` -## Provider +## Provider & Styling To use the Querity components, you need to wrap your application with the `QuerityComponentsProvider`. This provider is responsible for providing the HTML components and the CSS styles needed for the Querity components to function properly. @@ -41,7 +41,9 @@ This allows you to use any CSS framework or custom styles you prefer, such as ** ### Usage -Without any customization: +#### With default theme + +Wrap your application with the `QuerityComponentsProvider` and use the default components: ```tsx import { @@ -61,7 +63,15 @@ function App() { } ``` -Custom components styled with **Tailwind CSS**: +And import the default theme CSS file: + +```css +@import '@queritylib/react/themes/default/style.css'; +``` + +#### Custom components styled with **Tailwind CSS** + +Don't import the default theme CSS file, but instead use your own CSS framework or custom styles. ```tsx import { @@ -96,6 +106,8 @@ function App() { } ``` +See `src/themes/default/style.css` as an example of how to style the default components. + ## Components ### QuerityField @@ -104,7 +116,7 @@ function App() { The invalid state can be styled by detecting the `aria-invalid` attribute. -Here's how it looks (with custom components styled with Tailwind CSS, see [Provider](#provider)): +Here's how it looks (with custom styles, see [Provider & Styling](#provider--styling)): ![QuerityField with valid query](/assets/querity-field-valid.png) @@ -150,7 +162,7 @@ To apply a style when state is invalid add this CSS to your stylesheet: It includes all the necessary components to create a query in a visual way, including filters, sorting, and pagination. -Here's how it looks (with custom components styled with Tailwind CSS, see [Provider](#provider)): +Here's how it looks (with default theme, see [Provider & Styling](#provider--styling)): ![QuerityBuilderUI](/assets/querity-builder-ui.png) diff --git a/assets/querity-builder-ui.png b/assets/querity-builder-ui.png index 236bc1e..99763f1 100644 Binary files a/assets/querity-builder-ui.png and b/assets/querity-builder-ui.png differ diff --git a/package-lock.json b/package-lock.json index f54dde2..e699227 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@queritylib/react", - "version": "1.2.0", + "version": "1.3.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@queritylib/react", - "version": "1.2.0", + "version": "1.3.0", "license": "Apache-2.0", "dependencies": { "antlr4": "^4.13.2" @@ -30,6 +30,7 @@ "jest-transform-stub": "^2.0.0", "rimraf": "^6.0.1", "rollup": "^4.39.0", + "rollup-plugin-copy": "^3.5.0", "rollup-plugin-dts": "^6.2.1", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", @@ -3630,6 +3631,27 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/fs-extra": { + "version": "8.1.5", + "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-8.1.5.tgz", + "integrity": "sha512-0dzKcwO+S8s2kuF5Z9oUWatQJj5Uq/iqphEtE3GQJVRRYm/tD1LglU2UnXi2A8jLq5umkGouOXOR9y0n613ZwQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/@types/glob": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz", + "integrity": "sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/minimatch": "*", + "@types/node": "*" + } + }, "node_modules/@types/graceful-fs": { "version": "4.1.9", "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz", @@ -3693,6 +3715,13 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/minimatch": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz", + "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/node": { "version": "22.14.0", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.0.tgz", @@ -4992,6 +5021,13 @@ "dev": true, "license": "MIT" }, + "node_modules/colorette": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz", + "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==", + "dev": true, + "license": "MIT" + }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -6905,6 +6941,31 @@ "node": ">= 6" } }, + "node_modules/fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "dev": true, + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/fs-extra/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -7804,6 +7865,16 @@ "node": ">=8" } }, + "node_modules/is-plain-object": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz", + "integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/is-potential-custom-element-name": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", @@ -9183,6 +9254,16 @@ "node": ">=6" } }, + "node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "dev": true, + "license": "MIT", + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, "node_modules/jsx-ast-utils": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz", @@ -11379,6 +11460,43 @@ "fsevents": "~2.3.2" } }, + "node_modules/rollup-plugin-copy": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-copy/-/rollup-plugin-copy-3.5.0.tgz", + "integrity": "sha512-wI8D5dvYovRMx/YYKtUNt3Yxaw4ORC9xo6Gt9t22kveWz1enG9QrhVlagzwrxSC455xD1dHMKhIJkbsQ7d48BA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/fs-extra": "^8.0.1", + "colorette": "^1.1.0", + "fs-extra": "^8.1.0", + "globby": "10.0.1", + "is-plain-object": "^3.0.0" + }, + "engines": { + "node": ">=8.3" + } + }, + "node_modules/rollup-plugin-copy/node_modules/globby": { + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.1.tgz", + "integrity": "sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/glob": "^7.1.1", + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.0.3", + "glob": "^7.1.3", + "ignore": "^5.1.1", + "merge2": "^1.2.3", + "slash": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/rollup-plugin-dts": { "version": "6.2.1", "resolved": "https://registry.npmjs.org/rollup-plugin-dts/-/rollup-plugin-dts-6.2.1.tgz", diff --git a/package.json b/package.json index 731d4f5..61aa986 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@queritylib/react", - "version": "1.2.0", + "version": "1.3.0", "description": "Querity React components", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", @@ -10,6 +10,9 @@ "require": "./dist/cjs/index.js", "import": "./dist/esm/index.js", "types": "./dist/types.d.ts" + }, + "./themes/default/style.css": { + "default": "./dist/themes/default/style.css" } }, "files": [ @@ -53,6 +56,7 @@ "jest-transform-stub": "^2.0.0", "rimraf": "^6.0.1", "rollup": "^4.39.0", + "rollup-plugin-copy": "^3.5.0", "rollup-plugin-dts": "^6.2.1", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", diff --git a/rollup.config.js b/rollup.config.js index 42c1529..3f3e019 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -5,6 +5,7 @@ import dts from "rollup-plugin-dts"; import terser from "@rollup/plugin-terser"; import peerDepsExternal from "rollup-plugin-peer-deps-external"; import postcss from 'rollup-plugin-postcss'; +import copy from 'rollup-plugin-copy'; const packageJson = require("./package.json"); @@ -35,6 +36,14 @@ export default [ postcss({ extensions: [ '.css' ], }), + copy({ + targets: [ + { + src: 'src/themes/*', + dest: 'dist/themes', + }, + ], + }), ], external: ["react", "react-dom", "antlr4"], }, diff --git a/src/components/querity-builder/QuerityBuilderUI.css b/src/components/querity-builder/QuerityBuilderUI.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/querity-builder/QuerityBuilderUI.tsx b/src/components/querity-builder/QuerityBuilderUI.tsx index d1f8b16..ff6ea0b 100644 --- a/src/components/querity-builder/QuerityBuilderUI.tsx +++ b/src/components/querity-builder/QuerityBuilderUI.tsx @@ -1,13 +1,7 @@ import React, { useEffect, useState } from "react"; import { QuerityBuilderUIProps } from "./QuerityBuilderUI.types"; import { QuerityBuilder, QuerityParser, useComponents } from "../../utils"; -import { - ConditionWidget, - PaginationWidget, - SortWidget, - AddButton, - RemoveButton, -} from "./widgets"; +import { ConditionWidget, PaginationWidget, SortWidget } from "./widgets"; import { Condition, ConditionWrapper, @@ -17,15 +11,14 @@ import { Pagination, Query, SimpleCondition, - Sort, + Sort } from "../../models"; -import "./QuerityBuilderUI.css"; export const QuerityBuilderUI = (props: QuerityBuilderUIProps) => { const { query, onChange, className } = props; const [queryObj, setQueryObj] = useState({} as Query); const [invalid, setInvalid] = useState(false); - const { Checkbox } = useComponents(); + const { Checkbox, Button } = useComponents(); useEffect(() => { try { @@ -124,10 +117,10 @@ export const QuerityBuilderUI = (props: QuerityBuilderUIProps) => { Invalid query )} -
-
DISTINCT
+
{ }} />
-
-
FILTERS
- {!queryObj.filter && addCondition()} />} +
+
FILTERS
+ {!queryObj.filter && + } {queryObj.filter && ( -
- updateFilter(c)} - showNot - onRemove={() => removeFilter()} - /> -
+ updateFilter(c)} + onRemove={() => removeFilter()} + /> )}
-
-
SORTS
- addSort()} /> +
+
SORTS
{queryObj.sort?.map((sort, index) => ( - <> - updateSort(s, index)} - /> - removeSort(index)} /> - + updateSort(s, index)} + onRemove={() => removeSort(index)} + /> ))} +
-