@digigov/react-core 2.0.0-2445d5cb → 2.0.0-298cfc51

package/src/Base/index.web.tsx

@@ -0,0 +1,267 @@
+import React from 'react';
+import clsx from 'clsx';
+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
+      className={clsx(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,
+  });
+};

package/src/Base/wrap.native.tsx

@@ -0,0 +1,98 @@
+import React, { useContext, useMemo, useState } from 'react';
+import { View } from 'react-native';
+
+interface WrapperContextType {
+  (cls: string): void;
+}
+
+const WrapperContext = React.createContext<WrapperContextType>(
+  (cls: string) => {
+    return cls;
+  }
+);
+
+const Wrapper = React.memo(function Wrapper({
+  children,
+}: {
+  children?: React.ReactNode;
+}) {
+  const [className, setClassName] = useState('');
+  return (
+    <WrapperContext.Provider value={setClassName}>
+      <View className={className} focusable={false}>
+        {children}
+      </View>
+    </WrapperContext.Provider>
+  );
+});
+
+interface WrappedComponentProps {
+  className?: string;
+  onBlur?: (e: unknown) => void;
+  onFocus?: (e: unknown) => void;
+}
+
+export const wrap = (Component: React.ElementType) => {
+  const WrappedComponent = React.forwardRef(function InnerComponent(
+    { className, onBlur, onFocus, ...props }: WrappedComponentProps,
+    ref
+  ) {
+    const setClassName = useContext(WrapperContext);
+    const wrapperClassNames: string[] = [];
+    const beforeClassNames: string[] = [];
+    const afterClassNames: string[] = [];
+    const focusedWrapperClassNames: string[] = [];
+    const classNames = useMemo(
+      () =>
+        (className?.split(' ') || []).filter((cls) => {
+          if (cls.endsWith('__wrapper')) {
+            wrapperClassNames.push(cls);
+            focusedWrapperClassNames.push(`${cls}--focus`);
+            return false;
+          } else if (cls.endsWith('__before')) {
+            beforeClassNames.push(cls);
+            return false;
+          } else if (cls.endsWith('__after')) {
+            afterClassNames.push(cls);
+            return false;
+          }
+          return true;
+        }),
+      [className]
+    );
+    return (
+      <>
+        {beforeClassNames.length ? (
+          <View focusable={false} className={beforeClassNames.join(' ')} />
+        ) : (
+          ''
+        )}
+        <Component
+          ref={ref}
+          onFocus={(e: unknown) => {
+            setClassName(focusedWrapperClassNames.join(' '));
+            onFocus && onFocus(e);
+          }}
+          onBlur={(e: unknown) => {
+            setClassName(wrapperClassNames.join(' '));
+            onBlur && onBlur(e);
+          }}
+          className={classNames.join(' ')}
+          {...props}
+        />
+        {afterClassNames.length ? (
+          <View focusable={false} className={afterClassNames.join(' ')} />
+        ) : (
+          ''
+        )}
+      </>
+    );
+  });
+  return React.forwardRef(function Wrapped(props, ref) {
+    const children = useMemo(
+      () => <WrappedComponent {...props} ref={ref} />,
+      []
+    );
+    return <Wrapper>{children}</Wrapper>;
+  });
+};

package/src/Blockquote/__snapshots__/index.test.tsx.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the Blockquote with dense props 1`] = `
 <body>
   <div>
     <blockquote
-      class="ds-blockquote--dense ds-blockquote"
+      class="ds-blockquote ds-blockquote--dense"
     >
       hello
     </blockquote>

package/src/Bottom/__snapshots__/index.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the Bottom with no props 1`] = `
 <body>

package/src/BottomInfo/__snapshots__/index.test.tsx.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the BottomInfo with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-bottom-info ds-container ds-gap-sm-12 ds-grid"
+      class="ds-bottom-info ds-container ds-grid ds-gap-sm-12"
     >
       hello
     </div>

