@geoinsight/react-components 0.1.0

package/.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

package/.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-mdx-gfm"],
+  "framework": {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+  docs: {
+    autodocs: true
+  }
+};

package/.storybook/preview.js

@@ -0,0 +1,43 @@
+import "../src/styles/variables.css";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      // Array of plain string values or MenuItem shape (see below)
+      items: ['light', 'dark'],
+      // Property that specifies if the name of the item will be displayed
+      showName: true,
+      // Change title based on selected value
+      dynamicTitle: true,
+    },
+  },
+  palette: {
+    name: 'Palette',
+    description: 'Global theme for components',
+    defaultValue: 'water',
+    toolbar: {
+      icon: 'circlehollow',
+      // Array of plain string values or MenuItem shape (see below)
+      items: ['water', 'forest', 'earth'],
+      // Property that specifies if the name of the item will be displayed
+      showName: true,
+      // Change title based on selected value
+      dynamicTitle: true,
+    },
+  },
+}
+

package/README.md

@@ -0,0 +1,26 @@
+# Introduction
+This library is used for Geoinsight, on their websites.
+
+## Install
+Install with npm:
+`npm install @geoinsight/react-components`
+
+Install with yarn:
+`yarn add @geoinsight/react-components`
+
+## Use
+As an example:
+`import { Button } from "@geoinsight/react-components";`
+
+## Docs
+### Basic components
+#### Button
+`<Button />`
+
+#### Input
+`<Input />`
+
+#### TextArea
+`<TextArea />`
+
+

package/dist/cjs/index.css

@@ -0,0 +1,111 @@
+.button {
+  align-items: center;
+  border-radius: var(--spacing-32);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-8);
+  font-size: var(--font-size-16);
+}
+
+/* 
+.button--active {
+  background-color: var(--color-neutral-500) !important;
+} */
+
+.button:disabled {
+  cursor: unset;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.button:hover {
+  background-color: var(--color-primary);
+  transition: var(--transition-bg-cubic-bezier);
+}
+
+.button__link {
+  background-color: unset !important;
+  color: var(--color-neutral-100);
+  text-decoration: underline transparent;
+}
+
+.button__link:hover {
+  color: var(--color-primary);
+  text-decoration: underline 0.1rem var(--color-primary);
+  text-underline-offset: var(--spacing-8);
+  transition: var(--transition-color-cubic-bezier),
+    var(--transition-text-decoration-cubic-bezier);
+}
+
+.button__primary {
+  background-color: var(--color-secondary);
+  border: 3px solid var(--color-primary);
+}
+
+.button__primary:hover {
+  box-shadow: 0 4px 4px 0 var(--color-neutral-400);
+  transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic-bezier);
+}
+
+.button__secondary {
+  background-color: var(--color-neutral-900);
+  border: 3px solid var(--color-primary);
+  color: var(--color-neutral-100);
+}
+
+.button__secondary:hover {
+  background-color: var(--color-primary);
+}
+
+.button__icon {
+  background-color: unset;
+}
+
+.button__icon:hover {
+  box-shadow: unset;
+}
+
+.button__small {
+  padding: var(--spacing-4);
+}
+
+.button__medium {
+  padding: var(--spacing-8) var(--spacing-24);
+}
+
+.button__large {
+  padding: var(--spacing-16);
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.input {
+  border-radius: var(--spacing-8);
+  border: 2px solid var(--color-primary);
+  color: var(--color-black);
+  padding: var(--spacing-16) var(--spacing-24);
+}
+
+.input:hover {
+  border: 3px solid var(--color-primary-700);
+}
+
+.input:focus {
+  border: 3px solid var(--color-primary-700);
+  outline: none;
+}
+
+.input--error {
+  border: 3px solid var(--color-danger);
+}
+
+.error {
+  font-size: 12px;
+  color: var(--color-danger);
+}

package/dist/cjs/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+
+function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", ...rest }) {
+    return as === "link" ? (jsxRuntime.jsxs("a", { ...(isNewWindow && { target: "_blank" }), className: clsx(className, "button", mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxRuntime.jsxs("button", { className: clsx(className, "button", `button__${mode}`, `button__${size}`), ...rest, children: [children, icon] }));
+}
+
+function Input({ className = "", classNameGroup = "", errorMessage = "", inputRef, styleGroup, ...rest }) {
+    return (jsxRuntime.jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsxRuntime.jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsxRuntime.jsx("span", { className: "error", children: errorMessage })] }));
+}
+
+exports.Button = Button;
+exports.Input = Input;

package/dist/esm/index.css

