@digigov/react-core 2.0.0-d57821ba → 2.0.0-daaf7bdf

package/src/Base/compat/details.native.tsx

@@ -0,0 +1,68 @@
+import React, {
+  useEffect,
+  useState,
+  Children,
+  DetailedHTMLProps,
+  DetailsHTMLAttributes,
+} from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+type HTMLElementProps = Omit<
+  DetailedHTMLProps<
+    DetailsHTMLAttributes<HTMLDetailsElement>,
+    HTMLDetailsElement
+  >,
+  'ref'
+> & {
+  closeIcon?: string;
+  openIcon?: string;
+  placement?: 'before' | 'after';
+};
+
+const CompatDetails = ({
+  children,
+  open = false,
+  placement,
+  closeIcon,
+  openIcon,
+  ...props
+}: HTMLElementProps) => {
+  const [isExpanded, setIsExpanded] = useState(open);
+
+  useEffect(() => {
+    setIsExpanded(open);
+  }, [open]);
+
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const [summaryContent, ...detailsContent] = Children.toArray(children);
+
+  const toggleIcon =
+    closeIcon && openIcon ? (
+      <Text>{isExpanded ? openIcon : closeIcon}</Text>
+    ) : null;
+
+  return (
+    // TODO: Fix `props` type
+    // @ts-expect-error - `props` type is not compatible with `View` props
+    <View {...props}>
+      <TouchableOpacity onPress={toggleExpand} style={styles.summaryContainer}>
+        {placement === 'before' && toggleIcon}
+        {summaryContent}
+        {placement === 'after' && toggleIcon}
+      </TouchableOpacity>
+      {isExpanded && <View>{detailsContent}</View>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  summaryContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+export default CompatDetails;

package/src/Base/compat/li.native.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { View } from 'react-native';
+
+// TODO: Fix `props` type
+interface LiProps {
+  [key: string]: any;
+}
+
+export const Li = (props: LiProps) => {
+  return <View {...props} />;
+};

package/src/Base/compat/ol.native.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+
+export const Ol = ({ children, className, ...props }) => {
+  let listStyle = 'none';
+  if (className.includes('ds-list--bullet')) {
+    listStyle = 'bullet';
+  }
+  if (className.includes('ds-list--number')) {
+    listStyle = 'number';
+  }
+  return (
+    <View {...props} className={className}>
+      {Array.isArray(children)
+        ? children.map((child, index) => {
+            const counter =
+              listStyle === 'number'
+                ? index + 1
+                : listStyle === 'bullet'
+                  ? '•'
+                  : null;
+            return (
+              <View
+                key={index}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  flexWrap: 'nowrap',
+                  gap: 8,
+                  width: '100%',
+                }}
+              >
+                <Text>{counter}</Text>
+                {child}
+              </View>
+            );
+          })
+        : children}
+    </View>
+  );
+};

package/src/Base/index.native.tsx

@@ -0,0 +1,185 @@
+import React, { useMemo } from 'react';
+import { Text, View, ViewProps } from 'react-native';
+import { BaseProps as CoreBaseProps } from '@digigov/react-core/Base/index.web';
+import { mapping } from '@digigov/react-core/Base/mapping.native';
+import { basePropGenerator } from '@digigov/react-core/Base/utils';
+import { wrap } from '@digigov/react-core/Base/wrap.native';
+
+export type BaseProps<C extends React.ElementType> = CoreBaseProps<C> &
+  ViewProps;
+export type BaseComponent = <C extends React.ElementType = 'span'>(
+  props: BaseProps<C>
+) => React.ReactNode | null;
+
+const BooleanMapper = {
+  true: true,
+  false: false,
+  undefined: false,
+  null: false,
+  '': false,
+};
+export const Base: BaseComponent = React.forwardRef(function Base<
+  C extends React.ElementType = 'span',
+>(
+  {
+    as,
+    display,
+    children,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    m,
+    mt,
+    mb,
+    ml,
+    mr,
+    mx,
+    my,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    p,
+    pt,
+    pb,
+    pr,
+    pl,
+    px,
+    py,
+    printHidden,
+    printVisible,
+    hidden,
+    xsUpHidden,
+    smUpHidden,
+    mdUpHidden,
+    lgUpHidden,
+    xlUpHidden,
+    xsHidden,
+    smHidden,
+    mdHidden,
+    lgHidden,
+    xlHidden,
+    className,
+    'aria-expanded': ariaExpanded,
+    ...props
+  }: BaseProps<C>,
+  ref: React.ComponentPropsWithRef<C>['ref']
+) {
+  const classNames = className?.split(' ') || [];
+  if (typeof children === 'string') {
+    children = [children];
+  }
+  if (Array.isArray(children)) {
+    const textClassNames = classNames
+      ?.map((className) => `${className}__text`)
+      .join(' ');
+    children = children.map((child, index) => {
+      if (Array.isArray(child)) {
+        return child.map((child, index) => {
+          if (typeof child === 'string') {
+            return (
+              <Text key={index} className={textClassNames}>
+                {child}
+              </Text>
+            );
+          }
+          return child;
+        });
+      } else if (typeof child === 'string') {
+        return (
+          <Text
+            key={index}
+            className={textClassNames}
+            {...(props.onClick && {
+              onPress: props.onClick,
+            })}
+          >
+            {child}
+          </Text>
+        );
+      }
+      return child;
+    });
+  }
+  const Component = useMemo(() => {
+    const C = mapping[as as keyof JSX.IntrinsicElements] || View;
+    if (
+      classNames.find((className) =>
+        className.match(/__wrapper|__before|__after$/)
+      )
+    ) {
+      return wrap(C);
+    }
+    return C;
+  }, [className]);
+
+  Object.keys(props).forEach((k) => {
+    if (k.startsWith('aria')) {
+      if (BooleanMapper[props[k as keyof typeof props]] !== undefined) {
+        props[k as keyof typeof props] =
+          BooleanMapper[props[k as keyof typeof props]];
+      }
+    }
+  });
+  return (
+    <Component
+      {...props}
+      ref={ref}
+      aria-expanded={
+        (ariaExpanded as unknown as string) === 'false'
+          ? false
+          : ariaExpanded === true
+            ? true
+            : undefined
+      }
+      className={basePropGenerator({
+        display,
+        margin,
+        marginTop,
+        marginBottom,
+        marginLeft,
+        marginRight,
+        m,
+        mt,
+        mb,
+        ml,
+        mr,
+        mx,
+        my,
+        padding,
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight,
+        p,
+        pt,
+        pb,
+        pr,
+        pl,
+        px,
+        py,
+        printHidden,
+        printVisible,
+        hidden,
+        xsUpHidden,
+        smUpHidden,
+        mdUpHidden,
+        lgUpHidden,
+        xlUpHidden,
+        xsHidden,
+        smHidden,
+        mdHidden,
+        lgHidden,
+        xlHidden,
+        className,
+      })}
+    >
+      {children}
+    </Component>
+  );
+});
+
+export default Base;

package/src/Base/index.tsx

@@ -1,257 +1,2 @@
-import React from 'react';
-import clsx from 'clsx';
-
-type AsProp<C extends React.ElementType> = {
-  as?: C;
-};
-
-type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
-
-// This is the first reusable type utility we built
-type PolymorphicComponentProp<
-  C extends React.ElementType,
-  Props = Record<string, unknown>,
-> = React.PropsWithChildren<Props & AsProp<C>> &
-  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
-
-// This is a new type utitlity with ref!
-type PolymorphicComponentPropWithRef<
-  C extends React.ElementType,
-  Props = Record<string, unknown>,
-> = PolymorphicComponentProp<C, Props> & { ref?: any };
-
-// This is the type for the "ref" only
-type PolymorphicRef<C extends React.ElementType> =
-  React.ComponentPropsWithRef<C>['ref'];
-
-/**
- * This is the updated component props using PolymorphicComponentPropWithRef
- */
-export type BaseProps<C extends React.ElementType> =
-  PolymorphicComponentPropWithRef<
-    C,
-    {
-      /** margin is optional. It has not a default value. */
-      margin?: spacingValues;
-      /** marginTop is optional. It has not a default value. */
-      marginTop?: spacingValues;
-      /** marginBottom is optional. It has not a default value. */
-      marginBottom?: spacingValues;
-      /** marginLeft is optional. It has not a default value. */
-      marginLeft?: spacingValues;
-      /** marginRight is optional. It has not a default value. */
-      marginRight?: spacingValues;
-      /** Alternative for margin. Margin is optional. It has not a default value. */
-      m?: spacingValues;
-      /** Alternative for marginTop. MarginTop is optional. It has not a default value. */
-      mt?: spacingValues;
-      /** Alternative for marginBottom. MarginBottom is optional. It has not a default value. */
-      mb?: spacingValues;
-      /** Alternative for marginLeft. MarginLeft is optional. It has not a default value. */
-      ml?: spacingValues;
-      /** Alternative for marginRight. MarginRight is optional. It has not a default value. */
-      mr?: spacingValues;
-      /** Alternative for marginX. MarginX is optional. It has not a default value. */
-      mx?: spacingValues;
-      /** Alternative for marginY. MarginY is optional. It has not a default value. */
-      my?: spacingValues;
-      /** padding is optional. It has not a default value. */
-      padding?: spacingValues;
-      /** paddingTop is optional. It has not a default value. */
-      paddingTop?: spacingValues;
-      /** paddingBottom is optional. It has not a default value. */
-      paddingBottom?: spacingValues;
-      /** paddingLeft is optional. It has not a default value. */
-      paddingLeft?: spacingValues;
-      /** paddingRight is optional. It has not a default value. */
-      paddingRight?: spacingValues;
-      /** Alternative for padding. Padding is optional. It has not a default value. */
-      p?: spacingValues;
-      /** Alternative for paddingTop. PaddingTop is optional. It has not a default value. */
-      pt?: spacingValues;
-      /** Alternative for paddingBottom. PaddingBottom is optional. It has not a default value. */
-      pb?: spacingValues;
-      /** Alternative for paddingLeft. PaddingLeft is optional. It has not a default value. */
-      pl?: spacingValues;
-      /** Alternative for paddingRight. PaddingRight is optional. It has not a default value. */
-      pr?: spacingValues;
-      /** Alternative for paddingX. PaddingX is optional. It has not a default value. */
-      px?: spacingValues;
-      /** Alternative for paddingY. PaddingY is optional. It has not a default value. */
-      py?: spacingValues;
-      /**  printHidden is optional. Default value is false. When true, the component is hidden at print. */
-      printHidden?: boolean;
-      /**  printVisible is optional. When block, the component is displayed as block. When inline, the component is displayed as inline.*/
-      printVisible?: 'block' | 'inline';
-      /** Components will be hidden at all screen sizes. */
-      hidden?: boolean;
-      /** Components will be hidden from 'xs' screen size and up. */
-      xsUpHidden?: boolean;
-      /** Components will be hidden from 'sm' screen size and up. */
-      smUpHidden?: boolean;
-      /** Components will be hidden from 'md' screen size and up. */
-      mdUpHidden?: boolean;
-      /** Components will be hidden from 'lg' screen size and up. */
-      lgUpHidden?: boolean;
-      /** Components will be hidden from 'xl' screen size and up. */
-      xlUpHidden?: boolean;
-      /** Components will be hidden between xs and sm screen size. */
-      xsHidden?: boolean;
-      /** Components will be hidden between sm and md screen size. */
-      smHidden?: boolean;
-      /** Components will be hidden between md and lg screen size. */
-      mdHidden?: boolean;
-      /** Components will be hidden between lg and xl screen size. */
-      lgHidden?: boolean;
-      /** Components will be hidden between xl and 2xl screen size. */
-      xlHidden?: boolean;
-    }
-  >;
-
-type spacingValues =
-  | 0
-  | 0.5
-  | 1
-  | 1.5
-  | 2
-  | 2.5
-  | 3
-  | 3.5
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
-  | 14
-  | 16
-  | 20
-  | 24
-  | 28
-  | 32
-  | 36
-  | 40
-  | 44
-  | 48
-  | 52
-  | 56
-  | 60
-  | 64
-  | 72
-  | 80
-  | 96;
-
-/**
- * This is the type used in the type annotation for the component
- */
-type BaseComponent = <C extends React.ElementType = 'span'>(
-  props: BaseProps<C>
-) => React.ReactNode | null;
-
-export const Base: BaseComponent = React.forwardRef(function Base<
-  C extends React.ElementType = 'span',
->(
-  {
-    as,
-    margin,
-    marginTop,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    m,
-    mt,
-    mb,
-    ml,
-    mr,
-    mx,
-    my,
-    padding,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    p,
-    pt,
-    pb,
-    pr,
-    pl,
-    px,
-    py,
-    printHidden,
-    printVisible,
-    hidden,
-    xsUpHidden,
-    smUpHidden,
-    mdUpHidden,
-    lgUpHidden,
-    xlUpHidden,
-    xsHidden,
-    smHidden,
-    mdHidden,
-    lgHidden,
-    xlHidden,
-    children,
-    className,
-    ...props
-  }: BaseProps<C>,
-  ref?: PolymorphicRef<C>
-) {
-  const Component = as || 'span';
-
-  return (
-    <Component
-      className={clsx(className, {
-        [`ds-m-${margin}`]: margin !== undefined ? true : undefined,
-        [`ds-mt-${marginTop}`]: marginTop !== undefined ? true : undefined,
-        [`ds-mb-${marginBottom}`]:
-          marginBottom !== undefined ? true : undefined,
-        [`ds-mr-${marginRight}`]: marginRight !== undefined ? true : undefined,
-        [`ds-ml-${marginLeft}`]: marginLeft !== undefined ? true : undefined,
-        [`ds-m-${m}`]: m !== undefined ? true : undefined,
-        [`ds-mt-${mt}`]: mt !== undefined ? true : undefined,
-        [`ds-mb-${mb}`]: mb !== undefined ? true : undefined,
-        [`ds-mr-${mr}`]: mr !== undefined ? true : undefined,
-        [`ds-ml-${ml}`]: ml !== undefined ? true : undefined,
-        [`ds-mx-${mx}`]: mx !== undefined ? true : undefined,
-        [`ds-my-${my}`]: my !== undefined ? true : undefined,
-        [`ds-p-${padding}`]: padding !== undefined ? true : undefined,
-        [`ds-pt-${paddingTop}`]: paddingTop !== undefined ? true : undefined,
-        [`ds-pb-${paddingBottom}`]:
-          paddingBottom !== undefined ? true : undefined,
-        [`ds-pr-${paddingRight}`]:
-          paddingRight !== undefined ? true : undefined,
-        [`ds-pl-${paddingLeft}`]: paddingLeft !== undefined ? true : undefined,
-        [`ds-p-${p}`]: p !== undefined ? true : undefined,
-        [`ds-pt-${pt}`]: pt !== undefined ? true : undefined,
-        [`ds-pb-${pb}`]: pb !== undefined ? true : undefined,
-        [`ds-pr-${pr}`]: pr !== undefined ? true : undefined,
-        [`ds-pl-${pl}`]: pl !== undefined ? true : undefined,
-        [`ds-px-${px}`]: px !== undefined ? true : undefined,
-        [`ds-py-${py}`]: py !== undefined ? true : undefined,
-        'ds-print-hidden': !!printHidden,
-        'ds-print-visible-block': printVisible === 'block',
-        'ds-print-visible-inline': printVisible === 'inline',
-        'ds-hidden': !!hidden,
-        'ds-hidden-xs-up': !!xsUpHidden,
-        'ds-hidden-sm-up': !!smUpHidden,
-        'ds-hidden-md-up': !!mdUpHidden,
-        'ds-hidden-lg-up': !!lgUpHidden,
-        'ds-hidden-xl-up': !!xlUpHidden,
-        'ds-hidden-xs': !!xsHidden,
-        'ds-hidden-sm': !!smHidden,
-        'ds-hidden-md': !!mdHidden,
-        'ds-hidden-lg': !!lgHidden,
-        'ds-hidden-xl': !!xlHidden,
-      })}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </Component>
-  );
-});
-
-export default Base;
+export * from '@digigov/react-core/Base/index.web';
+export { default as default } from '@digigov/react-core/Base/index.web';