Skip to content

Commit bcea5de

Browse files
cliedemancliedeman
committed
feat: Added lab package
1 parent a945496 commit bcea5de

24 files changed

+1075
-2
lines changed

‎.github/workflows/formik-material-ui-lab.yaml‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
name: Build formik-material-ui-lab
2+
on: [push]
3+
4+
jobs:
5+
build:
6+
runs-on: ubuntu-latest
7+
8+
strategy:
9+
matrix:
10+
node-version: [12.x]
11+
12+
steps:
13+
- uses: actions/checkout@v1
14+
- name: Use Node.js ${{ matrix.node-version }}
15+
uses: actions/setup-node@v1
16+
with:
17+
node-version: ${{ matrix.node-version }}
18+
- name: build
19+
run: |
20+
yarn install --frozen-lockfile
21+
yarn typecheck
22+
yarn lint
23+
yarn test
24+
yarn build
25+
working-directory: packages/formik-material-ui-lab
26+
env:
27+
CI: true

‎.prettierignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
dist
2+
build
3+
storybook-static

‎docs/docs/api/material-ui-lab.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
id: material-ui-lab
3+
title: Material-UI Lab
4+
---
5+
6+
The following props are always excluded: `name, value, error`, and additional ones where it makes sense
7+
8+
## Autocomplete
9+
10+
#### Example
11+
12+
```jsx
13+
import { Autocomplete } from 'formik-material-ui-lab';
14+
15+
const options = [{ title: 'The Shawshank Redemption', year: 1994 }, ...]
16+
17+
<Field
18+
name="name"
19+
component={Autocomplete}
20+
options={options}
21+
getOptionLabel={(option: Movie) => option.title}
22+
style={{ width: 300 }}
23+
renderInput={(params: AutocompleteRenderInputParams) => (
24+
<TextField
25+
{...params}
26+
error={touched['name'] && !!errors['name']}
27+
helperText={errors['name']}
28+
label="Autocomplete"
29+
variant="outlined"
30+
/>
31+
)}
32+
/>;
33+
```
34+
35+
_Note the manual inclusion of the error_
36+
37+
#### [Material-UI Lab Documentation](https://material-ui.com/api/autocomplete/)
38+
39+
## ToggleButtonGroup
40+
41+
#### Example
42+
43+
```tsx
44+
import { ToggleButtonGroup } from 'formik-material-ui-lab';
45+
import ToggleButton from '@material-ui/lab/ToggleButton';
46+
import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
47+
import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
48+
import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
49+
import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
50+
51+
<Field component={ToggleButtonGroup} name="name" type="checkbox">
52+
<ToggleButton value="left" aria-label="left aligned">
53+
<FormatAlignLeftIcon />
54+
</ToggleButton>
55+
<ToggleButton value="center" aria-label="centered">
56+
<FormatAlignCenterIcon />
57+
</ToggleButton>
58+
<ToggleButton value="right" aria-label="right aligned">
59+
<FormatAlignRightIcon />
60+
</ToggleButton>
61+
<ToggleButton value="justify" aria-label="justified" disabled>
62+
<FormatAlignJustifyIcon />
63+
</ToggleButton>
64+
</Field>;
65+
```
66+
67+
_Note the `type=checkbox` attribute_
68+
69+
#### [Material-UI Lab Documentation](https://material-ui.com/api/toggle-button-group/)

