@teamturing/react-kit 1.4.0 → 2.0.0

package/dist/core/Image/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { LayoutProps } from 'styled-system';
+import { SxProp } from '../../utils/styled-system';
+type Props = {} & SxProp & LayoutProps;
+declare const Image: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, Props>>;
+export default Image;
+export type { Props as ImageProps };

package/dist/enigma/EnigmaUI/index.d.ts

@@ -0,0 +1,6 @@
+import { ISection } from '../types';
+type Props = {
+    section: ISection;
+};
+declare const EnigmaUI: ({ section: { views, responsiveLayout } }: Props) => import("react/jsx-runtime").JSX.Element;
+export default EnigmaUI;

package/dist/enigma/Layout/SingleColumnLayout/index.d.ts

@@ -0,0 +1,8 @@
+import { SingleColumnLayout as SingleColumnLayoutType } from '../../types';
+type Props = {
+    layout: SingleColumnLayoutType;
+    viewsObject: any;
+    viewComponentsObject: any;
+};
+declare const SingleColumnLayout: ({ layout, viewsObject, viewComponentsObject }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SingleColumnLayout;

package/dist/enigma/Layout/index.d.ts

@@ -0,0 +1 @@
+export { default as SingleColumnLayout } from './SingleColumnLayout';

package/dist/enigma/View/ImageView/index.d.ts

@@ -0,0 +1,6 @@
+import { ImageView as ImageViewType } from '../../types';
+type Props = {
+    view: ImageViewType;
+};
+declare const ImageView: ({ view: { ...props } }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ImageView;

package/dist/enigma/View/TextView/index.d.ts

@@ -0,0 +1,6 @@
+import { TextView as TextViewType } from '../../types';
+type Props = {
+    view: TextViewType;
+};
+declare const TextView: ({ view: { text, textProps } }: Props) => import("react/jsx-runtime").JSX.Element;
+export default TextView;

package/dist/enigma/View/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ImageView } from './ImageView';
+export { default as TextView } from './TextView';

package/dist/enigma/types/index.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Default Types
+ */
+type TextProps = any;
+type SpaceProps = any;
+/**
+ * View Related Model
+ */
+export type TextView = {
+    text: string;
+    textProps?: TextProps;
+};
+export type ImageView = {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+};
+export type View = TextView | ImageView;
+export type ViewComponentType = 'TextView' | 'ImageView';
+export interface IViewContainer {
+    id: string;
+    viewComponentType: ViewComponentType;
+    view: View;
+}
+/**
+ * Layout Related Model
+ */
+export interface IViewContainerDetail {
+    viewContainerId: string;
+    spaceProps: SpaceProps;
+}
+export type SingleColumnLayout = {
+    main: IViewContainerDetail[];
+};
+export type Layout = SingleColumnLayout;
+export type LayoutComponentType = 'SingleColumnLayout';
+export interface ILayoutContainer {
+    layoutComponentType: LayoutComponentType;
+    layout: Layout;
+}
+export interface IResponsiveLayoutContainer {
+    mobile: ILayoutContainer;
+    tablet?: ILayoutContainer;
+    desktop?: ILayoutContainer;
+}
+/**
+ * Section Related Model
+ */
+export interface ISection {
+    id: string;
+    views: IViewContainer[];
+    responsiveLayout: IResponsiveLayoutContainer;
+}
+export {};

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+/**
+ * core components
+ */
 export { default as Button } from './core/Button';
 export type { ButtonProps } from './core/Button';
 export { default as Chip } from './core/Chip';
@@ -10,6 +13,8 @@ export { default as IconButton } from './core/IconButton';
 export type { IconButtonProps } from './core/IconButton';
 export { default as IconToggleButton } from './core/IconToggleButton';
 export type { IconToggleButtonProps } from './core/IconToggleButton';
+export { default as Image } from './core/Image';
+export type { ImageProps } from './core/Image';
 export { default as ItemList } from './core/ItemList';
 export type { ItemListProps } from './core/ItemList';
 export { default as Space } from './core/Space';
@@ -26,6 +31,13 @@ export { default as View } from './core/View';
 export type { ViewProps } from './core/View';
 export { default as UnstyledButton } from './core/_UnstyledButton';
 export type { UnstyledButtonProps } from './core/_UnstyledButton';
+/**
+ * enigma component
+ */
+export { default as EnigmaUI } from './enigma/EnigmaUI';
+/**
+ * hooks
+ */
 export { default as useDevice } from './hook/useDevice';
 export { default as useOutsideClick } from './hook/useOutsideClick';
 export { default as useProvidedOrCreatedRef } from './hook/useProvidedOrCreatedRef';

package/dist/index.js

@@ -26,6 +26,15 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
+const device = {
+  deviceDesktop: 1280,
+  deviceTablet: 900,
+  deviceMobile: 640
+};
+
+const baseBreakpoints = [device.deviceMobile, device.deviceTablet, device.deviceDesktop];
+const breakpoints = baseBreakpoints.map(value => `${value + 1}px`);
+
 const gray = {
   gray50: '#F9FAFB',
   gray100: '#F3F4F6',
@@ -3849,6 +3858,11 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
   }
 }), sx);
 
