@qoretechnologies/reqore 0.36.0 → 0.36.1

package/src/stories/Tree/Tree.stories.tsx

@@ -1,13 +1,22 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryObj } from '@storybook/react';
 import { noop } from 'lodash';
 import { IReqoreTreeProps, ReqoreTree } from '../../components/Tree';
 import MockObject from '../../mock/object.json';
+import { StoryMeta } from '../utils';
 import { SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreTreeProps>();
 
-export default {
+const meta: StoryMeta<typeof ReqoreTree> = {
   title: 'Collections/Tree/Stories',
+  component: ReqoreTree,
+  args: {
+    withLabelCopy: true,
+    showTypes: true,
+    expanded: false,
+    onItemClick: noop,
+    data: MockObject,
+  },
   argTypes: {
     ...createArg('withLabelCopy', {
       name: 'With label copy',
@@ -29,34 +38,87 @@ export default {
     }),
     ...SizeArg,
   },
-} as Meta<IReqoreTreeProps>;
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-const data = MockObject;
+export const Basic: Story = {};
 
-const Template: Story<IReqoreTreeProps> = (args: IReqoreTreeProps) => {
-  return <ReqoreTree data={data} onItemClick={noop} {...args} />;
+export const TextView: Story = {
+  args: {
+    mode: 'copy',
+  },
 };
 
-export const Basic = Template.bind({});
-export const TextView = Template.bind({});
-TextView.args = {
-  mode: 'copy',
+export const NoControls: Story = {
+  args: {
+    showControls: false,
+  },
 };
 
-export const NoControls = Template.bind({});
-NoControls.args = {
-  showControls: false,
+export const Zoomable: Story = {
+  args: {
+    zoomable: true,
+  },
 };
 
-export const Zoomable = Template.bind({});
-Zoomable.args = {
-  zoomable: true,
+export const Exportable: Story = {
+  args: {
+    zoomable: true,
+    exportable: true,
+  },
 };
 
-export const WithDefaultZoom = Template.bind({});
-WithDefaultZoom.args = {
-  label: 'Collection of items',
-  zoomable: true,
-  size: 'tiny',
-  defaultZoom: 2,
+export const Object: Story = {
+  args: {
+    exportable: true,
+    data: {
+      _id: '606d4c955f96372fd1b8bcd1',
+      index: 0,
+      guid: 'd08cde5f-e18e-4d7f-80a9-6541848ab830',
+      isActive: false,
+      balance: '$3,219.32',
+      picture: 'http://placehold.it/32x32',
+      age: 25,
+      eyeColor: 'brown',
+      name: 'Zelma Short',
+      gender: 'female',
+      company: 'LINGOAGE',
+      email: 'zelmashort@lingoage.com',
+      phone: '+1 (840) 429-2274',
+      address: '757 Woodside Avenue, Winchester, Marshall Islands, 2032',
+      about:
+        'Ipsum est ex nisi veniam proident adipisicing. Occaecat Lorem minim amet aliqua laboris excepteur sint eu mollit laborum sunt. Duis aliquip nulla cillum labore culpa ullamco labore non in nostrud. Cupidatat nisi enim ullamco quis voluptate Lorem voluptate minim dolore esse irure eiusmod aliquip amet. Dolore laboris Lorem laboris irure magna sint dolor. In irure adipisicing minim ullamco commodo ad dolore elit occaecat dolor. Cillum commodo est commodo dolor enim velit.\r\n',
+      registered: '2015-03-19T05:00:22 -01:00',
+      latitude: -8.97737,
+      longitude: 110.576471,
+      tags: ['aute', 'qui', 'ut', 'mollit', 'culpa', 'qui', 'irure'],
+      friends: [
+        {
+          id: 0,
+          name: 'Angel Gallagher',
+        },
+        {
+          id: 1,
+          name: 'Rose Farmer',
+        },
+        {
+          id: 2,
+          name: 'Jaclyn Keith',
+        },
+      ],
+      greeting: 'Hello, Zelma Short! You have 5 unread messages.',
+      favoriteFruit: 'banana',
+    },
+  },
+};
+
+export const WithDefaultZoom: Story = {
+  args: {
+    label: 'Collection of items',
+    zoomable: true,
+    size: 'tiny',
+    defaultZoom: 2,
+  },
 };

package/src/stories/utils.ts

@@ -1,4 +1,7 @@
-import { ComponentStory } from '@storybook/react';
+import { ComponentStory, Meta, StoryFn } from '@storybook/react';
+import { IReqoreUIProviderProps } from '../containers/UIProvider';
+import { IReqorePagingOptions } from '../hooks/usePaging';
+import { TestTableItem } from '../mock/tableData';
 
 /**
  * It takes a template function and an object of properties, and returns a new function that has the
@@ -15,3 +18,21 @@ export const buildTemplate = <T, C>(
   result.args = props as any;
   return result;
 };
+
+export type AdditionalStorybookArgs = IReqoreUIProviderProps & {
+  otherThemeOptions?: IReqoreUIProviderProps['theme'];
+  multipleColumns?: boolean;
+  confirm?: boolean;
+  notificationId?: string;
+  pagingOptions?: Partial<IReqorePagingOptions<TestTableItem>>;
+  insideModal?: boolean;
+  animatedButtons?: IReqoreUIProviderProps['options']['animations']['buttons'];
+  animatedDialogs?: IReqoreUIProviderProps['options']['animations']['dialogs'];
+};
+
+export type StoryMeta<
+  Component extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>,
+  AdditionalArgs = {}
+> = Meta<React.ComponentProps<Component> & AdditionalArgs & AdditionalStorybookArgs>;
+
+export type StoryRenderer<T> = StoryFn<T & AdditionalStorybookArgs>;

package/src/styles.ts

@@ -1,10 +1,63 @@
-import { css } from 'styled-components';
-import { StyledActiveContent, StyledInActiveContent } from './components/Button';
+import styled, { css } from 'styled-components';
+import { StyledTextEffect } from './components/Effect';
 import { StyledIconWrapper } from './components/Icon';
 
 export const INACTIVE_ICON_SCALE = 0.85;
 export const ACTIVE_ICON_SCALE = 1;
 
+export const StyledActiveContent = styled(StyledTextEffect)`
+  position: absolute;
+  transform: translateY(-150%);
+  opacity: 0;
+  transition: all 0.2s ease-out;
+  filter: blur(10px);
+
+  ${({ wrap }) =>
+    !wrap
+      ? css`
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 100%;
+        `
+      : css`
+          word-break: break-word;
+        `}
+`;
+
+export const StyledInActiveContent = styled(StyledTextEffect)`
+  position: absolute;
+  transform: translateY(0);
+  transition: all 0.2s ease-out;
+
+  ${({ wrap }) =>
+    !wrap
+      ? css`
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 100%;
+        `
+      : css`
+          word-break: break-word;
+        `}
+`;
+
+export const StyledInvisibleContent = styled(StyledTextEffect)`
+  visibility: hidden;
+  position: relative;
+  overflow: hidden;
+
+  ${({ wrap }) =>
+    !wrap
+      ? css`
+          white-space: nowrap;
+        `
+      : css`
+          word-break: break-word;
+        `}
+`;
+
 export const AnimatedTextElement = css`
   ${StyledActiveContent} {
     transform: translateY(0px);