@tecsinapse/cortex-react 1.0.2

package/README.md

@@ -0,0 +1,11 @@
+# `cortex-react`
+
+> TODO: description
+
+## Usage
+
+```
+const index = require('cortex-react');
+
+// TODO: DEMONSTRATE API
+```

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@tecsinapse/cortex-react",
+  "version": "1.0.2",
+  "description": "React components based in @tecsinapse/cortex-core",
+  "author": "ryancarloscorrea <ryancarlos38@gmail.com>",
+  "homepage": "https://github.com/tecsinapse/design-system#readme",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tecsinapse/design-system.git"
+  },
+  "scripts": {
+    "dev": "rollup --config --watch",
+    "dev:dts": "tsc --project tsconfig.build.json --watch",
+    "build:es": "rollup --config",
+    "build:dts": "tsc --project tsconfig.build.json"
+  },
+  "bugs": {
+    "url": "https://github.com/tecsinapse/design-system/issues"
+  },
+  "peerDependencies": {
+    "tailwind": ">=3.3.0"
+  },
+  "dependencies": {
+    "@tecsinapse/cortex-core": "0.1.10",
+    "clsx": "*",
+    "react-icons": "^5.2.1"
+  }
+}

package/src/components/Badge.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef, HTMLProps } from 'react';
+import { badge, BadgeVariants, containerBadge } from '@tecsinapse/cortex-core';
+
+interface BadgeProps {
+  value: string | number;
+  variants?: BadgeVariants;
+}
+
+interface BadgeAnchorProps extends BadgeProps {
+  children: JSX.Element;
+}
+
+export const Badge = forwardRef<
+  HTMLDivElement,
+  BadgeProps & Omit<HTMLProps<HTMLDivElement>, 'className'>
+>((props, ref) => {
+  const { value, variants, ...rest } = props;
+  return (
+    <div
+      ref={ref}
+      className={badge({
+        className: `relative ${variants?.className}`,
+        intent: variants?.intent,
+      })}
+      {...rest}
+    >
+      {value}
+    </div>
+  );
+});
+
+export const BadgeAnchor = forwardRef<
+  HTMLDivElement,
+  BadgeAnchorProps & Omit<HTMLProps<HTMLDivElement>, 'className'>
+>((props, ref) => {
+  const { value, variants, children, ...rest } = props;
+  return (
+    <div className={containerBadge()}>
+      {children}
+      <div ref={ref} className={badge(variants)} {...rest}>
+        {value}
+      </div>
+    </div>
+  );
+});

package/src/components/Button.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+import { button, ButtonVariants } from '@tecsinapse/cortex-core';
+
+interface ButtonProps {
+  variants?: ButtonVariants;
+  children?: JSX.Element;
+}
+
+export const Button = forwardRef<
+  HTMLButtonElement,
+  ButtonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'>
+>((props, ref) => {
+  const { variants, children, ...rest } = props;
+  return (
+    <button className={button(variants)} ref={ref} {...rest}>
+      {children}
+    </button>
+  );
+});

package/src/components/Card.tsx

@@ -0,0 +1,18 @@
+import React, { forwardRef, HTMLProps } from 'react'
+import { card } from '@tecsinapse/cortex-core'
+
+interface CardProps {
+  children: JSX.Element
+}
+export const Card = forwardRef<HTMLDivElement, CardProps & HTMLProps<HTMLDivElement>>((props, ref) => {
+  const { children, className, ...rest } = props
+  return (
+    <div
+      className={card({ className })}
+      ref={ref}
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+})

package/src/components/Hint.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef, HTMLProps } from 'react'
+import { hint, HintVariants } from '@tecsinapse/cortex-core'
+
+interface HintProps {
+  children?: never
+  description: string
+  variants?: HintVariants
+}
+
+interface HintPropsWithChildrenProps {
+  children: JSX.Element
+  description?: never
+  variants?: HintVariants
+}
+
+type HintPropsUnion = HintProps | HintPropsWithChildrenProps
+
+export const Hint = forwardRef<HTMLDivElement, HintPropsUnion & Omit<HTMLProps<HTMLDivElement>, 'className'>>(
+  (props, ref) => {
+    const { description, children, variants } = props
+    return (
+      <div
+        className={hint(variants)}
+        ref={ref}
+      >
+        {description ? <p>{description}</p> : <></>}
+        {children}
+      </div>
+    )
+  }
+)

