@geoinsight/react-components 0.1.0

package/src/components/button/index.css

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

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

@@ -0,0 +1,45 @@
+import clsx from "clsx";
+import { ButtonAsButton, ButtonAsLink } from "./index.types";
+import "./index.css";
+
+export function Button({
+  children = "Click me",
+  className = "",
+  icon = undefined,
+  isNewWindow = false,
+  mode = "primary",
+  size = "medium",
+  as = "button",
+  ...rest
+}: ButtonAsButton | ButtonAsLink): JSX.Element {
+  return as === "link" ? (
+    <a
+      {...(isNewWindow && { target: "_blank" })}
+      className={clsx(
+        className,
+        "button",
+        mode === "secondary" ? `button button__${mode}` : "button__link",
+        `button__${size}`
+      )}
+      {...(rest as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
+    >
+      {children}
+      {icon}
+    </a>
+  ) : (
+    <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

@@ -0,0 +1,41 @@
+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";
+}

package/src/components/input/index.css

@@ -0,0 +1,30 @@
+.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/src/components/input/index.stories.tsx

@@ -0,0 +1,34 @@
+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",
+  },
+};

package/src/components/input/index.tsx

@@ -0,0 +1,25 @@
+import { Input as InputProps } from "./index.types";
+import "./index.css";
+
+export function Input({
+  className = "",
+  classNameGroup = "",
+  errorMessage = "" ,
+  inputRef,
+  styleGroup,
+  ...rest
+}: InputProps) {
+  return (
+    <div className={`input-group ${classNameGroup}`} 
+     style={styleGroup}>
+      <input
+        ref={inputRef}
+        className={`input ${errorMessage ? "input--error" : ""} ${className}`}
+        {...rest}
+      />
+      {errorMessage && <span className="error">{errorMessage}</span>}
+    </div>
+  );
+}
+
+export default Input;

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

@@ -0,0 +1,29 @@
+import { dataTheme } from "data-theme";
+import { CSSProperties, Ref } from "react";
+
+export interface Input extends React.InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * Custom css class name.
+   */
+  className?: string;
+  /**
+   * Custom css class name for group wrapper.
+   */
+  classNameGroup?: string;
+  /**
+   * Data theme for the html. `${themes}`
+   */
+  paletteTheme?: dataTheme;
+  /**
+   * Error message to show when input has an error.
+   */
+  errorMessage?: string;
+  /**
+   * Ref react elemnt to use
+   */
+  inputRef?: Ref<HTMLInputElement>;
+  /**
+   * Style input group wrapper
+   */
+  styleGroup?: CSSProperties;
+}

package/src/components/text-area/index.css

