@xqmsg/ui-core 0.23.2 → 0.24.0

package/src/components/button/google/index.tsx

@@ -1,29 +1,29 @@
-import React from 'react';
-import { Google } from '../../icons/google';
-import { Button, ButtonProps } from '..';
-
-export interface GoogleButtonProps extends Partial<ButtonProps> {
-  onClick: () => void;
-}
-
-/**
- * A functional React component utilized to render the `GoogleButton` component
- */
-export const GoogleButton: React.FC<GoogleButtonProps> = ({
-  onClick,
-  type,
-}) => {
-  return (
-    <Button
-      onClick={onClick}
-      variant="secondary"
-      ariaLabel="google-login-button"
-      className="google-button"
-      leftIcon={<Google boxSize="18px" />}
-      text="Sign in with Google"
-      width="variable"
-      type={type}
-      color="#000"
-    />
-  );
-};
+import React from 'react';
+import { Google } from '../../icons/google';
+import { Button, ButtonProps } from '..';
+
+export interface GoogleButtonProps extends Partial<ButtonProps> {
+  onClick: () => void;
+}
+
+/**
+ * A functional React component utilized to render the `GoogleButton` component
+ */
+export const GoogleButton: React.FC<GoogleButtonProps> = ({
+  onClick,
+  type,
+}) => {
+  return (
+    <Button
+      onClick={onClick}
+      variant="secondary"
+      ariaLabel="google-login-button"
+      className="google-button"
+      leftIcon={<Google boxSize="18px" />}
+      text="Sign in with Google"
+      width="variable"
+      type={type}
+      color="#000"
+    />
+  );
+};

package/src/components/button/index.tsx

@@ -1,51 +1,51 @@
-import React from 'react';
-import { Button as ChakraButton } from '@chakra-ui/react';
-import buttonTheme from '../../theme/components/button';
-
-export interface ButtonProps {
-  text: string;
-  onClick?: () => void;
-  width: 'variable' | 'fixed';
-  variant?: keyof typeof buttonTheme.variants;
-  type?: 'button' | 'submit' | 'reset';
-  ariaLabel: string;
-  disabled?: boolean;
-  className?: string;
-  leftIcon?: JSX.Element;
-  rightIcon?: JSX.Element;
-  color?: string;
-}
-
-/**
- * A functional React component utilized to render the `Button` component
- */
-export const Button: React.FC<ButtonProps> = ({
-  onClick,
-  text,
-  type = 'button',
-  ariaLabel,
-  variant = 'primary',
-  disabled,
-  className,
-  width,
-  rightIcon,
-  leftIcon,
-  color,
-}) => {
-  return (
-    <ChakraButton
-      onClick={onClick}
-      type={type}
-      variant={variant}
-      disabled={disabled}
-      aria-label={ariaLabel}
-      className={className}
-      width={width === 'fixed' ? '100%' : 'fit-content'}
-      rightIcon={rightIcon}
-      leftIcon={leftIcon}
-      color={color}
-    >
-      {text}
-    </ChakraButton>
-  );
-};
+import React from 'react';
+import { Button as ChakraButton } from '@chakra-ui/react';
+import buttonTheme from '../../theme/components/button';
+
+export interface ButtonProps {
+  text: string;
+  onClick?: () => void;
+  width: 'variable' | 'fixed';
+  variant?: keyof typeof buttonTheme.variants;
+  type?: 'button' | 'submit' | 'reset';
+  ariaLabel: string;
+  disabled?: boolean;
+  className?: string;
+  leftIcon?: JSX.Element;
+  rightIcon?: JSX.Element;
+  color?: string;
+}
+
+/**
+ * A functional React component utilized to render the `Button` component
+ */
+export const Button: React.FC<ButtonProps> = ({
+  onClick,
+  text,
+  type = 'button',
+  ariaLabel,
+  variant = 'primary',
+  disabled,
+  className,
+  width,
+  rightIcon,
+  leftIcon,
+  color,
+}) => {
+  return (
+    <ChakraButton
+      onClick={onClick}
+      type={type}
+      variant={variant}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      className={className}
+      width={width === 'fixed' ? '100%' : 'fit-content'}
+      rightIcon={rightIcon}
+      leftIcon={leftIcon}
+      color={color}
+    >
+      {text}
+    </ChakraButton>
+  );
+};

package/src/components/button/microsoft/MicrosoftButton.stories.tsx

