analysis-ui-components - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

lib-esm/layout/Accordion.d.ts

		@@ -1,4 +0,4 @@
		import React, { ReactNode } from 'react';
		import React, { ReactNode, ReactFragment } from 'react';
		interface AccordionProps {
		children: Array<React.ReactElement<AccordionItemProps>> \| React.ReactElement<AccordionItemProps>;
		children?: Array<React.ReactElement<AccordionItemProps>> \| React.ReactElement<AccordionItemProps> \| ReactFragment \| boolean \| null;
		}
		@@ -5,0 +5,0 @@ interface AccordionItemProps {

package.json

		{
		"name": "analysis-ui-components",
		"version": "0.2.0",
		"version": "0.3.0",
		"description": "React components to build analysis UI",
		@@ -5,0 +5,0 @@ "main": "lib/index.js",

100

README.md

		@@ -18,2 +18,100 @@ # analysis-ui-components

		// TODO do this
		```
		> npm i analysis-ui-components
		```

		## Basic example

		```tsx
		import {
		Accordion,
		Header,
		RootLayout,
		SplitPane,
		Toolbar,
		} from 'analysis-ui-components';

		function BasicExample() {
		return (
		<RootLayout
		style={{
		borderStyle: 'solid',
		borderColor: 'rgb(213, 213, 213)',
		borderWidth: '1px',
		}}
		>
		<div style={{ display: 'flex', flexDirection: 'column' }}>
		<Header>
		<Toolbar orientation="horizontal">
		<Toolbar.Item titleOrientation="horizontal" id="logo" title="Logo">
		<i className="fas fa-meteor" />
		</Toolbar.Item>
		</Toolbar>
		<Toolbar orientation="horizontal">
		<Toolbar.Item id="a" title="User manual">
		<i className="fas fa-book" />
		</Toolbar.Item>
		<Toolbar.Item id="b" title="General settings">
		<i className="fas fa-cogs" />
		</Toolbar.Item>
		<Toolbar.Item id="c" title="Full screen">
		<i className="fas fa-tablet-alt" />
		</Toolbar.Item>
		</Toolbar>
		</Header>
		</div>
		<div
		style={{
		display: 'flex',
		flexDirection: 'row',
		}}
		>
		<div>
		<Toolbar orientation="vertical">
		<Toolbar.Item id="a" title="Glasses" active>
		<i className="fas fa-glasses" />
		</Toolbar.Item>
		<Toolbar.Item id="b" title="Open in large mode">
		<i className="fas fa-arrows-alt" />
		</Toolbar.Item>
		</Toolbar>
		</div>
		<div
		ref={ref}
		style={{
		width: '100%',
		height: '300px',
		}}
		>
		<SplitPane initialSeparation="35%">
		<div style={{ padding: 5 }}>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum
		earum omnis, et voluptatum veniam repellendus similique! Sunt
		nostrum necessitatibus reprehenderit asperiores excepturi
		corrupti? Optio soluta illo quae ex nam nulla.
		</div>
		<div
		style={{
		width: '100%',
		height: '100%',
		flex: '1 1 0%',
		}}
		>
		<Accordion>
		<Accordion.Item title="Spectra" defaultOpened>
		<p style={{ padding: 5 }}>Spectra lorem</p>
		</Accordion.Item>
		<Accordion.Item title="Integral">
		<p style={{ padding: 5 }}>Integral lorem</p>
		</Accordion.Item>
		</Accordion>
		</div>
		</SplitPane>
		</div>
		</div>
		</RootLayout>
		);
		}
		```

		![image](https://user-images.githubusercontent.com/30870051/133239548-fe002213-53e5-44ab-8d44-39aaebe65152.png)

lib-esm/layout/Accordion.js.map

Sorry, the diff of this file is not supported yet

analysis-ui-components - npm Package Compare versions

Improved metrics