@biom3/react - npm Package Compare versions

src/components/Checkbox/Checkbox.test.tsx

src/components/Checkbox/Checkbox.tsx

src/components/Checkbox/index.ts

src/components/Checkbox/readme.md

src/components/Checkbox/styles.ts

src/components/FormControl/FormControlCaption.tsx

src/components/FormControl/FormControlValidation.tsx

src/components/Radio/index.ts

src/components/Radio/Radio.test.tsx

src/components/Radio/Radio.tsx

src/components/Radio/readme.md

src/components/Radio/styles.ts

src/components/Toggle/index.ts

src/components/Toggle/readme.md

src/components/Toggle/styles.ts

src/components/Toggle/Toggle.test.tsx

src/components/Toggle/Toggle.tsx

src/hooks/useEventListener.ts

src/hooks/useHover.ts

src/utils/deviceHelpers.ts

src/utils/styleHelpers.ts

2

package.json

		{
		"name": "@biom3/react",
		"version": "0.0.7-alpha",
		"version": "0.0.8-alpha",
		"main": "./dist/index.js",
		@@ -5,0 +5,0 @@ "types": "./dist/index.d.ts",

77

src/components/FormControl/readme.md

		@@ -5,3 +5,3 @@ # FormControl
		# Component status
		! alpha - 1st Feb 2023 !
		! alpha - 23rd Feb 2023 !
		```
		@@ -11,3 +11,3 @@

		Renders a label for inputs and other controls.
		Renders a label, caption and validation for inputs and other controls.

		@@ -25,2 +25,4 @@ ```tsx
		- <FormControl.Label />
		- <FormControl.Caption />
		- <FormControl.Validation />

		@@ -31,3 +33,3 @@ ## Examples

		Standard Usage:
		Usage with `<TextInput />`:

		@@ -41,2 +43,40 @@ ```tsx

		When an `id` prop isn't provided to the `<FormControl />` component, it will generate a unique id for the label and input.

		When a `Toggle`, `Radio` or a `Checkbox` is rendered as a child of `<FormControl />`, the layout will be adjusted to a column. Alignment can be controlled by semantically putting the `Toggle` or `Checkbox` before the label.

		Rendering a left-aligned `<Toggle />`:

		```tsx
		<FormControl id="hello">
		<Toggle onChange={ev => console.log('change', ev)} />
		<FormControl.Label>Label</FormControl.Label>
		<FormControl.Caption>Im a toggle hello hello</FormControl.Caption>
		</FormControl>
		```

		Rendering a right-aligned `<Checkbox />`:

		```tsx
		<FormControl id="hello">
		<Checkbox />
		<FormControl.Label>Label</FormControl.Label>
		<FormControl.Caption>Im a checkbox hello hello</FormControl.Caption>
		</FormControl>
		```

		With Validation:

		```tsx
		<FormControl id="hello">
		<FormControl.Label>Label</FormControl.Label>
		<TextInput />
		{!isErrored && (
		<FormControl.Validation variant="error">
		Somethings wrong.
		</FormControl.Validation>
		)}
		</FormControl>
		```

		## Props
		@@ -46,9 +86,9 @@

		\| Name \| Type \| Default \| Description \|
		\| :--------- \| :--------------------------------- \| :------------------ \| :----------------------------------------------------------------- \|
		\| `domRef` \| `MutableRefObject<HTMLDivElement>` \| \| Provides a reference to the underlying DOM element. \|
		\| `sx` \| `SxProps` \| \| Escape hatch for adding theme-aware custom styles. \|
		\| `testId` \| `string` \| \| Adds a data-testid attribute to the element to be used in testing. \|
		\| `id` \| `string` \| Set by `react-aria` \| Set the `for` attribute for the label and `id` for the input. \|
		\| `children` \| `TextInput` or `FormControl.Label` \| \| \|
		\| Name \| Type \| Default \| Description \|
		\| :--------- \| :--------------------------------------------------------------------------------------------------------------- \| :-------------- \| :----------------------------------------------------------------- \|
		\| `domRef` \| `MutableRefObject<HTMLDivElement>` \| \| Provides a reference to the underlying DOM element. \|
		\| `sx` \| `SxProps` \| \| Escape hatch for adding theme-aware custom styles. \|
		\| `testId` \| `string` \| \| Adds a data-testid attribute to the element to be used in testing. \|
		\| `id` \| `string` \| Set by `react`. \| Set the `for` attribute for the label and `id` for the input. \|
		\| `children` \| `TextInput`, `Checkbox`, `Toggle`, `Radio`, `FormControl.Label`, `FormControl.Validation`, `FormControl.Caption` \| \| \|

		@@ -62,1 +102,18 @@ ### FormControl.Label
		\| `testId` \| `string` \| \| Adds a data-testid attribute to the element to be used in testing. \|

		### FormControl.Caption

		\| Name \| Type \| Default \| Description \|
		\| :------- \| :--------------------------------- \| :------ \| :----------------------------------------------------------------- \|
		\| `domRef` \| `MutableRefObject<HTMLDivElement>` \| \| Provides a reference to the underlying DOM element. \|
		\| `sx` \| `SxProps` \| \| Escape hatch for adding theme-aware custom styles. \|
		\| `testId` \| `string` \| \| Adds a data-testid attribute to the element to be used in testing. \|

		### FormControl.Validation

		\| Name \| Type \| Default \| Description \|
		\| :-------- \| :--------------------------------- \| :------ \| :----------------------------------------------------------------- \|
		\| `domRef` \| `MutableRefObject<HTMLDivElement>` \| \| Provides a reference to the underlying DOM element. \|
		\| `sx` \| `SxProps` \| \| Escape hatch for adding theme-aware custom styles. \|
		\| `testId` \| `string` \| \| Adds a data-testid attribute to the element to be used in testing. \|
		\| `variant` \| `error`, `warning`, `success` \| \| Decides which style of validation test to show \|

3

src/components/index.ts

		// @TODO: Document SSRProvider https://immutable.atlassian.net/browse/DS-162
		export { SSRProvider } from '@react-aria/ssr';
		export * from './Box';
		export * from './Checkbox';
		export * from './Clickable';
		@@ -8,2 +9,3 @@ export * from './FormControl';
		export * from './Popover';
		export * from './Radio';
		export * from './Select';
		@@ -13,1 +15,2 @@ export * from './Tabs';
		export * from './TextInput';
		export * from './Toggle';

99

src/components/Tabs/readme.md

		@@ -32,77 +32,2 @@ # Tabs

		## Examples

		Uncontrolled Tabs:

		```tsx
		<Tabs
		defaultTabValue="first"
		sx={{
		width: '100%',
		}}
		>
		<Tabs.List contentOrientation="vertical">
		<Tabs.Tab value="first" icon={<IconCalendar />}>
		first tab
		</Tabs.Tab>
		<Tabs.Tab value="second" icon={<IconArrowForward />}>
		second tab
		</Tabs.Tab>
		<Tabs.Tab value="third" icon={<IconArrowBackward />}>
		third tab
		</Tabs.Tab>
		<Tabs.Tab value="fourth">fourth</Tabs.Tab>
		</Tabs.List>
		<Tabs.Panel value="first">
		<Body>im the first panel</Body>
		</Tabs.Panel>
		<Tabs.Panel value="second">
		<Body>im the second panel</Body>
		</Tabs.Panel>
		<Tabs.Panel value="third">
		<Body>im the third panel</Body>
		</Tabs.Panel>
		<Tabs.Panel value="fourth">
		<Body>im the fourth panel</Body>
		</Tabs.Panel>
		</Tabs>
		```

		Controlled Tabs:

		```tsx
		<Tabs
		currentTabValue={currentValue}
		onTabChange={setCurrentValue}
		sx={{
		width: '100%',
		}}
		>
		<Tabs.List contentOrientation="vertical">
		<Tabs.Tab value="first" icon={<IconCalendar />}>
		first tab
		</Tabs.Tab>
		<Tabs.Tab value="second" icon={<IconArrowForward />}>
		second tab
		</Tabs.Tab>
		<Tabs.Tab value="third" icon={<IconArrowBackward />}>
		third tab
		</Tabs.Tab>
		<Tabs.Tab value="fourth">fourth</Tabs.Tab>
		</Tabs.List>
		<Tabs.Panel value="first">
		<Body>im the first panel</Body>
		</Tabs.Panel>
		<Tabs.Panel value="second">
		<Body>im the second panel</Body>
		</Tabs.Panel>
		<Tabs.Panel value="third">
		<Body>im the third panel</Body>
		</Tabs.Panel>
		<Tabs.Panel value="fourth">
		<Body>im the fourth panel</Body>
		</Tabs.Panel>
		</Tabs>
		```

		## Props
		@@ -132,16 +57,16 @@

		\| Name \| Type \| Default \| Description \|
		\| :------- \| :--------------------------------- \| :----------- \| :----------------------------------------------------------------------------- \|
		\| `domRef` \| `MutableRefObject<HTMLDivElement>` \| \| Provides a reference to the underlying DOM element. \|
		\| `sx` \| `SxProps` \| \| Escape hatch for adding theme-aware custom styles. \|
		\| `testId` \| `string` \| \| Adds a data-testid attribute to the element to be used in testing. \|
		\| `value` \| `string` \| `horizontal` \| A value used to identify the current Tab, and show it as active when relevant. \|
		\| Name \| Type \| Default \| Description \|
		\| :------- \| :--------------------------------- \| :------ \| :----------------------------------------------------------------------------- \|
		\| `domRef` \| `MutableRefObject<HTMLDivElement>` \| \| Provides a reference to the underlying DOM element. \|
		\| `sx` \| `SxProps` \| \| Escape hatch for adding theme-aware custom styles. \|
		\| `testId` \| `string` \| \| Adds a data-testid attribute to the element to be used in testing. \|
		\| `value` \| `string` \| \| A value used to identify the current Tab, and show it as active when relevant. \|

		### Tabs.Panel

		\| Name \| Type \| Default \| Description \|
		\| :------- \| :--------------------------------- \| :----------- \| :----------------------------------------------------------------------------- \|
		\| `domRef` \| `MutableRefObject<HTMLDivElement>` \| \| Provides a reference to the underlying DOM element. \|
		\| `sx` \| `SxProps` \| \| Escape hatch for adding theme-aware custom styles. \|
		\| `testId` \| `string` \| \| Adds a data-testid attribute to the element to be used in testing. \|
		\| `value` \| `string` \| `horizontal` \| A value used to identify the current Panel, and only display it when relevant. \|
		\| Name \| Type \| Default \| Description \|
		\| :------- \| :--------------------------------- \| :------ \| :----------------------------------------------------------------------------- \|
		\| `domRef` \| `MutableRefObject<HTMLDivElement>` \| \| Provides a reference to the underlying DOM element. \|
		\| `sx` \| `SxProps` \| \| Escape hatch for adding theme-aware custom styles. \|
		\| `testId` \| `string` \| \| Adds a data-testid attribute to the element to be used in testing. \|
		\| `value` \| `string` \| \| A value used to identify the current Panel, and only display it when relevant. \|

2

src/components/TextInput/readme.md

		@@ -44,3 +44,3 @@ # TextInput

		All link `sx` props are theme-aware. You are free to use design-tokens inside all `sx` prop fields. For example, you can customise the background of a TextInput like so:
		All TextInput `sx` props are theme-aware. You are free to use design-tokens inside all `sx` prop fields. For example, you can customise the background of a TextInput like so:

		@@ -47,0 +47,0 @@ ```tsx

8

src/hooks/useForwardLocalDomRef.ts

		@@ -5,7 +5,5 @@ import { MutableRefObject, useEffect, useRef } from 'react';
		T extends HTMLOrSVGElement = HTMLOrSVGElement,
		>({
		domRef,
		}: {
		domRef: MutableRefObject<T \| null>;
		}) => {
		>(
		domRef: MutableRefObject<T \| null>,
		) => {
		const localDomRef = useRef<T \| null>(null);
		@@ -12,0 +10,0 @@

9

src/types/input.ts

		import { ComponentPropsWithoutRef } from 'react';

		export type InputTypeUnion = ComponentPropsWithoutRef<'input'>['type'];
		export type ReactInputElementProps = ComponentPropsWithoutRef<'input'>;
		export type InputTypeUnion = ReactInputElementProps['type'];
		export type TextOnlyTypeUnion = Extract<
		@@ -8,6 +9,4 @@ InputTypeUnion,
		>;
		export type TextInputDomAttrProps = Omit<
		ComponentPropsWithoutRef<'input'>,
		'type'
		> & {

		export type TextInputDomAttrProps = Omit<ReactInputElementProps, 'type'> & {
		type?: TextOnlyTypeUnion;
		@@ -14,0 +13,0 @@ };

6

src/types/sxProps.ts

		@@ -79,2 +79,6 @@ import { BiomeTheme, ValidSxValues } from '@biom3/design-tokens';

		export type DescendantSxSvgProps = {
		[key: string]: SxProps;
		};

		// @TODO: Narrow this down to only the CSS properties that are supported by SVGs
		@@ -88,3 +92,3 @@ export type SvgElementSxProps = SxProps;
		export type SvgSxComponentProps = {
		sx?: SvgElementSxProps;
		sx?: SvgElementSxProps \| DescendantSxSvgProps;
		};

15

src/utils/colorHelpers.ts

		import { SxProps } from '../types';

		export function hexToRgb(hex: string): { r: number; g: number; b: number } {
		const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
		export function hexToRgb(hex: string): {
		r: number;
		g: number;
		b: number;
		a?: number;
		} {
		const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(
		hex,
		);
		return result
		@@ -10,2 +17,3 @@ ? {
		b: parseInt(result[3], 16),
		a: result[4] ? parseInt(result[4], 16) / 255 : undefined,
		}
		@@ -17,2 +25,5 @@ : { r: 0, g: 0, b: 0 };
		const rgb = hexToRgb(hex);
		if (rgb.a !== undefined && rgb.a !== 1) {
		return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a.toFixed(2)})`;
		}
		return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
		@@ -19,0 +30,0 @@ }

src/components/TextInput/TextInputStatusText.tsx

dist/index.d.ts

Sorry, the diff of this file is too big to display

dist/index.js

Sorry, the diff of this file is too big to display

dist/index.js.map