@qoretechnologies/reqore 0.19.13 → 0.20.2

package/src/stories/utils/args.ts

@@ -0,0 +1,138 @@
+import { TSizes } from '../../constants/sizes';
+import { DEFAULT_INTENTS } from '../../constants/theme';
+import Icons from '../../icons.json';
+import { IReqoreIconName } from '../../types/icons';
+
+export interface IArgData {
+  description?: string;
+  name?: string;
+  control?: any;
+  options?: string[];
+  type?: string;
+  table?: any;
+}
+
+export type TArg<T> = { [key: string]: (IArgData & { defaultValue?: T }) | undefined };
+export type TDisabledArg = { [key: string]: { table: { disable: boolean } } };
+
+export const argManager = <Target>() => {
+  return {
+    createArg<K extends keyof Target>(
+      name: K,
+      data: IArgData & { defaultValue?: Target[K] }
+    ): TArg<Target[K]> {
+      return {
+        [name as string]: data,
+      };
+    },
+    disableArg<K extends keyof Target>(name: K): TDisabledArg {
+      return {
+        [name]: {
+          table: {
+            disable: true,
+          },
+        },
+      };
+    },
+    disableArgs<K extends keyof Target>(names: K[]): TDisabledArg {
+      return names.reduce((newArgs: TDisabledArg, name) => {
+        return {
+          ...newArgs,
+          ...{
+            [name]: {
+              table: {
+                disable: true,
+              },
+            },
+          },
+        };
+      }, {});
+    },
+  };
+};
+
+export const IconArg = (
+  iconKeyName: string = 'icon',
+  name?: string,
+  defaultValue?: IReqoreIconName
+) =>
+  argManager<any>().createArg(iconKeyName, {
+    defaultValue: defaultValue || '24HoursFill',
+    name: name || 'Icon',
+    description: 'The icon name used',
+    control: {
+      type: 'select',
+    },
+    options: Icons,
+  });
+
+export const MinimalArg = (): TArg<any> => {
+  return argManager<any>().createArg('minimal', {
+    description: 'Whether the component should be minimal',
+    name: 'Minimal',
+    defaultValue: false,
+    control: {
+      type: 'boolean',
+    },
+  });
+};
+
+export const FlatArg = {
+  ...argManager<any>().createArg('flat', {
+    description: 'Whether the component should be flat',
+    name: 'Flat',
+    defaultValue: false,
+    control: {
+      type: 'boolean',
+    },
+  }),
+};
+
+export const NoContentArg = {
+  ...argManager<any>().createArg('withoutContent', {
+    defaultValue: true,
+    table: {
+      disable: true,
+    },
+  }),
+};
+
+export const SizeArg = {
+  ...argManager<any>().createArg('size', {
+    control: 'select',
+    description: 'The size of the element',
+    options: ['tiny', 'small', 'normal', 'big', 'huge'] as TSizes[],
+    name: 'Size',
+    defaultValue: 'normal' as TSizes,
+    table: {
+      defaultValue: { summary: 'normal' },
+    },
+  }),
+};
+
+export const IntentArg = {
+  ...argManager<any>().createArg('intent', {
+    control: 'select',
+    description: 'The intent of the element',
+    options: Object.keys(DEFAULT_INTENTS),
+    name: 'Intent',
+  }),
+};
+
+export const CustomIntentArg = (key: string) => ({
+  ...argManager<any>().createArg(key, {
+    control: 'select',
+    description: 'The custom intent',
+    options: Object.keys(DEFAULT_INTENTS),
+    name: 'Custom Intent',
+  }),
+});
+
+export const DisabledArg = {
+  ...argManager<any>().createArg('disabled', {
+    control: 'boolean',
+    description: 'Whether the element should be disabled',
+    name: 'Disabled',
+    defaultValue: false,
+  }),
+};

package/src/stories/utils.ts

@@ -0,0 +1,17 @@
+import { ComponentStory } from '@storybook/react';
+
+/**
+ * It takes a template function and an object of properties, and returns a new function that has the
+ * properties bound to it
+ * @param template - The template function that you want to bind the props to.
+ * @param {T} props - The props that will be passed to the template.
+ * @returns A function that is bound to an empty object.
+ */
+export const buildTemplate = <T, C>(
+  template: ComponentStory<React.FC<T>>,
+  props?: Partial<T> & C
+) => {
+  const result = template.bind({});
+  result.args = props as any;
+  return result;
+};

package/src/styles.ts

@@ -0,0 +1,38 @@
+import { css } from 'styled-components';
+import { StyledActiveContent, StyledInActiveContent } from './components/Button';
+import { StyledIconWrapper } from './components/Icon';
+
+export const AnimatedTextElement = css`
+  ${StyledActiveContent} {
+    transform: translateY(0px);
+    filter: blur(0);
+    opacity: 1;
+  }
+
+  ${StyledInActiveContent} {
+    transform: translateY(150%);
+    filter: blur(10px);
+    opacity: 0;
+  }
+`;
+
+export const InactiveIconScale = css`
+  ${StyledIconWrapper} {
+    transform: scale(0.85);
+  }
+`;
+
+export const ActiveIconScale = css`
+  ${StyledIconWrapper} {
+    transform: scale(1);
+  }
+`;
+
+export const ScaleIconOnHover = css`
+  ${InactiveIconScale}
+
+  &:hover,
+  &:focus {
+    ${ActiveIconScale}
+  }
+`;

package/src/types/global.ts

@@ -0,0 +1,9 @@
+import { IPopoverOptions } from '../hooks/usePopover';
+
+export interface IReqoreComponent {
+  _insidePopover?: boolean;
+  _popoverId?: string;
+}
+
+export interface IReqoreTooltip extends IPopoverOptions {}
+export type TReqoreTooltipProp = string | IReqoreTooltip;