@obosbbl/grunnmuren-react 0.1.0

package/dist/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export * from './useComposedRefs';
+export * from './usePrefersReducedMotion';
+export * from './useBlockBackgroundColor';
+export * from './useMedia';
+export * from './useScreenMaxWidthMd';
+export * from './useFormControlValidity';
+export * from './useFallbackId';

package/dist/hooks/useBlockBackgroundColor.d.ts

@@ -0,0 +1,2 @@
+export declare type BlockBackgroundColor = 'yellow' | 'gray' | 'blue' | 'green';
+export declare function useBlockBackgroundColor(blockBgColor: BlockBackgroundColor | undefined): string | undefined;

package/dist/hooks/useComposedRefs.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+/**
+ * React.Ref uses the readonly type `React.RefObject` instead of
+ * `React.MutableRefObject`, We pretty much always assume ref objects are
+ * mutable (at least when we create them), so this type is a workaround so some
+ * of the weird mechanics of using refs with TS.
+ */
+export declare type AssignableRef<ValueType> = {
+    bivarianceHack(instance: ValueType | null): void;
+}['bivarianceHack'] | React.MutableRefObject<ValueType | null>;
+/**
+ * Passes or assigns an arbitrary value to a ref function or object.
+ *
+ * @param ref
+ * @param value
+ */
+export declare function assignRef<RefValueType = unknown>(ref: AssignableRef<RefValueType> | null | undefined, value: any): void;
+/**
+ * Passes or assigns a value to multiple refs (typically a DOM node). Useful for
+ * dealing with components that need an explicit ref for DOM calculations but
+ * also forwards refs assigned by an app.
+ *
+ * @param refs Refs to fork
+ */
+export declare function useComposedRefs<RefValueType = unknown>(...refs: (AssignableRef<RefValueType> | null | undefined)[]): (node: unknown) => void;

package/dist/hooks/useFallbackId.d.ts

@@ -0,0 +1,4 @@
+/**
+ * A wrapper around useId that returns the supplied id parameter or generates one if necessary
+ */
+export declare function useFallbackId(id?: string): string;

package/dist/hooks/useFormControlValidity.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+declare type Validity = 'indeterminate' | 'invalid' | 'valid';
+/**
+ * Browser validation as it should be. "Invalid" only triggers after the user has blurred an input, or attempted
+ * to submit the form.
+ *
+ * NB! Currently this only works with uncontrolled components
+ */
+export declare function useFormControlValidity(ref: RefObject<HTMLElement & {
+    checkValidity(): boolean;
+}>): {
+    validity: Validity;
+};
+export {};

package/dist/hooks/useMedia.d.ts

@@ -0,0 +1 @@
+export declare function useMedia(query: string): boolean;

package/dist/hooks/usePrefersReducedMotion.d.ts

@@ -0,0 +1 @@
+export declare const usePrefersReducedMotion: () => boolean;

package/dist/hooks/useScreenMaxWidthMd.d.ts

@@ -0,0 +1 @@
+export declare const useScreenMaxWidthMd: () => boolean;

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+export * from './Alert';
+export * from './Banner';
+export * from './Button';
+export * from './Card';
+export * from './Checkbox';
+export * from './Footer';
+export * from './Form';
+export * from './Hero';
+export * from './IconLegacy';
+export * from './Input';
+export * from './Link';
+export * from './Navbar';
+export * from './Snackbar';
+export * from './TextArea';
+export * from './TextField';
+export * from './hooks';

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@obosbbl/grunnmuren-react",
+  "version": "0.1.0",
+  "description": "OBOS Grunnmuren design system React components",
+  "license": "MIT",
+  "repository": {
+    "url": "https://github.com/code-obos/grunnmuren",
+    "directory": "packages/react"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/grunnmuren.es.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "types": "./dist/index.d.ts",
+  "devDependencies": {
+    "@babel/core": "7.17.10",
+    "@storybook/addon-controls": "6.4.22",
+    "@storybook/addon-docs": "6.4.22",
+    "@storybook/addon-postcss": "2.0.0",
+    "@storybook/builder-webpack5": "6.4.22",
+    "@storybook/manager-webpack5": "6.4.22",
+    "@storybook/react": "6.4.22",
+    "@types/react": "18.0.9",
+    "@types/react-dom": "18.0.3",
+    "@vitejs/plugin-react": "1.3.2",
+    "postcss": "8.4.13",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "tailwindcss": "3.0.24",
+    "vite": "2.9.9"
+  },
+  "dependencies": {
+    "@obosbbl/grunnmuren-icons": "^0.3.0",
+    "@obosbbl/grunnmuren-tailwind": "^0.2.0",
+    "clsx": "1.1.1"
+  },
+  "peerDependencies": {
+    "react": "^18"
+  },
+  "scripts": {
+    "build": "pnpm run build:lib && pnpm run build:types",
+    "build:lib": "vite build",
+    "build:types": "tsc --emitDeclarationOnly --declaration",
+    "dev": "start-storybook -p 6006 --ci",
+    "build:storybook": "build-storybook"
+  }
+}