pollination-react-io 0.0.30 → 0.0.31

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2020 Harvey Delaney
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2020 Harvey Delaney
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,111 +1,111 @@
-# Pollination React IO
-
-Plan is to create a set of hooks and higher order components (HOCs) that abstract logic originally implemented in pollination-streamlit-io to facilitate using react as a native client for the CAD plugins.
-
-### Testing
-
-```
-npm run test
-```
-
-### Building
-
-```
-npm run build
-```
-
-### Storybook
-
-To run a live-reload Storybook server on your local machine:
-
-```
-npm run storybook
-```
-
-To export your Storybook as static files:
-
-```
-npm run storybook:export
-```
-
-You can then serve the files under `storybook-static` using S3, GitHub pages, Express etc. I've hosted this library at: https://www.harveydelaney.com/react-component-library
-
-### Generating New Components
-
-I've included a handy NodeJS util file under `util` called `create-component.js`. Instead of copy pasting components to create a new component, you can instead run this command to generate all the files you need to start building out a new component. To use it:
-
-```
-npm run generate YourComponentName
-```
-
-This will generate:
-
-```
-/src
-  /YourComponentName
-    YourComponentName.tsx
-    YourComponentName.stories.tsx
-    YourComponentName.test.tsx
-    YourComponentName.types.ts
-    YourComponentName.scss
-```
-
-The default templates for each file can be modified under `util/templates`.
-
-Don't forget to add the component to your `index.ts` exports if you want the library to export the component!
-
-### Installing Component Library Locally
-
-Let's say you have another project (`test-app`) on your machine that you want to try installing the component library into without having to first publish the component library. In the `test-app` directory, you can run:
-
-```
-npm i --save ../react-component-library
-```
-
-which will install the local component library as a dependency in `test-app`. It'll then appear as a dependency in `package.json` like:
-
-```
-  ...
-  "dependencies": {
-    ...
-    "react-component-library": "file:../react-component-library",
-    ...
-  },
-  ...
-```
-
-Your components can then be imported and used in that project.
-### Using Component Library SASS Variables
-
-I've found that it's helpful to export SASS variables to projects consuming the library. As such, I've added the `rollup-plugin-copy` NPM package and used it to copy the [`src/typography.scss`](src/typography.scss) and [`variables.scss`](src/variables.scss) into the `build` directory as part of the Rollup bundle process. This allows you to use these variables in your projects consuming the component library.
-
-For example, let's say you installed `harvey-component-library` into your project. To use the exported variables/mixins, in a SASS file you would do the following:
-
-```Sass
-@import '~harvey-component-library/build/typography';
-
-.example-container {
-    @include heading;
-
-    color: $harvey-white;
-}
-```
-
-## Additional Help
-
-### Dark Mode
-
-The example component `TestComponent` respects the user's dark mode operating system preferences and renders the component in the appropriate theme.
-
-This is achieved by using the media query: `@media (prefers-color-scheme: dark)` in combination with CSS variables. The colours that change depending on dark mode preference can be found in [`src/variables.scss`](src/variables.scss). Example usage of these variables can be found within [`src/TestComponent/TestComponent.scss`](src/TestComponent/TestComponent.scss).
-
-Read https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme for more details.
-
-
-[Built with react-component-library](https://blog.harveydelaney.com/creating-your-own-react-component-library/)
-
-- [Rollup](https://github.com/rollup/rollup)
-- [Sass](https://sass-lang.com/)
-- [TypeScript](https://www.typescriptlang.org/)
-- [Storybook](https://storybook.js.org/)
-- [Jest](https://jestjs.io/) and [React Testing Library](https://github.com/testing-library/react-testing-library)
+# Pollination React IO
+
+Plan is to create a set of hooks and higher order components (HOCs) that abstract logic originally implemented in pollination-streamlit-io to facilitate using react as a native client for the CAD plugins.
+
+### Testing
+
+```
+npm run test
+```
+
+### Building
+
+```
+npm run build
+```
+
+### Storybook
+
+To run a live-reload Storybook server on your local machine:
+
+```
+npm run storybook
+```
+
+To export your Storybook as static files:
+
+```
+npm run storybook:export
+```
+
+You can then serve the files under `storybook-static` using S3, GitHub pages, Express etc. I've hosted this library at: https://www.harveydelaney.com/react-component-library
+
+### Generating New Components
+
+I've included a handy NodeJS util file under `util` called `create-component.js`. Instead of copy pasting components to create a new component, you can instead run this command to generate all the files you need to start building out a new component. To use it:
+
+```
+npm run generate YourComponentName
+```
+
+This will generate:
+
+```
+/src
+  /YourComponentName
+    YourComponentName.tsx
+    YourComponentName.stories.tsx
+    YourComponentName.test.tsx
+    YourComponentName.types.ts
+    YourComponentName.scss
+```
+
+The default templates for each file can be modified under `util/templates`.
+
+Don't forget to add the component to your `index.ts` exports if you want the library to export the component!
+
+### Installing Component Library Locally
+
+Let's say you have another project (`test-app`) on your machine that you want to try installing the component library into without having to first publish the component library. In the `test-app` directory, you can run:
+
+```
+npm i --save ../react-component-library
+```
+
+which will install the local component library as a dependency in `test-app`. It'll then appear as a dependency in `package.json` like:
+
+```
+  ...
+  "dependencies": {
+    ...
+    "react-component-library": "file:../react-component-library",
+    ...
+  },
+  ...
+```
+
+Your components can then be imported and used in that project.
+### Using Component Library SASS Variables
+
+I've found that it's helpful to export SASS variables to projects consuming the library. As such, I've added the `rollup-plugin-copy` NPM package and used it to copy the [`src/typography.scss`](src/typography.scss) and [`variables.scss`](src/variables.scss) into the `build` directory as part of the Rollup bundle process. This allows you to use these variables in your projects consuming the component library.
+
+For example, let's say you installed `harvey-component-library` into your project. To use the exported variables/mixins, in a SASS file you would do the following:
+
+```Sass
+@import '~harvey-component-library/build/typography';
+
+.example-container {
+    @include heading;
+
+    color: $harvey-white;
+}
+```
+
+## Additional Help
+
+### Dark Mode
+
+The example component `TestComponent` respects the user's dark mode operating system preferences and renders the component in the appropriate theme.
+
+This is achieved by using the media query: `@media (prefers-color-scheme: dark)` in combination with CSS variables. The colours that change depending on dark mode preference can be found in [`src/variables.scss`](src/variables.scss). Example usage of these variables can be found within [`src/TestComponent/TestComponent.scss`](src/TestComponent/TestComponent.scss).
+
+Read https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme for more details.
+
+
+[Built with react-component-library](https://blog.harveydelaney.com/creating-your-own-react-component-library/)
+
+- [Rollup](https://github.com/rollup/rollup)
+- [Sass](https://sass-lang.com/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Storybook](https://storybook.js.org/)
+- [Jest](https://jestjs.io/) and [React Testing Library](https://github.com/testing-library/react-testing-library)

package/build/atoms/ConditionalWrapper/index.d.ts

@@ -0,0 +1,5 @@
+export declare const ConditionalWrapper: ({ condition, wrapper, children }: {
+    condition: any;
+    wrapper: any;
+    children: any;
+}) => any;

package/build/atoms/Dropdown/Dropdown.d.ts

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+export declare type Option = {
+    type: 'checkbox' | 'radio' | 'button' | 'label' | 'link';
+    id: string;
+    label: string;
+    checked?: boolean;
+    disabled?: boolean;
+    onSelect?: (option: Option) => void;
+    to?: string;
+};
+export declare type OptionGroup = {
+    options: Option[];
+    type?: 'radio' | 'default';
+    value?: string;
+};
+interface DropdownProps {
+    optionGroups: OptionGroup[];
+    trigger: React.ReactNode;
+    contentProps?: DropdownMenu.DropdownMenuContentProps;
+    itemProps?: DropdownMenu.DropdownMenuItemProps;
+    arrow?: boolean;
+    disabled?: boolean;
+}
+export declare const Dropdown: FC<DropdownProps>;
+export {};

package/build/atoms/Dropdown/Dropdown.types.d.ts

@@ -0,0 +1,3 @@
+export interface DropdownProps {
+    foo: string;
+}

package/build/atoms/FileInput/FileInput.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { FileInputProps } from "./FileInput.types";
+import "./FileInput.scss";
+import "../../typography.scss";
+declare const FileInput: React.FC<FileInputProps>;
+export default FileInput;

package/build/atoms/FileInput/FileInput.types.d.ts

@@ -0,0 +1,4 @@
+export interface FileInputProps {
+    onChange?: (event: any) => void;
+    disabled?: boolean;
+}

package/build/atoms/Logo/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Logo(): JSX.Element;

package/build/atoms/SettingsButton/index.d.ts

@@ -0,0 +1,11 @@
+import React, { FC, ReactNode } from 'react';
+import { OptionGroup } from '../Dropdown/Dropdown';
+import '../../buttons.scss';
+export interface SettingsButtonProps {
+    onClick: () => void;
+    label: string | ReactNode;
+    options?: OptionGroup[];
+    disabled?: boolean;
+    triggerIcon?: React.ReactNode;
+}
+export declare const SettingsButton: FC<SettingsButtonProps>;

package/build/atoms/Tooltip/index.d.ts

@@ -0,0 +1,10 @@
+import React, { CSSProperties, FC } from "react";
+import './Tooltip.scss';
+interface TooltipProps {
+    content: React.ReactNode | string;
+    side?: "top" | "right" | "bottom" | "left";
+    children?: React.ReactNode;
+    style?: CSSProperties;
+}
+export declare const Tooltip: FC<TooltipProps>;
+export {};

package/build/buttons.scss

@@ -1,87 +1,87 @@
-@import "./variables.scss";
-@import "./typography.scss";
-
-.btn-group {
-  @include font-defaults;
-
-  width: fit-content;
-  display: flex;
-  border-radius: 4px;
-}
-
-.btn-group:hover {
-  box-shadow: 0 1px 2px 0 rgba(26, 115, 232, 0.45), 0 1px 3px 1px rgba(26, 115, 232, 0.30);
-}
-
-.btn-group-disabled:hover {
-  box-shadow: none;
-}
-
-.btn-group button {
-  max-width: 260px;
-  display: flex;
-  background-color: var(--primary);
-  border: 1px solid var(--primary);
-  color: white;
-  padding: 6px 10px;
-  cursor: pointer;
-  float: left;
-  transition: background-color 0.125s ease-in-out;
-  z-index: 10;
-  align-items: center;
-  gap: 8px;
-}
-
-.btn-group-disabled button {
-  background-color: var(--grey3);
-  color: var(--grey5);
-  cursor: default;
-  border-color: var(--grey5);
-}
-
-.btn-group button:first-child {
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-
-.btn-group button:last-child {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-  border-left-color: #096dd9;
-}
-
-.btn-group button:last-child:disabled {
-  border-left-color: var(--grey5);
-}
-
-.btn-group button:not(:last-child) {
-  border-right: none;
-}
-
-.btn-group button:focus-visible {
-  outline: none;
-}
-
-.btn-group button:focus {
-  outline: none;
-}
-
-/* Clear floats (clearfix hack) */
-.btn-group:after {
-  content: "";
-  clear: both;
-  display: table;
-}
-
-.btn-group button:hover {
-  background-color: var(--primary2);
-  z-index: 11;
-}
-
-.btn-group-disabled:hover button:hover {
-  background-color: var(--grey3);
-}
-
-.options-content {
-  font-size: calc(clamp(0.65rem, 8vw - 0.75rem, 0.85rem));
+@import "./variables.scss";
+@import "./typography.scss";
+
+.btn-group {
+  @include font-defaults;
+
+  width: fit-content;
+  display: flex;
+  border-radius: 4px;
+}
+
+.btn-group:hover {
+  box-shadow: 0 1px 2px 0 rgba(26, 115, 232, 0.45), 0 1px 3px 1px rgba(26, 115, 232, 0.30);
+}
+
+.btn-group-disabled:hover {
+  box-shadow: none;
+}
+
+.btn-group button {
+  max-width: 260px;
+  display: flex;
+  background-color: var(--primary);
+  border: 1px solid var(--primary);
+  color: white;
+  padding: 6px 10px;
+  cursor: pointer;
+  float: left;
+  transition: background-color 0.125s ease-in-out;
+  z-index: 10;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-group-disabled button {
+  background-color: var(--grey3);
+  color: var(--grey5);
+  cursor: default;
+  border-color: var(--grey5);
+}
+
+.btn-group button:first-child {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.btn-group button:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-left-color: #096dd9;
+}
+
+.btn-group button:last-child:disabled {
+  border-left-color: var(--grey5);
+}
+
+.btn-group button:not(:last-child) {
+  border-right: none;
+}
+
+.btn-group button:focus-visible {
+  outline: none;
+}
+
+.btn-group button:focus {
+  outline: none;
+}
+
+/* Clear floats (clearfix hack) */
+.btn-group:after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+.btn-group button:hover {
+  background-color: var(--primary2);
+  z-index: 11;
+}
+
+.btn-group-disabled:hover button:hover {
+  background-color: var(--grey3);
+}
+
+.options-content {
+  font-size: calc(clamp(0.65rem, 8vw - 0.75rem, 0.85rem));
 }