@kirill.konshin/mui 0.0.2 → 0.0.3
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.
- package/dist/appBarOffset.d.ts.map +1 -1
- package/dist/appBarOffset.js +11 -7
- package/dist/appBarOffset.js.map +1 -1
- package/dist/formControlFieldset.d.ts +1 -1
- package/dist/formControlFieldset.d.ts.map +1 -1
- package/dist/formControlFieldset.js +17 -26
- package/dist/formControlFieldset.js.map +1 -1
- package/dist/formControlFieldset.stories.d.ts +2 -2
- package/dist/formControlFieldset.stories.d.ts.map +1 -1
- package/dist/formLabelLegend.d.ts.map +1 -1
- package/dist/formLabelLegend.js +13 -10
- package/dist/formLabelLegend.js.map +1 -1
- package/dist/formLabelLegend.stories.d.ts +2 -2
- package/dist/formLabelLegend.stories.d.ts.map +1 -1
- package/dist/genericControl.d.ts.map +1 -1
- package/dist/genericControl.js +16 -20
- package/dist/genericControl.js.map +1 -1
- package/dist/genericControl.stories.d.ts +2 -2
- package/dist/genericControl.stories.d.ts.map +1 -1
- package/dist/index.d.ts +5 -5
- package/dist/index.js +2 -9
- package/dist/readOnly.d.ts.map +1 -1
- package/dist/readOnly.js +15 -7
- package/dist/readOnly.js.map +1 -1
- package/dist/readOnly.stories.d.ts +2 -2
- package/dist/readOnly.stories.d.ts.map +1 -1
- package/package.json +17 -5
- package/.ctirc +0 -20
- package/.storybook/main.ts +0 -2
- package/.storybook/preview.ts +0 -2
- package/.turbo/turbo-build.log +0 -24
- package/AGENTS.md +0 -19
- package/CHANGELOG.md +0 -8
- package/dist/index.js.map +0 -1
- package/src/README.md +0 -3
- package/src/appBarOffset.tsx +0 -8
- package/src/formControlFieldset.stories.tsx +0 -71
- package/src/formControlFieldset.tsx +0 -26
- package/src/formLabelLegend.stories.tsx +0 -139
- package/src/formLabelLegend.tsx +0 -13
- package/src/genericControl.stories.tsx +0 -111
- package/src/genericControl.tsx +0 -22
- package/src/index.ts +0 -5
- package/src/readOnly.stories.tsx +0 -118
- package/src/readOnly.tsx +0 -8
- package/tsconfig.json +0 -10
- package/turbo.json +0 -10
- package/vite.config.ts +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appBarOffset.d.ts","sourceRoot":"","sources":["../src/appBarOffset.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"appBarOffset.d.ts","sourceRoot":"","sources":["../src/appBarOffset.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,EAAE,EAAQ,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElE,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;AAEzC,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAE7C,CAAC"}
|
package/dist/appBarOffset.js
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
1
|
import { memo } from "react";
|
|
3
2
|
import Box from "@mui/material/Box";
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/appBarOffset.tsx
|
|
5
|
+
var AppBarOffset = memo(function AppBarOffset({ sx, ...props }) {
|
|
6
|
+
return /* @__PURE__ */ jsx(Box, {
|
|
7
|
+
...props,
|
|
8
|
+
sx: [({ mixins }) => mixins.toolbar, ...Array.isArray(sx) ? sx : [sx]]
|
|
9
|
+
});
|
|
6
10
|
});
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
//# sourceMappingURL=appBarOffset.js.map
|
|
11
|
+
//#endregion
|
|
12
|
+
export { AppBarOffset };
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=appBarOffset.js.map
|
package/dist/appBarOffset.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appBarOffset.js","sources":["../src/appBarOffset.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport { default as Box, BoxProps } from '@mui/material/Box';\n\nexport type AppBarOffsetProps = BoxProps;\n\nexport const AppBarOffset: FC<AppBarOffsetProps> = memo(function AppBarOffset({ sx, ...props }) {\n return <Box {...props} sx={[({ mixins }) => mixins.toolbar, ...(Array.isArray(sx) ? sx : [sx])]} />;\n});\n"],"
|
|
1
|
+
{"version":3,"file":"appBarOffset.js","names":[],"sources":["../src/appBarOffset.tsx"],"sourcesContent":["import React, { type FC, memo } from 'react';\nimport { default as Box, type BoxProps } from '@mui/material/Box';\n\nexport type AppBarOffsetProps = BoxProps;\n\nexport const AppBarOffset: FC<AppBarOffsetProps> = memo(function AppBarOffset({ sx, ...props }) {\n return <Box {...props} sx={[({ mixins }) => mixins.toolbar, ...(Array.isArray(sx) ? sx : [sx])]} />;\n});\n"],"mappings":";;;;AAKA,IAAa,eAAsC,KAAK,SAAS,aAAa,EAAE,IAAI,GAAG,SAAS;CAC5F,OAAO,oBAAC,KAAD;EAAK,GAAI;EAAO,IAAI,EAAE,EAAE,aAAa,OAAO,SAAS,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,CAAC,EAAE,CAAE;CAAI,CAAA;AACtG,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { GenericControlProps } from './genericControl';
|
|
2
|
+
import { GenericControlProps } from './genericControl.js';
|
|
3
3
|
export type FormControlFieldsetProps = GenericControlProps;
|
|
4
4
|
export declare const FormControlFieldset: FC<FormControlFieldsetProps>;
|
|
5
5
|
//# sourceMappingURL=formControlFieldset.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formControlFieldset.d.ts","sourceRoot":"","sources":["../src/formControlFieldset.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"formControlFieldset.d.ts","sourceRoot":"","sources":["../src/formControlFieldset.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,EAAE,EAAQ,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5E,MAAM,MAAM,wBAAwB,GAAG,mBAAmB,CAAC;AAE3D,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAmB3D,CAAC"}
|
|
@@ -1,29 +1,20 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { memo } from "react";
|
|
3
1
|
import { GenericControl } from "./genericControl.js";
|
|
2
|
+
import { memo } from "react";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
import { inputClasses } from "@mui/material/Input";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
...sx,
|
|
17
|
-
[`legend + .${inputClasses.root}`]: {
|
|
18
|
-
marginTop: 2
|
|
19
|
-
//FIXME 16px, hardcoded from @mui/material/Input/Input.js @ 59
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
children
|
|
23
|
-
}
|
|
24
|
-
);
|
|
5
|
+
//#region src/formControlFieldset.tsx
|
|
6
|
+
var FormControlFieldset = memo(function FormControlFieldset({ children, sx, ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(GenericControl, {
|
|
8
|
+
...props,
|
|
9
|
+
component: "fieldset",
|
|
10
|
+
sx: {
|
|
11
|
+
...sx,
|
|
12
|
+
[`legend + .${inputClasses.root}`]: { marginTop: 2 }
|
|
13
|
+
},
|
|
14
|
+
children
|
|
15
|
+
});
|
|
25
16
|
});
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
//# sourceMappingURL=formControlFieldset.js.map
|
|
17
|
+
//#endregion
|
|
18
|
+
export { FormControlFieldset };
|
|
19
|
+
|
|
20
|
+
//# sourceMappingURL=formControlFieldset.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formControlFieldset.js","sources":["../src/formControlFieldset.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport { GenericControl, GenericControlProps } from './genericControl';\nimport { inputClasses } from '@mui/material/Input';\n\nexport type FormControlFieldsetProps = GenericControlProps;\n\nexport const FormControlFieldset: FC<FormControlFieldsetProps> = memo(function FormControlFieldset({\n children,\n sx,\n ...props\n}) {\n return (\n <GenericControl\n {...props}\n component=\"fieldset\"\n sx={{\n ...sx,\n [`legend + .${inputClasses.root}`]: {\n marginTop: 2, //FIXME 16px, hardcoded from @mui/material/Input/Input.js @ 59\n },\n }}\n >\n {children}\n </GenericControl>\n );\n});\n"],"
|
|
1
|
+
{"version":3,"file":"formControlFieldset.js","names":[],"sources":["../src/formControlFieldset.tsx"],"sourcesContent":["import React, { type FC, memo } from 'react';\nimport { GenericControl, type GenericControlProps } from './genericControl';\nimport { inputClasses } from '@mui/material/Input';\n\nexport type FormControlFieldsetProps = GenericControlProps;\n\nexport const FormControlFieldset: FC<FormControlFieldsetProps> = memo(function FormControlFieldset({\n children,\n sx,\n ...props\n}) {\n return (\n <GenericControl\n {...props}\n component=\"fieldset\"\n sx={{\n ...sx,\n [`legend + .${inputClasses.root}`]: {\n marginTop: 2, //FIXME 16px, hardcoded from @mui/material/Input/Input.js @ 59\n },\n }}\n >\n {children}\n </GenericControl>\n );\n});\n"],"mappings":";;;;;AAMA,IAAa,sBAAoD,KAAK,SAAS,oBAAoB,EAC/F,UACA,IACA,GAAG,SACJ;CACC,OACI,oBAAC,gBAAD;EACI,GAAI;EACJ,WAAU;EACV,IAAI;GACA,GAAG;IACF,aAAa,aAAa,SAAS,EAChC,WAAW,EACf;EACJ;EAEC;CACW,CAAA;AAExB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { GenericControl } from './genericControl';
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { GenericControl } from './genericControl.js';
|
|
3
3
|
declare const meta: Meta<typeof GenericControl>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof meta>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formControlFieldset.stories.d.ts","sourceRoot":"","sources":["../src/formControlFieldset.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"formControlFieldset.stories.d.ts","sourceRoot":"","sources":["../src/formControlFieldset.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAMlD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CA6CC,CAAC;AAExC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAQnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formLabelLegend.d.ts","sourceRoot":"","sources":["../src/formLabelLegend.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"formLabelLegend.d.ts","sourceRoot":"","sources":["../src/formLabelLegend.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,EAAE,EAAQ,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAyB,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAEvF,MAAM,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAEnD,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAOnD,CAAC"}
|
package/dist/formLabelLegend.js
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
1
|
import { memo } from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import InputLabel from "@mui/material/InputLabel";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
//#region src/formLabelLegend.tsx
|
|
5
|
+
var FormLabelLegend = memo(function FormLabelLegend({ children, ...props }) {
|
|
6
|
+
return /* @__PURE__ */ jsx(InputLabel, {
|
|
7
|
+
...props,
|
|
8
|
+
shrink: true,
|
|
9
|
+
component: "legend",
|
|
10
|
+
children
|
|
11
|
+
});
|
|
9
12
|
});
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
//# sourceMappingURL=formLabelLegend.js.map
|
|
13
|
+
//#endregion
|
|
14
|
+
export { FormLabelLegend };
|
|
15
|
+
|
|
16
|
+
//# sourceMappingURL=formLabelLegend.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formLabelLegend.js","sources":["../src/formLabelLegend.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport { default as InputLabel, InputLabelProps } from '@mui/material/InputLabel';\n\nexport type FormLabelLegendProps = InputLabelProps;\n\nexport const FormLabelLegend: FC<FormLabelLegendProps> = memo(function FormLabelLegend({ children, ...props }) {\n return (\n // sx={(theme) => theme.typography.caption}\n <InputLabel {...props} shrink={true} component={'legend' as any}>\n {children}\n </InputLabel>\n );\n});\n"],"
|
|
1
|
+
{"version":3,"file":"formLabelLegend.js","names":[],"sources":["../src/formLabelLegend.tsx"],"sourcesContent":["import React, { type FC, memo } from 'react';\nimport { default as InputLabel, type InputLabelProps } from '@mui/material/InputLabel';\n\nexport type FormLabelLegendProps = InputLabelProps;\n\nexport const FormLabelLegend: FC<FormLabelLegendProps> = memo(function FormLabelLegend({ children, ...props }) {\n return (\n // sx={(theme) => theme.typography.caption}\n <InputLabel {...props} shrink={true} component={'legend' as any}>\n {children}\n </InputLabel>\n );\n});\n"],"mappings":";;;;AAKA,IAAa,kBAA4C,KAAK,SAAS,gBAAgB,EAAE,UAAU,GAAG,SAAS;CAC3G,OAEI,oBAAC,YAAD;EAAY,GAAI;EAAO,QAAQ;EAAM,WAAW;EAC3C;CACO,CAAA;AAEpB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { FormLabelLegend } from './formLabelLegend';
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { FormLabelLegend } from './formLabelLegend.js';
|
|
3
3
|
declare const meta: Meta<typeof FormLabelLegend>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof meta>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formLabelLegend.stories.d.ts","sourceRoot":"","sources":["../src/formLabelLegend.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"formLabelLegend.stories.d.ts","sourceRoot":"","sources":["../src/formLabelLegend.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAKpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAatC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAa5B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAqBtC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoB/B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"genericControl.d.ts","sourceRoot":"","sources":["../src/genericControl.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"genericControl.d.ts","sourceRoot":"","sources":["../src/genericControl.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,EAAE,EAAQ,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,KAAK,gBAAgB,EAA0B,MAAM,2BAA2B,CAAC;AAG1F,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,GAAG;IAAE,QAAQ,EAAE,GAAG,CAAA;CAAE,CAAC;AAEvE,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAejD,CAAC"}
|
package/dist/genericControl.js
CHANGED
|
@@ -1,24 +1,20 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
1
|
import { memo } from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import FormControl from "@mui/material/FormControl";
|
|
4
4
|
import { inputClasses } from "@mui/material/Input";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
...props,
|
|
17
|
-
children
|
|
18
|
-
}
|
|
19
|
-
);
|
|
5
|
+
//#region src/genericControl.tsx
|
|
6
|
+
var GenericControl = memo(function GenericControl({ children, sx, ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(FormControl, {
|
|
8
|
+
variant: "standard",
|
|
9
|
+
sx: {
|
|
10
|
+
...sx,
|
|
11
|
+
[`& .${inputClasses.root}`]: { "&:before, &:after": { display: "none" } }
|
|
12
|
+
},
|
|
13
|
+
...props,
|
|
14
|
+
children
|
|
15
|
+
});
|
|
20
16
|
});
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
//# sourceMappingURL=genericControl.js.map
|
|
17
|
+
//#endregion
|
|
18
|
+
export { GenericControl };
|
|
19
|
+
|
|
20
|
+
//# sourceMappingURL=genericControl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"genericControl.js","sources":["../src/genericControl.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport { FormControlProps, default as FormControl } from '@mui/material/FormControl';\nimport { inputClasses } from '@mui/material/Input';\n\nexport type GenericControlProps = FormControlProps & { children: any };\n\nexport const GenericControl: FC<GenericControlProps> = memo(function GenericControl({ children, sx, ...props }) {\n return (\n <FormControl\n variant=\"standard\"\n sx={{\n ...sx,\n [`& .${inputClasses.root}`]: {\n '&:before, &:after': { display: 'none' },\n },\n }}\n {...props}\n >\n {children}\n </FormControl>\n );\n});\n"],"
|
|
1
|
+
{"version":3,"file":"genericControl.js","names":[],"sources":["../src/genericControl.tsx"],"sourcesContent":["import React, { type FC, memo } from 'react';\nimport { type FormControlProps, default as FormControl } from '@mui/material/FormControl';\nimport { inputClasses } from '@mui/material/Input';\n\nexport type GenericControlProps = FormControlProps & { children: any };\n\nexport const GenericControl: FC<GenericControlProps> = memo(function GenericControl({ children, sx, ...props }) {\n return (\n <FormControl\n variant=\"standard\"\n sx={{\n ...sx,\n [`& .${inputClasses.root}`]: {\n '&:before, &:after': { display: 'none' },\n },\n }}\n {...props}\n >\n {children}\n </FormControl>\n );\n});\n"],"mappings":";;;;;AAMA,IAAa,iBAA0C,KAAK,SAAS,eAAe,EAAE,UAAU,IAAI,GAAG,SAAS;CAC5G,OACI,oBAAC,aAAD;EACI,SAAQ;EACR,IAAI;GACA,GAAG;IACF,MAAM,aAAa,SAAS,EACzB,qBAAqB,EAAE,SAAS,OAAO,EAC3C;EACJ;EACA,GAAI;EAEH;CACQ,CAAA;AAErB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { GenericControl } from './genericControl';
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { GenericControl } from './genericControl.js';
|
|
3
3
|
declare const meta: Meta<typeof GenericControl>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof meta>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"genericControl.stories.d.ts","sourceRoot":"","sources":["../src/genericControl.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"genericControl.stories.d.ts","sourceRoot":"","sources":["../src/genericControl.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAarC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAS/B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAiBvB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAkBrC,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export * from './appBarOffset';
|
|
2
|
-
export * from './formControlFieldset';
|
|
3
|
-
export * from './formLabelLegend';
|
|
4
|
-
export * from './genericControl';
|
|
5
|
-
export * from './readOnly';
|
|
1
|
+
export * from './appBarOffset.js';
|
|
2
|
+
export * from './formControlFieldset.js';
|
|
3
|
+
export * from './formLabelLegend.js';
|
|
4
|
+
export * from './genericControl.js';
|
|
5
|
+
export * from './readOnly.js';
|
|
6
6
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,6 @@
|
|
|
1
1
|
import { AppBarOffset } from "./appBarOffset.js";
|
|
2
|
+
import { GenericControl } from "./genericControl.js";
|
|
2
3
|
import { FormControlFieldset } from "./formControlFieldset.js";
|
|
3
4
|
import { FormLabelLegend } from "./formLabelLegend.js";
|
|
4
|
-
import { GenericControl } from "./genericControl.js";
|
|
5
5
|
import { ReadOnly } from "./readOnly.js";
|
|
6
|
-
export {
|
|
7
|
-
AppBarOffset,
|
|
8
|
-
FormControlFieldset,
|
|
9
|
-
FormLabelLegend,
|
|
10
|
-
GenericControl,
|
|
11
|
-
ReadOnly
|
|
12
|
-
};
|
|
13
|
-
//# sourceMappingURL=index.js.map
|
|
6
|
+
export { AppBarOffset, FormControlFieldset, FormLabelLegend, GenericControl, ReadOnly };
|
package/dist/readOnly.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"readOnly.d.ts","sourceRoot":"","sources":["../src/readOnly.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"readOnly.d.ts","sourceRoot":"","sources":["../src/readOnly.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,EAAE,EAAQ,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAExE,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG;IAAE,QAAQ,EAAE,GAAG,CAAA;CAAE,CAAC;AAE3D,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAErC,CAAC"}
|
package/dist/readOnly.js
CHANGED
|
@@ -1,10 +1,18 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
1
|
import { memo } from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import Input from "@mui/material/Input";
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
//#region src/readOnly.tsx
|
|
5
|
+
var ReadOnly = memo(function ReadOnly({ children, inputProps, ...props }) {
|
|
6
|
+
return /* @__PURE__ */ jsx(Input, {
|
|
7
|
+
...props,
|
|
8
|
+
inputComponent: "div",
|
|
9
|
+
inputProps: {
|
|
10
|
+
...inputProps,
|
|
11
|
+
children
|
|
12
|
+
}
|
|
13
|
+
});
|
|
6
14
|
});
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
//# sourceMappingURL=readOnly.js.map
|
|
15
|
+
//#endregion
|
|
16
|
+
export { ReadOnly };
|
|
17
|
+
|
|
18
|
+
//# sourceMappingURL=readOnly.js.map
|
package/dist/readOnly.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"readOnly.js","sources":["../src/readOnly.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport { default as Input, InputProps } from '@mui/material/Input';\n\nexport type ReadOnlyProps = InputProps & { children: any };\n\nexport const ReadOnly: FC<ReadOnlyProps> = memo(function ReadOnly({ children, inputProps, ...props }) {\n return <Input {...props} inputComponent={'div' as any} inputProps={{ ...inputProps, children }}></Input>;\n});\n"],"
|
|
1
|
+
{"version":3,"file":"readOnly.js","names":[],"sources":["../src/readOnly.tsx"],"sourcesContent":["import React, { type FC, memo } from 'react';\nimport { default as Input, type InputProps } from '@mui/material/Input';\n\nexport type ReadOnlyProps = InputProps & { children: any };\n\nexport const ReadOnly: FC<ReadOnlyProps> = memo(function ReadOnly({ children, inputProps, ...props }) {\n return <Input {...props} inputComponent={'div' as any} inputProps={{ ...inputProps, children }}></Input>;\n});\n"],"mappings":";;;;AAKA,IAAa,WAA8B,KAAK,SAAS,SAAS,EAAE,UAAU,YAAY,GAAG,SAAS;CAClG,OAAO,oBAAC,OAAD;EAAO,GAAI;EAAO,gBAAgB;EAAc,YAAY;GAAE,GAAG;GAAY;EAAS;CAAU,CAAA;AAC3G,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { ReadOnly } from './readOnly';
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { ReadOnly } from './readOnly.js';
|
|
3
3
|
declare const meta: Meta<typeof ReadOnly>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof meta>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"readOnly.stories.d.ts","sourceRoot":"","sources":["../src/readOnly.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"readOnly.stories.d.ts","sourceRoot":"","sources":["../src/readOnly.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAY/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAqB5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAyBrC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kirill.konshin/mui",
|
|
3
3
|
"description": "Utilities",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.3",
|
|
5
5
|
"type": "module",
|
|
6
|
+
"hasStorybook": true,
|
|
6
7
|
"scripts": {
|
|
7
8
|
"----- BUILD -----": "",
|
|
8
9
|
"clean": "rm -rf dist .tscache tsconfig.tsbuildinfo",
|
|
9
10
|
"build": "vite build",
|
|
10
|
-
"build:index": "ctix build",
|
|
11
|
-
"build:check-types": "attw --pack .",
|
|
12
11
|
"start": "yarn build --watch",
|
|
13
12
|
"wait": "wait-on ./dist/index.js",
|
|
14
13
|
"----- TEST -----": "",
|
|
15
|
-
"test
|
|
14
|
+
"test": "vitest run --coverage",
|
|
16
15
|
"test:watch": "vitest watch --coverage",
|
|
17
16
|
"----- STORYBOOK -----": "",
|
|
18
17
|
"storybook:start": "storybook dev -p 6006",
|
|
@@ -52,5 +51,18 @@
|
|
|
52
51
|
},
|
|
53
52
|
"main": "./dist/index.js",
|
|
54
53
|
"module": "./dist/index.js",
|
|
55
|
-
"types": "./dist/index.d.ts"
|
|
54
|
+
"types": "./dist/index.d.ts",
|
|
55
|
+
"repository": {
|
|
56
|
+
"type": "git",
|
|
57
|
+
"url": "https://github.com/kirill-konshin/utils.git",
|
|
58
|
+
"directory": "packages/mui"
|
|
59
|
+
},
|
|
60
|
+
"nx": {
|
|
61
|
+
"tags": [
|
|
62
|
+
"platform:react"
|
|
63
|
+
]
|
|
64
|
+
},
|
|
65
|
+
"files": [
|
|
66
|
+
"dist"
|
|
67
|
+
]
|
|
56
68
|
}
|
package/.ctirc
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"options": [
|
|
3
|
-
{
|
|
4
|
-
"mode": "create",
|
|
5
|
-
"project": "tsconfig.json",
|
|
6
|
-
"include": "src/**/*.{ts,tsx}",
|
|
7
|
-
"exclude": [
|
|
8
|
-
"**/*.stories.*",
|
|
9
|
-
"**/*.test.*",
|
|
10
|
-
"**/*.fixture.*"
|
|
11
|
-
],
|
|
12
|
-
"startFrom": "src",
|
|
13
|
-
"backup": false,
|
|
14
|
-
"overwrite": true,
|
|
15
|
-
"generationStyle": "default-alias-named-star",
|
|
16
|
-
"output": "src",
|
|
17
|
-
"verbose": true
|
|
18
|
-
}
|
|
19
|
-
]
|
|
20
|
-
}
|
package/.storybook/main.ts
DELETED
package/.storybook/preview.ts
DELETED
package/.turbo/turbo-build.log
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
[36mvite v7.0.6 [32mbuilding SSR bundle for production...[36m[39m
|
|
2
|
-
- ctix 'create' mode start, ...
|
|
3
|
-
✔ /home/runner/work/utils/utils/packages/mui/tsconfig.json loading complete!
|
|
4
|
-
✔ analysis export statements completed!
|
|
5
|
-
- build "index.ts" file start
|
|
6
|
-
- output file exists check, ...
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
✔ ctix 'create' mode complete!
|
|
10
|
-
transforming...
|
|
11
|
-
[32m✓[39m 6 modules transformed.
|
|
12
|
-
rendering chunks...
|
|
13
|
-
|
|
14
|
-
[vite:dts] Start generate declaration files...
|
|
15
|
-
[2mdist/[22m[36mappBarOffset.js [39m[1m[2m0.37 kB[22m[1m[22m[2m │ map: 0.68 kB[22m
|
|
16
|
-
[2mdist/[22m[36mreadOnly.js [39m[1m[2m0.37 kB[22m[1m[22m[2m │ map: 0.68 kB[22m
|
|
17
|
-
[2mdist/[22m[36mindex.js [39m[1m[2m0.40 kB[22m[1m[22m[2m │ map: 0.09 kB[22m
|
|
18
|
-
[2mdist/[22m[36mformLabelLegend.js [39m[1m[2m0.44 kB[22m[1m[22m[2m │ map: 0.79 kB[22m
|
|
19
|
-
[2mdist/[22m[36mgenericControl.js [39m[1m[2m0.59 kB[22m[1m[22m[2m │ map: 1.16 kB[22m
|
|
20
|
-
[2mdist/[22m[36mformControlFieldset.js [39m[1m[2m0.68 kB[22m[1m[22m[2m │ map: 1.24 kB[22m
|
|
21
|
-
[vite:dts] Declaration files built in 3345ms.
|
|
22
|
-
|
|
23
|
-
[32m✓ built in 7.04s[39m
|
|
24
|
-
Updated package.json with exports
|
package/AGENTS.md
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
# MUI Classes In Selectors
|
|
2
|
-
|
|
3
|
-
Always use following notation because it's the only one that works with minification:
|
|
4
|
-
|
|
5
|
-
```tsx
|
|
6
|
-
import Input, { inputClasses } from '@mui/material/Input';
|
|
7
|
-
|
|
8
|
-
const cmp = (
|
|
9
|
-
<Box
|
|
10
|
-
sx={{
|
|
11
|
-
[`& .${inputClasses.root}`]: {
|
|
12
|
-
// styles
|
|
13
|
-
},
|
|
14
|
-
}}
|
|
15
|
-
>
|
|
16
|
-
<Input />
|
|
17
|
-
</Box>
|
|
18
|
-
);
|
|
19
|
-
```
|
package/CHANGELOG.md
DELETED
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
|
package/src/README.md
DELETED
package/src/appBarOffset.tsx
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React, { FC, memo } from 'react';
|
|
2
|
-
import { default as Box, BoxProps } from '@mui/material/Box';
|
|
3
|
-
|
|
4
|
-
export type AppBarOffsetProps = BoxProps;
|
|
5
|
-
|
|
6
|
-
export const AppBarOffset: FC<AppBarOffsetProps> = memo(function AppBarOffset({ sx, ...props }) {
|
|
7
|
-
return <Box {...props} sx={[({ mixins }) => mixins.toolbar, ...(Array.isArray(sx) ? sx : [sx])]} />;
|
|
8
|
-
});
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
|
-
|
|
4
|
-
import { TextField, Stack, InputLabel, RadioGroup, Radio, FormControlLabel, Box } from '@mui/material';
|
|
5
|
-
|
|
6
|
-
import { GenericControl } from './genericControl';
|
|
7
|
-
import { ReadOnly } from './readOnly';
|
|
8
|
-
import { FormControlFieldset } from './formControlFieldset';
|
|
9
|
-
import { FormLabelLegend } from './formLabelLegend';
|
|
10
|
-
|
|
11
|
-
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
|
12
|
-
const meta: Meta<typeof GenericControl> = {
|
|
13
|
-
title: 'MUI / FormControlFieldset',
|
|
14
|
-
parameters: {
|
|
15
|
-
layout: 'centered',
|
|
16
|
-
},
|
|
17
|
-
tags: ['autodocs'],
|
|
18
|
-
argTypes: {},
|
|
19
|
-
render: function Render() {
|
|
20
|
-
return (
|
|
21
|
-
<Box sx={{ position: 'relative' }}>
|
|
22
|
-
<Rule top={12} />
|
|
23
|
-
<Rule top={37} />
|
|
24
|
-
<Rule top={48} />
|
|
25
|
-
<Stack direction="row" gap={3} sx={{ alignItems: 'flex-start' }}>
|
|
26
|
-
<FormControlFieldset>
|
|
27
|
-
<FormLabelLegend>Radios</FormLabelLegend>
|
|
28
|
-
<ReadOnly>
|
|
29
|
-
{/* TODO The size of the component. small is equivalent to the dense radio styling. */}
|
|
30
|
-
<RadioGroup row defaultValue="female" name="radio-buttons-group" sx={{ mt: -1 }}>
|
|
31
|
-
<FormControlLabel value="female" label="Female" control={<Radio size="small" />} />
|
|
32
|
-
<FormControlLabel value="male" label="Male" control={<Radio size="small" />} />
|
|
33
|
-
<FormControlLabel value="other" label="Other" control={<Radio size="small" />} />
|
|
34
|
-
</RadioGroup>
|
|
35
|
-
</ReadOnly>
|
|
36
|
-
</FormControlFieldset>
|
|
37
|
-
|
|
38
|
-
<GenericControl>
|
|
39
|
-
<InputLabel shrink>GenericControl</InputLabel>
|
|
40
|
-
<ReadOnly>
|
|
41
|
-
This is a <code>div</code>, not an input with <code>readOnly</code>
|
|
42
|
-
</ReadOnly>
|
|
43
|
-
</GenericControl>
|
|
44
|
-
|
|
45
|
-
<FormControlFieldset>
|
|
46
|
-
<FormLabelLegend>FormLabelLegend</FormLabelLegend>
|
|
47
|
-
<ReadOnly>
|
|
48
|
-
This is a <code>div</code>, not an input with <code>readOnly</code>
|
|
49
|
-
</ReadOnly>
|
|
50
|
-
</FormControlFieldset>
|
|
51
|
-
|
|
52
|
-
<TextField label="TextField" defaultValue="Bar" variant="standard" />
|
|
53
|
-
</Stack>
|
|
54
|
-
</Box>
|
|
55
|
-
);
|
|
56
|
-
},
|
|
57
|
-
} satisfies Meta<typeof GenericControl>;
|
|
58
|
-
|
|
59
|
-
export default meta;
|
|
60
|
-
|
|
61
|
-
type Story = StoryObj<typeof meta>;
|
|
62
|
-
|
|
63
|
-
function Rule({ top }) {
|
|
64
|
-
return (
|
|
65
|
-
<Box sx={{ background: 'red', position: 'absolute', left: 0, top: `${top}px`, width: '100%', height: '1px' }} />
|
|
66
|
-
);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
export const Default: Story = {
|
|
70
|
-
args: {},
|
|
71
|
-
};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import React, { FC, memo } from 'react';
|
|
2
|
-
import { GenericControl, GenericControlProps } from './genericControl';
|
|
3
|
-
import { inputClasses } from '@mui/material/Input';
|
|
4
|
-
|
|
5
|
-
export type FormControlFieldsetProps = GenericControlProps;
|
|
6
|
-
|
|
7
|
-
export const FormControlFieldset: FC<FormControlFieldsetProps> = memo(function FormControlFieldset({
|
|
8
|
-
children,
|
|
9
|
-
sx,
|
|
10
|
-
...props
|
|
11
|
-
}) {
|
|
12
|
-
return (
|
|
13
|
-
<GenericControl
|
|
14
|
-
{...props}
|
|
15
|
-
component="fieldset"
|
|
16
|
-
sx={{
|
|
17
|
-
...sx,
|
|
18
|
-
[`legend + .${inputClasses.root}`]: {
|
|
19
|
-
marginTop: 2, //FIXME 16px, hardcoded from @mui/material/Input/Input.js @ 59
|
|
20
|
-
},
|
|
21
|
-
}}
|
|
22
|
-
>
|
|
23
|
-
{children}
|
|
24
|
-
</GenericControl>
|
|
25
|
-
);
|
|
26
|
-
});
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
|
-
|
|
4
|
-
import { InputLabel, RadioGroup, Radio, FormControlLabel, Stack, Box } from '@mui/material';
|
|
5
|
-
|
|
6
|
-
import { FormLabelLegend } from './formLabelLegend';
|
|
7
|
-
import { FormControlFieldset } from './formControlFieldset';
|
|
8
|
-
import { GenericControl } from './genericControl';
|
|
9
|
-
import { ReadOnly } from './readOnly';
|
|
10
|
-
|
|
11
|
-
const meta: Meta<typeof FormLabelLegend> = {
|
|
12
|
-
title: 'MUI / FormLabelLegend',
|
|
13
|
-
component: FormLabelLegend,
|
|
14
|
-
parameters: {
|
|
15
|
-
layout: 'centered',
|
|
16
|
-
},
|
|
17
|
-
tags: ['autodocs'],
|
|
18
|
-
argTypes: {
|
|
19
|
-
children: { control: 'text' },
|
|
20
|
-
disabled: { control: 'boolean' },
|
|
21
|
-
error: { control: 'boolean' },
|
|
22
|
-
required: { control: 'boolean' },
|
|
23
|
-
},
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
export default meta;
|
|
27
|
-
|
|
28
|
-
type Story = StoryObj<typeof meta>;
|
|
29
|
-
|
|
30
|
-
export const Default: Story = {
|
|
31
|
-
args: {
|
|
32
|
-
children: 'Form Label Legend',
|
|
33
|
-
},
|
|
34
|
-
render: (args) => (
|
|
35
|
-
<FormControlFieldset>
|
|
36
|
-
<FormLabelLegend {...args} />
|
|
37
|
-
<ReadOnly>Content goes here</ReadOnly>
|
|
38
|
-
</FormControlFieldset>
|
|
39
|
-
),
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
export const WithRadioGroup: Story = {
|
|
43
|
-
render: () => (
|
|
44
|
-
<FormControlFieldset>
|
|
45
|
-
<FormLabelLegend>Select Option</FormLabelLegend>
|
|
46
|
-
<ReadOnly>
|
|
47
|
-
<RadioGroup row defaultValue="option1">
|
|
48
|
-
<FormControlLabel value="option1" label="Option 1" control={<Radio size="small" />} />
|
|
49
|
-
<FormControlLabel value="option2" label="Option 2" control={<Radio size="small" />} />
|
|
50
|
-
<FormControlLabel value="option3" label="Option 3" control={<Radio size="small" />} />
|
|
51
|
-
</RadioGroup>
|
|
52
|
-
</ReadOnly>
|
|
53
|
-
</FormControlFieldset>
|
|
54
|
-
),
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
export const Required: Story = {
|
|
58
|
-
args: {
|
|
59
|
-
children: 'Required Field',
|
|
60
|
-
required: true,
|
|
61
|
-
},
|
|
62
|
-
render: (args) => (
|
|
63
|
-
<FormControlFieldset required>
|
|
64
|
-
<FormLabelLegend {...args} />
|
|
65
|
-
<ReadOnly>This field is required</ReadOnly>
|
|
66
|
-
</FormControlFieldset>
|
|
67
|
-
),
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
export const WithError: Story = {
|
|
71
|
-
args: {
|
|
72
|
-
children: 'Error State',
|
|
73
|
-
error: true,
|
|
74
|
-
},
|
|
75
|
-
render: (args) => (
|
|
76
|
-
<FormControlFieldset error>
|
|
77
|
-
<FormLabelLegend {...args} />
|
|
78
|
-
<ReadOnly>This field has an error</ReadOnly>
|
|
79
|
-
</FormControlFieldset>
|
|
80
|
-
),
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
export const Disabled: Story = {
|
|
84
|
-
args: {
|
|
85
|
-
children: 'Disabled Field',
|
|
86
|
-
disabled: true,
|
|
87
|
-
},
|
|
88
|
-
render: (args) => (
|
|
89
|
-
<FormControlFieldset disabled>
|
|
90
|
-
<FormLabelLegend {...args} />
|
|
91
|
-
<ReadOnly>This field is disabled</ReadOnly>
|
|
92
|
-
</FormControlFieldset>
|
|
93
|
-
),
|
|
94
|
-
};
|
|
95
|
-
|
|
96
|
-
export const ComparisonWithInputLabel: Story = {
|
|
97
|
-
parameters: {
|
|
98
|
-
docs: {
|
|
99
|
-
description: {
|
|
100
|
-
story: 'FormLabelLegend renders as a `<legend>` element, which is semantically correct for fieldsets. InputLabel renders as a `<label>` element.',
|
|
101
|
-
},
|
|
102
|
-
},
|
|
103
|
-
},
|
|
104
|
-
render: () => (
|
|
105
|
-
<Stack direction="row" spacing={3}>
|
|
106
|
-
<FormControlFieldset>
|
|
107
|
-
<FormLabelLegend>FormLabelLegend</FormLabelLegend>
|
|
108
|
-
<ReadOnly>Uses legend element</ReadOnly>
|
|
109
|
-
</FormControlFieldset>
|
|
110
|
-
|
|
111
|
-
<GenericControl>
|
|
112
|
-
<InputLabel shrink>InputLabel</InputLabel>
|
|
113
|
-
<ReadOnly>Uses label element</ReadOnly>
|
|
114
|
-
</GenericControl>
|
|
115
|
-
</Stack>
|
|
116
|
-
),
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
export const MultipleFieldsets: Story = {
|
|
120
|
-
render: () => (
|
|
121
|
-
<Stack spacing={3}>
|
|
122
|
-
<FormControlFieldset>
|
|
123
|
-
<FormLabelLegend>Personal Information</FormLabelLegend>
|
|
124
|
-
<ReadOnly>John Doe, john@example.com</ReadOnly>
|
|
125
|
-
</FormControlFieldset>
|
|
126
|
-
|
|
127
|
-
<FormControlFieldset>
|
|
128
|
-
<FormLabelLegend>Preferences</FormLabelLegend>
|
|
129
|
-
<ReadOnly>
|
|
130
|
-
<RadioGroup row defaultValue="email">
|
|
131
|
-
<FormControlLabel value="email" label="Email" control={<Radio size="small" />} />
|
|
132
|
-
<FormControlLabel value="sms" label="SMS" control={<Radio size="small" />} />
|
|
133
|
-
<FormControlLabel value="none" label="None" control={<Radio size="small" />} />
|
|
134
|
-
</RadioGroup>
|
|
135
|
-
</ReadOnly>
|
|
136
|
-
</FormControlFieldset>
|
|
137
|
-
</Stack>
|
|
138
|
-
),
|
|
139
|
-
};
|
package/src/formLabelLegend.tsx
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React, { FC, memo } from 'react';
|
|
2
|
-
import { default as InputLabel, InputLabelProps } from '@mui/material/InputLabel';
|
|
3
|
-
|
|
4
|
-
export type FormLabelLegendProps = InputLabelProps;
|
|
5
|
-
|
|
6
|
-
export const FormLabelLegend: FC<FormLabelLegendProps> = memo(function FormLabelLegend({ children, ...props }) {
|
|
7
|
-
return (
|
|
8
|
-
// sx={(theme) => theme.typography.caption}
|
|
9
|
-
<InputLabel {...props} shrink={true} component={'legend' as any}>
|
|
10
|
-
{children}
|
|
11
|
-
</InputLabel>
|
|
12
|
-
);
|
|
13
|
-
});
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
|
-
|
|
4
|
-
import { InputLabel, Input, TextField, Stack, Box } from '@mui/material';
|
|
5
|
-
|
|
6
|
-
import { GenericControl } from './genericControl';
|
|
7
|
-
import { ReadOnly } from './readOnly';
|
|
8
|
-
|
|
9
|
-
const meta: Meta<typeof GenericControl> = {
|
|
10
|
-
title: 'MUI / GenericControl',
|
|
11
|
-
component: GenericControl,
|
|
12
|
-
parameters: {
|
|
13
|
-
layout: 'centered',
|
|
14
|
-
},
|
|
15
|
-
tags: ['autodocs'],
|
|
16
|
-
argTypes: {
|
|
17
|
-
disabled: { control: 'boolean' },
|
|
18
|
-
error: { control: 'boolean' },
|
|
19
|
-
fullWidth: { control: 'boolean' },
|
|
20
|
-
required: { control: 'boolean' },
|
|
21
|
-
},
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export default meta;
|
|
25
|
-
|
|
26
|
-
type Story = StoryObj<typeof meta>;
|
|
27
|
-
|
|
28
|
-
export const Default: Story = {
|
|
29
|
-
args: {
|
|
30
|
-
children: (
|
|
31
|
-
<>
|
|
32
|
-
<InputLabel shrink>Label</InputLabel>
|
|
33
|
-
<Input defaultValue="Some value" />
|
|
34
|
-
</>
|
|
35
|
-
),
|
|
36
|
-
},
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
export const WithCustomContent: Story = {
|
|
40
|
-
args: {
|
|
41
|
-
children: (
|
|
42
|
-
<>
|
|
43
|
-
<InputLabel shrink>Custom Content</InputLabel>
|
|
44
|
-
<ReadOnly>This is custom content inside GenericControl</ReadOnly>
|
|
45
|
-
</>
|
|
46
|
-
),
|
|
47
|
-
},
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
export const Disabled: Story = {
|
|
51
|
-
args: {
|
|
52
|
-
disabled: true,
|
|
53
|
-
children: (
|
|
54
|
-
<>
|
|
55
|
-
<InputLabel shrink>Disabled Control</InputLabel>
|
|
56
|
-
<Input defaultValue="Disabled value" />
|
|
57
|
-
</>
|
|
58
|
-
),
|
|
59
|
-
},
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
export const WithError: Story = {
|
|
63
|
-
args: {
|
|
64
|
-
error: true,
|
|
65
|
-
children: (
|
|
66
|
-
<>
|
|
67
|
-
<InputLabel shrink>Error State</InputLabel>
|
|
68
|
-
<Input defaultValue="Invalid value" />
|
|
69
|
-
</>
|
|
70
|
-
),
|
|
71
|
-
},
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
export const FullWidth: Story = {
|
|
75
|
-
args: {
|
|
76
|
-
fullWidth: true,
|
|
77
|
-
children: (
|
|
78
|
-
<>
|
|
79
|
-
<InputLabel shrink>Full Width</InputLabel>
|
|
80
|
-
<Input defaultValue="Full width input" />
|
|
81
|
-
</>
|
|
82
|
-
),
|
|
83
|
-
},
|
|
84
|
-
decorators: [
|
|
85
|
-
(Story) => (
|
|
86
|
-
<Box sx={{ width: 400 }}>
|
|
87
|
-
<Story />
|
|
88
|
-
</Box>
|
|
89
|
-
),
|
|
90
|
-
],
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
export const ComparisonWithTextField: Story = {
|
|
94
|
-
parameters: {
|
|
95
|
-
docs: {
|
|
96
|
-
description: {
|
|
97
|
-
story: 'GenericControl removes the underline from inputs, making it suitable for read-only or custom content displays.',
|
|
98
|
-
},
|
|
99
|
-
},
|
|
100
|
-
},
|
|
101
|
-
render: () => (
|
|
102
|
-
<Stack direction="row" spacing={3}>
|
|
103
|
-
<GenericControl>
|
|
104
|
-
<InputLabel shrink>GenericControl</InputLabel>
|
|
105
|
-
<Input defaultValue="No underline" />
|
|
106
|
-
</GenericControl>
|
|
107
|
-
|
|
108
|
-
<TextField label="TextField" defaultValue="With underline" variant="standard" />
|
|
109
|
-
</Stack>
|
|
110
|
-
),
|
|
111
|
-
};
|
package/src/genericControl.tsx
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React, { FC, memo } from 'react';
|
|
2
|
-
import { FormControlProps, default as FormControl } from '@mui/material/FormControl';
|
|
3
|
-
import { inputClasses } from '@mui/material/Input';
|
|
4
|
-
|
|
5
|
-
export type GenericControlProps = FormControlProps & { children: any };
|
|
6
|
-
|
|
7
|
-
export const GenericControl: FC<GenericControlProps> = memo(function GenericControl({ children, sx, ...props }) {
|
|
8
|
-
return (
|
|
9
|
-
<FormControl
|
|
10
|
-
variant="standard"
|
|
11
|
-
sx={{
|
|
12
|
-
...sx,
|
|
13
|
-
[`& .${inputClasses.root}`]: {
|
|
14
|
-
'&:before, &:after': { display: 'none' },
|
|
15
|
-
},
|
|
16
|
-
}}
|
|
17
|
-
{...props}
|
|
18
|
-
>
|
|
19
|
-
{children}
|
|
20
|
-
</FormControl>
|
|
21
|
-
);
|
|
22
|
-
});
|
package/src/index.ts
DELETED
package/src/readOnly.stories.tsx
DELETED
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
|
-
|
|
4
|
-
import { InputLabel, Stack, TextField, Box } from '@mui/material';
|
|
5
|
-
|
|
6
|
-
import { ReadOnly } from './readOnly';
|
|
7
|
-
import { GenericControl } from './genericControl';
|
|
8
|
-
|
|
9
|
-
const meta: Meta<typeof ReadOnly> = {
|
|
10
|
-
title: 'MUI / ReadOnly',
|
|
11
|
-
component: ReadOnly,
|
|
12
|
-
parameters: {
|
|
13
|
-
layout: 'centered',
|
|
14
|
-
},
|
|
15
|
-
tags: ['autodocs'],
|
|
16
|
-
argTypes: {
|
|
17
|
-
children: { control: 'text' },
|
|
18
|
-
disabled: { control: 'boolean' },
|
|
19
|
-
fullWidth: { control: 'boolean' },
|
|
20
|
-
},
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
export default meta;
|
|
24
|
-
|
|
25
|
-
type Story = StoryObj<typeof meta>;
|
|
26
|
-
|
|
27
|
-
export const Default: Story = {
|
|
28
|
-
args: {
|
|
29
|
-
children: 'This is read-only content',
|
|
30
|
-
},
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
export const WithLabel: Story = {
|
|
34
|
-
render: () => (
|
|
35
|
-
<GenericControl>
|
|
36
|
-
<InputLabel shrink>Read Only Field</InputLabel>
|
|
37
|
-
<ReadOnly>This content cannot be edited</ReadOnly>
|
|
38
|
-
</GenericControl>
|
|
39
|
-
),
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
export const WithHTMLContent: Story = {
|
|
43
|
-
render: () => (
|
|
44
|
-
<GenericControl>
|
|
45
|
-
<InputLabel shrink>HTML Content</InputLabel>
|
|
46
|
-
<ReadOnly>
|
|
47
|
-
This is a <code>div</code>, not an input with <code>readOnly</code> attribute
|
|
48
|
-
</ReadOnly>
|
|
49
|
-
</GenericControl>
|
|
50
|
-
),
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
export const MultipleFields: Story = {
|
|
54
|
-
render: () => (
|
|
55
|
-
<Stack spacing={2}>
|
|
56
|
-
<GenericControl>
|
|
57
|
-
<InputLabel shrink>Name</InputLabel>
|
|
58
|
-
<ReadOnly>John Doe</ReadOnly>
|
|
59
|
-
</GenericControl>
|
|
60
|
-
|
|
61
|
-
<GenericControl>
|
|
62
|
-
<InputLabel shrink>Email</InputLabel>
|
|
63
|
-
<ReadOnly>john.doe@example.com</ReadOnly>
|
|
64
|
-
</GenericControl>
|
|
65
|
-
|
|
66
|
-
<GenericControl>
|
|
67
|
-
<InputLabel shrink>Status</InputLabel>
|
|
68
|
-
<ReadOnly>
|
|
69
|
-
<span style={{ color: 'green' }}>● Active</span>
|
|
70
|
-
</ReadOnly>
|
|
71
|
-
</GenericControl>
|
|
72
|
-
</Stack>
|
|
73
|
-
),
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
export const ComparisonWithTextField: Story = {
|
|
77
|
-
parameters: {
|
|
78
|
-
docs: {
|
|
79
|
-
description: {
|
|
80
|
-
story: 'ReadOnly renders content as a div instead of an input, which is useful for displaying non-editable data that may contain HTML.',
|
|
81
|
-
},
|
|
82
|
-
},
|
|
83
|
-
},
|
|
84
|
-
render: () => (
|
|
85
|
-
<Stack direction="row" spacing={3} alignItems="flex-start">
|
|
86
|
-
<GenericControl>
|
|
87
|
-
<InputLabel shrink>ReadOnly Component</InputLabel>
|
|
88
|
-
<ReadOnly>
|
|
89
|
-
Content with <strong>HTML</strong>
|
|
90
|
-
</ReadOnly>
|
|
91
|
-
</GenericControl>
|
|
92
|
-
|
|
93
|
-
<TextField
|
|
94
|
-
label="TextField (readOnly)"
|
|
95
|
-
defaultValue="Plain text only"
|
|
96
|
-
variant="standard"
|
|
97
|
-
slotProps={{ input: { readOnly: true } }}
|
|
98
|
-
/>
|
|
99
|
-
</Stack>
|
|
100
|
-
),
|
|
101
|
-
};
|
|
102
|
-
|
|
103
|
-
export const FullWidth: Story = {
|
|
104
|
-
args: {
|
|
105
|
-
fullWidth: true,
|
|
106
|
-
children: 'Full width read-only content',
|
|
107
|
-
},
|
|
108
|
-
decorators: [
|
|
109
|
-
(Story) => (
|
|
110
|
-
<Box sx={{ width: 400 }}>
|
|
111
|
-
<GenericControl fullWidth>
|
|
112
|
-
<InputLabel shrink>Full Width</InputLabel>
|
|
113
|
-
<Story />
|
|
114
|
-
</GenericControl>
|
|
115
|
-
</Box>
|
|
116
|
-
),
|
|
117
|
-
],
|
|
118
|
-
};
|
package/src/readOnly.tsx
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React, { FC, memo } from 'react';
|
|
2
|
-
import { default as Input, InputProps } from '@mui/material/Input';
|
|
3
|
-
|
|
4
|
-
export type ReadOnlyProps = InputProps & { children: any };
|
|
5
|
-
|
|
6
|
-
export const ReadOnly: FC<ReadOnlyProps> = memo(function ReadOnly({ children, inputProps, ...props }) {
|
|
7
|
-
return <Input {...props} inputComponent={'div' as any} inputProps={{ ...inputProps, children }}></Input>;
|
|
8
|
-
});
|
package/tsconfig.json
DELETED
package/turbo.json
DELETED
package/vite.config.ts
DELETED