Merge pull request #7 from gtibrett/merge/0.6.0

Release 0.6.0

.eslintrc

@@ -0,0 +1,12 @@
+{
+	"root":    true,
+	"parser":  "@typescript-eslint/parser",
+	"plugins": [
+		"@typescript-eslint"
+	],
+	"extends": [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/eslint-recommended",
+		"plugin:@typescript-eslint/recommended"
+	]
+}

.github/workflows/publish-storybook.yaml

@@ -0,0 +1,29 @@
+name: Publish Storybook
+
+on:
+  push:
+    branches:
+    - 'main'
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+
+    - uses: actions/setup-node@v3
+      with:
+        node-version: '20.x'
+
+    - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
+      with:
+        install_command: yarn install
+        build_command: yarn build-storybook
+        path: storybook-static
+        checkout: false
+        caching: true

.gitignore

@@ -1,9 +1,20 @@
-/node_modules/
-/data/
-/build/
-/.idea/
+# Config
 /.env*
-/coverage/
-/dist/
+
+# Yarn
 yarn-error.log
-/src/coverage
+/node_modules/
+
+# Output
+/dist/
+
+# Test
+/coverage/
+/src/coverage
+
+# IDE
+/.idea/
+
+# Storybook
+*storybook.log
+/storybook-static/

.storybook/main.ts

@@ -0,0 +1,49 @@
+import {deepOrange, pink} from '@mui/material/colors';
+import type {StorybookConfig} from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+	stories:     ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	addons:      [
+		'@storybook/addon-essentials',
+		'@storybook/addon-webpack5-compiler-swc',
+		'@storybook/addon-themes'
+	],
+	framework:   {
+		name:    '@storybook/react-webpack5',
+		options: {}
+	},
+	swc:         () => ({
+		jsc: {
+			transform: {
+				react: {
+					runtime: 'automatic'
+				}
+			}
+		}
+	}),
+	docs:        {
+		autodocs: 'tag'
+	},
+	managerHead: (head) => `
+        ${head}
+        <style>
+            div[data-item-id$="--docs-only"] { display: none; }
+            .sidebar-item > a svg[type=story] {
+                color: ${deepOrange[700]};
+            }
+            .sidebar-item > a svg[type=document] {
+                color: ${pink[700]};
+            }
+            .sidebar-item[data-selected=true] > a svg {
+                color: inherit !important;
+            }
+            .docblock-argstable button {
+                color: #FFF;
+            }
+            .sb-bar button[title="Theme"] {
+                text-transform: capitalize;
+            }
+        </style>
+    `
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,7 @@
+import {addons} from '@storybook/manager-api';
+// @ts-ignore
+import {default as theme} from './theme';
+
+addons.setConfig({
+	theme
+});

.storybook/material-font.css

@@ -0,0 +1,24 @@
+.material-icons {
+	font-family: 'Material Icons';
+	font-weight: normal;
+	font-style: normal;
+	font-size: 24px;  /* Preferred icon size */
+	display: inline-block;
+	line-height: 1;
+	text-transform: none;
+	letter-spacing: normal;
+	word-wrap: normal;
+	white-space: nowrap;
+	direction: ltr;
+
+	/* Support for all WebKit browsers. */
+	-webkit-font-smoothing: antialiased;
+	/* Support for Safari and Chrome. */
+	text-rendering: optimizeLegibility;
+
+	/* Support for Firefox. */
+	-moz-osx-font-smoothing: grayscale;
+
+	/* Support for IE. */
+	font-feature-settings: 'liga';
+}

.storybook/preview.tsx

@@ -0,0 +1,40 @@
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import '@fontsource/material-icons';
+import './material-font.css';
+
+import {CssBaseline, ThemeProvider} from '@mui/material';
+import {withThemeFromJSXProvider} from '@storybook/addon-themes';
+import type {Preview} from '@storybook/react';
+import {darkTheme, lightTheme} from '../src/stories/themes';
+
+const preview: Preview = {
+	parameters: {
+		controls:    {
+			matchers: {
+				color: /(background|color)$/i,
+				date:  /Date$/i
+			}
+		},
+		docs:        {
+			source: {type: 'dynamic', language: 'tsx'}
+		},
+		backgrounds: {disable: true}
+	},
+
+	decorators: [
+		withThemeFromJSXProvider({
+			GlobalStyles: CssBaseline,
+			Provider:     ThemeProvider,
+			themes:       {
+				light: lightTheme,
+				dark:  darkTheme
+			},
+			defaultTheme: 'light'
+		})
+	]
+};
+
+export default preview;

.storybook/theme.ts

