Skip to content

Commit

Permalink
Merge branch 'main' into snyk-upgrade-cb9437bc891d4d5025c50fa36dc0b64f
Browse files Browse the repository at this point in the history
  • Loading branch information
@shaes-farm
shaes-farm committed Aug 12, 2023
2 parents 753a461 + 852f10d commit e1c9ca2
Show file tree
Hide file tree
Showing 22 changed files with 273 additions and 206 deletions.
38 changes: 33 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,45 @@
# mui-mas

The SHAES Farm Material UI-based component library
A Material UI-based component library for SHAES Farm's applications.

[![build status](https://github.com/shaes-farm/mui-mas/actions/workflows/build-n-test.yml/badge.svg)](https://github.com/shaes-farm/mui-mas/actions/workflows/build-n-test.yml)
[![coverage status](https://coveralls.io/repos/github/shaes-farm/mui-mas/badge.svg?branch=main)](https://coveralls.io/github/shaes-farm/mui-mas?branch=main)
[![vulnerabilities](https://snyk.io/test/github/shaes-farm/mui-mas/badge.svg)](https://snyk.io/test/github/shaes-farm/mui-mas)
[![npm version](https://badge.fury.io/js/@shaes-farm%2Fmui-mas.svg)](https://badge.fury.io/js/@shaes-farm%2Fmui-mas)

## Motivation

In Spanish "mui mas" means "much more", and that is what we provide in this component library; much more than your basic set of Material UI components. We have spent years developing enterprise applications, and we've used that experience to develop an opinionated set of MUI components that allow us to quickly construct functionality common to most enterprise applications. With <code>mui-mas</code> we can scaffold an app in minutes, instead of hours, or days. Get professional looking enterprise applications quickly, customized to your workflows.
[![https://nodei.co/npm/@shaes-farm/mui-mas.png?downloads=true&downloadRank=true&stars=true](https://nodei.co/npm/@shaes-farm/mui-mas.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/@shaes-farm/mui-mas)

## Getting Started

This package is intended for use by SHAES Farm's applications to ease the integration of our platform requirements. We currently use the following technology stack in our application suite:

- [React](https://react.dev/)
- [Next.js 13+](https://nextjs.org/)
- [Supabase](https://supabase.com/)
- [Material UI](https://mui.com/material-ui/)

<pre>
$ npm install @shaes-farm/mui-mas
$ pnpm create next-app myapp \
--app \
--eslint \
--src-dir \
--typescript \
--use-pnpm
...
$ cd myapp
$ pnpm add @shaes-farm/mui-mas
</pre>

## Motivation

In Spanish "mui mas" means "much more", and that's what we've built with this component library; much more than the basic set of Material UI components.

We've developed an opinionated set of React components based on MUI that allow us to construct functionality needed by our applications, integrated with MUI, Supabase, and Next. With <code>mui-mas</code> we can scaffold an app in minutes, instead of hours, and get functional applications more quickly, customized to our workflows.

## Early Release

We are releasing <code>mui mas</code> as an open-source component library because others may find it useful to quickly build high-quality applications. However, these components are customized for our design system and our back-end systems, and they may not be generally applicable for your needs. We've decided to release the library in this state as an Alpha release to gather feedback and to see if others find a library such as this useful.

## Help Us Improve

You can help us make this library better by submitting pull requests with suggestions. Show us how you would make the library more modular and better able to support a wider choice of use cases. Ideas, suggestions, and critical reviews are all welcomed as we continue to improve this package for our own needs.
6 changes: 0 additions & 6 deletions index.d.ts
View file

This file was deleted.

45 changes: 27 additions & 18 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

17 changes: 11 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,17 @@
"url": "https://github.com/shaes-farm/mui-mas/issues"
},
"homepage": "https://github.com/shaes-farm/mui-mas#readme",
"peerDependencies": {
"@mui/material": "^5.0.0",
"next": "^13.0.0",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
"devDependencies": {
"@babel/preset-env": "7.22.2",
"@babel/preset-react": "7.22.3",
"@babel/preset-typescript": "7.21.5",
"@faker-js/faker": "^8.0.2",
"@storybook/addon-essentials": "7.2.0",
"@storybook/addon-interactions": "7.2.0",
"@storybook/addon-links": "7.2.0",
Expand All @@ -54,14 +61,12 @@
"@storybook/testing-library": "0.2.0",
"@testing-library/react": "14.0.0",
"@testing-library/user-event": "14.4.3",
"@types/chance": "1.1.3",
"@types/jest": "29.5.1",
"@types/react": "18.0.25",
"@types/react-dom": "18.0.8",
"@typescript-eslint/eslint-plugin": "5.61.0",
"@typescript-eslint/parser": "5.61.0",
"babel-jest": "29.5.0",
"chance": "1.1.11",
"eslint": "8.44.0",
"eslint-config-standard-with-typescript": "36.0.0",
"eslint-plugin-import": "2.27.5",
Expand All @@ -85,12 +90,12 @@
"@fontsource/roboto": "5.0.5",
"@mui/icons-material": "5.10.9",
"@mui/lab": "5.0.0-alpha.135",
"@mui/material": "5.10.12",
"@mui/material": "^5.0.0",
"@supabase/auth-helpers-react": "0.4.0",
"@supabase/supabase-js": "2.26.0",
"clsx": "1.2.1",
"next": "13.2.4",
"react": "18.2.0",
"react-dom": "18.2.0"
"next": "^13.0.0",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
}
}
111 changes: 63 additions & 48 deletions src/components/App/__tests__/AppShell.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import type {NavRouter, NavRoutes} from '../../Nav';

import type {AppConfig} from '../_types';
import AppShell from '../AppShell';
import { faker } from '@faker-js/faker';

const user = userEvent.setup();

Expand All @@ -27,72 +28,72 @@ describe('AppShell component', () => {

beforeEach(() => {
profile = {
id: chance.guid(),
firstName: chance.first(),
lastName: chance.last(),
bio: chance.paragraph(),
avatarUrl: 'https://placehold.co/46',
website: chance.url(),
id: faker.string.uuid(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
bio: faker.person.bio(),
avatarUrl: faker.image.url({width: 48, height: 48}),
website: faker.internet.url(),
loading: false,
};

setProfile = jest.fn();

toolbar = {
primary: [{
slug: chance.string(),
slug: faker.lorem.slug(),
icon: <React.Fragment />,
label: chance.string(),
hotkey: chance.character(),
label: faker.lorem.words(),
hotkey: faker.string.alpha(1),
page: <React.Fragment />,
},{
slug: chance.string(),
slug: faker.lorem.slug(),
icon: <React.Fragment />,
label: chance.string(),
label: faker.lorem.words(),
page: <React.Fragment />,
}],
secondary: [{
slug: chance.string(),
slug: faker.lorem.slug(),
icon: <React.Fragment />,
label: chance.string(),
hotkey: chance.character(),
label: faker.lorem.words(),
hotkey: faker.string.alpha(1),
page: <React.Fragment />,
},{
slug: chance.string(),
slug: faker.lorem.slug(),
icon: <React.Fragment />,
label: chance.string(),
label: faker.lorem.words(),
page: <React.Fragment />,
}],
tertiary: [{
slug: chance.string(),
slug: faker.lorem.slug(),
icon: <React.Fragment />,
label: chance.string(),
hotkey: chance.character(),
label: faker.lorem.words(),
hotkey: faker.string.alpha(1),
page: <React.Fragment />,
},{
slug: chance.string(),
slug: faker.lorem.slug(),
icon: <React.Fragment />,
label: chance.string(),
label: faker.lorem.words(),
page: <React.Fragment />,
}],
};

routes = {
primary: [{
slug: chance.string(),
slug: faker.lorem.slug(),
icon: <React.Fragment />,
label: chance.string(),
hotkey: chance.character(),
label: faker.lorem.words(),
hotkey: faker.string.alpha(1),
page: <React.Fragment />,
},{
slug: 'div',
slug: ':divider:',
icon: <React.Fragment />,
label: chance.string(),
label: faker.lorem.words(),
page: <React.Fragment />,
},{
slug: chance.string(),
slug: faker.lorem.slug(),
icon: <React.Fragment />,
label: chance.string(),
label: faker.lorem.words(),
page: <React.Fragment />,
}]
};
Expand All @@ -101,23 +102,22 @@ describe('AppShell component', () => {

config = {
app: {
title: chance.string(),
description: chance.paragraph(),
icon: 'https://placehold.co/64',
title: faker.lorem.words(),
description: faker.lorem.sentence(),
icon: faker.image.url({width: 48, height:48}),
logo: {
main: 'https://placehold.co/46',
contrast: 'https://placehold.co/46',
main: faker.image.url({width: 48, height:48}),
},
copyright: {
holder: chance.name(),
year: Number(chance.year()),
url: chance.url(),
holder: faker.person.fullName(),
year: Number(faker.date.past({years: 5})),
url: faker.internet.url(),
},
pages: {
home: chance.url(),
signin: chance.url(),
signup: chance.url(),
recovery: chance.url(),
home: '/',
signin: '/signin',
signup: '/signup',
recovery: '/recover',
},
},
};
Expand Down Expand Up @@ -234,14 +234,7 @@ describe('AppShell component', () => {
},
});

delete config.app.logo.contrast;

toolbar.tertiary = [{
slug: 'search-input',
icon: <React.Fragment />,
label: chance.string(),
page: <React.Fragment />,
}];
config.app.logo.contrast = faker.image.url({width: 48, height:48});

const appShell = render(
<ThemeProvider theme={theme}>
Expand All @@ -260,6 +253,28 @@ describe('AppShell component', () => {
expect(appShell).toBeDefined();
});

it('should render AppShell with a search input on the AppBar', () => {
toolbar.tertiary = [{
slug: 'search-input',
icon: <React.Fragment />,
label: 'Search',
page: <React.Fragment />,
}];

const appShell = render(
<ProfileProvider profile={profile} setProfile={setProfile}>
<AppShell
toolbar={toolbar}
routes={routes}
router={router}
config={config}
/>
</ProfileProvider>
);

expect(appShell).toBeDefined();
});

it('should render AppShell without a set of secondary and tertiary toolbar routes', () => {
delete toolbar.secondary;
delete toolbar.tertiary;
Expand Down
Loading

0 comments on commit e1c9ca2

Please sign in to comment.