From e45875859af0905a9bc6dfc388c8fe224e6c979d Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 25 Oct 2021 13:37:51 +0700 Subject: [PATCH 1/9] update codesandbox ci to include joy --- .codesandbox/ci.json | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 15a9793db09626..13b68ac71f09f8 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -15,7 +15,8 @@ "packages/mui-core", "packages/mui-styled-engine", "packages/mui-styled-engine-sc", - "packages/mui-material-next" + "packages/mui-material-next", + "packages/mui-joy" ], "publishDirectory": { "@mui/codemod": "packages/mui-codemod/build", @@ -30,12 +31,14 @@ "@mui/types": "packages/mui-types/build", "@mui/utils": "packages/mui-utils/build", "@mui/core": "packages/mui-core/build", - "@mui/material-next": "packages/mui-material-next/build" + "@mui/material-next": "packages/mui-material-next/build", + "@mui/joy": "packages/mui-joy/build" }, "sandboxes": [ "material-ui-issue-dh2yh", "github/mui-org/material-ui/tree/HEAD/examples/create-react-app", - "github/mui-org/material-ui/tree/HEAD/examples/create-react-app-with-typescript" + "github/mui-org/material-ui/tree/HEAD/examples/create-react-app-with-typescript", + "github/mui-org/material-ui/tree/HEAD/examples/joy-cra-typescript" ], "silent": true } From 83349bb7ce1a652df6f1c0e5e26b7e814cf63de8 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 25 Oct 2021 13:38:11 +0700 Subject: [PATCH 2/9] create joy example template --- examples/joy-cra-typescript/.gitignore | 27 ++++++++++++ examples/joy-cra-typescript/README.md | 38 +++++++++++++++++ examples/joy-cra-typescript/package.json | 22 ++++++++++ .../joy-cra-typescript/public/favicon.ico | Bin 0 -> 3870 bytes examples/joy-cra-typescript/public/index.html | 40 ++++++++++++++++++ .../joy-cra-typescript/public/manifest.json | 15 +++++++ examples/joy-cra-typescript/src/App.tsx | 11 +++++ examples/joy-cra-typescript/src/index.tsx | 5 +++ .../joy-cra-typescript/src/react-app-env.d.ts | 1 + examples/joy-cra-typescript/tsconfig.json | 19 +++++++++ 10 files changed, 178 insertions(+) create mode 100644 examples/joy-cra-typescript/.gitignore create mode 100644 examples/joy-cra-typescript/README.md create mode 100644 examples/joy-cra-typescript/package.json create mode 100644 examples/joy-cra-typescript/public/favicon.ico create mode 100644 examples/joy-cra-typescript/public/index.html create mode 100644 examples/joy-cra-typescript/public/manifest.json create mode 100644 examples/joy-cra-typescript/src/App.tsx create mode 100644 examples/joy-cra-typescript/src/index.tsx create mode 100644 examples/joy-cra-typescript/src/react-app-env.d.ts create mode 100644 examples/joy-cra-typescript/tsconfig.json diff --git a/examples/joy-cra-typescript/.gitignore b/examples/joy-cra-typescript/.gitignore new file mode 100644 index 00000000000000..8d8e757e3e4f45 --- /dev/null +++ b/examples/joy-cra-typescript/.gitignore @@ -0,0 +1,27 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# IDEs and editors +/.idea +/.vscode + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/examples/joy-cra-typescript/README.md b/examples/joy-cra-typescript/README.md new file mode 100644 index 00000000000000..ca8c6861e9aefb --- /dev/null +++ b/examples/joy-cra-typescript/README.md @@ -0,0 +1,38 @@ +# Create React App example with TypeScript + +## How to use + +Download the example [or clone the repo](https://github.com/mui-org/material-ui): + + + +```sh +curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/create-react-app-with-typescript +cd create-react-app-with-typescript +``` + +Install it and run: + +```sh +npm install +npm start +``` + +or: + + + +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript) + +## The idea behind the example + +This example demonstrates how you can use [Create React App](https://github.com/facebookincubator/create-react-app) with [TypeScript](https://github.com/Microsoft/TypeScript). +It includes `@mui/material` and its peer dependencies, including `emotion`, the default style engine in MUI v5. +If you prefer, you can [use styled-components instead](https://mui.com/guides/interoperability/#styled-components). + +## What's next? + + + +You now have a working example project. +You can head back to the documentation, continuing browsing it from the [templates](https://mui.com/getting-started/templates/) section. diff --git a/examples/joy-cra-typescript/package.json b/examples/joy-cra-typescript/package.json new file mode 100644 index 00000000000000..c6ab4cb82d202f --- /dev/null +++ b/examples/joy-cra-typescript/package.json @@ -0,0 +1,22 @@ +{ + "name": "joy-cra-typescript", + "version": "0.1.0", + "private": true, + "dependencies": { + "@emotion/react": "latest", + "@emotion/styled": "latest", + "@mui/joy": "latest", + "@types/react": "latest", + "@types/react-dom": "latest", + "react": "latest", + "react-dom": "latest", + "react-scripts": "latest", + "typescript": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + } +} diff --git a/examples/joy-cra-typescript/public/favicon.ico b/examples/joy-cra-typescript/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..a11777cc471a4344702741ab1c8a588998b1311a GIT binary patch literal 3870 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ literal 0 HcmV?d00001 diff --git a/examples/joy-cra-typescript/public/index.html b/examples/joy-cra-typescript/public/index.html new file mode 100644 index 00000000000000..e683d01321c956 --- /dev/null +++ b/examples/joy-cra-typescript/public/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + My page + + + + + +
+ + + diff --git a/examples/joy-cra-typescript/public/manifest.json b/examples/joy-cra-typescript/public/manifest.json new file mode 100644 index 00000000000000..f99717a5e52188 --- /dev/null +++ b/examples/joy-cra-typescript/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "Your Orders", + "name": "Your Orders", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/examples/joy-cra-typescript/src/App.tsx b/examples/joy-cra-typescript/src/App.tsx new file mode 100644 index 00000000000000..9bc244ad2d7629 --- /dev/null +++ b/examples/joy-cra-typescript/src/App.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { CssVarsProvider } from '@mui/joy/styles'; +import Button from '@mui/joy/Button'; + +export default function App() { + return ( + + + + ); +} diff --git a/examples/joy-cra-typescript/src/index.tsx b/examples/joy-cra-typescript/src/index.tsx new file mode 100644 index 00000000000000..427929c8506cb9 --- /dev/null +++ b/examples/joy-cra-typescript/src/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(, document.querySelector('#root')); diff --git a/examples/joy-cra-typescript/src/react-app-env.d.ts b/examples/joy-cra-typescript/src/react-app-env.d.ts new file mode 100644 index 00000000000000..6431bc5fc6b2c9 --- /dev/null +++ b/examples/joy-cra-typescript/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/joy-cra-typescript/tsconfig.json b/examples/joy-cra-typescript/tsconfig.json new file mode 100644 index 00000000000000..2f4d2c34c4d4cb --- /dev/null +++ b/examples/joy-cra-typescript/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve" + }, + "include": ["src"] +} From ce2665645a291679ffb5d6ea40d3126135a98c9e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 25 Oct 2021 13:42:05 +0700 Subject: [PATCH 3/9] export dummy Button --- packages/mui-joy/src/Button/Button.tsx | 7 +++++++ packages/mui-joy/src/Button/index.ts | 2 ++ packages/mui-joy/src/index.ts | 6 +++++- 3 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 packages/mui-joy/src/Button/Button.tsx create mode 100644 packages/mui-joy/src/Button/index.ts diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx new file mode 100644 index 00000000000000..0adfe8f44858d1 --- /dev/null +++ b/packages/mui-joy/src/Button/Button.tsx @@ -0,0 +1,7 @@ +import * as React from 'react'; + +const Button = (props: JSX.IntrinsicElements['button']) => { + return