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

package/src/Base/index.web.tsx

@@ -0,0 +1,259 @@
+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;
+      /** 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;
+      /**  display is optional. It has not a default value. */
+      display?: 'flex' | 'block' | 'none'
+    }
+  >;
+
+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,
+    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';
+
+  return (
+    <Component
+      as={as}
+      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,
+      })}
+      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,84 @@
+import clsx from 'clsx';
+
+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,
+  className,
+}) =>
+  clsx(className, {
+    [`ds-display-${display}`]: display !== undefined ? true : undefined,
+    [`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,
+  });

package/src/Base/wrap.native.tsx

@@ -0,0 +1,94 @@
+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(({ 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/CallToAction/index.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import ButtonLink, { ButtonLinkProps } from '@digigov/react-core/ButtonLink';
 import { ChevronIcon } from '@digigov/react-icons';
 
-export interface CallToActionProps extends ButtonLinkProps { }
+export interface CallToActionProps extends ButtonLinkProps {}
 /**
  * Use this button for the main call to action on your service’s start page.
  */
@@ -24,7 +24,7 @@ export const CallToAction = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronIcon />
+      <ChevronIcon className="ds-btn-cta__icon" />
     </ButtonLink>
   );
 });

package/src/Card/index.tsx

@@ -71,13 +71,14 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(
       })}
       {...props}
     >
-      <div
+      <Base
+        as="div"
         className={clsx({
           'ds-card__body': true,
         })}
       >
         {children}
-      </div>
+      </Base>
     </Base>
   );
 });

package/src/CheckboxItem/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import ChoiceDividerText from '@digigov/react-core/ChoiceDividerText';
+import CheckboxItemInput from '@digigov/react-core/CheckboxItemInput';
 import LabelContainer from '@digigov/react-core/LabelContainer';
 
 export interface CheckboxItemProps extends BaseProps<'input'> {
@@ -27,7 +28,7 @@ export const CheckboxItem = React.forwardRef<
   return (
     <>
       {dividerText && <ChoiceDividerText>{dividerText}</ChoiceDividerText>}
-      <div
+      <Base as='div'
         className={clsx(className, {
           'ds-checkboxes__item': true,
         })}
@@ -39,20 +40,9 @@ export const CheckboxItem = React.forwardRef<
           })}
         >
           {children}
-          <Base
-            as="input"
-            ref={ref}
-            type="checkbox"
-            name={name}
-            value={value}
-            className={clsx({
-              'ds-checkboxes__input': true,
-            })}
-            disabled={disabled}
-            {...props}
-          />
+          <CheckboxItemInput ref={ref} name={name} value={value} disabled={disabled} {...props} />
         </LabelContainer>
-      </div>
+      </Base>
     </>
   );
 });

package/src/CheckboxItemInput/index.native.tsx

@@ -0,0 +1,17 @@
+import extend from '@digigov/react-core/utils/extend.native';
+import CoreCheckboxItemInput from '@digigov/react-core/CheckboxItemInput/index.web';
+import clsx from 'clsx';
+
+export const CheckboxItemInput = extend(
+  CoreCheckboxItemInput,
+  ({ className, ...props }) => {
+    return {
+      ...props,
+      className: clsx(className, {
+        'ds-checkboxes__input__wrapper': true,
+      }),
+    };
+  }
+);
+
+export default CheckboxItemInput;

package/src/CheckboxItemInput/index.tsx

@@ -0,0 +1,2 @@
+export * from '@digigov/react-core/CheckboxItemInput/index.web';
+export { default as default } from '@digigov/react-core/CheckboxItemInput/index.web';

package/src/CheckboxItemInput/index.web.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface CheckboxItemInputProps extends BaseProps<'input'> { }
+/**
+ * Details for the CheckboxItem.
+ * CheckboxItemInput component is the input component for CheckboxItem.
+ */
+export const CheckboxItemInput = React.forwardRef<
+  HTMLInputElement,
+  CheckboxItemInputProps
+>(function CheckboxItemInput(
+  { name, value, className, disabled, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="input"
+      ref={ref}
+      type="checkbox"
+      name={name}
+      value={value}
+      className={clsx({
+        'ds-checkboxes__input': true,
+      })}
+      disabled={disabled}
+      {...props}
+    />
+
+  );
+});
+
+export default CheckboxItemInput;

package/src/Chip/index.tsx

@@ -28,7 +28,7 @@ export const Chip = React.forwardRef<HTMLLIElement, ChipProps>(function Chip(
       {...props}
       onClick={onClick}
     >
-      <div
+      <Base as='div'
         role={onClick && 'button'}
         tabIndex={onClick && 0}
         className="ds-chip__content"
@@ -42,7 +42,7 @@ export const Chip = React.forwardRef<HTMLLIElement, ChipProps>(function Chip(
             }}
           />
         )}
-      </div>
+      </Base>
     </Base>
   );
 });

package/src/CodeBlockContainer/index.tsx

@@ -2,34 +2,21 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface CodeBlockContainerProps extends BaseProps<'div'> {
-  /**
-   * wrapLines prop is optional.
-   * wrapLines prop is used to wrap the lines horizontally over the container.
-   * @value true is used to activate the wrapLines styles.
-   * @value false is used to deactivate the wrapLines styles.
-   * @default false
-   */
-  wrapLines?: true | false;
-}
+export interface CodeBlockContainerProps extends BaseProps<'div'> { }
 /**
- * CodeBlockContainer can be used as a colored container for text.
+ * CodeBlockContainer is a component for displaying code.
  *
  */
 export const CodeBlockContainer = React.forwardRef<
   HTMLDivElement,
   CodeBlockContainerProps
->(function CodeBlockContainer(
-  { className, wrapLines = false, children, ...props },
-  ref
-) {
+>(function CodeBlockContainer({ className, children, ...props }, ref) {
   return (
     <Base
       as="div"
       ref={ref}
       className={clsx(className, {
         'ds-code-block__container': true,
-        'ds-code-block__container--wrap-lines': wrapLines,
       })}
       {...props}
     >

package/src/CodeBlockContent/index.tsx

@@ -4,7 +4,7 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface CodeBlockContentProps extends BaseProps<'pre'> { }
 /**
- * CodeBlockContent can be used as content inside the CodeBlockContainer
+ * CodeBlockContent can be used as content inside the CodeBlockContainer.
  *
  */
 export const CodeBlockContent = React.forwardRef<
@@ -12,14 +12,15 @@ export const CodeBlockContent = React.forwardRef<
   CodeBlockContentProps
 >(function CodeBlockContent({ className, children, ...props }, ref) {
   return (
-    <Base as="pre" ref={ref} className={clsx(className)} {...props}>
-      <code
+    <Base as="pre" ref={ref} className={className} {...props}>
+      <Base
+        as="code"
         className={clsx({
           'ds-code-block__content': true,
         })}
       >
         {children}
-      </code>
+      </Base>
     </Base>
   );
 });