feat(Provider): rewrite to TypeScript (#1436)

* feat(Provider): rewrite to TypeScript

* Update packages/dnb-eufemia/src/components/form-row/FormRowHelpers.tsx

Co-authored-by: Anders <anderslangseth@gmail.com>

* Update packages/dnb-eufemia/src/components/form-row/FormRowHelpers.tsx

Co-authored-by: Anders <anderslangseth@gmail.com>

Co-authored-by: Anders <anderslangseth@gmail.com>

packages/dnb-eufemia/scripts/prebuild/tasks/convertSvgToJsx.js

@@ -12,7 +12,7 @@ import transform from 'gulp-transform'
 import { transform as svgr } from '@svgr/core'
 import prettier from 'prettier'
 import globby from 'globby'
-import { iconCase } from '../../../src/components/icon'
+import { iconCase } from '../../../src/components/icon/IconHelpers'
 import { asyncForEach } from '../../tools'
 import { log } from '../../lib'
 import { md5 } from '../../figma/helpers/docHelpers'

packages/dnb-eufemia/src/components/form-row/FormRow.js

@@ -338,12 +338,3 @@ Fieldset.defaultProps = {
   useFieldset: false,
   className: null,
 }
-
-export const prepareFormRowContext = (props) => {
-  if (typeof props.label_direction === 'undefined') {
-    props.label_direction = isTrue(props.vertical)
-      ? 'vertical'
-      : props.label_direction
-  }
-  return props
-}

packages/dnb-eufemia/src/components/form-row/FormRowHelpers.tsx

@@ -0,0 +1,15 @@
+import { isTrue } from '../../shared/component-helper'
+
+type FormRowProps = {
+  label_direction?: 'vertical' | 'horizontal'
+  vertical?: string | boolean
+}
+
+export const prepareFormRowContext = (props: FormRowProps) => {
+  if (typeof props.label_direction === 'undefined') {
+    props.label_direction = isTrue(props.vertical)
+      ? 'vertical'
+      : props.label_direction
+  }
+  return props
+}

packages/dnb-eufemia/src/components/icon/Icon.js

@@ -20,6 +20,7 @@ import {
 } from '../space/SpacingHelper'
 import { createSkeletonClass } from '../skeleton/SkeletonHelper'
 import Context from '../../shared/Context'
+import { iconCase } from './IconHelpers'
 
 export const DefaultIconSize = 16
 export const DefaultIconSizes = {
@@ -446,11 +447,3 @@ export const prerenderIcon = ({
     return null
   }
 }
-
-// to replace icon names
-export const iconCase = (name) =>
-  name
-    .replace(/((?!^)[A-Z])/g, '_$1')
-    .toLowerCase()
-    .replace(/^[0-9]/g, '$1')
-    .replace(/[^a-z0-9_]/gi, '_')

packages/dnb-eufemia/src/components/icon/IconHelpers.js

@@ -0,0 +1,7 @@
+// to replace icon names
+export const iconCase = (name) =>
+  name
+    .replace(/((?!^)[A-Z])/g, '_$1')
+    .toLowerCase()
+    .replace(/^[0-9]/g, '$1')
+    .replace(/[^a-z0-9_]/gi, '_')

packages/dnb-eufemia/src/components/pagination/PaginationBar.tsx

@@ -24,27 +24,28 @@ interface PaginationBarProps {
   /**
    * The title used in every button shown in the bar. Defaults to Side %s.
    */
-  button_title: string
+  button_title?: string
   /**
    *  The title used in the previous page button. Defaults to Forrige side.
    */
-  prev_title: string
+  prev_title?: string
   /**
    *  The title used in the next page button. Defaults to Neste side.
    */
-  next_title: string
+  next_title?: string
   /**
    * The title used in the dots. Relevant for screen-readers. Defaults to %s flere sider.
    */
-  more_pages: string
+  more_pages?: string
   /**
    * Reference to the parent component. Used to contain height between updates.
    */
-  contentRef: React.RefObject<any>
+  contentRef?: React.RefObject<HTMLElement>
   /**
    *  the given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section.
    */
-  children: React.ReactNode
+  children?: React.ReactNode
+  locale?: string
 }
 
 const defaultProps = {
@@ -134,7 +135,8 @@ const PaginationBar = (innerProps: PaginationBarProps) => {
     extendPropsWithContext(
       { ...defaultProps, ...innerProps },
       defaultProps,
-      getTranslation(innerProps).Pagination
+      getTranslation(innerProps as Pick<PaginationBarProps, 'locale'>)
+        .Pagination
     )
 
   const prevIsDisabled = currentPage > -1 ? currentPage === 1 : true

packages/dnb-eufemia/src/components/skeleton/SkeletonHelper.d.ts

@@ -11,7 +11,7 @@ export class AutoSize extends React.Component<AutoSizeProps, any> {
 }
 export interface SkeletonContextProps {
   translation?: {
-    Skeleton: {
+    Skeleton?: {
       /**
        * Is used for screen reader text translation, defined in the translation files. You can set a custom text if needed.
        */