@xqmsg/ui-core 0.23.2 → 0.24.0

package/package.json

@@ -1,118 +1,118 @@
-{
-  "version": "0.23.2",
-  "license": "MIT",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "engines": {
-    "node": ">=10"
-  },
-  "scripts": {
-    "start": "tsdx watch",
-    "clean": "rm -rf node_modules",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build",
-    "size": "size-limit",
-    "analyze": "size-limit --why",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "release:major": "changelog -M && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version major && git push origin && git push origin --tags",
-    "release:minor": "changelog -m && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version minor && git push origin && git push origin --tags",
-    "release:patch": "changelog -p && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version patch && git push origin && git push origin --tags"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
-  },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
-  },
-  "name": "@xqmsg/ui-core",
-  "author": "josh@xqmsg.com",
-  "module": "dist/ui-core.esm.js",
-  "size-limit": [
-    {
-      "path": "dist/ui-core.cjs.production.min.js",
-      "limit": "10 KB"
-    },
-    {
-      "path": "dist/ui-core.esm.js",
-      "limit": "10 KB"
-    }
-  ],
-  "devDependencies": {
-    "@babel/core": "^7.21.8",
-    "@babel/preset-env": "^7.21.5",
-    "@babel/preset-react": "^7.18.6",
-    "@rollup/plugin-image": "^3.0.2",
-    "@rollup/plugin-url": "^8.0.1",
-    "@size-limit/preset-small-lib": "^8.2.4",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.5.10",
-    "@storybook/addons": "^6.5.10",
-    "@storybook/builder-webpack5": "^6.5.10",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.5.10",
-    "@svgr/rollup": "^8.0.1",
-    "@svgr/webpack": "^8.0.1",
-    "@types/react": "^18.2.12",
-    "@types/react-dom": "^18.2.5",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
-    "babel-loader": "8.1.0",
-    "babel-preset-react-app": "^9.1.2",
-    "generate-changelog": "^1.8.0",
-    "husky": "^8.0.3",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "rollup-plugin-cjs-es": "^1.1.0",
-    "rollup-plugin-image-files": "^1.4.2",
-    "rollup-plugin-svg": "^2.0.0",
-    "size-limit": "^8.2.4",
-    "tsconfig-paths-webpack-plugin": "^4.0.1",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.5.0",
-    "typescript": "^4.8.2",
-    "yalc": "^1.0.0-pre.53",
-    "yarn-audit-fix": "^9.3.10"
-  },
-  "dependencies": {
-    "@chakra-ui/icons": "^2.0.19",
-    "@chakra-ui/media-query": "^2.0.0",
-    "@chakra-ui/progress": "^2.1.6",
-    "@chakra-ui/react": "^2.3.6",
-    "@chakra-ui/storybook-addon": "^4.0.16",
-    "@chakra-ui/system": "^2.5.7",
-    "@chakra-ui/theme": "^2.0.0",
-    "@chakra-ui/theme-tools": "^2.0.16",
-    "@chakra-ui/transition": "^2.0.16",
-    "@chakra-ui/utils": "^2.0.14",
-    "@emotion/react": "~11.10.8",
-    "@emotion/styled": "~11.10.8",
-    "@hookform/resolvers": "^2.9.7",
-    "@types/react-router-dom": "^5.3.3",
-    "axios": "^0.27.2",
-    "framer-motion": "6.4.1",
-    "react-hook-form": "^7.43.9",
-    "react-icons": "^4.8.0",
-    "react-is": "^18.2.0",
-    "react-router-dom": "^5.3.3",
-    "react-select": "^5.7.3",
-    "yup": "^0.32.11"
-  },
-  "resolutions": {
-    "framer-motion": "6.4.1",
-    "**/@typescript-eslint/eslint-plugin": "^5.59.5",
-    "**/@typescript-eslint/parser": "^5.59.5"
-  }
-}
+{
+  "version": "0.24.0",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=14"
+  },
+  "scripts": {
+    "start": "tsdx watch",
+    "clean": "rm -rf node_modules",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build",
+    "size": "size-limit",
+    "analyze": "size-limit --why",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "release:major": "changelog -M && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version major && git push origin && git push origin --tags",
+    "release:minor": "changelog -m && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version minor && git push origin && git push origin --tags",
+    "release:patch": "changelog -p && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version patch && git push origin && git push origin --tags"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "name": "@xqmsg/ui-core",
+  "author": "josh@xqmsg.com",
+  "module": "dist/ui-core.esm.js",
+  "size-limit": [
+    {
+      "path": "dist/ui-core.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/ui-core.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-url": "^8.0.1",
+    "@size-limit/preset-small-lib": "^8.2.4",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addons": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^6.5.10",
+    "@svgr/rollup": "^8.0.1",
+    "@svgr/webpack": "^8.0.1",
+    "@types/react": "^18.2.12",
+    "@types/react-dom": "^18.2.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.5",
+    "babel-loader": "8.1.0",
+    "babel-preset-react-app": "^9.1.2",
+    "generate-changelog": "^1.8.0",
+    "husky": "^8.0.3",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rollup-plugin-cjs-es": "^1.1.0",
+    "rollup-plugin-image-files": "^1.4.2",
+    "rollup-plugin-svg": "^2.0.0",
+    "size-limit": "^8.2.4",
+    "tsconfig-paths-webpack-plugin": "^4.0.1",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.5.0",
+    "typescript": "^4.8.2",
+    "yalc": "^1.0.0-pre.53",
+    "yarn-audit-fix": "^9.3.10"
+  },
+  "dependencies": {
+    "@chakra-ui/icons": "^2.0.19",
+    "@chakra-ui/media-query": "^2.0.0",
+    "@chakra-ui/progress": "^2.1.6",
+    "@chakra-ui/react": "^2.3.6",
+    "@chakra-ui/storybook-addon": "^4.0.16",
+    "@chakra-ui/system": "^2.5.7",
+    "@chakra-ui/theme": "^2.0.0",
+    "@chakra-ui/theme-tools": "^2.0.16",
+    "@chakra-ui/transition": "^2.0.16",
+    "@chakra-ui/utils": "^2.0.14",
+    "@emotion/react": "~11.10.8",
+    "@emotion/styled": "~11.10.8",
+    "@hookform/resolvers": "^2.9.7",
+    "@types/react-router-dom": "^5.3.3",
+    "axios": "^0.27.2",
+    "framer-motion": "6.4.1",
+    "react-hook-form": "^7.43.9",
+    "react-icons": "^4.8.0",
+    "react-is": "^18.2.0",
+    "react-router-dom": "^5.3.3",
+    "react-select": "^5.7.3",
+    "yup": "^0.32.11"
+  },
+  "resolutions": {
+    "framer-motion": "6.4.1",
+    "**/@typescript-eslint/eslint-plugin": "^5.59.5",
+    "**/@typescript-eslint/parser": "^5.59.5"
+  }
+}

package/src/components/banner/Banner.stories.tsx

@@ -1,100 +1,100 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { Banner, BannerProps } from '.';
-import alertTheme from '../../theme/components/alert';
-import { Box } from '@chakra-ui/react';
-
-const meta: Meta<BannerProps> = {
-  title: 'Alert example',
-  component: Banner,
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: Object.keys(alertTheme.variants),
-      description: 'The `variant` of the `Banner` component',
-    },
-    message: {
-      description: 'The `message` of the `Banner` component',
-    },
-    buttonText: {
-      description: "The `buttonText` of the `Banner` component's action button",
-    },
-    onClick: {
-      description:
-        "The `onClick` handler of the `Banner` component's action button",
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-export default meta;
-const Template: Story<BannerProps> = args => (
-  <>
-    <Box mb="20px">
-      <Banner
-        {...args}
-        type="condensed"
-        variant="positive"
-        message="Positive message."
-      />
-    </Box>
-    <Box mb="20px">
-      <Banner
-        {...args}
-        type="condensed"
-        variant="warning"
-        message="Warning message."
-      />
-    </Box>
-    <Box mb="20px">
-      <Banner
-        {...args}
-        type="condensed"
-        variant="error"
-        message="Error message."
-      />
-    </Box>
-    <Box mb="20px">
-      <Banner
-        {...args}
-        type="condensed"
-        variant="neutral"
-        message="Neutral message."
-      />
-    </Box>
-    <Box mb="20px">
-      <Banner
-        {...args}
-        variant="positive"
-        message="Positive message. Ipsum dolor sit amet, consectetur adipiscing elit. Donec sit laoreet sed risus lectus etiam scelerisque aliquet."
-      />
-    </Box>
-    <Box mb="20px">
-      <Banner
-        {...args}
-        variant="warning"
-        message="Warning message. Ipsum dolor sit amet, consectetur adipiscing elit. Donec sit laoreet sed risus lectus etiam scelerisque aliquet."
-      />
-    </Box>
-    <Box mb="20px">
-      <Banner
-        {...args}
-        variant="error"
-        message="Error message. Ipsum dolor sit amet, consectetur adipiscing elit. Donec sit laoreet sed risus lectus etiam scelerisque aliquet."
-      />
-    </Box>
-    <Box mb="20px">
-      <Banner
-        {...args}
-        variant="neutral"
-        message="Neutral message. Ipsum dolor sit amet, consectetur adipiscing elit. Donec sit laoreet sed risus lectus etiam scelerisque aliquet."
-      />
-    </Box>
-  </>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  // buttonText: 'Action',
-};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { Banner, BannerProps } from '.';
+import alertTheme from '../../theme/components/alert';
+import { Box } from '@chakra-ui/react';
+
+const meta: Meta<BannerProps> = {
+  title: 'Alert example',
+  component: Banner,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: Object.keys(alertTheme.variants),
+      description: 'The `variant` of the `Banner` component',
+    },
+    message: {
+      description: 'The `message` of the `Banner` component',
+    },
+    buttonText: {
+      description: "The `buttonText` of the `Banner` component's action button",
+    },
+    onClick: {
+      description:
+        "The `onClick` handler of the `Banner` component's action button",
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<BannerProps> = args => (
+  <>
+    <Box mb="20px">
+      <Banner
+        {...args}
+        type="condensed"
+        variant="positive"
+        message="Positive message."
+      />
+    </Box>
+    <Box mb="20px">
+      <Banner
+        {...args}
+        type="condensed"
+        variant="warning"
+        message="Warning message."
+      />
+    </Box>
+    <Box mb="20px">
+      <Banner
+        {...args}
+        type="condensed"
+        variant="error"
+        message="Error message."
+      />
+    </Box>
+    <Box mb="20px">
+      <Banner
+        {...args}
+        type="condensed"
+        variant="neutral"
+        message="Neutral message."
+      />
+    </Box>
+    <Box mb="20px">
+      <Banner
+        {...args}
+        variant="positive"
+        message="Positive message. Ipsum dolor sit amet, consectetur adipiscing elit. Donec sit laoreet sed risus lectus etiam scelerisque aliquet."
+      />
+    </Box>
+    <Box mb="20px">
+      <Banner
+        {...args}
+        variant="warning"
+        message="Warning message. Ipsum dolor sit amet, consectetur adipiscing elit. Donec sit laoreet sed risus lectus etiam scelerisque aliquet."
+      />
+    </Box>
+    <Box mb="20px">
+      <Banner
+        {...args}
+        variant="error"
+        message="Error message. Ipsum dolor sit amet, consectetur adipiscing elit. Donec sit laoreet sed risus lectus etiam scelerisque aliquet."
+      />
+    </Box>
+    <Box mb="20px">
+      <Banner
+        {...args}
+        variant="neutral"
+        message="Neutral message. Ipsum dolor sit amet, consectetur adipiscing elit. Donec sit laoreet sed risus lectus etiam scelerisque aliquet."
+      />
+    </Box>
+  </>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  // buttonText: 'Action',
+};

package/src/components/banner/index.tsx

@@ -1,73 +1,75 @@
-import React, { ReactNode, useMemo } from 'react';
-import { Alert, AlertDescription, Box, Flex } from '@chakra-ui/react';
-import { Button } from '../button';
-import { Error } from '../icons/error';
-import { Neutral } from '../icons/neutral';
-import { Positive } from '../icons/positive';
-import { Warning } from '../icons/warning';
-
-export type BannerVariant = 'positive' | 'warning' | 'error' | 'neutral';
-
-export interface BannerProps {
-  variant: BannerVariant;
-  message: ReactNode;
-  buttonText?: string;
-  onClick?: () => void;
-  type?: 'condensed' | 'expanded';
-}
-
-/**
- * A functional React component utilized to render the `Banner` component
- */
-export const Banner: React.FC<BannerProps> = ({
-  variant,
-  message,
-  buttonText,
-  onClick,
-  type = 'expanded',
-}) => {
-  const Icon = useMemo(() => {
-    switch (variant) {
-      case 'error':
-        return <Error boxSize="16px" />;
-      case 'neutral':
-        return <Neutral boxSize="16px" />;
-      case 'positive':
-        return <Positive boxSize="16px" />;
-      case 'warning':
-        return <Warning boxSize="16px" />;
-      default:
-        return null;
-    }
-  }, [variant]);
-
-  return (
-    <Alert variant={variant} borderRadius="4px">
-      <AlertDescription>
-        <Flex
-          flexDirection={type === 'condensed' ? 'row' : 'column'}
-          alignItems={type === 'condensed' ? 'center' : ''}
-          minHeight="26px"
-        >
-          <Box pr="8px">{Icon}</Box>
-          <Box pt={type === 'condensed' ? 0 : '8px'}> {message}</Box>
-          {onClick && buttonText && (
-            <Flex
-              ml={type === 'condensed' ? 'auto' : ''}
-              pt={type === 'condensed' ? 0 : '8px'}
-              justifyContent={type === 'condensed' ? 'flex-end' : 'flex-end'}
-            >
-              <Button
-                variant="secondary"
-                onClick={onClick}
-                text={buttonText}
-                width="variable"
-                ariaLabel="banner button"
-              />
-            </Flex>
-          )}
-        </Flex>
-      </AlertDescription>
-    </Alert>
-  );
-};
+import React, { ReactNode, useMemo } from 'react';
+import { Alert, AlertDescription, Box, Flex } from '@chakra-ui/react';
+import { Button } from '../button';
+import { Error } from '../icons/error';
+import { Neutral } from '../icons/neutral';
+import { Positive } from '../icons/positive';
+import { Warning } from '../icons/warning';
+
+export type BannerVariant = 'positive' | 'warning' | 'error' | 'neutral';
+
+export interface BannerProps {
+  variant: BannerVariant;
+  message: ReactNode;
+  buttonText?: string;
+  onClick?: () => void;
+  type?: 'condensed' | 'expanded';
+}
+
+/**
+ * A functional React component utilized to render the `Banner` component
+ */
+export const Banner: React.FC<BannerProps> = ({
+  variant,
+  message,
+  buttonText,
+  onClick,
+  type = 'expanded',
+}) => {
+  const Icon = useMemo(() => {
+    switch (variant) {
+      case 'error':
+        return <Error boxSize="16px" />;
+      case 'neutral':
+        return <Neutral boxSize="16px" />;
+      case 'positive':
+        return <Positive boxSize="16px" />;
+      case 'warning':
+        return <Warning boxSize="16px" />;
+      default:
+        return null;
+    }
+  }, [variant]);
+
+  return (
+    <Alert variant={variant} borderRadius="4px">
+      <AlertDescription>
+        <Flex
+          flexDirection={type === 'condensed' ? 'row' : 'column'}
+          alignItems={type === 'condensed' ? 'center' : ''}
+          minHeight="26px"
+        >
+          <Box pr="8px">{Icon}</Box>
+          <Box flexGrow="1" pt={type === 'condensed' ? 0 : '8px'}>
+            {message}
+          </Box>
+          {onClick && buttonText && (
+            <Flex
+              ml={type === 'condensed' ? 'auto' : ''}
+              pt={type === 'condensed' ? 0 : '8px'}
+              justifyContent={type === 'condensed' ? 'flex-end' : 'flex-end'}
+            >
+              <Button
+                variant="secondary"
+                onClick={onClick}
+                text={buttonText}
+                width="variable"
+                ariaLabel="banner button"
+              />
+            </Flex>
+          )}
+        </Flex>
+      </AlertDescription>
+    </Alert>
+  );
+};