@@ -0,0 +1,111 @@
+.button {
+  align-items: center;
+  border-radius: var(--spacing-32);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-8);
+  font-size: var(--font-size-16);
+}
+
+/* 
+.button--active {
+  background-color: var(--color-neutral-500) !important;
+} */
+
+.button:disabled {
+  cursor: unset;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.button:hover {
+  background-color: var(--color-primary);
+  transition: var(--transition-bg-cubic-bezier);
+}
+
+.button__link {
+  background-color: unset !important;
+  color: var(--color-neutral-100);
+  text-decoration: underline transparent;
+}
+
+.button__link:hover {
+  color: var(--color-primary);
+  text-decoration: underline 0.1rem var(--color-primary);
+  text-underline-offset: var(--spacing-8);
+  transition: var(--transition-color-cubic-bezier),
+    var(--transition-text-decoration-cubic-bezier);
+}
+
+.button__primary {
+  background-color: var(--color-secondary);
+  border: 3px solid var(--color-primary);
+}
+
+.button__primary:hover {
+  box-shadow: 0 4px 4px 0 var(--color-neutral-400);
+  transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic-bezier);
+}
+
+.button__secondary {
+  background-color: var(--color-neutral-900);
+  border: 3px solid var(--color-primary);
+  color: var(--color-neutral-100);
+}
+
+.button__secondary:hover {
+  background-color: var(--color-primary);
+}
+
+.button__icon {
+  background-color: unset;
+}
+
+.button__icon:hover {
+  box-shadow: unset;
+}
+
+.button__small {
+  padding: var(--spacing-4);
+}
+
+.button__medium {
+  padding: var(--spacing-8) var(--spacing-24);
+}
+
+.button__large {
+  padding: var(--spacing-16);
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.input {
+  border-radius: var(--spacing-8);
+  border: 2px solid var(--color-primary);
+  color: var(--color-black);
+  padding: var(--spacing-16) var(--spacing-24);
+}
+
+.input:hover {
+  border: 3px solid var(--color-primary-700);
+}
+
+.input:focus {
+  border: 3px solid var(--color-primary-700);
+  outline: none;
+}
+
+.input--error {
+  border: 3px solid var(--color-danger);
+}
+
+.error {
+  font-size: 12px;
+  color: var(--color-danger);
+}

package/dist/esm/index.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", ...rest }) {
+    return as === "link" ? (jsxs("a", { ...(isNewWindow && { target: "_blank" }), className: clsx(className, "button", mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxs("button", { className: clsx(className, "button", `button__${mode}`, `button__${size}`), ...rest, children: [children, icon] }));
+}
+
+function Input({ className = "", classNameGroup = "", errorMessage = "", inputRef, styleGroup, ...rest }) {
+    return (jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsx("span", { className: "error", children: errorMessage })] }));
+}
+
+export { Button, Input };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@geoinsight/react-components",
+  "version": "0.1.0",
+  "description": "This library is the main UI component library for geoinsight",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "author": "Geoinsight",
+  "license": "MIT",
+  "scripts": {
+    "build": "rollup -c rollup.config.js --bundleConfigAsCjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@types/react": "^18.0.27",
+    "clsx": "^1.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
+    "typescript": "^4.9.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@storybook/addon-actions": "^7.0.7",
+    "@storybook/addon-essentials": "^7.0.7",
+    "@storybook/addon-interactions": "^7.0.7",
+    "@storybook/addon-links": "^7.0.7",
+    "@storybook/addon-mdx-gfm": "^7.0.7",
+    "@storybook/react": "^7.0.7",
+    "@storybook/react-webpack5": "^7.0.7",
+    "@storybook/testing-library": "^0.1.0",
+    "babel-loader": "^8.3.0",
+    "rollup": "^3.12.0",
+    "rollup-plugin-import-css": "^3.1.0",
+    "storybook": "^7.0.7",
+    "tslib": "^2.5.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,40 @@
+// rollup.config.js
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import pkg from "./package.json";
+import css from "rollup-plugin-import-css";
+
+export default [
+  {
+    input: "src/index.ts",
+    output: {
+      name: "mapinsight",
+      file: pkg.browser,
+      format: "umd",
+    },
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      css()
+    ],
+    external: ["react", "react-dom"]
+  },
+
+  // CommonJS (for Node) and ES module (for bundlers) build.
+  // (We could have three entries in the configuration array
+  // instead of two, but it's quicker to generate multiple
+  // builds from a single configuration where possible, using
+  // an array for the `output` option, where we can specify
+  // `file` and `format` for each target)
+  {
+    input: "src/index.ts",
+    output: [
+      { file: pkg.main, format: "cjs" },
+      { file: pkg.module, format: "es" },
+    ],
+    plugins: [typescript({ tsconfig: "./tsconfig.json" }),
+    css()],
+  }
+];

package/src/components/accordion/index.css

