@tecsinapse/cortex-react 1.0.2 → 1.2.0

package/src/components/Input.tsx

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

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

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

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

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

@@ -1,19 +0,0 @@
-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>
-  )
-})

package/src/components/TextArea.tsx

@@ -1,121 +0,0 @@
-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 TextAreaPropsBase {
-  variants?: InputBaseVariants;
-  label?: string;
-  rows?: number;
-}
-
-interface TextAreaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    TextAreaPropsBase {}
-
-const Box = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  (
-    { id, name, variants, label, placeholder, rows, className, ...rest },
-    ref
-  ) => {
-    return (
-      <div className="flex w-full flex-col">
-        <textarea
-          ref={ref}
-          id={id ?? name}
-          name={name}
-          placeholder={placeholder ?? ' '}
-          className={clsx(
-            inputBox(placeholder, label, className),
-            'resize-none mt-mili'
-          )}
-          rows={rows}
-          {...rest}
-        />
-        <label
-          htmlFor={id ?? name}
-          className={labelStyle({
-            intent: variants?.intent,
-            placeholder,
-          })}
-        >
-          {label}
-        </label>
-      </div>
-    );
-  }
-);
-
-type DivBaseProps = React.HTMLAttributes<HTMLDivElement>;
-type TextAreaFaceProps = DivBaseProps & Pick<TextAreaPropsBase, 'variants'>;
-
-const Face = React.forwardRef<HTMLDivElement, TextAreaFaceProps>(
-  ({ children, variants, className, ...rest }, ref) => {
-    const clones = getValidChildren(children).map(el => {
-      return React.cloneElement(el, { ...el.props, variants });
-    });
-    return (
-      <div
-        ref={ref}
-        className={clsx(input(variants), className)}
-        id="textarea-face"
-        {...rest}
-      >
-        {clones}
-      </div>
-    );
-  }
-);
-
-const Root = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  ({ variants, className, ...rest }, ref) => {
-    return (
-      <Face variants={variants} className={className}>
-        <Box ref={ref} {...rest} />
-      </Face>
-    );
-  }
-);
-
-type TextAreaElementsProps = DivBaseProps & {
-  children: React.ReactNode;
-  className?: string;
-};
-
-const Left = React.forwardRef<HTMLDivElement, TextAreaElementsProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={clsx(className, 'mr-2.5')} {...rest} ref={ref}>
-        {children}
-      </div>
-    );
-  }
-);
-
-const Right = React.forwardRef<HTMLDivElement, TextAreaElementsProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={clsx(className, 'ml-2.5')} {...rest} ref={ref}>
-        {children}
-      </div>
-    );
-  }
-);
-
-export const TextArea = {
-  Root,
-  Face,
-  Box,
-  Left,
-  Right,
-};

package/src/components/Toggle.tsx

@@ -1,25 +0,0 @@
-import React, { forwardRef, InputHTMLAttributes } from 'react';
-import {
-  styleInputElement,
-  styleLabelElement,
-  toggle,
-} from '@tecsinapse/cortex-core';
-
-export const Toggle = forwardRef<
-  HTMLInputElement,
-  InputHTMLAttributes<HTMLInputElement>
->((props, ref) => {
-  return (
-    <div className={'flex flex-row items-center gap-x-centi'}>
-      <label className={styleLabelElement()}>
-        <input
-          type="checkbox"
-          className={styleInputElement()}
-          ref={ref}
-          {...props}
-        />
-        <div className={toggle()} />
-      </label>
-    </div>
-  );
-});

package/src/docs/badge-anchor.stories.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { StoryFn } from '@storybook/react';
-import { BadgeAnchor, Button } from '../index';
-import { defaultIntents } from './utils';
-
-export default {
-  title: 'Cortex-React/Badge/Anchor',
-  component: <div />,
-  args: {
-    value: 1,
-    intent: 'primary',
-  },
-  argTypes: {
-    intent: {
-      options: defaultIntents,
-      control: { type: 'select' },
-    },
-    value: {
-      control: { type: 'number' },
-      min: 1,
-      max: 9,
-    },
-  },
-};
-
-const Template: StoryFn = args => {
-  return (
-    <BadgeAnchor
-      variants={{ intent: args.intent, isAnchor: true }}
-      value={args.value}
-    >
-      <Button variants={{ variant: 'outline' }}>
-        <p>Button</p>
-      </Button>
-    </BadgeAnchor>
-  );
-};
-
-export const Base = {
-  render: Template,
-  args: {},
-};

package/src/docs/badge.stories.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { StoryFn } from '@storybook/react';
-import { Badge } from '../index';
-import { defaultIntents } from './utils';
-
-export default {
-  title: 'Cortex-React/Badge',
-  component: <div />,
-  args: {
-    value: '1',
-    intent: 'primary',
-  },
-  argTypes: {
-    intent: {
-      options: defaultIntents,
-      control: { type: 'select' },
-    },
-    value: {
-      control: { type: 'text' },
-    },
-  },
-};
-
-const Template: StoryFn = args => {
-  return <Badge variants={{ intent: args.intent }} value={args.value ?? '2'} />;
-};
-
-export const Base = {
-  render: Template,
-  args: {},
-};

package/src/docs/button.stories.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { StoryFn } from '@storybook/react';
-import { Button } from '../index';
-
-export default {
-  title: 'Cortex-React/Button',
-  component: <div />,
-  argTypes: {
-    intent: {
-      options: ['primary', 'secondary', 'success', 'info', 'warning', 'error'],
-      control: { type: 'select' },
-    },
-    variant: {
-      options: ['outline', 'text', 'filled'],
-      control: { type: 'select' },
-    },
-    size: {
-      options: ['small', 'default', 'circle', 'square'],
-      control: { type: 'select' },
-    },
-  },
-};
-
-const Template: StoryFn = args => {
-  return (
-    <Button
-      variants={{ intent: args.intent, variant: args.variant, size: args.size }}
-    >
-      <p>Button</p>
-    </Button>
-  );
-};
-
-export const Base = {
-  render: Template,
-  args: {},
-};