@@ -0,0 +1,48 @@
+import {blue, blueGrey, deepOrange} from '@mui/material/colors';
+import {create} from '@storybook/theming/create';
+
+const logo = require('./@gtibrett.png');
+
+const theme = create({
+	base:        'light',
+	brandTitle:  '@gtibrett/mui-additions',
+	brandUrl:    'https://github.com/gtibrett/mui-additions',
+	brandImage:  logo,
+	brandTarget: '_self',
+
+	// Typography
+	fontBase: '"Roboto", sans-serif',
+	fontCode: 'monospace',
+
+	colorPrimary:      blueGrey[800],
+	colorSecondary:    deepOrange[700],
+
+	appBg:             blueGrey[100],
+	appContentBg:      '#FFF',
+	appPreviewBg:      '#FFF',
+	// appBorderColor:    blueGrey[700],
+	appBorderRadius:   4,
+
+	textColor:         blueGrey[900],
+	textInverseColor:  blueGrey[900],
+	textMutedColor:    blueGrey[700],
+
+	// toolbars
+	barTextColor:      blueGrey[900],
+	barHoverColor:     blue[500],
+	barSelectedColor:  blue[900],
+	barBg:             blueGrey[50],
+
+	// Button
+	buttonBg:          deepOrange[700],
+	buttonBorder:      deepOrange[700],
+	booleanBg:         blueGrey[100],
+	booleanSelectedBg: deepOrange[700],
+
+	// inputBg:           blueGrey[50],
+	// inputBorder:       blueGrey[200],
+	// inputTextColor:    blueGrey[900],
+	// inputBorderRadius: 4
+});
+
+export default theme;

README.md

@@ -1,123 +1,26 @@
 # MUI Additions
 
-## Components
+## Installation
 
-----
+```shell
+# npm
+npm install @gtibrett/mui-additions
 
-### Breakpoints
-
-Breakpoints can be added inside your `ThemeProvider` to provide a visualization of breakpoints overlayed on your app, making responsive design much easier. 
-
-> **Note:** This component should only be used in development.
-
-### Dialog
-
-An extension of MUI's Dialog with a built-in `closeIcon` prop for ensuring consistent visual close functionality.
-
-### Link
-
-A mashup of MUI's Link and React Router's link components. Renders links with MUI styling, but with React Router functionality via the `to` prop.
-
-### SkipNav
-
-A visually hidden skip navigation link for the start of your page. Requires a focusable element to skip to, configurable via `selector` prop
-
-### UkraineButton
-
-I support Ukraine and its people. I sell t-shirts to raise money for humanitarian effort. I advertise those facts on my sites.
-
-## Hooks
-
-----
-
-### useComponentDimensionsWithRef
-
-Monitoring a components rendered dimensions and reacting to them is difficult, but often useful. (i.e. dynamically adjusting height to match width for square elements)
-
-This hook returns a `ref`, `dimensions`, and the referenced `node` to facilitate tracking an element's dimensions
-
-```typescript
-import {useComponentDimensionsWithRef} from '@gtibrett/mui-additions';
-
-export default function SquareContainer() {
-    const {ref, dimensions} = useComponentDimensionsWithRef();
-
-    return (
-        <div ref={ref} style={{height: dimensions.width}}>
-            I am in a square
-        </div>
-    );
-}
-```
-
-### usePageTitle
-
-Simple (quasi-)hook for dynamically setting the `<title>` tag when page content changes. 
-
-Site name can be appended at end of title and is configurable via env var: 
-
-```env
-REACT_APP_MUI_ADDITIONS_SITE_TITLE=My Site Name
+# yarn
+yarn add @gtibrett/mui-additions
 ```
 
-## Accessibility Testing Utils
-
-----
-
-This package provides helper functions to facilitate testing components, pages, dialogs, etc for accessibility. You can pass either content or a container factory along with multiple themes.
-
-[axe-core](https://github.com/dequelabs/axe-core) testing engine is used.
-
-### Simple Content Example
-```typescript
-import useMyTheme from './useMyTheme';
-import MyComponent from './MyComponent';
-
-describe('MyComponent', () => {
-    const {result: lightTheme} = renderHook(() => useMyTheme('light'));
-    const {result: darkTheme}  = renderHook(() => useMyTheme('dark'));
-
-    // Do not nest inside a test() call.
-    testForAccessibility(<MyComponent/>, [lightTheme, darkTheme]);
-});
-```
-
-### Container Factory Example
-```typescript
-import useMyTheme from './useMyTheme';
-import MyComponentWithButton from './MyComponentWithButton';
-
-describe('MyComponent', () => {
-    const {result: lightTheme} = renderHook(() => useMyTheme('light'));
-    const {result: darkTheme}  = renderHook(() => useMyTheme('dark'));
-
-    // Generate a testable container and manipulate state, 
-    // like clicking a button
-    const containerFactory = async (options: RenderOptions) => {
-            const {container} = render(
-                <MyComponentWithButton/>,
-                options
-            );
-
-            const buttonEl = screen.getByRole('button');
-            await act(() => {
-                buttonEl.click();
-            });
-
-            return container;
-        }
-
-    // Do not nest inside a test() call.
-    testContainerForAccessibility(containerFactory, [lightTheme, darkTheme]);
-});
-```
+## Documentation
 
-### Helpers
+> [🖹 &nbsp;gtibrett.github.io/mui-additions](https://gtibrett.github.io/mui-additions)
 
-#### resizeScreenSize
+## Sub-Packages
 
-Simple util for setting explicit screen width
+### @gtibrett/mui-additions/jest
+Provides useful add-ons for testing MUI applications with jest.
 
-#### setDarkMode
+### @gtibrett/mui-additions/next
+Provides an next.js router integration for MUI Links
 
-Simple util for setting color scheme to `light` or `dark`
+### @gtibrett/mui-additions/react-router
+Provides a `react-router` integration for MUI Links and Google Analytics