Skip to content

Commit

Permalink
[pigment-css] Add stringifyTheme for Pigment CSS integration (mui#4…
Browse files Browse the repository at this point in the history 
…2476)
  • Loading branch information
@siriwatknp @joserodolfofreitas
siriwatknp authored and joserodolfofreitas committed Jul 29, 2024
1 parent 0198a24 commit 1a93238
Show file tree
Hide file tree
Showing 31 changed files with 923 additions and 104 deletions.
2 changes: 1 addition & 1 deletion apps/local-ui-lib/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@
"version": "0.0.1",
"private": true,
"dependencies": {
"@pigment-css/react": "^0.0.12"
"@pigment-css/react": "^0.0.13"
}
}
3 changes: 2 additions & 1 deletion apps/pigment-css-next-app/next.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-env node */
// eslint-ignore-next-line import/no-unresolved
const { withPigment } = require('@pigment-css/nextjs-plugin');
const { extendTheme } = require('@mui/material/styles');
const { extendTheme, stringifyTheme } = require('@mui/material/styles');

/**
* @typedef {import('@pigment-css/nextjs-plugin').PigmentOptions} PigmentOptions
Expand Down Expand Up @@ -95,6 +95,7 @@ const theme = extendTheme({
theme.getColorSchemeSelector = (colorScheme) => {
return `@media (prefers-color-scheme: ${colorScheme})`;
};
theme.toRuntimeSource = stringifyTheme;

function innerNoop() {
return null;
Expand Down
4 changes: 2 additions & 2 deletions apps/pigment-css-next-app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"clean": "rimraf .next"
},
"dependencies": {
"@pigment-css/react": "^0.0.12",
"@pigment-css/react": "^0.0.13",
"@mui/utils": "workspace:^",
"@mui/base": "workspace:^",
"@mui/lab": "workspace:^",
Expand All @@ -24,7 +24,7 @@
"next": "latest"
},
"devDependencies": {
"@pigment-css/nextjs-plugin": "^0.0.12",
"@pigment-css/nextjs-plugin": "^0.0.14",
"@types/node": "^20.5.7",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.3.0",
Expand Down
37 changes: 37 additions & 0 deletions apps/pigment-css-next-app/src/app/material-ui/react-paper/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
'use client';
import * as React from 'react';
import Elevation from '../../../../../../docs/data/material/components/paper/Elevation';
import SimplePaper from '../../../../../../docs/data/material/components/paper/SimplePaper';
import SquareCorners from '../../../../../../docs/data/material/components/paper/SquareCorners';
import Variants from '../../../../../../docs/data/material/components/paper/Variants';

export default function Paper() {
return (
<React.Fragment>
<section>
<h2> Elevation</h2>
<div className="demo-container">
<Elevation />
</div>
</section>
<section>
<h2> Simple Paper</h2>
<div className="demo-container">
<SimplePaper />
</div>
</section>
<section>
<h2> Square Corners</h2>
<div className="demo-container">
<SquareCorners />
</div>
</section>
<section>
<h2> Variants</h2>
<div className="demo-container">
<Variants />
</div>
</section>
</React.Fragment>
);
}
142 changes: 142 additions & 0 deletions apps/pigment-css-next-app/src/app/material-ui/react-tabs/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
'use client';
import * as React from 'react';
import AccessibleTabs1 from '../../../../../../docs/data/material/components/tabs/AccessibleTabs1';
import AccessibleTabs2 from '../../../../../../docs/data/material/components/tabs/AccessibleTabs2';
import BasicTabs from '../../../../../../docs/data/material/components/tabs/BasicTabs';
import CenteredTabs from '../../../../../../docs/data/material/components/tabs/CenteredTabs';
import ColorTabs from '../../../../../../docs/data/material/components/tabs/ColorTabs';
import CustomizedTabs from '../../../../../../docs/data/material/components/tabs/CustomizedTabs';
import DisabledTabs from '../../../../../../docs/data/material/components/tabs/DisabledTabs';
import FullWidthTabs from '../../../../../../docs/data/material/components/tabs/FullWidthTabs';
import IconLabelTabs from '../../../../../../docs/data/material/components/tabs/IconLabelTabs';
import IconPositionTabs from '../../../../../../docs/data/material/components/tabs/IconPositionTabs';
import IconTabs from '../../../../../../docs/data/material/components/tabs/IconTabs';
import LabTabs from '../../../../../../docs/data/material/components/tabs/LabTabs';
import NavTabs from '../../../../../../docs/data/material/components/tabs/NavTabs';
import ScrollableTabsButtonAuto from '../../../../../../docs/data/material/components/tabs/ScrollableTabsButtonAuto';
import ScrollableTabsButtonForce from '../../../../../../docs/data/material/components/tabs/ScrollableTabsButtonForce';
import ScrollableTabsButtonPrevent from '../../../../../../docs/data/material/components/tabs/ScrollableTabsButtonPrevent';
import ScrollableTabsButtonVisible from '../../../../../../docs/data/material/components/tabs/ScrollableTabsButtonVisible';
import TabsWrappedLabel from '../../../../../../docs/data/material/components/tabs/TabsWrappedLabel';
import VerticalTabs from '../../../../../../docs/data/material/components/tabs/VerticalTabs';

export default function Tabs() {
return (
<React.Fragment>
<section>
<h2> Accessible Tabs1</h2>
<div className="demo-container">
<AccessibleTabs1 />
</div>
</section>
<section>
<h2> Accessible Tabs2</h2>
<div className="demo-container">
<AccessibleTabs2 />
</div>
</section>
<section>
<h2> Basic Tabs</h2>
<div className="demo-container">
<BasicTabs />
</div>
</section>
<section>
<h2> Centered Tabs</h2>
<div className="demo-container">
<CenteredTabs />
</div>
</section>
<section>
<h2> Color Tabs</h2>
<div className="demo-container">
<ColorTabs />
</div>
</section>
<section>
<h2> Customized Tabs</h2>
<div className="demo-container">
<CustomizedTabs />
</div>
</section>
<section>
<h2> Disabled Tabs</h2>
<div className="demo-container">
<DisabledTabs />
</div>
</section>
<section>
<h2> Full Width Tabs</h2>
<div className="demo-container">
<FullWidthTabs />
</div>
</section>
<section>
<h2> Icon Label Tabs</h2>
<div className="demo-container">
<IconLabelTabs />
</div>
</section>
<section>
<h2> Icon Position Tabs</h2>
<div className="demo-container">
<IconPositionTabs />
</div>
</section>
<section>
<h2> Icon Tabs</h2>
<div className="demo-container">
<IconTabs />
</div>
</section>
<section>
<h2> Lab Tabs</h2>
<div className="demo-container">
<LabTabs />
</div>
</section>
<section>
<h2> Nav Tabs</h2>
<div className="demo-container">
<NavTabs />
</div>
</section>
<section>
<h2> Scrollable Tabs Button Auto</h2>
<div className="demo-container">
<ScrollableTabsButtonAuto />
</div>
</section>
<section>
<h2> Scrollable Tabs Button Force</h2>
<div className="demo-container">
<ScrollableTabsButtonForce />
</div>
</section>
<section>
<h2> Scrollable Tabs Button Prevent</h2>
<div className="demo-container">
<ScrollableTabsButtonPrevent />
</div>
</section>
<section>
<h2> Scrollable Tabs Button Visible</h2>
<div className="demo-container">
<ScrollableTabsButtonVisible />
</div>
</section>
<section>
<h2> Tabs Wrapped Label</h2>
<div className="demo-container">
<TabsWrappedLabel />
</div>
</section>
<section>
<h2> Vertical Tabs</h2>
<div className="demo-container">
<VerticalTabs />
</div>
</section>
</React.Fragment>
);
}
121 changes: 121 additions & 0 deletions apps/pigment-css-next-app/src/app/material-ui/react-tooltip/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
'use client';
import * as React from 'react';
import AccessibilityTooltips from '../../../../../../docs/data/material/components/tooltips/AccessibilityTooltips';
import AnchorElTooltips from '../../../../../../docs/data/material/components/tooltips/AnchorElTooltips';
import ArrowTooltips from '../../../../../../docs/data/material/components/tooltips/ArrowTooltips';
import BasicTooltip from '../../../../../../docs/data/material/components/tooltips/BasicTooltip';
import ControlledTooltips from '../../../../../../docs/data/material/components/tooltips/ControlledTooltips';
import CustomizedTooltips from '../../../../../../docs/data/material/components/tooltips/CustomizedTooltips';
import DelayTooltips from '../../../../../../docs/data/material/components/tooltips/DelayTooltips';
import DisabledTooltips from '../../../../../../docs/data/material/components/tooltips/DisabledTooltips';
import FollowCursorTooltips from '../../../../../../docs/data/material/components/tooltips/FollowCursorTooltips';
import NonInteractiveTooltips from '../../../../../../docs/data/material/components/tooltips/NonInteractiveTooltips';
import PositionedTooltips from '../../../../../../docs/data/material/components/tooltips/PositionedTooltips';
import TooltipMargin from '../../../../../../docs/data/material/components/tooltips/TooltipMargin';
import TooltipOffset from '../../../../../../docs/data/material/components/tooltips/TooltipOffset';
import TransitionsTooltips from '../../../../../../docs/data/material/components/tooltips/TransitionsTooltips';
import TriggersTooltips from '../../../../../../docs/data/material/components/tooltips/TriggersTooltips';
import VariableWidth from '../../../../../../docs/data/material/components/tooltips/VariableWidth';

export default function Tooltips() {
return (
<React.Fragment>
<section>
<h2> Accessibility Tooltips</h2>
<div className="demo-container">
<AccessibilityTooltips />
</div>
</section>
<section>
<h2> Anchor El Tooltips</h2>
<div className="demo-container">
<AnchorElTooltips />
</div>
</section>
<section>
<h2> Arrow Tooltips</h2>
<div className="demo-container">
<ArrowTooltips />
</div>
</section>
<section>
<h2> Basic Tooltip</h2>
<div className="demo-container">
<BasicTooltip />
</div>
</section>
<section>
<h2> Controlled Tooltips</h2>
<div className="demo-container">
<ControlledTooltips />
</div>
</section>
<section>
<h2> Customized Tooltips</h2>
<div className="demo-container">
<CustomizedTooltips />
</div>
</section>
<section>
<h2> Delay Tooltips</h2>
<div className="demo-container">
<DelayTooltips />
</div>
</section>
<section>
<h2> Disabled Tooltips</h2>
<div className="demo-container">
<DisabledTooltips />
</div>
</section>
<section>
<h2> Follow Cursor Tooltips</h2>
<div className="demo-container">
<FollowCursorTooltips />
</div>
</section>
<section>
<h2> Non Interactive Tooltips</h2>
<div className="demo-container">
<NonInteractiveTooltips />
</div>
</section>
<section>
<h2> Positioned Tooltips</h2>
<div className="demo-container">
<PositionedTooltips />
</div>
</section>
<section>
<h2> Tooltip Margin</h2>
<div className="demo-container">
<TooltipMargin />
</div>
</section>
<section>
<h2> Tooltip Offset</h2>
<div className="demo-container">
<TooltipOffset />
</div>
</section>
<section>
<h2> Transitions Tooltips</h2>
<div className="demo-container">
<TransitionsTooltips />
</div>
</section>
<section>
<h2> Triggers Tooltips</h2>
<div className="demo-container">
<TriggersTooltips />
</div>
</section>
<section>
<h2> Variable Width</h2>
<div className="demo-container">
<VariableWidth />
</div>
</section>
</React.Fragment>
);
}
4 changes: 2 additions & 2 deletions apps/pigment-css-vite-app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"build": "vite build"
},
"dependencies": {
"@pigment-css/react": "^0.0.12",
"@pigment-css/react": "^0.0.13",
"@mui/utils": "workspace:^",
"@mui/base": "workspace:^",
"@mui/lab": "workspace:^",
Expand All @@ -27,7 +27,7 @@
"devDependencies": {
"@babel/preset-react": "^7.24.7",
"@babel/preset-typescript": "^7.24.7",
"@pigment-css/vite-plugin": "^0.0.12",
"@pigment-css/vite-plugin": "^0.0.13",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.0",
Expand Down
Loading

0 comments on commit 1a93238

Please sign in to comment.