@availity/mui-card 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.1.0 (2023-07-03)
+
+
+### Features
+
+* **mui-card:** add CardActionArea ([ddb874a](https://github.com/Availity/element/commit/ddb874a5857f494e74d4e177624d8796435634dc))
+* **mui-card:** add CardActions ([e6c40f7](https://github.com/Availity/element/commit/e6c40f73ce629254f5bad9bcda66ebcec963bc17))
+* **mui-card:** add CardContent ([54e7163](https://github.com/Availity/element/commit/54e716326bd73429905feb86a3f13afbcbbf2a29))
+* **mui-card:** add CardHeader ([0f2a6d4](https://github.com/Availity/element/commit/0f2a6d4a321907e0a394120096efc26985aab45f))
+* **mui-card:** add CardMedia ([9b4b5bd](https://github.com/Availity/element/commit/9b4b5bdba2dde82035e52ffb5db0d482e652725a))
+* **mui-card:** initial commit ([0b68ac9](https://github.com/Availity/element/commit/0b68ac90897d16278d82d02a590ba884d00bb693))
+
+
+### Bug Fixes
+
+* **mui-card:** header lineHeights and add action example ([71456f8](https://github.com/Availity/element/commit/71456f82a5ace78ef7da752dc649dba709174e02))

package/README.md

@@ -0,0 +1,61 @@
+# @availity/mui-card
+
+> Availity MUI Card component to be used with @availity/element design system.
+
+[![Version](https://img.shields.io/npm/v/@availity/mui-card.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-card)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/mui-card.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-card)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-card?style=for-the-badge)](https://github.com/Availity/element/blob/main/packages/mui-card/package.json)
+
+## Documentation
+
+This package extends the MUI Card component: [MUI Card Docs](https://mui.com/components/card/)
+
+Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-card-introduction--docs)
+
+Availity standards for design and usage can be found in the [Availity Design Guide](https://zeroheight.com/2e36e50c7)
+
+## Installation
+
+### Import Through @availity/element (Recommended)
+
+#### NPM
+
+```bash
+npm install @availity/element
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/element
+```
+
+### Direct Import
+
+#### NPM
+
+_This package has a few peer dependencies. Add `@mui/material` & `@emotion/react` to your project if not already installed._
+
+```bash
+npm install @availity/mui-card
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/mui-card
+```
+
+### Usage
+
+#### Import through @availity/element
+
+```tsx
+import { Card } from '@availity/element';
+```
+
+#### Direct import
+
+```tsx
+import { Card } from '@availity/mui-card';
+```

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { CardProps as CardProps$1 } from '@mui/material';
+
+interface CardProps extends Omit<CardProps$1, 'elevation' | 'variant' | 'raised' | 'square'> {
+    children?: React.ReactNode;
+}
+declare const Card: ({ children, ...rest }: CardProps) => JSX.Element;
+
+export { Card, CardProps };

package/dist/index.js

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Card: () => Card
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/lib/Card.tsx
+var import_material = require("@mui/material");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Card = ({ children, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Card, {
+    ...rest,
+    variant: "elevation",
+    elevation: 1,
+    children
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Card
+});

package/dist/index.mjs

@@ -0,0 +1,14 @@
+// src/lib/Card.tsx
+import { Card as MuiCard } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var Card = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx(MuiCard, {
+    ...rest,
+    variant: "elevation",
+    elevation: 1,
+    children
+  });
+};
+export {
+  Card
+};

package/introduction.mdx

@@ -0,0 +1,7 @@
+import { Markdown } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs';
+import ReadMe from './README.md?raw';
+
+<Meta title="Components/Card/Introduction" />
+
+<Markdown>{ReadMe}</Markdown>

package/jest.config.js

@@ -0,0 +1,7 @@
+const global = require('../../jest.config.global');
+
+module.exports = {
+  ...global,
+  displayName: 'card',
+  coverageDirectory: '../../coverage/card',
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@availity/mui-card",
+  "version": "0.1.0",
+  "description": "Availity MUI Card Component - part of the @availity/element design system",
+  "keywords": [
+    "react",
+    "typescript",
+    "availity",
+    "mui"
+  ],
+  "homepage": "https://availity.github.io/element/?path=/docs/components-card-introduction--docs",
+  "bugs": {
+    "url": "https://github.com/Availity/element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/element.git",
+    "directory": "packages/card"
+  },
+  "license": "MIT",
+  "author": "Availity Developers <AVOSS@availity.com>",
+  "browser": "./dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
+    "clean": "rm -rf dist",
+    "clean:nm": "rm -rf node_modules",
+    "bundlesize": "bundlesize",
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
+  },
+  "devDependencies": {
+    "@mui/material": "^5.11.9",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tsup": "^5.12.7",
+    "typescript": "^4.6.4"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.11.9",
+    "react": ">=16.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/project.json

@@ -0,0 +1,41 @@
+{
+  "name": "mui-card",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/card/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "eslintConfig": ".eslintrc.json",
+        "lintFilePatterns": ["packages/card/**/*.{js,ts}"],
+        "silent": false,
+        "fix": false,
+        "cache": true,
+        "cacheLocation": "./node_modules/.cache/card/.eslintcache",
+        "maxWarnings": -1,
+        "quiet": false,
+        "noEslintrc": false,
+        "hasTypeAwareRules": true,
+        "cacheStrategy": "metadata"
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/card"],
+      "options": {
+        "jestConfig": "packages/card/jest.config.js",
+        "passWithNoTests": true
+      }
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "conventional",
+        "commitMessageFormat": "chore(${projectName}): release version ${version} [skip ci]",
+        "tagPrefix": "@availity/${projectName}@"
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/Card';

package/src/lib/Card.stories.tsx

@@ -0,0 +1,34 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../../../button';
+import { Card, CardProps } from './Card';
+import { CardHeader } from './CardHeader';
+import { CardMedia } from './CardMedia';
+import { CardContent } from './CardContent';
+import { CardActions } from './CardActions';
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card/Card',
+  component: Card,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _Card: StoryObj<typeof Card> = {
+  render: (args: CardProps) => (
+    <Card {...args}>
+      <CardHeader title="Card header" subheader="Subheader" />
+      <CardMedia sx={{ height: '100px' }} image="https://avatars.githubusercontent.com/u/329985?s=200&v=4" />
+      <CardContent>This is the content of the Card.</CardContent>
+      <CardActions>
+        <Button size="small" color="primary">
+          Submit
+        </Button>
+        <Button size="small">Cancel</Button>
+      </CardActions>
+    </Card>
+  ),
+  args: {},
+};

package/src/lib/Card.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { Card } from './Card';
+
+describe('Card', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(<Card>Test</Card>);
+    expect(getByText('Test')).toBeTruthy();
+  });
+});

package/src/lib/Card.tsx

@@ -0,0 +1,13 @@
+import { Card as MuiCard, CardProps as MuiCardProps } from '@mui/material';
+
+export interface CardProps extends Omit<MuiCardProps, 'elevation' | 'variant' | 'raised' | 'square'> {
+  children?: React.ReactNode;
+}
+
+export const Card = ({ children, ...rest }: CardProps): JSX.Element => {
+  return (
+    <MuiCard {...rest} variant="elevation" elevation={1}>
+      {children}
+    </MuiCard>
+  );
+};

package/src/lib/CardActionArea.stories.tsx

@@ -0,0 +1,25 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { CardActionArea, CardActionAreaProps } from './CardActionArea';
+import { Card } from './Card';
+import { CardContent } from './CardContent';
+
+const meta: Meta<typeof CardActionArea> = {
+  title: 'Components/Card/CardActionArea',
+  component: CardActionArea,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _CardActionArea: StoryObj<typeof CardActionArea> = {
+  render: (args: CardActionAreaProps) => (
+    <Card>
+      <CardActionArea {...args}>
+        <CardContent>You can click on this card</CardContent>
+      </CardActionArea>
+    </Card>
+  ),
+  args: {},
+};

package/src/lib/CardActionArea.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { CardActionArea } from './CardActionArea';
+
+describe('CardActionArea', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(<CardActionArea>Test</CardActionArea>);
+    expect(getByText('Test')).toBeTruthy();
+  });
+});

package/src/lib/CardActionArea.tsx

@@ -0,0 +1,17 @@
+import { CardActionArea as MuiCardActionArea, CardActionAreaProps as MuiCardActionAreaProps } from '@mui/material';
+
+export interface CardActionAreaProps
+  extends Omit<
+    MuiCardActionAreaProps,
+    'centerRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'TouchRippleProps' | 'touchRippleRef'
+  > {
+  children?: React.ReactNode;
+}
+
+export const CardActionArea = ({ children, ...rest }: CardActionAreaProps): JSX.Element => {
+  return (
+    <MuiCardActionArea {...rest} disableRipple>
+      {children}
+    </MuiCardActionArea>
+  );
+};

package/src/lib/CardActions.stories.tsx

@@ -0,0 +1,41 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { CardActions, CardActionsProps } from './CardActions';
+import { Card } from './Card';
+import { Button, IconButton } from '../../../button';
+import { SearchIcon } from '@availity/mui-icon';
+
+const meta: Meta<typeof CardActions> = {
+  title: 'Components/Card/CardActions',
+  component: CardActions,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _CardActions: StoryObj<typeof CardActions> = {
+  render: (args: CardActionsProps) => (
+    <Card>
+      <CardActions {...args}>
+        <Button size="small" color="primary">
+          Submit
+        </Button>
+        <Button size="small">Cancel</Button>
+      </CardActions>
+    </Card>
+  ),
+  args: {},
+};
+export const _CardActionsIconButtons: StoryObj<typeof CardActions> = {
+  render: (args: CardActionsProps) => (
+    <Card>
+      <CardActions {...args}>
+        <IconButton size="small" color="primary" title="search">
+          <SearchIcon />
+        </IconButton>
+      </CardActions>
+    </Card>
+  ),
+  args: {},
+};

package/src/lib/CardActions.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { CardActions } from './CardActions';
+
+describe('CardActions', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(<CardActions>Test</CardActions>);
+    expect(getByText('Test')).toBeTruthy();
+  });
+});

package/src/lib/CardActions.tsx

@@ -0,0 +1,9 @@
+import { CardActions as MuiCardActions, CardActionsProps as MuiCardActionsProps } from '@mui/material';
+
+export interface CardActionsProps extends MuiCardActionsProps {
+  children?: React.ReactNode;
+}
+
+export const CardActions = ({ children, ...rest }: CardActionsProps): JSX.Element => {
+  return <MuiCardActions {...rest}>{children}</MuiCardActions>;
+};

package/src/lib/CardContent.stories.tsx

@@ -0,0 +1,24 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { CardContent, CardContentProps } from './CardContent';
+import { Card } from './Card';
+
+const meta: Meta<typeof CardContent> = {
+  title: 'Components/Card/CardContent',
+  component: CardContent,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _CardContent: StoryObj<typeof CardContent> = {
+  render: (args: CardContentProps) => (
+    <Card>
+      <CardContent {...args} />
+    </Card>
+  ),
+  args: {
+    children: 'This text is a child of CardContent',
+  },
+};

package/src/lib/CardContent.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { CardContent } from './CardContent';
+
+describe('CardContent', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(<CardContent>Test</CardContent>);
+    expect(getByText('Test')).toBeTruthy();
+  });
+});

package/src/lib/CardContent.tsx

@@ -0,0 +1,9 @@
+import { CardContent as MuiCardContent, CardContentProps as MuiCardContentProps } from '@mui/material';
+
+export interface CardContentProps extends MuiCardContentProps {
+  children?: React.ReactNode;
+}
+
+export const CardContent = ({ children, ...rest }: CardContentProps): JSX.Element => {
+  return <MuiCardContent {...rest}>{children}</MuiCardContent>;
+};

package/src/lib/CardHeader.stories.tsx

@@ -0,0 +1,44 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card } from './Card';
+import { CardHeader, CardHeaderProps } from './CardHeader';
+import { IconButton } from '../../../button';
+import { MoreVerticalIcon } from '@availity/mui-icon';
+
+const meta: Meta<typeof CardHeader> = {
+  title: 'Components/Card/CardHeader',
+  component: CardHeader,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _CardHeader: StoryObj<typeof CardHeader> = {
+  render: (args: CardHeaderProps) => (
+    <Card>
+      <CardHeader {...args} />
+    </Card>
+  ),
+  args: {
+    title: 'Card header',
+    subheader: 'Subheader',
+  },
+};
+
+export const _CardHeaderAction: StoryObj<typeof CardHeader> = {
+  render: (args: CardHeaderProps) => (
+    <Card>
+      <CardHeader {...args} />
+    </Card>
+  ),
+  args: {
+    title: 'Card header',
+    // subheader: 'Subheader',
+    action: (
+      <IconButton color="primary" title="More" size="medium">
+        <MoreVerticalIcon />
+      </IconButton>
+    ),
+  },
+};

package/src/lib/CardHeader.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { CardHeader } from './CardHeader';
+
+describe('CardHeader', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(<CardHeader title="Test" />);
+    expect(getByText('Test')).toBeTruthy();
+  });
+});

package/src/lib/CardHeader.tsx

@@ -0,0 +1,15 @@
+import { CardHeader as MuiCardHeader, CardHeaderProps as MuiCardHeaderProps } from '@mui/material';
+
+export interface CardHeaderProps extends Omit<MuiCardHeaderProps, 'avatar'> {
+  children?: React.ReactNode;
+}
+
+export const CardHeader = ({ ...rest }: CardHeaderProps): JSX.Element => {
+  return (
+    <MuiCardHeader
+      {...rest}
+      titleTypographyProps={{ variant: 'h6' }}
+      subheaderTypographyProps={{ variant: 'subtitle2' }}
+    />
+  );
+};

package/src/lib/CardMedia.stories.tsx

@@ -0,0 +1,25 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { CardMedia, CardMediaProps } from './CardMedia';
+import { Card } from './Card';
+
+const meta: Meta<typeof CardMedia> = {
+  title: 'Components/Card/CardMedia',
+  component: CardMedia,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _CardMedia: StoryObj<typeof CardMedia> = {
+  render: (args: CardMediaProps) => (
+    <Card>
+      <CardMedia {...args} />
+    </Card>
+  ),
+  args: {
+    image: 'https://avatars.githubusercontent.com/u/329985?s=200&v=4',
+    sx: { height: '100px' },
+  },
+};

package/src/lib/CardMedia.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { CardMedia } from './CardMedia';
+
+describe('CardMedia', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(<CardMedia>Test</CardMedia>);
+    expect(getByText('Test')).toBeTruthy();
+  });
+});

package/src/lib/CardMedia.tsx

@@ -0,0 +1,9 @@
+import { CardMedia as MuiCardMedia, CardMediaProps as MuiCardMediaProps } from '@mui/material';
+
+export interface CardMediaProps extends MuiCardMediaProps {
+  children?: React.ReactNode;
+}
+
+export const CardMedia = ({ children, ...rest }: CardMediaProps): JSX.Element => {
+  return <MuiCardMedia {...rest}>{children}</MuiCardMedia>;
+};

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"],
+    "allowJs": true
+  },
+  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+}