+const Image = styled__default.default.img`
+  ${layout}
+  ${sx}
+`;
+
 const ItemList = ({
   items,
   renderItem,
@@ -3937,6 +3951,126 @@ const StyledIcon = ({
   children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {})
 });
 
+const useMediaQuery = query => {
+  const getMatches = query => {
+    /**
+     * SSR 문제를 방지하기 위해 있습니다.
+     */
+    if (typeof window !== 'undefined') {
+      return window.matchMedia(query).matches;
+    }
+    return false;
+  };
+  const [matches, setMatches] = React.useState(getMatches(query));
+  function handleChange() {
+    setMatches(getMatches(query));
+  }
+  React.useEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    /**
+     * 클라이언트에서 mediaQuery를 반영하기 위해 로드됩니다.
+     */
+    handleChange();
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange);
+    } else {
+      matchMedia.addEventListener('change', handleChange);
+    }
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange);
+      } else {
+        matchMedia.removeEventListener('change', handleChange);
+      }
+    };
+  }, [query]);
+  return matches;
+};
+
+const SingleColumnLayout = ({
+  layout,
+  viewsObject,
+  viewComponentsObject
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(ItemList, {
+  items: layout.main,
+  renderItem: ({
+    viewContainerId
+  }) => {
+    const view = viewsObject[viewContainerId];
+    const ViewComponent = viewComponentsObject[viewContainerId];
+    return ViewComponent ? /*#__PURE__*/jsxRuntimeExports.jsx(ViewComponent, {
+      view: view
+    }) : null;
+  },
+  renderItemWrapper: (children, {
+    viewContainerId,
+    spaceProps
+  }, i) => /*#__PURE__*/jsxRuntimeExports.jsx(Space, {
+    ...spaceProps,
+    children: children
+  }, [viewContainerId, `${i}`].join('-'))
+});
+
+const ImageView = ({
+  view: {
+    ...props
+  }
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Image, {
+  loading: 'lazy',
+  ...props
+});
+
+const TextView = ({
+  view: {
+    text,
+    textProps
+  }
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+  ...textProps,
+  children: text
+});
+
+const EnigmaUI = ({
+  section: {
+    views,
+    responsiveLayout
+  }
+}) => {
+  const isMatchDesktop = useMediaQuery(`screen and (min-width: ${breakpoints[1]})`);
+  const isMatchTablet = useMediaQuery(`screen and (min-width: ${breakpoints[0]})`);
+  const media = isMatchDesktop ? 'desktop' : !isMatchDesktop && isMatchTablet ? 'tablet' : 'mobile';
+  const layoutContainer = responsiveLayout[media] || responsiveLayout['desktop'] || responsiveLayout['tablet'] || responsiveLayout['mobile'];
+  const LayoutComponent = getLayoutComponent(layoutContainer);
+  const layout = layoutContainer.layout;
+  const viewsObject = Object.fromEntries(views.map(viewContainer => {
+    return [viewContainer.id, viewContainer.view];
+  }));
+  const viewComponentsObject = Object.fromEntries(views.map(view => {
+    return [view.id, getViewComponent(view)];
+  }));
+  return /*#__PURE__*/jsxRuntimeExports.jsx(LayoutComponent, {
+    layout: layout,
+    viewsObject: viewsObject,
+    viewComponentsObject: viewComponentsObject
+  });
+};
+const getLayoutComponent = layoutContainer => {
+  const renderableLayoutComponent = {
+    SingleColumnLayout: SingleColumnLayout
+  };
+  const LayoutComponent = renderableLayoutComponent[layoutContainer.layoutComponentType];
+  return LayoutComponent;
+};
+const getViewComponent = viewContainer => {
+  const renderableViewComponent = {
+    TextView: TextView,
+    ImageView: ImageView
+  };
+  const ViewComponent = renderableViewComponent[viewContainer.viewComponentType];
+  return ViewComponent;
+};
+
 /**
  * lodash (Custom Build) <https://lodash.com/>
  * Build: `lodash modularize exports="npm" -o ./`
@@ -4441,10 +4575,12 @@ const useToggleHandler = ({
 
 exports.Button = Button;
 exports.Chip = Chip;
+exports.EnigmaUI = EnigmaUI;
 exports.GradientText = GradientText;
 exports.Grid = index$1;
 exports.IconButton = IconButton;
 exports.IconToggleButton = IconToggleButton;
+exports.Image = Image;
 exports.ItemList = ItemList;
 exports.Space = Space;
 exports.Spinner = Spinner;

package/esm/core/Image/index.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
+import { sx } from '../../utils/styled-system/index.js';
+import { layout } from '../../node_modules/@styled-system/layout/dist/index.esm.js';
+
+const Image = styled.img`
+  ${layout}
+  ${sx}
+`;
+
+export { Image as default };

package/esm/enigma/EnigmaUI/index.js

@@ -0,0 +1,48 @@
+import breakpoints from '../../packages/token-studio/esm/token/breakpoints/index.js';
+import useMediaQuery from '../../hook/useMediaQuery.js';
+import SingleColumnLayout from '../Layout/SingleColumnLayout/index.js';
+import ImageView from '../View/ImageView/index.js';
+import TextView from '../View/TextView/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const EnigmaUI = ({
+  section: {
+    views,
+    responsiveLayout
+  }
+}) => {
+  const isMatchDesktop = useMediaQuery(`screen and (min-width: ${breakpoints[1]})`);
+  const isMatchTablet = useMediaQuery(`screen and (min-width: ${breakpoints[0]})`);
+  const media = isMatchDesktop ? 'desktop' : !isMatchDesktop && isMatchTablet ? 'tablet' : 'mobile';
+  const layoutContainer = responsiveLayout[media] || responsiveLayout['desktop'] || responsiveLayout['tablet'] || responsiveLayout['mobile'];
+  const LayoutComponent = getLayoutComponent(layoutContainer);
+  const layout = layoutContainer.layout;
+  const viewsObject = Object.fromEntries(views.map(viewContainer => {
+    return [viewContainer.id, viewContainer.view];
+  }));
+  const viewComponentsObject = Object.fromEntries(views.map(view => {
+    return [view.id, getViewComponent(view)];
+  }));
+  return /*#__PURE__*/jsxRuntimeExports.jsx(LayoutComponent, {
+    layout: layout,
+    viewsObject: viewsObject,
+    viewComponentsObject: viewComponentsObject
+  });
+};
+const getLayoutComponent = layoutContainer => {
+  const renderableLayoutComponent = {
+    SingleColumnLayout: SingleColumnLayout
+  };
+  const LayoutComponent = renderableLayoutComponent[layoutContainer.layoutComponentType];
+  return LayoutComponent;
+};
+const getViewComponent = viewContainer => {
+  const renderableViewComponent = {
+    TextView: TextView,
+    ImageView: ImageView
+  };
+  const ViewComponent = renderableViewComponent[viewContainer.viewComponentType];
+  return ViewComponent;
+};
+
+export { EnigmaUI as default };

package/esm/enigma/Layout/SingleColumnLayout/index.js

@@ -0,0 +1,29 @@
+import ItemList from '../../../core/ItemList/index.js';
+import Space from '../../../core/Space/index.js';
+import { j as jsxRuntimeExports } from '../../../node_modules/react/jsx-runtime.js';
+
+const SingleColumnLayout = ({
+  layout,
+  viewsObject,
+  viewComponentsObject
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(ItemList, {
+  items: layout.main,
+  renderItem: ({
+    viewContainerId
+  }) => {
+    const view = viewsObject[viewContainerId];
+    const ViewComponent = viewComponentsObject[viewContainerId];
+    return ViewComponent ? /*#__PURE__*/jsxRuntimeExports.jsx(ViewComponent, {
+      view: view
+    }) : null;
+  },
+  renderItemWrapper: (children, {
+    viewContainerId,
+    spaceProps
+  }, i) => /*#__PURE__*/jsxRuntimeExports.jsx(Space, {
+    ...spaceProps,
+    children: children
+  }, [viewContainerId, `${i}`].join('-'))
+});
+
+export { SingleColumnLayout as default };

package/esm/enigma/View/ImageView/index.js

@@ -0,0 +1,13 @@
+import Image from '../../../core/Image/index.js';
+import { j as jsxRuntimeExports } from '../../../node_modules/react/jsx-runtime.js';
+
+const ImageView = ({
+  view: {
+    ...props
+  }
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Image, {
+  loading: 'lazy',
+  ...props
+});
+
+export { ImageView as default };

package/esm/enigma/View/TextView/index.js

@@ -0,0 +1,14 @@
+import Text from '../../../core/Text/index.js';
+import { j as jsxRuntimeExports } from '../../../node_modules/react/jsx-runtime.js';
+
+const TextView = ({
+  view: {
+    text,
+    textProps
+  }
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+  ...textProps,
+  children: text
+});
+
+export { TextView as default };

package/esm/hook/useMediaQuery.js

@@ -0,0 +1,40 @@
+import { useState, useEffect } from 'react';
+
+const useMediaQuery = query => {
+  const getMatches = query => {
+    /**
+     * SSR 문제를 방지하기 위해 있습니다.
+     */
+    if (typeof window !== 'undefined') {
+      return window.matchMedia(query).matches;
+    }
+    return false;
+  };
+  const [matches, setMatches] = useState(getMatches(query));
+  function handleChange() {
+    setMatches(getMatches(query));
+  }
+  useEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    /**
+     * 클라이언트에서 mediaQuery를 반영하기 위해 로드됩니다.
+     */
+    handleChange();
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange);
+    } else {
+      matchMedia.addEventListener('change', handleChange);
+    }
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange);
+      } else {
+        matchMedia.removeEventListener('change', handleChange);
+      }
+    };
+  }, [query]);
+  return matches;
+};
+
+export { useMediaQuery as default };

