@qoretechnologies/reqore 0.20.7 → 0.22.0

package/src/mock/tableData.ts

@@ -1,5 +1,5 @@
-import shortid from 'shortid';
-import { IReqoreTableColumn, IReqoreTableData } from '../components/Table';
+import { IReqoreTableColumn } from '../components/Table';
+import data from './data.json';
 
 export default {
   columns: [
@@ -23,18 +23,9 @@ export default {
     { dataId: 'group', header: 'Group', width: 150, intent: 'muted' },
     { dataId: 'date', header: 'Date', width: 150, content: 'time-ago' },
   ] as IReqoreTableColumn[],
-  data: [...new Array(100)].map((_val, index) => ({
-    id: index,
-    firstName: shortid.generate(),
-    lastName: shortid.generate(),
-    address: `${shortid.generate()}, ${shortid.generate()}, ${shortid.generate()}`,
-    age: 99 - index,
-    occupation: shortid.generate(),
-    group: shortid.generate(),
+  data: data.map((datum) => ({
+    ...datum,
     date: Date.now(),
-    _intent: index === 2 || index === 3 || index === 4 ? 'info' : undefined,
-    _selectId: index !== 3 && index !== 6 ? `Row-${index}` : null,
-    _disabled: index === 5,
-  })) as IReqoreTableData,
+  })),
   height: 300,
 };

package/src/stories/Button/Button.stories.tsx

@@ -22,7 +22,7 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps} disabled>
           Disabled
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} active>
+        <ReqoreButton {...buttonProps} active tooltip='hello'>
           Active
         </ReqoreButton>
         <ReqoreButton {...buttonProps} flat>
@@ -31,6 +31,9 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps} minimal>
           Minimal
         </ReqoreButton>
+        <ReqoreButton {...buttonProps} readOnly onClick={alert}>
+          Read only
+        </ReqoreButton>
       </ReqoreControlGroup>
       <br />
       <ReqoreControlGroup fluid>

package/src/stories/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import Checkbox from '../../components/Checkbox';
-import { ReqoreCheckbox } from '../../index';
+import { ReqoreCheckbox, ReqoreControlGroup } from '../../index';
 
 export default {
   title: 'Components/Checkbox',
@@ -9,13 +9,14 @@ export default {
 
 const Template: ComponentStory<typeof Checkbox> = (args) => {
   return (
-    <>
+    <ReqoreControlGroup>
       <ReqoreCheckbox {...args} />
       <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelDetailPosition='left' />
-      <ReqoreCheckbox {...args} checked />
+      <ReqoreCheckbox {...args} checked tooltip='I am checked' />
       <ReqoreCheckbox {...args} disabled />
       <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelPosition='left' />
-    </>
+      <ReqoreCheckbox {...args} label='Read Only' labelPosition='left' readOnly />
+    </ReqoreControlGroup>
   );
 };
 

package/src/stories/Input/Input.stories.tsx

@@ -2,13 +2,14 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { useState } from 'react';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
 import { ReqoreControlGroup } from '../../index';
-import { FlatArg, MinimalArg } from '../utils/args';
+import { FlatArg, IconArg, MinimalArg } from '../utils/args';
 
 export default {
   title: 'Components/Input',
   argTypes: {
     ...MinimalArg,
     ...FlatArg,
+    ...IconArg('icon', 'Icon', 'SearchLine'),
   },
 } as Meta<IReqoreInputProps>;
 
@@ -27,47 +28,55 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
     <>
       <ReqoreControlGroup>
         <ReqoreInput
+          {...args}
           placeholder='Reqore Input'
           onChange={handleValueChange}
           value={value}
-          {...args}
         />
         <ReqoreInput
+          {...args}
           placeholder='Minimal Input'
           minimal
           onChange={handleValueChange}
           value={value}
-          {...args}
         />
         <ReqoreInput
+          {...args}
           placeholder='Flat Input'
           flat
+          tooltip="I'm a tooltip"
           onChange={handleValueChange}
           value={value}
-          {...args}
         />
         <ReqoreInput
+          {...args}
           placeholder='Clearable Input'
           onClearClick={handleValueClear}
           value={value}
           onChange={handleValueChange}
-          {...args}
         />
         <ReqoreInput
+          {...args}
           placeholder='Disabled Input'
           disabled
           onChange={handleValueChange}
           value={value}
+        />
+        <ReqoreInput
           {...args}
+          placeholder='Read Only Input'
+          readOnly
+          onChange={handleValueChange}
+          value={value}
         />
       </ReqoreControlGroup>
       <br />
       <ReqoreControlGroup fluid>
         <ReqoreInput
+          {...args}
           placeholder='Fluid Input'
           onChange={handleValueChange}
           value={value}
-          {...args}
         />
       </ReqoreControlGroup>
     </>
@@ -75,3 +84,27 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
 };
 
 export const Basic = Template.bind({});
+export const Info = Template.bind({});
+Info.args = {
+  intent: 'info',
+};
+export const Success = Template.bind({});
+Success.args = {
+  intent: 'success',
+};
+export const Warning = Template.bind({});
+Warning.args = {
+  intent: 'warning',
+};
+export const Danger = Template.bind({});
+Danger.args = {
+  intent: 'danger',
+};
+export const Pending = Template.bind({});
+Pending.args = {
+  intent: 'pending',
+};
+export const Muted = Template.bind({});
+Muted.args = {
+  intent: 'muted',
+};

package/src/stories/Menu/Menu.stories.tsx

@@ -27,11 +27,19 @@ export default {
         type: 'select',
       },
     }),