package/src/components/Input.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import {
+  input,
+  InputBaseVariants,
+  inputBox,
+  labelStyle,
+} from '@tecsinapse/cortex-core';
+import { clsx } from 'clsx';
+
+const getValidChildren = (children: React.ReactNode) => {
+  return React.Children.toArray(children).filter(el =>
+    React.isValidElement(el)
+  ) as React.ReactElement[];
+};
+
+interface InputPropsBase {
+  variants?: InputBaseVariants;
+  label?: string;
+}
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    InputPropsBase {}
+
+export const Box = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ id, name, variants, label, placeholder, className, ...rest }, ref) => {
+    return (
+      <div className={'flex w-full flex-col'}>
+        <input
+          id={id ?? name}
+          name={name}
+          placeholder={placeholder ?? ' '}
+          className={clsx(inputBox(placeholder, label, className))}
+          {...rest}
+          ref={ref}
+        />
+        <label
+          htmlFor={id ?? name}
+          className={labelStyle({ intent: variants?.intent, placeholder })}
+        >
+          {label}
+        </label>
+      </div>
+    );
+  }
+);
+
+type DivBaseProps = React.HTMLAttributes<HTMLDivElement>;
+type InputFaceProps = DivBaseProps & Pick<InputPropsBase, 'variants'>;
+
+export const Face = React.forwardRef<HTMLDivElement, InputFaceProps>(
+  ({ children, variants, className, ...rest }, ref) => {
+    const clones = getValidChildren(children).map(el => {
+      return React.cloneElement(el, { ...el.props, variants });
+    });
+    return (
+      <div
+        {...rest}
+        className={clsx(input(variants), className)}
+        id={'input-face'}
+        ref={ref}
+      >
+        {clones}
+      </div>
+    );
+  }
+);
+
+export const Root = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ variants, className, ...rest }, ref) => {
+    return (
+      <Face variants={variants} className={className}>
+        <Box {...rest} ref={ref} />
+      </Face>
+    );
+  }
+);
+
+type InputElementsProps = DivBaseProps & {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const Left = React.forwardRef<HTMLDivElement, InputElementsProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <div className={clsx(className, 'mr-2.5')} {...rest} ref={ref}>
+        {children}
+      </div>
+    );
+  }
+);
+
+export const Right = React.forwardRef<HTMLDivElement, InputElementsProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <div className={clsx(className, 'ml-2.5')} {...rest} ref={ref}>
+        {children}
+      </div>
+    );
+  }
+);
+
+export const Input = {
+  Root,
+  Face,
+  Box,
+  Left,
+  Right,
+};

package/src/components/Modal.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef, InputHTMLAttributes } from 'react'
+import { modal, overlay } from '@tecsinapse/cortex-core'
+
+interface ModalProps {
+  open: boolean
+  onClose: () => void
+  children: JSX.Element
+}
+
+export const Modal = forwardRef<HTMLDivElement, ModalProps & InputHTMLAttributes<HTMLInputElement>>((props, ref) => {
+  const { open, onClose, children, className } = props
+  return (
+    <div
+      ref={ref}
+      {...props}
+    >
+      <div
+        className={overlay({ show: open })}
+        onClick={onClose}
+      ></div>
+      <dialog className={modal({ open, className })}>{children}</dialog>
+    </div>
+  )
+})

package/src/components/SearchInput.tsx

