Merge pull request #114 from codytodonnell/main

Prep package for publishing

strudel-components/README.md

@@ -1,30 +1,48 @@
-# React + TypeScript + Vite
+# STRUDEL Components
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+STRUDEL Components are a set of react components that support people developing UI applications for the scientific community. They are built on top of [Material UI components](https://mui.com/) and aim to provide an extra layer of implementation to promote positive user experiences and usability standards.
 
-Currently, two official plugins are available:
+Key Features:
+- Specialized data grid for displaying scientific data
+- Chemical formula rendering component
+- Filters component for managing complex filter states
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+[Check out the documentation on the STRUDEL Kit site.](https://strudel.science/strudel-kit/docs/components/overview)
 
-## Expanding the ESLint configuration
+They also provide the building blocks for the STRUDEL Task Flow templates. [Learn how to get started with the full templates](https://strudel.science/strudel-kit/docs/).
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+## Install
 
-- Configure the top-level `parserOptions` property like this:
+```
+npm install @strudel-science/components
+```
+
+## Usage
+
+### [Examples](https://github.com/strudel-science/strudel-kit/tree/main/strudel-components/src/examples)
+
+### Import
+
+```js
+import { SciDataGrid } from '@strudel-science/components';
+```
+
+```js
+import { Filters, FilterGroup, FilterField } from '@strudel-science/components';
+```
+
+```js
+import { LabelValueTable } from '@strudel-science/components';
+```
 
 ```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
+import { Formula } from '@strudel-science/components';
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+```js
+import { CheckboxList } from '@strudel-science/components';
+```
+
+```js
+import { PageHeader } from '@strudel-science/components';
+```

strudel-components/lib/components/CheckboxList.tsx

@@ -1,15 +1,15 @@
 import { Checkbox, FormControlLabel, FormGroup, FormGroupProps } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
-type CheckboxOptionValue = string | number;
+export type CheckboxOptionValue = string | number;
 
 export interface CheckboxOption {
   label: string;
   value: CheckboxOptionValue;
 }
 
 interface CheckboxListProps extends Omit<FormGroupProps, 'onChange'> {
-  values: string[] | number[] | null;
+  values: CheckboxOptionValue[] | null;
   options: CheckboxOption[];
   onChange?: (values: CheckboxOptionValue[] | null) => any;
 }

strudel-components/lib/main.tsx

@@ -5,3 +5,9 @@ export { FilterField } from './components/FilterField'
 export { FilterGroup } from './components/FilterGroup'
 export { FilterContext } from './components/FilterContext'
 export { SciDataGrid } from './components/SciDataGrid'
+export type { SciDataGridColDef } from './components/SciDataGrid'
+export { Formula } from './components/Formula'
+export { PageHeader } from './components/PageHeader'
+export { CheckboxList } from './components/CheckboxList'
+export type { CheckboxOptionValue, CheckboxOption } from './components/CheckboxList'
+

strudel-components/package.json

@@ -1,8 +1,12 @@
 {
-  "name": "strudel-components",
+  "name": "@strudel-science/components",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/strudel-science/strudel-kit/tree/main"
+  },
   "scripts": {
     "start": "vite",
     "dev": "vite",

strudel-components/src/examples/CheckboxList/CheckboxListEx.tsx

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { CheckboxList } from "../../../lib/main"
+import { CheckboxOptionValue } from "../../../lib/components/CheckboxList";
+
+export const CheckboxListEx: React.FC = () => {
+  const [values, setValues] = useState<CheckboxOptionValue[] | null>(null);
+
+  const handleChange = (values: CheckboxOptionValue[] | null) => {
+    setValues(values);
+  }
+
+  return (
+    <CheckboxList 
+      values={values}
+      onChange={handleChange}
+      options={[
+        {
+          label: 'Checkbox 1',
+          value: 1
+        },
+        {
+          label: 'Checkbox 2',
+          value: 2
+        }
+      ]} 
+    />
+  )
+}

strudel-components/src/examples/Formula/FormulaEx.tsx

@@ -0,0 +1,7 @@
+import { Formula } from "../../../lib/main"
+
+export const FormulaEx: React.FC = () => {
+  return (
+    <Formula content="C2H5OH" />
+  )
+}

strudel-components/src/examples/LabelValueTable/LabelValueTableEx.tsx

@@ -0,0 +1,22 @@
+import { LabelValueTable } from "../../../lib/main"
+
+export const LabelValueTableEx: React.FC = () => {
+  return (
+    <LabelValueTable
+      rows={[
+        {
+          label: 'Attribute 1',
+          value: 'Value 1',
+        },
+        {
+          label: 'Attribute 2',
+          value: 'Value 2',
+        },
+        {
+          label: 'Attribute 3',
+          value: 'Value 3',
+        }
+      ]}
+    />
+  )
+}