diff --git a/assets/logo/logo-wordmark.svg b/assets/logo/logo-wordmark.svg index 6faf5e5d08..14e0208e4a 100644 --- a/assets/logo/logo-wordmark.svg +++ b/assets/logo/logo-wordmark.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/ts-packages/react-components/.storybook/preview.js b/ts-packages/react-components/.storybook/preview.js index dfde181bc8..f0e9fe9e5c 100644 --- a/ts-packages/react-components/.storybook/preview.js +++ b/ts-packages/react-components/.storybook/preview.js @@ -1,4 +1,5 @@ import { NymThemeProvider } from '@nymproject/mui-theme'; +import { Box, Paper } from '@mui/material'; export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, @@ -10,26 +11,32 @@ export const parameters = { }, } -export const globalTypes = { - theme: { - name: 'Theme', - description: 'Global theme for components', - defaultValue: 'light', - toolbar: { - icon: 'circlehollow', - // Array of plain string values or MenuItem shape (see below) - items: ['light', 'dark'], - // Property that specifies if the name of the item will be displayed - showName: true, - }, - }, -}; - const withThemeProvider=(Story,context)=>{ return ( - - - +
+
+ + theme.palette.background.default, color: (theme) => theme.palette.text.primary }}> + + + +

Light mode

+ + +
+
+ + theme.palette.background.default, color: (theme) => theme.palette.text.primary }}> + + + +

Dark mode

