@teamturing/react-kit 2.26.4 → 2.27.0

package/README.md

@@ -2,4 +2,20 @@
 
 튜링 내에서 웹 애플리케이션을 만들 때 필요한 리액트의 핵심 컴포넌트, 훅을 모아둔 패키지입니다.
 
-> react-native와는 호환성이 맞지 않을 수 있습니다.
+## 설치
+
+```bash
+yarn add @teamturing/react-kit styled-components styled-system @emotion/is-prop-valid
+```
+
+## 시작하기
+
+```jsx
+<StyleSheetManager shouldForwardProp={isPropValid}>
+  <ThemeProvider>
+    <App />
+  </ThemeProvider>
+</StyleSheetManager>
+```
+
+[Pretendard](https://github.com/orioncactus/pretendard) 폰트와 사용하는 것을 추천합니다.

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

@@ -1,17 +1,19 @@
-import { ComponentType, HTMLAttributes, HTMLProps, ReactElement, SVGProps } from 'react';
+import { ComponentType, ElementType, HTMLAttributes, HTMLProps, ReactElement, ReactNode, SVGProps } from 'react';
 import { SxProp } from '../../utils/styled-system';
-type FlashVariantType = 'neutral' | 'danger' | 'assist';
+type FlashVariantType = 'neutral' | 'danger' | 'assist' | 'accent';
 type Props = {
     variant?: FlashVariantType;
     icon?: ComponentType<SVGProps<SVGSVGElement>>;
+    trailingVisual?: ElementType | ReactNode;
     buttons?: Array<ReactElement<HTMLProps<HTMLButtonElement>>>;
 } & SxProp & HTMLAttributes<HTMLDivElement>;
 declare const _default: import("react").ForwardRefExoticComponent<{
     variant?: FlashVariantType | undefined;
     icon?: ComponentType<SVGProps<SVGSVGElement>> | undefined;
+    trailingVisual?: string | number | boolean | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined;
     buttons?: ReactElement<HTMLProps<HTMLButtonElement>, string | import("react").JSXElementConstructor<any>>[] | undefined;
 } & SxProp & HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode;
+    children?: ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;
 export type { Props as FlashProps };

package/dist/index.js

@@ -19279,7 +19279,8 @@ const BaseEmptyState = styled__default.default.div`
 
 const Flash = ({
   variant = 'neutral',
-  icon: Icon = variant === 'danger' ? SvgWarning : variant === 'assist' ? SvgTwinkle : SvgInfoInCircle,
+  icon: Icon = variant === 'danger' ? SvgWarning : variant === 'assist' ? SvgTwinkle : variant === 'accent' ? SvgInfoInCircle : SvgInfoInCircle,
+  trailingVisual: TrailingVisual,
   buttons,
   children,
   ...props
@@ -19289,7 +19290,9 @@ const Flash = ({
     ref: ref,
     variant: variant,
     ...props,
-    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {}), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {
+      className: 'flash__leading_icon'
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
       className: 'flash__content',
       children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
         className: 'flash__content__children',
@@ -19298,7 +19301,10 @@ const Flash = ({
         className: 'flash__content__buttons',
         children: buttons
       }) : null]
-    })]
+    }), TrailingVisual ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+      className: 'flash__trailing_visual',
+      children: typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual
+    }) : null]
   });
 };
 const BaseFlash = styled__default.default.div`
@@ -19309,15 +19315,24 @@ const BaseFlash = styled__default.default.div`
   align-items: flex-start;
   padding: ${({
   theme
-}) => forcePixelValue(theme.space[4])};
+}) => forcePixelValue(theme.space[3])};
   border-radius: ${({
   theme
 }) => forcePixelValue(theme.radii.xs)};
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+
+  & .flash__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
 
   & .flash__content__children {
     font-size: ${({
   theme
-}) => forcePixelValue(theme.fontSizes.xs)};
+}) => forcePixelValue(theme.fontSizes.xxs)};
     font-weight: ${({
   theme
 }) => theme.fontWeights.medium};
@@ -19337,12 +19352,22 @@ const BaseFlash = styled__default.default.div`
 }) => forcePixelValue(theme.space[2])};
   }
 
-  & > svg {
-    min-width: ${forcePixelValue(20)};
-    height: ${forcePixelValue(20)};
-    margin-right: ${({
+  & .flash__leading_icon {
+    min-width: ${forcePixelValue(16)};
+    height: ${forcePixelValue(16)};
+  }
+
+  & .flash__trailing_visual {
+    display: flex;
+    flex-direction: column;
+
+    svg {
+      width: ${forcePixelValue(16)};
+      height: ${forcePixelValue(16)};
+      color: ${({
   theme
-}) => forcePixelValue(theme.space[2])};
+}) => theme.colors['icon/neutral/bold']};
+    }
   }
 
   ${({
@@ -19352,13 +19377,13 @@ const BaseFlash = styled__default.default.div`
   variants: {
     neutral: {
       'backgroundColor': 'bg/neutral',
-      '& > svg': {
+      '& .flash__leading_icon': {
         color: 'icon/neutral/bold'
       }
     },
     danger: {
       'backgroundColor': 'bg/danger',
-      '& > svg': {
+      '& .flash__leading_icon': {
         color: 'icon/danger'
       }
     },
@@ -19367,9 +19392,15 @@ const BaseFlash = styled__default.default.div`
       'borderWidth': 1,
       'borderStyle': 'solid',
       'borderColor': 'transparent',
-      '& > svg': {
+      '& .flash__leading_icon': {
         color: 'icon/primary'
       }
+    },
+    accent: {
+      'backgroundColor': 'bg/accent/blue/subtlest',
+      '& .flash__leading_icon': {
+        color: 'icon/accent/blue'
+      }
     }
   }
 })}

