@kirill.konshin/mui 0.0.2 → 0.0.4

package/dist/readOnly.js

@@ -1,10 +1,18 @@
-import { jsx } from "react/jsx-runtime";
 import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
 import Input from "@mui/material/Input";
-const ReadOnly = memo(function ReadOnly2({ children, inputProps, ...props }) {
-  return /* @__PURE__ */ jsx(Input, { ...props, inputComponent: "div", inputProps: { ...inputProps, children } });
+//#region src/readOnly.tsx
+var ReadOnly = memo(function ReadOnly({ children, inputProps, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		...props,
+		inputComponent: "div",
+		inputProps: {
+			...inputProps,
+			children
+		}
+	});
 });
-export {
-  ReadOnly
-};
-//# sourceMappingURL=readOnly.js.map
+//#endregion
+export { ReadOnly };
+
+//# sourceMappingURL=readOnly.js.map

package/dist/readOnly.js.map

@@ -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"],"names":["ReadOnly"],"mappings":";;;AAKO,MAAM,WAA8B,KAAK,SAASA,UAAS,EAAE,UAAU,YAAY,GAAG,SAAS;AAClG,SAAO,oBAAC,OAAA,EAAO,GAAG,OAAO,gBAAgB,OAAc,YAAY,EAAE,GAAG,YAAY,SAAA,EAAS,CAAG;AACpG,CAAC;"}
+{"version":3,"file":"readOnly.js","names":[],"sources":["../src/readOnly.tsx"],"sourcesContent":["import React, { type FC, memo } from 'react';\n\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":";;;;AAMA,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"}

package/dist/readOnly.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ReadOnly } from './readOnly';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ReadOnly } from './readOnly.js';
 declare const meta: Meta<typeof ReadOnly>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/readOnly.stories.d.ts.map