package/src/BottomInfoContainer/__snapshots__/index.test.tsx.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the BottomInfoContainer with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-bottom-info__container ds-container ds-gap-sm-12 ds-grid"
+      class="ds-bottom-info__container ds-container ds-grid ds-gap-sm-12"
     >
       hello
     </div>

package/src/BottomInfoContent/__snapshots__/index.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the BottomInfoContent with no props 1`] = `
 <body>

package/src/Breadcrumbs/__snapshots__/index.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the Breadcrumbs with no props 1`] = `
 <body>

package/src/BreadcrumbsList/__snapshots__/index.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the BreadcrumbsList with no props 1`] = `
 <body>

package/src/BreadcrumbsListItem/__snapshots__/index.test.tsx.snap

@@ -1,21 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders the BreadcrumbsListItem with href 1`] = `
-<body>
-  <div>
-    <li
-      class="ds-breadcrumbs__list-item"
-    >
-      <a
-        class="ds-breadcrumbs__link"
-        href="#"
-      >
-        hello
-      </a>
-    </li>
-  </div>
-</body>
-`;
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the BreadcrumbsListItem with no props 1`] = `
 <body>
@@ -23,11 +6,7 @@ exports[`renders the BreadcrumbsListItem with no props 1`] = `
     <li
       class="ds-breadcrumbs__list-item"
     >
-      <a
-        class="ds-breadcrumbs__link--inactive ds-breadcrumbs__link"
-      >
-        hello
-      </a>
+      hello
     </li>
   </div>
 </body>

package/src/BreadcrumbsListItem/index.test.tsx

@@ -8,8 +8,3 @@ it('renders the BreadcrumbsListItem with no props', () => {
     render(<BreadcrumbsListItem>hello</BreadcrumbsListItem>).baseElement
   ).toMatchSnapshot();
 });
-it('renders the BreadcrumbsListItem with href', () => {
-  expect(
-    render(<BreadcrumbsListItem href="#">hello</BreadcrumbsListItem>).baseElement
-  ).toMatchSnapshot();
-});

package/src/BreadcrumbsListItem/index.tsx

@@ -2,21 +2,15 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface BreadcrumbsListItemProps extends BaseProps<'li'> {
-  /**
-  * href is optional and provides the text and url of the Breadcrumbs items.
-
-  */
-  href?: string;
-}
+export interface BreadcrumbsListItemBaseProps extends BaseProps<'li'> {}
 /**
  * BreadcrumbsListItem creates a list of items with the possibility of navigation.
  * It should be used inside BreadcrumbsList as children component
  */
-export const BreadcrumbsListItem = React.forwardRef<
+export const BreadcrumbsListItemBase = React.forwardRef<
   HTMLLIElement,
-  BreadcrumbsListItemProps
->(function BreadcrumbsListItem({ href, className, children, ...props }, ref) {
+  BreadcrumbsListItemBaseProps
+>(function BreadcrumbsListItemBase({ className, children, ...props }, ref) {
   return (
     <Base
       as="li"
@@ -26,17 +20,9 @@ export const BreadcrumbsListItem = React.forwardRef<
       })}
       {...props}
     >
-      <a
-        href={href}
-        className={clsx({
-          'ds-breadcrumbs__link': true,
-          'ds-breadcrumbs__link--inactive': href === undefined,
-        })}
-      >
-        {children}
-      </a>
+      {children}
     </Base>
   );
 });
 
-export default BreadcrumbsListItem;
+export default BreadcrumbsListItemBase;

package/src/BreadcrumbsListItemLink/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,26 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders the BreadcrumbsListItemLink with href 1`] = `
+<body>
+  <div>
+    <a
+      class="ds-breadcrumbs__link"
+      href="#"
+    >
+      hello
+    </a>
+  </div>
+</body>
+`;
+
+exports[`renders the BreadcrumbsListItemLink with no props 1`] = `
+<body>
+  <div>
+    <a
+      class="ds-breadcrumbs__link ds-breadcrumbs__link--inactive"
+    >
+      hello
+    </a>
+  </div>
+</body>
+`;