package/esm/core/Flash/index.js

@@ -4,6 +4,7 @@ import SvgTwinkle from '../../packages/icons/esm/Twinkle.js';
 import SvgWarning from '../../packages/icons/esm/Warning.js';
 import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import { isNullable } from '../../packages/utils/esm/isNullable.js';
+import { r as reactIsExports } from '../../node_modules/react-is/index.js';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
 import { sx } from '../../utils/styled-system/index.js';
@@ -12,7 +13,8 @@ import { variant } from '../../node_modules/@styled-system/variant/dist/index.es
 
 const Flash = ({
   variant = 'neutral',
-  icon: Icon = variant === 'danger' ? SvgWarning : variant === 'assist' ? SvgTwinkle : SvgInfoInCircle,
+  icon: Icon = variant === 'danger' ? SvgWarning : variant === 'assist' ? SvgTwinkle : variant === 'accent' ? SvgInfoInCircle : SvgInfoInCircle,
+  trailingVisual: TrailingVisual,
   buttons,
   children,
   ...props
@@ -22,7 +24,9 @@ const Flash = ({
     ref: ref,
     variant: variant,
     ...props,
-    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {}), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {
+      className: 'flash__leading_icon'
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
       className: 'flash__content',
       children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
         className: 'flash__content__children',
@@ -31,7 +35,10 @@ const Flash = ({
         className: 'flash__content__buttons',
         children: buttons
       }) : null]
-    })]
+    }), TrailingVisual ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+      className: 'flash__trailing_visual',
+      children: typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual
+    }) : null]
   });
 };
 const BaseFlash = styled.div`
@@ -42,15 +49,24 @@ const BaseFlash = styled.div`
   align-items: flex-start;
   padding: ${({
   theme
-}) => forcePixelValue(theme.space[4])};
+}) => forcePixelValue(theme.space[3])};
   border-radius: ${({
   theme
 }) => forcePixelValue(theme.radii.xs)};
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+
+  & .flash__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
 
   & .flash__content__children {
     font-size: ${({
   theme
-}) => forcePixelValue(theme.fontSizes.xs)};
+}) => forcePixelValue(theme.fontSizes.xxs)};
     font-weight: ${({
   theme
 }) => theme.fontWeights.medium};
@@ -70,12 +86,22 @@ const BaseFlash = styled.div`
 }) => forcePixelValue(theme.space[2])};
   }
 
-  & > svg {
-    min-width: ${forcePixelValue(20)};
-    height: ${forcePixelValue(20)};
-    margin-right: ${({
+  & .flash__leading_icon {
+    min-width: ${forcePixelValue(16)};
+    height: ${forcePixelValue(16)};
+  }
+
+  & .flash__trailing_visual {
+    display: flex;
+    flex-direction: column;
+
+    svg {
+      width: ${forcePixelValue(16)};
+      height: ${forcePixelValue(16)};
+      color: ${({
   theme
-}) => forcePixelValue(theme.space[2])};
+}) => theme.colors['icon/neutral/bold']};
+    }
   }
 
   ${({
@@ -85,13 +111,13 @@ const BaseFlash = styled.div`
   variants: {
     neutral: {
       'backgroundColor': 'bg/neutral',
-      '& > svg': {
+      '& .flash__leading_icon': {
         color: 'icon/neutral/bold'
       }
     },
     danger: {
       'backgroundColor': 'bg/danger',
-      '& > svg': {
+      '& .flash__leading_icon': {
         color: 'icon/danger'
       }
     },
@@ -100,9 +126,15 @@ const BaseFlash = styled.div`
       'borderWidth': 1,
       'borderStyle': 'solid',
       'borderColor': 'transparent',
-      '& > svg': {
+      '& .flash__leading_icon': {
         color: 'icon/primary'
       }
+    },
+    accent: {
+      'backgroundColor': 'bg/accent/blue/subtlest',
+      '& .flash__leading_icon': {
+        color: 'icon/accent/blue'
+      }
     }
   }
 })}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.26.4",
+  "version": "2.27.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",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "2ac83a049bfab481eec183d3baa80964d7a2d4c5"
+  "gitHead": "e5fe17d304318b42494a115dc6d472773065842a"
 }