@availity/element 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.1.3](https://github.com/Availity/element/compare/@availity/element@0.1.2...@availity/element@0.1.3) (2023-02-28)
+
 ## [0.1.2](https://github.com/Availity/element/compare/@availity/element@0.1.1...@availity/element@0.1.2) (2023-02-22)
 
 

package/README.md

@@ -6,6 +6,10 @@
 [![NPM Downloads](https://img.shields.io/npm/dt/@availity/element.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/element)
 [![Dependecy Status](https://img.shields.io/librariesio/release/npm/@availity/element?style=for-the-badge)](https://github.com/Availity/element/blob/master/packages/element/package.json)
 
+This is a collection of reusable React components intended to be used across multiple projects. These components use [@availity/design-tokens](./packages/design-tokens/) for styling and [Material UI](https://mui.com/) as the base.
+
+Visit our [documentation site](https://zeroheight.com/07045d232/v/latest/p/753cd8-element) for more information on how to use the components.
+
 ## Installation
 
 ### NPM
@@ -19,3 +23,23 @@ npm install @availity/element
 ```bash
 yarn add @availity/element
 ```
+
+## Usage
+
+The @availity/element package contains all of the components and hooks for the design system. We recommend using this package when you want to use multiple components.
+
+To use the components in your project, you will need to import them first:
+
+```tsx
+import { Button, ThemeProvider } from '@availity/element';
+```
+
+Make sure all of the components you use are inside the `ThemeProvider` component. We recommend placing it in your root `index.{js|tsx}` file.
+
+```jsx
+import { ThemePovider } from '@availity/element';
+
+const App = () => {
+  return <ThemeProvider>{/* Application code. Most likely a router. */}</ThemeProvider>;
+};
+```

package/dist/index.d.ts

@@ -1 +1,3 @@
+export * from '@availity/mui-alert';
+export * from '@availity/mui-badge';
 export * from '@availity/theme-provider';

package/dist/index.js

@@ -17,4 +17,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("@availity/mui-alert"), module.exports);
+__reExport(src_exports, require("@availity/mui-badge"), module.exports);
 __reExport(src_exports, require("@availity/theme-provider"), module.exports);

package/dist/index.mjs

@@ -1,2 +1,4 @@
 // src/index.ts
+export * from "@availity/mui-alert";
+export * from "@availity/mui-badge";
 export * from "@availity/theme-provider";

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="Element" />
+
+<Markdown>{ReadMe}</Markdown>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/element",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "browser": "./dist/index.js",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -14,7 +14,10 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/theme-provider": "0.1.2"
+    "@availity/mui-alert": "0.1.0",
+    "@availity/mui-badge": "0.1.0",
+    "@availity/theme-provider": "0.1.2",
+    "@mui/material": "^5.11.9"
   },
   "devDependencies": {
     "react": "18.2.0",

package/src/index.ts

@@ -1 +1,3 @@
+export * from '@availity/mui-alert';
+export * from '@availity/mui-badge';
 export * from '@availity/theme-provider';

package/tsconfig.json

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