react-align 1.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 KaWaite
+
+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.

package/README.md

@@ -0,0 +1,74 @@
+# React Align
+
+A highly customizable and powerful drag 'n drop align system for React.
+
+- Build your own alignment grid as simple or complex as you need
+- Toggleable editor mode
+- Customizable features and styles to integrate into your app effectively
+- Fully written in TypeScript
+
+### **Drag 'n drop**
+
+<img width="638" alt="Screen Shot 2021-06-24 at 18 19 33" src="https://user-images.githubusercontent.com/34051327/123242363-ed2ecd00-d51c-11eb-8f59-b7a74a39e942.png">
+
+### **Alignment**
+
+<img width="1278" alt="Screen Shot 2021-06-24 at 18 46 47" src="https://user-images.githubusercontent.com/34051327/123242051-9e813300-d51c-11eb-88e4-0620db121148.png">
+
+## Basic use
+```tsx
+<div style={{ width: "100vw", height: "100vh" }}> 
+// element containing GridWrapper needs to set the width and height
+    <GridWrapper>
+        <GridSection>
+            <GridArea location={{ section: "left", area: "top" }}>
+                <GridItem
+                    id="1234"
+                    index={1}
+                    minH={100}
+                    maxH={150}
+                    minW={100}
+                    maxW={150}
+                    onReorder={YourReorderCallbackFunction}
+                    onMoveArea={YourMoveAreaCallback}>
+                ...your component
+                </GridItem>
+            </GridArea>
+        </GridSection>
+    </GridWrapper>
+</div>
+```
+All props used in the example above are **mandatory**. 
+
+Location is based on a section/area combo that allows for unique grid layouts. The drag n drop will recognize the GridAreas based on your own desired naming convention that makes sense with your layout.
+
+GridItem's id, index, onReorder and onMoveArea are necessary for the drag n drop as well. The id and index are presumed to be needed in your onMoveArea and OnReorder callback functions, respectively, as a way to manipulate your unique data. Types necessary for the callbacks are:
+
+```tsx
+    type onReorder: (
+        id?: string,
+        originalLocation?: { section: string, area: string },
+        currentIndex?: number,
+        hoverIndex?: number
+    ) => void;
+    onMoveArea: (
+        currentItem?: string,
+        dropLocation?: { section: string, area: string},
+        originalLocation?: { section: string, area: string}
+    ) => void;
+```
+
+Finally, the min/max for width and height is expected to set the GridItem container that will dynamically shrink when space is limited or if you choose to allow your GridItems to extend.
+
+## Editor mode
+Re:Align's editor mode is easily toggleable by passing an *enabled* prop to the GridWrapper. 
+
+<img width="854" alt="Screen Shot 2021-06-24 at 18 15 51" src="https://user-images.githubusercontent.com/34051327/123240889-ad1b1a80-d51b-11eb-9a7d-8f9e75a9b9e0.png">
+
+(If you want to use your own method and/or avoid style changes between editor mode and non-editor mode, pass *draggable* into GridItem and *droppable* into GridArea to enable drag 'n drop functionality directly)
+
+Enjoy!
+
+## License
+
+[MIT License](LICENSE)

package/dist/Grid/GridArea/index.d.ts

@@ -0,0 +1,19 @@
+import React, { CSSProperties } from 'react';
+import '../grid.css';
+export declare type Alignment = 'start' | 'end' | 'centered';
+export declare type AreaProps<T = unknown> = {
+    className?: string;
+    vertical?: boolean;
+    reverse?: boolean;
+    stretch?: boolean;
+    end?: boolean;
+    droppable?: boolean;
+    align?: Alignment;
+    location: T;
+    styles?: CSSProperties;
+    editorStyles?: CSSProperties;
+    iconColor?: string;
+    onAlignChange?: (a: Alignment) => void;
+};
+declare const GridArea: React.FC<AreaProps<Location>>;
+export default GridArea;

package/dist/Grid/GridItem/index.d.ts

@@ -0,0 +1,26 @@
+import React, { CSSProperties } from 'react';
+import '../grid.css';
+export declare type ItemProps<T = unknown> = {
+    className?: string;
+    id: string;
+    index: number;
+    extendable?: boolean;
+    extended?: boolean;
+    draggable?: boolean;
+    onReorder: (id: string, originalLocation: T, currentIndex: number, hoverIndex: number) => void;
+    onMoveArea: (currentItem: string, dropLocation: T, originalLocation?: T) => void;
+    onExtend?: (id: string, extended: boolean) => void;
+    location: T;
+    end?: boolean;
+    vertical?: boolean;
+    styles?: CSSProperties;
+    editorStyles?: CSSProperties;
+    iconSize?: number;
+    iconColor?: string;
+};
+export declare const ItemType: {
+    ITEM: string;
+    GROUP: string;
+};
+declare const GridItem: React.FC<ItemProps<Location>>;
+export default GridItem;

package/dist/Grid/GridSection/index.d.ts

@@ -0,0 +1,13 @@
+import React, { CSSProperties } from 'react';
+import '../grid.css';
+export declare type GridSectionProps = {
+    className?: string;
+    horizontal?: boolean;
+    stretch?: boolean;
+    fixedWidth?: number;
+    fixedHeight?: number;
+    styles?: CSSProperties;
+    editorStyles?: CSSProperties;
+};
+declare const GridSection: React.FC<GridSectionProps>;
+export default GridSection;

package/dist/Grid/GridWrapper/index.d.ts

@@ -0,0 +1,12 @@
+import React, { CSSProperties } from 'react';
+import '../grid.css';
+export declare type GridWrapperProps = {
+    className?: string;
+    enabled?: boolean;
+    vertical?: boolean;
+    stretch?: boolean;
+    styles?: CSSProperties;
+    editorStyles?: CSSProperties;
+};
+declare const GridWrapper: React.FC<GridWrapperProps>;
+export default GridWrapper;

package/dist/Icon/icons.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    horizontalExtend: any;
+    horizontalNormal: any;
+    verticalExtend: any;
+    verticalNormal: any;
+    moveArrows: any;
+    alignStart: any;
+    alignCenter: any;
+    alignEnd: any;
+    alignStartV: any;
+    alignCenterV: any;
+    alignEndV: any;
+};
+export default _default;

package/dist/Icon/index.d.ts

@@ -0,0 +1,12 @@
+import React, { CSSProperties } from 'react';
+import Icons from './icons';
+export declare type Icons = keyof typeof Icons;
+export declare type IconProps = {
+    className?: string;
+    name: string | Icons;
+    size?: number;
+    onClick?: () => void;
+    styles?: CSSProperties;
+};
+declare const Icon: React.FC<IconProps>;
+export default Icon;

package/dist/context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const EditorModeContext: import("react").Context<{
+    enabled: boolean | undefined;
+}>;
+export declare const useEditorMode: () => {
+    enabled: boolean | undefined;
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { default as GridWrapper } from "./Grid/GridWrapper";
+export { default as GridSection } from "./Grid/GridSection";
+export { default as GridArea } from "./Grid/GridArea";
+export { default as GridItem } from "./Grid/GridItem";
+export { default as Icon } from "./Icon";
+export type { Alignment } from "./Grid/GridArea";

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./react-align.cjs.production.min.js')
+} else {
+  module.exports = require('./react-align.cjs.development.js')
+}