Merge pull request #5 from limitkr/m3-cards

prepare v0.2

.eslintignore

@@ -1,2 +1,5 @@
 .eslintrc.json
-dist
+dist
+**/*.stories.ts*
+**/*.test.ts*
+jest.config.ts

README.md

@@ -9,10 +9,15 @@
 ## Quick Start
 
 ### Install
-```
+```bash
 npm i mui-m3-theme
 ```
 
+### Storybook Preview
+```bash
+yarn storybook
+```
+
 ### Usage
 ```tsx
 import React from "react";
@@ -66,16 +71,19 @@ export default function App() {
 ```
 
 ## Status
+### v0.2-beta.1
+Cards components status has been changed to 'Preview'.
+Chips components status has been chagned to 'Work In Process'.
 ### v0.1
-Button components status has been changed to 'preview'.
+Button components status has been changed to 'Preview'.
 
 - ### [Material Design 3 Components](https://m3.material.io/components/all-buttons)
 
 | Components        | Status       | Version |
 |-------------------|--------------|---------|
 | Buttons           | ⚡️Preview      |v0.1     |
-| Cards             | 🚧On progress |    -    |
-| Chips             | 🗒Planned     |    -    |
+| Cards             | ⚡️Preview      |v0.2     |
+| Chips             | 🚧WIP         |    -    |
 | Dialogs           | ❌            |    -    |
 | Navigation bar    | ❌            |    -    |
 | Navigation drawer | ❌            |    -    |

babel.config.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    '@babel/plugin-transform-arrow-functions',
+    '@babel/plugin-transform-runtime',
+  ],
+};

jest.config.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  roots: ['<rootDir>/src'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-m3-theme",
-  "version": "0.1.0-beta.1",
+  "version": "0.2.0-beta.1",
   "description": "Material Design 3(Material You) theme for MUI react components",
   "keywords": [
     "material-ui",
@@ -17,7 +17,6 @@
     "url": "https://github.com/limitkr/mui-m3-theme/issues",
     "email": "[email protected]"
   },
-  "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "files": [
     "dist"
@@ -40,9 +39,11 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.16.7",
     "@babel/preset-env": "^7.16.7",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
+    "@babel/runtime": "^7.16.7",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.1.2",
@@ -52,6 +53,7 @@
     "@storybook/addon-links": "^6.4.9",
     "@storybook/builder-webpack5": "^6.4.9",
     "@storybook/manager-webpack5": "^6.4.9",
+
     "@types/jest": "^27.4.0",
     "@types/react": "^17.0.38",
     "@types/react-color": "^3.0.6",
@@ -81,6 +83,8 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
+    "ts-jest": "^27.1.2",
+    "ts-node": "^10.4.0",
     "typescript": "^4.5.4"
   },
   "peerDependencies": {
@@ -97,11 +101,19 @@
     "@mui/system": "^5.2.6",
     "@storybook/react": "^6.4.9",
     "@testing-library/react": "^12.1.2",
+    "@testing-library/jest-dom": "^5.16.1",
     "@types/chroma-js": "^2.1.3",
     "chroma-js": "^2.1.2",
     "core-js": "3",
     "postcss": "^8.4.5",
+    "prop-types": "^15.8.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
+  },
+  "resolutions": {
+    "immer": "^9.0.6",
+    "glob-parent": "^5.1.2",
+    "browserslist": "^4.16.5",
+    "trim": "^0.0.3"
   }
 }

rollup.config.js

@@ -10,10 +10,9 @@ import babel from '@rollup/plugin-babel';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 import pkg from './package.json';
 
-// const packageJson = require('./package.json');
+process.env.BABEL_ENV = 'production';
 
-const INPUT_FILE_PATH = 'src/index.ts';
-const OUTPUT_NAME = 'Example';
+// const packageJson = require('./package.json');
 
 const GLOBALS = {
   react: 'React',
@@ -66,12 +65,14 @@ export default [
   {
     input: 'src/index.ts',
     output: [
+      /*
       {
         globals: GLOBALS,
         file: pkg.main,
         format: 'cjs',
         sourcemap: true,
       },
+      */
       {
         globals: GLOBALS,
         file: pkg.module,

src/asset/theme.ts

@@ -15,7 +15,7 @@ declare module '@mui/material/styles' {
     default: string;
     on: string;
     variant: string;
-    surfaceVariant: string;
+    onVariant: string;
   }
   interface SimplePaletteColorOptions {
     main: string;

src/components/Button/Button.stories.tsx

@@ -1,7 +1,12 @@
-/* eslint-disable react/destructuring-assignment */
-/* eslint-disable react/function-component-definition */
 import React from 'react';
-import { Box, CssBaseline, Grid, Stack, ThemeProvider } from '@mui/material';
+import {
+  Box,
+  CssBaseline,
+  Grid,
+  Typography,
+  Stack,
+  ThemeProvider,
+} from '@mui/material';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { ColorResult, RGBColor, SketchPicker } from 'react-color';
 import {
@@ -40,6 +45,9 @@ const ButtonPreviewTemplate: ComponentStory<typeof Button> = (args) => {
           />
           <Grid container item spacing={2}>
             <Grid item xs>
+              <Typography sx={{ mb: 2 }} variant="h3" fontWeight="bold">
+                Buttons
+              </Typography>
               <Stack direction="row" spacing={2}>
                 <Button variant={args.variant} color="primary">
                   {args.children}

src/components/Button/Button.ts

@@ -4,7 +4,6 @@ import {
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import chroma from 'chroma-js';
-import React from 'react';
 
 declare module '@mui/material/Button' {
   interface ButtonPropsColorOverrides {

src/components/Cards/Card.stories.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import {
+  Box,
+  CssBaseline,
+  Grid,
+  Stack,
+  ThemeProvider,
+  Typography,
+} from '@mui/material';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ColorResult, RGBColor, SketchPicker } from 'react-color';
+import {
+  createM3Palette,
+  unstable_createMaterialDesign3Theme,
+} from '../../asset';
+import { Card, CardContent, CardActions } from '.';
+import { Button } from '../Button';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'ReactComponentLibrary/Card',
+  component: Card,
+} as ComponentMeta<typeof Card>;
+
+const CardPreviewTemplate: ComponentStory<typeof Card> = (args) => {
+  const [hexColor, setHexColor] = React.useState<RGBColor>({
+    r: 103,
+    g: 80,
+    b: 164,
+    a: 1,
+  });
+  const handleChangeComplete = (color: ColorResult) => {
+    setHexColor(color.rgb);
+  };
+  const m3Palette = createM3Palette(hexColor);
+  const myTheme = unstable_createMaterialDesign3Theme(m3Palette);
+
+  return (
+    <ThemeProvider theme={myTheme}>
+      <CssBaseline />
+      <Box sx={{ flexGrow: 1 }}>
+        <Grid container spacing={2}>
+          <SketchPicker
+            color={hexColor}
+            onChangeComplete={handleChangeComplete}
+          />
+          <Grid container item spacing={2}>
+            <Grid item xs>
+              <Typography sx={{ mb: 2 }} variant="h3" fontWeight="bold">
+                Cards
+              </Typography>
+              <Stack
+                direction="row"
+                spacing={2}
+                alignItems="center"
+                justifyContent="center"
+              >
+                <Card
+                  sx={{ maxWidth: '275px', position: 'relative' }}
+                  variant={args.variant} // color="primary"
+                  clickable
+                >
+                  <CardContent>
+                    <Typography
+                      sx={{ fontSize: 14 }}
+                      color="text.secondary"
+                      gutterBottom
+                    >
+                      {args.children}
+                    </Typography>
+                    <Typography fontWeight="bold" variant="h5" component="div">
+                      Title
+                    </Typography>
+                    <Typography sx={{ mb: 1.5 }} color="text.secondary">
+                      Subhead
+                    </Typography>
+                    <Typography variant="body2">
+                      Material is a design system - backed by open source code -
+                      that helps teams build high-quality digital experiences.
+                    </Typography>
+                  </CardContent>
+                </Card>
+
+                <Card sx={{ maxWidth: '300px' }} variant={args.variant}>
+                  <CardContent>
+                    <Typography
+                      sx={{ fontSize: 14 }}
+                      color="text.secondary"
+                      gutterBottom
+                    >
+                      {args.children}
+                    </Typography>
+                    <Typography fontWeight="bold" variant="h5" component="div">
+                      Title
+                    </Typography>
+                    <Typography sx={{ mb: 1.5 }} color="text.secondary">
+                      Subhead
+                    </Typography>
+                    <Typography variant="body2">
+                      Material is a design system - backed by open source code -
+                      that helps teams build high-quality digital experiences.
+                    </Typography>
+                  </CardContent>
+                  <CardActions>
+                    <Button variant="contained">Learn More</Button>
+                    <Button variant="outlined">Learn More</Button>
+                  </CardActions>
+                </Card>
+              </Stack>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Box>
+    </ThemeProvider>
+  );
+};
+
+export const ContainedCardView = CardPreviewTemplate.bind({});
+export const OutlinedCardView = CardPreviewTemplate.bind({});
+export const ElevatedCardView = CardPreviewTemplate.bind({});
+
+ContainedCardView.args = {
+  children: 'Filled Card',
+  variant: 'contained',
+};
+
+OutlinedCardView.args = {
+  children: 'Outlined Card',
+  variant: 'outlined',
+};
+
+ElevatedCardView.args = {
+  children: 'Elevated Card',
+  variant: 'elevated',
+};

src/components/Cards/Card.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { Card, CardContent, CardActions } from '.';
+
+describe('Button', () => {
+  test('renders the Button component', () => {
+    render(
+      <Card variant="elevated">
+        <CardContent>Content</CardContent>
+        <CardActions>Button Actions</CardActions>
+      </Card>
+    );
+  });
+});