@@ -1,25 +1,25 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { MicrosoftButton, MicrosoftButtonProps } from '.';
-
-const meta: Meta<MicrosoftButtonProps> = {
-  title: 'Microsoft Button example',
-  component: MicrosoftButton,
-  argTypes: {
-    onClick: {
-      description: 'The onClick callback for the google button',
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-export default meta;
-const Template: Story<MicrosoftButtonProps> = args => (
-  <MicrosoftButton {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  onClick: () => alert('This is a google button click!'),
-};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { MicrosoftButton, MicrosoftButtonProps } from '.';
+
+const meta: Meta<MicrosoftButtonProps> = {
+  title: 'Microsoft Button example',
+  component: MicrosoftButton,
+  argTypes: {
+    onClick: {
+      description: 'The onClick callback for the google button',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<MicrosoftButtonProps> = args => (
+  <MicrosoftButton {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  onClick: () => alert('This is a google button click!'),
+};

package/src/components/button/microsoft/index.tsx

@@ -1,29 +1,29 @@
-import React from 'react';
-import { Microsoft } from '../../icons/microsoft';
-import { Button, ButtonProps } from '..';
-
-export interface MicrosoftButtonProps extends Partial<ButtonProps> {
-  onClick: () => void;
-}
-
-/**
- * A functional React component utilized to render the `MicrosoftButton` component
- */
-export const MicrosoftButton: React.FC<MicrosoftButtonProps> = ({
-  onClick,
-  type,
-}) => {
-  return (
-    <Button
-      onClick={onClick}
-      variant="secondary"
-      ariaLabel="microsoft-login-button"
-      className="microsoft-button"
-      leftIcon={<Microsoft boxSize="18px" />}
-      text="Sign in with Microsoft"
-      width="variable"
-      type={type}
-      color="#000"
-    />
-  );
-};
+import React from 'react';
+import { Microsoft } from '../../icons/microsoft';
+import { Button, ButtonProps } from '..';
+
+export interface MicrosoftButtonProps extends Partial<ButtonProps> {
+  onClick: () => void;
+}
+
+/**
+ * A functional React component utilized to render the `MicrosoftButton` component
+ */
+export const MicrosoftButton: React.FC<MicrosoftButtonProps> = ({
+  onClick,
+  type,
+}) => {
+  return (
+    <Button
+      onClick={onClick}
+      variant="secondary"
+      ariaLabel="microsoft-login-button"
+      className="microsoft-button"
+      leftIcon={<Microsoft boxSize="18px" />}
+      text="Sign in with Microsoft"
+      width="variable"
+      type={type}
+      color="#000"
+    />
+  );
+};

package/src/components/button/spinner/SpinnerButton.stories.tsx

@@ -1,60 +1,60 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { SpinnerButton, SpinnerButtonProps } from '.';
-import { useArgs } from '@storybook/addons';
-
-const meta: Meta<SpinnerButtonProps> = {
-  title: 'Spinner Button example',
-  component: SpinnerButton,
-  argTypes: {
-    text: {
-      control: {
-        type: 'text',
-      },
-      description: 'The text within the button',
-    },
-    onClick: {
-      description: 'The callback for the onClick handler of the button',
-    },
-    type: {
-      control: 'select',
-      options: ['button', 'submit', 'reset'],
-      description: 'The type of the button',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disabled state of the button',
-    },
-    isLoading: {
-      control: 'boolean',
-      description: 'Loading state of the button',
-    },
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg'],
-      description: 'The chakra based size prop for the button and spinner',
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-export default meta;
-const Template: Story<SpinnerButtonProps> = args => {
-  const [, updateArgs] = useArgs();
-
-  return (
-    <SpinnerButton
-      {...args}
-      onClick={() => updateArgs({ ...args, isLoading: !args.isLoading })}
-    />
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  text: 'Spinner Button',
-  type: 'button',
-  disabled: false,
-  isLoading: false,
-};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { SpinnerButton, SpinnerButtonProps } from '.';
+import { useArgs } from '@storybook/addons';
+
+const meta: Meta<SpinnerButtonProps> = {
+  title: 'Spinner Button example',
+  component: SpinnerButton,
+  argTypes: {
+    text: {
+      control: {
+        type: 'text',
+      },
+      description: 'The text within the button',
+    },
+    onClick: {
+      description: 'The callback for the onClick handler of the button',
+    },
+    type: {
+      control: 'select',
+      options: ['button', 'submit', 'reset'],
+      description: 'The type of the button',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state of the button',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Loading state of the button',
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg'],
+      description: 'The chakra based size prop for the button and spinner',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<SpinnerButtonProps> = args => {
+  const [, updateArgs] = useArgs();
+
+  return (
+    <SpinnerButton
+      {...args}
+      onClick={() => updateArgs({ ...args, isLoading: !args.isLoading })}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  text: 'Spinner Button',
+  type: 'button',
+  disabled: false,
+  isLoading: false,
+};

package/src/components/button/spinner/index.tsx

@@ -1,36 +1,36 @@
-import React from 'react';
-import { Button, Spinner } from '@chakra-ui/react';
-import { ButtonProps } from '..';
-
-export interface SpinnerButtonProps extends ButtonProps {
-  isLoading: boolean;
-}
-
-/**
- * A functional React component utilized to render the `SpinnerButton` component
- */
-export const SpinnerButton: React.FC<SpinnerButtonProps> = ({
-  isLoading,
-  text,
-  onClick,
-  type,
-  ariaLabel,
-  variant = 'primary',
-  disabled,
-  className,
-}) => {
-  return (
-    <Button
-      spinner={<Spinner size={'xs'} />}
-      isLoading={isLoading}
-      onClick={onClick}
-      type={type}
-      variant={variant}
-      disabled={disabled}
-      aria-label={ariaLabel}
-      className={className}
-    >
-      {text}
-    </Button>
-  );
-};
+import React from 'react';
+import { Button, Spinner } from '@chakra-ui/react';
+import { ButtonProps } from '..';
+
+export interface SpinnerButtonProps extends ButtonProps {
+  isLoading: boolean;
+}
+
+/**
+ * A functional React component utilized to render the `SpinnerButton` component
+ */
+export const SpinnerButton: React.FC<SpinnerButtonProps> = ({
+  isLoading,
+  text,
+  onClick,
+  type,
+  ariaLabel,
+  variant = 'primary',
+  disabled,
+  className,
+}) => {
+  return (
+    <Button
+      spinner={<Spinner size={'xs'} />}
+      isLoading={isLoading}
+      onClick={onClick}
+      type={type}
+      variant={variant}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      className={className}
+    >
+      {text}
+    </Button>
+  );
+};

package/src/components/card/Card.stories.tsx

@@ -1,56 +1,56 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { Card, CardProps } from '.';
-import { Flex, Text } from '@chakra-ui/react';
-import { Button } from '../button';
-import { Task } from '../icons/task';
-
-const meta: Meta<CardProps> = {
-  title: 'Card example',
-  component: Card,
-  argTypes: {
-    title: {
-      control: {
-        type: 'text',
-      },
-      description: 'Title of the card',
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-export default meta;
-const Template: Story<CardProps> = args => (
-  <Flex flexDir="column" height="450px" justifyContent="space-between">
-    <Card
-      {...args}
-      title="Connect a Service"
-      leftIcon={<Task boxSize="18px" />}
-    >
-      <>
-        Description paragraph ipsum dolor sit ame tconsectetur. At pelle nte
-        sque
-        <Text as="b"> eget hendrt felis.</Text>
-      </>
-      <>
-        Description paragraph ipsum dolor sit ame tconsectetur. At pelle nte
-        sque eget hendrt felis.
-      </>
-      <Button
-        text="Acti asdf asdfads fon"
-        ariaLabel="Action"
-        width="fixed"
-        variant="secondary"
-        onClick={() => {
-          console.log('button on click');
-        }}
-      />
-    </Card>
-  </Flex>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  title: 'Card title',
-};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { Card, CardProps } from '.';
+import { Flex, Text } from '@chakra-ui/react';
+import { Button } from '../button';
+import { Task } from '../icons/task';
+
+const meta: Meta<CardProps> = {
+  title: 'Card example',
+  component: Card,
+  argTypes: {
+    title: {
+      control: {
+        type: 'text',
+      },
+      description: 'Title of the card',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<CardProps> = args => (
+  <Flex flexDir="column" height="450px" justifyContent="space-between">
+    <Card
+      {...args}
+      title="Connect a Service"
+      leftIcon={<Task boxSize="18px" />}
+    >
+      <>
+        Description paragraph ipsum dolor sit ame tconsectetur. At pelle nte
+        sque
+        <Text as="b"> eget hendrt felis.</Text>
+      </>
+      <>
+        Description paragraph ipsum dolor sit ame tconsectetur. At pelle nte
+        sque eget hendrt felis.
+      </>
+      <Button
+        text="Acti asdf asdfads fon"
+        ariaLabel="Action"
+        width="fixed"
+        variant="secondary"
+        onClick={() => {
+          console.log('button on click');
+        }}
+      />
+    </Card>
+  </Flex>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Card title',
+};