From 37d4ceb8e621adf633f7457381735575a50acab6 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Thu, 19 Oct 2023 15:49:45 +0530 Subject: [PATCH] [zero][vite][app] Showcase usage and transformation of UI library imported from node_modules --- apps/local-library/index.d.ts | 7 ++++ apps/local-library/index.js | 32 +++++++++++++++ apps/local-library/package.json | 7 ++++ apps/zero-runtime-vite-app/package.json | 1 + apps/zero-runtime-vite-app/src/App.tsx | 50 ++--------------------- apps/zero-runtime-vite-app/vite.config.ts | 1 + yarn.lock | 22 +--------- 7 files changed, 53 insertions(+), 67 deletions(-) create mode 100644 apps/local-library/index.d.ts create mode 100644 apps/local-library/index.js create mode 100644 apps/local-library/package.json diff --git a/apps/local-library/index.d.ts b/apps/local-library/index.d.ts new file mode 100644 index 00000000000000..f86ad5a80eeab1 --- /dev/null +++ b/apps/local-library/index.d.ts @@ -0,0 +1,7 @@ +// eslint-disable-next-line import/prefer-default-export +export const bounceAnim: string; +export const Button: React.ComponentType< + JSX.IntrinsicElements['button'] & { + isRed?: boolean; + } +>; diff --git a/apps/local-library/index.js b/apps/local-library/index.js new file mode 100644 index 00000000000000..8acc7f6979abdd --- /dev/null +++ b/apps/local-library/index.js @@ -0,0 +1,32 @@ +import { keyframes, styled } from '@mui/zero-runtime'; + +// eslint-disable-next-line import/prefer-default-export +export const bounceAnim = keyframes({ + 'from, 20%, 53%, 80%, to': { + transform: 'translate3d(0,0,0)', + }, + '40%, 43%': { + transform: 'translate3d(0, -30px, 0)', + }, + '70%': { + transform: 'translate3d(0, -15px, 0)', + }, + '90%': { + transform: 'translate3d(0,-4px,0)', + }, +}); + +export const Button = styled('button', { + name: 'MuiButton', + slot: 'Root', +})( + ({ theme }) => ({ + fontFamily: 'sans-serif', + backgroundColor: theme.palette.primary.main, + }), + { + fontFamily: 'sans-serif', + color: (props) => (props.isRed ? 'primary.main' : 'secondary.main'), + '--css-variable': (props) => (props.isRed ? 'palette.primary.main' : 'palette.secondary.main'), + }, +); diff --git a/apps/local-library/package.json b/apps/local-library/package.json new file mode 100644 index 00000000000000..8d93b14e71afaf --- /dev/null +++ b/apps/local-library/package.json @@ -0,0 +1,7 @@ +{ + "name": "local-ui-lib", + "version": "0.0.0", + "dependencies": { + "zero-runtime": "*" + } +} diff --git a/apps/zero-runtime-vite-app/package.json b/apps/zero-runtime-vite-app/package.json index 22f1f6836770e4..895c756648e039 100644 --- a/apps/zero-runtime-vite-app/package.json +++ b/apps/zero-runtime-vite-app/package.json @@ -26,6 +26,7 @@ "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "jsdom": "^22.1.0", + "local-library": "file:../local-library", "vite": "4.4.11", "vitest": "^0.34.6" }, diff --git a/apps/zero-runtime-vite-app/src/App.tsx b/apps/zero-runtime-vite-app/src/App.tsx index d561432c3440ac..c0d948b68696d8 100644 --- a/apps/zero-runtime-vite-app/src/App.tsx +++ b/apps/zero-runtime-vite-app/src/App.tsx @@ -1,52 +1,8 @@ import * as React from 'react'; -import { styled, keyframes } from '@mui/zero-runtime'; +import { styled } from '@mui/zero-runtime'; +import { Button, bounceAnim } from 'local-library'; import Slider from './Slider/ZeroSlider'; -const bounce = keyframes` - from, 20%, 53%, 80%, to { - transform: translate3d(0,0,0); - } - 40%, 43% { - transform: translate3d(0, -30px, 0); - } - 70% { - transform: translate3d(0, -15px, 0); - } - 90% { - transform: translate3d(0,-4px,0); - } -`; - -const bounceAnim = keyframes({ - 'from, 20%, 53%, 80%, to': { - transform: 'translate3d(0,0,0)', - }, - '40%, 43%': { - transform: 'translate3d(0, -30px, 0)', - }, - '70%': { - transform: 'translate3d(0, -15px, 0)', - }, - '90%': { - transform: 'translate3d(0,-4px,0)', - }, -}); - -const Button = styled('button', { - name: 'MuiButton', - slot: 'Root', -})( - ({ theme }: any) => ({ - fontFamily: 'sans-serif', - backgroundColor: [theme.palette.primary.main, 'text.primary', 'background.paper'], - }), - { - fontFamily: 'sans-serif', - // p: (props: any) => (props.isRed ? 10 : 20), - color: (props: any) => (props.isRed ? 'primary.main' : 'secondary.main'), - }, -); - const ShowCaseDiv = styled('div')({ [`.${Button}`]: { color: '#f94564', @@ -59,7 +15,7 @@ const HalfWidth = styled.div({ maxHeight: 100, padding: 20, border: '1px solid #ccc', - animation: [`${bounce} 1s ease infinite`, `${bounceAnim} 1s ease infinite`], + animation: `${bounceAnim} 1s ease infinite`, }); export default function App({ isRed }: any) { diff --git a/apps/zero-runtime-vite-app/vite.config.ts b/apps/zero-runtime-vite-app/vite.config.ts index d2cf75e7d9f4d9..08de73e8aed451 100644 --- a/apps/zero-runtime-vite-app/vite.config.ts +++ b/apps/zero-runtime-vite-app/vite.config.ts @@ -19,6 +19,7 @@ export default defineConfig({ zeroVitePlugin({ cssVariablesPrefix: 'app', theme, + transformLibraries: ['local-library'], }), reactPlugin(), splitVendorChunkPlugin(), diff --git a/yarn.lock b/yarn.lock index 65bbfb6360a120..d632a71fc58e62 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2268,16 +2268,6 @@ find-up "^5.0.0" minimatch "^9.0.3" -"@linaria/vite@^4.5.4": - version "4.5.4" - resolved "https://registry.yarnpkg.com/@linaria/vite/-/vite-4.5.4.tgz#bbccbd3de67715a8b6759a578c086c1ab31ec8d2" - integrity sha512-YhaLgTAfE7xzRLJwxWjo0Ak/YOJ+kPWuOm3lrkziclsvf1bbTUHlecmvth+2KuJG8HEPReekuyDErnwIQoD6sA== - dependencies: - "@linaria/babel-preset" "^4.5.4" - "@linaria/logger" "^4.5.0" - "@linaria/utils" "^4.5.3" - "@rollup/pluginutils" "^4.1.0" - "@material-ui/types@^4.0.0": version "4.1.1" resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-4.1.1.tgz#b65e002d926089970a3271213a3ad7a21b17f02b" @@ -3088,14 +3078,6 @@ "@rollup/pluginutils" "^5.0.1" magic-string "^0.30.3" -"@rollup/pluginutils@^4.1.0": - version "4.2.1" - resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d" - integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ== - dependencies: - estree-walker "^2.0.1" - picomatch "^2.2.2" - "@rollup/pluginutils@^5.0.1": version "5.0.4" resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.4.tgz#74f808f9053d33bafec0cc98e7b835c9667d32ba" @@ -8200,7 +8182,7 @@ estree-walker@^0.6.1: resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362" integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w== -estree-walker@^2.0.1, estree-walker@^2.0.2: +estree-walker@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac" integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w== @@ -13726,7 +13708,7 @@ picocolors@^1.0.0: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== -picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1: +picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==