react-align 1.1.2

package/src/Grid/grid.css

@@ -0,0 +1,78 @@
+/* Default component styles */
+.wrapper {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.section {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.area {
+    display: flex;
+    border: 1px solid transparent;
+    box-sizing: border-box;
+    border-radius: 8px;
+    position: relative;
+}
+
+.area-transition-in {
+    transition: all 0.3s ease-in-out, min-height 0.5s ease-in-out 0.2s, min-width 0.5s ease-in-out 0.2s;
+}
+
+.area-transition-out {
+    transition: all 0.3s ease-in-out 0.4s, min-height 0.5s ease-in-out 0.2s, min-width 0.5s ease-in-out 0.2s;
+}
+
+.item {
+    border: 1px solid transparent;
+    box-sizing: border-box;
+    margin: 6px;
+    border-radius: 6px;
+}
+
+/* Variable styles */
+
+.vertical {
+    flex-direction: column;
+}
+
+.vertical-r {
+    flex-direction: column-reverse;
+}
+
+.horizontal {
+    flex-direction: row;
+}
+
+.horizontal-r {
+    flex-direction: row-reverse;
+}
+
+.stretch {
+    flex: auto;
+}
+
+.middle {
+    flex-grow: 0;
+    flex: auto;
+}
+
+.just-centered {
+    justify-content: center;
+}
+
+.just-end {
+    justify-content: flex-end;
+}
+
+.end {
+    align-items:flex-end;
+}
+
+.hide {
+    display: none;
+}

package/src/Grid/interfaces.ts

@@ -0,0 +1,5 @@
+export type DragItem = {
+  type: string;
+  index: number;
+  id: string;
+};

package/src/Icon/Icons/alignCenter.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="4" fill="black" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 19L5 19L5 5L19 5L19 19ZM20 20L19 20L5 20L4 20L4 19L4 5L4 4L5 4L19 4L20 4L20 5L20 19L20 20ZM16 14C16 14.5523 15.5523 15 15 15C14.4477 15 14 14.5523 14 14L14 10C14 9.44772 14.4477 9 15 9C15.5523 9 16 9.44771 16 10L16 14ZM13 14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14L11 10C11 9.44771 11.4477 9 12 9C12.5523 9 13 9.44771 13 10L13 14ZM9 15C9.55228 15 10 14.5523 10 14L10 10C10 9.44771 9.55228 9 9 9C8.44771 9 8 9.44771 8 10L8 14C8 14.5523 8.44772 15 9 15Z" fill="currentColor"/>
+</svg>

package/src/Icon/Icons/alignCenterV.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="24" width="24" height="24" rx="4" transform="rotate(-90 0 24)" fill="black" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 5L19 19L5 19L5 5L19 5ZM20 4L20 5L20 19L20 20L19 20L5 20L4 20L4 19L4 5L4 4L5 4L19 4L20 4ZM14 8C14.5523 8 15 8.44772 15 9C15 9.55228 14.5523 10 14 10L10 10C9.44772 10 9 9.55229 9 9C9 8.44772 9.44771 8 10 8L14 8ZM14 11C14.5523 11 15 11.4477 15 12C15 12.5523 14.5523 13 14 13L10 13C9.44772 13 9 12.5523 9 12C9 11.4477 9.44771 11 10 11L14 11ZM15 15C15 14.4477 14.5523 14 14 14L10 14C9.44772 14 9 14.4477 9 15C9 15.5523 9.44772 16 10 16L14 16C14.5523 16 15 15.5523 15 15Z" fill="currentColor"/>
+</svg>

package/src/Icon/Icons/alignEnd.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="4" fill="black" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 19L5 19L5 5L19 5L19 19ZM20 20L19 20L5 20L4 20L4 19L4 5L4 4L5 4L19 4L20 4L20 5L20 19L20 20ZM18 14C18 14.5523 17.5523 15 17 15C16.4477 15 16 14.5523 16 14L16 10C16 9.44772 16.4477 9 17 9C17.5523 9 18 9.44771 18 10L18 14ZM15 14C15 14.5523 14.5523 15 14 15C13.4477 15 13 14.5523 13 14L13 10C13 9.44772 13.4477 9 14 9C14.5523 9 15 9.44772 15 10L15 14ZM11 15C11.5523 15 12 14.5523 12 14L12 10C12 9.44772 11.5523 9 11 9C10.4477 9 10 9.44772 10 10L10 14C10 14.5523 10.4477 15 11 15Z" fill="currentColor"/>
+</svg>

package/src/Icon/Icons/alignEndV.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="24" width="24" height="24" rx="4" transform="rotate(-90 0 24)" fill="black" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 19L5 5L19 5L19 19L5 19ZM4 20L4 19L4 5L4 4L5 4L19 4L20 4L20 5L20 19L20 20L19 20L5 20L4 20ZM10 18C9.44772 18 9 17.5523 9 17C9 16.4477 9.44772 16 10 16L14 16C14.5523 16 15 16.4477 15 17C15 17.5523 14.5523 18 14 18L10 18ZM10 15C9.44772 15 9 14.5523 9 14C9 13.4477 9.44771 13 10 13L14 13C14.5523 13 15 13.4477 15 14C15 14.5523 14.5523 15 14 15L10 15ZM9 11C9 11.5523 9.44771 12 10 12L14 12C14.5523 12 15 11.5523 15 11C15 10.4477 14.5523 10 14 10L10 10C9.44771 10 9 10.4477 9 11Z" fill="currentColor"/>
+</svg>

package/src/Icon/Icons/alignStart.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="4" fill="black" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 5H19V19H5V5ZM4 4H5H19H20V5V19V20H19H5H4V19V5V4ZM6 10C6 9.44772 6.44772 9 7 9C7.55228 9 8 9.44772 8 10V14C8 14.5523 7.55228 15 7 15C6.44772 15 6 14.5523 6 14V10ZM9 10C9 9.44772 9.44772 9 10 9C10.5523 9 11 9.44772 11 10V14C11 14.5523 10.5523 15 10 15C9.44772 15 9 14.5523 9 14V10ZM13 9C12.4477 9 12 9.44772 12 10V14C12 14.5523 12.4477 15 13 15C13.5523 15 14 14.5523 14 14V10C14 9.44772 13.5523 9 13 9Z" fill="currentColor"/>
+</svg>

package/src/Icon/Icons/alignStartV.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="24" width="24" height="24" rx="4" transform="rotate(-90 0 24)" fill="black" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 5L19 19L5 19L5 5L19 5ZM20 4L20 5L20 19L20 20L19 20L5 20L4 20L4 19L4 5L4 4L5 4L19 4L20 4ZM14 6C14.5523 6 15 6.44772 15 7C15 7.55229 14.5523 8 14 8L10 8C9.44772 8 9 7.55229 9 7C9 6.44772 9.44772 6 10 6L14 6ZM14 9C14.5523 9 15 9.44772 15 10C15 10.5523 14.5523 11 14 11L10 11C9.44772 11 9 10.5523 9 10C9 9.44772 9.44772 9 10 9L14 9ZM15 13C15 12.4477 14.5523 12 14 12L10 12C9.44772 12 9 12.4477 9 13C9 13.5523 9.44772 14 10 14L14 14C14.5523 14 15 13.5523 15 13Z" fill="currentColor"/>
+</svg>

package/src/Icon/Icons/horizontalExtend.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.999999 20.25L1 3.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23 20.25L23 3.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 12L20.5 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.5 9L20.5 12L17.5 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 12L4 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 15L4 12L7 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/Icon/Icons/horizontalNormal.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 12L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 9L6 12L3 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23 12L18 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 15L18 12L21 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="8.75" y="2.75" width="6.5" height="18.5" rx="1.25" stroke="currentColor" stroke-width="1.5"/>
+</svg>

package/src/Icon/Icons/moveArrows.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.6514 19.0977L11.9998 21.7493L9.34814 19.0977" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 15V21.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.34814 4.90163L11.9998 2.25L14.6514 4.90163" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 9V2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.90163 14.6509L2.25 11.9993L4.90163 9.34766" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 12H2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.0981 9.34766L21.7498 11.9993L19.0981 14.6509" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 12H21.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/Icon/Icons/verticalExtend.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75 0.999999L20.25 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.75 23L20.25 23" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 12L12 20.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 17.5L12 20.5L9 17.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 12L12 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 7L12 4L15 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/Icon/Icons/verticalNormal.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 3L12 6L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 23L12 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 21L12 18L15 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="21.25" y="8.75" width="6.5" height="18.5" rx="1.25" transform="rotate(90 21.25 8.75)" stroke="currentColor" stroke-width="1.5"/>
+</svg>

package/src/Icon/icons.ts

@@ -0,0 +1,25 @@
+import HorizontalExtend from './Icons/horizontalExtend.svg';
+import HorizontalNormal from './Icons/horizontalNormal.svg';
+import VerticalExtend from './Icons/verticalExtend.svg';
+import VerticalNormal from './Icons/verticalNormal.svg';
+import MoveArrows from './Icons/moveArrows.svg';
+import AlignStart from './Icons/alignStart.svg';
+import AlignCenter from './Icons/alignCenter.svg';
+import AlignEnd from './Icons/alignEnd.svg';
+import AlignStartV from './Icons/alignStartV.svg';
+import AlignCenterV from './Icons/alignCenterV.svg';
+import AlignEndV from './Icons/alignEndV.svg';
+
+export default {
+  horizontalExtend: HorizontalExtend,
+  horizontalNormal: HorizontalNormal,
+  verticalExtend: VerticalExtend,
+  verticalNormal: VerticalNormal,
+  moveArrows: MoveArrows,
+  alignStart: AlignStart,
+  alignCenter: AlignCenter,
+  alignEnd: AlignEnd,
+  alignStartV: AlignStartV,
+  alignCenterV: AlignCenterV,
+  alignEndV: AlignEndV,
+};

package/src/Icon/index.tsx

@@ -0,0 +1,45 @@
+import React, { CSSProperties } from 'react';
+import { css } from 'glamor';
+
+import Icons from './icons';
+
+export type Icons = keyof typeof Icons;
+
+export type IconProps = {
+  className?: string;
+  name: string | Icons;
+  size?: number;
+  onClick?: () => void;
+  styles?: CSSProperties;
+};
+
+const IconStyles = (size?: number) =>
+  css({
+    cursor: 'pointer',
+    width: size || 24 + 'px',
+    height: size || 24 + 'px',
+    ' svg': {
+      height: size || 24 + 'px',
+      width: size || 24 + 'px',
+    },
+  });
+
+const Icon: React.FC<IconProps> = ({
+  className,
+  name,
+  size,
+  onClick,
+  styles,
+}) => {
+  const LocalIconComponent = Icons[name as Icons];
+  return (
+    <LocalIconComponent
+      className={className}
+      {...IconStyles(size)}
+      style={styles}
+      onClick={onClick}
+    />
+  );
+};
+
+export default Icon;

package/src/context.tsx

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+
+export const EditorModeContext = createContext<{
+  enabled: boolean | undefined;
+}>({ enabled: undefined });
+export const useEditorMode = () => useContext(EditorModeContext);

package/src/index.tsx

@@ -0,0 +1,8 @@
+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";
+
+// eslint-disable-next-line prettier/prettier
+export type { Alignment } from "./Grid/GridArea";

package/src/stories/GridArea.stories.tsx

@@ -0,0 +1,28 @@
+import React, { ComponentProps } from 'react';
+import { Story } from '@storybook/react';
+
+import GridWrapper from '../Grid/GridWrapper';
+import GridSection from '../Grid/GridSection';
+import GridArea from '../Grid/GridArea';
+
+export default {
+  title: 'Grid',
+  component: GridArea,
+};
+
+const BasicOneAreaOneItem: Story<ComponentProps<typeof GridArea>> = args => (
+  <div style={{ width: '500px', height: '600px' }}>
+    <GridWrapper>
+      <GridSection>
+        <GridArea {...args} />
+      </GridSection>
+    </GridWrapper>
+  </div>
+);
+
+export const Wrapper = BasicOneAreaOneItem.bind({});
+Wrapper.args = {
+  styles: {
+    background: '#4770FF',
+  },
+};