@@ -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,kBAAkB,CAAC;AAIvD,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"}
+{"version":3,"file":"readOnly.stories.d.ts","sourceRoot":"","sources":["../src/readOnly.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,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

@@ -1,18 +1,17 @@
 {
   "name": "@kirill.konshin/mui",
   "description": "Utilities",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
+  "hasStorybook": true,
   "scripts": {
     "----- BUILD -----": "",
     "clean": "rm -rf dist .tscache tsconfig.tsbuildinfo",
     "build": "vite build",
-    "build:index": "ctix build",
-    "build:check-types": "attw --pack .",
     "start": "yarn build --watch",
     "wait": "wait-on ./dist/index.js",
     "----- TEST -----": "",
-    "test:disabled": "vitest run --coverage",
+    "test": "vitest run --coverage",
     "test:watch": "vitest watch --coverage",
     "----- STORYBOOK -----": "",
     "storybook:start": "storybook dev -p 6006",
@@ -21,18 +20,33 @@
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@kirill.konshin/auth": "*",
     "@kirill.konshin/utils-private": "*",
     "@mui/material": "^7.3.0",
+    "@toolpad/core": "^0.16.0",
+    "next": "^16.2.12",
     "react": "^19.1.1"
   },
   "peerDependencies": {
+    "@kirill.konshin/auth": "*",
     "@mui/material": "^7",
+    "@toolpad/core": "^0.16",
+    "next": "^16",
     "react": "^19"
   },
   "peerDependenciesMeta": {
+    "@kirill.konshin/auth": {
+      "optional": true
+    },
     "@mui/material": {
       "optional": true
     },
+    "@toolpad/core": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
     "react": {
       "optional": true
     }
@@ -43,6 +57,12 @@
   "author": "Kirill Konshin <kirill@konshin.org> (https://konshin.org)",
   "license": "MIT",
   "exports": {
+    "./admin": {
+      "import": {
+        "import": "./dist/admin/index.js",
+        "types": "./dist/admin/index.d.ts"
+      }
+    },
     ".": {
       "import": {
         "import": "./dist/index.js",
@@ -52,5 +72,18 @@
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.ts"
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kirill-konshin/utils.git",
+    "directory": "packages/mui"
+  },
+  "nx": {
+    "tags": [
+      "platform:next"
+    ]
+  },
+  "files": [
+    "dist"
+  ]
 }

package/.ctirc

@@ -1,20 +0,0 @@
-{
-  "options": [
-    {
-      "mode": "create",
-      "project": "tsconfig.json",
-      "include": "src/**/*.{ts,tsx}",
-      "exclude": [
-        "**/*.stories.*",
-        "**/*.test.*",
-        "**/*.fixture.*"
-      ],
-      "startFrom": "src",
-      "backup": false,
-      "overwrite": true,
-      "generationStyle": "default-alias-named-star",
-      "output": "src",
-      "verbose": true
-    }
-  ]
-}

package/.storybook/main.ts

@@ -1,2 +0,0 @@
-import config from '../../utils-private/.storybook/main';
-export default config;

package/.storybook/preview.ts

@@ -1,2 +0,0 @@
-import preview from '../../utils-private/.storybook/preview';
-export default preview;

package/.turbo/turbo-build.log

@@ -1,24 +0,0 @@
-vite v7.0.6 building SSR bundle for production...
-- ctix 'create' mode start, ...
-✔ /home/runner/work/utils/utils/packages/mui/tsconfig.json loading complete!
-✔ analysis export statements completed!
-- build "index.ts" file start
-- output file exists check, ...
-
-
-✔ ctix 'create' mode complete!
-transforming...
-✓ 6 modules transformed.
-rendering chunks...
-
-[vite:dts] Start generate declaration files...
-dist/appBarOffset.js         0.37 kB │ map: 0.68 kB
-dist/readOnly.js             0.37 kB │ map: 0.68 kB
-dist/index.js                0.40 kB │ map: 0.09 kB
-dist/formLabelLegend.js      0.44 kB │ map: 0.79 kB
-dist/genericControl.js       0.59 kB │ map: 1.16 kB
-dist/formControlFieldset.js  0.68 kB │ map: 1.24 kB
-[vite:dts] Declaration files built in 3345ms.
-
-✓ built in 7.04s
-Updated package.json with exports

package/AGENTS.md

@@ -1,19 +0,0 @@
-# MUI Classes In Selectors
-
-Always use following notation because it's the only one that works with minification:
-
-```tsx
-import Input, { inputClasses } from '@mui/material/Input';
-
-const cmp = (
-    <Box
-        sx={{
-            [`& .${inputClasses.root}`]: {
-                // styles
-            },
-        }}
-    >
-        <Input />
-    </Box>
-);
-```

package/CHANGELOG.md

@@ -1,8 +0,0 @@
-# @kirill.konshin/mui
-
-## 0.0.2
-
-### Patch Changes
-
-- 63fdba8: Agent-assisted refactoring
-- 63fdba8: Divided core to browser/node/worker-specific packages, CTIX upgrade, etc.

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/src/README.md

@@ -1,3 +0,0 @@
-## Prior Art
-
-https://codesandbox.io/p/sandbox/l7vykxl57q MUI v4

package/src/appBarOffset.tsx

@@ -1,8 +0,0 @@
-import React, { FC, memo } from 'react';
-import { default as Box, BoxProps } from '@mui/material/Box';
-
-export type AppBarOffsetProps = BoxProps;
-
-export const AppBarOffset: FC<AppBarOffsetProps> = memo(function AppBarOffset({ sx, ...props }) {
-    return <Box {...props} sx={[({ mixins }) => mixins.toolbar, ...(Array.isArray(sx) ? sx : [sx])]} />;
-});

package/src/formControlFieldset.stories.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { TextField, Stack, InputLabel, RadioGroup, Radio, FormControlLabel, Box } from '@mui/material';
-
-import { GenericControl } from './genericControl';
-import { ReadOnly } from './readOnly';
-import { FormControlFieldset } from './formControlFieldset';
-import { FormLabelLegend } from './formLabelLegend';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta: Meta<typeof GenericControl> = {
-    title: 'MUI / FormControlFieldset',
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {},
-    render: function Render() {
-        return (
-            <Box sx={{ position: 'relative' }}>
-                <Rule top={12} />
-                <Rule top={37} />
-                <Rule top={48} />
-                <Stack direction="row" gap={3} sx={{ alignItems: 'flex-start' }}>
-                    <FormControlFieldset>
-                        <FormLabelLegend>Radios</FormLabelLegend>
-                        <ReadOnly>
-                            {/* TODO The size of the component. small is equivalent to the dense radio styling. */}
-                            <RadioGroup row defaultValue="female" name="radio-buttons-group" sx={{ mt: -1 }}>
-                                <FormControlLabel value="female" label="Female" control={<Radio size="small" />} />
-                                <FormControlLabel value="male" label="Male" control={<Radio size="small" />} />
-                                <FormControlLabel value="other" label="Other" control={<Radio size="small" />} />
-                            </RadioGroup>
-                        </ReadOnly>
-                    </FormControlFieldset>
-
-                    <GenericControl>
-                        <InputLabel shrink>GenericControl</InputLabel>
-                        <ReadOnly>
-                            This is a <code>div</code>, not an input with <code>readOnly</code>
-                        </ReadOnly>
-                    </GenericControl>
-
-                    <FormControlFieldset>
-                        <FormLabelLegend>FormLabelLegend</FormLabelLegend>
-                        <ReadOnly>
-                            This is a <code>div</code>, not an input with <code>readOnly</code>
-                        </ReadOnly>
-                    </FormControlFieldset>
-
-                    <TextField label="TextField" defaultValue="Bar" variant="standard" />
-                </Stack>
-            </Box>
-        );
-    },
-} satisfies Meta<typeof GenericControl>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-function Rule({ top }) {
-    return (
-        <Box sx={{ background: 'red', position: 'absolute', left: 0, top: `${top}px`, width: '100%', height: '1px' }} />
-    );
-}
-
-export const Default: Story = {
-    args: {},
-};

package/src/formControlFieldset.tsx

@@ -1,26 +0,0 @@
-import React, { FC, memo } from 'react';
-import { GenericControl, GenericControlProps } from './genericControl';
-import { inputClasses } from '@mui/material/Input';
-
-export type FormControlFieldsetProps = GenericControlProps;
-
-export const FormControlFieldset: FC<FormControlFieldsetProps> = memo(function FormControlFieldset({
-    children,
-    sx,
-    ...props
-}) {
-    return (
-        <GenericControl
-            {...props}
-            component="fieldset"
-            sx={{
-                ...sx,
-                [`legend + .${inputClasses.root}`]: {
-                    marginTop: 2, //FIXME 16px, hardcoded from @mui/material/Input/Input.js @ 59
-                },
-            }}
-        >
-            {children}
-        </GenericControl>
-    );
-});

package/src/formLabelLegend.stories.tsx

@@ -1,139 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { InputLabel, RadioGroup, Radio, FormControlLabel, Stack, Box } from '@mui/material';
-
-import { FormLabelLegend } from './formLabelLegend';
-import { FormControlFieldset } from './formControlFieldset';
-import { GenericControl } from './genericControl';
-import { ReadOnly } from './readOnly';
-
-const meta: Meta<typeof FormLabelLegend> = {
-    title: 'MUI / FormLabelLegend',
-    component: FormLabelLegend,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        children: { control: 'text' },
-        disabled: { control: 'boolean' },
-        error: { control: 'boolean' },
-        required: { control: 'boolean' },
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {
-        children: 'Form Label Legend',
-    },
-    render: (args) => (
-        <FormControlFieldset>
-            <FormLabelLegend {...args} />
-            <ReadOnly>Content goes here</ReadOnly>
-        </FormControlFieldset>
-    ),
-};
-
-export const WithRadioGroup: Story = {
-    render: () => (
-        <FormControlFieldset>
-            <FormLabelLegend>Select Option</FormLabelLegend>
-            <ReadOnly>
-                <RadioGroup row defaultValue="option1">
-                    <FormControlLabel value="option1" label="Option 1" control={<Radio size="small" />} />
-                    <FormControlLabel value="option2" label="Option 2" control={<Radio size="small" />} />
-                    <FormControlLabel value="option3" label="Option 3" control={<Radio size="small" />} />
-                </RadioGroup>
-            </ReadOnly>
-        </FormControlFieldset>
-    ),
-};
-
-export const Required: Story = {
-    args: {
-        children: 'Required Field',
-        required: true,
-    },
-    render: (args) => (
-        <FormControlFieldset required>
-            <FormLabelLegend {...args} />
-            <ReadOnly>This field is required</ReadOnly>
-        </FormControlFieldset>
-    ),
-};
-
-export const WithError: Story = {
-    args: {
-        children: 'Error State',
-        error: true,
-    },
-    render: (args) => (
-        <FormControlFieldset error>
-            <FormLabelLegend {...args} />
-            <ReadOnly>This field has an error</ReadOnly>
-        </FormControlFieldset>
-    ),
-};
-
-export const Disabled: Story = {
-    args: {
-        children: 'Disabled Field',
-        disabled: true,
-    },
-    render: (args) => (
-        <FormControlFieldset disabled>
-            <FormLabelLegend {...args} />
-            <ReadOnly>This field is disabled</ReadOnly>
-        </FormControlFieldset>
-    ),
-};
-
-export const ComparisonWithInputLabel: Story = {
-    parameters: {
-        docs: {
-            description: {
-                story: 'FormLabelLegend renders as a `<legend>` element, which is semantically correct for fieldsets. InputLabel renders as a `<label>` element.',
-            },
-        },
-    },
-    render: () => (
-        <Stack direction="row" spacing={3}>
-            <FormControlFieldset>
-                <FormLabelLegend>FormLabelLegend</FormLabelLegend>
-                <ReadOnly>Uses legend element</ReadOnly>
-            </FormControlFieldset>
-
-            <GenericControl>
-                <InputLabel shrink>InputLabel</InputLabel>
-                <ReadOnly>Uses label element</ReadOnly>
-            </GenericControl>
-        </Stack>
-    ),
-};
-
-export const MultipleFieldsets: Story = {
-    render: () => (
-        <Stack spacing={3}>
-            <FormControlFieldset>
-                <FormLabelLegend>Personal Information</FormLabelLegend>
-                <ReadOnly>John Doe, john@example.com</ReadOnly>
-            </FormControlFieldset>
-
-            <FormControlFieldset>
-                <FormLabelLegend>Preferences</FormLabelLegend>
-                <ReadOnly>
-                    <RadioGroup row defaultValue="email">
-                        <FormControlLabel value="email" label="Email" control={<Radio size="small" />} />
-                        <FormControlLabel value="sms" label="SMS" control={<Radio size="small" />} />
-                        <FormControlLabel value="none" label="None" control={<Radio size="small" />} />
-                    </RadioGroup>
-                </ReadOnly>
-            </FormControlFieldset>
-        </Stack>
-    ),
-};

package/src/formLabelLegend.tsx

@@ -1,13 +0,0 @@
-import React, { FC, memo } from 'react';
-import { default as InputLabel, InputLabelProps } from '@mui/material/InputLabel';
-
-export type FormLabelLegendProps = InputLabelProps;
-
-export const FormLabelLegend: FC<FormLabelLegendProps> = memo(function FormLabelLegend({ children, ...props }) {
-    return (
-        // sx={(theme) => theme.typography.caption}
-        <InputLabel {...props} shrink={true} component={'legend' as any}>
-            {children}
-        </InputLabel>
-    );
-});

package/src/genericControl.stories.tsx

@@ -1,111 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { InputLabel, Input, TextField, Stack, Box } from '@mui/material';
-
-import { GenericControl } from './genericControl';
-import { ReadOnly } from './readOnly';
-
-const meta: Meta<typeof GenericControl> = {
-    title: 'MUI / GenericControl',
-    component: GenericControl,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        disabled: { control: 'boolean' },
-        error: { control: 'boolean' },
-        fullWidth: { control: 'boolean' },
-        required: { control: 'boolean' },
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {
-        children: (
-            <>
-                <InputLabel shrink>Label</InputLabel>
-                <Input defaultValue="Some value" />
-            </>
-        ),
-    },
-};
-
-export const WithCustomContent: Story = {
-    args: {
-        children: (
-            <>
-                <InputLabel shrink>Custom Content</InputLabel>
-                <ReadOnly>This is custom content inside GenericControl</ReadOnly>
-            </>
-        ),
-    },
-};
-
-export const Disabled: Story = {
-    args: {
-        disabled: true,
-        children: (
-            <>
-                <InputLabel shrink>Disabled Control</InputLabel>
-                <Input defaultValue="Disabled value" />
-            </>
-        ),
-    },
-};
-
-export const WithError: Story = {
-    args: {
-        error: true,
-        children: (
-            <>
-                <InputLabel shrink>Error State</InputLabel>
-                <Input defaultValue="Invalid value" />
-            </>
-        ),
-    },
-};
-
-export const FullWidth: Story = {
-    args: {
-        fullWidth: true,
-        children: (
-            <>
-                <InputLabel shrink>Full Width</InputLabel>
-                <Input defaultValue="Full width input" />
-            </>
-        ),
-    },
-    decorators: [
-        (Story) => (
-            <Box sx={{ width: 400 }}>
-                <Story />
-            </Box>
-        ),
-    ],
-};
-
-export const ComparisonWithTextField: Story = {
-    parameters: {
-        docs: {
-            description: {
-                story: 'GenericControl removes the underline from inputs, making it suitable for read-only or custom content displays.',
-            },
-        },
-    },
-    render: () => (
-        <Stack direction="row" spacing={3}>
-            <GenericControl>
-                <InputLabel shrink>GenericControl</InputLabel>
-                <Input defaultValue="No underline" />
-            </GenericControl>
-
-            <TextField label="TextField" defaultValue="With underline" variant="standard" />
-        </Stack>
-    ),
-};

package/src/genericControl.tsx

@@ -1,22 +0,0 @@
-import React, { FC, memo } from 'react';
-import { FormControlProps, default as FormControl } from '@mui/material/FormControl';
-import { inputClasses } from '@mui/material/Input';
-
-export type GenericControlProps = FormControlProps & { children: any };
-
-export const GenericControl: FC<GenericControlProps> = memo(function GenericControl({ children, sx, ...props }) {
-    return (
-        <FormControl
-            variant="standard"
-            sx={{
-                ...sx,
-                [`& .${inputClasses.root}`]: {
-                    '&:before, &:after': { display: 'none' },
-                },
-            }}
-            {...props}
-        >
-            {children}
-        </FormControl>
-    );
-});

package/src/index.ts

@@ -1,5 +0,0 @@
-export * from './appBarOffset';
-export * from './formControlFieldset';
-export * from './formLabelLegend';
-export * from './genericControl';
-export * from './readOnly';