@digigov/react-core 2.0.0-rc.17 → 2.0.0-rc.19

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.ReactElement | 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';

package/src/Base/index.web.tsx

@@ -0,0 +1,268 @@
+import React from 'react';
+import { basePropGenerator } from '@digigov/react-core/Base/utils';
+
+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 | SpacingMediaValues;
+      /** marginTop is optional. It has not a default value. */
+      marginTop?: SpacingValues | SpacingMediaValues;
+      /** marginBottom is optional. It has not a default value. */
+      marginBottom?: SpacingValues | SpacingMediaValues;
+      /** marginLeft is optional. It has not a default value. */
+      marginLeft?: SpacingValues | SpacingMediaValues;
+      /** marginRight is optional. It has not a default value. */
+      marginRight?: SpacingValues | SpacingMediaValues;
+      /** Alternative for margin. Margin is optional. It has not a default value. */
+      m?: SpacingValues | SpacingMediaValues;
+      /** Alternative for marginTop. MarginTop is optional. It has not a default value. */
+      mt?: SpacingValues | SpacingMediaValues;
+      /** Alternative for marginBottom. MarginBottom is optional. It has not a default value. */
+      mb?: SpacingValues | SpacingMediaValues;
+      /** Alternative for marginLeft. MarginLeft is optional. It has not a default value. */
+      ml?: SpacingValues | SpacingMediaValues;
+      /** Alternative for marginRight. MarginRight is optional. It has not a default value. */
+      mr?: SpacingValues | SpacingMediaValues;
+      /** Alternative for marginX. MarginX is optional. It has not a default value. */
+      mx?: SpacingValues | SpacingMediaValues;
+      /** Alternative for marginY. MarginY is optional. It has not a default value. */
+      my?: SpacingValues | SpacingMediaValues;
+      /** padding is optional. It has not a default value. */
+      padding?: SpacingValues | SpacingMediaValues;
+      /** paddingTop is optional. It has not a default value. */
+      paddingTop?: SpacingValues | SpacingMediaValues;
+      /** paddingBottom is optional. It has not a default value. */
+      paddingBottom?: SpacingValues | SpacingMediaValues;
+      /** paddingLeft is optional. It has not a default value. */
+      paddingLeft?: SpacingValues | SpacingMediaValues;
+      /** paddingRight is optional. It has not a default value. */
+      paddingRight?: SpacingValues | SpacingMediaValues;
+      /** Alternative for padding. Padding is optional. It has not a default value. */
+      p?: SpacingValues | SpacingMediaValues;
+      /** Alternative for paddingTop. PaddingTop is optional. It has not a default value. */
+      pt?: SpacingValues | SpacingMediaValues;
+      /** Alternative for paddingBottom. PaddingBottom is optional. It has not a default value. */
+      pb?: SpacingValues | SpacingMediaValues;
+      /** Alternative for paddingLeft. PaddingLeft is optional. It has not a default value. */
+      pl?: SpacingValues | SpacingMediaValues;
+      /** Alternative for paddingRight. PaddingRight is optional. It has not a default value. */
+      pr?: SpacingValues | SpacingMediaValues;
+      /** Alternative for paddingX. PaddingX is optional. It has not a default value. */
+      px?: SpacingValues | SpacingMediaValues;
+      /** Alternative for paddingY. PaddingY is optional. It has not a default value. */
+      py?: SpacingValues | SpacingMediaValues;
+      /**  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;
+      /**  display is optional. It has not a default value. */
+      display?: 'flex' | 'block' | 'none';
+    }
+  >;
+
+export 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;
+
+export type SpacingMediaValues = {
+  xs?: SpacingValues;
+  sm?: SpacingValues;
+  md?: SpacingValues;
+  lg?: SpacingValues;
+  xl?: SpacingValues;
+};
+
+/**
+ * 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,
+    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,
+    children,
+    className,
+    ...props
+  }: BaseProps<C>,
+  ref?: PolymorphicRef<C>
+) {
+  const Component = as || 'span';
+
+  const basePropToClassName = 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,
+  });
+
+  return (
+    <Component
+      as={as}
+      className={`${basePropToClassName} ${className}`}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+});
+
+export default Base;

package/src/Base/mapping.native.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Link } from 'expo-router';
+import { Image, View } from 'react-native';
+import Svg, { Path, Circle, Rect, G, Polygon } from 'react-native-svg';
+import { Button } from '@digigov/react-core/Base/compat/button.native';
+import CompatDetails from '@digigov/react-core/Base/compat/details.native';
+import BaseInput from '@digigov/react-core/Base/compat/Input/index.native';
+import { Ol } from '@digigov/react-core/Base/compat/ol.native';
+import { cssInterop } from 'nativewind'
+export type MapProps<T extends keyof JSX.IntrinsicElements> =
+  React.ComponentPropsWithoutRef<T>;
+
+// TODO: use MapProps<K> instead of any for props type
+export type MappingType = {
+  [K in keyof JSX.IntrinsicElements]?: (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    props: any
+  ) => JSX.Element | React.ReactNode;
+};
+
+export const mapping: MappingType = {
+  a: ({ children, ...props }) => <Link {...props} asChild ><View>{children}</View></Link>,
+  img: (props) => <Image {...props} />,
+  button: Button,
+  input: BaseInput,
+  textarea: BaseInput,
+  details: CompatDetails,
+  ol: Ol,
+  path: (props) => <Path {...props} />,
+  // @ts-ignore
+  svg: cssInterop(Svg, {
+    className: {
+      target: "style",
+      nativeStyleToProp: { width: true, height: true }
+    },
+  }),
+  rect: (props) => <Rect {...props} />,
+  circle: (props) => <Circle {...props} />,
+  g: (props) => <G {...props} />,
+  polygon: (props) => <Polygon {...props} />,
+};

package/src/Base/utils.ts

@@ -0,0 +1,94 @@
+import clsx from 'clsx';
+
+// Helper function to handle both SpacingValues and SpacingMediaValues
+const generateSpacingClasses = (prefix, spacing) => {
+  if (typeof spacing === 'object') {
+    // It's a SpacingMediaValues (media-specific)
+    return {
+      [`${prefix}-xs-${spacing?.xs}`]: spacing?.xs !== undefined,
+      [`${prefix}-sm-${spacing?.sm}`]: spacing?.sm !== undefined,
+      [`${prefix}-md-${spacing?.md}`]: spacing?.md !== undefined,
+      [`${prefix}-lg-${spacing?.lg}`]: spacing?.lg !== undefined,
+      [`${prefix}-xl-${spacing?.xl}`]: spacing?.xl !== undefined,
+    };
+  } else if (spacing !== undefined) {
+    // It's a regular SpacingValues
+    return {
+      [`${prefix}-${spacing}`]: true,
+    };
+  }
+  return {};
+};
+
+export const 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,
+}) => {
+  return clsx({
+    [`ds-display-${display}`]: display !== undefined,
+    ...generateSpacingClasses('ds-m', m ?? margin),
+    ...generateSpacingClasses('ds-mt', mt ?? marginTop),
+    ...generateSpacingClasses('ds-mb', mb ?? marginBottom),
+    ...generateSpacingClasses('ds-mr', mr ?? marginRight),
+    ...generateSpacingClasses('ds-ml', ml ?? marginLeft),
+    ...generateSpacingClasses('ds-mx', mx),
+    ...generateSpacingClasses('ds-my', my),
+    ...generateSpacingClasses('ds-p', p ?? padding),
+    ...generateSpacingClasses('ds-pt', pt ?? paddingTop),
+    ...generateSpacingClasses('ds-pb', pb ?? paddingBottom),
+    ...generateSpacingClasses('ds-pr', pr ?? paddingRight),
+    ...generateSpacingClasses('ds-pl', pl ?? paddingLeft),
+    ...generateSpacingClasses('ds-px', px),
+    ...generateSpacingClasses('ds-py', py),
+    '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,
+  });
+};