Skip to content

Commit

Permalink
[pigment-css][material-ui] Render badge demos (mui#41353)
Browse files Browse the repository at this point in the history
  • Loading branch information
@siriwatknp
siriwatknp authored Mar 5, 2024
1 parent 0a478bb commit fff0501
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 6 deletions.
72 changes: 72 additions & 0 deletions apps/pigment-next-app/src/app/material-ui/react-badge/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
'use client';
import * as React from 'react';
import AccessibleBadges from '../../../../../../docs/data/material/components/badges/AccessibleBadges';
import BadgeMax from '../../../../../../docs/data/material/components/badges/BadgeMax';
import BadgeOverlap from '../../../../../../docs/data/material/components/badges/BadgeOverlap';
import BadgeVisibility from '../../../../../../docs/data/material/components/badges/BadgeVisibility';
import ColorBadge from '../../../../../../docs/data/material/components/badges/ColorBadge';
import CustomizedBadges from '../../../../../../docs/data/material/components/badges/CustomizedBadges';
import DotBadge from '../../../../../../docs/data/material/components/badges/DotBadge';
import ShowZeroBadge from '../../../../../../docs/data/material/components/badges/ShowZeroBadge';
import SimpleBadge from '../../../../../../docs/data/material/components/badges/SimpleBadge';

export default function Badges() {
return (
<React.Fragment>
<section>
<h2> Accessible Badges</h2>
<div className="demo-container">
<AccessibleBadges />
</div>
</section>
<section>
<h2> Badge Max</h2>
<div className="demo-container">
<BadgeMax />
</div>
</section>
<section>
<h2> Badge Overlap</h2>
<div className="demo-container">
<BadgeOverlap />
</div>
</section>
<section>
<h2> Badge Visibility</h2>
<div className="demo-container">
<BadgeVisibility />
</div>
</section>
<section>
<h2> Color Badge</h2>
<div className="demo-container">
<ColorBadge />
</div>
</section>
<section>
<h2> Customized Badges</h2>
<div className="demo-container">
<CustomizedBadges />
</div>
</section>
<section>
<h2> Dot Badge</h2>
<div className="demo-container">
<DotBadge />
</div>
</section>
<section>
<h2> Show Zero Badge</h2>
<div className="demo-container">
<ShowZeroBadge />
</div>
</section>
<section>
<h2> Simple Badge</h2>
<div className="demo-container">
<SimpleBadge />
</div>
</section>
</React.Fragment>
);
}
73 changes: 73 additions & 0 deletions apps/pigment-vite-app/src/pages/material-ui/react-badge.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import * as React from 'react';
import MaterialUILayout from '../../Layout';
import AccessibleBadges from '../../../../../docs/data/material/components/badges/AccessibleBadges.tsx';
import BadgeMax from '../../../../../docs/data/material/components/badges/BadgeMax.tsx';
import BadgeOverlap from '../../../../../docs/data/material/components/badges/BadgeOverlap.tsx';
import BadgeVisibility from '../../../../../docs/data/material/components/badges/BadgeVisibility.tsx';
import ColorBadge from '../../../../../docs/data/material/components/badges/ColorBadge.tsx';
import CustomizedBadges from '../../../../../docs/data/material/components/badges/CustomizedBadges.tsx';
import DotBadge from '../../../../../docs/data/material/components/badges/DotBadge.tsx';
import ShowZeroBadge from '../../../../../docs/data/material/components/badges/ShowZeroBadge.tsx';
import SimpleBadge from '../../../../../docs/data/material/components/badges/SimpleBadge.tsx';

export default function Badges() {
return (
<MaterialUILayout>
<h1>Badges</h1>
<section>
<h2> Accessible Badges</h2>
<div className="demo-container">
<AccessibleBadges />
</div>
</section>
<section>
<h2> Badge Max</h2>
<div className="demo-container">
<BadgeMax />
</div>
</section>
<section>
<h2> Badge Overlap</h2>
<div className="demo-container">
<BadgeOverlap />
</div>
</section>
<section>
<h2> Badge Visibility</h2>
<div className="demo-container">
<BadgeVisibility />
</div>
</section>
<section>
<h2> Color Badge</h2>
<div className="demo-container">
<ColorBadge />
</div>
</section>
<section>
<h2> Customized Badges</h2>
<div className="demo-container">
<CustomizedBadges />
</div>
</section>
<section>
<h2> Dot Badge</h2>
<div className="demo-container">
<DotBadge />
</div>
</section>
<section>
<h2> Show Zero Badge</h2>
<div className="demo-container">
<ShowZeroBadge />
</div>
</section>
<section>
<h2> Simple Badge</h2>
<div className="demo-container">
<SimpleBadge />
</div>
</section>
</MaterialUILayout>
);
}
12 changes: 6 additions & 6 deletions scripts/zero-render-mui-demos.mjs → scripts/pigmentcss-render-mui-demos.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,16 +70,16 @@ ${renders.join('\n')}
}
`;

// Create the page in zero-runtime apps
// Create the page in pigment apps
const nextFilepath = path.join(
process.cwd(),
`apps/zero-runtime-next-app/src/app/material-ui/${args[0]}/page.tsx`,
`apps/pigment-next-app/src/app/material-ui/${args[0]}/page.tsx`,
);
const prettiedNextFileContent = await prettier.format(nextFileContent, {
...prettierConfig,
filepath: nextFilepath,
});
await fse.mkdirp(`apps/zero-runtime-next-app/src/app/material-ui/${args[0]}`);
await fse.mkdirp(`apps/pigment-next-app/src/app/material-ui/${args[0]}`);
await fse.writeFile(nextFilepath, prettiedNextFileContent);

/**
Expand All @@ -102,16 +102,16 @@ ${renders.join('\n')}
);
}
`;
// Create the page in zero-runtime apps
// Create the page in pigment apps
const viteFilepath = path.join(
process.cwd(),
`apps/zero-runtime-vite-app/src/pages/material-ui/${args[0]}.tsx`,
`apps/pigment-vite-app/src/pages/material-ui/${args[0]}.tsx`,
);
const prettiedViteFileContent = await prettier.format(viteFileContent, {
...prettierConfig,
filepath: viteFilepath,
});
await fse.mkdirp(`apps/zero-runtime-vite-app/src/pages/material-ui`);
await fse.mkdirp(`apps/pigment-vite-app/src/pages/material-ui`);
await fse.writeFile(viteFilepath, prettiedViteFileContent);
}

Expand Down

0 comments on commit fff0501

Please sign in to comment.