@@ -0,0 +1,53 @@
+.textarea {
+  margin-bottom: var(--spacing-8);
+  position: relative;
+}
+
+.textarea__input {
+  box-sizing: border-box;
+  border-radius: var(--spacing-8);
+  border: 2px solid var(--color-primary);
+  cursor: text;
+  color: var(--color-black);
+  outline: none;
+  padding: var(--spacing-8) var(--spacing-16);
+  resize: vertical;
+  width: 100%;
+}
+
+.textarea__input:hover {
+  border: 3px solid var(--color-primary-700);
+}
+
+.textarea__button {
+  background: var(--color-primary);
+  border: 2px solid var(--color-secondary);
+  box-shadow: 2px 4px 2px 1px rgba(0, 0, 0, 0.25);
+  border-radius: 0px 0px var(--spacing-8) var(--spacing-8);
+  bottom: 0;
+  cursor: pointer;
+  left: 0;
+  padding-bottom: -20px;
+  position: absolute;
+  width: 100%;
+}
+
+.textarea__button > svg {
+  color: var(--color-neutral-100);
+}
+
+.textarea__button:disabled {
+  cursor: unset;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.textarea__button:hover {
+  background: var(--color-secondary);
+  color: var(--color-neutral-100);
+}
+
+.textarea__button--show {
+  background: var(--color-primary-700);
+  color: var(--color-neutral-100);
+}

package/src/components/text-area/index.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { TextArea } from "./index";
+import { withColorScheme } from "../../decorators/withColorScheme";
+
+const meta: Meta<typeof TextArea> = {
+  title: "Example/TextArea",
+  component: TextArea,
+  argTypes: {
+    backgroundColor: { control: "color" },
+  },
+  decorators: [withColorScheme]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TextArea>;
+
+export const Active: Story = {
+  args: {
+    placeholder: "Insert a value",
+    disabled: false
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "Insert a value",
+  },
+};

package/src/components/text-area/index.tsx

@@ -0,0 +1,62 @@
+import React, { MutableRefObject, useRef, useState } from "react";
+import clsx from "clsx";
+import { TbArrowsDiagonal2 } from "react-icons/tb";
+import { TextArea as TextAreaProps } from "./index.types";
+import "./index.css";
+
+export function TextArea({
+  className = "",
+  disabled = true,
+  hasToggleButton = true,
+  hideHeight = "5rem",
+  placeholder = "",
+  showHeight = "10rem",
+  style = {},
+  textareaClassName = "",
+  ...rest
+}: TextAreaProps): JSX.Element {
+  const ref = useRef() as MutableRefObject<HTMLTextAreaElement>;
+  const [isShow, setIsShow] = useState<boolean>(false);
+
+  const handleClickToggle = () => {
+    if (ref && ref.current) {
+      if (isShow) {
+        ref.current.style.height = hideHeight;
+      } else {
+        ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
+      }
+      setIsShow((prev) => !prev);
+    }
+  };
+
+  return (
+    <div className={clsx("textarea", className)} style={style}>
+      <textarea
+        ref={ref}
+        className={clsx("textarea__input", textareaClassName)}
+        style={
+          {
+            height: hasToggleButton ? hideHeight : showHeight,
+          } as React.CSSProperties
+        }
+        placeholder={placeholder}
+        disabled={disabled}
+        {...rest}
+      />
+      {hasToggleButton && (
+        <button
+          className={clsx(
+            "textarea__button",
+            isShow && "textarea__button--show"
+          )}
+          onClick={handleClickToggle}
+          disabled={disabled}
+        >
+          <TbArrowsDiagonal2 size="1.5rem" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default TextArea;

package/src/components/text-area/index.types.ts

@@ -0,0 +1,37 @@
+import { dataTheme } from "data-theme";
+import { CSSProperties, Ref } from "react";
+
+export interface TextArea extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /**
+   * Custom css class name textarea wrapper.
+   */
+  className?: string;
+  /**
+   * Disable prop
+   */
+  disabled?: boolean;
+  /**
+   * Check if there is a toggle button
+   */
+  hasToggleButton?: boolean;
+  /**
+   * Minimum height if toggle button is true
+   */
+  hideHeight?: string;
+  /**
+   * Placeholder for textarea html tag
+   */
+  placeholder?: string;
+  /**
+   * Maximum height if toggle button is false
+   */
+  showHeight?: string;
+  /**
+   * Style textarea group wrapper
+   */
+  style?: CSSProperties;
+  /**
+   * Classname of the textarea
+   */
+  textareaClassName?: string;
+}

package/src/decorators/withColorScheme.tsx

@@ -0,0 +1,34 @@
+import { StoryContext, StoryFn } from "@storybook/react";
+
+export const withColorScheme = (Story: StoryFn, context: StoryContext) => {
+  const { theme, palette } = context.globals;
+  if (theme === "light") {
+    return (
+      <div
+        data-theme="light"
+        palette-theme={palette}
+        style={{
+          background: "var(--color-white)",
+          height: "150px",
+          padding: "16px",
+        }}
+      >
+        <Story />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-theme="dark"
+      palette-theme={palette}
+      style={{
+        background: "var(--color-black)",
+        height: "150px",
+        padding: "16px",
+      }}
+    >
+      <Story />
+    </div>
+  );
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./components/button";
+export { Input } from "./components/input";