+    ...createArg('wrapText', {
+      defaultValue: true,
+      name: 'Wrap text',
+      control: {
+        type: 'boolean',
+      },
+      description: 'Whether to wrap text or not',
+    }),
     ...IntentArg,
   },
 } as Meta<IReqoreMenuProps>;
 
-export const MenuStory: Story<IReqoreMenuProps> = (args) => {
+const Template: Story<IReqoreMenuProps> = (args) => {
   return (
     <ReqoreMenu {...args}>
       <ReqoreMenuItem icon='Save3Fill' intent='success' selected>
@@ -91,4 +99,8 @@ export const MenuStory: Story<IReqoreMenuProps> = (args) => {
   );
 };
 
-MenuStory.storyName = 'Menu';
+export const Basic = Template.bind({});
+export const WrappedText = Template.bind({});
+WrappedText.args = {
+  wrapText: false,
+};

package/src/stories/RadioGroup/RadioGroup.stories.tsx

@@ -37,6 +37,16 @@ const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) =
           label: 'Option 3',
           value: 'opt3',
         },
+        {
+          label: 'Read Only Option',
+          value: 'opt4',
+          readOnly: true,
+        },
+        {
+          label: 'Disabled Option',
+          value: 'opt5',
+          disabled: true,
+        },
       ]}
       onSelectClick={(value) => setSelected(value)}
       selected={selected}

package/src/stories/Table/Table.stories.tsx