@@ -0,0 +1,86 @@
+// import { Button, Input, searchInputVariants } from '@web/modules/core'
+import React, { useEffect, useState } from 'react';
+// import CircularLoading from './CircularLoading'
+import { Input, Button } from './';
+import { AiOutlineLoading } from 'react-icons/ai';
+import { IoSearchOutline } from 'react-icons/io5';
+import { useDebouncedState } from '../hooks';
+
+interface SearchInputProps {
+  label?: string;
+  placeholder?: string;
+  isSubmitting?: boolean;
+  onChange?: (value: string) => void;
+  onClick?: (value: string) => void;
+  BOUNCE_TIMEOUT?: number;
+}
+
+const inputFace = 'bg-white w-full';
+const inputLeft = 'flex items-center';
+const SearchInput = ({
+  label,
+  placeholder,
+  isSubmitting = false,
+  onChange,
+  onClick,
+  BOUNCE_TIMEOUT = 1000,
+}: SearchInputProps) => {
+  const [bouncedText, setBouncedText] = useState<string>('');
+  const [searchInput, setSearchInput] = useDebouncedState<string>(
+    '',
+    setBouncedText,
+    BOUNCE_TIMEOUT
+  );
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(bouncedText);
+    }
+  }, [bouncedText]);
+
+  const handleEnterKey = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && onClick && searchInput) {
+      onClick(searchInput);
+    }
+  };
+
+  return (
+    <div className="flex flex-row w-full space-x-mili">
+      <Input.Face variants={{ className: inputFace }}>
+        {!onClick && (
+          <Input.Left className={inputLeft}>
+            <IoSearchOutline />
+          </Input.Left>
+        )}
+        <Input.Box
+          placeholder={placeholder}
+          label={label}
+          onChange={e => setSearchInput(e.target.value)}
+          onKeyDown={handleEnterKey}
+          disabled={isSubmitting}
+        />
+      </Input.Face>
+      {onClick && (
+        <Button
+          variants={{
+            intent: 'primary',
+            size: 'square',
+            className: 'h-11',
+          }}
+          onClick={() => onClick(searchInput)}
+          disabled={!searchInput || isSubmitting}
+        >
+          {isSubmitting ? (
+            <div className={'animate-spin'}>
+              <AiOutlineLoading />
+            </div>
+          ) : (
+            <IoSearchOutline />
+          )}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default SearchInput;

package/src/components/Select.tsx

@@ -0,0 +1,170 @@
+import { option as styleOption, selectVariants } from '@tecsinapse/cortex-core';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Hint } from './Hint';
+import { IoChevronDownOutline } from 'react-icons/io5';
+import { IoIosCloseCircleOutline } from 'react-icons/io';
+import SearchInput from './SearchInput';
+
+interface CommonProps<T> {
+  label: string;
+  value: T | undefined;
+  onSelect: (value: T) => void;
+  keyExtractor: (value: T) => string;
+  labelExtractor: (value: T) => string;
+  onSearch?: (search: string) => void;
+  disabled?: boolean;
+  grouped?: boolean;
+  variant?: 'error' | 'default';
+  hint?: string;
+  placeholderSearchInput?: string;
+}
+
+interface GroupedProps<T> {
+  options?: Map<string, T[]>;
+  groupedLabelExtractor: (value: string) => string;
+  grouped: true;
+}
+
+interface DefaultProps<T> {
+  options?: T[];
+  groupedLabelExtractor?: never;
+  grouped?: never;
+}
+
+type ConditionalProps<T> = GroupedProps<T> | DefaultProps<T>;
+
+type SelectProps<T> = CommonProps<T> & ConditionalProps<T>;
+
+const { button, dropdown, groupedTitle, containerGrouped, hintBody } =
+  selectVariants();
+
+export const Select = <T,>(props: SelectProps<T>) => {
+  const {
+    label,
+    keyExtractor,
+    labelExtractor,
+    options,
+    value,
+    onSelect,
+    onSearch,
+    disabled,
+    grouped,
+    groupedLabelExtractor,
+    hint,
+    placeholderSearchInput,
+    variant = 'default',
+  } = props;
+  const [open, setOpen] = useState(false);
+  const placeholder = useMemo(
+    () => (value ? labelExtractor(value) : label),
+    [label, labelExtractor, value]
+  );
+  const ref = useRef<HTMLDivElement>(null);
+
+  const handleClickOutside = useCallback((event: any) => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setOpen(false);
+    }
+  }, []);
+
+  const handleSelect = useCallback(
+    (option: T) => {
+      onSelect(option);
+      setOpen(false);
+    },
+    [onSelect]
+  );
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [handleClickOutside]);
+
+  const Option = ({ option }: { option: T }) => (
+    <li
+      onClick={() => handleSelect(option)}
+      className={styleOption()}
+      role={'option'}
+    >
+      {labelExtractor(option)}
+    </li>
+  );
+
+  const GroupedOptions = ({ options }: { options?: Map<string, T[]> }) => (
+    <>
+      {[...(options ?? [])].map(([key, value]) => (
+        <div key={key} className={containerGrouped()}>
+          <span className={groupedTitle()}>{groupedLabelExtractor?.(key)}</span>
+          {value.map((option: T) => (
+            <Option option={option} key={keyExtractor(option)} />
+          ))}
+        </div>
+      ))}
+    </>
+  );
+
+  const DefaultOptions = ({ options }: { options?: T[] }) => (
+    <>
+      {(options ?? []).map(option => (
+        <Option option={option} key={keyExtractor(option)} />
+      ))}
+    </>
+  );
+
+  return (
+    <div className="w-full relative bg-white" ref={ref}>
+      <button
+        className={button({ disabled, intent: variant })}
+        onClick={() => setOpen(prevState => !prevState)}
+        disabled={disabled}
+      >
+        <span>{placeholder}</span>
+        <IoChevronDownOutline />
+      </button>
+      <ul
+        role={'select'}
+        className={dropdown({
+          open,
+        })}
+      >
+        {onSearch ? (
+          <div className="m-mili">
+            <SearchInput
+              placeholder={placeholderSearchInput}
+              onChange={onSearch}
+            />
+          </div>
+        ) : (
+          <></>
+        )}
+        {grouped ? (
+          <GroupedOptions options={options} />
+        ) : (
+          <DefaultOptions options={options} />
+        )}
+      </ul>
+      {hint && (
+        <Hint
+          variants={{
+            intent: variant,
+          }}
+        >
+          <div className={hintBody()}>
+            {variant === 'error' ? <IoIosCloseCircleOutline /> : <></>}
+            <span>{hint}</span>
+          </div>
+        </Hint>
+      )}
+    </div>
+  );
+};
+
+export default Select;

package/src/components/Snackbar.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef } from 'react'
+import { snackbar, SnackbarVariants } from '@tecsinapse/cortex-core'
+
+interface SnackbarProps {
+  variants?: SnackbarVariants
+  children: JSX.Element
+  show: boolean
+}
+
+export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>((props, ref) => {
+  const { children, show, variants } = props
+  return (
+    <>
+      {show ? (
+        <div
+          className={snackbar(variants)}
+          ref={ref}
+        >
+          {children}
+        </div>
+      ) : (
+        <></>
+      )}
+    </>
+  )
+})

package/src/components/Tag.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef, HTMLProps } from 'react'
+import { tag, TagVariants } from '@tecsinapse/cortex-core'
+
+interface TagProps {
+  variants?: TagVariants
+  label: string
+}
+
+export const Tag = forwardRef<HTMLDivElement, TagProps & HTMLProps<HTMLDivElement>>((props, ref) => {
+  const { label, variants } = props
+  return (
+    <div
+      className={tag(variants)}
+      ref={ref}
+    >
+      <p>{label}</p>
+    </div>
+  )
+})