@geoinsight/react-components 0.2.1 → 0.2.2

package/dist/cjs/index.js

@@ -5,8 +5,9 @@ var clsx = require('clsx');
 var react = require('react');
 var tb = require('react-icons/tb');
 
-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] }));
+const Anchor = ({ Custom, children, ...rest }) => Custom ? jsxRuntime.jsx(Custom, { ...rest, children: children }) : jsxRuntime.jsx("a", { ...rest, children: children });
+function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
+    return as === "link" ? (jsxRuntime.jsxs(Anchor, { Custom: CustomAnchor, ...(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 }) {

package/dist/esm/index.js

@@ -3,8 +3,9 @@ import clsx from 'clsx';
 import { useRef, useState, createContext, useEffect, useContext } from 'react';
 import { TbArrowsDiagonal2 } from 'react-icons/tb';
 
-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] }));
+const Anchor = ({ Custom, children, ...rest }) => Custom ? jsx(Custom, { ...rest, children: children }) : jsx("a", { ...rest, children: children });
+function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
+    return as === "link" ? (jsxs(Anchor, { Custom: CustomAnchor, ...(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 }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoinsight/react-components",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "This library is the main UI component library for geoinsight",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/.babelrc.json

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

package/.storybook/main.js

@@ -1,11 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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/rollup.config.js

@@ -1,40 +0,0 @@
-// 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

@@ -1,40 +0,0 @@
-.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

@@ -1,55 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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[];
-  };
-}

package/src/components/button/index.css

@@ -1,80 +0,0 @@
-.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);
-}

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

@@ -1,46 +0,0 @@
-import { StoryObj, Meta } from "@storybook/react";
-
-import { Button } from "./index";
-import { withColorScheme } from "../../decorators/withColorScheme";
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta: Meta<typeof Button> = {
-  title: "Example/Button",
-  component: Button,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: { control: "color" },
-    mode: {
-      options: ["primary", "secondary", "icon"],
-      control: {
-        type: "select",
-      },
-    },
-    size: {
-      options: ["small", "medium", "large"],
-      control: {
-        type: "select",
-      },
-    },
-  },
-  decorators: [withColorScheme],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Button>;
-
-export const Primary: Story = {
-  args: {
-    children: "Click here",
-    mode: "primary",
-    size: "medium",
-    as: "button",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    mode: "secondary",
-  },
-};

package/src/components/button/index.tsx

@@ -1,58 +0,0 @@
-import clsx from "clsx";
-import { ButtonAsButton, ButtonAsLink } from "./index.types";
-import "./index.css";
-import { ReactNode } from "react";
-
-const Anchor = ({
-  Custom,
-  children,
-  ...rest
-}: {
-  Custom?: React.ComponentClass<any>;
-  children?: ReactNode;
-}) =>
-  Custom ? <Custom {...rest}>{children}</Custom> : <a {...rest}>{children}</a>;
-
-export function Button({
-  children = "Click me",
-  className = "",
-  icon = undefined,
-  isNewWindow = false,
-  mode = "primary",
-  size = "medium",
-  as = "button",
-  CustomAnchor,
-  ...rest
-}: ButtonAsButton | ButtonAsLink): JSX.Element {
-  return as === "link" ? (
-    <Anchor
-      Custom={CustomAnchor}
-      {...(isNewWindow && { target: "_blank" })}
-      className={clsx(
-        className,
-        "button",
-        mode === "secondary" ? `button button__${mode}` : "button__link",
-        `button__${size}`
-      )}
-      {...(rest as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
-    >
-      {children}
-      {icon}
-    </Anchor>
-  ) : (
-    <button
-      className={clsx(
-        className,
-        "button",
-        `button__${mode}`,
-        `button__${size}`
-      )}
-      {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}
-    >
-      {children}
-      {icon}
-    </button>
-  );
-}
-
-export default Button;

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

@@ -1,43 +0,0 @@
-type Mode = "primary" | "secondary" | "icon";
-type Size = "small" | "medium" | "large";
-export type ButtonAsButton = Base &
-  Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof Base> & {
-    as?: "button";
-  };
-export type ButtonAsLink = Base &
-  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof Base> & {
-    as?: "link";
-  };
-
-export interface Base {
-  /**
-   * What to put inside the button (string or html elements)
-   */
-  children?: JSX.Element | string;
-  /**
-   * Custom css class name
-   */
-  className?: string;
-  /**
-   * If you want to add an icon image next to the children. Needs to be an react html element.
-   */
-  icon?: JSX.Element;
-  /**
-   * If you want to open a new window on the browser when you click the button. Only applies to html anchor elements.
-   */
-  isNewWindow?: boolean;
-  /**
-   * Css mode used to style the button.
-   */
-  mode?: Mode;
-  /**
-   * Button size.
-   */
-  size?: Size;
-  /**
-   * Button type.
-   */
-  as?: "button" | "link";
-
-  CustomAnchor?: React.ComponentClass<any>;
-}

package/src/components/input/index.css

@@ -1,31 +0,0 @@
-.input-group {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.input {
-  background-color: var(--color-white);
-  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/src/components/input/index.stories.tsx

@@ -1,34 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import { Input } from "./index";
-import { withColorScheme } from "../../decorators/withColorScheme";
-
-const meta: Meta<typeof Input> = {
-  title: "Example/Input",
-  component: Input,
-  argTypes: {
-    backgroundColor: { control: "color" },
-  },
-  decorators: [withColorScheme]
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Input>;
-
-export const Primary: Story = {
-  args: {
-    className: "",
-    classNameGroup: "",
-    placeholder: "Insert a value",
-    errorMessage: "",
-  },
-};
-
-export const Error: Story = {
-  args: {
-    className: "",
-    classNameGroup: "",
-    errorMessage: "Insert a value",
-  },
-};