@norges-domstoler/dds-components 2.5.1 → 4.0.0

package/dist/types/BaseComponentProps.d.ts

@@ -0,0 +1,58 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+/**
+ * Basetype for props som eksponeres til konsumenter av designsystemet.
+ * Lager en intersection-type med props som sendes inn og `id` og `htmlProps`
+ * slik at man kan ha `HTMLAttributes`-props på komponenter som eksponeres
+ * av designsystemet. Se også {@link BaseComponentPropsWithChildren} og
+ * {@link getBaseHTMLProps}.
+ *
+ * @template TElement Element-type som genereres av komponenten.
+ * @template TOtherProps Andre props komponenten skal eksponere til konsumenter.
+ * @template THTMLAttributesProps Standard `HTMLAttributes<T>` men kan overstyres for f.eks knapper hvis man trenger en annen basetype for `htmlProps`.
+ */
+export declare type BaseComponentProps<TElement extends Element, TOtherProps extends Record<string, unknown> = Record<string, unknown>, THTMLAttributesProps extends HTMLAttributes<TElement> = HTMLAttributes<TElement>> = {
+    /**Ekstra HTML-attributter som vil settes på elementet som genereres. Untatt `id` og `className` som settes på toppnivå. */
+    htmlProps?: THTMLAttributesProps;
+} & Pick<THTMLAttributesProps, 'id' | 'className'> & TOtherProps;
+/**
+ * Utvidelese av {@link BaseComponentProps} med prop for `children`.
+ *
+ * {@link BaseComponentProps}
+ */
+export declare type BaseComponentPropsWithChildren<T extends Element, TProps extends Record<string, unknown>, THTMLProps extends HTMLAttributes<T> = HTMLAttributes<T>> = BaseComponentProps<T, PropsWithChildren<TProps>, THTMLProps>;
+export declare const joinClassNames: (...classNames: (string | undefined)[]) => string;
+declare type GetBaseHTMLProps = {
+    <T extends Element>(id: HTMLAttributes<T>['id'], className: HTMLAttributes<T>['className'], htmlProps: HTMLAttributes<T> | undefined, unknownProps: object): HTMLAttributes<T> & object;
+    <T extends Element>(id: HTMLAttributes<T>['id'], htmlProps: HTMLAttributes<T> | undefined, unknownProps: object): HTMLAttributes<T> & object;
+};
+/**
+ * Slår sammen id, className, htmlProps og unknownProps til ett objekt
+ * som kan spreades som baseprops for en komponent. `unknownProps` er
+ * med for å sikre at aria- og data- attributter blir spreadet, alle
+ * komponenter må derfor ta hensyn til `...rest` når de leser props.
+ *
+ * Typisk bruk:
+ * ```
+ * const Props = BaseComponentProps<HTMLElement, {
+ *   propA: string,
+ *   propB: string,
+ * }>
+ *
+ * const MyComponent = (props: Props) => {
+ *   const { propA, propB, id, className, htmlProps, ...rest } = props;
+ *
+ *   const wrapperProps = getBaseHTMLProps(id, className, htmlProps, rest)
+ *
+ *   return <div {...wrapperProps}>innhold</div>
+ * }
+ * ```
+ * @param id id fra props til komponenten.
+ * @param className className for komponenten.
+ * @param htmlProps htmlProps fra komponenten.
+ * @param unknownProps andre ukjente props som skal spreades, kommer typisk fra `...rest` når man leser props til komponenten.
+ * @returns Objekt med alle argumentene som kan spreades.
+ *
+ * Kan også kalles uten `className`-parameteret. Oppførselen er lik.
+ */
+export declare const getBaseHTMLProps: GetBaseHTMLProps;
+export {};

package/dist/types/index.d.ts

@@ -1 +1,2 @@
 export * from './Direction';
+export * from './BaseComponentProps';

package/dist/types/utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Gir tilbake `T` med properties fra `K` som påkrevd gitt at `Condition` er `true`
+ *
+ * @template Condition
+ * @template T
+ * @template K
+ */
+export declare type WithRequiredIf<Condition extends boolean, T, K extends keyof T> = Omit<T, K> & Pick<Condition extends true ? Required<T> : T, K>;

package/dist/utils/idGenerator.d.ts

@@ -1,3 +1,3 @@
-export declare const derivativeIdGenerator: (prefix: string, suffix: string, value?: string | number | undefined) => string | undefined;
+export declare const derivativeIdGenerator: (prefix: string, suffix: string, value?: string | number) => string | undefined;
 export declare const idArrayGenerator: (values: (string | undefined)[]) => string[] | undefined;
 export declare const spaceSeparatedIdListGenerator: (values: (string | undefined)[]) => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "2.5.1",
+  "version": "4.0.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -22,7 +22,8 @@
     "storybook": "start-storybook -p 6006 -s ./.storybook/images",
     "build-storybook": "build-storybook -o docs",
     "lint": "eslint --ext=jsx,ts,tsx src",
-    "prettier": "prettier --write '**/*.{ts,tsx}'"
+    "prettier": "prettier --write '**/*.{ts,tsx}'",
+    "check:types": "tsc --noEmit"
   },
   "keywords": [
     "dds",
@@ -43,13 +44,13 @@
     "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-node-resolve": "^13.2.0",
-    "@storybook/addon-actions": "^6.5.0-beta.0",
-    "@storybook/addon-essentials": "^6.5.0-beta.0",
-    "@storybook/addon-links": "^6.5.0-beta.0",
-    "@storybook/addons": "^6.5.0-beta.0",
-    "@storybook/mdx2-csf": "^0.0.1-canary.1.838a6ca.0",
-    "@storybook/react": "^6.5.0-beta.0",
-    "@storybook/theming": "^6.5.0-beta.0",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addons": "^6.5.9",
+    "@storybook/mdx2-csf": "^0.0.3",
+    "@storybook/react": "^6.5.9",
+    "@storybook/theming": "^6.5.9",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^14.1.0",
@@ -65,7 +66,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-storybook": "^0.5.11",
+    "eslint-plugin-storybook": "^0.5.13",
     "jest": "^27.5.1 ",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",