package/esm/index.js

@@ -4,6 +4,7 @@ export { default as GradientText } from './core/GradientText/index.js';
 export { default as Grid } from './core/Grid/index.js';
 export { default as IconButton } from './core/IconButton/index.js';
 export { default as IconToggleButton } from './core/IconToggleButton/index.js';
+export { default as Image } from './core/Image/index.js';
 export { default as ItemList } from './core/ItemList/index.js';
 export { default as Space } from './core/Space/index.js';
 export { default as Spinner } from './core/Spinner/index.js';
@@ -12,6 +13,7 @@ export { default as StyledIcon } from './core/StyledIcon/index.js';
 export { default as Text } from './core/Text/index.js';
 export { default as View } from './core/View/index.js';
 export { default as UnstyledButton } from './core/_UnstyledButton.js';
+export { default as EnigmaUI } from './enigma/EnigmaUI/index.js';
 export { default as useDevice } from './hook/useDevice.js';
 export { default as useOutsideClick } from './hook/useOutsideClick.js';
 export { default as useProvidedOrCreatedRef } from './hook/useProvidedOrCreatedRef.js';

package/esm/packages/token-studio/esm/foundation/breakpoint/device.js

@@ -0,0 +1,7 @@
+const device = {
+  deviceDesktop: 1280,
+  deviceTablet: 900,
+  deviceMobile: 640
+};
+
+export { device as default };

package/esm/packages/token-studio/esm/token/breakpoints/index.js

@@ -0,0 +1,6 @@
+import device from '../../foundation/breakpoint/device.js';
+
+const baseBreakpoints = [device.deviceMobile, device.deviceTablet, device.deviceDesktop];
+const breakpoints = baseBreakpoints.map(value => `${value + 1}px`);
+
+export { baseBreakpoints, breakpoints as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -55,5 +55,5 @@
     "lodash.throttle": "^4.1.1",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "e302acb51e25f77d313c324dafbaaed9655abeae"
+  "gitHead": "6360f6a5b2308f6bda0bf7ea8c23a13ff3ad9050"
 }