@tecsinapse/cortex-react 1.0.2

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

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

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

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

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useDebouncedState';

package/src/hooks/useDebouncedState.ts

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

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';