@@ -108,7 +108,7 @@ export default {
     }),
     ...createArg('data', {
       type: 'array',
-      defaultValue: tableData.data,
+      defaultValue: tableData.data as any,
       name: 'Data',
       description: 'The data to be displayed in the table',
       table: {
@@ -121,6 +121,12 @@ export default {
       name: 'Select Toggle Tooltip',
       description: 'The tooltip of the select toggle',
     }),
+    ...createArg('fill', {
+      type: 'boolean',
+      defaultValue: false,
+      name: 'Fill',
+      description: 'Whether the table should fill the parent',
+    }),
     ...SizeArg,
     ...FlatArg,
     ...IntentArg,
@@ -149,3 +155,8 @@ export const Selectable = Template.bind({});
 Selectable.args = {
   selectable: true,
 };
+
+export const FillParent = Template.bind({});
+FillParent.args = {
+  fill: true,
+};

package/src/stories/Tag/Tag.stories.tsx

@@ -60,7 +60,13 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
     <ReqoreTagGroup columns={columns} size={args.size}>
       <ReqoreTag label='Basic Tag' icon='AlarmWarningLine' {...args} />
       <ReqoreTag label='Disabled Tag' disabled icon='AlarmWarningLine' {...args} />
-      <ReqoreTag label='300px Tag' width='300px' icon='AlarmWarningLine' {...args} />
+      <ReqoreTag
+        label='300px Tag'
+        width='300px'
+        icon='AlarmWarningLine'
+        {...args}
+        tooltip='I am wiiiiiiide'
+      />
       <ReqoreTag label='Danger Tag' icon='AlarmWarningLine' intent='danger' {...args} />
       <ReqoreTag label='Custom Color Tag' icon='AlarmWarningLine' color='#38fdb2' {...args} />
     </ReqoreTagGroup>

package/src/stories/TextArea/TextArea.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { useState } from 'react';
 import { IReqoreTextareaProps } from '../../components/Textarea';
-import { ReqoreTextarea } from '../../index';
+import { ReqoreControlGroup, ReqoreTextarea } from '../../index';
 import { argManager, DisabledArg, MinimalArg, SizeArg } from '../utils/args';
 
 const { createArg } = argManager<IReqoreTextareaProps>();
@@ -54,21 +54,91 @@ const Template: Story<IReqoreTextareaProps> = (args) => {
   };
 
   return (
-    <ReqoreTextarea
-      {...args}
-      onChange={handleValueChange}
-      onClearClick={handleValueClear}
-      value={value}
-    />
+    <>
+      <ReqoreControlGroup fluid>
+        <ReqoreTextarea
+          {...args}
+          onChange={handleValueChange}
+          onClearClick={handleValueClear}
+          value={value}
+        />
+        <ReqoreTextarea
+          {...args}
+          onChange={handleValueChange}
+          onClearClick={handleValueClear}
+          value={value}
+          tooltip={{
+            placement: 'right-start',
+            content: 'I am a tooltip',
+          }}
+          minimal
+        />
+        <ReqoreTextarea
+          {...args}
+          onChange={handleValueChange}
+          onClearClick={handleValueClear}
+          value={value}
+          tooltip="I'm a tooltip"
+          flat
+        />
+        <ReqoreTextarea
+          {...args}
+          onChange={handleValueChange}
+          onClearClick={handleValueClear}
+          value={value}
+          disabled
+        />
+        <ReqoreTextarea
+          {...args}
+          onChange={handleValueChange}
+          onClearClick={handleValueClear}
+          value={value}
+          readOnly
+        />
+      </ReqoreControlGroup>
+      <br />
+      <ReqoreControlGroup fluid>
+        <ReqoreTextarea
+          {...args}
+          onChange={handleValueChange}
+          onClearClick={handleValueClear}
+          value={value}
+          fluid
+        />
+      </ReqoreControlGroup>
+    </>
   );
 };
 
 export const Basic = Template.bind({});
-export const Minimal = Template.bind({});
-Minimal.args = {
-  minimal: true,
+export const Info = Template.bind({});
+Info.args = {
+  intent: 'info',
 };
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
+export const Success = Template.bind({});
+Success.args = {
+  intent: 'success',
+};
+export const Warning = Template.bind({});
+Warning.args = {
+  intent: 'warning',
+};
+export const Danger = Template.bind({});
+Danger.args = {
+  intent: 'danger',
+};
+export const Pending = Template.bind({});
+Pending.args = {
+  intent: 'pending',
+};
+export const Muted = Template.bind({});
+Muted.args = {
+  intent: 'muted',
+};
+
+export const Custom = Template.bind({});
+Custom.args = {
+  customTheme: {
+    main: '#38fdb2',
+  },
 };

package/src/styles.ts

@@ -29,10 +29,19 @@ export const ActiveIconScale = css`
 `;
 
 export const ScaleIconOnHover = css`
-  ${InactiveIconScale}
-
   &:hover,
   &:focus {
     ${ActiveIconScale}
   }
 `;
+
+export const DisabledElement = css`
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+`;
+
+export const ReadOnlyElement = css`
+  pointer-events: none;
+  cursor: not-allowed;
+`;

package/src/types/global.ts

@@ -1,3 +1,4 @@
+import { IReqoreCustomTheme, TReqoreIntent } from '../constants/theme';
 import { IPopoverOptions } from '../hooks/usePopover';
 
 export interface IReqoreComponent {
@@ -5,5 +6,93 @@ export interface IReqoreComponent {
   _popoverId?: string;
 }
 
+export interface IReqoreReadOnly {
+  /**
+   * If true, the component will be read only
+   * @default false
+   * @type boolean
+   * @memberof IReqoreReadOnly
+   * @example
+   * <ReqoreInput readOnly />
+   * <ReqoreInput readOnly={true} />
+   *
+   */
+  readOnly?: boolean;
+}
+
+export interface IReqoreDisabled {
+  /**
+   * If true, the component will be disabled
+   * @default false
+   * @type boolean
+   * @memberof IReqoreDisabled
+   * @example
+   * <ReqoreInput disabled />
+   * <ReqoreInput disabled={true} />
+   *
+   */
+  disabled?: boolean;
+}
+
+export interface IReqoreIntent {
+  /**
+   * The intent of the component
+   * @default none
+   * @type TReqoreIntent
+   * @memberof IReqoreIntent
+   * @example
+   * <ReqoreInput intent="info" />
+   * <ReqoreInput intent="success" />
+   * <ReqoreInput intent="pending" />
+   * <ReqoreInput intent="warning" />
+   * <ReqoreInput intent="danger" />
+   * <ReqoreInput intent="muted" />
+   */
+  intent?: TReqoreIntent;
+}
+
+export interface IWithReqoreCustomTheme {
+  /**
+   * The custom theme of the component
+   * @default none
+   * @type IReqoreCustomTheme
+   * @memberof IWithReqoreCustomTheme
+   * @example
+   * <ReqoreInput customTheme={{ main: '#ff0000' }} />
+   * <ReqoreInput customTheme={{ main: '#ff0000', text: { color: '#0000ff' } }} />
+   */
+  customTheme?: IReqoreCustomTheme;
+}
+
+export interface IWithReqoreTooltip {
+  /**
+   * The tooltip of the component
+   * @default none
+   * @type string | IReqoreTooltip
+   * @memberof IWithReqoreTooltip
+   * @example
+   * <ReqoreInput tooltip="This is a tooltip" />
+   * <ReqoreInput tooltip={{ content: 'This is a tooltip' }} />
+   * <ReqoreInput tooltip={{ content: 'This is a tooltip', position: 'top' }} />
+   * <ReqoreInput tooltip={{ content: 'This is a tooltip', position: 'top', handle: 'focus', useTargetWidth: true, noArrow: true }} />
+   */
+  tooltip?: string | IReqoreTooltip;
+}
+
+export interface IWithReqoreFlat {
+  /**
+   * If true, the component will be flat
+   * @default false
+   * @type boolean
+   * @memberof IWithReqoreFlat
+   * @example
+   * <ReqoreInput flat />
+   * <ReqoreInput flat={true} />
+   * <ReqoreInput flat={false} />
+   *
+   */
+  flat?: boolean;
+}
+
 export interface IReqoreTooltip extends IPopoverOptions {}
 export type TReqoreTooltipProp = string | IReqoreTooltip;