onekijs-ui 0.19.21 → 0.19.23

package/src/components/icon/WarningIcon.tsx

@@ -4,6 +4,7 @@ import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { color } from '../../styles/typography';
 import { IconProps } from './typings';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const WarningIconComponent: FC<IconProps> = (props) => {
   return (
@@ -20,12 +21,14 @@ const WarningIconComponent: FC<IconProps> = (props) => {
 };
 
 export default styled(WarningIconComponent)`
-  ${({ width = '16px', height = '16px', color: cssColor = 'warning' }) => css`
+  ${({ width = '16px', height = '16px', color: cssColor = 'warning', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     .o-icon-warning-svg {
       display: inline-block;
       fill: currentColor;

package/src/components/icon/typings.ts

@@ -1,8 +1,10 @@
 import { Property } from 'csstype';
-import { ColorPropertyTheme } from '../../styles/typings';
+import { ColorPropertyTheme, SpacingPropertyTheme, TLength } from '../../styles/typings';
 
 export type IconProps = React.InputHTMLAttributes<HTMLDivElement> & {
   color?: ColorPropertyTheme | Property.Color;
+  marginRight?: SpacingPropertyTheme| Property.MarginRight<TLength>;
+  marginLeft?: SpacingPropertyTheme| Property.MarginLeft<TLength>;
 };
 
 export type TogglerIconProps = IconProps & {

package/src/components/properties/components/PropertiesComponent.tsx

@@ -1,9 +1,17 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, ReactNode, useMemo } from 'react';
 import { addClassname } from '../../../utils/style';
 import { DefaultPropertiesContext } from '../hooks/usePropertiesContext';
-import { PropertiesContext, PropertiesProps } from '../typings';
+import { PropertiesContext, PropertiesProps, PropertyProps } from '../typings';
 import Property from './Property';
 
+const isReactNode = (value: ReactNode | Partial<PropertyProps>): value is ReactNode => {
+  if (value === null || value === undefined) return true;
+  if (Object.keys(value).includes('value')) {
+    return false;
+  }
+  return true;
+}
+
 const PropertiesComponent: FC<PropertiesProps> = ({
   className,
   properties,
@@ -34,9 +42,13 @@ const PropertiesComponent: FC<PropertiesProps> = ({
   return (
     <DefaultPropertiesContext.Provider value={context}>
       <div className={classNames}>
-        {keys.map((key) => (
-          <PropertyComponent key={key} name={key} value={properties[key]} ErrorBoundaryComponent={ErrorBoundaryComponent} />
-        ))}
+        {keys.map((key) => {
+          const property = properties[key];
+          const value = isReactNode(property) ? property : property.value;
+          const help = isReactNode(property) ? undefined : property.help;
+          const name = isReactNode(property) ? key : property.name ?? key;
+          return <PropertyComponent key={key} name={name} value={value} help={help} ErrorBoundaryComponent={ErrorBoundaryComponent} />
+        })}
       </div>
     </DefaultPropertiesContext.Provider>
   );

package/src/components/properties/components/Property.tsx

@@ -3,6 +3,8 @@ import React, { FC } from 'react';
 import Col from '../../grid/Col';
 import Row from '../../grid/Row';
 import { GridSize } from '../../grid/typings';
+import HelpIcon from '../../icon/HelpIcon';
+import Tooltip from '../../tooltip';
 import usePropertiesContext from '../hooks/usePropertiesContext';
 import { PropertyProps } from '../typings';
 
@@ -19,8 +21,13 @@ const Property: FC<PropertyProps> = React.memo((props) => {
   });
   return (
     <Row className="o-property" gapX="10px" gapY="0px">
-      <Col size={nameSize} sm={context.sm} md={context.md} lg={context.lg} xl={context.xl} className="o-property-name">
-        {name}
+      <Col size={nameSize} sm={context.sm} md={context.md} lg={context.lg} xl={context.xl} className="o-property-key">
+      <span className="o-property-name">{name}</span>
+        {props.help && (
+          <Tooltip content={props.help} placement="top">
+            <HelpIcon />
+          </Tooltip>
+        )}
       </Col>
       <Col
         size={valueSize}

package/src/components/properties/style.ts

@@ -1,9 +1,13 @@
 import { css } from 'styled-components';
-import { paddingY } from '../../styles/spacing';
+import { marginBottom, marginLeft, paddingY } from '../../styles/spacing';
 import { ComponentStyle } from '../../styles/typings';
-import { fontWeight } from '../../styles/typography';
+import { color, fontWeight, textDecoration, textDecorationStyle, textUnderlineOffset } from '../../styles/typography';
 import { PropertiesProps } from './typings';
 import { flexWrap } from '../../styles/flex';
+import { cursor } from '../../styles/interactivity';
+import { display } from '../../styles/display';
+import { alignItems } from '../../styles/alignment';
+import { width } from '../../styles/size';
 
 export const propertiesStyle: ComponentStyle<PropertiesProps> = ({ theme }) => {
   const t = theme.properties;
@@ -15,5 +19,23 @@ export const propertiesStyle: ComponentStyle<PropertiesProps> = ({ theme }) => {
     .o-property-name {
       ${fontWeight(t.fontWeight)}
     }
+    .o-property-help {
+      ${textDecoration('underline')}
+      ${textDecorationStyle('dashed')}
+      ${textUnderlineOffset('0.25rem')}
+      ${cursor('help')}
+    }
+    .o-property-key {
+      ${display('flex')}
+      ${alignItems('center')}
+    }
+
+    .o-tooltip {
+      ${cursor('pointer')}
+      ${width(5)}
+      ${marginBottom('2px')}
+      ${color('pink')}
+      ${marginLeft('xs')}
+    }
   `;
 };

package/src/components/properties/typings.ts

@@ -18,6 +18,7 @@ export type PropertiesProps = {
 export type PropertyProps = {
   value: ReactNode;
   name: string;
+  help?: ReactNode;
   ErrorBoundaryComponent?: ComponentType<PropsWithChildren<PropertyProps>>;
 };
 
@@ -29,4 +30,4 @@ export type PropertiesContext = {
   xl?: GridSize;
 };
 
-export type PropertiesList = AnonymousObject<ReactNode>;
+export type PropertiesList = AnonymousObject<ReactNode | Partial<PropertyProps>>;

package/src/components/table/style.ts

@@ -181,7 +181,12 @@ export const tableStyle: ComponentStyle<TableProps<any>> = ({ theme, fit = true
       .o-table-header-title-container {
         ${borderBottomWidth(0)}
         ${paddingBottom(0)}
+        .o-helper-icon {
+          ${marginLeft('xs')}
+          ${marginTop('-2px')}
+        }
       }
+
     }
 
     .o-table-header-row-title, .o-table-header-row-filter {

package/src/components/wizard/components/Step.tsx

@@ -5,6 +5,7 @@ import { addClassname } from '../../../utils/style';
 import useStep from '../hooks/useStep';
 import { useWizardState } from '../hooks/useWizardState';
 import { StepProps } from '../typings';
+import Alert from '../../alert';
 
 const Step: FCC<StepProps> = ({
   title,
@@ -19,6 +20,7 @@ const Step: FCC<StepProps> = ({
   showTitle = true,
   className,
   onTouch,
+  help,
 }) => {
   const { animate, forwardOnly } = useWizardState();
 
@@ -63,6 +65,7 @@ const Step: FCC<StepProps> = ({
     <CSSTransition in={true} timeout={animate} appear={true} onEnter={onEnter} onEntering={onEntering}>
       <div className={addClassname('o-step-content', className)}>
         {showTitle && <div className="o-step-content-title">{title}</div>}
+        {help && <Alert kind="info" marginBottom='lg'>{help}</Alert>}
         {children}
       </div>
     </CSSTransition>

package/src/components/wizard/typings.ts

@@ -12,6 +12,7 @@ export type ControlledWizardProps = WizardProps & {
 export type StepProps = TabProps & {
   optional?: boolean;
   showTitle?: boolean;
+  help?: ReactNode;
   onTouch?: () => void;
 };
 

package/src/index.ts

@@ -252,6 +252,11 @@ export { default as useTableService } from './components/table/hooks/useTableSer
 export { default as useTextColumn } from './components/table/hooks/useTextColumn';
 export { default as useTextareaColumn } from './components/table/hooks/useTextareaColumn';
 
+export { default as AlertComponent } from './components/alert/components/AlertComponent';
+export { default as Alert } from './components/alert';
+export { default as alertStyle } from './components/alert/style';
+export { AlertProps } from './components/alert/typings';
+
 export { default as FormCardDisplayer } from './components/card/FormCardDisplayer';
 export { filterListStyle, tableStyle } from './components/table/style';
 export {