@tecsinapse/cortex-react 1.0.2 → 1.2.0

package/src/docs/card.stories.tsx

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

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

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

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

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

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

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

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

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

package/src/docs/text-area.stories.tsx

@@ -1,50 +0,0 @@
-import React, { useState } from 'react';
-import { StoryFn } from '@storybook/react';
-import { TextArea } from '../index';
-
-export default {
-  title: 'Cortex-React/TextArea',
-  component: <div />,
-  args: {
-    rows: 6,
-    intent: 'default',
-    label: 'Label',
-    placeholder: 'placeholder',
-  },
-  argTypes: {
-    intent: {
-      options: ['default', 'success', 'warning', 'error'],
-      control: { type: 'select' },
-    },
-    rows: {
-      control: { type: 'number' },
-    },
-    label: {
-      control: { type: 'text' },
-    },
-    placeholder: {
-      control: { type: 'text' },
-    },
-  },
-};
-
-const Template: StoryFn = args => {
-  const [value, setValue] = useState('');
-  return (
-    <div className={'w-[300px]'}>
-      <TextArea.Root
-        placeholder={args.placeholder}
-        label={args.label}
-        variants={{ intent: args.intent }}
-        rows={args.rows}
-        value={value}
-        onChange={e => setValue(e.currentTarget.value)}
-      />
-    </div>
-  );
-};
-
-export const Base = {
-  render: Template,
-  args: {},
-};

package/src/docs/toggle.stories.tsx

@@ -1,18 +0,0 @@
-import React, { useState } from 'react';
-import { StoryFn } from '@storybook/react';
-import { Toggle } from '../index';
-
-export default {
-  title: 'Cortex-React/Toggle',
-  component: <div />,
-};
-
-const Template: StoryFn = () => {
-  const [checked, setChecked] = useState(false);
-  return <Toggle checked={checked} onClick={() => setChecked(!checked)} />;
-};
-
-export const Base = {
-  render: Template,
-  args: {},
-};

package/src/docs/utils.ts

@@ -1,8 +0,0 @@
-export const defaultIntents = [
-  'primary',
-  'secondary',
-  'success',
-  'info',
-  'warning',
-  'error',
-];

package/src/hooks/useDebouncedState.ts

@@ -1,24 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
-
-/**
- * @param initialState
- * @param timeoutCallback callback to be called after bouncing ends. Should be memoized.
- * @param timeoutMs
- */
-export function useDebouncedState<S>(
-  initialState: S | (() => S),
-  timeoutCallback?: (state: S) => void,
-  timeoutMs = 166
-): [S, Dispatch<SetStateAction<S>>] {
-  const timeoutId = useRef<NodeJS.Timeout>();
-
-  const [state, setState] = useState<S>(initialState);
-
-  useEffect(() => {
-    if (timeoutId.current) clearTimeout(timeoutId.current);
-    if (timeoutCallback)
-      timeoutId.current = setTimeout(() => timeoutCallback(state), timeoutMs);
-  }, [state]);
-
-  return [state, setState];
-}