@toptal/picasso 42.7.0 → 42.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -23,9 +23,9 @@ const useStyles = makeStyles(styles, {
|
|
|
23
23
|
name: 'PicassoPasswordInput',
|
|
24
24
|
});
|
|
25
25
|
export const PasswordInput = forwardRef(function PasswordInput(props, ref) {
|
|
26
|
-
const { value, onChange, disabled, error, status, width, style, className, testIds, enableReset, onResetClick, highlight } = props, rest = __rest(props
|
|
26
|
+
const { value, onChange, disabled, error, status, size, width, style, className, testIds, enableReset, onResetClick, highlight } = props, rest = __rest(props
|
|
27
27
|
// TODO: [FX-4715]
|
|
28
|
-
, ["value", "onChange", "disabled", "error", "status", "width", "style", "className", "testIds", "enableReset", "onResetClick", "highlight"]);
|
|
28
|
+
, ["value", "onChange", "disabled", "error", "status", "size", "width", "style", "className", "testIds", "enableReset", "onResetClick", "highlight"]);
|
|
29
29
|
// TODO: [FX-4715]
|
|
30
30
|
usePropDeprecationWarning({
|
|
31
31
|
props,
|
|
@@ -43,7 +43,7 @@ export const PasswordInput = forwardRef(function PasswordInput(props, ref) {
|
|
|
43
43
|
return (React.createElement(OutlinedInput, { style: style, className: cx(classes.root, className), classes: {
|
|
44
44
|
root: cx({ [classes.highlightAutofill]: highlight === 'autofill' }),
|
|
45
45
|
input: classes.input,
|
|
46
|
-
}, inputProps: Object.assign(Object.assign({}, rest), { 'data-testid': testIds === null || testIds === void 0 ? void 0 : testIds.input }), width: width, status: error ? 'error' : status, inputRef: ref, type: showPassword ? 'text' : 'password', value: value, disabled: disabled, onChange: onChange, endAdornment: endAdornment, testIds: testIds, onResetClick: onResetClick, enableReset: enableReset }));
|
|
46
|
+
}, inputProps: Object.assign(Object.assign({}, rest), { 'data-testid': testIds === null || testIds === void 0 ? void 0 : testIds.input }), size: size, width: width, status: error ? 'error' : status, inputRef: ref, type: showPassword ? 'text' : 'password', value: value, disabled: disabled, onChange: onChange, endAdornment: endAdornment, testIds: testIds, onResetClick: onResetClick, enableReset: enableReset }));
|
|
47
47
|
});
|
|
48
48
|
PasswordInput.defaultProps = {
|
|
49
49
|
onChange: () => { },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasswordInput.js","sourceRoot":"","sources":["../../src/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAC5C,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAC9C,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,QAAQ,MAAM,eAAe,CAAA;AACpC,OAAO,cAAc,MAAM,qBAAqB,CAAA;AAChD,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAA;AA2B7E,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,sBAAsB;CAC7B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,SAAS,aAAa,CAAC,KAAK,EAAE,GAAG;IAC/B,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,MAAM,EACN,KAAK,EACL,KAAK,EACL,SAAS,EACT,OAAO,EACP,WAAW,EACX,YAAY,EACZ,SAAS,KAEP,KAAK,EADJ,IAAI,UACL,KAAK;IAET,kBAAkB;
|
|
1
|
+
{"version":3,"file":"PasswordInput.js","sourceRoot":"","sources":["../../src/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":"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"}
|
package/README.md
CHANGED
|
@@ -9,9 +9,83 @@ Picasso is Toptal's component library, based on Toptal's design system - BASE. U
|
|
|
9
9
|
## Installation instructions
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
|
-
yarn add @toptal/picasso @toptal/picasso-provider
|
|
12
|
+
yarn add @toptal/picasso @toptal/picasso-provider @toptal/picasso-tailwind
|
|
13
|
+
tailwindcss postcss autoprefixer
|
|
13
14
|
```
|
|
14
15
|
|
|
16
|
+
## Create `tailwind.config.js` in the root of the project
|
|
17
|
+
|
|
18
|
+
```js
|
|
19
|
+
const path = require('path')
|
|
20
|
+
|
|
21
|
+
const projectRoot = __dirname
|
|
22
|
+
|
|
23
|
+
/** @type {import('tailwindcss').Config} */
|
|
24
|
+
module.exports = {
|
|
25
|
+
content: [
|
|
26
|
+
path.join(projectRoot, 'node_modules/@toptal/picasso/**/*.js'),
|
|
27
|
+
path.join(projectRoot, 'node_modules/@toptal/picasso-*/**/*.js'),
|
|
28
|
+
// adjust for your project infrastructure
|
|
29
|
+
path.join(projectRoot, '{hosts,libs,namespaces}/**/src/**/*.{ts,tsx}'),
|
|
30
|
+
],
|
|
31
|
+
presets: [require('@toptal/picasso-tailwind')],
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Add Tailwind CSS directives to your CSS source files
|
|
36
|
+
|
|
37
|
+
```css
|
|
38
|
+
/* index.css */
|
|
39
|
+
@tailwind components;
|
|
40
|
+
@tailwind utilities;
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Setup webpack to use PostCSS loader with tailwindcss plugin
|
|
44
|
+
|
|
45
|
+
> If you are reusing webpack configuration from `@toptal/davinci-engine` you can skip this step as it is setup automatically if `tailwind.config.js` is in the repository.
|
|
46
|
+
>
|
|
47
|
+
> Make sure to check all webpack configuration, Application (start/build), Storybook, Cypress
|
|
48
|
+
|
|
49
|
+
```js
|
|
50
|
+
// webpack.config.js
|
|
51
|
+
|
|
52
|
+
...
|
|
53
|
+
{
|
|
54
|
+
test: /\.css$/i,
|
|
55
|
+
use: [
|
|
56
|
+
'style-loader',
|
|
57
|
+
'css-loader',
|
|
58
|
+
{
|
|
59
|
+
loader: 'postcss-loader',
|
|
60
|
+
options: {
|
|
61
|
+
postcssOptions: {
|
|
62
|
+
config: false,
|
|
63
|
+
plugins: {
|
|
64
|
+
tailwindcss: {
|
|
65
|
+
config: require.resolve(
|
|
66
|
+
// update with actual path to tailwind config
|
|
67
|
+
'./tailwind.config.js'
|
|
68
|
+
),
|
|
69
|
+
},
|
|
70
|
+
autoprefixer: {},
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
},
|
|
74
|
+
},
|
|
75
|
+
],
|
|
76
|
+
},
|
|
77
|
+
|
|
78
|
+
...
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
When using **Vite** or **NextJS**, adding tailwind config with correct `content` should be sufficient in most cases, depending on your configuration.
|
|
82
|
+
|
|
83
|
+
For more info, you can check out the official Tailwind docs:
|
|
84
|
+
|
|
85
|
+
[Install Tailwind CSS with Vite](https://tailwindcss.com/docs/guides/vite)
|
|
86
|
+
|
|
87
|
+
[Install Tailwind CSS with Next.js](https://tailwindcss.com/docs/guides/nextjs)
|
|
88
|
+
|
|
15
89
|
## Start using the library
|
|
16
90
|
|
|
17
91
|
```jsx
|
|
@@ -21,7 +95,7 @@ import { Button } from '@toptal/picasso'
|
|
|
21
95
|
|
|
22
96
|
render () {
|
|
23
97
|
return (
|
|
24
|
-
<Picasso>
|
|
98
|
+
<Picasso injectFirst>
|
|
25
99
|
<Button>Hello world!</Button>
|
|
26
100
|
</Picasso>
|
|
27
101
|
)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso",
|
|
3
|
-
"version": "42.7.
|
|
3
|
+
"version": "42.7.2",
|
|
4
4
|
"description": "Toptal UI components library",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
"typescript": "~4.7.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@toptal/picasso-shared": "13.1.
|
|
34
|
+
"@toptal/picasso-shared": "13.1.4",
|
|
35
35
|
"ap-style-title-case": "^1.1.2",
|
|
36
|
-
"classnames": "^2.
|
|
36
|
+
"classnames": "^2.5.1",
|
|
37
37
|
"d3": "^7.8.2",
|
|
38
38
|
"d3-hierarchy": "^3.1.2",
|
|
39
39
|
"d3-zoom": "^3",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@testing-library/jest-dom": "^6.2.0",
|
|
54
54
|
"@testing-library/react": "^14.1.2",
|
|
55
55
|
"@testing-library/react-hooks": "^8.0.1",
|
|
56
|
-
"@toptal/picasso-provider": "3.5.
|
|
56
|
+
"@toptal/picasso-provider": "3.5.1",
|
|
57
57
|
"@types/classnames": "^2.3.1",
|
|
58
58
|
"@types/d3": "^7.4.0",
|
|
59
59
|
"@types/glider-js": "^1.7.8",
|