@teamturing/react-kit 2.8.1 → 2.10.0

package/esm/core/Breadcrumbs/BreadcrumbsItem.js

@@ -0,0 +1,77 @@
+import { useRef, useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import Tooltip from '../Tooltip/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const BreadcrumbsItem = ({
+  text,
+  selected = false,
+  truncatedWidth = 100,
+  ...props
+}) => {
+  const itemRef = useRef(null);
+  const [isOverflow, setIsOverflow] = useState(false);
+  useEffect(() => {
+    if (itemRef.current) {
+      if (truncatedWidth <= itemRef.current.clientWidth) {
+        setIsOverflow(true);
+      }
+    }
+  }, []);
+  const baseBreadCrumbsItem = /*#__PURE__*/jsxRuntimeExports.jsx(BaseBreadcrumbsItem, {
+    ref: itemRef,
+    selected: selected,
+    truncatedWidth: truncatedWidth,
+    ...props,
+    children: text
+  });
+  return isOverflow ? /*#__PURE__*/jsxRuntimeExports.jsx(Tooltip, {
+    text: text,
+    direction: 'bottom-center',
+    sx: {
+      display: 'inline-flex'
+    },
+    children: baseBreadCrumbsItem
+  }) : baseBreadCrumbsItem;
+};
+const BaseBreadcrumbsItem = styled.a`
+  display: inline-block;
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xxs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-word;
+  white-space: nowrap;
+
+  max-width: ${({
+  truncatedWidth
+}) => truncatedWidth ? forcePixelValue(truncatedWidth) : ''};
+
+  ${({
+  selected
+}) => selected ? css`
+          color: ${({
+  theme
+}) => theme.colors['text/neutral/subtle']};
+          pointer-events: none;
+        ` : ''}
+`;
+
+export { BreadcrumbsItem as default };

package/esm/core/Breadcrumbs/index.js

@@ -0,0 +1,72 @@
+import { Children, useState } from 'react';
+import styled from 'styled-components';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import BreadcrumbsItem from './BreadcrumbsItem.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const Breadcrumbs = ({
+  children,
+  maxItemCount = 5,
+  ...props
+}) => {
+  const childrenArray = Children.toArray(children);
+  const shouldCollapse = maxItemCount < childrenArray.length;
+  const [isExpanded, setIsExpanded] = useState(!shouldCollapse);
+  const breadcrumbsItems = isExpanded ? childrenArray : [...childrenArray.slice(0, 1), /*#__PURE__*/jsxRuntimeExports.jsx(BreadcrumbsItem, {
+    text: '...',
+    onClick: () => setIsExpanded(true)
+  }, 'collapse'), ...childrenArray.slice(1 + 1 + childrenArray.length - maxItemCount)];
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseBreadcrumbs, {
+    ...props,
+    children: Children.map(breadcrumbsItems, child => /*#__PURE__*/jsxRuntimeExports.jsx(BreadcrumbsItemWrapper, {
+      role: 'listitem',
+      children: child
+    }))
+  });
+};
+const BaseBreadcrumbs = styled.nav`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+  row-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[1])};
+`;
+const BreadcrumbsItemWrapper = styled.span`
+  display: inline-flex;
+
+  &::after {
+    content: '/';
+    font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xxs)};
+    font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+    line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+    color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+    margin-left: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+  }
+
+  &:last-child {
+    &::after {
+      content: none;
+    }
+  }
+`;
+var index = Object.assign(Breadcrumbs, {
+  Item: BreadcrumbsItem
+});
+
+export { index as default };

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/esm/index.js

@@ -1,3 +1,4 @@
+export { default as Breadcrumbs } from './core/Breadcrumbs/index.js';
 export { default as Button } from './core/Button/index.js';
 export { default as Chip } from './core/Chip/index.js';
 export { default as Dialog } from './core/Dialog/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.8.1",
+  "version": "2.10.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",
@@ -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 --aliasRefs --topRef --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": "905ea6546094f215ab7392effb88e7c93cca6ab9"
+  "gitHead": "41d8e954aa81797361f7156a2b65a006f53c48b5"
 }