@tecsinapse/cortex-react 1.0.2

package/src/components/TextArea.tsx

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

@@ -0,0 +1,25 @@
+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/components/index.ts

@@ -0,0 +1,11 @@
+export * from './Badge';
+export * from './Button';
+export * from './Card';
+export * from './Hint';
+export * from './Input';
+export * from './Modal';
+export { default as Select } from './Select';
+export * from './Snackbar';
+export * from './Tag';
+export * from './Toggle';
+export * from './TextArea';

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

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

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

@@ -0,0 +1,37 @@
+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: {},
+};

package/src/docs/card.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { Button, Card } from '../index';
+import { IoMdArrowForward } from 'react-icons/io';
+export default {
+  title: 'Cortex-React/Card',
+  component: <div />,
+};
+
+const Template: StoryFn = () => {
+  return (
+    <Card>
+      <div className={'w-[300px]'}>
+        <p className={'text-h5 font-bold'}>Exemple card</p>
+        <div className={'flex flex-row items-center gap-x-deca mt-deca'}>
+          <Button variants={{ variant: 'outline', size: 'small' }}>
+            <IoMdArrowForward />
+          </Button>
+          <p className={''}>Exemple description card</p>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export const Base = {
+  render: Template,
+  args: {},
+};

package/src/docs/hint.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { Hint } from '../index';
+
+export default {
+  title: 'Cortex-React/Hint',
+  component: <div />,
+  args: {
+    intent: 'default',
+    description: 'Hint description',
+  },
+  argTypes: {
+    intent: {
+      options: ['default', 'success', 'warning', 'error'],
+      control: { type: 'select' },
+    },
+    description: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+const Template: StoryFn = args => {
+  return (
+    <Hint variants={{ intent: args.intent }} description={args.description} />
+  );
+};
+
+export const Base = {
+  render: Template,
+  args: {},
+};

package/src/docs/input-custom.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { Input } from '../components';
+import { IoPerson } from 'react-icons/io5';
+import { IoEye } from 'react-icons/io5';
+export default {
+  title: 'Cortex-React/Input/Custom',
+  component: <div />,
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    intent: 'default',
+  },
+  argTypes: {
+    intent: {
+      options: ['default', 'success', 'warning', 'error'],
+      control: { type: 'select' },
+    },
+    label: {
+      control: { type: 'text' },
+    },
+    placeholder: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+const Template: StoryFn = args => {
+  return (
+    <Input.Face variants={{ intent: args.intent }}>
+      <Input.Left>
+        <IoPerson size={16} />
+      </Input.Left>
+      <Input.Box label={args.label} placeholder={args.placeholder}></Input.Box>
+      <Input.Right>
+        <IoEye />
+      </Input.Right>
+    </Input.Face>
+  );
+};
+
+export const Base = {
+  render: Template,
+  args: {},
+};

package/src/docs/input.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { Input } from '../components';
+
+export default {
+  title: 'Cortex-React/Input',
+  component: <div />,
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    intent: 'default',
+  },
+  argTypes: {
+    intent: {
+      options: ['default', 'success', 'warning', 'error'],
+      control: { type: 'select' },
+    },
+    label: {
+      control: { type: 'text' },
+    },
+    placeholder: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+const Template: StoryFn = args => {
+  return (
+    <Input.Root
+      variants={{ intent: args.intent }}
+      label={args.label}
+      placeholder={args.placeholder}
+    />
+  );
+};
+
+export const Base = {
+  render: Template,
+  args: {},
+};

package/src/docs/modal.stories.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { StoryFn } from '@storybook/react';
+import { Button, Modal } from '../index';
+import { MdClose } from 'react-icons/md';
+export default {
+  title: 'Cortex-React/Modal',
+  component: <div />,
+};
+
+const Template: StoryFn = () => {
+  const [showModal, setShowModal] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setShowModal(true)}>
+        <p>Show modal</p>
+      </Button>
+      <Modal open={showModal} onClose={() => setShowModal(false)}>
+        <div className={'w-[600px] h-[80%]'}>
+          <div className={'justify-between flex flex-row'}>
+            <p className={'font-black text-h3'}>What is Lorem Ipsum?</p>
+            <MdClose
+              className={
+                'text-primary-medium text-deca cursor-pointer hover:text-primary-dark'
+              }
+              onClick={() => setShowModal(false)}
+            />
+          </div>
+          <p className={'mt-giga'}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. Lorem Ipsum has been the industry's standard dummy text
+            ever since the 1500s, when an unknown printer took a galley of type
+            and scrambled it to make a type specimen book. It has survived not
+            only five centuries, but also the leap into electronic typesetting,
+            remaining essentially unchanged. It was popularised in the 1960s
+            with the release of Letraset sheets containing Lorem Ipsum passages,
+            and more recently with desktop publishing software like Aldus
+            PageMaker including versions of Lorem Ipsum.
+          </p>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export const Base = {
+  render: Template,
+  args: {},
+};

package/src/docs/select-grouped.stories.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { StoryFn } from '@storybook/react';
+import { Select } from '../index';
+
+export default {
+  title: 'Cortex-React/Select/Grouped',
+  component: <div />,
+  argTypes: {
+    variant: {
+      options: ['default', 'error'],
+      control: { type: 'select' },
+    },
+    label: {
+      control: { type: 'text' },
+    },
+    placeholderSearchInput: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+const Template: StoryFn = args => {
+  const [value, setValue] = useState<{ key: string; label: string }>();
+
+  const estadosECidades = new Map();
+
+  estadosECidades.set('São Paulo', [
+    { key: 'SP1', label: 'São Paulo' },
+    { key: 'SP2', label: 'Campinas' },
+    { key: 'SP3', label: 'Santos' },
+  ]);
+  estadosECidades.set('Rio de Janeiro', [
+    { key: 'RJ1', label: 'Rio de Janeiro' },
+    { key: 'RJ2', label: 'Niterói' },
+    { key: 'RJ3', label: 'Petrópolis' },
+  ]);
+  estadosECidades.set('Minas Gerais', [
+    { key: 'MG1', label: 'Belo Horizonte' },
+    { key: 'MG2', label: 'Uberlândia' },
+    { key: 'MG3', label: 'Ouro Preto' },
+  ]);
+  estadosECidades.set('Bahia', [
+    { key: 'BA1', label: 'Salvador' },
+    { key: 'BA2', label: 'Feira de Santana' },
+    { key: 'BA3', label: 'Ilhéus' },
+  ]);
+  estadosECidades.set('Paraná', [
+    { key: 'PR1', label: 'Curitiba' },
+    { key: 'PR2', label: 'Londrina' },
+    { key: 'PR3', label: 'Maringá' },
+  ]);
+
+  return (
+    <div className={'w-[350px]'}>
+      <Select
+        variant={args.variant}
+        label={args.label}
+        // onSearch={handleSearch}
+        placeholderSearchInput={args.placeholderSearchInput}
+        labelExtractor={op => op.label}
+        keyExtractor={op => op.key}
+        onSelect={setValue}
+        value={value}
+        grouped={true}
+        groupedLabelExtractor={labelGroup => labelGroup}
+        options={estadosECidades}
+      />
+    </div>
+  );
+};
+
+export const Base = {
+  render: Template,
+  args: {
+    variant: 'default',
+    label: 'Label',
+    placeholderSearchInput: 'Placeholder Search',
+  },
+};

package/src/docs/select.stories.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { StoryFn } from '@storybook/react';
+import { Select } from '../index';
+
+export default {
+  title: 'Cortex-React/Select',
+  component: <div />,
+  argTypes: {
+    variant: {
+      options: ['default', 'error'],
+      control: { type: 'select' },
+    },
+    label: {
+      control: { type: 'text' },
+    },
+    placeholderSearchInput: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+const _options = [
+  { key: '1', label: 'São paulo' },
+  { key: '2', label: 'Rio de Janeiro' },
+  { key: '3', label: 'Campo Grande' },
+  { key: '4', label: 'Goiania' },
+  { key: '5', label: 'Uberlândia' },
+  { key: '6', label: 'Salvador' },
+  { key: '7', label: 'São Luis' },
+  { key: '7', label: 'Manaus' },
+  { key: '8', label: 'Rio Branco' },
+];
+
+type Option = { key: string; label: string };
+const Template: StoryFn = args => {
+  const [value, setValue] = useState<{ key: string; label: string }>();
+  const [options, setOptions] = useState<Option[]>(_options);
+
+  const handleSearch = React.useCallback((searchArg: string) => {
+    setOptions(
+      (options as Option[]).filter(item =>
+        new RegExp(searchArg, 'ig').test(item.label)
+      )
+    );
+  }, []);
+  return (
+    <div className={'w-[350px]'}>
+      <Select
+        variant={args.variant}
+        keyExtractor={op => op.key}
+        label={args.label}
+        onSearch={handleSearch}
+        placeholderSearchInput={args.placeholderSearchInput}
+        labelExtractor={op => op.label}
+        onSelect={setValue}
+        value={value}
+        options={options}
+      />
+    </div>
+  );
+};
+
+export const Base = {
+  render: Template,
+  args: {
+    variant: 'default',
+    label: 'Label',
+    placeholderSearchInput: 'Placeholder Search',
+  },
+};

package/src/docs/snackbar.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { Snackbar } from '../index';
+import { defaultIntents } from './utils';
+
+export default {
+  title: 'Cortex-React/Snackbar',
+  component: <div />,
+  args: {
+    intent: 'primary',
+  },
+  argTypes: {
+    intent: {
+      options: defaultIntents,
+      control: { type: 'select' },
+    },
+  },
+};
+
+const Template: StoryFn = args => {
+  return (
+    <Snackbar show={true} variants={{ intent: args.intent }}>
+      <p>Description snackbar</p>
+    </Snackbar>
+  );
+};
+
+export const Base = {
+  render: Template,
+  args: {},
+};

package/src/docs/tag.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { Tag } from '../index';
+
+export default {
+  title: 'Cortex-React/Tag',
+  component: <div />,
+  args: {
+    intent: 'primary',
+  },
+  argTypes: {
+    intent: {
+      options: ['success', 'primary', 'secondary', 'info', 'white'],
+      control: { type: 'select' },
+    },
+  },
+};
+
+const Template: StoryFn = args => {
+  return (
+    <div className={'flex flex-col justify-center items-center'}>
+      <Tag variants={{ intent: args.intent }} label={'Intent color'} />
+      <div className={'flex flex-row gap-x-deca mt-giga'}>
+        <Tag variants={{ intent: 'primary' }} label={'Tag label'} />
+        <Tag variants={{ intent: 'success' }} label={'Tag label'} />
+        <Tag variants={{ intent: 'info' }} label={'Tag label'} />
+        <Tag variants={{ intent: 'secondary' }} label={'Tag label'} />
+        <Tag variants={{ intent: 'white' }} label={'Tag label'} />
+      </div>
+    </div>
+  );
+};
+
+export const Base = {
+  render: Template,
+  args: {},
+};