@@ -0,0 +1,40 @@
+.accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4)
+}
+
+.accordion__title {
+  border-radius: var(--spacing-8);
+  background-color: var(--color-neutral-700);
+  color: var(--color-neutral-100);
+  justify-content: flex-end;
+  gap: 8px;
+  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);
+}
+
+.accordion__menu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  padding: 0 0 var(--spacing-8) var(--spacing-16);
+}
+
+.accordion__child {
+  border-radius: var(--spacing-8);
+  background-color: var(--color-neutral-200);
+  color: var(--color-neutral-900);
+  /* background: none !important; */
+  font-size: var(--font-size-14);
+}
+
+.accordion__child--active {
+  background-color: var(--color-neutral-500);
+}
+
+.accordion__check {
+  color: var(--color-neutral-500);
+  margin-right: calc(var(--spacing-24)*-1);
+  position: absolute;
+  right: 0;
+}

package/src/components/accordion/index.stories.tsx

@@ -0,0 +1,55 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Accordion } from "./index";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Example/Accordion",
+  component: Accordion,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: "color" },
+  },
+} as ComponentMeta<typeof Accordion>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof Accordion> = (args) => (
+  <Accordion {...args} />
+);
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Primary.args = {
+  menu: {
+    water: {
+      label: "Water",
+      isExpanded: true,
+      dataTheme: "water",
+      children: [
+        {
+          id: "water_1",
+          label: "Water 1",
+        },
+        {
+          id: "water_2",
+          label: "Water 1",
+        },
+      ],
+    },
+    fire: {
+      label: "Fire",
+      dataTheme: "earth",
+      children: [
+        {
+          id: "fire_1",
+          label: "Fire 1",
+        },
+        {
+          id: "fire_2",
+          label: "Fire 2",
+        },
+      ],
+    },
+  },
+  defaultValue: "fire_1",
+  allExpanded: true
+};

package/src/components/accordion/index.tsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import Button from "../button";
+import "./index.css";
+import { TfiAngleUp, TfiAngleDown } from "react-icons/tfi";
+import { BsCheckLg } from "react-icons/bs";
+import { Accordion as AccordionProps } from "./index.types";
+
+export function Accordion({
+  menu,
+  allExpanded,
+  defaultValue,
+  selectValue,
+}: AccordionProps) {
+  const [toggle, setToggle] = useState<{ [key: string]: boolean | undefined }>(
+    Object.fromEntries(
+      Object.entries(menu).map(([key, { isExpanded = false }]) => [
+        key,
+        allExpanded !== undefined ? allExpanded : isExpanded,
+      ])
+    )
+  );
+  const [selected, setSelected] = useState<string>(defaultValue);
+
+  const handleToggle = (name: string) => {
+    setToggle((prev) => {
+      return { ...prev, [name]: !prev[name] };
+    });
+  };
+
+  return (
+    <div className={"accordion"}>
+      {Object.keys(menu).map((item) => (
+        <>
+          <Button
+            className={"accordion__title"}
+            data-theme={menu[item].dataTheme}
+            icon={toggle[item] ? <TfiAngleDown /> : <TfiAngleUp />}
+            handleClick={() => handleToggle(item)}
+          >
+            {menu[item].label}
+          </Button>
+          {toggle[item] && (
+            <div className="accordion__menu">
+              {menu[item].children.map((child) => (
+                <Button
+                  mode="secondary"
+                  data-theme={menu[item].dataTheme}
+                  className={`accordion__child ${
+                    child.id === selected &&
+                    ` accordion__child--active`
+                  }`}
+                  handleClick={() => {
+                    setSelected(child.id);
+                    selectValue && selectValue(item, child);
+                  }}
+                >
+                  <>
+                    {child.label}
+                    {child.id === selected ? (
+                      <BsCheckLg
+                        className={"accordion__check"}
+                        size={"1rem"}
+                      />
+                    ) : (
+                      ""
+                    )}
+                  </>
+                </Button>
+              ))}
+            </div>
+          )}
+        </>
+      ))}
+    </div>
+  );
+}
+
+export default Accordion;

package/src/components/accordion/index.types.ts

@@ -0,0 +1,44 @@
+import {dataTheme} from "data-theme";
+
+export interface Accordion {
+  /**
+   * What to put inside the menu
+   */
+  menu: layers;
+  /**
+   * Default value that is chosen. Must use on the of the children ids on the menu prop.
+   */
+  defaultValue: string;
+  /**
+   * Callback function for extra leg work outside the component. It takes two arguments:
+   * - item - parent ID.
+   * - object with the child ID and label.
+   */
+  selectValue?: (
+    parentId: string,
+    child: {
+      id: string;
+      label: string;
+      // field: string;
+      // tempValue: number;
+      // description: (value: number | string | undefined) => string;
+      // style: any;
+    }
+  ) => void;
+
+  allExpanded?: boolean;
+}
+
+export interface layer {
+  id: string;
+  label: string;
+}
+
+export interface layers {
+  [key: string]: {
+    label: string;
+    isExpanded?: boolean;
+    dataTheme?: dataTheme;
+    children: layer[];
+  };
+}