@availity/theme-provider 0.0.1-alpha.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.0.1-alpha.0 (2023-02-20)
+
+
+### Features
+
+* **theme-provider:** create component ([c532d6e](https://github.com/Availity/element/commit/c532d6e21c29f428c05a3b2159c18d95555dbbbb))
+
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).

package/README.md

@@ -0,0 +1,21 @@
+# @availity/theme-provider
+
+> Theme Provider using MUI and @availity/design-tokens
+
+[![Version](https://img.shields.io/npm/v/@availity/theme-provider.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/theme-provider)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/theme-provider.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/theme-provider)
+[![Dependecy Status](https://img.shields.io/librariesio/release/npm/@availity/theme-provider?style=for-the-badge)](https://github.com/Availity/element/blob/master/packages/theme-provider/package.json)
+
+## Installation
+
+### NPM
+
+```bash
+npm install @availity/theme-provider
+```
+
+### Yarn
+
+```bash
+yarn add @availity/theme-provider
+```

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { Theme } from '@mui/material/styles';
+
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    theme?: Theme;
+}
+declare function ThemeProvider({ children, theme }: ThemeProviderProps): JSX.Element;
+
+export { ThemeProvider, ThemeProviderProps };

package/dist/index.js

@@ -0,0 +1,56 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ThemeProvider: () => ThemeProvider
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/lib/theme-provider.tsx
+var import_theme = require("@availity/theme");
+var import_styles = require("@mui/material/styles");
+var import_CssBaseline = __toESM(require("@mui/material/CssBaseline"));
+var import_AdapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
+var import_x_date_pickers = require("@mui/x-date-pickers");
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultTheme = (0, import_styles.createTheme)(import_theme.lightTheme);
+function ThemeProvider({ children, theme = defaultTheme }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_x_date_pickers.LocalizationProvider, {
+    dateAdapter: import_AdapterDateFns.AdapterDateFns,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.ThemeProvider, {
+      theme,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CssBaseline.default, {}),
+        children
+      ]
+    })
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeProvider
+});

package/dist/index.mjs

@@ -0,0 +1,23 @@
+// src/lib/theme-provider.tsx
+import { lightTheme } from "@availity/theme";
+import { ThemeProvider as MuiThemeProvider, createTheme } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultTheme = createTheme(lightTheme);
+function ThemeProvider({ children, theme = defaultTheme }) {
+  return /* @__PURE__ */ jsx(LocalizationProvider, {
+    dateAdapter: AdapterDateFns,
+    children: /* @__PURE__ */ jsxs(MuiThemeProvider, {
+      theme,
+      children: [
+        /* @__PURE__ */ jsx(CssBaseline, {}),
+        children
+      ]
+    })
+  });
+}
+export {
+  ThemeProvider
+};

package/jest.config.js

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

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@availity/theme-provider",
+  "version": "0.0.1-alpha.0",
+  "description": "Theme provider for the Element design system",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "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"
+  },
+  "dependencies": {
+    "@availity/theme": "0.0.1-alpha.0",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.11.6",
+    "@mui/x-date-pickers": "^5.0.15",
+    "date-fns": "^2.29.3"
+  },
+  "devDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tsup": "^5.12.7",
+    "typescript": "~4.8.2"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  }
+}

package/project.json

@@ -0,0 +1,41 @@
+{
+  "name": "theme-provider",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/theme-provider/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "eslintConfig": ".eslintrc.json",
+        "lintFilePatterns": ["packages/theme-provider/**/*.{js,ts}"],
+        "silent": false,
+        "fix": false,
+        "cache": true,
+        "cacheLocation": "./node_modules/.cache/theme-provider/.eslintcache",
+        "maxWarnings": -1,
+        "quiet": false,
+        "noEslintrc": false,
+        "hasTypeAwareRules": true,
+        "cacheStrategy": "metadata"
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/theme-provider"],
+      "options": {
+        "jestConfig": "packages/theme-provider/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/theme-provider';

package/src/lib/theme-provider.test.tsx

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

package/src/lib/theme-provider.tsx

@@ -0,0 +1,29 @@
+import { lightTheme } from '@availity/theme';
+import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles';
+import type { Theme } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+
+// TODO: how do we add icon support?
+// import '../styles/material-icons.css'
+
+const defaultTheme = createTheme(lightTheme);
+
+export interface ThemeProviderProps {
+  children: React.ReactNode;
+  theme?: Theme;
+}
+
+export function ThemeProvider({ children, theme = defaultTheme }: ThemeProviderProps) {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <MuiThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </MuiThemeProvider>
+    </LocalizationProvider>
+  );
+}
+
+export default ThemeProvider;

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.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"]
+}