@teamturing/react-kit 2.9.0 → 2.10.1

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

@@ -1,33 +1,33 @@
 import { ComponentType } from 'react';
-import { ILayoutContainer, ISection, IViewContainer, Layout, View } from '../types';
+import { LayoutContainerType, EnigmaSectionType, ViewContainerType, LayoutType, ViewType } from '../types';
 type Props = {
-    section: ISection;
+    section: EnigmaSectionType;
 };
-export declare const getLayoutComponent: (layoutContainer: ILayoutContainer) => ComponentType<{
-    layout: Layout;
+export declare const getLayoutComponent: (layoutContainer: LayoutContainerType) => ComponentType<{
+    layout: LayoutType;
     viewsObject: {
-        [k: string]: View;
+        [k: string]: ViewType;
     };
     viewComponentsObject: {
         [k: string]: ComponentType<any>;
     };
 }>;
-export declare const getViewComponent: (viewContainer: IViewContainer) => ComponentType<any>;
+export declare const getViewComponent: (viewContainer: ViewContainerType) => ComponentType<any>;
 declare const _default: (({ section: { views, responsiveLayout } }: Props) => import("react/jsx-runtime").JSX.Element) & {
-    TextView: ({ view: { text, textProps } }: {
-        view: import("../types").TextView;
+    TextView: ({ view: { text, textProps, spaceProps } }: {
+        view: import("../types").TextViewType;
     }) => import("react/jsx-runtime").JSX.Element;
-    ImageView: ({ view: { imageProps, ...props } }: {
-        view: import("../types").ImageView;
+    ImageView: ({ view: { spaceProps, ...props } }: {
+        view: import("../types").ImageViewType;
     }) => import("react/jsx-runtime").JSX.Element;
-    IconView: ({ view: { icon, iconProps } }: {
-        view: import("../types").IconView;
+    IconView: ({ view: { icon, iconProps, spaceProps } }: {
+        view: import("../types").IconViewType;
     }) => import("react/jsx-runtime").JSX.Element;
-    ChipGroupView: ({ view: { chips, chipGroupProps: { size, gapX, gapY }, }, }: {
-        view: import("../types").ChipGroupView;
+    ChipGroupView: ({ view: { chips, chipGroupProps, spaceProps }, }: {
+        view: import("../types").ChipGroupViewType;
     }) => import("react/jsx-runtime").JSX.Element;
-    GridView: ({ view: { units, gridProps } }: {
-        view: import("../types").GridView;
+    GridView: ({ view: { units, gridProps, spaceProps } }: {
+        view: import("../types").GridViewType;
     }) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;

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

@@ -1,4 +1,4 @@
-import { SingleColumnLayout as SingleColumnLayoutType } from '../../types';
+import { SingleColumnLayoutType as SingleColumnLayoutType } from '../../types';
 type Props = {
     layout: SingleColumnLayoutType;
     viewsObject: any;

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

@@ -1,6 +1,6 @@
-import { ChipGroupView as ChipGroupViewType } from '../../types';
+import { ChipGroupViewType } from '../../types';
 type Props = {
     view: ChipGroupViewType;
 };
-declare const ChipGroupView: ({ view: { chips, chipGroupProps: { size, gapX, gapY }, }, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const ChipGroupView: ({ view: { chips, chipGroupProps, spaceProps }, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ChipGroupView;

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

@@ -1,6 +1,6 @@
-import { GridView as GridViewType } from '../../types';
+import { GridViewType } from '../../types';
 type Props = {
     view: GridViewType;
 };
-declare const GridView: ({ view: { units, gridProps } }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const GridView: ({ view: { units, gridProps, spaceProps } }: Props) => import("react/jsx-runtime").JSX.Element;
 export default GridView;

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

@@ -1,6 +1,6 @@
-import { IconView as IconViewType } from '../../types';
+import { IconViewType } from '../../types';
 type Props = {
     view: IconViewType;
 };
-declare const IconView: ({ view: { icon, iconProps } }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const IconView: ({ view: { icon, iconProps, spaceProps } }: Props) => import("react/jsx-runtime").JSX.Element;
 export default IconView;

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

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

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

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

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

@@ -1,74 +1,74 @@
 import icons from '@teamturing/icons';
-import { ChipProps, StackProps, TextProps, SpaceProps, GridProps, GridUnitProps, StyledIconProps, ImageProps } from '../..';
+import { ChipProps, StackProps, TextProps, SpaceProps, GridProps, GridUnitProps, StyledIconProps, ImageProps, AsProp } from '../..';
 /**
  * View Related Model
  */
-export type TextView = {
+export type TextViewType = {
     text: string;
-    textProps?: TextProps;
+    textProps?: {} & Pick<TextProps, 'typography' | 'textAlign' | 'color'> & AsProp;
+    spaceProps?: Omit<SpaceProps, 'sx'>;
 };
-export type ImageView = {
+export type ImageViewType = {
     src: ImageProps['src'];
     alt: ImageProps['alt'];
     width: ImageProps['width'];
     height: ImageProps['height'];
-    imageProps: Omit<ImageProps, 'src' | 'alt' | 'width' | 'height'>;
+    spaceProps?: Omit<SpaceProps, 'sx'>;
 };
-export type IconView = {
+export type IconViewType = {
     icon: keyof typeof icons;
-    iconProps: Omit<StyledIconProps, 'icon'>;
+    iconProps?: {} & Pick<StyledIconProps, 'size' | 'color'>;
+    spaceProps?: Omit<SpaceProps, 'sx'>;
 };
-export type ChipGroupView = {
+export type ChipGroupViewType = {
     chips: Array<{
         text: string;
         variant: ChipProps['variant'];
     }>;
-    chipGroupProps: {
-        size: ChipProps['size'];
-        gapX: StackProps['gapX'];
-        gapY: StackProps['gapY'];
-    };
+    chipGroupProps?: {} & Pick<ChipProps, 'size'> & Pick<StackProps, 'gapX' | 'gapY'>;
+    spaceProps?: Omit<SpaceProps, 'sx'>;
 };
-export type GridView = {
+export type GridViewType = {
     units: Array<{
-        views: IViewContainer[];
-        unitProps: Omit<GridUnitProps, 'sx'>;
+        views: ViewContainerType[];
+        unitProps: Pick<GridUnitProps, 'size' | 'order'>;
     }>;
-    gridProps: Omit<GridProps, 'sx' | 'as'>;
+    gridProps?: Pick<GridProps, 'gapX' | 'gapY' | 'alignItems' | 'justifyContent' | 'wrap'>;
+    spaceProps?: Omit<SpaceProps, 'sx'>;
 };
-export type View = TextView | ImageView | IconView | ChipGroupView | GridView;
+export type ViewType = TextViewType | ImageViewType | IconViewType | ChipGroupViewType | GridViewType;
 export type ViewComponentType = 'TextView' | 'ImageView' | 'IconView' | 'ChipGroupView' | 'GridView';
-export interface IViewContainer {
+export interface ViewContainerType {
     id: string;
     viewComponentType: ViewComponentType;
-    view: View;
+    view: ViewType;
 }
 /**
  * Layout Related Model
  */
-export interface IViewContainerDetail {
+export interface ViewContainerDetailType {
     viewContainerId: string;
-    spaceProps: SpaceProps;
+    spaceProps?: Omit<SpaceProps, 'sx'>;
 }
-export type SingleColumnLayout = {
-    main: IViewContainerDetail[];
+export type SingleColumnLayoutType = {
+    main: ViewContainerDetailType[];
 };
-export type Layout = SingleColumnLayout;
+export type LayoutType = SingleColumnLayoutType;
 export type LayoutComponentType = 'SingleColumnLayout';
-export interface ILayoutContainer {
+export interface LayoutContainerType {
     layoutComponentType: LayoutComponentType;
-    layout: Layout;
+    layout: LayoutType;
 }
-export interface IResponsiveLayoutContainer {
-    mobile: ILayoutContainer;
-    tablet?: ILayoutContainer;
-    desktop?: ILayoutContainer;
+export interface ResponsiveLayoutContainerType {
+    mobile: LayoutContainerType;
+    tablet?: LayoutContainerType;
+    desktop?: LayoutContainerType;
 }
 /**
  * Section Related Model
  */
-export interface ISection {
+export interface EnigmaSectionType {
     id: string;
-    views: IViewContainer[];
-    responsiveLayout: IResponsiveLayoutContainer;
+    views: ViewContainerType[];
+    responsiveLayout: ResponsiveLayoutContainerType;
 }

package/dist/index.js

@@ -19133,23 +19133,29 @@ const SingleColumnLayout = ({
 
 const ImageView = ({
   view: {
-    imageProps,
+    spaceProps,
     ...props
   }
 }) => /*#__PURE__*/jsxRuntimeExports.jsx(Image, {
   loading: 'lazy',
   display: 'block',
   ...props,
-  ...imageProps
+  sx: {
+    ...spaceProps
+  }
 });
 
 const TextView = ({
   view: {
     text,
-    textProps
+    textProps,
+    spaceProps
   }
 }) => /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
   ...textProps,
+  sx: {
+    ...spaceProps
+  },
   children: text
 });
 
@@ -19159,68 +19165,80 @@ const IconView = ({
     iconProps = {
       color: 'icon/neutral',
       size: 24
-    }
+    },
+    spaceProps
   }
 }) => /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
   icon: icons[icon],
-  ...iconProps
+  ...iconProps,
+  sx: {
+    ...spaceProps
+  }
 });
 
 const ChipGroupView = ({
   view: {
     chips = [],
-    chipGroupProps: {
-      size = 'm',
-      gapX = 1,
-      gapY = 1
-    }
+    chipGroupProps = {
+      size: 'm',
+      gapX: 1,
+      gapY: 1
+    },
+    spaceProps
   }
-}) => /*#__PURE__*/jsxRuntimeExports.jsx(Stack$1, {
-  gapX: gapX,
-  gapY: gapY,
-  children: /*#__PURE__*/jsxRuntimeExports.jsx(ItemList, {
-    items: chips,
-    renderItem: ({
-      text,
-      variant
-    }) => /*#__PURE__*/jsxRuntimeExports.jsx(Chip, {
-      size: size,
-      variant: variant,
-      children: text
-    }),
-    renderItemWrapper: (children, {
-      text,
-      variant
-    }, i) => /*#__PURE__*/jsxRuntimeExports.jsx(Stack$1.Item, {
-      children: children
-    }, `${text}-${variant}-${i}`)
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Space, {
+  ...spaceProps,
+  children: /*#__PURE__*/jsxRuntimeExports.jsx(Stack$1, {
+    gapX: chipGroupProps.gapX,
+    gapY: chipGroupProps.gapY,
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(ItemList, {
+      items: chips,
+      renderItem: ({
+        text,
+        variant
+      }) => /*#__PURE__*/jsxRuntimeExports.jsx(Chip, {
+        size: chipGroupProps.size,
+        variant: variant,
+        children: text
+      }),
+      renderItemWrapper: (children, {
+        text,
+        variant
+      }, i) => /*#__PURE__*/jsxRuntimeExports.jsx(Stack$1.Item, {
+        children: children
+      }, `${text}-${variant}-${i}`)
+    })
   })
 });
 
 const GridView = ({
   view: {
     units = [],
-    gridProps
+    gridProps,
+    spaceProps
   }
-}) => /*#__PURE__*/jsxRuntimeExports.jsx(Grid$1, {
-  ...gridProps,
-  children: units.map(({
-    views: viewContainers,
-    unitProps
-  }) => {
-    const unitKeySeperator = '_';
-    const unitKey = viewContainers.map(({
-      id
-    }) => id).join(unitKeySeperator);
-    return /*#__PURE__*/jsxRuntimeExports.jsx(Grid$1.Unit, {
-      ...unitProps,
-      children: viewContainers.map(viewContainer => {
-        const ViewComponent = getViewComponent(viewContainer);
-        return /*#__PURE__*/jsxRuntimeExports.jsx(ViewComponent, {
-          view: viewContainer.view
-        }, viewContainer.id);
-      })
-    }, unitKey);
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Space, {
+  ...spaceProps,
+  children: /*#__PURE__*/jsxRuntimeExports.jsx(Grid$1, {
+    ...gridProps,
+    children: units.map(({
+      views: viewContainers,
+      unitProps
+    }) => {
+      const unitKeySeperator = '_';
+      const unitKey = viewContainers.map(({
+        id
+      }) => id).join(unitKeySeperator);
+      return /*#__PURE__*/jsxRuntimeExports.jsx(Grid$1.Unit, {
+        ...unitProps,
+        children: viewContainers.map(viewContainer => {
+          const ViewComponent = getViewComponent(viewContainer);
+          return /*#__PURE__*/jsxRuntimeExports.jsx(ViewComponent, {
+            view: viewContainer.view
+          }, viewContainer.id);
+        })
+      }, unitKey);
+    })
   })
 });
 

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

@@ -1,36 +1,41 @@
 import Chip from '../../../core/Chip/index.js';
 import ItemList from '../../../core/ItemList/index.js';
+import Space from '../../../core/Space/index.js';
 import Stack from '../../../core/Stack/index.js';
 import { j as jsxRuntimeExports } from '../../../node_modules/react/jsx-runtime.js';
 
 const ChipGroupView = ({
   view: {
     chips = [],
-    chipGroupProps: {
-      size = 'm',
-      gapX = 1,
-      gapY = 1
-    }
+    chipGroupProps = {
+      size: 'm',
+      gapX: 1,
+      gapY: 1
+    },
+    spaceProps
   }
-}) => /*#__PURE__*/jsxRuntimeExports.jsx(Stack, {
-  gapX: gapX,
-  gapY: gapY,
-  children: /*#__PURE__*/jsxRuntimeExports.jsx(ItemList, {
-    items: chips,
-    renderItem: ({
-      text,
-      variant
-    }) => /*#__PURE__*/jsxRuntimeExports.jsx(Chip, {
-      size: size,
-      variant: variant,
-      children: text
-    }),
-    renderItemWrapper: (children, {
-      text,
-      variant
-    }, i) => /*#__PURE__*/jsxRuntimeExports.jsx(Stack.Item, {
-      children: children
-    }, `${text}-${variant}-${i}`)
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Space, {
+  ...spaceProps,
+  children: /*#__PURE__*/jsxRuntimeExports.jsx(Stack, {
+    gapX: chipGroupProps.gapX,
+    gapY: chipGroupProps.gapY,
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(ItemList, {
+      items: chips,
+      renderItem: ({
+        text,
+        variant
+      }) => /*#__PURE__*/jsxRuntimeExports.jsx(Chip, {
+        size: chipGroupProps.size,
+        variant: variant,
+        children: text
+      }),
+      renderItemWrapper: (children, {
+        text,
+        variant
+      }, i) => /*#__PURE__*/jsxRuntimeExports.jsx(Stack.Item, {
+        children: children
+      }, `${text}-${variant}-${i}`)
+    })
   })
 });
 

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

@@ -1,31 +1,36 @@
 import Grid from '../../../core/Grid/index.js';
+import Space from '../../../core/Space/index.js';
 import { getViewComponent } from '../../EnigmaUI/index.js';
 import { j as jsxRuntimeExports } from '../../../node_modules/react/jsx-runtime.js';
 
 const GridView = ({
   view: {
     units = [],
-    gridProps
+    gridProps,
+    spaceProps
   }
-}) => /*#__PURE__*/jsxRuntimeExports.jsx(Grid, {
-  ...gridProps,
-  children: units.map(({
-    views: viewContainers,
-    unitProps
-  }) => {
-    const unitKeySeperator = '_';
-    const unitKey = viewContainers.map(({
-      id
-    }) => id).join(unitKeySeperator);
-    return /*#__PURE__*/jsxRuntimeExports.jsx(Grid.Unit, {
-      ...unitProps,
-      children: viewContainers.map(viewContainer => {
-        const ViewComponent = getViewComponent(viewContainer);
-        return /*#__PURE__*/jsxRuntimeExports.jsx(ViewComponent, {
-          view: viewContainer.view
-        }, viewContainer.id);
-      })
-    }, unitKey);
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Space, {
+  ...spaceProps,
+  children: /*#__PURE__*/jsxRuntimeExports.jsx(Grid, {
+    ...gridProps,
+    children: units.map(({
+      views: viewContainers,
+      unitProps
+    }) => {
+      const unitKeySeperator = '_';
+      const unitKey = viewContainers.map(({
+        id
+      }) => id).join(unitKeySeperator);
+      return /*#__PURE__*/jsxRuntimeExports.jsx(Grid.Unit, {
+        ...unitProps,
+        children: viewContainers.map(viewContainer => {
+          const ViewComponent = getViewComponent(viewContainer);
+          return /*#__PURE__*/jsxRuntimeExports.jsx(ViewComponent, {
+            view: viewContainer.view
+          }, viewContainer.id);
+        })
+      }, unitKey);
+    })
   })
 });
 

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

@@ -8,11 +8,15 @@ const IconView = ({
     iconProps = {
       color: 'icon/neutral',
       size: 24
-    }
+    },
+    spaceProps
   }
 }) => /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
   icon: index[icon],
-  ...iconProps
+  ...iconProps,
+  sx: {
+    ...spaceProps
+  }
 });
 
 export { IconView as default };

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

@@ -3,14 +3,16 @@ import { j as jsxRuntimeExports } from '../../../node_modules/react/jsx-runtime.
 
 const ImageView = ({
   view: {
-    imageProps,
+    spaceProps,
     ...props
   }
 }) => /*#__PURE__*/jsxRuntimeExports.jsx(Image, {
   loading: 'lazy',
   display: 'block',
   ...props,
-  ...imageProps
+  sx: {
+    ...spaceProps
+  }
 });
 
 export { ImageView as default };

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

@@ -4,10 +4,14 @@ import { j as jsxRuntimeExports } from '../../../node_modules/react/jsx-runtime.
 const TextView = ({
   view: {
     text,
-    textProps
+    textProps,
+    spaceProps
   }
 }) => /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
   ...textProps,
+  sx: {
+    ...spaceProps
+  },
   children: text
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.9.0",
+  "version": "2.10.1",
   "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",
@@ -24,7 +24,8 @@
   "scripts": {
     "check:lint": "eslint ./src --cache",
     "check:type": "tsc --noEmit",
-    "build": "rm -rf dist esm && tsc --project tsconfig.cjs.json --declaration --emitDeclarationOnly --declarationDir dist && rollup --config rollup.config.js"
+    "build": "rm -rf dist esm && tsc --project tsconfig.cjs.json --declaration --emitDeclarationOnly --declarationDir dist && rollup --config rollup.config.js",
+    "generate-enigma-json-schema": "typescript-json-schema ./tsconfig.json EnigmaSectionType --include=./src/enigma/types/index.ts --aliasRefs --topRef --include=EnigmaSectionType --out ./src/enigma/schema/generated.json"
   },
   "bugs": {
     "url": "https://github.com/weareteamturing/bombe/issues"
@@ -39,7 +40,8 @@
     "csstype": "^3.1.2",
     "react": "^18.2.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "styled-components": "^6.0.7"
+    "styled-components": "^6.0.7",
+    "typescript-json-schema": "^0.62.0"
   },
   "peerDependencies": {
     "@styled-system/css": "^5.1.5",
@@ -57,5 +59,5 @@
     "react-is": "^18.2.0",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "6ff713421bda642cb8b25320dd43e1e769c14cbd"
+  "gitHead": "588c13c2b6514cd7f1e9b7ca438ebb63ee0ee1ca"
 }