+ + +
+
) } + export const decorators = [withThemeProvider]; diff --git a/ts-packages/react-components/package.json b/ts-packages/react-components/package.json index 43e829a7b9..6aa937dec2 100644 --- a/ts-packages/react-components/package.json +++ b/ts-packages/react-components/package.json @@ -14,10 +14,8 @@ }, "devDependencies": { "@babel/core": "^7.17.5", - "@mui/material": "^5.0.1", - "@mui/styles": "^5.0.1", - "@mui/system": "^5.0.1", "@nymproject/eslint-config-react-typescript": "^1.0.0", + "@mui/lab": "^5.0.0-alpha.72", "@storybook/addon-actions": "^6.4.19", "@storybook/addon-essentials": "^6.4.19", "@storybook/addon-interactions": "^6.4.19", @@ -27,6 +25,7 @@ "@storybook/react": "^6.4.19", "@storybook/testing-library": "^0.0.9", "@svgr/webpack": "^6.1.1", + "@types/flat": "^5.0.2", "@types/react": "^17.0.39", "@typescript-eslint/eslint-plugin": "^5.13.0", "@typescript-eslint/parser": "^5.13.0", @@ -58,5 +57,7 @@ "storybook": "start-storybook -p 6006", "storybook:build": "build-storybook" }, - "dependencies": {} + "dependencies": { + "flat": "^5.0.2" + } } diff --git a/ts-packages/react-components/src/components/logo/NymWordmark.tsx b/ts-packages/react-components/src/components/logo/NymWordmark.tsx index c8417d8dd0..d139afd61c 100644 --- a/ts-packages/react-components/src/components/logo/NymWordmark.tsx +++ b/ts-packages/react-components/src/components/logo/NymWordmark.tsx @@ -1,5 +1,9 @@ import * as React from 'react'; import Wordmark from '@assets/logo/logo-wordmark.svg'; +import { useTheme } from '@mui/material'; import { LogoProps } from './LogoProps'; -export const NymWordmark: React.FC = ({ height, width }) => ; +export const NymWordmark: React.FC = ({ height, width }) => { + const theme = useTheme(); + return ; +}; diff --git a/ts-packages/react-components/src/playground/index.tsx b/ts-packages/react-components/src/playground/index.tsx index 77e6de82ba..e9d137ea42 100644 --- a/ts-packages/react-components/src/playground/index.tsx +++ b/ts-packages/react-components/src/playground/index.tsx @@ -3,6 +3,7 @@ import { PlaygroundButtons } from './buttons'; import { PlaygroundCheckboxes } from './checkboxes'; import { PlaygroundBasicSwitches } from './switches'; import { PlaygroundFonts } from './fonts'; +import { PlaygroundTheme } from './theme'; export const Playground: React.FC = () => ( <> @@ -15,6 +16,9 @@ export const Playground: React.FC = () => (

Switches

+

Theme

+ +

Fonts

diff --git a/ts-packages/react-components/src/playground/theme.tsx b/ts-packages/react-components/src/playground/theme.tsx new file mode 100644 index 0000000000..609dd86aa9 --- /dev/null +++ b/ts-packages/react-components/src/playground/theme.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { useTheme } from '@mui/material'; +import { MUIThemeExplorer } from './theme/MUIThemeExplorer'; +import { PaletteSwatches, PaletteSwatchesList } from './theme/PaletteSwatches'; + +export const PlaygroundTheme: React.FC = () => { + const theme = useTheme(); + return ( + <> +

Palette

+ +

Palette Explorer

+ + + ); +}; + +export const PlaygroundPalette: React.FC = () => { + const theme = useTheme(); + return ; +}; diff --git a/ts-packages/react-components/src/playground/theme/MUIThemeExplorer.tsx b/ts-packages/react-components/src/playground/theme/MUIThemeExplorer.tsx new file mode 100644 index 0000000000..032808b45d --- /dev/null +++ b/ts-packages/react-components/src/playground/theme/MUIThemeExplorer.tsx @@ -0,0 +1,96 @@ +import { Theme } from '@mui/material/styles'; +import * as React from 'react'; +import TreeView from '@mui/lab/TreeView'; +import TreeItem from '@mui/lab/TreeItem'; +import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; +import ArrowRightIcon from '@mui/icons-material/ArrowRight'; +import { Box } from '@mui/material'; + +export const MUIThemeExplorer: React.FC<{ + theme: Theme; +}> = ({ theme }) => ( + } + defaultExpandIcon={} + defaultEndIcon={
} + sx={{ height: 500, flexGrow: 1, width: '100%', overflowY: 'auto' }} + > + + +); + +const MUIThemeExplorerItem: React.FC<{ + path: string; + parentKey: string; + theme: Theme; + item: any; + isArrayItem?: boolean; +}> = ({ theme, item, parentKey, path, isArrayItem }) => { + if (!item) { + return null; + } + + if (typeof item === 'string') { + return ( + + + + + + + {!isArrayItem && {parentKey}} + + {item} + + + {path} + + + } + /> + ); + } + + if (Array.isArray(item)) { + return ( + + {item.map((i, idx) => ( + + ))} + + ); + } + + if (Object.keys(item).length) { + return ( + + {Object.keys(item).map((key) => ( + + ))} + + ); + } + + return null; +}; diff --git a/ts-packages/react-components/src/playground/theme/PaletteSwatches.tsx b/ts-packages/react-components/src/playground/theme/PaletteSwatches.tsx new file mode 100644 index 0000000000..a3968d9706 --- /dev/null +++ b/ts-packages/react-components/src/playground/theme/PaletteSwatches.tsx @@ -0,0 +1,64 @@ +import { Theme } from '@mui/material/styles'; +import * as React from 'react'; +import { Box, Grid, Typography } from '@mui/material'; +import flatten from 'flat'; + +const SWATCH_SIZE = '40px'; + +export const PaletteSwatches: React.FC<{ + theme: Theme; +}> = ({ theme }) => { + const swatches = React.useMemo(() => flatten(theme.palette), [theme.palette]); + return ( + + {Object.keys(swatches) + .filter((key) => typeof swatches[key] === 'string' && key !== 'mode') + .map((key) => ( + + + + ))} + + ); +}; + +export const PaletteSwatchesList: React.FC<{ + theme: Theme; +}> = ({ theme }) => { + const swatches = React.useMemo(() => flatten(theme.palette), [theme.palette]); + return ( + <> + {Object.keys(swatches) + .filter((key) => typeof swatches[key] === 'string' && key !== 'mode') + .map((key) => ( + + + + ))} + + ); +}; + +const PaletteSwatch: React.FC<{ + theme: Theme; + path: string; + value: string; + width?: string; +}> = ({ theme, path, value, width }) => ( + <> + + + + {path} + + + +); diff --git a/ts-packages/react-components/src/stories/Logo.stories.tsx b/ts-packages/react-components/src/stories/Logo.stories.tsx index cc5fb3ef36..9f7fe39bf5 100644 --- a/ts-packages/react-components/src/stories/Logo.stories.tsx +++ b/ts-packages/react-components/src/stories/Logo.stories.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { ComponentMeta } from '@storybook/react'; -import { Box } from '@mui/material'; import { NymLogo, NymWordmark } from '../components'; export default { @@ -13,9 +12,5 @@ export function Logo() { } export function Wordmark() { - return ( -
- -
- ); + return ; } diff --git a/ts-packages/react-components/src/stories/Playground.stories.tsx b/ts-packages/react-components/src/stories/Playground.stories.tsx index 4adeedcef0..2084896854 100644 --- a/ts-packages/react-components/src/stories/Playground.stories.tsx +++ b/ts-packages/react-components/src/stories/Playground.stories.tsx @@ -1,25 +1,24 @@ import * as React from 'react'; import { ComponentMeta } from '@storybook/react'; -import { NymThemeProvider } from '@nymproject/mui-theme'; +import { useTheme } from '@mui/material'; import { Playground } from '../playground'; +import { PlaygroundPalette } from '../playground/theme'; +import { MUIThemeExplorer } from '../playground/theme/MUIThemeExplorer'; export default { title: 'Playground', component: Playground, } as ComponentMeta; -export function LightMode() { - return ( - - - - ); +export function AllControls() { + return ; } -export function DarkMode() { - return ( - - - - ); +export function Palette() { + return ; +} + +export function ThemeExplorer() { + const theme = useTheme(); + return ; } diff --git a/yarn.lock b/yarn.lock index c1b741f890..5891f9ffc6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1144,6 +1144,39 @@ exec-sh "^0.3.2" minimist "^1.2.0" +"@date-io/core@^2.13.1": + version "2.13.1" + resolved "https://registry.yarnpkg.com/@date-io/core/-/core-2.13.1.tgz#f041765aff5c55fbc7e37fdd75fc1792733426d6" + integrity sha512-pVI9nfkf2qClb2Cxdq0Q4zJhdawMG4ybWZUVGifT78FDwzRMX2SwXBb55s5NRJk0HcIicDuxktmCtemZqMH1Zg== + +"@date-io/date-fns@^2.13.1": + version "2.13.1" + resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-2.13.1.tgz#19d8a245dab61c03c95ba492d679d98d2b0b4af5" + integrity sha512-8fmfwjiLMpFLD+t4NBwDx0eblWnNcgt4NgfT/uiiQTGI81fnPu9tpBMYdAcuWxaV7LLpXgzLBx1SYWAMDVUDQQ== + dependencies: + "@date-io/core" "^2.13.1" + +"@date-io/dayjs@^2.13.1": + version "2.13.1" + resolved "https://registry.yarnpkg.com/@date-io/dayjs/-/dayjs-2.13.1.tgz#98461d22ee98179b9f2dca3b36f1b618704ae593" + integrity sha512-5bL4WWWmlI4uGZVScANhHJV7Mjp93ec2gNeUHDqqLaMZhp51S0NgD25oqj/k0LqBn1cdU2MvzNpk/ObMmVv5cQ== + dependencies: + "@date-io/core" "^2.13.1" + +"@date-io/luxon@^2.13.1": + version "2.13.1" + resolved "https://registry.yarnpkg.com/@date-io/luxon/-/luxon-2.13.1.tgz#3701b3cabfffda5102af302979aa6e58acfda91a" + integrity sha512-yG+uM7lXfwLyKKEwjvP8oZ7qblpmfl9gxQYae55ifbwiTs0CoCTkYkxEaQHGkYtTqGTzLqcb0O9Pzx6vgWg+yg== + dependencies: + "@date-io/core" "^2.13.1" + +"@date-io/moment@^2.13.1": + version "2.13.1" + resolved "https://registry.yarnpkg.com/@date-io/moment/-/moment-2.13.1.tgz#122a51e4bdedf71ff3babb264427737dc022c1e6" + integrity sha512-XX1X/Tlvl3TdqQy2j0ZUtEJV6Rl8tOyc5WOS3ki52He28Uzme4Ro/JuPWTMBDH63weSWIZDlbR7zBgp3ZA2y1A== + dependencies: + "@date-io/core" "^2.13.1" + "@discoveryjs/json-ext@^0.5.0", "@discoveryjs/json-ext@^0.5.3": version "0.5.6" resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz#d5e0706cf8c6acd8c6032f8d54070af261bbbb2f" @@ -2643,6 +2676,19 @@ prop-types "^15.7.2" react-is "^17.0.2" +"@mui/base@5.0.0-alpha.71": + version "5.0.0-alpha.71" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.71.tgz#628f5ae10a8c015d61d3d1e6f04d66afc7500b90" + integrity sha512-LinacyjmZOS+roUqCyhrcbNIW7TlRf1U+15ETGwMn6biNXI9YEVgcc1Kak08CRtjM0yczxxzLWetiAjHMCVSjQ== + dependencies: + "@babel/runtime" "^7.17.2" + "@emotion/is-prop-valid" "^1.1.2" + "@mui/utils" "^5.4.4" + "@popperjs/core" "^2.11.2" + clsx "^1.1.1" + prop-types "^15.7.2" + react-is "^17.0.2" + "@mui/icons-material@^5.2.0": version "5.4.4" resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.4.4.tgz#0dc7b4e68cbbdfc675f09f0763be1100aad910af" @@ -2650,6 +2696,25 @@ dependencies: "@babel/runtime" "^7.17.2" +"@mui/lab@^5.0.0-alpha.72": + version "5.0.0-alpha.72" + resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.72.tgz#e784875bea3476be3437fc79dbee9c5b1e74535a" + integrity sha512-opml6yNpDvJzrCM9XzbckZMtfah+jFrYB8nB6kzORaQ3ixcMt+7RbFTPXG7NvQxW8VdxlGgfeBAMSWLDiFVMWA== + dependencies: + "@babel/runtime" "^7.17.2" + "@date-io/date-fns" "^2.13.1" + "@date-io/dayjs" "^2.13.1" + "@date-io/luxon" "^2.13.1" + "@date-io/moment" "^2.13.1" + "@mui/base" "5.0.0-alpha.71" + "@mui/system" "^5.5.0" + "@mui/utils" "^5.4.4" + clsx "^1.1.1" + prop-types "^15.7.2" + react-is "^17.0.2" + react-transition-group "^4.4.2" + rifm "^0.12.1" + "@mui/material@^5.0.1", "@mui/material@^5.2.2": version "5.4.4" resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.4.4.tgz#2652a07085bf107da590007286336640f605055e" @@ -2723,6 +2788,20 @@ csstype "^3.0.10" prop-types "^15.7.2" +"@mui/system@^5.5.0": + version "5.5.0" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.5.0.tgz#df7e540b12218db21a5edb16a6fa1d571d26455b" + integrity sha512-zFOfERv3Y4m5ehwTRR9cGaPuMvlD2qVXmFKC60P0Gte3aD6vYObyNriZv+mDVGlhDxZTZhxBrNPH3ns25xSFtQ== + dependencies: + "@babel/runtime" "^7.17.2" + "@mui/private-theming" "^5.4.4" + "@mui/styled-engine" "^5.4.4" + "@mui/types" "^7.1.2" + "@mui/utils" "^5.4.4" + clsx "^1.1.1" + csstype "^3.0.11" + prop-types "^15.7.2" + "@mui/types@^7.1.2": version "7.1.2" resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.1.2.tgz#4f3678ae77a7a3efab73b6e040469cc6df2144ac" @@ -2951,7 +3030,7 @@ schema-utils "^3.0.0" source-map "^0.7.3" -"@popperjs/core@^2.4.4", "@popperjs/core@^2.5.4", "@popperjs/core@^2.6.0": +"@popperjs/core@^2.11.2", "@popperjs/core@^2.4.4", "@popperjs/core@^2.5.4", "@popperjs/core@^2.6.0": version "2.11.2" resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.2.tgz#830beaec4b4091a9e9398ac50f865ddea52186b9" integrity sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA== @@ -7321,6 +7400,11 @@ csstype@^3.0.10, csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5" integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA== +csstype@^3.0.11: + version "3.0.11" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33" + integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw== + cyclist@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9" @@ -14814,6 +14898,11 @@ reusify@^1.0.4: resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76" integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== +rifm@^0.12.1: + version "0.12.1" + resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.12.1.tgz#8fa77f45b7f1cda2a0068787ac821f0593967ac4" + integrity sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg== + rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.3: version "2.7.1" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"