‎docs/docs/guide/getting-started.md‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ title: Getting Started
99
yarn add formik formik-material-ui @material-ui/core
1010
```
1111

12+
### Material-UI Lab (Optional)
13+
14+
```
15+
yarn add formik-material-ui-lab @material-ui/lab
16+
```
17+
1218
### Material-UI Pickers (Optional)
1319

1420
```
@@ -87,6 +93,120 @@ function App() {
8793

8894
Note: that the `Field` wrapper is not used, for more details on why see the [FAQ](guide/faq.md).
8995

96+
## Configuring Components
97+
98+
Several properties are purposefully excluded, please see the [FAQ](guide/faq.md) for details.
99+
100+
```jsx
101+
import { TextField } from 'formik-material-ui';
102+
import InputAdornment from '@material-ui/core/InputAdornment';
103+
import AccountCircle from '@material-ui/icons/AccountCircle';
104+
105+
<TextField
106+
name="customized"
107+
label="Outlined"
108+
variant="outlined"
109+
InputProps={{
110+
startAdornment: (
111+
<InputAdornment position="start">
112+
<AccountCircle />
113+
</InputAdornment>
114+
),
115+
}}
116+
/>;
117+
```
118+
119+
## Quick Start (Lab)
120+
121+
See [Material-UI Lab Info](https://material-ui.com/components/about-the-lab/) for more information
122+
123+
```jsx {4,31,52}
124+
import * as React from 'react';
125+
import { Formik, Form, Field } from 'formik';
126+
import { Button, LinearProgress } from '@material-ui/core';
127+
import { Autocomplete, ToggleButtonGroup } from 'formik-material-ui-lab';
128+
import Box from '@material-ui/core/Box';
129+
import ToggleButton from '@material-ui/lab/ToggleButton';
130+
import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
131+
import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
132+
import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
133+
import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
134+
135+
function App() {
136+
return (
137+
<MuiPickersUtilsProvider utils={DateFnsUtils}>
138+
<Formik
139+
initialValues={{
140+
toggle: null,
141+
autocomplete: null,
142+
}}
143+
onSubmit={(values, { setSubmitting }) => {
144+
setTimeout(() => {
145+
setSubmitting(false);
146+
alert(JSON.stringify(values, null, 2));
147+
}, 500);
148+
}}
149+
>
150+
{({ submitForm, isSubmitting, errors }) => (
151+
<Form>
152+
<Box margin={1}>
153+
<Field
154+
component={ToggleButtonGroup}
155+
name="toggle"
156+
type="checkbox"
157+
>
158+
<ToggleButton value="left" aria-label="left aligned">
159+
<FormatAlignLeftIcon />
160+
</ToggleButton>
161+
<ToggleButton value="center" aria-label="centered">
162+
<FormatAlignCenterIcon />
163+
</ToggleButton>
164+
<ToggleButton value="right" aria-label="right aligned">
165+
<FormatAlignRightIcon />
166+
</ToggleButton>
167+
<ToggleButton value="justify" aria-label="justified" disabled>
168+
<FormatAlignJustifyIcon />
169+
</ToggleButton>
170+
</Field>
171+
</Box>
172+
<Box margin={1}>
173+
<Field
174+
name="autocomplete"
175+
component={Autocomplete}
176+
options={top100Films}
177+
getOptionLabel={(option: Movie) => option.title}
178+
style={{ width: 300 }}
179+
renderInput={(params: AutocompleteRenderInputParams) => (
180+
<TextField
181+
{...params}
182+
error={touched['autocomplete'] && !!errors['autocomplete']}
183+
helperText={
184+
touched['autocomplete'] && errors['autocomplete']
185+
}
186+
label="Autocomplete"
187+
variant="outlined"
188+
/>
189+
)}
190+
/>
191+
</Box>
192+
<Box margin={1}>
193+
<Button
194+
variant="contained"
195+
color="primary"
196+
disabled={isSubmitting}
197+
onClick={submitForm}
198+
>
199+
Submit
200+
</Button>
201+
</Box>
202+
</Form>
203+
)}
204+
</Formik>
205+
</MuiPickersUtilsProvider>
206+
);
207+
}
208+
```
209+
90210
## Quick Start (Picker)
91211

92212
See [Material-UI Pickers getting started](https://material-ui-pickers.dev/getting-started/installation) for more information

‎docs/sidebars.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@ module.exports = {
1313
'guide/migrating',
1414
'guide/faq',
1515
],
16-
API: ['api/material-ui', 'api/material-ui-pickers'],
16+
API: ['api/material-ui', 'api/material-ui-pickers', 'api/material-ui-lab'],
1717
},
1818
};

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@
1818
"@date-io/date-fns": "^1.3.13",
1919
"@jest/globals": "^26.1.0",
2020
"@material-ui/core": "^4.8.3",
21+
"@material-ui/icons": "^4.9.1",
22+
"@material-ui/lab": "^4.0.0-alpha.56",
2123
"@storybook/addon-actions": "^5.0.11",
2224
"@storybook/addon-links": "^5.0.11",
2325
"@storybook/addons": "^5.0.11",

‎packages/formik-material-ui-lab/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Formik Material-UI
2+
3+
![](https://github.com/stackworx/formik-material-ui/workflows/Build%20formik-material-ui/badge.svg)
4+
![](https://github.com/stackworx/formik-material-ui/workflows/Build%20formik-material-ui-pickers/badge.svg)[![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)
5+
6+
Bindings for using [Formik](https://github.com/jaredpalmer/formik) with [Material-UI](https://material-ui.com/).
7+
8+
- [Documentation](https://stackworx.github.io/formik-material-ui)
9+
- [Code Sandbox](https://codesandbox.io/s/915qlr56rp)
10+
11+
This project requires Formik>= 2.0.0. For Formik one please use formik-material-ui@1.0.x

‎packages/formik-material-ui-lab/package.json‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{
2+
"name": "formik-material-ui-lab",
3+
"version": "0.0.0",
4+
"license": "MIT",
5+
"typings": "dist/main.d.ts",
6+
"peerDependencies": {
7+
"@material-ui/core": ">=4.0.0",
8+
"@material-ui/lab": "^4.0.0-alpha.56",
9+
"formik": ">=2.0.0",
10+
"react": "^16.8.0",
11+
"tiny-warning": ">=1.0.2"
12+
},
13+
"keywords": [
14+
"react",
15+
"formik",
16+
"material-ui",
17+
"form"
18+
],
19+
"prettier": {
20+
"singleQuote": true,
21+
"trailingComma": "es5"
22+
},
23+
"repository": {
24+
"type": "git",
25+
"url": "https://github.com/stackworx/formik-material-ui"
26+
},
27+
"jest": {
28+
"globals": {
29+
"__DEV__": "boolean"
30+
},
31+
"testURL": "http://localhost/",
32+
"transform": {
33+
"^.+\\.tsx?$": "ts-jest"
34+
},
35+
"roots": [
36+
"src"
37+
],
38+
"testRegex": "(/src/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
39+
"moduleFileExtensions": [
40+
"ts",
41+
"tsx",
42+
"js",
43+
"jsx",
44+
"json",
45+
"node"
46+
]
47+
},
48+
"files": [
49+
"dist"
50+
],
51+
"main": "dist/index.js",
52+
"module": "dist/formik-material-ui.es6.js",
53+
"scripts": {
54+
"typecheck": "tsc",
55+
"build": "cross-env NODE_ENV=production tsc --noEmit --project ./tsconfig.package.json",
56+
"package": "rimraf build dist && cross-env NODE_ENV=production tsc -p ./tsconfig.package.json && rollup -c && rimraf .rpt2_cache dist/.rpt2_cache",
57+
"test": "jest",
58+
"test:updateSnapshot": "jest --updateSnapshot",
59+
"lint": "eslint \"./{src,stories}/**/*.{tsx,ts,js}\"",
60+
"lint:fix": "eslint --fix \"./{src,stories}/**/*.{tsx,ts,js}\"",
61+
"prepublishOnly": "yarn test && yarn build && yarn package"
62+
},
63+
"gitHead": "409cd27bdca327979c0dd7e20edd3ab773620396"
64+
}

‎packages/formik-material-ui-lab/rollup.config.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import typescript from 'rollup-plugin-typescript2';
2+
import pkg from './package.json';
3+
4+
const external = [
5+
'react',
6+
'react-native',
7+
'formik',
8+
'@material-ui/core/TextField',
9+
'@material-ui/lab/ToggleButtonGroup',
10+
'@material-ui/lab/Autocomplete',
11+
];
12+
13+
export default [
14+
{
15+
input: 'src/main.ts',
16+
plugins: [
17+
typescript({
18+
// cacheRoot: `${os.tmpdir}/.rpt2_cache`,
19+
tsconfig: 'tsconfig.package.json',
20+
}),
21+
],
22+
external: external.concat(Object.keys(pkg.dependencies || [])),
23+
output: [
24+
{ file: pkg.main, format: 'cjs', sourcemap: true },
25+
{ file: pkg.module, format: 'es', sourcemap: true },
26+
],
27+
},
28+
];

0 commit comments

Comments
 (0)