chore: prepare for publish

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.

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
+<div class="grid">
+  <!-- Grid elements -->
+</div>
+```
+
+To use the `.is-scroll` class, add it to the container element of the grid when the grid is scrollable:
+
+```html
+<div class="grid is-scroll">
+  <!-- Grid elements -->
+</div>
+```
+
+### 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';
+
+<div className={styles.grid}>
+  <!-- Grid elements -->
+</div>
+```
+
+## 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.

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"
   }
 }

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.

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 (
+    <DynamicGrid
+      minColumnWidth="200px"
+      gridType="auto-fill"
+      gap="20px"
+      maxColumns={4}
+      dividedBy={2}
+      scrollOptions={{
+        hint: 100,
+        hideScrollbar: true,
+        rows: 5,
+        scrollSnapAlign: 'start',
+      }}
+      isScroll={true}
+    >
+      {/* Your grid items here */}
+    </DynamicGrid>
+  );
+}
+```
+
+## 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.

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,13 +16,17 @@
     "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",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "vite": "^4.4.7"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

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.

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
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module" src="@mordech/dynamic-grid-web"></script>
+  </head>
+  <body>
+    <mrd-dynamic-grid
+      mincolumnwidth="200px"
+      gridtype="auto-fill"
+      gap="20px"
+      maxcolumns="4"
+      dividedby="2"
+      isscroll="true"
+      scroll-options='{"hint":100,"hideScrollbar":true,"rows":5,"scrollSnapAlign":"start"}'
+    >
+      <!-- Your grid items here -->
+    </mrd-dynamic-grid>
+  </body>
+</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.

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"
   }
 }