From d46d0e9636ce90ab800feaca1dc7caae7344f874 Mon Sep 17 00:00:00 2001 From: Elad Mordechai Mizrahi Date: Thu, 28 Sep 2023 08:11:10 +0300 Subject: [PATCH] chore: prepare for publish --- packages/dynamic-grid-core/LICENSE | 21 ++++ packages/dynamic-grid-core/README.md | 143 ++++++++++++++++++++++- packages/dynamic-grid-core/package.json | 3 + packages/dynamic-grid-react/LICENSE | 21 ++++ packages/dynamic-grid-react/README.md | 65 ++++++++++- packages/dynamic-grid-react/package.json | 7 +- packages/dynamic-grid-web/LICENSE | 21 ++++ packages/dynamic-grid-web/README.md | 58 ++++++++- packages/dynamic-grid-web/package.json | 4 +- 9 files changed, 337 insertions(+), 6 deletions(-) create mode 100644 packages/dynamic-grid-core/LICENSE create mode 100644 packages/dynamic-grid-react/LICENSE create mode 100644 packages/dynamic-grid-web/LICENSE diff --git a/packages/dynamic-grid-core/LICENSE b/packages/dynamic-grid-core/LICENSE new file mode 100644 index 0000000..b56bce9 --- /dev/null +++ b/packages/dynamic-grid-core/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 Elad Mordechai Mizrahi + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/dynamic-grid-core/README.md b/packages/dynamic-grid-core/README.md index 962b2f4..dabbb04 100644 --- a/packages/dynamic-grid-core/README.md +++ b/packages/dynamic-grid-core/README.md @@ -1 +1,142 @@ -# dynamic-grid-core +# Dynamic Grid Core + +This package contains the core functionality for a Dynamic Grid. +The grid can be used to display a large number of elements in a compact and organized way, with the number of columns and rows adjusting dynamically based on the available space. + +Installation +To use the dynamic grid in your web application, you can install the dynamic-grid-core package from yarn or npm: + +```bash +yarn add @mordech/dynamic-grid-core +``` + +or + +```bash +npm install @mordech/dynamic-grid-core +``` + +## calcColumns + +This is a function that calculates the number of columns that can fit in a given space, taking into account the minimum width of each column, the width of the elements, and any gaps between the columns. + +### Usage +To use this function, import it into your project and call it with an object that contains the following properties: + +- `minWidth`: The minimum width of each column. + +- `elementWidth`: The width of the elements that will be placed in the columns. + +- `gap`: The gap between each column (optional, defaults to 0). + +- `dividedBy`: The number to divide the number of columns by (optional, defaults to 1). + +- `maxColumns`: The maximum number of columns that can be displayed (optional, defaults to Infinity). + +- `scrollHint`: A number between 0 and 1 that indicates how much of the next column should be shown in a scroll (optional, defaults to 0). + +The function returns the number of columns that can fit in the given space. + +To import the calcColumns function into your project, you can follow these steps: + +```js +import { calcColumns } from '@mordech/dynamic-grid-core'; +``` + +You can now use the calcColumns function in your code. + +Here is an example of how you could use the calcColumns function: + +```js +import { calcColumns } from '@mordech/dynamic-grid-core'; + +const params = { + minWidth: 100, + elementWidth: 200, + gap: 10, + dividedBy: 2, + maxColumns: 4, + scrollHint: 0.5, +}; + +const numColumns = calcColumns(params); + +console.log(numColumns); // Output: 2 +``` + +## core.css + +This file contains the core styles for a dynamic grid layout. + +### Usage + +To use the dynamic grid in your web application, you can import the `core.css` file into your project and use the `.grid` and `.is-scroll` classes. + +To import the `core.css` file into your project: + +```js +import '@mordech/dynamic-grid-core/css/core.css'; +``` + +To use the `.grid` class, add it to the container element of the grid: + +```html +
+ +
+``` + +To use the `.is-scroll` class, add it to the container element of the grid when the grid is scrollable: + +```html +
+ +
+``` + +### Custom Properties + +The `core.css` file uses the following CSS custom properties (also known as CSS variables): + +- `--dg-repeat-count`: Specifies the number of columns in the grid. Defaults to `auto-fit`. +- `--dg-min-width`: Specifies the minimum width of each grid element. Defaults to `200px`. +- `--dg-gap`: Specifies the gap between grid elements. Defaults to `unset`. +- `--dg-scroll-rows`: Specifies the number of rows in the scrollable grid. Defaults to `1`. +- `--dg-scroll-hint`: Specifies the number of columns to show as a hint when scrolling. Defaults to `0`. + +These custom properties are used to define the grid layout and scroll behavior of the dynamic grid. They can be customized by setting their values in the CSS for the `.grid` and `.is-scroll` classes. + +For example, to set the number of columns to 3 and the gap between elements to 10 pixels, you could add the following CSS: + +```css +.grid { + --dg-repeat-count: 3; + --dg-gap: 10px; +} +``` + +### CSS modules + +If you are using CSS modules in your project, you can import the `core.module.css` file instead of the `core.css` file: + +```js +import '@mordech/dynamic-grid-core/css/core.module.css'; +``` + +You can then use the `grid` and `isScroll` classes in your code: + +```js +import styles from '@mordech/dynamic-grid-core/css/core.module.css'; + +
+ +
+``` + +## Browser Support + +The dynamic grid is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. + +## License + +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. diff --git a/packages/dynamic-grid-core/package.json b/packages/dynamic-grid-core/package.json index 4e7ec5e..8c9e0b2 100644 --- a/packages/dynamic-grid-core/package.json +++ b/packages/dynamic-grid-core/package.json @@ -15,5 +15,8 @@ "build": "yarn build-js && yarn build-css", "lint": "eslint --ext .js,.ts ./lib", "prepare": "yarn build" + }, + "publishConfig": { + "access": "public" } } diff --git a/packages/dynamic-grid-react/LICENSE b/packages/dynamic-grid-react/LICENSE new file mode 100644 index 0000000..b56bce9 --- /dev/null +++ b/packages/dynamic-grid-react/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 Elad Mordechai Mizrahi + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/dynamic-grid-react/README.md b/packages/dynamic-grid-react/README.md index 4cddd34..d5acf70 100644 --- a/packages/dynamic-grid-react/README.md +++ b/packages/dynamic-grid-react/README.md @@ -1 +1,64 @@ -# dynamic-grid-react +# DynamicGrid Component + +The `DynamicGrid` component is a React component that allows for dynamic grid layouts. It uses the `@mordech/dynamic-grid-core` library to calculate the number of columns based on the available space and the minimum column width. + +## Installation + +To install the `DynamicGrid` component, you can use `npm` or `yarn`: + +```bash +npm install @mordech/dynamic-grid-react +``` + +```bash +yarn add @mordech/dynamic-grid-react +``` + +## Usage + +To use the `DynamicGrid` component, you can import it and use it like any other React component: + +```jsx +import DynamicGrid from '@mordech/dynamic-grid-react'; + +function MyComponent() { + return ( + + {/* Your grid items here */} + + ); +} +``` + +## Props + +The `DynamicGrid` component accepts the following props: + +- `minColumnWidth` (required): The minimum width of each column. This can be any valid CSS length value in `rem` or `px`, such as `200px` or `10rem`. +- `gridType` (optional): The type of grid to use. This can be either `auto-fill` or `auto-fit`. Defaults to `auto-fill`. +- `gap` (optional): The gap between each grid item. This can be any valid CSS length value, such as `20px` or `2rem`. Defaults to `0`. +- `maxColumns` (optional): The maximum number of columns to display. If there is not enough space for this many columns, the grid will shrink to fit. +- `dividedBy` (optional): The number to divide the available space by to calculate the number of columns. Defaults to `1`. +- `isScroll` (optional): Whether to enable scrolling. Defaults to `false`. +- `scrollOptions` (optional): An object containing options for scrolling. This object can have the following properties: + - `hint`: The number of pixels to show before and after the visible area. Defaults to `0`. + - `hideScrollbar`: Whether to hide the scrollbar. Defaults to `false`. + - `rows`: The number of rows to display. Defaults to `1`. + - `scrollSnapAlign`: The alignment of the scroll snap points. Can be either `start`, `center`, `end`, or `none`. Defaults to `start`. + +## License + +This component is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. diff --git a/packages/dynamic-grid-react/package.json b/packages/dynamic-grid-react/package.json index 6b78ecc..b996812 100644 --- a/packages/dynamic-grid-react/package.json +++ b/packages/dynamic-grid-react/package.json @@ -1,6 +1,5 @@ { "name": "@mordech/dynamic-grid-react", - "private": true, "license": "MIT", "version": "0.0.0", "type": "module", @@ -17,7 +16,8 @@ "dev": "vite", "build": "vite build", "lint": "eslint ./lib --ext ts,tsx --report-unused-disable-directives --max-warnings 0", - "preview": "vite preview" + "preview": "vite preview", + "prepare": "yarn build" }, "dependencies": { "react": "^18.2.0", @@ -25,5 +25,8 @@ }, "devDependencies": { "vite": "^4.4.7" + }, + "publishConfig": { + "access": "public" } } diff --git a/packages/dynamic-grid-web/LICENSE b/packages/dynamic-grid-web/LICENSE new file mode 100644 index 0000000..b56bce9 --- /dev/null +++ b/packages/dynamic-grid-web/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 Elad Mordechai Mizrahi + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/dynamic-grid-web/README.md b/packages/dynamic-grid-web/README.md index 23a192a..f69fdd8 100644 --- a/packages/dynamic-grid-web/README.md +++ b/packages/dynamic-grid-web/README.md @@ -1 +1,57 @@ -# dynamic-grid-web +# DynamicGrid Web Component + +The `MrdDynamicGridElement` component is a web component built with LitElement that allows for dynamic grid layouts. It uses the `@mordech/dynamic-grid-core` library to calculate the number of columns based on the available space and the minimum column width. + +## Installation + +To use the `MrdDynamicGridElement` component, you can install it via npm: + +```bash +npm install @mordech/dynamic-grid-core @mordech/dynamic-grid-element +``` + +## Usage + +To use the `MrdDynamicGridElement` component, you can import it and use it like any other web component: + +```html + + + + + + + + + + + +``` + +## Attributes + +The `MrdDynamicGridElement` component accepts the following attributes: + +- `minColumnWidth` (required): The minimum width of each column. This can be any valid CSS length value in `rem` or `px`, such as `200px` or `10rem`. +- `gridType` (optional): The type of grid to use. This can be either `auto-fill` or `auto-fit`. Defaults to `auto-fill`. +- `gap` (optional): The gap between each grid item. This can be any valid CSS length value, such as `20px` or `2rem`. Defaults to `0`. +- `maxColumns` (optional): The maximum number of columns to display. If there is not enough space for this many columns, the grid will shrink to fit. +- `dividedBy` (optional): The number to divide the available space by to calculate the number of columns. Defaults to `1`. +- `isScroll` (optional): Whether to enable scrolling. Defaults to `false`. +- `scrollOptions` (optional): An object containing options for scrolling. This object can have the following properties: + - `hint`: The number of pixels to show before and after the visible area. Defaults to `0`. + - `hideScrollbar`: Whether to hide the scrollbar. Defaults to `false`. + - `rows`: The number of rows to display. Defaults to `1`. + - `scrollSnapAlign`: The alignment of the scroll snap points. Can be either `start`, `center`, `end`, or `none`. Defaults to `start`. + +## License + +This component is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. diff --git a/packages/dynamic-grid-web/package.json b/packages/dynamic-grid-web/package.json index 79c4487..8b4b9fe 100644 --- a/packages/dynamic-grid-web/package.json +++ b/packages/dynamic-grid-web/package.json @@ -1,6 +1,5 @@ { "name": "@mordech/dynamic-grid-web", - "private": true, "license": "MIT", "version": "0.0.0", "type": "module", @@ -26,5 +25,8 @@ }, "devDependencies": { "vite": "^4.4.7" + }, + "publishConfig": { + "access": "public" } }